public/assets/css/core-extend.css

@@ -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;
+}
+
+

src/components/Dashboard/Dashboard.jsx

@@ -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">

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -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>

src/components/Dashboard/ServiceJobs.jsx

@@ -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="">
-      <div className="card h-100">
+      <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>
+            <h5 className="mb-1 fw-bold">Service Jobs</h5>
-            <p className="card-subtitle">All Projects</p>
+            <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">
+              {tabMapping.map((t, index) => (
-                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
+                <li className="nav-item" key={t.id}>
-                  My Jobs
+                  <button
-                </button>
+                    className={`nav-link ${index === 0 ? "active" : ""}`}
-              </li>
+                    data-bs-toggle="tab"
-              <li className="nav-item">
+                    data-bs-target={`#${t.id}`}
-                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
+                  >
-                  Assigned
+                    {t.label}
-                </button>
-              </li>
-              <li className="nav-item">
-                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
-                  In Progress
                   </button>
                 </li>
+              ))}
             </ul>
 
-            {/* Tab Content */}
+            {/* ---------------- Tab Content ---------------- */}
             <div className="tab-content border-0 mx-1 text-start">
 
-              {/* ---------------------- NEW TAB ---------------------- */}
+              {isLoading && (
-              <div className="tab-pane fade show active" id="tab-new">
+                <div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
-                {/* Entry 1 */}
+                  <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">Sender</small>
+                                      <small className="text-success text-uppercase">
+                                        Assigned By
+                                      </small>
                                     </div>
-                      <h6 className="my-50">Myrtle Ullrich</h6>
+                                    <h6 className="my-50">{job.assignedBy}</h6>
-                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                                    <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">Receiver</small>
+                                      <small className="text-primary text-uppercase">Project</small>
                                     </div>
-                      <h6 className="my-50">Barry Schowalter</h6>
+                                    <h6 className="my-50">{job.project}</h6>
-                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
+                                    <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>
-
+                              )}
-                {/* Entry 2 */}
+                            </React.Fragment>
-                <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>
   );

src/components/Documents/DocumentFilterPanel.jsx

@@ -141,6 +141,7 @@ const DocumentFilterPanel = forwardRef(
               defaultRange={false}
               resetSignal={resetKey}
               maxDate={new Date()}
+              className="w-100 mt-2"
             />
           </div>
 

src/components/Documents/Documents.jsx

@@ -141,8 +141,8 @@ const Documents = ({ Document_Entity, Entity }) => {
 
   return (
     <DocumentContext.Provider value={contextValues}>
-      <div className="mt-2">
+      <div className="">
-        <div className="card page-min-h d-flex p-5">
+        <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 */}

src/components/Documents/DocumentsList.jsx

@@ -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">

src/components/Employee/EmpAttendance.jsx

@@ -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>
           )}

src/components/Organization/AssignOrg.jsx

@@ -89,106 +89,98 @@ 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">
+      {/* Left Column */}
+      <div className={showTwoColumns ? "col-md-6" : "col-12"}>
         {/* Organization Info Display */}
-      <div className="col-12 mb-3">
+        <div className="d-flex justify-content-between align-items-center mb-3">
-        <div className="d-flex justify-content-between align-items-center text-start mb-1">
+          <div className="d-flex align-items-center gap-2">
-          <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} />
-            <img
+            <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
-              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">
-            <button
-              type="button"
-              onClick={handleEdit}
-              className="btn btn-link p-0"
-            >
             <i className="bx bx-edit text-secondary"></i>
           </button>
         </div>
+
+        <div className="d-flex text-secondary mb-5">
+          <i className="bx bx-sm bx-info-circle me-2" /> Organization Info
         </div>
-      </div>
+
-      <div className="d-flex text-secondary mb-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div>
+        <div className="mb-5 d-flex">
-      {/* Contact Info */}
+          <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
-      <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 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="mb-5 d-flex">
-        <div className="d-flex">
+          <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
-          <label
+            <i className="bx bx-sm me-1 bx-phone" /> Contact Number :
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
-          >
-            <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
-      </div>
+
-      <div className="col-md-12 mb-4">
+        <div className="mb-5 d-flex">
-        <div className="d-flex">
+          <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
-          <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="mb-5 d-flex">
-        <div className="d-flex">
+          <label className="form-label me-2 mb-0 fw-semibold" style={{ maxWidth: "130px" }}>
-          <label
+            <i className="bx bx-sm me-2 bx-barcode"></i> Service Provider Id SPRID :
-            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="mb-5 d-flex">
-      <div className="col-12 mb-4">
+          <label className="form-label me-1 mb-0 fw-semibold" style={{ minWidth: "135px" }}>
-        <div className="d-flex">
-          <label
-            className="form-label me-1 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
-          >
             <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 */}
