Weidget_Dashboard_Services :- Adding weidget in Dash board for jobs and showing weidget in Service profile. #528
@ -470,3 +470,34 @@ font-weight: normal;
|
||||
.fs-md-xlarge { font-size: 170% !important; }
|
||||
.fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
|
||||
}
|
||||
/* ====================== Thin Scrollbar (Global) ====================== */
|
||||
|
||||
.job-scroll-wrapper {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
|
||||
/* Firefox thin scrollbar */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #c8c8c8 transparent;
|
||||
}
|
||||
|
||||
/* Chrome, Edge, Safari */
|
||||
.job-scroll-wrapper::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.job-scroll-wrapper::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.job-scroll-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #c8c8c8;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.job-scroll-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #a0a0a0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -35,9 +35,7 @@ const Dashboard = () => {
|
||||
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
||||
|
||||
const { data,isLoading,isError } = useGetCollectionOverview();
|
||||
console.log("data-->", data);
|
||||
return (
|
||||
<div className="container-fluid mt-5">
|
||||
<div className="row gy-4">
|
||||
|
||||
@ -50,6 +50,11 @@ const ExpenseAnalysis = () => {
|
||||
chart: { type: "donut" },
|
||||
labels,
|
||||
legend: { show: false },
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: (value) => formatCurrency(value),
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
|
||||
colors: flatColors,
|
||||
plotOptions: {
|
||||
@ -127,7 +132,7 @@ const ExpenseAnalysis = () => {
|
||||
options={donutOptions}
|
||||
series={series}
|
||||
type="donut"
|
||||
width="70%"
|
||||
width="75%"
|
||||
height={320}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,234 +1,156 @@
|
||||
import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useJobsProgression } from "../../hooks/useDashboard_Data";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useServiceProject } from "../../hooks/useServiceProject";
|
||||
|
||||
const ServiceJobs = () => {
|
||||
const { projectId } = useParams();
|
||||
const { data, isLoading, isError } = useJobsProgression(projectId);
|
||||
|
||||
const jobs = data || {};
|
||||
const { data: projectData, isLoading: projectLoading } = useServiceProject(projectId);
|
||||
const tabMapping = [
|
||||
{ id: "tab-new", label: "My Jobs", key: "allJobs" },
|
||||
{ id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
|
||||
{ id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="col-xxl-4 col-lg-6">
|
||||
<div className="card h-100">
|
||||
<div className="">
|
||||
<div className="card page-min-h">
|
||||
<div className="card-header d-flex justify-content-between">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Service Jobs</h5>
|
||||
<p className="card-subtitle">All Projects</p>
|
||||
<h5 className="mb-1 fw-bold">Service Jobs</h5>
|
||||
<p className="card-subtitle">
|
||||
{projectLoading ? "Loading..." : projectData?.name || "All Projects"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-body p-0">
|
||||
<div className="nav-align-top">
|
||||
|
||||
{/* Tabs */}
|
||||
{/* ---------------- Tabs ---------------- */}
|
||||
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
|
||||
<li className="nav-item">
|
||||
<button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
|
||||
My Jobs
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
|
||||
Assigned
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
|
||||
In Progress
|
||||
</button>
|
||||
</li>
|
||||
{tabMapping.map((t, index) => (
|
||||
<li className="nav-item" key={t.id}>
|
||||
<button
|
||||
className={`nav-link ${index === 0 ? "active" : ""}`}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target={`#${t.id}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Tab Content */}
|
||||
{/* ---------------- Tab Content ---------------- */}
|
||||
<div className="tab-content border-0 mx-1 text-start">
|
||||
|
||||
{/* ---------------------- NEW TAB ---------------------- */}
|
||||
<div className="tab-pane fade show active" id="tab-new">
|
||||
{/* Entry 1 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
||||
<i className="bx bx-check-circle"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-success text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Myrtle Ullrich</h6>
|
||||
<p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
|
||||
{isLoading && (
|
||||
<div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{isError && (
|
||||
<p
|
||||
className="text-center"
|
||||
style={{
|
||||
height: "250px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
No data found
|
||||
</p>
|
||||
|
||||
)}
|
||||
|
||||
{!isLoading &&
|
||||
!isError &&
|
||||
tabMapping.map((t, index) => {
|
||||
const list = jobs[t.key] || [];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
|
||||
id={t.id}
|
||||
>
|
||||
{list.length === 0 ? (
|
||||
<p
|
||||
className="text-center"
|
||||
style={{
|
||||
height: "250px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
No jobs found
|
||||
</p>
|
||||
|
||||
) : (
|
||||
<div className="job-scroll-wrapper">
|
||||
{list.map((job, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<ul className="timeline mb-0">
|
||||
|
||||
{/* Assigned By */}
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
||||
<i className="bx bx-check-circle"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-success text-uppercase">
|
||||
Assigned By
|
||||
</small>
|
||||
</div>
|
||||
<h6 className="my-50">{job.assignedBy}</h6>
|
||||
<p className="text-body mb-0">
|
||||
{formatUTCToLocalTime(job.assignedAt)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Project */}
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Project</small>
|
||||
</div>
|
||||
<h6 className="my-50">{job.project}</h6>
|
||||
<p className="text-body mb-0">{job.title}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Divider */}
|
||||
{i < list.length - 1 && (
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Barry Schowalter</h6>
|
||||
<p className="text-body mb-0">939 Orange, California(CA), 92118</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
|
||||
{/* Entry 2 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
||||
<i className="bx bx-check-circle"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-success text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Veronica Herman</h6>
|
||||
<p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Helen Jacobs</h6>
|
||||
<p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* ---------------------- PREPARING TAB ---------------------- */}
|
||||
<div className="tab-pane fade" id="tab-preparing">
|
||||
|
||||
{/* Entry 1 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
||||
<i className="bx bx-time-five"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-warning text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Oliver Grant</h6>
|
||||
<p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Samantha Lee</h6>
|
||||
<p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
|
||||
{/* Entry 2 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
||||
<i className="bx bx-time-five"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-warning text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Marcus Howard</h6>
|
||||
<p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Daniel Foster</h6>
|
||||
<p className="text-body mb-0">312 Marina, California(CA), 94109</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* ---------------------- SHIPPING TAB ---------------------- */}
|
||||
<div className="tab-pane fade" id="tab-shipping">
|
||||
|
||||
{/* Entry 1 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
||||
<i className="bx bx-package"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-info text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">James Carter</h6>
|
||||
<p className="text-body mb-0">441 Market St, California(CA), 94111</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Linda Moore</h6>
|
||||
<p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
|
||||
{/* Entry 2 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
||||
<i className="bx bx-package"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-info text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Sarah Bennett</h6>
|
||||
<p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">George Simmons</h6>
|
||||
<p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -141,6 +141,7 @@ const DocumentFilterPanel = forwardRef(
|
||||
defaultRange={false}
|
||||
resetSignal={resetKey}
|
||||
maxDate={new Date()}
|
||||
className="w-100 mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -141,8 +141,8 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
|
||||
return (
|
||||
<DocumentContext.Provider value={contextValues}>
|
||||
<div className="mt-2">
|
||||
<div className="card page-min-h d-flex p-5">
|
||||
<div className="">
|
||||
<div className="card page-min-h table-responsive d-flex p-5">
|
||||
<DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
|
||||
<div className="row align-items-center">
|
||||
{/* Search */}
|
||||
|
||||
@ -178,7 +178,7 @@ const DocumentsList = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="table-responsive">
|
||||
<div className="">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="shadow-sm">
|
||||
|
||||
@ -71,7 +71,7 @@ const EmpAttendance = () => {
|
||||
<AttendLogs Id={attendanceId} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div className="table-responsive card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
id="DataTables_Table_0_length"
|
||||
@ -84,7 +84,7 @@ const EmpAttendance = () => {
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="text-nowrap">
|
||||
{!loading && data.length === 0 && (
|
||||
<div className="text-center py-5">No employee logs</div>
|
||||
)}
|
||||
|
||||
@ -89,179 +89,194 @@ const AssignOrg = ({ setStep }) => {
|
||||
if (isMasterserviceLoading || isLoading)
|
||||
return <div className="text-center">Loading....</div>;
|
||||
|
||||
const showTwoColumns = startStep === 3 && flowType !== "default";
|
||||
return (
|
||||
<div className="row text-black text-start mb-3">
|
||||
{/* Organization Info Display */}
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
||||
<img
|
||||
src="/public/assets/img/orgLogo.png"
|
||||
alt="logo"
|
||||
width={40}
|
||||
height={40}
|
||||
/> <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleEdit}
|
||||
className="btn btn-link p-0"
|
||||
>
|
||||
<i className="bx bx-edit text-secondary"></i>
|
||||
</button>
|
||||
{/* Left Column */}
|
||||
<div className={showTwoColumns ? "col-md-6" : "col-12"}>
|
||||
{/* Organization Info Display */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<img src="/public/assets/img/orgLogo.png" alt="logo" width={40} height={40} />
|
||||
<p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
|
||||
</div>
|
||||
<button type="button" onClick={handleEdit} className="btn btn-link p-0">
|
||||
<i className="bx bx-edit text-secondary"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex text-secondary mb-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div>
|
||||
{/* Contact Info */}
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
|
||||
<div className="d-flex text-secondary mb-5">
|
||||
<i className="bx bx-sm bx-info-circle me-2" /> Organization Info
|
||||
</div>
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.contactPerson}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
<i className="bx bx-sm me-1 bx-phone" /> Contact Number :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.contactNumber}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
||||
</label>
|
||||
<div className="text-muted text-wrap">{orgData.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ maxWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-2 bx-barcode"></i>
|
||||
Service Provider Id (SPRID) :
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ maxWidth: "130px" }}>
|
||||
<i className="bx bx-sm me-2 bx-barcode"></i> Service Provider Id SPRID :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.sprid}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-1 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-1 mb-0 fw-semibold" style={{ minWidth: "135px" }}>
|
||||
<i className='bx bx-sm me-1 bx-map'></i> Address :
|
||||
</label>
|
||||
<div className="text-muted text-start">{orgData.address}</div>
|
||||
<div className="text-muted">{orgData.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div className="text-black text-start">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* Show fields only if flowType is NOT default */}
|
||||
{flowType !== "default" && (
|
||||
<>
|
||||
{/* Organization Type */}
|
||||
<div className="mb-3 text-start">
|
||||
<Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
|
||||
Organization Type
|
||||
</Label>
|
||||
<div className="d-flex flex-wrap gap-3 mt-1">
|
||||
{orgType?.data.map((type) => (
|
||||
<div
|
||||
key={type.id}
|
||||
className="form-check d-flex align-items-center gap-2 p-0 m-0"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id={`organizationType-${type.id}`}
|
||||
value={type.id}
|
||||
{...register("organizationTypeId")}
|
||||
className="form-check-input m-0"
|
||||
/>
|
||||
<label
|
||||
className="form-check-label m-0"
|
||||
htmlFor={`organizationType-${type.id}`}
|
||||
>
|
||||
{type.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.organizationTypeId && (
|
||||
<span className="text-danger">
|
||||
{errors.organizationTypeId.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Assigned Services */}
|
||||
{flowType !== "default" && projectServices?.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold mb-2 d-flex align-items-center gap-1">
|
||||
<i className="bx bx-cog fs-5"></i>
|
||||
Assigned Services:
|
||||
</label>
|
||||
|
||||
{/* Services */}
|
||||
<div className="mb-3">
|
||||
<Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
|
||||
Select Services
|
||||
</Label>
|
||||
{mergedServices?.map((service) => (
|
||||
<div key={service.id} className="form-check mb-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={service.id}
|
||||
{...register("serviceIds")}
|
||||
className="form-check-input"
|
||||
/>
|
||||
<label className="form-check-label">{service.name}</label>
|
||||
</div>
|
||||
))}
|
||||
{errors.serviceIds && (
|
||||
<div className="text-danger small">
|
||||
{errors.serviceIds.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{projectServices.map((service) => (
|
||||
<span
|
||||
key={service.id}
|
||||
className="badge bg-label-secondary"
|
||||
>
|
||||
{service.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Buttons: Always visible */}
|
||||
<div className="d-flex justify-content-between mt-5">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={handleBack}
|
||||
disabled={isPending}
|
||||
>
|
||||
<i className="bx bx-chevron-left"></i>Back
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending
|
||||
? "Please wait..."
|
||||
: flowType === "default"
|
||||
? "Assign to Organization"
|
||||
: "Assign to Project"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
{showTwoColumns && (
|
||||
<div className="col-md-6">
|
||||
{/* Form Section */}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{flowType !== "default" && (
|
||||
<>
|
||||
{/* Organization Type */}
|
||||
<div className="mb-3">
|
||||
<Label htmlFor="organizationTypeId" className="mb-2 fw-semibold" required>
|
||||
Organization Type
|
||||
</Label>
|
||||
<div className="d-flex flex-wrap gap-3 mt-1">
|
||||
{orgType?.data.map((type) => (
|
||||
<div key={type.id} className="form-check d-flex align-items-center gap-2 p-0 m-0">
|
||||
<input
|
||||
type="radio"
|
||||
id={`organizationType-${type.id}`}
|
||||
value={type.id}
|
||||
{...register("organizationTypeId")}
|
||||
className="form-check-input m-0"
|
||||
/>
|
||||
<label className="form-check-label m-0" htmlFor={`organizationType-${type.id}`}>
|
||||
{type.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.organizationTypeId && (
|
||||
<span className="text-danger">{errors.organizationTypeId.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div className="mb-4">
|
||||
<Label htmlFor="serviceIds" className="mb-6 fw-semibold" required>
|
||||
Choose Services
|
||||
</Label>
|
||||
|
||||
{/* FIXED HEIGHT + SCROLLBAR */}
|
||||
<div
|
||||
className="row g-3"
|
||||
style={{
|
||||
maxHeight: "290px",
|
||||
overflowY: "auto",
|
||||
paddingRight: "6px",
|
||||
}}
|
||||
>
|
||||
{mergedServices
|
||||
?.slice() // copy array
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((service) => (
|
||||
<div key={service.id} className="col-12 col-md-6">
|
||||
<div className="card h-100" style={{ minHeight: "120px" }}>
|
||||
<div className="card-body d-flex align-items-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={service.id}
|
||||
{...register("serviceIds")}
|
||||
className="form-check-input me-2 mt-1"
|
||||
id={`service-${service.id}`}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`service-${service.id}`}
|
||||
className="fw-semibold mb-1 d-block"
|
||||
>
|
||||
{service.name}
|
||||
</label>
|
||||
|
||||
<small className="text-muted d-block text-wrap">
|
||||
{service.description?.length > 80
|
||||
? service.description.substring(0, 80) + "..."
|
||||
: service.description}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.serviceIds && (
|
||||
<div className="text-danger small mt-1">{errors.serviceIds.message}</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
{/* Buttons */}
|
||||
<div className="d-flex justify-content-between mt-6">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={handleBack}
|
||||
disabled={isPending}
|
||||
>
|
||||
<i className="bx bx-chevron-left"></i> Back
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||
{isPending
|
||||
? "Please wait..."
|
||||
: flowType === "default"
|
||||
? "Assign to Organization"
|
||||
: "Assign to Project"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -96,12 +96,12 @@ const ManagOrg = () => {
|
||||
return (
|
||||
<FormProvider {...method}>
|
||||
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-1 text-start">
|
||||
<div className="mb-3 text-start mt-3">
|
||||
<Label htmlFor="name" required>
|
||||
Organization Name
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
@ -109,12 +109,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<div className="mb-3 text-start">
|
||||
<Label htmlFor="contactPerson" required>
|
||||
Contact Person
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
{...register("contactPerson")}
|
||||
/>
|
||||
{errors.contactPerson && (
|
||||
@ -122,12 +122,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<div className="mb-3 text-start">
|
||||
<Label htmlFor="contactNumber" required>
|
||||
Contact Number
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
{...register("contactNumber")}
|
||||
/>
|
||||
{errors.contactNumber && (
|
||||
@ -135,12 +135,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<div className="mb-3 text-start">
|
||||
<Label htmlFor="gstNumber">
|
||||
GST Number
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
{...register("gstNumber")}
|
||||
/>
|
||||
{errors.gstNumber && (
|
||||
@ -149,11 +149,11 @@ const ManagOrg = () => {
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="email" required>
|
||||
<Label htmlFor="email">
|
||||
Email Address
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
{...register("email")}
|
||||
/>
|
||||
{errors.email && (
|
||||
@ -161,10 +161,10 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<div className="mb-3 text-start">
|
||||
<SelectMultiple
|
||||
name="serviceIds"
|
||||
label="Select Service"
|
||||
label="Select Service Provided"
|
||||
options={service?.data}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
@ -175,12 +175,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<div className="mb-3 text-start">
|
||||
<Label htmlFor="address" required>
|
||||
Address
|
||||
</Label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
{...register("address")}
|
||||
rows={2}
|
||||
/>
|
||||
|
||||
@ -1,23 +1,22 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
useAssignOrgToTenant,
|
||||
useOrganizationBySPRID,
|
||||
useOrganizationModal,
|
||||
} from "../../hooks/useOrganization";
|
||||
import Label from "../common/Label";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { spridSchema } from "./OrganizationSchema";
|
||||
import { OrgCardSkeleton } from "./OrganizationSkeleton";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
// Zod schema: only allow exactly 4 digits
|
||||
|
||||
const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
const { onClose, startStep, flowType, onOpen, prevStep, orgData } =
|
||||
useOrganizationModal();
|
||||
const OrgPickerFromSPId = () => {
|
||||
const { onOpen, prevStep, flowType } = useOrganizationModal();
|
||||
const clientQuery = useQueryClient();
|
||||
|
||||
const [activeTab, setActiveTab] = useState("search"); // search | create
|
||||
const [SPRID, setSPRID] = useState("");
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -28,127 +27,129 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
defaultValues: { spridSearchText: "" },
|
||||
});
|
||||
|
||||
const [SPRID, setSPRID] = useState("");
|
||||
|
||||
const { data, isLoading, isError, error, refetch } =
|
||||
useOrganizationBySPRID(SPRID);
|
||||
const { data, isLoading } = useOrganizationBySPRID(SPRID);
|
||||
|
||||
const onSubmit = (formdata) => {
|
||||
setSPRID(formdata.spridSearchText);
|
||||
};
|
||||
|
||||
const handleCrateOrg = () => {
|
||||
const handleCreateOrg = () => {
|
||||
clientQuery.removeQueries({ queryKey: ["organization"] });
|
||||
onOpen({ startStep: 4, orgData: null });
|
||||
};
|
||||
|
||||
const SP = watch("spridSearchText");
|
||||
|
||||
return (
|
||||
<div className="d-block mt-4">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row align-items-center g-2 mb-3">
|
||||
{/* Input Section */}
|
||||
<div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
|
||||
<Label className="text-nowrap mb-1 mb-md-0" required>
|
||||
Search by SPRID
|
||||
</Label>
|
||||
<input
|
||||
type="search"
|
||||
{...register("spridSearchText")}
|
||||
className="form-control form-control-sm flex-grow-1"
|
||||
placeholder="Enter SPRID"
|
||||
maxLength={4}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
{/* Tabs */}
|
||||
<ul className="nav nav-tabs mb-8">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${activeTab === "search" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("search")}
|
||||
type="button"
|
||||
>
|
||||
Search Organization
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${activeTab === "create" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("create")}
|
||||
type="button"
|
||||
>
|
||||
Assign Organization
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Button Section */}
|
||||
<div className="col-12 col-md-4 text-md-start text-center mt-2 mt-md-0">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary w-100 w-md-auto"
|
||||
>
|
||||
<i className="bx bx-sm bx-search-alt-2"></i> Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/* Tab Content */}
|
||||
{activeTab === "search" && (
|
||||
<>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row align-items-end mb-3">
|
||||
|
||||
<div className="text-start danger-text">
|
||||
{" "}
|
||||
{errors.spridSearchText && (
|
||||
<p className="text-danger small mt-1">
|
||||
{errors.spridSearchText.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{/* Search Input */}
|
||||
<div className="col-12 col-md-8 text-start">
|
||||
<Label required className="mb-1">Search by SPRID</Label>
|
||||
<input
|
||||
type="search"
|
||||
{...register("spridSearchText")}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Enter SPRID"
|
||||
maxLength={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ---- Organization list ---- */}
|
||||
{isLoading ? (
|
||||
<OrgCardSkeleton />
|
||||
) : data && data?.data.length > 0 ? (
|
||||
<div className="py-2 text-tiny text-center">
|
||||
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||
{data.data.map((org) => (
|
||||
<div className="d-flex flex-row gap-2 text-start text-black mt-3">
|
||||
<div className="mt-1">
|
||||
<img
|
||||
src="/public/assets/img/orgLogo.png"
|
||||
alt="logo"
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
|
||||
<span className="fs-6 fw-semibold mb-2">{org.name}</span>
|
||||
<div className="d-flex gap-2">
|
||||
<small
|
||||
className=" fw-semibold text-uppercase mb-2"
|
||||
style={{ letterSpacing: "1px" }}
|
||||
>
|
||||
SPRID :{" "}
|
||||
</small>
|
||||
<small className="fs-6">{org.sprid}</small>
|
||||
</div>
|
||||
<div className="d-flex flex-row gap-2 mb-4">
|
||||
<small className="text-small fw-semibold ">Address:</small>
|
||||
<div className="d-flex text-wrap">{org.address}</div>
|
||||
</div>
|
||||
<div className="m-0 p-0">
|
||||
{" "}
|
||||
{/* Search Button (always at end) */}
|
||||
<div className="col-12 col-md d-flex justify-content-md-end mt-2 mt-md-0">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
>
|
||||
<i className="bx bx-sm bx-search-alt-2 me-1"></i>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{errors.spridSearchText && (
|
||||
<p className="text-danger small mt-1">{errors.spridSearchText.message}</p>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<OrgCardSkeleton />
|
||||
) : data && data?.data.length > 0 ? (
|
||||
<div className="d-flex flex-column gap-2">
|
||||
{data.data.map((org) => (
|
||||
<div key={org.sprid} className="d-flex gap-2 text-start mt-5">
|
||||
<div className="mt-2"><img src="/public/assets/img/orgLogo.png" alt="logo" width={50} height={50} /></div>
|
||||
<div className="flex-grow-1">
|
||||
<span className="fs-6 fw-semibold mb-2">{org.name}</span>
|
||||
<div className="d-flex gap-2 mt-2">
|
||||
<small className="fw-semibold text-uppercase">SPRID :</small>
|
||||
<small>{org.sprid}</small>
|
||||
</div>
|
||||
<div className="d-flex gap-2 mt-2">
|
||||
<small className="fw-semibold">Address:</small>
|
||||
<div>{org.address}</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary mt-5"
|
||||
onClick={() => onOpen({ startStep: 3, orgData: org })}
|
||||
>
|
||||
Select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : SPRID ? (
|
||||
<div className="py-3 text-center text-secondary">
|
||||
No organization found for "{SPRID}"
|
||||
</div>
|
||||
) : null}
|
||||
<div className="py-2 text-center text-tiny text-black">
|
||||
<small className="d-block text-secondary">
|
||||
Do not have SPRID or could not find organization ?
|
||||
</small>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary mt-3"
|
||||
onClick={handleCrateOrg}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Create New Organization
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : SPRID ? (
|
||||
<div className="py-3 text-center text-secondary">
|
||||
No organization found for "{SPRID}"
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ---- Footer buttons ---- */}
|
||||
<div className={`d-flex text-secondary mt-3`}>
|
||||
{flowType !== "default" && (
|
||||
{activeTab === "create" && (
|
||||
<div className="text-center py-5">
|
||||
<small className="d-block text-secondary">
|
||||
{/* Do not have SPRID or want to create a new organization? */}
|
||||
</small>
|
||||
<button type="button" className="btn btn-sm btn-primary" onClick={handleCreateOrg}>
|
||||
<i className="bx bx-plus-circle me-2"></i> Create New Organization
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer Back button */}
|
||||
{flowType !== "default" && (
|
||||
<div className="d-flex text-secondary mt-7">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
@ -156,8 +157,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
>
|
||||
<i className="bx bx-chevron-left"></i> Back
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -40,44 +40,46 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
const contactList = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
label: (
|
||||
<div style={{ width: "290px", maxWidth: "300px", overflow: "hidden", textOverflow: "ellipsis" }}>
|
||||
Name
|
||||
</div>
|
||||
),
|
||||
getValue: (org) => (
|
||||
<div className="d-flex gap-2 py-1 ">
|
||||
<i className="bx bx-buildings"></i>
|
||||
<span
|
||||
className="text-truncate d-inline-block "
|
||||
style={{ maxWidth: "150px" }}
|
||||
className="text-wrap d-inline-block "
|
||||
>
|
||||
{org?.name || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
align: "text-start",
|
||||
align: "text-start"
|
||||
},
|
||||
{
|
||||
key: "sprid",
|
||||
label: "SPRID",
|
||||
getValue: (org) => (
|
||||
<span
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
className="text-warp d-inline-block"
|
||||
>
|
||||
{org?.sprid || "N/A"}
|
||||
</span>
|
||||
),
|
||||
align: "text-center",
|
||||
align: "text-start",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="d-block">
|
||||
<div className="d-flex align-items-center gap-2 mb-1">
|
||||
<div className="d-flex align-items-center gap-2 mb-4 mt-4">
|
||||
<Label className="mb-0">{title}</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText?.(e.target.value)}
|
||||
className="form-control form-control-sm w-auto"
|
||||
className="form-control form-control-sm w-75"
|
||||
placeholder="Enter Organization Name"
|
||||
/>
|
||||
</div>
|
||||
@ -126,7 +128,8 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
onOpen({ startStep: 3, orgData: row })
|
||||
}
|
||||
>
|
||||
<i className='bx bx-right-arrow-circle text-primary'></i>
|
||||
<i className="bx bx-plus-circle text-primary"></i>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -138,10 +141,9 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">
|
||||
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2 mt-4">
|
||||
<small className="mb-1">
|
||||
Could not find organization in your database? Please search within the
|
||||
global database.
|
||||
Could not find organization in your database? Create New Organization
|
||||
</small>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -22,7 +22,7 @@ import OrgPickerfromTenant from "./OrgPickerfromTenant";
|
||||
import ViewOrganization from "./ViewOrganization";
|
||||
|
||||
const OrganizationModal = () => {
|
||||
const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
|
||||
const { isOpen, orgData, startStep,flowType, onOpen, onClose, onToggle } =
|
||||
useOrganizationModal();
|
||||
const { data: masterService, isLoading } = useServices();
|
||||
const [searchText, setSearchText] = useState();
|
||||
@ -54,7 +54,7 @@ const OrganizationModal = () => {
|
||||
};
|
||||
|
||||
const RenderTitle = useMemo(() => {
|
||||
if (orgData && startStep === 3 ) {
|
||||
if (orgData && startStep === 3) {
|
||||
return "Assign Organization";
|
||||
}
|
||||
|
||||
@ -71,17 +71,17 @@ const OrganizationModal = () => {
|
||||
if (startStep === 3) {
|
||||
return "Assign Organization";
|
||||
}
|
||||
if(startStep === 5){
|
||||
if (startStep === 5) {
|
||||
return "Organization Details"
|
||||
}
|
||||
|
||||
return `${orgData ? "Update":"Create"} Organization`;
|
||||
return `${orgData ? "Update" : "Assign"} Organization`;
|
||||
}, [startStep, orgData]);
|
||||
|
||||
const contentBody = (
|
||||
<div>
|
||||
{/* ---------- STEP 1: Service Provider- Form Own Tenant list ---------- */}
|
||||
{startStep === 1 && <OrgPickerfromTenant title="Find Organization" />}
|
||||
{startStep === 1 && <OrgPickerfromTenant title="Search Organization" />}
|
||||
|
||||
{startStep === 2 && (
|
||||
<OrgPickerFromSPId
|
||||
@ -99,13 +99,14 @@ const OrganizationModal = () => {
|
||||
{/* ---------- STEP 3: Add New Organization ---------- */}
|
||||
{startStep === 4 && <ManagOrg />}
|
||||
|
||||
{/* ---------- STEP 3: View Organization ---------- */}
|
||||
{startStep === 5 && <ViewOrganization orgId={orgData}/>}
|
||||
{/* ---------- STEP 3: View Organization ---------- */}
|
||||
{startStep === 5 && <ViewOrganization orgId={orgData} />}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
size={startStep === 3 && flowType !== "default" ? "xl" : "md"}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={RenderTitle}
|
||||
|
||||
@ -15,8 +15,7 @@ export const organizationSchema = z.object({
|
||||
address: z.string().min(1, { message: "Address is required!" }),
|
||||
email: z
|
||||
.string().trim()
|
||||
.min(1, { message: "Email is required" })
|
||||
.email("Invalid email address"),
|
||||
.optional(),
|
||||
serviceIds: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "Service isrequired" }),
|
||||
|
||||
@ -4,18 +4,19 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const OrganizationsList = ({searchText}) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const searchString = useDebounce(searchText,500)
|
||||
const OrganizationsList = ({ searchText }) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const searchString = useDebounce(searchText, 500)
|
||||
const {
|
||||
data = [],
|
||||
isLoading,
|
||||
isFetching,
|
||||
isError,
|
||||
error,
|
||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString);
|
||||
const {onClose, startStep, flowType, onOpen,orgData } = useOrganizationModal();
|
||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true, null, searchString);
|
||||
const { onClose, startStep, flowType, onOpen, orgData } = useOrganizationModal();
|
||||
|
||||
const organizationsColumns = [
|
||||
{
|
||||
@ -39,21 +40,21 @@ const OrganizationsList = ({searchText}) => {
|
||||
label: "Contact Person",
|
||||
getValue: (org) => (
|
||||
(
|
||||
<div className="d-flex align-items-center ps-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={(org?.name || "").trim().split(" ")[0] || ""}
|
||||
lastName={(org?.name || "").trim().split(" ")[1] || ""}
|
||||
/>
|
||||
<span
|
||||
className="text-truncate d-inline-block "
|
||||
style={{ maxWidth: "150px" }}
|
||||
>
|
||||
{org?.name || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
<div className="d-flex align-items-center ps-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={(org?.name || "").trim().split(" ")[0] || ""}
|
||||
lastName={(org?.name || "").trim().split(" ")[1] || ""}
|
||||
/>
|
||||
<span
|
||||
className="text-truncate d-inline-block "
|
||||
style={{ maxWidth: "150px" }}
|
||||
>
|
||||
{org?.name || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
align: "text-start",
|
||||
},
|
||||
@ -67,7 +68,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
key: "email",
|
||||
label: "Email",
|
||||
getValue: (org) => (
|
||||
<span
|
||||
<span
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
>
|
||||
@ -84,7 +85,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
},
|
||||
];
|
||||
|
||||
const paginate = (page) => {
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
@ -93,73 +94,81 @@ const OrganizationsList = ({searchText}) => {
|
||||
if (isError) return <div>{error?.message || "Something went wrong"}</div>;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card-datatable table-responsive overflow-auto"
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2 ">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="table_header_border">
|
||||
{organizationsColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className="sorting d-table-cell"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className={`${col.align}`}>{col.label}</div>
|
||||
</th>
|
||||
))}
|
||||
<th className="sticky-action-column bg-white text-center">
|
||||
Action
|
||||
<div
|
||||
className="card-datatable table-responsive overflow-auto"
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2 ">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="table_header_border">
|
||||
{organizationsColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className="sorting d-table-cell"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className={`${col.align}`}>{col.label}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data?.data?.length > 0 ? (
|
||||
data?.data?.map((org) => (
|
||||
<tr key={org.id}>
|
||||
{organizationsColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
style={{ height: "50px" }}
|
||||
className={`d-table-cell ${col.align ?? ""}`}
|
||||
>
|
||||
{col.customRender
|
||||
? col.customRender(org)
|
||||
: col.getValue(org)}
|
||||
</td>
|
||||
))}
|
||||
<td className="sticky-action-column ">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i className="bx bx-show text-primary cursor-pointer" onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
|
||||
<i className="bx bx-trash text-danger cursor-not-allowed"></i>
|
||||
</div>
|
||||
))}
|
||||
<th className="sticky-action-column bg-white text-center">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data?.data?.length > 0 ? (
|
||||
data?.data?.map((org) => (
|
||||
<tr key={org.id}>
|
||||
{organizationsColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
style={{ height: "50px" }}
|
||||
className={`d-table-cell ${col.align ?? ""}`}
|
||||
>
|
||||
{col.customRender
|
||||
? col.customRender(org)
|
||||
: col.getValue(org)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={organizationsColumns.length + 1}
|
||||
className="text-center"
|
||||
>
|
||||
<p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
|
||||
))}
|
||||
<td className="sticky-action-column ">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i className="bx bx-show text-primary cursor-pointer" onClick={() => onOpen({ startStep: 5, orgData: org.id, flowType: "view" })}></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer" onClick={() => onOpen({ startStep: 4, orgData: org, flowType: "edit" })}></i>
|
||||
<i className="bx bx-trash text-danger cursor-not-allowed"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={organizationsColumns.length + 1}
|
||||
className="text-center"
|
||||
style={{ height: "250px" }}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="d-flex justify-content-center align-items-center h-100">
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
) : (
|
||||
<p className="fw-semibold mt-3">Not Found Organization</p>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
)}
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ const ProjectOrganizations = () => {
|
||||
const { onOpen, startStep, flowType } = useOrganizationModal();
|
||||
const selectedProject = useSelectedProject();
|
||||
return (
|
||||
<div className="card pb-10" >
|
||||
<div className="card pb-10 " >
|
||||
<div className="card-header">
|
||||
<div className="d-flex justify-content-end px-2">
|
||||
<button
|
||||
@ -21,7 +21,7 @@ const ProjectOrganizations = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row modal-min-h">
|
||||
<div className="modal-min-h table-responsive">
|
||||
<ProjectAssignedOrgs />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@ import GlobalModel from "../common/GlobalModel";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
|
||||
import ServiceProfile from "./ServiceProfile";
|
||||
import ServiceJobs from "../Dashboard/ServiceJobs";
|
||||
|
||||
const ServiceProjectProfile = () => {
|
||||
const { projectId } = useParams();
|
||||
@ -34,12 +35,15 @@ const ServiceProjectProfile = () => {
|
||||
|
||||
<div className="row py-2">
|
||||
<div className="col-md-6 col-lg-5 order-2 mb-6">
|
||||
<ServiceProfile data={data} setIsOpenModal={setIsOpenModal}/>
|
||||
<ServiceProfile data={data} setIsOpenModal={setIsOpenModal} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-lg-7 order-2 mb-6">
|
||||
<ServiceBranch />
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-5 order-2 mb-6">
|
||||
<ServiceJobs/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -56,8 +56,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
// onSubmitTenant(data);
|
||||
// onNext();
|
||||
const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
|
||||
// CreateTenant(tenantPayload);
|
||||
console.log(tenantPayload)
|
||||
CreateTenant(tenantPayload);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -65,6 +65,7 @@ const TenantFilterPanel = ({ onApply }) => {
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-strat mb-2">
|
||||
|
||||
@ -178,6 +178,15 @@ export const useExpenseStatus = (projectId) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
export const useJobsProgression = (projectId) => {
|
||||
return useQuery({
|
||||
queryKey: ["serviceProjectJobs", projectId],
|
||||
queryFn: async () => {
|
||||
const resp = await GlobalRepository.getJobsProgression(projectId);
|
||||
return resp.data;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useExpenseDataByProject = (projectId, categoryId, months) => {
|
||||
return useQuery({
|
||||
|
||||
@ -202,7 +202,7 @@ const AttendancePage = () => {
|
||||
</div>
|
||||
|
||||
{/* Search + Organization filter */}
|
||||
<div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav">
|
||||
<div className="col-12 col-md-auto mb-2 mt-3 mt-md-0 ms-md-auto nav">
|
||||
<div className="row g-2">
|
||||
<div className="col-12 col-sm-6">
|
||||
<select
|
||||
|
||||
@ -47,8 +47,10 @@ const OrganizationPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card page-min-h px-sm-4">
|
||||
<OrganizationsList searchText={searchText} />
|
||||
<div className="card table-responsive page-min-h">
|
||||
<div className="card-body">
|
||||
<OrganizationsList searchText={searchText} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -64,6 +64,8 @@ const GlobalRepository = {
|
||||
|
||||
getExpenseStatus: (projectId) => api.get(`/api/Dashboard/expense/pendings${projectId ? `?projectId=${projectId}` : ""}`),
|
||||
|
||||
getJobsProgression: (projectId) => api.get(`/api/Dashboard/job/progression${projectId ? `?projectId=${projectId}` : ""}`),
|
||||
|
||||
getExpenseDataByProject: (projectId, categoryId, months) => {
|
||||
let url = `api/Dashboard/expense/monthly`
|
||||
const queryParams = [];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user