Merge branch 'Service_Project_Managment' of https://git.marcoaiot.com/admin/marco.pms.web into Advance_Payment_List

src/components/DailyProgressRport/TaskReportFilterPanel.jsx

@@ -54,6 +54,7 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
         <div className="mb-3 w-100">
           <label className="fw-semibold">Choose Date Range:</label>
           <DateRangePicker1
+          className="w-100"
             placeholder="DD-MM-YYYY To DD-MM-YYYY"
             startField="dateFrom"
             endField="dateTo"

src/components/DailyProgressRport/TaskReportList.jsx

@@ -202,6 +202,7 @@ const TaskReportList = () => {
                 <span>
                   Total Pending{" "}
                   <HoverPopup
+                    id="total_pending_task"
                     title="Total Pending Task"
                     content={<p>This shows the total pending tasks for each activity on that date.</p>}
                   >
@@ -213,6 +214,7 @@ const TaskReportList = () => {
                 <span>
                   Reported/Planned{" "}
                   <HoverPopup
+                    id="reportes_and_planned_task"
                     title="Reported and Planned Task"
                     content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
                   >

src/components/RecurringExpense/ManageRecurringExpense.jsx

@@ -241,6 +241,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               </Label>
               <HoverPopup
                 title="Payment Type"
+                id="payment_type"
                 content={
                   <p>
                     Choose whether the payment amount varies or remains fixed each cycle.
@@ -387,6 +388,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               </Label>
               <HoverPopup
                 title="Frequency"
+                id="frequency"
                 content={
                   <p>
                     Defines how often payments or billing occur, such as monthly, quarterly, or annually.
@@ -450,6 +452,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               </Label>
               <HoverPopup
                 title="Payment Buffer Days"
+                id="payment_buffer_days"
                 content={
                   <p>
                     Number of extra days allowed after the due date before payment is considered late.
@@ -485,6 +488,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               </Label>
               <HoverPopup
                 title="End Date"
+                id="end_date"
                 content={
                   <p>
                     The date when the last payment in the recurrence occurs.

src/components/ServiceProject/JobComments.jsx

@@ -22,7 +22,7 @@ const JobComments = ({ data }) => {
     formState: { errors },
   } = useAppForm({
     resolver: zodResolver(JobCommentSchema),
-    defaultValues: { comment: "", attachments: [] }
+    defaultValues: { comment: "", attachments: [] },
   });
 
   const {
@@ -118,21 +118,16 @@ const JobComments = ({ data }) => {
               )}
             </div>
           </div>
-
-          <div className="d-flex flex-column flex-md-row justify-content-between align-items-start">
-            {/* LEFT SIDE → Uploaded Files */}
           <div className="flex-grow-1 ms-10 mt-2">
             {files?.length > 0 && (
               <Filelist files={files} removeFile={removeFile} />
             )}
           </div>
-
+          <div className="d-flex justify-content-end gap-2 align-items-center text-end mt-3 ms-10 ms-md-0">
-            {/* RIGHT SIDE → Add Attachment + Submit */}
-            <div className="d-flex gap-3 align-items-center text-end mt-3 ms-10 ms-md-0">
             <div
               onClick={() => document.getElementById("attachments").click()}
               className="cursor-pointer"
-                style={{ whiteSpace: 'nowrap' }}
+              style={{ whiteSpace: "nowrap" }}
             >
               <input
                 type="file"
@@ -155,13 +150,9 @@ const JobComments = ({ data }) => {
               type="submit"
               disabled={!watch("comment")?.trim() || isPending}
             >
-                <i className="bx bx-xs bx-send me-1"></i>
               Submit
             </button>
-
           </div>
-          </div>
-
         </form>
       </div>
       <div className="card-body p-0">

src/components/ServiceProject/JobList.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from "react";
-import { daysLeft, getNextBadgeColor } from "../../utils/appUtils";
+import {
+  daysLeft,
+  getJobStatusBadge,
+  getNextBadgeColor,
+} from "../../utils/appUtils";
 import { useServiceProjectJobs } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
@@ -23,7 +27,7 @@ const JobList = () => {
     {
       key: "jobTicketUId",
       label: "Job Id",
-      getValue: (e) => e?.jobTicketUId || "N/A",
+      getValue: (e) => <span>{e?.jobTicketUId || "N/A"}</span>,
       align: "text-start",
     },
     {
@@ -56,22 +60,9 @@ const JobList = () => {
       key: "status",
       label: "Status",
       getValue: (e) => {
-        const statusName = e?.status?.displayName || "N/A";
-        const statusColorMap = {
-          Assigned: "label-primary",
-          Pending: "label-warning",
-          Completed: "label-success",
-          Cancelled: "label-danger",
-        };
-
-        const badgeColor = statusColorMap[statusName] || "label-secondary";
-
         return (
-          <span
+          <span className={`badge ${getJobStatusBadge(e?.status?.id)}`}>
-            className={`badge bg-${badgeColor}`}
+            {e?.status?.displayName}
-            style={{ fontSize: "12px" }}
-          >
-            {statusName}
           </span>
         );
       },
@@ -85,7 +76,7 @@ const JobList = () => {
         const { days, color } = daysLeft(e.startDate, e.dueDate);
 
         return (
-          <span className={`badge bg-${color}`} style={{ fontSize: "12px" }}>
+          <span className={`badge bg-${color}`}>
             {days !== null ? `${days} days` : "N/A"}
           </span>
         );
@@ -96,7 +87,7 @@ const JobList = () => {
   ];
 
   return (
-    <div className="dataTables_wrapper dt-bootstrap5 no-footer ">
+    <div className="dataTables_wrapper dt-bootstrap5 no-footer table-responsive">
       <table
         className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap table-responsive"
         aria-describedby="DataTables_Table_0_info"
@@ -123,15 +114,15 @@ const JobList = () => {
         <tbody>
           {Array.isArray(data?.data) && data.data.length > 0 ? (
             data.data.map((row, i) => (
-              <tr
+              <tr key={i} className="text-start">
-                key={i}
-                className="text-start"
-                
-              >
                 {jobGrid.map((col) => (
-                  <td key={col.key} className={col.className} onClick={() =>
+                  <td
+                    key={col.key}
+                    className={col.className}
+                    onClick={() =>
                       setSelectedJob({ showCanvas: true, job: row?.id })
-                }>
+                    }
+                  >
                     {col.getValue(row)}
                   </td>
                 ))}

src/components/ServiceProject/JobStatusLog.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Avatar from "../common/Avatar";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
 
 const JobStatusLog = ({ data }) => {
   return (
@@ -20,9 +21,9 @@ const JobStatusLog = ({ data }) => {
                   </span>
                 </div>
 
-                {/* <span className="badge bg-primary">
+                <span className="text-secondary">
-                  Level {item.nextStatus?.level ?? item.status?.level}
+                  {formatUTCToLocalTime(item?.updatedAt,true)}
-                </span> */}
+                </span>
               </div>
               <div className="d-flex align-items-start mt-2 mx-0 px-0">
                 <Avatar

src/components/ServiceProject/ManageJob.jsx

@@ -119,6 +119,11 @@ const ManageJob = ({ Job }) => {
           path: "/assignees",
           value: updatedEmployees,
         },
+        {
+          op: "replace",
+          path: "/statusId",
+          value: formData.statusId,
+        },
       ];
       UpdateJob({ id: Job, payload });
     } else {
@@ -159,7 +164,6 @@ const ManageJob = ({ Job }) => {
       statusId: JobData.status.id,
     });
   }, [JobData, Job, projectId]);
-
   return (
     <div className="container">
       <AppFormProvider {...methods}>
@@ -202,6 +206,7 @@ const ManageJob = ({ Job }) => {
               placeholder="Select employee"
             />
           </div>
+          {Job && (
             <div className="col-12 col-md-6 mb-2 mb-md-4">
               <AppFormController
                 name="statusId"
@@ -226,6 +231,7 @@ const ManageJob = ({ Job }) => {
                 <small className="danger-text">{errors.statusId.message}</small>
               )}
             </div>
+          )}
           <div className="col-12 col-md-6 mb-2 mb-md-4">
             <TagInput
               options={JobTags?.data}

src/components/ServiceProject/ManageJobTicket.jsx

@@ -7,10 +7,12 @@ import Avatar from "../common/Avatar";
 import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
 import JobStatusLog from "./JobStatusLog";
 import JobComments from "./JobComments";
-import { daysLeft } from "../../utils/appUtils";
+import { daysLeft, getJobStatusBadge } from "../../utils/appUtils";
 import HoverPopup from "../common/HoverPopup";
 import ChangeStatus from "./ChangeStatus";
 import { useParams } from "react-router-dom";
+import { STATUS_JOB_DONE } from "../../utils/constants";
+import Tooltip from "../common/Tooltip";
 
 const ManageJobTicket = ({ Job }) => {
   const { projectId } = useParams();
@@ -46,31 +48,17 @@ const ManageJobTicket = ({ Job }) => {
     <div className="row text-start">
       <div className="col-12">
         <h6 className="fs-5 fw-semibold">{data?.title}</h6>
-        <div className="d-flex justify-content-between align-items-end flex-wrap mb-2">
+        <div className="d-flex justify-content-between align-items-start flex-wrap mb-2">
           <p className="mb-0">
             <span className="fw-medium me-1">Job Id :</span>
             {data?.jobTicketUId || "N/A"}
           </p>
           <div className="d-flex flex-column align-items-end gap-3 mb-3">
-            {data?.dueDate &&
-              (() => {
-                const { days, color } = daysLeft(
-                  data?.startDate,
-                  data?.dueDate
-                );
-                return (
-                  <span>
-                    <span className="fw-medium me-1">Days Left:</span>
-                    <span className={`badge bg-${color}`}>
-                      {days !== null ? `${days} days` : "N/A"}
-                    </span>
-                  </span>
-                );
-              })()}
             <div className="d-flex flex-row gap-2">
-              <span className="badge bg-label-primary">
+              <span className={`badge ${getJobStatusBadge(data?.status?.id)}`}>
-                {data?.status?.name}
+                {data?.status?.displayName}
               </span>
+              {STATUS_JOB_DONE !== data?.status?.id && (
                 <HoverPopup
                   id="STATUS_CHANEG"
                   title="Change Status"
@@ -85,14 +73,19 @@ const ManageJobTicket = ({ Job }) => {
                     />
                   }
                 >
+                  <Tooltip
+                    text={"Change Status"}
+                    placement="left"
+                    children={
                       <i className="bx bx-edit bx-sm cursor-pointer"></i>
+                    }
+                  />
                 </HoverPopup>
+              )}
             </div>
           </div>
         </div>
 
-     
-
         <div className="d-flex flex-wrap">
           <p>{data?.description || "N/A"}</p>
         </div>
@@ -106,7 +99,7 @@ const ManageJobTicket = ({ Job }) => {
           </div>
         </div>
 
-        <div>
+        <div className="d-flex justify-content-md-between ">
           <div className="d-flex flex-row gap-5">
             <span className="fw-medium">
               <i className="bx bx-calendar"></i> Start Date :{" "}
@@ -118,10 +111,25 @@ const ManageJobTicket = ({ Job }) => {
               {formatUTCToLocalTime(data?.startDate)}
             </span>
           </div>
+          {data?.dueDate &&
+            (() => {
+              const { days, color } = daysLeft(data?.startDate, data?.dueDate);
+              return (
+                <span>
+                  <span className="fw-medium me-1">Days Left:</span>
+                  <span className={`badge bg-${color}`}>
+                    {days !== null ? `${days} days` : "N/A"}
+                  </span>
+                </span>
+              );
+            })()}
         </div>
         <div className="d-block mt-4 mb-3">
-          <div className="d-flex align-items-center mb-2">
+          <div className="row align-items-start align-items-md-start gap-2 mb-1">
-            <span className="fs-6 fw-medium me-5">Created By</span>{" "}
+            <div className="col-12 col-md-auto">
+              <small className="fs-6 fw-medium">Created By</small>
+            </div>
+            <div className="col d-flex flex-row align-items-center ">
               <Avatar
                 size="xs"
                 firstName={data?.createdBy?.firstName}
@@ -134,11 +142,21 @@ const ManageJobTicket = ({ Job }) => {
                 </small>
               </div>
             </div>
-          <div className="d-flex flex-wrap align-items-start align-items-md-center">
+          </div>
-            <small className="fs-6 fw-medium me-3">Assigned By</small>
+
-            <div className="row g-3 mt-md-1">
+          {data?.assignees?.length > 0 && (
+            <div className="row align-items-start align-items-md-start gap-2">
+              <div className="col-12 col-md-auto">
+                <small className="fs-6 fw-medium">Assigned To</small>
+              </div>
+
+              <div className="col">
+                <div className="row gap-4">
                   {data?.assignees?.map((emp) => (
-                <div key={emp.id} className="col-6 col-sm-6 col-md-4 col-lg-4">
+                    <div
+                      key={emp.id}
+                      className="col-6 col-sm-6 col-md-4 col-lg-4"
+                    >
                       <div className="d-flex align-items-center gap-2">
                         <Avatar
                           size="xs"
@@ -147,10 +165,10 @@ const ManageJobTicket = ({ Job }) => {
                         />
 
                         <div className="d-flex flex-column">
-                      <span className="fw-semibold">
+                          <span className=" text-truncate">
                             {emp.firstName} {emp.lastName}
                           </span>
-                      <small className="text-secondary">
+                          <small className="text-secondary text-truncate">
                             {emp.jobRoleName}
                           </small>
                         </div>
@@ -160,6 +178,8 @@ const ManageJobTicket = ({ Job }) => {
                 </div>
               </div>
             </div>
+          )}
+        </div>
       </div>
 
       <div className="nav-align-top nav-tabs-shadow p-0 shadow-none">

src/components/ServiceProject/ServiceProjectProfile.jsx

@@ -1,15 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useServiceProject } from "../../hooks/useServiceProject";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import ManageServiceProject from "./ManageServiceProject";
+import GlobalModel from "../common/GlobalModel";
 
 const ServiceProjectProfile = () => {
   const { projectId } = useParams();
+  const [IsOpenModal, setIsOpenModal] = useState(false);
   const { data, isLoading, isError, error } = useServiceProject(projectId);
   if (isLoading) {
     return <div className="">Loadng.</div>;
   }
   return (
+    <>
+      {IsOpenModal && (
+        <GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
+          <ManageServiceProject
+            serviceProjectId={projectId}
+            onClose={() => setIsOpenModal(false)}
+          />
+        </GlobalModel>
+      )}
+
       <div className="row py-2">
         <div className="col-md-6 col-lg-4 order-2 mb-6">
           <div className="card mb-4">
@@ -82,6 +95,19 @@ const ServiceProjectProfile = () => {
 
                 <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
 
+                  <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
+
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-primary"
+                      data-bs-toggle="modal"
+                      data-bs-target="#edit-project-modal"
+                      onClick={() => setIsOpenModal(true)}
+                    >
+                      Modify Details
+                    </button>
+
+                  </li>
                 </li>
               </ul>
 
@@ -91,6 +117,7 @@ const ServiceProjectProfile = () => {
 
 
       </div>
+    </>
   );
 };
 

src/components/ServiceProject/ServiceProjectSchema.jsx

@@ -62,14 +62,14 @@ export const jobSchema = z.object({
   description: z.string().min(1, "Description is required"),
   projectId: z.string().min(1, "Project is required"),
 
-  assignees: z.array(z.string()).nonempty("At least one assignee is required"),
+  assignees: z.array(z.string()).optional(),
 
   startDate: z.string(),
   dueDate: z.string(),
 
   tags: z.array(TagSchema).optional().default([]),
 
-  statusId: z.string().optional(),
+  statusId: z.string().optional().nullable(),
 });
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB

src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx

@@ -0,0 +1,246 @@
+import React, { useEffect, useState } from "react";
+import moment from "moment";
+import { formatNumber, formatUTCToLocalTime, getDateDifferenceInDays } from "../../../utils/dateUtils";
+import { useNavigate } from "react-router-dom";
+import ManageProjectInfo from "../../Project/ManageProjectInfo";
+import ProjectRepository from "../../../repositories/ProjectRepository";
+import { cacheData, getCachedData } from "../../../slices/apiDataManager";
+import showToast from "../../../services/toastService";
+import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
+import { MANAGE_PROJECT } from "../../../utils/constants";
+import GlobalModel from "../../common/GlobalModel";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../../slices/localVariablesSlice";
+import { useProjectContext } from "../../../pages/project/ProjectPage";
+import { useActiveInActiveServiceProject } from "../../../hooks/useServiceProject";
+import ConfirmModal from "../../common/ConfirmModal";
+import { getProjectStatusColor, getProjectStatusName } from "../../../utils/projectStatus";
+
+const ServiceProjectCard = ({ project, isCore = true }) => {
+    const [deleteProject, setDeleteProject] = useState({
+        project: null,
+        isOpen: false,
+    });
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+    const ManageProject = useHasUserPermission(MANAGE_PROJECT);
+    const { setMangeProject, setManageServiceProject } = useProjectContext();
+
+    const getProgress = (planned, completed) => {
+        return (completed * 100) / planned + "%";
+    };
+    const getProgressInNumber = (planned, completed) => {
+        return (completed * 100) / planned;
+    };
+
+    const handleClose = () => setShowModal(false);
+
+    const handleViewProject = () => {
+        if (isCore) {
+            dispatch(setProjectId(project.id));
+            navigate(`/projects/details`);
+        } else {
+            navigate(`/service-projects/${project.id}`);
+        }
+    };
+    const handleViewActivities = () => {
+        dispatch(setProjectId(project.id));
+        navigate(`/activities/records?project=${project.id}`);
+    };
+    const handleManage = () => {
+        if (isCore) {
+            setMangeProject({
+                isOpen: true,
+                Project: project.id,
+            });
+        } else {
+            setManageServiceProject({
+                isOpen: true,
+                project: project.id,
+            });
+        }
+    };
+
+    const { mutate: DeleteProject, isPending } = useActiveInActiveServiceProject(
+        () => setDeleteProject({ project: null, isOpen: false })
+    );
+    const handleActiveInactive = (projectId) => {
+        DeleteProject(projectId, false);
+    };
+
+    return (
+        <>
+            <ConfirmModal
+                type="delete"
+                header="Delete Project"
+                message="Are you sure you want delete?"
+                onSubmit={handleActiveInactive}
+                onClose={() => setDeleteProject({ project: null, isOpen: false })}
+                loading={isPending}
+                paramData={project.id}
+                isOpen={deleteProject.isOpen}
+            />
+            <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
+                <div className={`card cursor-pointer`}>
+                    <div className="card-header pb-4">
+                        <div className="d-flex align-items-start">
+                            <div className="d-flex align-items-center">
+                                <div className="avatar me-4">
+                                    <i
+                                        className="rounded-circle bx bx-building-house"
+                                        style={{ fontSize: "xx-large" }}
+                                    ></i>
+                                </div>
+                                <div className="me-2">
+                                    <h5
+                                        className="mb-0 stretched-link text-heading text-start"
+                                        onClick={handleViewProject}
+                                    >
+                                        {project?.shortName ? project?.shortName : project?.name}
+                                    </h5>
+                                    <div className="client-info text-body">
+                                        <span>{project?.shortName ? project?.name : ""}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className={`ms-auto ${!ManageProject && "d-none"}`}>
+                                <div className="dropdown z-2">
+                                    <button
+                                        type="button"
+                                        className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                    >
+                                        <i
+                                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                                            data-bs-toggle="tooltip"
+                                            data-bs-offset="0,8"
+                                            data-bs-placement="top"
+                                            data-bs-custom-class="tooltip-dark"
+                                            title="More Action"
+                                        ></i>
+                                    </button>
+                                    <ul className="dropdown-menu dropdown-menu-end">
+                                        <li>
+                                            <a
+                                                aria-label="click to  View details"
+                                                className="dropdown-item"
+                                                onClick={handleViewProject}
+                                            >
+                                                <i className="bx bx-detail me-2"></i>
+                                                <span className="align-left">View details</span>
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a className="dropdown-item" onClick={handleManage}>
+                                                <i className="bx bx-pencil me-2"></i>
+                                                <span className="align-left">Modify</span>
+                                            </a>
+                                        </li>
+                                        {isCore && (
+                                            <li onClick={handleViewActivities}>
+                                                <a className="dropdown-item">
+                                                    <i className="bx bx-task me-2"></i>
+                                                    <span className="align-left">Activities</span>
+                                                </a>
+                                            </li>
+                                        )}
+                                        {!isCore && (
+                                            <li
+                                                onClick={() =>
+                                                    setDeleteProject({ project: project, isOpen: true })
+                                                }
+                                            >
+                                                <a className="dropdown-item">
+                                                    <i className="bx bx-trash me-2"></i>
+                                                    <span className="align-left">Delete</span>
+                                                </a>
+                                            </li>
+                                        )}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Card View  */}
+
+                    <div className="card-body pb-1">
+                        <div className="d-flex align-items-center flex-wrap">
+                            <div className="text-start mb-4 ms-2">
+                                <div className="ms-11 mb-3">
+                                    <p className="mb-0">
+                                        <span
+                                            className={
+                                                "badge rounded-pill " +
+                                                getProjectStatusColor(project?.status?.id)
+                                            }
+                                        >
+                                            {getProjectStatusName(project?.status?.id)}
+                                        </span>
+                                    </p>
+                                </div>
+
+                                <p className="mb-1">
+                                    <span className="text-heading fw-medium">Contact Person: </span>
+                                    {project?.contactName}
+                                </p>
+
+                                <p className="mb-1">
+                                    <span className="text-heading fw-medium">Assigned Date: </span>
+                                    {formatUTCToLocalTime(project?.assignedDate)}
+                                </p>
+
+                                <p className="mb-0">
+                                    <span className="text-heading fw-medium">Address: </span>
+                                    {project?.address}
+                                </p>
+
+
+                                <p className="mb-0">{project?.projectAddress}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="card-body border-top text-start ms-2">
+                        <div className="mt-n3">
+                            <p className="mb-0">
+                                <i className="bx bx-group bx-sm me-1_5"></i>
+                                {project?.teamMemberCount} Employees
+                            </p>
+                        </div>
+
+                        {/* Heading */}
+                        <div className="mt-3">
+                            <h5 className="mb-3 text-heading fw-semibold">Jobs</h5>
+
+                            {/* Job details */}
+                            <div className="d-flex flex-column">
+                                <p className="mb-2">
+                                    <i className="bx bx-briefcase bx-sm me-1"></i>
+                                    {project?.assignedJobsCount} Assigned Jobs
+                                </p>
+
+                                <p className="mb-2">
+                                    <i className="bx bx-task bx-sm me-1"></i>
+                                    {project?.activeJobsCount} Active Jobs
+                                </p>
+
+                                <p className="mb-2">
+                                    <i className="bx bx-time-five bx-sm me-1"></i>
+                                    {project?.jobsPassedDueDateCount} Job Passes Due Date
+                                </p>
+                                <p className="mb-2">
+                                    <i className="bx bx-pause-circle bx-sm me-1"></i>
+                                    {project?.onHoldJobsCount} On Hold Jobs
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ServiceProjectCard;

src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx

@@ -123,12 +123,14 @@ const ServiceProjectTeamAllocation = () => {
       <div className=" text-start">
         <div className="row">
           <div className="d-flex justify-content-end">
-          {!isAddEmployee &&  <button
+            {!isAddEmployee && (
+              <button
                 className="btn btn-sm btn-primary"
                 onClick={() => setIsAddEmployee(!isAddEmployee)}
               >
                 <i className="bx bx-plus-circle me-2"></i>Add Employee
-            </button>}
+              </button>
+            )}
           </div>
 
           {isAddEmployee && (
@@ -166,15 +168,15 @@ const ServiceProjectTeamAllocation = () => {
             </>
           )}
         </div>
-        { isAddEmployee && (
+        {isAddEmployee && (
-          <div className="d-flex justify-content-end">
+          <div className="d-flex justify-content-end my-2">
             {" "}
             <button
               type="button"
               className="btn btn-label-secondary btn-sm me-2"
-            onClick={()=>setIsAddEmployee(false)}
+              onClick={() => setIsAddEmployee(false)}
               aria-label="Close"
-            disabled={isPending }
+              disabled={isPending}
             >
               Cancel
             </button>
@@ -188,7 +190,7 @@ const ServiceProjectTeamAllocation = () => {
           </div>
         )}
         <div className="col-12">
-          <table className="table text-center ">
+          <table className="table text-center">
             <thead>
               <tr>
                 <th>Name</th>
@@ -202,29 +204,30 @@ const ServiceProjectTeamAllocation = () => {
                 Team?.map((emp) => (
                   <tr key={emp?.id}>
                     <td className="w-min">
-                      <div className="d-flex align-items-center ">
+                      <div className="d-flex align-items-center gap-2">
-                        {" "}
                         <Avatar
                           size="xs"
                           firstName={emp?.employee?.firstName}
                           lastName={emp?.employee?.lastName}
                         />
-                        <span className="fw-medium">{`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}</span>
+                        <span className="fw-medium">
+                          {emp?.employee?.firstName} {emp?.employee?.lastName}
+                        </span>
                       </div>
                     </td>
+
                     <td>{emp?.teamRole?.name}</td>
-                    <td className="">
+
-                      {deletingEmp?.emplyee?.id === emp.id && isPending ? (
+                    <td>
-                        <div className="spinner-border spinner-border-sm "></div>
+                      {deletingEmp?.employee?.id === emp.id && isPending ? (
+                        <div className="spinner-border spinner-border-sm"></div>
                       ) : (
-                        <span disabled={isPending}>
                         <i
                           className="bx bx-trash bx-sm text-danger cursor-pointer"
                           onClick={() =>
                             setSeletingEmp({ employee: emp, isOpen: true })
                           }
                         ></i>
-                        </span>
                       )}
                     </td>
                   </tr>
@@ -233,18 +236,12 @@ const ServiceProjectTeamAllocation = () => {
                 <tr>
                   <td
                     colSpan={3}
-                    className="text-muted border-0 d-flex justify-content-center "
+                    className="text-center text-muted py-4 border-0"
                   >
                     {isTeamLoading ? (
                       <SpinnerLoader />
                     ) : (
-                      <div className="bg-light-secondary py-3 w-50 m-auto my-2">
+                      <p className="m-0 py-4">No Records Found</p>
-                        <i className="bx bx-box bx-md text-primary"></i>
-                        <p className="fw-medium mt-3">
-                          {" "}
-                          Please Add a Employee{" "}
-                        </p>
-                      </div>
                     )}
                   </td>
                 </tr>

src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Avatar from "../../common/Avatar";
 import { formatUTCToLocalTime } from "../../../utils/dateUtils";
 import { useServiceProjectTeam } from "../../../hooks/useServiceProject";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { SpinnerLoader } from "../../common/Loader";
 
 const ServiceProjectTeamList = () => {
@@ -11,18 +11,25 @@ const ServiceProjectTeamList = () => {
     projectId,
     true
   );
+
+  const navigate = useNavigate();
+
   const servceProjectColmen = [
     {
       key: "employeName",
       label: "Name",
-      getValue: (e) => {
+      getValue: (e) => (
-        return (
+        <div className="d-flex align-items-center cursor-pointer"
-          <div className="d-flex align-itmes-center">
+          onClick={() => navigate(`/employee/${e.employee.id}`)}>
-            <Avatar />
+          {" "}
-            <span>{`${e.employee.firstName} ${e.employee.lastName}`}</span>
+          <Avatar size="xs"
+            firstName={e.employee.firstName}
+            lastName={e.employee.lastName}
+          />
+          <small>{`${e.employee.firstName} ${e.employee.lastName}`}</small>
         </div>
-        );
+      ),
-      },
+      align: "text-start",
     },
     {
       key: "teamRole",
@@ -30,66 +37,51 @@ const ServiceProjectTeamList = () => {
       getValue: (e) => {
         return (
           <div className="d-flex align-itmes-center">
-            <span>{`${e.teamRole.firstName}`}</span>
+            <span>{`${e.teamRole.name}`}</span>
           </div>
         );
       },
+      align: "text-start",
     },
     {
       key: "assignedAt",
       label: "assigned Date",
-      getValue: (e) => {
+      getValue: (e) =>
-        return (
+        formatUTCToLocalTime(e.assignedAT)
-          <div className="d-flex align-itmes-center">
+      ,
-            {formatUTCToLocalTime(e.assignedAT)}
+      align: "text-center",
-          </div>
-        );
-      },
     },
   ];
   return (
-    <div className="data-table table-responsive ">
+    <div className="table-responsive">
-      <table className="table w-full">
+      <table className="table align-middle mb-0">
         <thead>
           <tr>
             {servceProjectColmen.map((col) => (
-              <th key={col.key}>{col.label}</th>
+              <th key={col.key} className={col.align}>{col.label}</th>
             ))}
           </tr>
         </thead>
 
         <tbody>
           {data?.length > 0 ? (
-            data.map((emp) => (
+            data.map((row) => (
-              <tr key={emp?.id}>
+              <tr key={row.id}>
-                <td className="w-min">
+                {servceProjectColmen.map((col) => (
-                  <div className="d-flex align-items-center gap-2 py-1">
+                  <td key={col.key} className={col.align}>{col.getValue(row)}</td>
-                    <Avatar
+                ))}
-                      size="xs"
-                      firstName={emp?.employee?.firstName}
-                      lastName={emp?.employee?.lastName}
-                    />
-                    <span className="fw-medium">
-                      {`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}
-                    </span>
-                  </div>
-                </td>
-
-                <td>{emp?.teamRole?.name}</td>
-
-                <td>{formatUTCToLocalTime(emp.assignedAt)}</td>
               </tr>
             ))
           ) : (
             <tr>
-              <td colSpan={3} className="text-muted border-0 text-center py-4">
+              <td
+                colSpan={servceProjectColmen.length}
+                className="text-center py-4 border-0"
+              >
                 {isLoading ? (
                   <SpinnerLoader />
                 ) : (
-                  <div className="bg-light-secondary py-3 w-50 mx-auto my-2">
+                  <div className="py-8">No Records Available</div>
-                    <i className="bx bx-box bx-md text-primary"></i>
-                    <p className="fw-medium mt-3">Please Add an Employee</p>
-                  </div>
                 )}
               </td>
             </tr>

src/components/common/Forms/InputFieldSuggesstion.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+const InputFieldSuggesstion = () => {
+  return (
+     <div className="position-relative">
+      <input
+        className="form-control form-control-sm"
+        value={value}
+        onChange={handleInputChange}
+        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
+        onFocus={() => {
+          if (value) setShowSuggestions(true);
+        }}
+        disabled={disabled}
+      />
+      {showSuggestions && filteredList.length > 0 && (
+        <ul
+          className="list-group shadow-sm position-absolute w-100 bg-white border  zindex-tooltip"
+          style={{
+            maxHeight: "180px",
+            overflowY: "auto",
+            marginTop: "2px",
+            zIndex: 1000,
+            borderRadius:"0px"
+          }}
+        >
+          {filteredList.map((org) => (
+            <li
+              key={org}
+              className="list-group-item list-group-item-action border-none "
+              style={{
+                cursor: "pointer",
+                padding: "5px 12px",
+                fontSize: "14px",
+                transition: "background-color 0.2s",
+              }}
+              onMouseDown={() => handleSelectSuggestion(org)}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "#f8f9fa")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "transparent")
+              }
+            >
+              {org}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {error && <small className="danger-text">{error}</small>}
+    </div>
+  )
+}
+
+export default InputFieldSuggesstion

src/components/common/Forms/SelectFieldServerSide.jsx

@@ -181,5 +181,173 @@ const SelectEmployeeServerSide = ({
     </div>
   );
 };
-
 export default SelectEmployeeServerSide;
+
+
+export const SelectProjectField = ()=>{
+   const [searchText, setSearchText] = useState("");
+  const debounce = useDebounce(searchText, 300);
+
+  const { data, isLoading } = useEmployeesName(
+    projectId,
+    debounce,
+    isAllEmployee
+  );
+
+  const options = data?.data ?? [];
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const getDisplayName = (emp) => {
+    if (!emp) return "";
+    return `${emp.firstName || ""} ${emp.lastName || ""}`.trim();
+  };
+
+  /** -----------------------------
+   * SELECTED OPTION (SINGLE)
+   * ----------------------------- */
+  let selectedSingle = null;
+
+  if (!isMultiple) {
+    if (isFullObject && value) selectedSingle = value;
+    else if (!isFullObject && value)
+      selectedSingle = options.find((o) => o[valueKey] === value);
+  }
+
+  /** -----------------------------
+   * SELECTED OPTION (MULTIPLE)
+   * ----------------------------- */
+  let selectedList = [];
+
+  if (isMultiple && Array.isArray(value)) {
+    if (isFullObject) selectedList = value;
+    else {
+      selectedList = options.filter((opt) => value.includes(opt[valueKey]));
+    }
+  }
+
+  /** Main button label */
+  const displayText = !isMultiple
+    ? getDisplayName(selectedSingle) || placeholder
+    : selectedList.length > 0
+    ? selectedList.map((e) => getDisplayName(e)).join(", ")
+    : placeholder;
+
+  /** -----------------------------
+   * HANDLE OUTSIDE CLICK
+   * ----------------------------- */
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /** -----------------------------
+   * HANDLE SELECT
+   * ----------------------------- */
+  const handleSelect = (option) => {
+    if (!isMultiple) {
+      // SINGLE SELECT
+      if (isFullObject) onChange(option);
+      else onChange(option[valueKey]);
+    } else {
+      // MULTIPLE SELECT
+      let updated = [];
+
+      const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
+
+      if (exists) {
+        // remove
+        updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
+      } else {
+        // add
+        updated = [...selectedList, option];
+      }
+
+      if (isFullObject) onChange(updated);
+      else onChange(updated.map((x) => x[valueKey]));
+    }
+  };
+
+  return (
+    <div className="mb-3 position-relative" ref={dropdownRef}>
+      {label && (
+        <Label className="form-label" required={required}>
+          {label}
+        </Label>
+      )}
+
+      {/* MAIN BUTTON */}
+      <button
+        type="button"
+        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
+          open ? "show" : ""
+        }`}
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
+          {displayText}
+        </span>
+      </button>
+
+      {/* DROPDOWN */}
+      {open && (
+        <ul
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1050,
+            marginTop: "4px",
+            borderRadius: "0.375rem",
+            overflow: "hidden",
+          }}
+        >
+          <div className="p-1">
+            <input
+              type="search"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              className="form-control form-control-sm"
+              placeholder="Search..."
+            />
+          </div>
+
+          {isLoading && (
+            <li className="dropdown-item text-muted text-center">Loading...</li>
+          )}
+
+          {!isLoading && options.length === 0 && (
+            <li className="dropdown-item text-muted text-center">No results found</li>
+          )}
+
+          {!isLoading &&
+            options.map((option) => {
+              const isActive = isMultiple
+                ? selectedList.some((x) => x[valueKey] === option[valueKey])
+                : selectedSingle &&
+                  selectedSingle[valueKey] === option[valueKey];
+
+              return (
+                <li key={option[valueKey]}>
+                  <button
+                    type="button"
+                    className={`dropdown-item ${isActive ? "active" : ""}`}
+                    onClick={() => handleSelect(option)}
+                  >
+                    {getDisplayName(option)}
+                  </button>
+                </li>
+              );
+            })}
+        </ul>
+      )}
+    </div>
+  );
+};

src/components/common/OffcanvasComponent.jsx

@@ -66,7 +66,7 @@ const OffcanvasComponent = ({
           ></button>
         </div>
 
-        <div className="offcanvas-body">{children}</div>
+        <div className="offcanvas-body ">{children}</div>
       </div>
     </div>
   );

src/pages/ServiceProject/ServiceProjectDisplay.jsx

@@ -10,8 +10,9 @@ import Pagination from "../../components/common/Pagination";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
 import { SpinnerLoader } from "../../components/common/Loader";
+import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
 
-const ServiceProjectDisplay = ({ listView }) => {
+const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
   const [currentPage, setCurrentPage] = useState(1);
 
   const { manageServiceProject, setManageServiceProject } = useProjectContext();
@@ -25,6 +26,9 @@ const ServiceProjectDisplay = ({ listView }) => {
     }
   };
 
+  const filteredProjects = data?.data?.filter(project =>
+    selectedStatuses.includes(project?.status?.id)
+  );
 
   if (isLoading)
     return (
@@ -47,9 +51,10 @@ const ServiceProjectDisplay = ({ listView }) => {
       {listView ? (
         <p>List</p>
       ) : (
-        data?.data?.map((project) => (
+        filteredProjects?.map((project) => (
-          <ProjectCard project={project} isCore={false} />
+          <ServiceProjectCard project={project} isCore={false} />
         ))
+
       )}
 
       <div className="col-12 d-flex justify-content-start mt-3">

src/pages/project/ProjectPage.jsx

@@ -49,6 +49,13 @@ const ProjectPage = () => {
   const [selectedStatuses, setSelectedStatuses] = useState(
     PROJECT_STATUS.map((s) => s.id)
   );
+  const handleStatusChange = (statusId) => {
+    setSelectedStatuses((prev) =>
+      prev.includes(statusId)
+        ? prev.filter((id) => id !== statusId)
+        : [...prev, statusId]
+    );
+  };
 
   const contextDispatcher = {
     setMangeProject,
@@ -183,16 +190,16 @@ const ProjectPage = () => {
                     New Project
                   </button>
                 )}
-
+              </div>
-
+            </div>
           </div>
         </div>
 
-
+        {coreProjects ? <ProjectsDisplay listView={listView}
-          </div>
+          searchTerm={searchTerm}
-        </div>
+          selectedStatuses={selectedStatuses}
-
+          handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay listView={listView}
-        {coreProjects ? <ProjectsDisplay /> : <ServiceProjectDisplay />}
+            selectedStatuses={selectedStatuses} />}
       </div>
     </ProjectContext.Provider>
   );

src/pages/project/ProjectsDisplay.jsx

@@ -11,7 +11,7 @@ import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
 import usePagination from "../../hooks/usePagination";
 import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
 
-const ProjectsDisplay = ({ listView, searchTerm }) => {
+const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusChange }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const {
     manageProject,
@@ -21,35 +21,34 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
   } = useProjectContext();
 
   const [projectList, setProjectList] = useState([]);
-  const [selectedStatuses, setSelectedStatuses] = useState(
+
-    PROJECT_STATUS.map((s) => s.id)
-  );
 
   const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
 
   const filteredProjects =
     data?.data?.filter((project) => {
-      const matchesStatus = selectedStatuses.includes(project.projectStatusId);
+      const statusId =
+        project.projectStatusId ??
+        project?.status?.id ??
+        project?.statusId;
+
+      const matchesStatus = selectedStatuses.includes(statusId);
+
       const matchesSearch = project?.name
         ?.toLowerCase()
         ?.includes(searchTerm?.toLowerCase());
+
       return matchesStatus && matchesSearch;
     }) ?? [];
 
+
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
     }
   };
 
-  const handleStatusChange = (statusId) => {
+
-    setCurrentPage(1);
-    setSelectedStatuses((prev) =>
-      prev.includes(statusId)
-        ? prev.filter((id) => id !== statusId)
-        : [...prev, statusId]
-    );
-  };
 
   const sortingProject = (projects) => {
     if (!isLoading && Array.isArray(projects)) {
@@ -98,6 +97,7 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
         <p>{error.message}</p>
       </div>
     );
+    
   return (
     <div className="row">
       {listView ? (
@@ -111,7 +111,7 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
         />
       ) : (
         <ProjectCardView
-          data={data?.data}
+          data={projectList}
           currentPage={currentPage}
           totalPages={data?.totalPages}
           paginate={paginate}

src/utils/appUtils.js

@@ -34,8 +34,24 @@ export const getColorNameFromHex = (hex) => {
     }
   }
 
-  return null; //
+  return null; 
 };
+export const getJobStatusBadge = (statusId) => {
+  if (!statusId) return "bg-label-secondary";
+
+  const map = {
+    "32d76a02-8f44-4aa0-9b66-c3716c45a918": "bg-label-primary",   // New
+    "cfa1886d-055f-4ded-84c6-42a2a8a14a66": "bg-label-info",      // Assigned
+    "5a6873a5-fed7-4745-a52f-8f61bf3bd72d": "bg-label-warning",   // In Progress
+    "aab71020-2fb8-44d9-9430-c9a7e9bf33b0": "bg-label-label-dark",      // Review
+    "ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7": "bg-label-success",   // Done
+    "3ddeefb5-ae3c-4e10-a922-35e0a452bb69": "bg-label-secondary", // Closed
+    "75a0c8b8-9c6a-41af-80bf-b35bab722eb2": "bg-label-danger",    // On Hold
+  };
+
+  return map[statusId] || "bg-label-secondary";
+};
+
 
 export const useDebounce = (value, delay = 500) => {
   const [debouncedValue, setDebouncedValue] = useState(value);

src/utils/constants.jsx

@@ -205,3 +205,9 @@ export const PAYEE_RECURRING_EXPENSE = [
     label: "Paused",
   },
 ];
+
+
+//#region Service Project and Jobs
+export const STATUS_JOB_DONE = "ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7"
+
+//#endregion