+        {/* Assigned Services */}
-      <div className="text-black text-start">
+        {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>
+
+            <div className="d-flex flex-wrap gap-2">
+              {projectServices.map((service) => (
+                <span
+                  key={service.id}
+                  className="badge bg-label-secondary"
+                >
+                  {service.name}
+                </span>
+              ))}
+            </div>
+            
+          </div>
+        )}
+      </div>
+
+      {/* Right Column */}
+      {showTwoColumns && (
+        <div className="col-md-6">
+          {/* Form Section */}
           <form onSubmit={handleSubmit(onSubmit)}>
-          {/* Show fields only if flowType is NOT default */}
             {flowType !== "default" && (
               <>
                 {/* Organization Type */}
-              <div className="mb-3 text-start">
+                <div className="mb-3">
-                <Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
+                  <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
+                      <div key={type.id} className="form-check d-flex align-items-center gap-2 p-0 m-0">
-                      key={type.id}
-                      className="form-check d-flex align-items-center gap-2 p-0 m-0"
-                    >
                         <input
                           type="radio"
                           id={`organizationType-${type.id}`}
@@ -196,49 +188,77 @@ const AssignOrg = ({ setStep }) => {
                           {...register("organizationTypeId")}
                           className="form-check-input m-0"
                         />
-                      <label
+                        <label className="form-check-label m-0" htmlFor={`organizationType-${type.id}`}>
-                        className="form-check-label m-0"
-                        htmlFor={`organizationType-${type.id}`}
-                      >
                           {type.name}
                         </label>
                       </div>
                     ))}
                   </div>
                   {errors.organizationTypeId && (
-                  <span className="text-danger">
+                    <span className="text-danger">{errors.organizationTypeId.message}</span>
-                    {errors.organizationTypeId.message}
-                  </span>
                   )}
                 </div>
 
                 {/* Services */}
-              <div className="mb-3">
+                <div className="mb-4">
-                <Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
+                  <Label htmlFor="serviceIds" className="mb-6 fw-semibold" required>
-                  Select Services
+                    Choose Services
                   </Label>
-                {mergedServices?.map((service) => (
+
-                  <div key={service.id} className="form-check mb-3">
+                  {/* 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"
+                                className="form-check-input me-2 mt-1"
+                                id={`service-${service.id}`}
                               />
-                    <label className="form-check-label">{service.name}</label>
+
+                              <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>
                       ))}
-                {errors.serviceIds && (
-                  <div className="text-danger small">
-                    {errors.serviceIds.message}
                   </div>
+                  {errors.serviceIds && (
+                    <div className="text-danger small mt-1">{errors.serviceIds.message}</div>
                   )}
                 </div>
               </>
             )}            
-
+          </form>
-          {/* Buttons: Always visible */}
+        </div>
-          <div className="d-flex justify-content-between mt-5">
+      )}
+      {/* Buttons */}
+            <div className="d-flex justify-content-between mt-6">
               <button
                 type="button"
                 className="btn btn-sm btn-outline-secondary"
@@ -247,11 +267,7 @@ const AssignOrg = ({ setStep }) => {
               >
                 <i className="bx bx-chevron-left"></i> Back
               </button>
-            <button
+              <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
-              type="submit"
-              className="btn btn-sm btn-primary"
-              disabled={isPending}
-            >
                 {isPending
                   ? "Please wait..."
                   : flowType === "default"
@@ -259,9 +275,8 @@ const AssignOrg = ({ setStep }) => {
                     : "Assign to Project"}
               </button>
             </div>
-        </form>
-      </div>
     </div>
+
   );
 };
 

src/components/Organization/ManagOrg.jsx

@@ -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}
           />

src/components/Organization/OrgPickerFromSPId.jsx

@@ -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 = () => {
-
+  const { onOpen, prevStep, flowType } = useOrganizationModal();
-const OrgPickerFromSPId = ({ title, placeholder }) => {
-  const { onClose, startStep, flowType, onOpen, prevStep, orgData } =
-    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 } = useOrganizationBySPRID(SPRID);
-
-  const { data, isLoading, isError, error, refetch } =
-    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">
+    <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>
+
+      {/* Tab Content */}
+      {activeTab === "search" && (
+        <>
           <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="row align-items-center g-2 mb-3">
+            <div className="row align-items-end 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">
+              {/* Search Input */}
-            <Label className="text-nowrap mb-1 mb-md-0" required>
+              <div className="col-12 col-md-8 text-start">
-              Search by SPRID
+                <Label required className="mb-1">Search by SPRID</Label>
-            </Label>
                 <input
                   type="search"
                   {...register("spridSearchText")}
-              className="form-control form-control-sm flex-grow-1"
+                  className="form-control form-control-sm"
                   placeholder="Enter SPRID"
                   maxLength={4}
                 />
               </div>
 
-          {/* Button Section */}
+              {/* Search Button (always at end) */}
-          <div className="col-12 col-md-4 text-md-start text-center mt-2 mt-md-0">
+              <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 w-100 w-md-auto"
-            >
-              <i className="bx bx-sm bx-search-alt-2"></i> Search
-            </button>
-          </div>
-        </div>
-      </form>
-
-      <div className="text-start danger-text">
-        {" "}
-        {errors.spridSearchText && (
-          <p className="text-danger small mt-1">
-            {errors.spridSearchText.message}
-          </p>
-        )}
-      </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">
-                    {" "}
                 <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="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">
+        </>
+      )}
+
+      {activeTab === "create" && (
+        <div className="text-center py-5">
           <small className="d-block text-secondary">
-          Do not have SPRID or could not find organization ?
+            {/* Do not have SPRID or want to create a new organization? */}
           </small>
-        <button
+          <button type="button" className="btn btn-sm btn-primary" onClick={handleCreateOrg}>
-          type="button"
+            <i className="bx bx-plus-circle me-2"></i> Create New Organization
-          className="btn btn-sm btn-primary mt-3"
-          onClick={handleCrateOrg}
-        >
-          <i className="bx bx-plus-circle me-2"></i>
-          Create New Organization
           </button>
         </div>
+      )}
 
-      {/* ---- Footer buttons ---- */}
+      {/* Footer Back button */}
-      <div className={`d-flex   text-secondary mt-3`}>
       {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>
   );
 };

src/components/Organization/OrgPickerfromTenant.jsx

@@ -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 "
+            className="text-wrap d-inline-block "
-            style={{ maxWidth: "150px" }}
           >
             {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"
+          className="text-warp d-inline-block"
-          style={{ maxWidth: "200px" }}
         >
           {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
+          Could not find organization in your database? Create New Organization
-          global database.
         </small>
         <button
           type="button"

src/components/Organization/OrganizationModal.jsx

@@ -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();
@@ -75,13 +75,13 @@ const OrganizationModal = () => {
       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
@@ -106,6 +106,7 @@ const OrganizationModal = () => {
 
   return (
     <Modal
+      size={startStep === 3 && flowType !== "default" ? "xl" : "md"}
       isOpen={isOpen}
       onClose={onClose}
       title={RenderTitle}

src/components/Organization/OrganizationSchema.js

@@ -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" })
+    .optional(),
-    .email("Invalid email address"),
   serviceIds: z
     .array(z.string())
     .min(1, { message: "Service isrequired" }),

src/components/Organization/OrganizationsList.jsx

@@ -4,6 +4,7 @@ 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);
@@ -144,10 +145,18 @@ const OrganizationsList = ({searchText}) => {
                 <td
                   colSpan={organizationsColumns.length + 1}
                   className="text-center"
+                  style={{ height: "250px" }} 
                 >
-                    <p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
+                  {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>
+
             )}
           </tbody>
         </table>

src/components/Project/ProjectOrganizations.jsx

@@ -21,7 +21,7 @@ const ProjectOrganizations = () => {
         </div>
       </div>
 
-      <div className="row modal-min-h">
+      <div className="modal-min-h table-responsive">
         <ProjectAssignedOrgs />
       </div>
     </div>

src/components/ServiceProject/ServiceProjectProfile.jsx

@@ -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();
@@ -40,6 +41,9 @@ const ServiceProjectProfile = () => {
         <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>
     </>
   );

src/components/Tenant/OrganizationInfo.jsx

@@ -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);
+      CreateTenant(tenantPayload);
-      console.log(tenantPayload)
     }
   };
 

src/components/Tenant/TenantFilterPanel.jsx

@@ -65,6 +65,7 @@ const TenantFilterPanel = ({ onApply }) => {
               endField="endDate"
               resetSignal={resetKey}
               defaultRange={false}
+              className="w-100"
             />
           </div>
           <div className="text-strat mb-2">

src/hooks/useDashboard_Data.jsx

@@ -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({

src/pages/Activities/AttendancePage.jsx

@@ -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

src/pages/Organization/OrganizationPage.jsx

@@ -47,10 +47,12 @@ const OrganizationPage = () => {
           </div>
         </div>
       </div>
-      <div className="card page-min-h px-sm-4">
+      <div className="card table-responsive page-min-h">
+        <div className="card-body">
           <OrganizationsList searchText={searchText} />
         </div>
       </div>
+    </div>
   );
 };
 

src/repositories/GlobalRepository.jsx

@@ -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 = [];