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

public/assets/vendor/css/core.css

@@ -18613,6 +18613,10 @@ li:not(:first-child) .dropdown-item,
   min-height: 70vh !important;
 }
 
+.modal-min-h{
+   min-height: 60vh !important;
+}
+
 .flex-fill {
   flex: 1 1 auto !important;
 }

src/components/Activities/InfraPlanning.jsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from "react";
 import "../../components/Project/ProjectInfra.css";
 import BuildingModel from "../Project/Infrastructure/BuildingModel";
@@ -8,25 +7,33 @@ import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
 import TaskModel from "../Project/Infrastructure/TaskModel";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import Breadcrumb from "../../components/common/Breadcrumb";
-import {useProjectDetails, useProjectInfra, useProjects} from "../../hooks/useProjects";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
-import {APPROVE_TASK, ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA} from "../../utils/constants";
-import {useDispatch, useSelector} from "react-redux";
-import {useProfile} from "../../hooks/useProfile";
-import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
+import {
+  useCurrentService,
+  useProjectDetails,
+  useProjectInfra,
+  useProjects,
+} from "../../hooks/useProjects";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import {
+  APPROVE_TASK,
+  ASSIGN_REPORT_TASK,
+  MANAGE_PROJECT_INFRA,
+} from "../../utils/constants";
+import { useDispatch, useSelector } from "react-redux";
+import { useProfile } from "../../hooks/useProfile";
+import { refreshData, setProjectId } from "../../slices/localVariablesSlice";
 import InfraTable from "../Project/Infrastructure/InfraTable";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import Loader from "../common/Loader";
 
-
-
-
 const InfraPlanning = () => {
   const { profile: LoggedUser, refetch: fetchData } = useProfile();
   const dispatch = useDispatch();
   const selectedProject = useSelectedProject();
+  const selectedService = useCurrentService();
 
-  const { projectInfra, isLoading, isError, error, isFetched } = useProjectInfra(selectedProject);
+  const { projectInfra, isLoading, isError, error, isFetched } =
+    useProjectInfra(selectedProject, selectedService || "" );
 
   const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const canApproveTask = useHasUserPermission(APPROVE_TASK);
@@ -63,9 +70,9 @@ const InfraPlanning = () => {
 
   return (
     <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
-        <div className="card-body" style={{ padding: "0.5rem" }}>
-          <div className="row">
-            <InfraTable buildings={projectInfra} projectId={selectedProject} />
+      <div className="card-body" style={{ padding: "0.5rem" }}>
+        <div className="row">
+          <InfraTable buildings={projectInfra} projectId={selectedProject} />
         </div>
       </div>
     </div>
@@ -73,4 +80,3 @@ const InfraPlanning = () => {
 };
 
 export default InfraPlanning;
-

src/components/DailyProgressRport/TaskReportFilterPanel.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import { useCurrentService, useProjectInfra } from "../../hooks/useProjects";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  TaskReportDefaultValue,
+  TaskReportFilterSchema,
+} from "./TaskRportScheam";
+import { DateRangePicker1 } from "../common/DateRangePicker";
+import SelectMultiple from "../common/SelectMultiple";
+import { localToUtc } from "../../utils/appUtils";
+
+const TaskReportFilterPanel = ({ handleFilter }) => {
+  const [resetKey, setResetKey] = useState(0);
+  const selectedProjec = useSelectedProject();
+  const selectedService = useCurrentService();
+  const { projectInfra, isLoading, error, isFetched } = useProjectInfra(
+    selectedProjec,
+    selectedService
+  );
+  const methods = useForm({
+    resolver: zodResolver(TaskReportFilterSchema),
+    defaultValues: TaskReportDefaultValue,
+  });
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = methods;
+
+  const onSubmit = (formData) => {
+  console.log(formData)
+     const filterPayload = {
+      startDate:localToUtc(formData.startDate),
+      endDate:localToUtc(formData.endDate)
+      
+     }
+    handleFilter(filterPayload);
+  };
+
+  const onClear =()=>{
+    setResetKey((prev) => prev + 1);
+    handleFilter(TaskReportDefaultValue)
+    reset(TaskReportDefaultValue)
+  }
+  
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
+        <div className="mb-3 w-100">
+          <label className="fw-semibold">Choose Date Range:</label>
+          <DateRangePicker1
+            placeholder="DD-MM-YYYY To DD-MM-YYYY"
+            startField="startDate"
+            endField="endDate"
+            resetSignal={resetKey}
+            defaultRange={true}
+          />
+        </div>
+
+        {/* <div className="row g-2">
+            <SelectMultiple
+              name="buildingIds"
+              label="Projects"
+              options={projectInfra}
+              labelKey="buildingName"
+              valueKey="id"
+            />
+          </div>
+          <div className="row g-2">
+            <SelectMultiple
+              name="floorIds"
+              label="Floor"
+              options={projectInfra}
+              labelKey="floorName"
+              valueKey="id"
+            />
+          </div> */}
+
+        <div className="d-flex justify-content-end py-3 gap-2">
+          <button type="button" className="btn btn-label-secondary btn-sm" onClick={onClear}>
+            Clear
+          </button>
+          <button type="submit" className="btn btn-primary btn-sm">
+            Apply
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default TaskReportFilterPanel;

src/components/DailyProgressRport/TaskReportList.jsx

@@ -0,0 +1,301 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { useTaskList } from "../../hooks/useTasks";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { useProjectName } from "../../hooks/useProjects";
+import DailyProgrssReport, {
+  useDailyProgrssContext,
+} from "../../pages/DailyProgressReport/DailyProgrssReport";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
+import {
+  APPROVE_TASK,
+  ASSIGN_REPORT_TASK,
+  ITEMS_PER_PAGE,
+} from "../../utils/constants";
+import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import Pagination from "../common/Pagination";
+import { TaskReportListSkeleton } from "./TaskRepprtListSkeleton";
+import HoverPopup from "../common/HoverPopup";
+
+const TaskReportList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [filters, setFilters] = useState({
+    selectedBuilding: "",
+    selectedFloors: [],
+    selectedActivities: [],
+  });
+  const dispatch = useDispatch();
+  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
+  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
+
+  const { service, openModal, closeModal,filter } = useDailyProgrssContext();
+  const selectedProject = useSelectedProject();
+  const { projectNames } = useProjectName();
+
+  const { data, isLoading, isError, error } = useTaskList(
+    selectedProject,
+    ITEMS_PER_PAGE,
+    currentPage,
+    service,filter
+  );
+
+  const ProgrssReportColumn = [
+    {
+      key: "activity",
+      label: "Activity",
+      getValue: (task) => task.workItem.activityMaster?.activityName || "N/A",
+      align: "text-start",
+    },
+    {
+      key: "assigned",
+      label: "Total Assigned",
+      getValue: (task) => task.plannedTask ?? "N/A",
+      align: "text-start",
+    },
+    {
+      key: "completed",
+      label: "Completed",
+      getValue: (task) => task.completedTask ?? "N/A",
+      align: "text-start",
+    },
+    {
+      key: "assignAt",
+      label: "Assign Date",
+      getValue: (task) =>
+        task.assignmentDate ? formatUTCToLocalTime(task.assignmentDate) : "N/A",
+      align: "text-start",
+    },
+    {
+      key: "team",
+      label: "Team",
+      getValue: (task) =>
+        task.teamMembers?.map((m) => `${m.firstName} ${m.lastName}`).join(", ") ||
+        "N/A",
+      align: "text-start",
+    },
+  ];
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  useEffect(() => {
+    if (!selectedProject && projectNames.length > 0) {
+      dispatch(setProjectId(projectNames[0].id));
+    }
+  }, [selectedProject, projectNames, dispatch]);
+
+  useEffect(() => {
+    setFilters({
+      selectedBuilding: "",
+      selectedFloors: [],
+      selectedActivities: [],
+    });
+  }, [selectedProject]);
+
+  // Filter and Group wise data
+
+  const filteredTasks = useMemo(() => {
+    if (!data?.data) return [];
+    return data?.data.filter((task) => {
+      const { selectedBuilding, selectedFloors, selectedActivities } = filters;
+
+      if (
+        selectedBuilding &&
+        task?.workItem?.workArea?.floor?.building?.name !== selectedBuilding
+      )
+        return false;
+      if (
+        selectedFloors.length > 0 &&
+        !selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
+      )
+        return false;
+      if (
+        selectedActivities.length > 0 &&
+        !selectedActivities.includes(
+          task?.workItem?.activityMaster?.activityName
+        )
+      )
+        return false;
+
+      return true;
+    });
+  }, [data?.data, filters, currentPage]);
+
+  const groupedTasks = useMemo(() => {
+    const groups = {};
+    filteredTasks.forEach((task) => {
+      const date = task.assignmentDate.split("T")[0];
+      if (!groups[date]) groups[date] = [];
+      groups[date].push(task);
+    });
+    return Object.keys(groups)
+      .sort((a, b) => new Date(b) - new Date(a))
+      .map((date) => ({ date, tasks: groups[date] }));
+  }, [filteredTasks, paginate, currentPage, selectedProject]);
+
+  const renderTeamMembers = (task, refIndex) => (
+    <div
+      key={refIndex}
+      tabIndex="0"
+      className="d-flex align-items-center avatar-group justify-content-center"
+      data-bs-toggle="popover"
+      data-bs-trigger="focus"
+      data-bs-placement="left"
+      data-bs-html="true"
+      data-bs-content={`
+        <div class="border border-secondary rounded custom-popover p-2 px-3">
+          ${task.teamMembers
+          .map(
+            (m) => `
+            <div class="d-flex align-items-center gap-2 mb-2">
+              <div class="avatar avatar-xs">
+                <span class="avatar-initial rounded-circle bg-label-primary">
+                  ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
+              }
+                </span>
+              </div>
+              <span>${m.firstName} ${m.lastName}</span>
+            </div>`
+          )
+          .join("")}
+        </div>
+      `}
+    >
+      {task.teamMembers.slice(0, 3).map((m) => (
+        <div
+          key={m.id}
+          className="avatar avatar-xs"
+          title={`${m.firstName} ${m.lastName}`}
+        >
+          <span className="avatar-initial rounded-circle bg-label-primary">
+            {m?.firstName.slice(0, 1)}
+          </span>
+        </div>
+      ))}
+      {task.teamMembers.length > 3 && (
+        <div
+          className="avatar avatar-xs"
+          title={`${task.teamMembers.length - 3} more`}
+        >
+          <span className="avatar-initial rounded-circle bg-label-secondary">
+            +{task.teamMembers.length - 3}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+
+  if (isLoading) return <TaskReportListSkeleton />;
+  if (isError) return <div>Loading....</div>;
+  return (
+    <div className="mt-2">
+      <table className="table">
+        <thead>
+          <tr>
+            <th className="text-start">Activity</th>
+            <th>
+              <span>
+                Total Pending{" "}
+                <HoverPopup
+                  title="Total Pending Task"
+                  content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                >
+                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                </HoverPopup>
+              </span>
+            </th>
+            <th>
+              <span>
+                Reported/Planned{" "}
+                <HoverPopup
+                  title="Reported and Planned Task"
+                  content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
+                >
+                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                </HoverPopup>
+              </span>
+            </th>
+            <th>Assign Date</th>
+            <th>Team</th>
+            <th className="text-center">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groupedTasks.length === 0 && (
+            <tr>
+              <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
+                No reports available
+              </td>
+            </tr>
+          )}
+
+          {groupedTasks.map(({ date, tasks }) => (
+            <React.Fragment key={date}>
+              <tr className="table-row-header text-start">
+                <td colSpan={6}>
+                  <strong>{formatUTCToLocalTime(date)}</strong>
+                </td>
+              </tr>
+              {tasks.map((task, idx) => (
+                <tr key={task.id || idx}>
+                  <td className="flex-wrap text-start">
+                    <div>
+                      {task.workItem.activityMaster?.activityName || "No Activity Name"}
+                    </div>
+                    <div className="text-sm py-2">
+                      {task.workItem.workArea?.floor?.building?.name} ›{" "}
+                      {task.workItem.workArea?.floor?.floorName} ›{" "}
+                      {task.workItem.workArea?.areaName}
+                    </div>
+                  </td>
+                  <td>
+                    {formatNumber(task.workItem.plannedWork)}
+                  </td>
+                  <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
+                  <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
+                  <td className="text-center">{renderTeamMembers(task, idx)}</td>
+                  <td className="text-center">
+                    <div className="d-flex justify-content-end gap-2">
+                      {ReportTaskRights && !task.reportedDate && (
+                        <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
+                          Report
+                        </button>
+                      )}
+                      {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
+                        <button
+                          className="btn btn-xs btn-warning"
+                          onClick={() => openModal("comments", { task, isActionAllow: true })}
+                        >
+                          QC
+                        </button>
+                      )}
+                      <button
+                        className="btn btn-xs btn-primary"
+                        onClick={() => openModal("comments", { task, isActionAllow: false })}
+                      >
+                        Comment
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+      {data?.data?.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data.totalPages}
+          onPageChange={paginate}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TaskReportList;

src/components/DailyProgressRport/TaskRepprtListSkeleton.jsx

@@ -0,0 +1,62 @@
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+export const TaskReportListSkeleton = () => {
+  const skeletonRows = 8; // Number of placeholder rows
+
+  return (
+    <div>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Activity</th>
+            <th>Assigned</th>
+            <th>Completed</th>
+            <th>Assign On</th>
+            <th>Team</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[...Array(skeletonRows)].map((_, idx) => (
+            <tr key={idx}>
+              <td>
+                <SkeletonLine height={16} width="70%" />
+                <SkeletonLine height={12} width="50%" />
+              </td>
+              <td>
+                <SkeletonLine height={16} width="60%" />
+              </td>
+              <td>
+                <SkeletonLine height={16} width="60%" />
+              </td>
+              <td>
+                <SkeletonLine height={16} width="80%" />
+              </td>
+              <td className="text-center">
+                <div className="d-flex justify-content-center gap-1">
+                  {[...Array(3)].map((_, i) => (
+                    <SkeletonLine key={i} height={24} width={24} className="rounded-circle" />
+                  ))}
+                </div>
+              </td>
+              <td>
+                <div className="d-flex justify-content-end gap-2">
+                  <SkeletonLine height={24} width="60px" />
+                  <SkeletonLine height={24} width="60px" />
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

src/components/DailyProgressRport/TaskRportScheam.jsx

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const TaskReportFilterSchema = z.object({
+  // buildingIds: z.array(z.string()).optional(),
+  // floorIds: z.array(z.string()).optional(),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+});
+
+export const TaskReportDefaultValue = {
+    // buildingIds:[],
+    // floorIds:[],
+    startDate:null,
+    endDate:null
+}

src/components/Dashboard/Activity.jsx

@@ -1,194 +1,194 @@
-import React, { useState, useEffect } from "react";
-import LineChart from "../Charts/LineChart";
-import { useProjects } from "../../hooks/useProjects";
-import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
-import ApexChart from "../Charts/Circlechart";
+// import React, { useState, useEffect } from "react";
+// import LineChart from "../Charts/LineChart";
+// import { useProjects } from "../../hooks/useProjects";
+// import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
+// import ApexChart from "../Charts/Circlechart";
 
-const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
+// const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
 
-const Activity = () => {
-    const { projects } = useProjects();
-    const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
-    const [selectedDate, setSelectedDate] = useState(today);
-    const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
-    const initialProjectId = storedProjectId || "all";
-    const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
-    const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
-    const [activeTab, setActiveTab] = useState("all");
+// const Activity = () => {
+//     const { projects } = useProjects();
+//     const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
+//     const [selectedDate, setSelectedDate] = useState(today);
+//     const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
+//     const initialProjectId = storedProjectId || "all";
+//     const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
+//     const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
+//     const [activeTab, setActiveTab] = useState("all");
 
-    const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
-        useDashboard_ActivityData(selectedDate, selectedProjectId);
+//     const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
+//         useDashboard_ActivityData(selectedDate, selectedProjectId);
 
-    useEffect(() => {
-        if (selectedProjectId === "all") {
-            setDisplayedProjectName("All Projects");
-        } else if (projects) {
-            const foundProject = projects.find((p) => p.id === selectedProjectId);
-            setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
-        } else {
-            setDisplayedProjectName("Select Project");
-        }
+//     useEffect(() => {
+//         if (selectedProjectId === "all") {
+//             setDisplayedProjectName("All Projects");
+//         } else if (projects) {
+//             const foundProject = projects.find((p) => p.id === selectedProjectId);
+//             setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
+//         } else {
+//             setDisplayedProjectName("Select Project");
+//         }
 
-        localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
-    }, [selectedProjectId, projects]);
+//         localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
+//     }, [selectedProjectId, projects]);
 
-    const handleProjectSelect = (projectId) => {
-        setSelectedProjectId(projectId);
-    };
+//     const handleProjectSelect = (projectId) => {
+//         setSelectedProjectId(projectId);
+//     };
 
-    const handleDateChange = (e) => {
-        setSelectedDate(e.target.value);
-    };
+//     const handleDateChange = (e) => {
+//         setSelectedDate(e.target.value);
+//     };
 
-    return (
-        <div className="card h-100">
-            <div className="card-header">
-                <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
-                    <div className="card-title mb-0 text-start">
-                        <h5 className="mb-1">Activity</h5>
-                        <p className="card-subtitle">Activity Progress Chart</p>
-                    </div>
+//     return (
+//         <div className="card h-100">
+//             <div className="card-header">
+//                 <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
+//                     <div className="card-title mb-0 text-start">
+//                         <h5 className="mb-1">Activity</h5>
+//                         <p className="card-subtitle text-primary">Activity Progress Chart</p>
+//                     </div>
 
-                    <div className="btn-group">
-                        <button
-                            className="btn btn-outline-primary btn-sm dropdown-toggle"
-                            type="button"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false"
-                        >
-                            {displayedProjectName}
-                        </button>
-                        <ul className="dropdown-menu">
-                            <li>
-                                <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
-                                    All Projects
-                                </button>
-                            </li>
-                            {projects?.map((project) => (
-                                <li key={project.id}>
-                                    <button
-                                        className="dropdown-item"
-                                        onClick={() => handleProjectSelect(project.id)}
-                                    >
-                                        {project.name}
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </div>
-            </div>
+//                     <div className="btn-group">
+//                         <button
+//                             className="btn btn-outline-primary btn-sm dropdown-toggle"
+//                             type="button"
+//                             data-bs-toggle="dropdown"
+//                             aria-expanded="false"
+//                         >
+//                             {displayedProjectName}
+//                         </button>
+//                         <ul className="dropdown-menu">
+//                             <li>
+//                                 <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
+//                                     All Projects
+//                                 </button>
+//                             </li>
+//                             {projects?.map((project) => (
+//                                 <li key={project.id}>
+//                                     <button
+//                                         className="dropdown-item"
+//                                         onClick={() => handleProjectSelect(project.id)}
+//                                     >
+//                                         {project.name}
+//                                     </button>
+//                                 </li>
+//                             ))}
+//                         </ul>
+//                     </div>
+//                 </div>
+//             </div>
 
-            {/* ✅ Date Picker Aligned Left with Padding */}
-            <div className="d-flex justify-content-start ps-3 mb-3">
-                <div style={{ width: "150px" }}>
-                    <input
-                        type="date"
-                        className="form-control"
-                        value={selectedDate}
-                        onChange={handleDateChange}
-                    />
-                </div>
-            </div>
+//             {/* ✅ Date Picker Aligned Left with Padding */}
+//             <div className="d-flex justify-content-start ps-3 mb-3">
+//                 <div style={{ width: "150px" }}>
+//                     <input
+//                         type="date"
+//                         className="form-control"
+//                         value={selectedDate}
+//                         onChange={handleDateChange}
+//                     />
+//                 </div>
+//             </div>
 
-            {/* Tabs */}
-            <ul className="nav nav-tabs " role="tablist">
-                <li className="nav-item">
-                    <button
-                        type="button"
-                        className={`nav-link ${activeTab === "all" ? "active" : ""}`}
-                        onClick={() => setActiveTab("all")}
-                        data-bs-toggle="tab"
-                    >
-                        Summary
-                    </button>
-                </li>
-                <li className="nav-item">
-                    <button
-                        type="button"
-                        className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
-                        onClick={() => setActiveTab("logs")}
-                        data-bs-toggle="tab"
-                    >
-                        Details
-                    </button>
-                </li>
-            </ul>
+//             {/* Tabs */}
+//             <ul className="nav nav-tabs " role="tablist">
+//                 <li className="nav-item">
+//                     <button
+//                         type="button"
+//                         className={`nav-link ${activeTab === "all" ? "active" : ""}`}
+//                         onClick={() => setActiveTab("all")}
+//                         data-bs-toggle="tab"
+//                     >
+//                         Summary
+//                     </button>
+//                 </li>
+//                 <li className="nav-item">
+//                     <button
+//                         type="button"
+//                         className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
+//                         onClick={() => setActiveTab("logs")}
+//                         data-bs-toggle="tab"
+//                     >
+//                         Details
+//                     </button>
+//                 </li>
+//             </ul>
 
-            <div className="card-body">
-                {activeTab === "all" && (
-                    <div className="row justify-content-between">
-                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
-                            {isLoading ? (
-                                <p>Loading activity data...</p>
-                            ) : isError ? (
-                                <p>No data available.</p>
-                            ) : (
-                                ActivityData && (
-                                    <>
-                                        <h5 className="fw-bold mb-0 text-start w-80">
-                                            <i className="bx bx-task text-info"></i> Allocated Task
-                                        </h5>
-                                        <h4 className="mb-0 fw-bold">
-                                            {ActivityData.totalCompletedWork?.toLocaleString()}/
-                                            {ActivityData.totalPlannedWork?.toLocaleString()}
-                                        </h4>
-                                        <small className="text-muted">Completed / Assigned</small>
-                                        <div style={{ maxWidth: "180px" }}>
-                                            <ApexChart />
-                                        </div>
-                                    </>
-                                )
-                            )}
-                        </div>
+//             <div className="card-body">
+//                 {activeTab === "all" && (
+//                     <div className="row justify-content-between">
+//                         <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+//                             {isLoading ? (
+//                                 <p>Loading activity data...</p>
+//                             ) : isError ? (
+//                                 <p>No data available.</p>
+//                             ) : (
+//                                 ActivityData && (
+//                                     <>
+//                                         <h5 className="fw-bold mb-0 text-start w-80">
+//                                             <i className="bx bx-task text-info"></i> Allocated Task
+//                                         </h5>
+//                                         <h4 className="mb-0 fw-bold">
+//                                             {ActivityData.totalCompletedWork?.toLocaleString()}/
+//                                             {ActivityData.totalPlannedWork?.toLocaleString()}
+//                                         </h4>
+//                                         <small className="text-muted">Completed / Assigned</small>
+//                                         <div style={{ maxWidth: "180px" }}>
+//                                             <ApexChart />
+//                                         </div>
+//                                     </>
+//                                 )
+//                             )}
+//                         </div>
 
-                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
-                            {!isLoading && !isError && ActivityData && (
-                                <>
-                                    <h5 className="fw-bold mb-0 text-start w-110">
-                                        <i className="bx bx-task text-info"></i> Activities
-                                    </h5>
-                                    <h4 className="mb-0 fw-bold">
-                                        {ActivityData.totalCompletedWork?.toLocaleString()}/
-                                        {ActivityData.totalPlannedWork?.toLocaleString()}
-                                    </h4>
-                                    <small className="text-muted ">Pending / Assigned</small>
-                                    <div style={{ maxWidth: "180px" }}>
-                                        <ApexChart />
-                                    </div>
-                                </>
-                            )}
-                        </div>
-                    </div>
-                )}
+//                         <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+//                             {!isLoading && !isError && ActivityData && (
+//                                 <>
+//                                     <h5 className="fw-bold mb-0 text-start w-110">
+//                                         <i className="bx bx-task text-info"></i> Activities
+//                                     </h5>
+//                                     <h4 className="mb-0 fw-bold">
+//                                         {ActivityData.totalCompletedWork?.toLocaleString()}/
+//                                         {ActivityData.totalPlannedWork?.toLocaleString()}
+//                                     </h4>
+//                                     <small className="text-muted ">Pending / Assigned</small>
+//                                     <div style={{ maxWidth: "180px" }}>
+//                                         <ApexChart />
+//                                     </div>
+//                                 </>
+//                             )}
+//                         </div>
+//                     </div>
+//                 )}
 
-                {activeTab === "logs" && (
-                    <div className="table-responsive">
-                        <table className="table table-bordered table-hover">
-                            <thead>
-                                <tr>
-                                    <th>Activity / Location</th>
-                                    <th>Assigned / Completed</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {[{
-                                    activity: "Code Review / Remote",
-                                    assignedToday: 3,
-                                    completed: 2
-                                }].map((log, index) => (
-                                    <tr key={index}>
-                                        <td>{log.activity}</td>
-                                        <td>{log.assignedToday} / {log.completed}</td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
+//                 {activeTab === "logs" && (
+//                     <div className="table-responsive">
+//                         <table className="table table-bordered table-hover">
+//                             <thead>
+//                                 <tr>
+//                                     <th>Activity / Location</th>
+//                                     <th>Assigned / Completed</th>
+//                                 </tr>
+//                             </thead>
+//                             <tbody>
+//                                 {[{
+//                                     activity: "Code Review / Remote",
+//                                     assignedToday: 3,
+//                                     completed: 2
+//                                 }].map((log, index) => (
+//                                     <tr key={index}>
+//                                         <td>{log.activity}</td>
+//                                         <td>{log.assignedToday} / {log.completed}</td>
+//                                     </tr>
+//                                 ))}
+//                             </tbody>
+//                         </table>
+//                     </div>
+//                 )}
+//             </div>
+//         </div>
+//     );
+// };
 
-export default Activity;
+// export default Activity;

src/components/Directory/ManageBucket1.jsx

@@ -23,7 +23,6 @@ const ManageBucket1 = () => {
   const handleClose = () => {
     setAction(null);
     setSelectedBucket(null);
-    setDeleteId(null);
   };
   const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
     handleClose();
@@ -49,23 +48,26 @@ const ManageBucket1 = () => {
         <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
       </div>
 
-      {action == "create" ? (
+      {action ? (
         <>
-          <BucketForm
-            selectedBucket={selectedBucket}
-            mode={action} // pass create | edit
-            onSubmit={handleSubmit}
-            onCancel={() => {
-              setAction(null);
-              setSelectedBucket(null);
-            }}
-            isPending={creating || updating}
-          />
-          {action === "edit" && selectedBucket && (
-            <AssignedBucket
-              selectedBucket={selectedBucket}
-              handleClose={handleClose}
-            />
+          {action && (
+            <div>
+              <BucketForm
+                selectedBucket={selectedBucket}
+                mode={action} // pass create | edit
+                onSubmit={handleSubmit}
+                onCancel={() => {
+                  setAction(null);
+                  setSelectedBucket(null);
+                }}
+                isPending={creating || updating}
+              />
+              {action === "edit" && (
+                <AssignedBucket
+                selectedBucket={selectedBucket}
+                handleClose={handleClose}
+              />)}
+            </div>
           )}
         </>
       ) : (
@@ -91,11 +93,19 @@ const ManageBucket1 = () => {
             buckets={data}
             loading={isLoading}
             searchTerm={searchTerm}
-            onDelete={(id) => setDeleteBucket({isOpen:true,bucketId:id})}
+            onDelete={(id) => setDeleteBucket({ isOpen: true, bucketId: id })}
+            onEdit={(b) => {
+              setAction("edit")
+              setSelectedBucket(b)
+            }}
           />
         </>
       )}
+
     </div>
   );
 };
 export default ManageBucket1;
+
+
+

src/components/Documents/DocumentFilterPanel.jsx

@@ -96,7 +96,7 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
             placeholder="DD-MM-YYYY To DD-MM-YYYY"
             startField="startDate"
             endField="endDate"
-            defaultRange={true}
+            defaultRange={false}
             resetSignal={resetKey}
             maxDate={new Date()}
           />

src/components/Documents/Documents.jsx

@@ -118,7 +118,7 @@ const Documents = ({ Document_Entity, Entity }) => {
   return (
     <DocumentContext.Provider value={contextValues}>
       <div className="mt-5">
-        <div className="card d-flex p-2">
+        <div className="card page-min-h d-flex p-2">
           <div className="row align-items-center">
             {/* Search */}
             <div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
@@ -149,30 +149,11 @@ const Documents = ({ Document_Entity, Entity }) => {
               </label>
             </div>
 
-            {/* Actions */}
             <div className="col-6 col-md-6 col-lg-8 text-end">
-              {/* <span
-              className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 cursor-pointer"
-              disabled={isRefetching}
-              onClick={() => {
-                setSearchText("");
-                setFilter(DocumentFilterDefaultValues);
-                refetchFn && refetchFn();
-              }}
-            >
-              Refresh
-              <i
-                className={`bx bx-refresh ms-1 ${
-                  isRefetching ? "bx-spin" : ""
-                }`}
-              ></i>
-            </span> */}
-
               {(isSelf || canUploadDocument) && (
                 <button
+                  className="btn btn-sm btn-primary me-3"
                   type="button"
-                  title="Add New Document"
-                  className="p-1 bg-primary rounded-circle cursor-pointer"
                   onClick={() =>
                     setManageDoc({
                       document: null,
@@ -180,7 +161,10 @@ const Documents = ({ Document_Entity, Entity }) => {
                     })
                   }
                 >
-                  <i className="bx bx-plus fs-4 text-white"></i>
+                  <i className="bx bx-plus-circle me-2"></i>
+                  <span className="d-none d-md-inline-block">
+                    Add New Document
+                  </span>
                 </button>
               )}
             </div>

src/components/Employee/DemoTable.jsx

@@ -1,172 +0,0 @@
-import React from "react";
-
-const DemoTable = () => {
-  return (
-    <div className="content-wrapper">
-      <div className="container-fluid">
-        <div className="card">
-          <div className="card-datatable table-responsive">
-            <table className="datatables-basic table border-top">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th></th>
-                  <th>id</th>
-                  <th>Name</th>
-                  <th>Email</th>
-                  <th>Date</th>
-                  <th>Salary</th>
-                  <th>Status</th>
-                  <th>Action</th>
-                </tr>
-              </thead>
-            </table>
-          </div>
-        </div>
-        <div className="offcanvas offcanvas-end" id="add-new-record">
-          <div className="offcanvas-header border-bottom">
-            <h5 className="offcanvas-title" id="exampleModalLabel">
-              New Record
-            </h5>
-            <button
-              type="button"
-              className="btn-close text-reset"
-              data-bs-dismiss="offcanvas"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div className="offcanvas-body flex-grow-1">
-            <form
-              className="add-new-record pt-0 row g-2"
-              id="form-add-new-record"
-              onsubmit="return false"
-            >
-              <div className="col-sm-12">
-                <label className="form-label" for="basicFullname">
-                  Full Name
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicFullname2" className="input-group-text">
-                    <i className="bx bx-user"></i>
-                  </span>
-                  <input
-                    type="text"
-                    id="basicFullname"
-                    className="form-control dt-full-name"
-                    name="basicFullname"
-                    placeholder="John Doe"
-                    aria-label="John Doe"
-                    aria-describedby="basicFullname2"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicPost">
-                  Post
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicPost2" className="input-group-text">
-                    <i className="bx bxs-briefcase"></i>
-                  </span>
-                  <input
-                    type="text"
-                    id="basicPost"
-                    name="basicPost"
-                    className="form-control dt-post"
-                    placeholder="Web Developer"
-                    aria-label="Web Developer"
-                    aria-describedby="basicPost2"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicEmail">
-                  Email
-                </label>
-                <div className="input-group input-group-merge">
-                  <span className="input-group-text">
-                    <i className="bx bx-envelope"></i>
-                  </span>
-                  <input
-                    type="text"
-                    id="basicEmail"
-                    name="basicEmail"
-                    className="form-control dt-email"
-                    placeholder="john.doe@example.com"
-                    aria-label="john.doe@example.com"
-                  />
-                </div>
-                <div className="form-text">
-                  You can use letters, numbers & periods
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicDate">
-                  Joining Date
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicDate2" className="input-group-text">
-                    <i className="bx bx-calendar"></i>
-                  </span>
-                  <input
-                    type="text"
-                    className="form-control dt-date"
-                    id="basicDate"
-                    name="basicDate"
-                    aria-describedby="basicDate2"
-                    placeholder="MM/DD/YYYY"
-                    aria-label="MM/DD/YYYY"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <label className="form-label" for="basicSalary">
-                  Salary
-                </label>
-                <div className="input-group input-group-merge">
-                  <span id="basicSalary2" className="input-group-text">
-                    <i className="bx bx-dollar"></i>
-                  </span>
-                  <input
-                    type="number"
-                    id="basicSalary"
-                    name="basicSalary"
-                    className="form-control dt-salary"
-                    placeholder="12000"
-                    aria-label="12000"
-                    aria-describedby="basicSalary2"
-                  />
-                </div>
-              </div>
-              <div className="col-sm-12">
-                <button
-                  type="submit"
-                  className="btn btn-primary data-submit me-sm-4 me-1"
-                >
-                  Submit
-                </button>
-                <button
-                  type="reset"
-                  className="btn btn-outline-secondary"
-                  data-bs-dismiss="offcanvas"
-                >
-                  Cancel
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-
-        <hr className="my-12" />
-
-        <hr className="my-12" />
-
-        <hr className="my-12" />
-      </div>
-
-      <div className="content-backdrop fade"></div>
-    </div>
-  );
-};
-
-export default DemoTable;

src/components/Employee/EmployeeList.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const EmployeeList = () => {
-  return <div>EmployeeList</div>;
-};
-
-export default EmployeeList;

src/components/Employee/EmployeeSchema.jsx

@@ -0,0 +1,124 @@
+import { z } from "zod"
+
+
+const mobileNumberRegex = /^[0-9]\d{9}$/;
+
+export  const employeeSchema = 
+     z.object({
+    firstName: z.string().min(1, { message: "First Name is required" }),
+    middleName: z.string().optional(),
+    lastName: z.string().min(1, { message: "Last Name is required" }),
+    email: z
+      .string()
+      .max(80, "Email cannot exceed 80 characters")
+      .optional()
+      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
+        message: "Invalid email format",
+      })
+      .refine(
+        (val) => {
+          if (!val) return true;
+          const [local, domain] = val.split("@");
+          return (
+            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
+          );
+        },
+        {
+          message: "Email local or domain part is too long",
+        }
+      ),
+    currentAddress: z
+      .string()
+      .min(1, { message: "Current Address is required" })
+      .max(500, { message: "Address cannot exceed 500 characters" }),
+    birthDate: z
+      .string()
+      .min(1, { message: "Birth Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Birth date cannot be in the future",
+        }
+      ),
+    joiningDate: z
+      .string()
+      .min(1, { message: "Joining Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Joining date cannot be in the future",
+        }
+      ),
+    emergencyPhoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    emergencyContactPerson: z
+      .string()
+      .min(1, { message: "Emergency Contact Person is required" })
+      .regex(/^[A-Za-z\s]+$/, {
+        message: "Emergency Contact Person must contain only letters",
+      }),
+    aadharNumber: z
+      .string()
+      .optional()
+      .refine((val) => !val || /^\d{12}$/.test(val), {
+        message: "Aadhar card must be exactly 12 digits long",
+      }),
+    gender: z
+      .string()
+      .min(1, { message: "Gender is required" })
+      .refine((val) => val !== "Select Gender", {
+        message: "Please select a gender",
+      }),
+    panNumber: z
+      .string()
+      .optional()
+      .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
+        message: "Invalid PAN number",
+      }),
+    permanentAddress: z
+      .string()
+      .min(1, { message: "Permanent Address is required" })
+      .max(500, { message: "Address cannot exceed 500 characters" }),
+    phoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    jobRoleId: z.string().min(1, { message: "Role is required" }),
+    organizationId:z.string().min(1,{message:"Organization is required"}),
+    hasApplicationAccess:z.boolean().default(false),
+  }).refine((data) => {
+  if (data.hasApplicationAccess) {
+    return data.email && data.email.trim() !== "";
+  }
+  return true; 
+}, {
+  message: "Email is required when employee has access",
+  path: ["email"], 
+});
+
+ 
+export const defatEmployeeObj = {
+      firstName:  "",
+      middleName: "",
+      lastName: "",
+      email:  "",
+      currentAddress: "",
+      birthDate:  "",
+      joiningDate: "",
+      emergencyPhoneNumber: "",
+      emergencyContactPerson:  "",
+      aadharNumber: "",
+      gender:  "",
+      panNumber: "",
+      permanentAddress:  "",
+      phoneNumber:  "",
+      jobRoleId: null,
+      organizationId:"",
+      hasApplicationAccess:false
+    }

src/components/Employee/ManageEmployee.jsx

@@ -1,36 +1,37 @@
 import React, { useEffect, useState } from "react";
-import showToast from "../../services/toastService";
-import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
+
 import useMaster from "../../hooks/masterHook/useMaster";
 import { useDispatch } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
-import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
 import {
-  cacheData,
-  clearCacheKey,
-  getCachedData,
-} from "../../slices/apiDataManager";
-import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-import { useMutation } from "@tanstack/react-query";
+  useEmployeeProfile,
+  useUpdateEmployee,
+} from "../../hooks/useEmployees";
+
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
-
-const mobileNumberRegex = /^[0-9]\d{9}$/;
+import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
+import { useOrganizationsList } from "../../hooks/useOrganization";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const dispatch = useDispatch();
   const { mutate: updateEmployee, isPending } = useUpdateEmployee();
-
+  const {
+    data: organzationList,
+    isLoading,
+    isError,
+    error: EempError,
+  } = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
   const {
     employee,
     error,
     loading: empLoading,
-    refetch
+    refetch,
   } = useEmployeeProfile(employeeId);
 
   useEffect(() => {
@@ -38,6 +39,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   }, [employeeId]);
 
   const [disabledEmail, setDisabledEmail] = useState(false);
+
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
@@ -45,98 +47,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const [currentAddressLength, setCurrentAddressLength] = useState(0);
   const [permanentAddressLength, setPermanentAddressLength] = useState(0);
 
-  const userSchema = z.object({
-    ...(employeeId ? { id: z.string().optional() } : {}),
-    firstName: z.string().min(1, { message: "First Name is required" }),
-    middleName: z.string().optional(),
-    lastName: z.string().min(1, { message: "Last Name is required" }),
-    email: z
-      .string()
-      .max(80, "Email cannot exceed 80 characters")
-      .optional()
-      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
-        message: "Invalid email format",
-      })
-      .refine(
-        (val) => {
-          if (!val) return true;
-          const [local, domain] = val.split("@");
-          return (
-            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
-          );
-        },
-        {
-          message: "Email local or domain part is too long",
-        }
-      ),
-    currentAddress: z
-      .string()
-      .min(1, { message: "Current Address is required" })
-      .max(500, { message: "Address cannot exceed 500 characters" }),
-    birthDate: z
-      .string()
-      .min(1, { message: "Birth Date is required" })
-      .refine(
-        (date, ctx) => {
-          return new Date(date) <= new Date();
-        },
-        {
-          message: "Birth date cannot be in the future",
-        }
-      ),
-    joiningDate: z
-      .string()
-      .min(1, { message: "Joining Date is required" })
-      .refine(
-        (date, ctx) => {
-          return new Date(date) <= new Date();
-        },
-        {
-          message: "Joining date cannot be in the future",
-        }
-      ),
-    emergencyPhoneNumber: z
-      .string()
-      .min(1, { message: "Phone Number is required" })
-      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-    emergencyContactPerson: z
-      .string()
-      .min(1, { message: "Emergency Contact Person is required" })
-      .regex(/^[A-Za-z\s]+$/, {
-        message: "Emergency Contact Person must contain only letters",
-      }),
-    aadharNumber: z
-      .string()
-      .optional()
-      .refine((val) => !val || /^\d{12}$/.test(val), {
-        message: "Aadhar card must be exactly 12 digits long",
-      }),
-    gender: z
-      .string()
-      .min(1, { message: "Gender is required" })
-      .refine((val) => val !== "Select Gender", {
-        message: "Please select a gender",
-      }),
-    panNumber: z
-      .string()
-      .optional()
-      .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
-        message: "Invalid PAN number",
-      }),
-    permanentAddress: z
-      .string()
-      .min(1, { message: "Permanent Address is required" })
-      .max(500, { message: "Address cannot exceed 500 characters" }),
-    phoneNumber: z
-      .string()
-      .min(1, { message: "Phone Number is required" })
-      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-    jobRoleId: z.string().min(1, { message: "Role is required" }),
-  });
-
   useEffect(() => {
-    refetch()
-  }, [])
+    refetch();
+  }, []);
 
   const {
     register,
@@ -147,25 +60,8 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     reset,
     getValues,
   } = useForm({
-    resolver: zodResolver(userSchema),
-    defaultValues: {
-      id: currentEmployee?.id || null,
-      firstName: currentEmployee?.firstName || "",
-      middleName: currentEmployee?.middleName || "",
-      lastName: currentEmployee?.lastName || "",
-      email: currentEmployee?.email || "",
-      currentAddress: currentEmployee?.currentAddress || "",
-      birthDate: formatDate(currentEmployee?.birthDate) || "",
-      joiningDate: formatDate(currentEmployee?.joiningDate) || "",
-      emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
-      emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
-      aadharNumber: currentEmployee?.aadharNumber || "",
-      gender: currentEmployee?.gender || "",
-      panNumber: currentEmployee?.panNumber || "",
-      permanentAddress: currentEmployee?.permanentAddress || "",
-      phoneNumber: currentEmployee?.phoneNumber || "",
-      jobRoleId: currentEmployee?.jobRoleId.toString() || null,
-    },
+    resolver: zodResolver(employeeSchema),
+    defaultValues: defatEmployeeObj,
     mode: "onChange",
   });
 
@@ -176,7 +72,13 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
       data.email = null;
     }
 
-    updateEmployee({ ...data, IsAllEmployee }, {
+    const payload = { ...data, IsAllEmployee };
+
+    if (employeeId) {
+      payload.id = employeeId;
+    }
+
+    updateEmployee(payload, {
       onSuccess: () => {
         reset();
         onClosed();
@@ -184,7 +86,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     });
   };
 
-
   useEffect(() => {
     if (!loading && !error && employee) {
       setCurrentEmployee(employee);
@@ -195,37 +96,47 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     reset(
       currentEmployee
         ? {
-          id: currentEmployee.id || null,
-          firstName: currentEmployee.firstName || "",
-          middleName: currentEmployee.middleName || "",
-          lastName: currentEmployee.lastName || "",
-          email: currentEmployee.email || "",
-          currentAddress: currentEmployee.currentAddress || "",
-          birthDate: formatDate(currentEmployee.birthDate) || "",
-          joiningDate: formatDate(currentEmployee.joiningDate) || "",
-          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
-          emergencyContactPerson:
-            currentEmployee.emergencyContactPerson || "",
-          aadharNumber: currentEmployee.aadharNumber || "",
-          gender: currentEmployee.gender || "",
-          panNumber: currentEmployee.panNumber || "",
-          permanentAddress: currentEmployee.permanentAddress || "",
-          phoneNumber: currentEmployee.phoneNumber || "",
-          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-        }
+            id: currentEmployee.id || null,
+            firstName: currentEmployee.firstName || "",
+            middleName: currentEmployee.middleName || "",
+            lastName: currentEmployee.lastName || "",
+            email: currentEmployee.email || "",
+            currentAddress: currentEmployee.currentAddress || "",
+            birthDate: formatDate(currentEmployee.birthDate) || "",
+            joiningDate: formatDate(currentEmployee.joiningDate) || "",
+            emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
+            emergencyContactPerson:
+              currentEmployee.emergencyContactPerson || "",
+            aadharNumber: currentEmployee.aadharNumber || "",
+            gender: currentEmployee.gender || "",
+            panNumber: currentEmployee.panNumber || "",
+            permanentAddress: currentEmployee.permanentAddress || "",
+            phoneNumber: currentEmployee.phoneNumber || "",
+            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+            organizationId: currentEmployee.organizationId || "",
+            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
+          }
         : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
     setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
   }, [currentEmployee, reset]);
 
+  const hasAccessAplication = watch("hasApplicationAccess");
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
-        <div className="text-center"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
+        <div className="text-center">
+          <p className="fs-5 fw-semibold">
+            {" "}
+            {employee ? "Update Employee" : "Create Employee"}
+          </p>{" "}
+        </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>First Name</Label>
+            <Label className="form-text text-start" required>
+              First Name
+            </Label>
             <input
               type="text"
               name="firstName"
@@ -244,7 +155,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.firstName && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.firstName.message}
               </div>
             )}
@@ -267,14 +181,18 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.middleName && (
-              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start "
+                style={{ fontSize: "12px" }}
+              >
                 {errors.middleName.message}
               </div>
             )}
           </div>
-
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Last Name</Label>
+            <Label className="form-text text-start" required>
+              Last Name
+            </Label>
             <input
               type="text"
               {...register("lastName", {
@@ -291,16 +209,24 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.lastName && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.lastName.message}
               </div>
             )}
           </div>
-
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <div className="form-text text-start">Email</div>
+            <Label
+              htmlFor="email"
+              className="text-start form-text"
+              required={hasAccessAplication}
+            >
+              Email
+            </Label>
             <input
               type="email"
               id="email"
@@ -321,7 +247,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>Phone Number</Label>
+            <Label className="form-text text-start" required>
+              Phone Number
+            </Label>
             <input
               type="text"
               keyboardType="numeric"
@@ -345,7 +273,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         <div className="row mb-3"></div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Gender</Label>
+            <Label className="form-text text-start" required>
+              Gender
+            </Label>
 
             <div className="input-group">
               <select
@@ -387,7 +317,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             </div>
 
             {errors.birthDate && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.birthDate.message}
               </div>
             )}
@@ -408,7 +341,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             </div>
 
             {errors.joiningDate && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.joiningDate.message}
               </div>
             )}
@@ -416,7 +352,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>Current Address</Label>
+            <Label className="form-text text-start" required>
+              Current Address
+            </Label>
 
             <textarea
               id="currentAddress"
@@ -428,15 +366,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               maxLength={500}
               onChange={(e) => {
                 setCurrentAddressLength(e.target.value.length);
-                // let react-hook-form still handle it
                 register("currentAddress").onChange(e);
               }}
             ></textarea>
             <div className="text-end muted">
-              <small>
-                {" "}
-                {500 - currentAddressLength} characters left
-              </small>
+              <small> {500 - currentAddressLength} characters left</small>
             </div>
             {errors.currentAddress && (
               <div
@@ -466,9 +400,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             ></textarea>
             <div className="text-end muted">
-              <small>
-                {500 - permanentAddressLength} characters left
-              </small>
+              <small>{500 - permanentAddressLength} characters left</small>
             </div>
             {errors.permanentAddress && (
               <div
@@ -480,6 +412,55 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
         </div>
+
+        {/* -------------- */}
+        <div className="row mb-3">
+          <div className="col-sm-6">
+            <Label className="form-text text-start" required>
+              Organization
+            </Label>
+            <div className="input-group">
+              <select
+                className="form-select form-select-sm"
+                {...register("organizationId")}
+                id="organizationId"
+                aria-label=""
+              >
+                <option disabled value="">
+                  Select Role
+                </option>
+                {organzationList?.data
+                  .sort((a, b) => a?.name?.localeCompare(b?.name))
+                  .map((item) => (
+                    <option value={item?.id} key={item?.id}>
+                      {item?.name}
+                    </option>
+                  ))}
+              </select>
+            </div>
+            {errors.organizationId && (
+              <div
+                className="danger-text text-start justify-content-center"
+                style={{ fontSize: "12px" }}
+              >
+                {errors.organizationId.message}
+              </div>
+            )}
+          </div>
+
+          <div className="col-sm-6 d-flex align-items-center mt-2">
+            <label className="form-check-label d-flex align-items-center">
+              <input
+                type="checkbox"
+                className="form-check-input me-2"
+                {...register("hasApplicationAccess")}
+              />
+              Has Application Access ?
+            </label>
+          </div>
+        </div>
+
+        {/* --------------- */}
         <div className="row mb-3">
           {" "}
           <div className="divider">
@@ -488,7 +469,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Official Designation</Label>
+            <Label className="form-text text-start" required>
+              Official Designation
+            </Label>
             <div className="input-group">
               <select
                 className="form-select form-select-sm"
@@ -601,15 +584,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
         </div>
-
-        {employeeId && (
-          <div className="row mb-3 d-none">
-            <div className="col-sm-12">
-              <input type="text" name="id" {...register("id")} />
-            </div>
-          </div>
-        )}
-
         <div className="row text-end">
           <div className="col-sm-12">
             <button
@@ -626,18 +600,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               className="btn btn-sm btn-primary"
               disabled={isPending}
             >
-              {isPending
-                ? "Please Wait..."
-                : employeeId
-                  ? "Update"
-                  : "Create"}
+              {isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
             </button>
-
-
           </div>
         </div>
       </form>
-
     </>
   );
 };

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState,useMemo } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -16,8 +16,11 @@ import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 import { useLocation } from "react-router-dom";
 
 const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
-  const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-  const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
+  const selectedProjectId = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  const { data, isLoading, isError, error, isFetching, isFetched } =
+    useExpenseFilter();
 
   const groupByList = useMemo(() => {
     return [
@@ -27,11 +30,10 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
       { id: "project", name: "Project" },
       { id: "paymentMode", name: "Payment Mode" },
       { id: "expensesType", name: "Expense Type" },
-    { id: "createdAt", name: "Submitted Date" }
+      { id: "createdAt", name: "Submitted Date" },
     ].sort((a, b) => a.name.localeCompare(b.name));
   }, []);
 
-
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
   const [resetKey, setResetKey] = useState(0);
 
@@ -40,7 +42,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     defaultValues: defaultFilter,
   });
 
-  const { control, register, handleSubmit, reset, watch } = methods;
+  const { control, handleSubmit, reset, setValue, watch } = methods;
   const isTransactionDate = watch("isTransactionDate");
 
   const closePanel = () => {
@@ -78,28 +80,37 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   }, [location]);
 
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
-  if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
+  if (isError && isFetched)
+    return <div>Something went wrong Here- {error.message} </div>;
   return (
     <>
-
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
           <div className="mb-3 w-100">
             <div className="d-flex align-items-center mb-2">
-              <label className="form-label me-2">Choose Date:</label>
-              <div className="form-check form-switch m-0">
-                <input
-                  className="form-check-input"
-                  type="checkbox"
-                  id="switchOption1"
-                  {...register("isTransactionDate")}
-                />
+              <label className="form-label me-2">Filter By:</label>
+              <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
+                <button
+                  type="button"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    isTransactionDate ? "active btn-primary text-white" : ""
+                  }`}
+                  onClick={() => setValue("isTransactionDate", true)}
+                >
+                  Transaction Date
+                </button>
+                <button
+                  type="button"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    !isTransactionDate ? "active btn-primary text-white" : ""
+                  }`}
+                  onClick={() => setValue("isTransactionDate", false)}
+                >
+                  Submitted Date
+                </button>
               </div>
-              <label className="form-label mb-0 ms-2">
-                {isTransactionDate ? "Submitted": "Transaction" }
-              </label>
             </div>
-
+            <label className="fw-semibold">Choose Date Range:</label>
             <DateRangePicker1
               placeholder="DD-MM-YYYY To DD-MM-YYYY"
               startField="startDate"
@@ -169,7 +180,9 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
             </div>
           </div>
           <div className="mb-2 text-start ">
-        <label htmlFor="groupBySelect" className="form-label">Group By :</label>
+            <label htmlFor="groupBySelect" className="form-label">
+              Group By :
+            </label>
             <select
               id="groupBySelect"
               className="form-select form-select-sm"
@@ -187,20 +200,19 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
           <div className="d-flex justify-content-end py-3 gap-2">
             <button
               type="button"
-              className="btn btn-label-secondary btn-xs"
+              className="btn btn-label-secondary btn-sm"
               onClick={onClear}
             >
               Clear
             </button>
-            <button type="submit" className="btn btn-primary btn-xs">
+            <button type="submit" className="btn btn-primary btn-sm">
               Apply
             </button>
           </div>
         </form>
       </FormProvider>
-      
     </>
   );
 };
 
-export default ExpenseFilterPanel;
+export default ExpenseFilterPanel;

src/components/Layout/Header.jsx

@@ -394,6 +394,15 @@ const Header = () => {
               </li>
               <li>
                 <div className="dropdown-divider"></div>
+              </li>
+               <li onClick={()=>onOpen()}>
+                {" "}
+                <a
+                  className="dropdown-item cusor-pointer"
+                >
+                  <i className="bx bx-transfer-alt me-2"></i>
+                  <span className="align-middle">Switch Workspace</span>
+                </a>
               </li>
               <li onClick={handleProfilePage}>
                 <a
@@ -424,15 +433,7 @@ const Header = () => {
                 </a>
               </li>
 
-              <li onClick={()=>onOpen()}>
-                {" "}
-                <a
-                  className="dropdown-item cusor-pointer"
-                >
-                  <i className="bx bx-transfer-alt me-2"></i>
-                  <span className="align-middle">Switch Tenant</span>
-                </a>
-              </li>
+             
               <li>
                 <div className="dropdown-divider"></div>
               </li>
@@ -440,7 +441,7 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  onClick={()=>handleLogout()}
+                  onClick={()=>logout()}
                 >
                  {logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
                   <span className="align-middle">SignOut</span></>}

src/components/Organization/AssignOrg.jsx

@@ -93,8 +93,15 @@ const AssignOrg = ({ setStep }) => {
     <div className="row text-black text-start mb-3">
       {/* Organization Info Display */}
       <div className="col-12 mb-3">
-        <div className="d-flex justify-content-between align-items-center text-start mb-2">
-          <div className="fw-semibold text-wrap">{orgData.name}</div>
+        <div className="d-flex justify-content-between align-items-center text-start mb-1">
+          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
+            <img
+                    src="/public/assets/img/orgLogo.png"
+                    alt="logo"
+                    width={40}
+                    height={40}
+                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
+          </div>
           <div className="text-end">
             <button
               type="button"
@@ -106,7 +113,7 @@ const AssignOrg = ({ setStep }) => {
           </div>
         </div>
       </div>
-
+      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
       {/* Contact Info */}
       <div className="col-md-6 mb-3">
         <div className="d-flex">
@@ -114,7 +121,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Contact Person :
+           <i className="bx bx-sm bx-user me-1" /> Contact Person :
           </label>
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
@@ -125,7 +132,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Contact Number :
+           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
@@ -136,7 +143,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Email Address :
+          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
           </label>
           <div className="text-muted">{orgData.email}</div>
         </div>
@@ -147,7 +154,8 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-            Service provider Id (SPRID) :
+          <i className="bx bx-sm me-1 bx-barcode"></i>
+  Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{orgData.sprid}</div>
         </div>
@@ -158,7 +166,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-1 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Address :
+           <i className='bx bx-sm me-1 bx-map'></i> Address :
           </label>
           <div className="text-muted text-start">{orgData.address}</div>
         </div>
@@ -233,11 +241,11 @@ const AssignOrg = ({ setStep }) => {
           <div className="d-flex justify-content-between mt-5">
             <button
               type="button"
-              className="btn btn-xs btn-outline-secondary"
+              className="btn btn-sm btn-outline-secondary"
               onClick={handleBack}
               disabled={isPending}
             >
-              <i className="bx bx-left-arrow-alt"></i> Back
+              <i className="bx bx-chevron-left"></i>Back
             </button>
             <button
               type="submit"
@@ -247,8 +255,8 @@ const AssignOrg = ({ setStep }) => {
               {isPending
                 ? "Please wait..."
                 : flowType === "default"
-                  ? "Assign Organization"
-                  : "Add"}
+                  ? "Assign to Organization"
+                  : "Assign to Project"}
             </button>
           </div>
         </form>

src/components/Organization/ManagOrg.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   useCreateOrganization,
+  useOrganization,
   useOrganizationModal,
   useUpdateOrganization,
 } from "../../hooks/useOrganization";
@@ -18,6 +19,12 @@ const ManagOrg = () => {
   const { data: service, isLoading } = useGlobalServices();
   const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
     useOrganizationModal();
+  const {
+    data: organization,
+    isLoading: organizationLoading,
+    isError,
+    error,
+  } = useOrganization(orgData?.id);
 
   const method = useForm({
     resolver: zodResolver(organizationSchema),
@@ -45,25 +52,27 @@ const ManagOrg = () => {
       onOpen({ startStep: 1 });
       onClose();
     });
-
   // Prefill form if editing
   useEffect(() => {
-    if (orgData) {
-      console.log(orgData);
+    if (organization) {
       reset({
-        name: orgData.name || "",
-        contactPerson: orgData.contactPerson || "",
-        contactNumber: orgData.contactNumber || "",
-        email: orgData.email || "",
-        serviceIds: orgData.services?.map((s) => s.id) || [],
-        address: orgData.address || "",
+        name: organization.name || "",
+        contactPerson: organization.contactPerson || "",
+        contactNumber: organization.contactNumber || "",
+        email: organization.email || "",
+        serviceIds: organization.services?.map((s) => s.id) || [],
+        address: organization.address || "",
       });
     }
-  }, [orgData, reset]);
+  }, [organization, reset, service?.data]);
 
-  const onSubmit = (payload) => {
-    if (orgData?.id) {
-      updateOrganization({ id: orgData.id, ...payload });
+  const onSubmit = (formData) => {
+    let payload = { ...formData };
+    if (organization?.id) {
+      updateOrganization({
+        orgId: organization.id,
+        payload: { ...payload, id: organization.id },
+      });
     } else {
       createOrganization(payload);
     }
@@ -142,11 +151,11 @@ const ManagOrg = () => {
         <div className="mb-1 text-start">
           <SelectMultiple
             name="serviceIds"
-            label="Services"
-            required
+            label="Select Service"
+            options={service?.data}
+            labelKey="name"
             valueKey="id"
-            options={service?.data || []}
-            required = {true}
+            IsLoading={isLoading}
           />
           {errors.serviceIds && (
             <span className="danger-text">{errors.serviceIds.message}</span>

src/components/Organization/OrgPicker.css

@@ -0,0 +1,24 @@
+/* Default: hide scrollbar */
+.scrollable-tbody {
+  max-height: 350px;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+}
+.scrollable-tbody::-webkit-scrollbar {
+  width: 0; /* Chrome, Safari */
+}
+
+/* On hover: show scrollbar */
+.scrollable-tbody:hover {
+  scrollbar-width: thin; /* Firefox */
+}
+.scrollable-tbody:hover::-webkit-scrollbar {
+  width: 6px; /* Adjust width */
+}
+.scrollable-tbody:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+.scrollable-tbody:hover::-webkit-scrollbar-track {
+  background: transparent;
+}

src/components/Organization/OrgPickerFromSPId.jsx

@@ -78,16 +78,13 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
               <div className="d-flex flex-row gap-2 text-start text-black ">
                 <div className="mt-1">
                   <img
-                    src="/public/assets/img/SP-Placeholdeer.svg"
+                    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"
-                  onClick={() => onOpen({ startStep: 3, orgData: org })}
-                >
+                <div className="d-flex flex-column p-0 m-0 cursor-pointer">
                   <span className="fs-6 fw-semibold">{org.name}</span>
                   <div className="d-flex gap-2">
                     <small
@@ -102,6 +99,16 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                     <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"
+                      onClick={() => onOpen({ startStep: 3, orgData: org })}
+                    >
+                      Select
+                    </button>
+                  </div>
                 </div>
               </div>
             ))}

src/components/Organization/OrgPickerfromTenant.jsx

@@ -6,6 +6,7 @@ import {
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Label from "../common/Label";
 import Pagination from "../common/Pagination";
+import "./OrgPicker.css"
 
 const OrgPickerfromTenant = ({ title }) => {
   const [searchText, setSearchText] = useState("");
@@ -70,8 +71,8 @@ const OrgPickerfromTenant = ({ title }) => {
 
   return (
     <div className="d-block">
-      <div className="text-start mb-1">
-        <Label className="text-secondary">{title}</Label>
+      <div className="d-flex align-items-center gap-2 mb-1">
+        <Label className="mb-0">{title}</Label>
         <input
           type="text"
           value={searchText}
@@ -81,11 +82,12 @@ const OrgPickerfromTenant = ({ title }) => {
         />
       </div>
 
+
       {/* ---- Organization list ---- */}
       {isLoading ? (
         <div>Loading....</div>
       ) : data && data?.data?.length > 0 ? (
-        <div className="dataTables_wrapper no-footer  pb-2">
+        <div className="dataTables_wrapper no-footer pb-5">
           <table className="table dataTable text-nowrap">
             <thead>
               <tr className="table_header_border">
@@ -99,28 +101,41 @@ const OrgPickerfromTenant = ({ title }) => {
                 </th>
               </tr>
             </thead>
-            <tbody>
-              {Array.isArray(data.data) && data.data.length > 0
-                ? data.data.map((row, i) => (
+          </table>
+
+          <div
+            className="scrollable-tbody overflow-y-auto"
+            style={{ maxHeight: "350px" }}
+          >
+            <table className="table dataTable text-nowrap mb-0">
+              <tbody>
+                {Array.isArray(data.data) && data.data.length > 0
+                  ? data.data.map((row, i) => (
                     <tr key={i}>
                       {contactList.map((col) => (
                         <td key={col.key} className={col.align}>
                           {col.getValue(row)}
                         </td>
                       ))}
-                      <td className="sticky-action-column bg-white">
-                        <button
-                          className="btn btn-sm btn-primary"
-                          onClick={() => onOpen({ startStep: 3, orgData: row })}
-                        >
-                          Select
-                        </button>
+                      <td className="sticky-action-column p-0 bg-white">
+                        <div className="p-1">
+                          <span
+                            type="submit"
+                            className="btn btn-sm"
+                            onClick={() =>
+                              onOpen({ startStep: 3, orgData: row })
+                            }
+                          >
+                            <i class='bx bx-right-arrow-circle text-primary'></i>
+                          </span>
+                        </div>
                       </td>
                     </tr>
                   ))
-                : null}
-            </tbody>
-          </table>
+                  : null}
+              </tbody>
+            </table>
+          </div>
         </div>
       ) : null}
       <div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">

src/components/Organization/OrganizationModal.jsx

@@ -19,6 +19,7 @@ import AssignOrg from "./AssignOrg";
 import ManagOrg from "./ManagOrg";
 import OrgPickerFromSPId from "./OrgPickerFromSPId";
 import OrgPickerfromTenant from "./OrgPickerfromTenant";
+import ViewOrganization from "./ViewOrganization";
 
 const OrganizationModal = () => {
   const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
@@ -53,14 +54,14 @@ const OrganizationModal = () => {
   };
 
   const RenderTitle = useMemo(() => {
-    if (orgData) {
+    if (orgData && startStep === 3 ) {
       return "Assign Organization";
     }
 
     if (startStep === 1) {
       return orgData && orgData !== null
         ? "Add Organization"
-        : "Choose Organization1";
+        : "Choose Organization";
     }
 
     if (startStep === 2) {
@@ -70,8 +71,11 @@ const OrganizationModal = () => {
     if (startStep === 3) {
       return "Assign Organization";
     }
+    if(startStep === 5){
+      return "Organization Details"
+    }
 
-    return "Manage Organization";
+    return  `${orgData ? "Update":"Create"} Organization`;
   }, [startStep, orgData]);
 
   const contentBody = (
@@ -94,6 +98,9 @@ const OrganizationModal = () => {
 
       {/* ---------- STEP 3: Add New Organization ---------- */}
       {startStep === 4 && <ManagOrg />}
+
+        {/* ---------- STEP 3: View Organization ---------- */}
+      {startStep === 5 && <ViewOrganization orgId={orgData}/>}
     </div>
   );
 

src/components/Organization/OrganizationSchema.js

@@ -19,7 +19,7 @@ export const organizationSchema = z.object({
     .email("Invalid email address"),
   serviceIds: z
     .array(z.string())
-    .min(1, { message: "Please insert service id" }),
+    .min(1, { message: "Service isrequired" }),
 });
 
 export const defaultOrganizationValues = {

src/components/Organization/OrganizationSkeleton.jsx

@@ -42,3 +42,82 @@ export const OrgCardSkeleton = () => {
     </div>
   );
 };
+
+
+export const OrgDetailsSkeleton = () => {
+  return (
+    <div className="row text-start p-3">
+      {/* Header */}
+      <div className="col-12 mb-3">
+        <div className="d-flex justify-content-between align-items-center">
+          {/* Logo + Name */}
+          <div className="d-flex flex-row gap-2 align-items-center">
+            <SkeletonLine height={40} width={40} className="rounded-circle" />
+            <SkeletonLine height={18} width="180px" />
+          </div>
+
+          {/* Status Badge */}
+          <SkeletonLine height={20} width="70px" className="rounded-pill" />
+        </div>
+      </div>
+
+      {/* Section Title */}
+      <div className="d-flex text-secondary mb-2">
+        <SkeletonLine height={16} width="140px" />
+      </div>
+
+      {/* Contact Person */}
+      <div className="col-md-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="140px" />
+        </div>
+      </div>
+
+      {/* Contact Number */}
+      <div className="col-md-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="140px" />
+        </div>
+      </div>
+
+      {/* Email */}
+      <div className="col-md-12 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="220px" />
+        </div>
+      </div>
+
+      {/* SPRID */}
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="160px" />
+        </div>
+      </div>
+
+      {/* Employees */}
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="60px" />
+        </div>
+      </div>
+
+      {/* Address */}
+      <div className="col-12 mb-3">
+        <div className="d-flex">
+          <SkeletonLine height={16} width="130px" className="me-2" />
+          <SkeletonLine height={16} width="100%" />
+        </div>
+      </div>
+
+      {/* Section Title 2 */}
+      <div className="d-flex text-secondary mb-2">
+        <SkeletonLine height={16} width="200px" />
+      </div>
+    </div>
+  );
+};

src/components/Organization/OrganizationsList.jsx

@@ -93,7 +93,7 @@ const OrganizationsList = ({searchText}) => {
   if (isError) return <div>{error?.message || "Something went wrong"}</div>;
 
   return (
-    <div className="card px-0 px-sm-4">
+    <div className="card px-0 px-sm-4 pb-12 pt-5">
       <div className="card-datatable table-responsive" id="horizontal-example">
         <div className="dataTables_wrapper no-footer px-2">
           <table className="table border-top dataTable text-nowrap">
@@ -129,7 +129,7 @@ const OrganizationsList = ({searchText}) => {
                     ))}
                     <td className="sticky-action-column ">
                       <div className="d-flex justify-content-center gap-2">
-                        <i className="bx bx-show text-primary cursor-pointer" ></i>
+                        <i className="bx bx-show text-primary cursor-pointer"  onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
                         <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
                         <i className="bx bx-trash text-danger cursor-pointer"></i>
                       </div>

src/components/Organization/ViewOrganization.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { useOrganization } from "../../hooks/useOrganization";
+import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
+
+const VieworgDataanization = ({ orgId }) => {
+  const { data, isLoading, isError, error } = useOrganization(orgId);
+  if (isLoading) return <OrgDetailsSkeleton/>;
+  if (isError) return <div>{error.message}</div>;
+  return (
+    <div className="row text-black  text-black text-start ">
+      {/* Header */}
+     <div className="col-12 mb-3">
+        <div className="d-flex justify-content-between align-items-center text-start mb-1">
+          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
+            <img
+                    src="/public/assets/img/orgLogo.png"
+                    alt="logo"
+                    width={40}
+                    height={40}
+                  />  <p className="fw-semibold fs-6 m-0">{data?.data?.name}</p>
+          </div>
+         <div className="text-end">
+           <span className={`badge bg-label-${data?.data.isActive ? "primary":"secondary"} `}>{data?.data.isActive ? "Active":"In-Active"} </span>
+          </div>
+        </div>
+      </div>
+      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+      {/* Contact Info */}
+      <div className="col-md-6 mb-3">
+        <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">{data?.data?.contactPerson}</div>
+        </div>
+      </div>
+      <div className="col-md-6 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ minWidth: "130px" }}
+          >
+           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
+          </label>
+          <div className="text-muted">{data?.data?.contactNumber}</div>
+        </div>
+      </div>
+      <div className="col-md-12 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ minWidth: "130px" }}
+          >
+          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
+          </label>
+          <div className="text-muted">{data?.data?.email}</div>
+        </div>
+      </div>
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ maxWidth: "130px" }}
+          >
+          <i className="bx bx-sm me-1 bx-barcode"></i>
+  Service Provider Id (SPRID) :
+          </label>
+          <div className="text-muted">{data?.data?.sprid}</div>
+        </div>
+      </div>
+
+      <div className="col-6 mb-3">
+        <div className="d-flex">
+          <label
+            className="form-label me-2 mb-0 fw-semibold"
+            style={{ maxWidth: "130px" }}
+          >
+          <i className="bx bx-sm me-1 bx-group"></i>
+  Employees :
+          </label>
+          <div className="text-muted">{data?.data?.activeEmployeeCount}</div>
+        </div>
+      </div>
+      <div className="col-12 mb-3">
+        <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">{data?.data?.address}</div>
+        </div>
+      </div>
+      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services</div>
+    </div>
+  )
+};
+
+export default VieworgDataanization;

src/components/Project/AssignTask.jsx

@@ -1,24 +1,25 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster from "../../hooks/masterHook/useMaster";
+import useMaster, { useServices } from "../../hooks/masterHook/useMaster";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
+import { useSelectedProject } from "../../slices/apiDataManager";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
-import { useProjectDetails } from "../../hooks/useProjects";
+import {
+  useEmployeeForTaskAssign,
+  useProjectAssignedOrganizations,
+  useProjectDetails,
+} from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useCreateTask } from "../../hooks/useTasks";
 import Label from "../common/Label";
 
-const AssignTask = ({ assignData, onClose, setAssigned }) => {
-  const maxPlanned =
-    assignData?.workItem?.plannedWork - assignData?.workItem?.completedWork;
-
-  const schema = z.object({
+const TaskSchema = (maxPlanned) => {
+  return z.object({
     selectedEmployees: z
       .array(z.string())
       .min(1, { message: "At least one employee must be selected" }),
@@ -37,20 +38,26 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
         })
     ),
   });
+};
+
+const AssignTask = ({ assignData, onClose, setAssigned }) => {
+  const planned = assignData?.workItem?.plannedWork || 0;
+  const completed = assignData?.workItem?.completedWork || 0;
+  const maxPlanned = planned - completed;
 
   const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
   const helpPopupRefTarget = useRef(null);
   const [isHelpVisible, setIsHelpVisible] = useState(false);
+  const [selectedService, setSelectedService] = useState(null);
+  const [selectedOrganization, setSelectedOrganization] = useState(null);
+
   const { mutate: assignTask, isPending: isSubmitting } = useCreateTask({
-    onSuccessCallback: () => {
-      closedModel();
-    },
+    onSuccessCallback: closedModel,
   });
 
   const dropdownRef = useRef(null);
   const [open, setOpen] = useState(false);
 
-  // Close dropdown on outside click
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -63,48 +70,47 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
   const infoRef = useRef(null);
   const infoRef1 = useRef(null);
-
-  // State for search term
   const [searchTerm, setSearchTerm] = useState("");
 
   useEffect(() => {
     if (typeof bootstrap !== "undefined") {
-      if (infoRef.current) {
+      infoRef.current &&
         new bootstrap.Popover(infoRef.current, {
           trigger: "focus",
           placement: "right",
           html: true,
           content: `<div>Total Pending tasks of the Activity</div>`,
         });
-      }
 
-      if (infoRef1.current) {
+      infoRef1.current &&
         new bootstrap.Popover(infoRef1.current, {
           trigger: "focus",
           placement: "right",
           html: true,
           content: `<div>Target task for today</div>`,
         });
-      }
     } else {
       console.warn("Bootstrap is not available. Popovers might not function.");
     }
   }, []);
-  const selectedProject = useSelector(
-    (store) => store.localVariables.projectId
-  );
-  const {
-    employees,
-    loading: employeeLoading,
-    recallEmployeeData,
-  } = useEmployeesAllOrByProjectId(false, selectedProject, false);
-  const dispatch = useDispatch();
-  const { loading } = useMaster();
-  const { data: jobRoleData } = useMaster();
 
-  // Changed to an array to hold multiple selected roles
+  const selectedProject = useSelectedProject();
+  const { data: serviceList, isLoading: isServiceLoading } = useServices();
+  const { data: organizationList, isLoading: isOrgLoading } =
+    useProjectAssignedOrganizations(selectedProject);
+  const { data: employees, isLoading: isEmployeeLoading } =
+    useEmployeeForTaskAssign(
+      selectedProject,
+      selectedService,
+      selectedOrganization
+    );
+
+  const dispatch = useDispatch();
+  const { loading, data: jobRoleData } = useMaster();
+
   const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
+
   const {
     handleSubmit,
     control,
@@ -114,133 +120,98 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     reset,
     trigger,
   } = useForm({
-    defaultValues: {
-      selectedEmployees: [],
-      description: "",
-      plannedTask: "",
-    },
-    resolver: zodResolver(schema),
+    defaultValues: { selectedEmployees: [], description: "", plannedTask: "" },
+    resolver: zodResolver(TaskSchema(maxPlanned)),
   });
 
   const handleCheckboxChange = (event, user) => {
-    const isChecked = event.target.checked;
-    let updatedSelectedEmployees = watch("selectedEmployees") || [];
+    const updatedSelectedEmployees = event.target.checked
+      ? [...(watch("selectedEmployees") || []), user.id].filter(
+          (v, i, a) => a.indexOf(v) === i
+        )
+      : (watch("selectedEmployees") || []).filter((id) => id !== user.id);
 
-    if (isChecked) {
-      if (!updatedSelectedEmployees.includes(user.id)) {
-        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
-      }
-    } else {
-      updatedSelectedEmployees = updatedSelectedEmployees?.filter(
-        (id) => id !== user.id
-      );
-    }
     setValue("selectedEmployees", updatedSelectedEmployees);
     trigger("selectedEmployees");
   };
 
   useEffect(() => {
     dispatch(changeMaster("Job Role"));
-    // Initial state should reflect "All Roles" selected
     setSelectedRoles(["all"]);
   }, [dispatch]);
 
-  // Modified handleRoleChange to handle multiple selections
   const handleRoleChange = (event, roleId) => {
-    // If 'all' is selected, clear other selections
-    if (roleId === "all") {
-      setSelectedRoles(["all"]);
-    } else {
-      setSelectedRoles((prevSelectedRoles) => {
-        // If "all" was previously selected, remove it
-        const newRoles = prevSelectedRoles.filter((role) => role !== "all");
-        if (newRoles.includes(roleId)) {
-          // If role is already selected, unselect it
-          return newRoles.filter((id) => id !== roleId);
-        } else {
-          // If role is not selected, add it
-          return [...newRoles, roleId];
-        }
-      });
-    }
+    setSelectedRoles((prev) => {
+      if (roleId === "all") return ["all"];
+      const newRoles = prev.filter((r) => r !== "all");
+      return newRoles.includes(roleId)
+        ? newRoles.filter((r) => r !== roleId)
+        : [...newRoles, roleId];
+    });
   };
 
   useEffect(() => {
-    // Update displayedSelection based on selectedRoles
     if (selectedRoles.includes("all")) {
       setDisplayedSelection("All Roles");
     } else if (selectedRoles.length > 0) {
-      const selectedRoleNames = selectedRoles.map(roleId => {
-        const role = jobRoleData?.find(r => String(r.id) === roleId);
-        return role ? role.name : '';
-      }).filter(Boolean); // Filter out empty strings for roles not found
-      setDisplayedSelection(selectedRoleNames.join(', '));
-    } else {
-      setDisplayedSelection("Select Roles");
-    }
+      setDisplayedSelection(
+        selectedRoles
+          .map((id) => jobRoleData?.find((r) => String(r.id) === id)?.name)
+          .filter(Boolean)
+          .join(", ")
+      );
+    } else setDisplayedSelection("Select Roles");
   }, [selectedRoles, jobRoleData]);
 
+  const handleSearchChange = (e) => setSearchTerm(e.target.value);
 
-  const handleSearchChange = (event) => {
-    setSearchTerm(event.target.value);
-  };
-
-  // Filter employees first by role, then by search term AND job role name
-  const filteredEmployees = employees?.filter((emp) => {
+  const filteredEmployees = employees?.data?.filter((emp) => {
     const matchesRole =
-      selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
-    // Convert both first and last names and job role name to lowercase for case-insensitive matching
-    const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
-
-    const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
-
+      selectedRoles.includes("all") ||
+      selectedRoles.includes(String(emp.jobRoleId));
     const searchLower = searchTerm.toLowerCase();
-    // Check if the full name OR job role name includes the search term
-    const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
-    return matchesRole && matchesSearch;
+    const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
+    const jobRoleName =
+      jobRoleData
+        ?.find((role) => role.id === emp.jobRoleId)
+        ?.name?.toLowerCase() || "";
+    return (
+      matchesRole &&
+      (fullName.includes(searchLower) || jobRoleName.includes(searchLower))
+    );
   });
 
-  // Determine unique job role IDs from the filtered employees (for dropdown options)
-  const uniqueJobRoleIdsInFilteredEmployees = new Set(
-    employees?.map(emp => emp.jobRoleId).filter(Boolean)
+  const jobRolesForDropdown = jobRoleData?.filter((role) =>
+    new Set(employees?.data?.map((emp) => emp.jobRoleId).filter(Boolean)).has(
+      role.id
+    )
   );
 
-  // Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
-  const jobRolesForDropdown = jobRoleData?.filter(role =>
-    uniqueJobRoleIdsInFilteredEmployees.has(role.id)
-  );
-
-  // Calculate the count of selected roles for display
   const selectedRolesCount = selectedRoles.includes("all")
-    ? 0 // "All Roles" doesn't contribute to a specific count
+    ? 0
     : selectedRoles.length;
 
   const onSubmit = (data) => {
-    const selectedEmployeeIds = data.selectedEmployees;
-
-    const taskTeamWithDetails = selectedEmployeeIds
-      ?.map((empId) => empId)
-      ?.filter(Boolean);
-    const formattedData = {
-      taskTeam: taskTeamWithDetails,
-      plannedTask: data.plannedTask,
-      description: data.description,
-      assignmentDate: new Date().toISOString(),
-      workItemId: assignData?.workItem.id,
-    };
     assignTask({
-      payload: formattedData,
+      payload: {
+        taskTeam: data.selectedEmployees.filter(Boolean),
+        plannedTask: data.plannedTask,
+        description: data.description,
+        assignmentDate: new Date().toISOString(),
+        workItemId: assignData?.workItem.id,
+      },
       workAreaId: assignData?.workArea?.id,
     });
   };
 
-  const closedModel = () => {
+  function closedModel() {
     reset();
     onClose();
-  };
+  }
+
   return (
     <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
-      <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
+      <p className="align-items-center flex-wrap m-0">Assign Task</p>
       <div className="container my-3">
         <div className="mb-1">
           <p className="mb-0">
@@ -252,7 +223,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 assignData?.workArea?.areaName,
                 assignData?.workItem?.activityMaster?.activityName,
               ]
-                .filter(Boolean) // Filter out any undefined/null values
+                .filter(Boolean)
                 .map((item, index, array) => (
                   <span key={index} className="d-flex align-items-center">
                     {item}
@@ -268,20 +239,64 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
             <div className="form-label text-start">
               <div className="row mb-1">
                 <div className="col-12">
-                  <div className="form-text text-start">
+                  <div className="row text-start">
+                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
+                      <div>
+                        <select
+                          className="form-select form-select-sm"
+                          value={selectedOrganization || ""}
+                          onChange={(e) =>
+                            setSelectedOrganization(e.target.value)
+                          }
+                        >
+                          {isServiceLoading ? (
+                            <option>Loading...</option>
+                          ) : (
+                            <>
+                              <option value="">--Select Organization--</option>
+                              {organizationList?.map((org,index) => (
+                                <option key={`${org.id}-${index}`} value={org.id}>
+                                  {org.name}
+                                </option>
+                              ))}
+                            </>
+                          )}
+                        </select>
+                      </div>
+                      <div>
+                        <select
+                          className="form-select form-select-sm"
+                          value={selectedService || ""}
+                          onChange={(e) => setSelectedService(e.target.value)}
+                        >
+                          {isOrgLoading ? (
+                            <option>Loading...</option>
+                          ) : (
+                            <>
+                              <option value="">--Select Service--</option>
+                              {serviceList?.data?.map((service,index) => (
+                                <option key={`${service.id}-${index}`}  value={service.id}>
+                                  {service.name}
+                                </option>
+                              ))}
+                            </>
+                          )}
+                        </select>
+                      </div>
+                    </div>
                     <div
-                      className="d-flex align-items-center form-text fs-7"
+                      className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
                       ref={dropdownRef}
                     >
-                      <span className="text-dark">Select Team</span>
-
                       {/* Dropdown */}
                       <div className="dropdown position-relative d-inline-block">
                         <a
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${
+                            selectedRoles.includes("all") ||
+                            selectedRoles.length === 0
                               ? "text-secondary"
                               : "text-primary"
-                            }`}
+                          }`}
                           onClick={() => setOpen(!open)}
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
@@ -290,7 +305,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         {/* Badge */}
                         {selectedRolesCount > 0 && (
                           <span
-                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
+                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
                             style={{
                               fontSize: "0.65rem",
                               minWidth: "18px",
@@ -320,7 +335,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                   id="checkboxAllRoles"
                                   value="all"
                                   checked={selectedRoles.includes("all")}
-                                  onChange={(e) => handleRoleChange(e, e.target.value)}
+                                  onChange={(e) =>
+                                    handleRoleChange(e, e.target.value)
+                                  }
                                 />
                                 <label
                                   className="form-check-label ms-2"
@@ -340,8 +357,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                     type="checkbox"
                                     id={`checkboxRole-${role.id}`}
                                     value={role.id}
-                                    checked={selectedRoles.includes(String(role.id))}
-                                    onChange={(e) => handleRoleChange(e, e.target.value)}
+                                    checked={selectedRoles.includes(
+                                      String(role.id)
+                                    )}
+                                    onChange={(e) =>
+                                      handleRoleChange(e, e.target.value)
+                                    }
                                   />
                                   <label
                                     className="form-check-label ms-2"
@@ -357,14 +378,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       </div>
 
                       {/* Search Box */}
-                      <input
-                        type="text"
-                        className="form-control form-control-sm ms-auto mb-2 mt-2"
-                        placeholder="Search employees or roles..."
-                        value={searchTerm}
-                        onChange={handleSearchChange}
-                        style={{ maxWidth: "200px" }}
-                      />
+                      <div>
+                        <input
+                          type="text"
+                          className="form-control form-control-sm ms-auto mb-2 mt-2"
+                          placeholder="Search employees or roles..."
+                          value={searchTerm}
+                          onChange={handleSearchChange}
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -381,19 +403,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               >
                 {selectedRoles?.length > 0 && (
                   <div className="row">
-                    {employeeLoading ? (
+                    {isEmployeeLoading ? (
                       <div className="col-12">
                         <p className="text-center">Loading employees...</p>
                       </div>
                     ) : filteredEmployees?.length > 0 ? (
-                      filteredEmployees.map((emp) => {
+                      filteredEmployees.map((emp,index) => {
                         const jobRole = jobRoleData?.find(
                           (role) => role?.id === emp?.jobRoleId
                         );
 
                         return (
                           <div
-                            key={emp.id}
+                            key={`${emp.index}-${index}`}
                             className="col-6 col-md-4 col-lg-3 mb-3"
                           >
                             <div className="form-check d-flex align-items-start">
@@ -441,7 +463,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                     ) : (
                       <div className="col-12">
                         <p className="text-center">
-                          No employees found for the selected role.
+                          No employees found for the selected filter.
                         </p>
                       </div>
                     )}
@@ -456,12 +478,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 {watch("selectedEmployees")?.length > 0 && (
                   <div className="mt-1">
                     <div className="text-start px-2">
-                      {watch("selectedEmployees")?.map((empId) => {
-                        const emp = employees.find((emp) => emp.id === empId);
+                      {watch("selectedEmployees")?.map((empId,ind) => {
+                        const emp = employees?.data?.find(
+                          (emp) => emp.id === empId
+                        );
                         return (
                           emp && (
                             <span
-                              key={empId}
+                               key={`${empId}-${ind}`}
                               className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
                             >
                               {emp.firstName} {emp.lastName}
@@ -506,7 +530,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         {assignData?.workItem?.plannedWork -
                           assignData?.workItem?.completedWork}
                       </strong>{" "}
-                      <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                      <u>
+                        {
+                          assignData?.workItem?.activityMaster
+                            ?.unitOfMeasurement
+                        }
+                      </u>
                     </label>
                   </label>
                 </div>
@@ -537,8 +566,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           className="form-control form-control-sm"
                           {...field}
                         />
-                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
-                          <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                        <span
+                          style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}
+                        >
+                          <u>
+                            {
+                              assignData?.workItem?.activityMaster
+                                ?.unitOfMeasurement
+                            }
+                          </u>
                         </span>
                       </div>
                     )}
@@ -546,19 +582,17 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 </div>
 
                 {errors.plannedTask && (
-                  <div className="danger-text mt-1">{errors.plannedTask.message}</div>
+                  <div className="danger-text mt-1">
+                    {errors.plannedTask.message}
+                  </div>
                 )}
               </div>
-
-              {/* <label
+              <Label
                 className="form-text fs-7 m-1 text-lg text-dark"
-                htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
+                htmlFor="descriptionTextarea"
+                required
               >
                 Description
-              </label> */}
-              <Label className="form-text fs-7 m-1 text-lg text-dark"
-                htmlFor="descriptionTextarea" required>
-                Description
               </Label>
               <Controller
                 name="description"
@@ -592,7 +626,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 {isSubmitting ? "Please Wait" : "Submit"}
               </button>
             </div>
-
           </form>
         </div>
       </div>

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -32,9 +32,8 @@ const EditActivityModal = ({
   building,
   floor,
   onClose,
-} ) =>
-{
-  
+}) => {
+
   const { activities, loading: loadingActivities } = useActivitiesMaster();
   const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
   const [selectedActivity, setSelectedActivity] = useState(null);
@@ -57,13 +56,12 @@ const EditActivityModal = ({
       comment: "",
     },
   });
-const { mutate: UpdateTask, isPending } = useManageTask({
-  onSuccessCallback: (response) =>
-  {
-    showToast( response?.message, "success" )
-    onClose()
-  }
-} );
+  const { mutate: UpdateTask, isPending } = useManageTask({
+    onSuccessCallback: (response) => {
+      showToast(response?.message, "success")
+      onClose()
+    }
+  });
 
 
 
@@ -82,34 +80,33 @@ const { mutate: UpdateTask, isPending } = useManageTask({
     [categories]
   );
 
-useEffect(() => {
-  if (!workItem) return;
- console.log(workItem)
-  reset({
-    activityID: String(
-      workItem?.workItem?.activityId || workItem?.activityMaster?.id
-    ),
-    workCategoryId: String(
-      workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
-    ),
-    plannedWork:
-      workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
-    completedWork:
-      workItem?.workItem?.completedWork || workItem?.completedWork || 0,
-    comment: workItem?.workItem?.description || workItem?.description || "",
-  });
-}, [workItem?.id,selectedActivity]);
+  useEffect(() => {
+    if (!workItem) return;
+    console.log(workItem)
+    reset({
+      activityID: String(
+        workItem?.workItem?.activityId || workItem?.activityMaster?.id
+      ),
+      workCategoryId: String(
+        workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
+      ),
+      plannedWork:
+        workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
+      completedWork:
+        workItem?.workItem?.completedWork || workItem?.completedWork || 0,
+      comment: workItem?.workItem?.description || workItem?.description || "",
+    });
+  }, [workItem?.id, selectedActivity]);
 
 
 
   useEffect(() => {
     const selected = activities?.find((a) => a.id === activityID);
-    setSelectedActivity( selected || null );
+    setSelectedActivity(selected || null);
   }, [activityID, activities]);
 
-  const onSubmitForm = (data) =>
-  {
-      const payload = {
+  const onSubmitForm = (data) => {
+    const payload = {
       ...data,
       id: workItem?.workItem?.id ?? workItem?.id,
       buildingID: building?.id,
@@ -125,9 +122,9 @@ useEffect(() => {
       buildingId: building?.id,
       floorId: floor?.id,
       workAreaId: workArea?.id,
-      previousCompletedWork:completedTask
+      previousCompletedWork: completedTask
     });
- }
+  }
   return (
     <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
       <div className="text-center mb-1">
@@ -162,14 +159,26 @@ useEffect(() => {
           disabled
         />
       </div>
+      <div className="col-12 text-start">
+        <label className="form-label">Select Service</label>
+        <input
+          className="form-control form-control-sm"
+          value={
+            workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
+          }
+          disabled
+        />
+      </div>
+
 
       <div className="col-12 text-start">
         <label className="form-label">Select Activity</label>
         <select
           {...register("activityID")}
           className="form-select form-select-sm"
+          disabled
         >
-          <option disabled>Select Activity</option>
+          <option >Select Activity</option>
           {loadingActivities ? (
             <option>Loading...</option>
           ) : (
@@ -264,7 +273,7 @@ useEffect(() => {
           disabled={isPending}
         >
           {isPending ? "Please Wait..." : "Edit Task"}
-        </button>        
+        </button>
       </div>
     </form>
   );

src/components/Project/Infrastructure/Floor.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import WorkArea from "./WorkArea";
-const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
+const Floor = ({ floor, workAreas, forBuilding }) => {
   return (
     <React.Fragment key={floor.id}>
       {workAreas && workAreas.length > 0 ? (
@@ -10,7 +10,6 @@ const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
             key={workArea.id}
             workArea={workArea}
             floor={floor}
-            serviceId={serviceId}
           />
         ))
       ) : (

src/components/Project/Infrastructure/InfraTable.jsx

@@ -11,7 +11,7 @@ import {
   getCachedData,
 } from "../../../slices/apiDataManager";
 
-const InfraTable = ({ buildings, projectId, serviceId }) => {
+const InfraTable = ({ buildings, projectId }) => {
   const [projectBuilding, setProjectBuilding] = useState([]);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
   const [showFloorModal, setShowFloorModal] = useState(false);
@@ -90,7 +90,6 @@ const InfraTable = ({ buildings, projectId, serviceId }) => {
           forBuilding={building}
           floor={floor}
           workAreas={floor.workAreas}
-          serviceId={serviceId}
         />
       ))
     ) : (

src/components/Project/Infrastructure/TaskModel.jsx

@@ -3,10 +3,12 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+  useActivitiesByGroups,
   useActivitiesMaster,
+  useGroups,
   useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
-import { useManageTask, useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useManageTask, useProjectAssignedOrganizations, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
 import { useSelectedProject } from "../../../slices/apiDataManager";
@@ -15,6 +17,8 @@ const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
   floorId: z.string().min(1, "Floor is required"),
   workAreaId: z.string().min(1, "Work Area is required"),
+  serviceId: z.string().min(1, "Service is required"),
+  activityGroupId: z.string().min(1, "Activity Group is required"),
   activityID: z.string().min(1, "Activity is required"),
   workCategoryId: z.string().min(1, "Work Category is required"),
   plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
@@ -27,6 +31,8 @@ const defaultModel = {
   buildingID: "",
   floorId: "",
   workAreaId: "",
+  serviceId: "",
+  activityGroupId: "",
   activityID: "",
   workCategoryId: "",
   plannedWork: 0,
@@ -35,18 +41,42 @@ const defaultModel = {
 };
 
 const TaskModel = ({ project, onSubmit, onClose }) => {
-  const { activities, loading: activityLoading } = useActivitiesMaster();
+  // const { activities, loading: activityLoading } = useActivitiesMaster();
   const { categories, categoryLoading } = useWorkCategoriesMaster();
 
   const projectId = useSelectedProject();
 
   const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+  const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizations(projectId);
+
+
 
   const [selectedService, setSelectedService] = useState("");
+  const [selectedGroup, setSelectedGroup] = useState("");
+  const { data: groupsResponse, isLoading: groupsLoading } = useGroups(selectedService);
+  const groups = groupsResponse?.data ?? [];
 
+  const { data: activitiesResponse, isLoading: activitiesLoading } = useActivitiesByGroups(selectedGroup);
+  const activities = activitiesResponse?.data ?? [];
+  // Fetch Assigned Organizations (Activity Groups)
+
+  const [selectedOrg, setSelectedOrg] = useState("");
   const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
+    const value = e.target.value;
+    setSelectedService(value);
+    setSelectedGroup("");
+    setValue("activityGroupId", "");
+    setValue("activityID", "");
   };
+
+  const handleGroupChange = (e) => {
+    const value = e.target.value;
+    setSelectedGroup(value);
+    setValue("activityGroupId", value);
+    setValue("activityID", "");
+  };
+
+
   const {
     register,
     handleSubmit,
@@ -82,7 +112,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { mutate: CreateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success");
-      onClose?.();
+      // onClose?.();
     },
   });
   useEffect(() => {
@@ -188,15 +218,18 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
       {/* Services Selection */}
       {selectedWorkArea && (
         <div className="col-12 text-start">
-          <Label className="form-label">Select Services</Label>
+          <Label className="form-label" required>Select Service</Label>
           <select
-            name="DataTables_Table_0_length"
-            aria-controls="DataTables_Table_0"
             className="form-select form-select-sm"
-            aria-label="Select Service"
+            {...register("serviceId")}
             value={selectedService}
-            onChange={handleServiceChange}
+            // onChange={handleServiceChange}
+            onChange={(e) => {
+              handleServiceChange(e);
+              setValue("serviceId", e.target.value);
+            }}
           >
+            <option value="">Select Service</option>
             {servicesLoading && <option>Loading...</option>}
             {assignedServices?.map((service) => (
               <option key={service.id} value={service.id}>
@@ -204,34 +237,45 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
               </option>
             ))}
           </select>
-          {errors.buildingID && (
-            <p className="danger-text">{errors.buildingID.message}</p>
-          )}
         </div>
       )}
 
-      {/* Activity Selection */}
-      {selectedWorkArea && (
+      {/* Activity Group (Organization) Selection */}
+      {selectedService && (
         <div className="col-12 text-start">
-          <Label className="form-label" required>Select Activity</Label>
+          <Label className="form-label" required>Select Activity Group</Label>
           <select
             className="form-select form-select-sm"
-            {...register("activityID")}
+            {...register("activityGroupId")}
+            value={selectedGroup}
+            onChange={handleGroupChange}
           >
-            <option value="">Select Activity</option>
-            {activityData.map((a) => (
-              <option key={a.id} value={a.id}>
-                {a.activityName}
-              </option>
+            <option value="">Select Group</option>
+            {groupsLoading && <option>Loading...</option>}
+            {groups?.map((g) => (
+              <option key={g.id} value={g.id}>{g.name}</option>
             ))}
           </select>
-          {errors.activityID && (
-            <p className="danger-text">{errors.activityID.message}</p>
-          )}
+          {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
         </div>
       )}
 
 
+      {/* Activity Selection */}
+      {selectedGroup && (
+        <div className="col-12 text-start">
+          <Label className="form-label" required>Select Activity</Label>
+          <select className="form-select form-select-sm" {...register("activityID")}>
+            <option value="">Select Activity</option>
+            {activitiesLoading && <option>Loading...</option>}
+            {activities?.map((a) => (
+              <option key={a.id} value={a.id}>{a.activityName}</option>
+            ))}
+          </select>
+          {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
+        </div>
+      )}
+
       {selectedWorkArea && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>
@@ -312,9 +356,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         <button
           type="submit"
           className="btn btn-sm btn-primary"
-          disabled={isSubmitting}
+          // disabled={isSubmitting}
+           disabled={isPending}
         >
-          {isSubmitting ? "Please Wait..." : "Add Task"}
+          {isPending ? "Please Wait..." : "Add Task"}
         </button>
       </div>
     </form>

src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import WorkItem from "./WorkItem";
-import { useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
-import { cacheData } from "../../../slices/apiDataManager";
+import { useCurrentService, useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
+import { cacheData, useSelectedProject } from "../../../slices/apiDataManager";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import ProjectRepository from "../../../repositories/ProjectRepository";
@@ -14,10 +14,12 @@ import {
 } from "../../../utils/constants";
 import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
-import {formatNumber} from "../../../utils/dateUtils";
+import { formatNumber } from "../../../utils/dateUtils";
+import { useServices } from "../../../hooks/masterHook/useMaster";
 
-const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
-  const selectedProject = useSelector((store) => store.localVariables.projectId);
+const WorkArea = ({ workArea, floor, forBuilding }) => {
+  const selectedProject = useSelectedProject()
+  const selectedService = useCurrentService()
   const { projects_Details, loading } = useProjectDetails(selectedProject);
   const [IsExpandedArea, setIsExpandedArea] = useState(false);
   const dispatch = useDispatch();
@@ -25,8 +27,7 @@ const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
 
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
-
-  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,serviceId, IsExpandedArea);
+  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, selectedService, IsExpandedArea);
 
   const [workAreaStatus, setWorkAreaStatus] = useState({
     completed: 0,
@@ -81,9 +82,8 @@ const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
                   aria-controls={`collapse-${workArea.id}`}
                 >
                   <i
-                    className={`bx me-2 toggle-icon ${
-                      IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
-                    }`}
+                    className={`bx me-2 toggle-icon ${IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
+                      }`}
                     style={{
                       fontSize: "1.2rem",
                       color: "black",
@@ -104,13 +104,13 @@ const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
                       </span>
                     </div>
 
-                      <div className="col-2">
-                        <ProgressBar
-                          completedWork={formatNumber(workArea?.completedWork)}
-                          plannedWork={formatNumber(workArea?.plannedWork)}
-                          className="m-0 text-info"
-                        />
-                      </div>
+                    <div className="col-2">
+                      <ProgressBar
+                        completedWork={formatNumber(workArea?.completedWork)}
+                        plannedWork={formatNumber(workArea?.plannedWork)}
+                        className="m-0 my-2 me-6 text-info"
+                      />
+                    </div>
                   </div>
                 </button>
               </p>
@@ -120,12 +120,12 @@ const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
                 className="accordion-collapse collapse"
                 aria-labelledby={`heading-${workArea.id}`}
               >
-                <div className="accordion-body px-1">
-                  {isLoading  || ProjectTaskList === undefined  ? (
+                <div className="accordion-body px-6">
+                  {isLoading || ProjectTaskList === undefined ? (
                     <div className="text-center py-2 text-muted">Loading activities...</div>
-                  ) :  ProjectTaskList?.length ===  0 ? (
+                  ) : ProjectTaskList?.length === 0 ? (
                     <div className="text-center py-2 text-muted">No activities available for this work area.</div>
-                  ):ProjectTaskList?.length > 0 ? (
+                  ) : ProjectTaskList?.length > 0 ? (
                     <table className="table table-sm mx-1">
                       <thead>
                         <tr>
@@ -151,9 +151,9 @@ const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
                         </tr>
                       </thead>
                       <tbody className="table-border-bottom-0">
-                        {ProjectTaskList.map((workItem,index) => (
+                        {ProjectTaskList.map((workItem, index) => (
                           <WorkItem
-                             key={workItem.workItemId || `fallback-${index}`}
+                            key={workItem.workItemId || `fallback-${index}`}
                             workItem={workItem}
                             forBuilding={forBuilding}
                             forFloor={floor}

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -50,8 +50,8 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
           : "Work Area created Successfully",
         "success"
       );
-      reset({ id: "0", buildingId: "0", areaName: "", floorId: "0" });
-      // onClose?.();
+      setValue("id", "0");
+      setValue("areaName", "");
     },
   });
 
@@ -194,7 +194,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
         <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
           {isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
         </button>
-        
+
       </div>
     </form>
   );

src/components/Project/ManageProject.jsx

@@ -77,13 +77,7 @@ const ManageProject = () => {
         </div>
       )}
 
-      {isProjectCreated && (
-        <div>
-          <h3>Additional Content</h3>
-          <p>Now that the project is created, you can access this content.</p>
-          {/* Add more content here */}
-        </div>
-      )}
+   
     </div>
   );
 };

src/components/Project/ManageProjectInfo.jsx

@@ -1,11 +1,24 @@
 import React, { useEffect, useState } from "react";
+import { projectSchema, projectDefault } from "./ProjectSchema";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
+
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
+import { useCreateProject, useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
 
-const currentDate = new Date().toLocaleDateString('en-CA');
+import {
+  DEFAULT_EMPTY_STATUS_ID,
+  ITEMS_PER_PAGE,
+  PROJECT_STATUS,
+} from "../../utils/constants";
+import {
+  useOrganizationModal,
+  useOrganizationsList,
+} from "../../hooks/useOrganization";
+import { localToUtc } from "../../utils/appUtils";
+
+const currentDate = new Date().toLocaleDateString("en-CA");
 const formatDate = (date) => {
   if (!date) {
     return currentDate;
@@ -14,54 +27,23 @@ const formatDate = (date) => {
   if (isNaN(d.getTime())) {
     return currentDate;
   }
-  return d.toLocaleDateString('en-CA');
+  return d.toLocaleDateString("en-CA");
 };
-const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => {
-  const [CurrentProject, setCurrentProject] = useState();
+const ManageProjectInfo = ({ project, onClose }) => {
   const [addressLength, setAddressLength] = useState(0);
   const maxAddressLength = 500;
+  const { onOpen, startStep, flowType } = useOrganizationModal();
 
   const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
-  const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
 
-  const projectSchema = z
-    .object({
-      ...(project?.id ? { id: z.string().optional() } : {}),
-      name: z.string().min(1, { message: "Project Name is required" }),
-      shortName: z.string().optional(),
-      contactPerson: z
-        .string()
-        .min(1, { message: "Contact Person Name is required" })
-        .regex(/^[A-Za-z\s]+$/, {
-          message: "Contact Person must contain only letters",
-        }),
-      projectAddress: z
-        .string()
-        .min(1, { message: "Address is required" })
-        .max(500, "Address must not exceed 150 characters"),
-      startDate: z
-        .string()
-        .min(1, { message: "Start Date is required" })
-        .default(currentDate),
-      endDate: z
-        .string()
-        .min(1, { message: "End Date is required" })
-        .default(currentDate),
-      projectStatusId: z
-        .string()
-        .min(1, { message: "Status is required" })
-    })
-    .refine(
-      (data) => {
-        const start = new Date(data.startDate);
-        const end = new Date(data.endDate);
-        return end >= start;
-      },
-      {
-        path: ["endDate"], // attaches the error to the endDate field
-        message: "End Date must be greater than Start Date",
-      }
-    );
+  const { projects_Details, loading } = useProjectDetails(project);
+  const { data, isLoading, isError, error } = useOrganizationsList(
+    ITEMS_PER_PAGE,
+    1,
+    true
+  );
+  const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
+  const {mutate:CeateProject,isPending:isCreating}= useCreateProject(()=>onClose?.())
 
   const {
     register,
@@ -72,80 +54,67 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
     getValues,
   } = useForm({
     resolver: zodResolver(projectSchema),
-    defaultValues: {
-      id: project?.id || "",
-      name: project?.name || "",
-      shortName: project?.shortName || "",
-      contactPerson: project?.contactPerson || "",
-      projectAddress: project?.projectAddress || "",
-      startDate: formatDate(project?.startDate) || currentDate,
-      endDate: formatDate(project?.endDate) || currentDate,
-      // projectStatusId: String(project?.projectStatusId || "00000000-0000-0000-0000-000000000000"),
-      projectStatusId: project?.projectStatusId && project.projectStatusId !== DEFAULT_EMPTY_STATUS_ID
-
-        ? String(project.projectStatusId)
-
-        : ACTIVE_STATUS_ID,
-    },
+    defaultValues: projectDefault,
     mode: "onChange",
   });
 
   useEffect(() => {
-    setCurrentProject(project);
-    reset(
-      project
-        ? {
-          id: project?.id || "",
-          name: project?.name || "",
-          shortName: project?.shortName || "",
-          contactPerson: project?.contactPerson || "",
-          projectAddress: project?.projectAddress || "",
-          startDate: formatDate(project?.startDate) || "",
-          endDate: formatDate(project?.endDate) || "",
-          projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000",
-        }
-        : {}
-    );
-    setAddressLength(project?.projectAddress?.length || 0);
-  }, [project, reset]);
+    if (project && projects_Details)
+      reset({
+        name: projects_Details?.name || "",
+        shortName: projects_Details?.shortName || "",
+        contactPerson: projects_Details?.contactPerson || "",
+        projectAddress: projects_Details?.projectAddress || "",
+        startDate: formatDate(projects_Details?.startDate) || "",
+        endDate: formatDate(projects_Details?.endDate) || "",
+        projectStatusId:
+          String(projects_Details?.projectStatus?.id) ||
+          DEFAULT_EMPTY_STATUS_IDF,
+        promoterId: projects_Details.promoter.id || "",
+        pmcId: projects_Details.pmc.id || "",
+      });
+    setAddressLength(projects_Details?.projectAddress?.length || 0);
+  }, [project, projects_Details, reset]);
 
-  /**
-
- * Handles the form submission.
-
- * @param {object} updatedProject - The project data from the form.
-
- */
-
-  const onSubmitForm = (updatedProject) => {
-
-    handleSubmitForm(updatedProject);
+  const onSubmitForm = (formData) => {
+    if (project) {
+      let payload = {
+        ...formData,
+        startDate: localToUtc(formData.startDate),
+        endDate: localToUtc(formData.endDate),
+        id: project,
+      };
+      console.log(payload);
+      UpdateProject({ projectId: project, payload: payload });
+    }else{
+       let payload = {
+        ...formData,
+        startDate: localToUtc(formData.startDate),
+        endDate: localToUtc(formData.endDate),
+      };
+      CeateProject(payload)
+    }
   };
 
   const handleCancel = () => {
-    reset({
-      id: project?.id || "",
-      name: project?.name || "",
-      shortName: project?.shortName || "",
-      contactPerson: project?.contactPerson || "",
-      projectAddress: project?.projectAddress || "",
-      startDate: formatDate(project?.startDate) || currentDate,
-      endDate: formatDate(project?.endDate) || currentDate,
-      projectStatusId: String(project?.projectStatus?.id || "00000000-0000-0000-0000-000000000000"),
-    });
+    reset(projectDefault);
     onClose();
   };
+  const handleOrganizaioFinder = () => {
+    onClose();
+    onOpen({ startStep: 2, flowType: "default" });
+  };
+
 
   return (
-
     <div className="p-sm-2 p-2">
-
       <div className="text-center mb-2">
-        <h5 className="mb-2">
-          {project?.id ? "Edit Project" : "Create Project"}
-        </h5>
+        <h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
       </div>
-      <form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
+      <form
+        className="row g-2 text-start"
+        onSubmit={handleSubmit(onSubmitForm)}
+      >
         <div className="col-12 col-md-12">
           <Label htmlFor="name" required>
             Project Name
@@ -225,7 +194,10 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
           />
 
           {errors.startDate && (
-            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
               {errors.startDate.message}
             </div>
           )}
@@ -240,18 +212,21 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
             name="endDate"
             control={control}
             placeholder="DD-MM-YYYY"
-           minDate={getValues("startDate")} // optional: restrict future dates
+            minDate={getValues("startDate")} // optional: restrict future dates
             className="w-100"
           />
 
           {errors.endDate && (
-            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
               {errors.endDate.message}
             </div>
           )}
         </div>
 
-        <div className="col-12 col-md-6">
+        <div className="col-12 ">
           <label className="form-label" htmlFor="modalEditUserStatus">
             Status
           </label>
@@ -265,15 +240,11 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
               valueAsNumber: false,
             })}
           >
-            {/* <option disabled>Status</option>
-                <option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */}
-            <option value={ACTIVE_STATUS_ID}>Active</option>
-            <option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option>
-
-            <option value="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option>
-            <option value="ef1c356e-0fe0-42df-a5d3-8daee355492d">Inactive</option>
-
-            <option value="33deaef9-9af1-4f2a-b443-681ea0d04f81">Completed</option>
+            {PROJECT_STATUS.map((status) => (
+              <option key={status.id} value={status.id}>
+                {status.label}
+              </option>
+            ))}
           </select>
           {errors.projectStatusId && (
             <div
@@ -284,6 +255,83 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
             </div>
           )}
         </div>
+        <div className="col-12 ">
+          <label className="form-label" htmlFor="modalEditUserStatus">
+            Promoter
+          </label>
+          <select
+            className="select2 form-select form-select-sm"
+            aria-label="Default select example"
+            {...register("promoterId", {
+              required: "Promoter is required",
+              valueAsNumber: false,
+            })}
+          >
+            {isLoading ? (
+              <option>Loading...</option>
+            ) : (
+              <>
+                <option value="">Select Promoter</option>
+                {data?.data?.map((org) => (
+                  <option key={org.id} value={org.id}>
+                    {org.name}
+                  </option>
+                ))}
+              </>
+            )}
+          </select>
+          {errors.promoterId && (
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
+              {errors.promoterId.message}
+            </div>
+          )}
+        </div>
+        <div className="col-12 ">
+          <label className="form-label" htmlFor="modalEditUserStatus">
+            PMC
+          </label>
+          <select
+            className="select2 form-select form-select-sm"
+            aria-label="Default select example"
+            {...register("pmcId", {
+              required: "Promoter is required",
+              valueAsNumber: false,
+            })}
+          >
+            {isLoading ? (
+              <option>Loading...</option>
+            ) : (
+              <>
+                <option value="">Select PMC</option>
+                {data?.data?.map((org) => (
+                  <option key={org.id} value={org.id}>
+                    {org.name}
+                  </option>
+                ))}
+              </>
+            )}
+          </select>
+          {errors.pmcId && (
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
+              {errors.pmcId.message}
+            </div>
+          )}
+        </div>
+        <div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
+          <span>
+            <i className="bx bx-sm bx-info-circle"></i> Not found PMC and
+            Pomoter, find through SPRID or create new
+          </span>
+          <small className="cursor-pointer" onClick={handleOrganizaioFinder}>
+            <i className="bx  bx-plus-circle text-primary"></i>
+          </small>
+        </div>
 
         <div className="col-12 col-md-12">
           <Label htmlFor="projectAddress" required>
@@ -301,6 +349,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
               }}
             />
           </div>
+
           <div className="text-end" style={{ fontSize: "12px" }}>
             {maxAddressLength - addressLength} characters left
           </div>
@@ -319,22 +368,21 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
             className="btn btn-label-secondary btn-sm me-2"
             onClick={handleCancel}
             aria-label="Close"
-            disabled={isPending}
+            disabled={isPending || isCreating}
           >
             Cancel
           </button>
           <button
             type="submit"
             className="btn btn-primary btn-sm"
-            disabled={isPending}
+            disabled={isPending || isCreating}
           >
-            {isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
+            {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
           </button>
         </div>
-
       </form>
     </div>
   );
 };
 
-export default ManageProjectInfo;
+export default ManageProjectInfo;

src/components/Project/MapUsers.jsx

@@ -1,211 +0,0 @@
-import React, { useState, useEffect } from "react";
-import EmployeeRepository from "../../repositories/EmployeeRepository";
-import { useAllEmployees } from "../../hooks/useEmployees";
-import useSearch from "../../hooks/useSearch";
-import AssignEmployeeTable from "./AssignEmployeeTable";
-import showToast from "../../services/toastService";
-import "./MapUser.css";
-
-const MapUsers = ({
-  projectId,
-  onClose,
-  empJobRoles,
-  onSubmit,
-  allocation,
-  assignedLoading,
-  setAssignedLoading,
-}) => {
-  const {
-    employeesList,
-    loading: employeeLoading,
-    error,
-  } = useAllEmployees(false);
-  const [selectedEmployees, setSelectedEmployees] = useState([]);
-  const [searchText, setSearchText] = useState("");
-
-  const handleAllocationData = Array.isArray(allocation) ? allocation : [];
-
-  const allocationEmployees = employeesList.map((employee) => {
-    const allocationItem = handleAllocationData.find(
-      (alloc) => alloc.employeeId === employee.id
-    );
-    return {
-      ...employee,
-      isActive: allocationItem ? allocationItem.isActive : false,
-      jobRoleId: allocationItem ? allocationItem.jobRoleId : employee.jobRoleId,
-    };
-  });
-
-  function parseDate(dateStr) {
-    return new Date(dateStr.split(".")[0]);
-  }
-
-  const latestAllocations = handleAllocationData.reduce((acc, alloc) => {
-    const existingAlloc = acc[alloc.employeeId];
-
-    if (!existingAlloc) {
-      acc[alloc.employeeId] = alloc;
-    } else {
-      const existingDate = parseDate(
-        existingAlloc.reAllocationDate || existingAlloc.allocationDate
-      );
-      const newDate = parseDate(alloc.reAllocationDate || alloc.allocationDate);
-
-      if (newDate > existingDate) {
-        acc[alloc.employeeId] = alloc;
-      }
-    }
-    return acc;
-  }, {});
-
-  const allocationEmployeesData = employeesList
-    .map((employee) => {
-      const allocationItem = latestAllocations[employee.id];
-      return {
-        ...employee,
-        isActive: allocationItem ? allocationItem.isActive : false,
-      };
-    })
-    .filter((employee) => employee.isActive === false);
-
-  const { filteredData, setSearchQuery } = useSearch(
-    allocationEmployeesData,
-    searchText
-  );
-
-  const handleRoleChange = (employeeId, newRoleId) => {
-    setSelectedEmployees((prevSelectedEmployees) =>
-      prevSelectedEmployees.map((emp) =>
-        emp.id === employeeId ? { ...emp, jobRoleId: newRoleId } : emp
-      )
-    );
-  };
-
-  const handleCheckboxChange = (employeeId) => {
-    setSelectedEmployees((prevSelectedEmployees) => {
-      const updatedEmployees = [...prevSelectedEmployees];
-      const employeeIndex = updatedEmployees.findIndex(
-        (emp) => emp.id === employeeId
-      );
-
-      if (employeeIndex !== -1) {
-        const isSelected = !updatedEmployees[employeeIndex].isSelected;
-        updatedEmployees[employeeIndex].isSelected = isSelected;
-      } else {
-        updatedEmployees.push({
-          id: employeeId,
-          isSelected: true,
-        });
-      }
-      return updatedEmployees;
-    });
-  };
-
-  const handleSubmit = () => {
-    setAssignedLoading(true);
-    const selected = selectedEmployees
-      .filter((emp) => emp.isSelected)
-      .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
-    if (selected.length > 0) {
-      onSubmit(selected);
-      setSelectedEmployees([]);
-    } else {
-      showToast("Please select Employee", "error");
-    }
-  };
-  return (
-    <>
-      <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
-        <div className="modal-content">
-          <div className="modal-header text-center">
-            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
-            </button>
-          </div>
-          <p className="m-0 fw-semibold fs-5">Assign Employee</p>
-
-          <div className="px-4 mt-4 col-md-4 text-start">
-            {(filteredData.length > 0 ||
-              allocationEmployeesData.length > 0) && (
-                <div className="input-group input-group-sm mb-2">
-                  <input
-                    type="search"
-                    className="form-control"
-                    placeholder="Search employees..."
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                  />
-                </div>
-              )}
-
-            <p className="mb-0 small text-muted fw-semibold">Select Employee</p>
-          </div>
-
-          <div className="modal-body p-sm-4 p-0">
-            <table
-              className="datatables-users table border-top dataTable no-footer dtr-column "
-              id="DataTables_Table_0"
-              aria-describedby="DataTables_Table_0_info"
-              style={{ width: "100%" }}
-            >
-              <tbody>
-                {employeeLoading && allocationEmployeesData.length === 0 && (
-                  <tr>
-                    <td>Loading..</td>
-                  </tr>
-                )}
-
-                {!employeeLoading &&
-                  allocationEmployeesData.length === 0 &&
-                  filteredData.length === 0 && (
-                    <tr>
-                      <td>All employee assigned to Project.</td>
-                    </tr>
-                  )}
-
-                {!employeeLoading &&
-                  allocationEmployeesData.length > 0 &&
-                  filteredData.length === 0 && (
-                    <tr>
-                      <td>No matching employees found.</td>
-                    </tr>
-                  )}
-
-                {(filteredData.length > 0 ||
-                  allocationEmployeesData.length > 0) &&
-                  filteredData.map((emp) => (
-                    <AssignEmployeeTable
-                      key={emp.id}
-                      employee={emp}
-                      jobRoles={empJobRoles}
-                      isChecked={emp.isSelected}
-                      onRoleChange={handleRoleChange}
-                      onCheckboxChange={handleCheckboxChange}
-                    />
-                  ))}
-              </tbody>
-            </table>
-          </div>
-          <div className="modal-footer mt-5 d-flex justify-content-end gap-0">
-            <button
-              type="button"
-              className="btn btn-sm btn-label-secondary"
-              data-dismiss="modal"
-              aria-label="Close"
-              onClick={onClose}
-            >
-              Cancel
-            </button>
-
-            {(filteredData.length > 0 || allocationEmployeesData.length > 0) && (
-              <button className="btn btn-sm btn-primary" onClick={handleSubmit}>
-                {assignedLoading ? "Please Wait..." : "Assign to Project"}
-              </button>
-            )}
-          </div>
-
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default MapUsers;

src/components/Project/ProjectCard.jsx

@@ -14,41 +14,15 @@ import {
   getProjectStatusName,
 } from "../../utils/projectStatus";
 import GlobalModel from "../common/GlobalModel";
-	import { useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
+import { useProjectContext } from "../../pages/project/ProjectPage";
 
-const ProjectCard = ({ projectData, recall }) => {
-  const [ projectInfo, setProjectInfo ] = useState( projectData );
- const { projects_Details, loading, error, refetch } = useProjectDetails(
-    projectInfo?.id,false
-  );
-  const [showModal, setShowModal] = useState(false);
-  	  const  dispatch = useDispatch()
+const ProjectCard = ({ project }) => {
+  const dispatch = useDispatch();
   const navigate = useNavigate();
   const ManageProject = useHasUserPermission(MANAGE_PROJECT);
-  const {
-   mutate: updateProject,
-   isPending,
-   isSuccess,
-   isError,
- } = useUpdateProject({
-   onSuccessCallback: () => {
-     setShowModal(false);
-   },
- })
-
-  useEffect(()=>{
-    setProjectInfo(projectData);
-  }, [ projectData ] )
-
-   const handleShow = async () => {
-    try {
-      const { data } = await refetch();
-      setShowModal(true);
-    } catch (err) {
-      showToast("Failed to load project details", "error");
-    }
-  };
+  const { setMangeProject } = useProjectContext();
 
   const getProgress = (planned, completed) => {
     return (completed * 100) / planned + "%";
@@ -60,35 +34,18 @@ const ProjectCard = ({ projectData, recall }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
-    dispatch(setProjectId(projectInfo.id))
+    dispatch(setProjectId(project.id));
     navigate(`/projects/details`);
   };
-
-  const handleFormSubmit = (updatedProject) => {
-  if (projectInfo?.id) {
-    updateProject({
-      projectId: projectInfo.id,
-      updatedData: updatedProject,
-    });
-  }
-};
+  const handleViewActivities = () => {
+    dispatch(setProjectId(project.id));
+    navigate(`/activities/records?project=${project.id}`);
+  };
 
   return (
     <>
-    
-      {showModal && projects_Details && (
-        <GlobalModel isOpen={showModal} closeModal={handleClose}>
-             <ManageProjectInfo
-            project={projects_Details}
-            handleSubmitForm={handleFormSubmit}
-            onClose={handleClose}
-            isPending={isPending}
-          />
-        </GlobalModel>
-      )}
-
       <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
-        <div className={`card cursor-pointer  ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
+        <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">
@@ -102,13 +59,11 @@ const ProjectCard = ({ projectData, recall }) => {
                   <h5
                     className="mb-0 stretched-link text-heading text-start"
                     onClick={handleViewProject}
-                  > 
-                    {projectInfo.shortName
-                      ? projectInfo.shortName
-                      : projectInfo.name}
+                  >
+                    {project?.shortName ? project?.shortName : project?.name}
                   </h5>
                   <div className="client-info text-body">
-                    <span>{projectInfo.shortName ? projectInfo.name : ""}</span>
+                    <span>{project.shortName ? project.name : ""}</span>
                   </div>
                 </div>
               </div>
@@ -120,23 +75,14 @@ const ProjectCard = ({ projectData, recall }) => {
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                        {loading ? (
-                <div
-                  className="spinner-border spinner-border-sm text-secondary"
-                  role="status"
-                >
-                  <span className="visually-hidden">Loading...</span>
-                </div>
-              ) : (
-                <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>
-              )}
+                    <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>
@@ -150,19 +96,18 @@ const ProjectCard = ({ projectData, recall }) => {
                       </a>
                     </li>
 
-                    <li onClick={handleShow}>
-                      <a className="dropdown-item">
+                    <li>
+                      <a className="dropdown-item"   onClick={() =>
+                          setMangeProject({
+                            isOpen: true,
+                            Project: project.id,
+                          })
+                        }>
                         <i className="bx bx-pencil me-2"></i>
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li
-                      onClick={() =>
-                        navigate(
-                          `/activities/records?project=${projectInfo.id}`
-                        )
-                      }
-                    >
+                    <li onClick={handleViewActivities}>
                       <a className="dropdown-item">
                         <i className="bx bx-task me-2"></i>
                         <span className="align-left">Activities</span>
@@ -180,22 +125,22 @@ const ProjectCard = ({ projectData, recall }) => {
                   <span className="text-heading fw-medium">
                     Contact Person:{" "}
                   </span>
-                  {projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
+                  {project.contactPerson ? project.contactPerson : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Start Date: </span>
-                  {projectInfo.startDate
-                    ? moment(projectInfo.startDate).format("DD-MMM-YYYY")
+                  {project.startDate
+                    ? moment(project.startDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Deadline: </span>
 
-                  {projectInfo.endDate
-                    ? moment(projectInfo.endDate).format("DD-MMM-YYYY")
+                  {project.endDate
+                    ? moment(project.endDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
-                <p className="mb-0">{projectInfo.projectAddress}</p>
+                <p className="mb-0">{project.projectAddress}</p>
               </div>
             </div>
           </div>
@@ -205,36 +150,37 @@ const ProjectCard = ({ projectData, recall }) => {
                 <span
                   className={
                     `badge rounded-pill ` +
-                    getProjectStatusColor(projectInfo.projectStatusId)
+                    getProjectStatusColor(project.projectStatusId)
                   }
                 >
-                  {getProjectStatusName(projectInfo.projectStatusId)}
+                  {getProjectStatusName(project.projectStatusId)}
                 </span>
               </p>{" "}
-              {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
+              {getDateDifferenceInDays(project.endDate, Date()) >= 0 && (
                 <span className="badge bg-label-success ms-auto">
-                  {projectInfo.endDate &&
-                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
+                  {project.endDate &&
+                    getDateDifferenceInDays(project.endDate, Date())}{" "}
                   Days left
                 </span>
               )}
-              {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
+              {getDateDifferenceInDays(project.endDate, Date()) < 0 && (
                 <span className="badge bg-label-danger ms-auto">
-                  {projectInfo.endDate &&
-                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
+                  {project.endDate &&
+                    getDateDifferenceInDays(project.endDate, Date())}{" "}
                   Days overdue
                 </span>
               )}
             </div>
             <div className="d-flex justify-content-between align-items-center mb-2">
               <small className="text-body">
-                Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
+                Task: {formatNumber(project.completedWork)} /{" "}
+                {formatNumber(project.plannedWork)}
               </small>
               <small className="text-body">
                 {Math.floor(
                   getProgressInNumber(
-                    projectInfo.plannedWork,
-                    projectInfo.completedWork
+                    project.plannedWork,
+                    project.completedWork
                   )
                 ) || 0}{" "}
                 % Completed
@@ -246,22 +192,20 @@ const ProjectCard = ({ projectData, recall }) => {
                 role="progressbar"
                 style={{
                   width: getProgress(
-                    projectInfo.plannedWork,
-                    projectInfo.completedWork
+                    project.plannedWork,
+                    project.completedWork
                   ),
                 }}
-                aria-valuenow={projectInfo.completedWork}
+                aria-valuenow={project.completedWork}
                 aria-valuemin="0"
-                aria-valuemax={projectInfo.plannedWork}
+                aria-valuemax={project.plannedWork}
               ></div>
             </div>
             <div className="d-flex align-items-center justify-content-between">
-              {/* <div className="d-flex align-items-center ">
-            </div> */}
               <div>
                 <a className="text-muted d-flex " alt="Active team size">
                   <i className="bx bx-group bx-sm me-1_5"></i>
-                  {projectInfo?.teamSize} Members
+                  {project?.teamSize} Members
                 </a>
               </div>
               <div>
@@ -278,4 +222,4 @@ const ProjectCard = ({ projectData, recall }) => {
   );
 };
 
-export default ProjectCard;
+export default ProjectCard;

src/components/Project/ProjectCardView.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { useProjects } from '../../hooks/useProjects'
+import Loader from '../common/Loader'
+import ProjectCard from './ProjectCard'
+
+const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
+
+
+  return (
+
+      <div className="row page-min-h">
+
+          { currentItems.length === 0 && (
+            <p className="text-center text-muted">No projects found.</p>
+          )}
+     
+            {currentItems.map((project) => (
+              <ProjectCard
+                key={project.id}
+                project={project}
+              />
+            ))}
+
+
+             {  totalPages > 1 && (
+          <nav>
+            <ul className="pagination pagination-sm justify-content-end py-2">
+              <li className={`page-item ${currentPage === 1 && "disabled"}`}>
+                <button
+                  className="page-link"
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                >
+                  &laquo;
+                </button>
+              </li>
+              {[...Array(totalPages)].map((_, i) => (
+                <li
+                  key={i}
+                  className={`page-item ${currentPage === i + 1 && "active"}`}
+                >
+                  <button
+                    className="page-link"
+                    onClick={() => setCurrentPage(i + 1)}
+                  >
+                    {i + 1}
+                  </button>
+                </li>
+              ))}
+              <li
+                className={`page-item ${currentPage === totalPages && "disabled"
+                  }`}
+              >
+                <button
+                  className="page-link"
+                  onClick={() =>
+                    setCurrentPage((p) => Math.min(totalPages, p + 1))
+                  }
+                >
+                  &raquo;
+                </button>
+              </li>
+            </ul>
+          </nav>
+        )}
+          </div>
+  
+  )
+}
+
+export default ProjectCardView

src/components/Project/ProjectInfra.jsx

@@ -17,33 +17,39 @@ import {
   getCachedData,
   useSelectedProject,
 } from "../../slices/apiDataManager";
-import { useProjectAssignedServices, useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
+import {
+  useCurrentService,
+  useProjectAssignedServices,
+  useProjectDetails,
+  useProjectInfra,
+} from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../slices/localVariablesSlice";
 import eventBus from "../../services/eventBus";
 import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
+import { setService } from "../../slices/globalVariablesSlice";
 
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const projectId = useSelectedProject();
+  const selectedService = useCurrentService();
   const reloadedData = useSelector((store) => store.localVariables.reload);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
-  const { projectInfra, isLoading, error } = useProjectInfra(projectId)
+  const { projectInfra, isLoading, error } = useProjectInfra(
+    projectId,
+    selectedService
+  );
   const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
   const [project, setProject] = useState(projects_Details);
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
-  const ManageTask = useHasUserPermission(MANAGE_TASK)
+  const ManageTask = useHasUserPermission(MANAGE_TASK);
   const [showModalFloor, setshowModalFloor] = useState(false);
   const [showModalWorkArea, setshowModalWorkArea] = useState(false);
   const [showModalTask, setshowModalTask] = useState(false);
   const [showModalBuilding, setshowModalBuilding] = useState(false);
   const dispatch = useDispatch();
-  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
-
-  const [selectedService, setSelectedService] = useState("");
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
+  const { data: assignedServices, isLoading: servicesLoading } =
+    useProjectAssignedServices(projectId);
 
   useEffect(() => {
     setProject(projectInfra);
@@ -51,34 +57,58 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
 
   const signalRHandler = (response) => {
     setProject(response);
-  }
+  };
 
   return (
     <>
-      {showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding(false)}>
-        <BuildingModel
-          project={projectInfra}
-          onClose={() => setshowModalBuilding(false)}
-        />
-      </GlobalModel>}
-      {showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={() => setshowModalFloor(false)}>
-        <FloorModel
-          project={projectInfra}
-          onClose={() => setshowModalFloor(false)}
-        />
-      </GlobalModel>}
-      {showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={() => setshowModalWorkArea(false)} >
-        <WorkAreaModel
-          project={projectInfra}
-          onClose={() => setshowModalWorkArea(false)}
-        />
-      </GlobalModel>}
-      {showModalTask && (<GlobalModel isOpen={showModalTask} size="lg" closeModal={() => setshowModalTask(false)}>
-        <TaskModel
-          project={projectInfra}
-          onClose={() => setshowModalTask(false)}
-        />
-      </GlobalModel>)}
+      {showModalBuilding && (
+        <GlobalModel
+          isOpen={showModalBuilding}
+          size="md"
+          closeModal={() => setshowModalBuilding(false)}
+        >
+          <BuildingModel
+            project={projectInfra}
+            onClose={() => setshowModalBuilding(false)}
+          />
+        </GlobalModel>
+      )}
+      {showModalFloor && (
+        <GlobalModel
+          isOpen={showModalFloor}
+          size="md"
+          closeModal={() => setshowModalFloor(false)}
+        >
+          <FloorModel
+            project={projectInfra}
+            onClose={() => setshowModalFloor(false)}
+          />
+        </GlobalModel>
+      )}
+      {showModalWorkArea && (
+        <GlobalModel
+          isOpen={showModalWorkArea}
+          size="lg"
+          closeModal={() => setshowModalWorkArea(false)}
+        >
+          <WorkAreaModel
+            project={projectInfra}
+            onClose={() => setshowModalWorkArea(false)}
+          />
+        </GlobalModel>
+      )}
+      {showModalTask && (
+        <GlobalModel
+          isOpen={showModalTask}
+          size="lg"
+          closeModal={() => setshowModalTask(false)}
+        >
+          <TaskModel
+            project={projectInfra}
+            onClose={() => setshowModalTask(false)}
+          />
+        </GlobalModel>
+      )}
       <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
         <div className="card">
           <div className="card-body" style={{ padding: "0.5rem" }}>
@@ -88,8 +118,9 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
                   id="DataTables_Table_0_length"
                 >
-                  {!servicesLoading && assignedServices?.length > 0 && (
-                    assignedServices.length > 1 ? (
+                  {!servicesLoading &&
+                    assignedServices?.length > 0 &&
+                    (assignedServices.length > 1 ? (
                       <label>
                         <select
                           name="DataTables_Table_0_length"
@@ -97,7 +128,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                           className="form-select form-select-sm"
                           aria-label="Select Service"
                           value={selectedService}
-                          onChange={handleServiceChange}
+                          onChange={(e) => dispatch(setService(e.target.value))}
                         >
                           <option value="">All Services</option>
                           {assignedServices.map((service) => (
@@ -109,8 +140,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                       </label>
                     ) : (
                       <h5>{assignedServices[0].name}</h5>
-                    )
-                  )}
+                    ))}
                 </div>
 
                 {/* Buttons Section (aligned to right) */}
@@ -140,16 +170,20 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                       >
                         <i className="bx bx-plus-circle me-2"></i>
                         Manage Work Areas
-                      </button></>)}
+                      </button>
+                    </>
+                  )}
 
-                  {(ManageTask || ManageInfra) && (<button
-                    type="button"
-                    className="link-button btn btn-xs rounded-md m-1 btn-primary"
-                    onClick={() => setshowModalTask(true)}
-                  >
-                    <i className="bx bx-plus-circle me-2"></i>
-                    Create Tasks
-                  </button>)}
+                  {(ManageTask || ManageInfra) && (
+                    <button
+                      type="button"
+                      className="link-button btn btn-xs rounded-md m-1 btn-primary"
+                      onClick={() => setshowModalTask(true)}
+                    >
+                      <i className="bx bx-plus-circle me-2"></i>
+                      Create Tasks
+                    </button>
+                  )}
                 </div>
               </div>
               <div className="row ">
@@ -158,10 +192,14 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   <InfraTable
                     buildings={projectInfra}
                     projectId={projectId}
-                    serviceId={selectedService} 
+                    serviceId={selectedService}
                   />
                 )}
-                {!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
+                {!isLoading && projectInfra?.length == 0 && (
+                  <div className="mt-5">
+                    <p>No Infra Avaiable</p>
+                  </div>
+                )}
               </div>
             </div>
           </div>

src/components/Project/ProjectListView.jsx

@@ -0,0 +1,280 @@
+import React, { useState } from "react";
+import { MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
+import { useProjects } from "../../hooks/useProjects";
+import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
+import ProgressBar from "../common/ProgressBar";
+import {
+  getProjectStatusColor,
+  getProjectStatusName,
+} from "../../utils/projectStatus";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
+import { useNavigate } from "react-router-dom";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { useProjectContext } from "../../pages/project/ProjectPage";
+import usePagination from "../../hooks/usePagination";
+
+const ProjectListView = ({
+  currentItems,
+  selectedStatuses,
+  handleStatusChange,
+  setCurrentPage,
+  totalPages,
+  isLoading,
+}) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { setMangeProject } = useProjectContext();
+  // const { data, isLoading, isError, error } = useProjects();
+
+  //   check Permissions
+  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
+
+  const projectColumns = [
+    {
+      key: "projectName",
+      label: "Project Name",
+      className: "text-start py-3",
+      getValue: (p) => (
+        <div
+          className="text-primary cursor-pointer fw-bold py-3"
+          onClick={() => {
+            dispatch(setProjectId(p.id));
+            navigate(`/projects/details`);
+          }}
+        >
+          {p.shortName ? `${p.name} (${p.shortName})` : p.name}
+        </div>
+      ),
+    },
+    {
+      key: "contactPerson",
+      label: "Contact Person",
+      className: "text-start small",
+      getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
+    },
+    {
+      key: "startDate",
+      label: "Start Date",
+      className: "text-center small",
+      getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
+    },
+    {
+      key: "deadline",
+      label: "Deadline",
+      className: "text-center small",
+      getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A",
+    },
+    {
+      key: "task",
+      label: "Task",
+      colSpan: 2,
+      className: "text-center small",
+      getValue: (p) => formatNumber(p?.plannedWork) || "0",
+    },
+    {
+      key: "progress",
+      label: "Progress",
+      className: "text-start small",
+
+      getValue: (p) => (
+        <ProgressBar
+          plannedWork={p.plannedWork}
+          completedWork={p.completedWork}
+          className="mb-0"
+          height="6px"
+        />
+      ),
+    },
+    {
+      key: "status",
+      label: "Status",
+      className: "text-center small",
+      isFilter: true,
+      customRender: (_, selectedStatuses, handleStatusChange) => (
+        <div className="dropdown">
+          <a
+            className="dropdown-toggle hide-arrow cursor-pointer"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            Status <i className="bx bx-filter bx-sm"></i>
+          </a>
+          <ul className="dropdown-menu p-2 text-capitalize">
+            {PROJECT_STATUS.map(({ id, label }) => (
+              <li key={id}>
+                <div className="form-check">
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={selectedStatuses.includes(id)}
+                    onChange={() => handleStatusChange(id)}
+                  />
+                  <label className="form-check-label">{label}</label>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ),
+      getValue: (p) => (
+        <span className={`badge ${getProjectStatusColor(p.projectStatusId)}`}>
+          {getProjectStatusName(p.projectStatusId)}
+        </span>
+      ),
+    },
+  ];
+
+  const handleViewActivities = (project) => {
+    dispatch(setProjectId(project));
+    navigate(`/activities/records?project=${project}`);
+  };
+
+  return (
+    <div className="card page-min-h py-4 px-6 shadow-sm">
+      <table className="table  table-hover align-middle m-0">
+        <thead className="border-bottom">
+          <tr>
+            {projectColumns.map((col) => (
+              <th key={col.key} colSpan={col.colSpan} className={col.className}>
+                {col.label}
+              </th>
+            ))}
+            <th className="text-center py-3">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {currentItems?.map((project) => (
+            <tr key={project.id}>
+              {projectColumns.map((col) => (
+                <td
+                  key={col.key}
+                  colSpan={col.colSpan}
+                  className={`${col.className} py-5`}
+                  style={{ paddingTop: "20px", paddingBottom: "20px" }}
+                >
+                  {col.getValue
+                    ? col.getValue(project)
+                    : project[col.key] || "N/A"}
+                </td>
+              ))}
+              <td
+                className={`mx-2 ${
+                  canManageProject ? "d-sm-table-cell" : "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 cursor-pointer"
+                      >
+                        <i className="bx bx-detail me-2"></i>
+                        <span className="align-left">View details</span>
+                      </a>
+                    </li>
+
+                    <li>
+                      <a
+                        className="dropdown-item cursor-pointer"
+                        onClick={() =>
+                          setMangeProject({
+                            isOpen: true,
+                            Project: project.id,
+                          })
+                        }
+                      >
+                        <i className="bx bx-pencil me-2"></i>
+                        <span className="align-left">Modify</span>
+                      </a>
+                    </li>
+                    <li onClick={() => handleViewActivities(project.id)}>
+                      <a className="dropdown-item cursor-pointer">
+                        <i className="bx bx-task me-2"></i>
+                        <span className="align-left">Activities</span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {isLoading && (
+        <div className="py-4">
+          {" "}
+          {isLoading && <p className="text-center">Loading...</p>}
+          {!isLoading && filteredProjects.length === 0 && (
+            <p className="text-center text-muted">No projects found.</p>
+          )}
+        </div>
+      )}
+      {!isLoading && currentItems.length === 0 && (
+        <div className="py-6">
+          <p className="text-center text-muted">No projects found.</p>
+        </div>
+      )}
+      {!isLoading && totalPages > 1 && (
+        <nav>
+          <ul className="pagination pagination-sm justify-content-end py-2">
+            <li className={`page-item ${currentPage === 1 && "disabled"}`}>
+              <button
+                className="page-link"
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+              >
+                &laquo;
+              </button>
+            </li>
+            {[...Array(totalPages)].map((_, i) => (
+              <li
+                key={i}
+                className={`page-item ${currentPage === i + 1 && "active"}`}
+              >
+                <button
+                  className="page-link"
+                  onClick={() => setCurrentPage(i + 1)}
+                >
+                  {i + 1}
+                </button>
+              </li>
+            ))}
+            <li
+              className={`page-item ${
+                currentPage === totalPages && "disabled"
+              }`}
+            >
+              <button
+                className="page-link"
+                onClick={() =>
+                  setCurrentPage((p) => Math.min(totalPages, p + 1))
+                }
+              >
+                &raquo;
+              </button>
+            </li>
+          </ul>
+        </nav>
+      )}
+    </div>
+  );
+};
+
+export default ProjectListView;

src/components/Project/ProjectModal.jsx

@@ -1,36 +1,35 @@
-import React from 'react'
-import AssignRole from './AssignTask'
+import React from "react";
+import AssignRole from "./AssignTask";
 
-const ProjectModal = ({modalConfig,closeModal}) => {
-   
+const ProjectModal = ({ modalConfig, closeModal }) => {
   return (
     <div
-    className="modal fade"
-    id="project-modal"
-    tabindex="-1"
-    aria-hidden="true"
-    role="dialog"  
-   >
-   <div className="modal-dialog modal-lg modal-simple">
-  <div className="modal-content">
-  <div className="modal-body">
-    <button
-      type="button"
-      className="btn-close"
-      data-bs-dismiss="modal"
-      aria-label="Close"
-      onClick={closeModal}
-    ></button>
-    <div className="text-center mb-2"></div>
-     
-     
-            {modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
-            
-   </div>
-</div>
-</div>
-</div>
-  )
-}
+      className="modal fade"
+      id="project-modal"
+      tabindex="-1"
+      aria-hidden="true"
+      role="dialog"
+    >
+      <div className="modal-dialog modal-lg modal-simple">
+        <div className="modal-content">
+          <div className="modal-body">
+            <button
+              type="button"
+              className="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+              onClick={closeModal}
+            ></button>
+            <div className="text-center mb-2"></div>
 
-export default ProjectModal
+            {modalConfig?.type === "assignRole" && (
+              <AssignRole assignData={modalConfig?.data} onClose={closeModal} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectModal;

src/components/Project/ProjectNav.jsx

@@ -41,8 +41,8 @@ const ProjectNav = ({ onPillClick, activePill }) => {
       hidden: !(DirAdmin || DireManager || DirUser),
     },
     { key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
+    { key: "organization", icon: "bx bx-buildings", label: "Organization"},
     { key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
-     { key: "organization", icon: "bx bx-buildings", label: "Organization"},
   ];
   return (
     <div className="nav-align-top">

src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx

@@ -7,7 +7,7 @@ const ProjectAssignedOrgs = () => {
   const { data, isLoading, isError, error } =
     useProjectAssignedOrganizations(selectedProject);
 
-  const contactList = [
+  const orgList = [
     {
       key: "name",
       label: "Organization Name",
@@ -23,6 +23,16 @@ const ProjectAssignedOrgs = () => {
         </div>
       ),
       align: "text-start",
+    },
+      {
+      key: "service",
+      label: "Service Name",
+      getValue: (org) => (
+        <div className="d-flex gap-2 py-1 ">
+        {org?.service?.name}
+        </div>
+      ),
+      align: "text-start",
     },
     {
       key: "sprid",
@@ -57,11 +67,11 @@ const ProjectAssignedOrgs = () => {
 
   return (
     <div>
-      <div className="dataTables_wrapper no-footer mx-5 pb-2">
+      <div className="dataTables_wrapper no-footer mx-5 pb-2 page">
         <table className="table dataTable text-nowrap">
           <thead>
             <tr className="table_header_border">
-              {contactList.map((col) => (
+              {orgList.map((col) => (
                 <th key={col.key} className={col.align}>
                   {col.label}
                 </th>
@@ -72,7 +82,7 @@ const ProjectAssignedOrgs = () => {
             {Array.isArray(data) && data.length > 0 ? (
               data.map((row, i) => (
                 <tr key={i}>
-                  {contactList.map((col) => (
+                  {orgList.map((col) => (
                     <td key={col.key} className={col.align}>
                       {col.getValue(row)}
                     </td>
@@ -82,7 +92,7 @@ const ProjectAssignedOrgs = () => {
             ) : (
               <tr style={{ height: "200px" }}>
                 <td
-                  colSpan={contactList.length}
+                  colSpan={orgList.length}
                   className="text-center align-middle"
                 >
                   Not Assigned yet

src/components/Project/ProjectOrganizations.jsx

@@ -7,12 +7,12 @@ const ProjectOrganizations = () => {
   const { onOpen, startStep, flowType } = useOrganizationModal();
   const selectedProject = useSelectedProject();
   return (
-    <div className="card">
+    <div className="card pb-10" >
       <div className="card-header">
         <div className="d-flex justify-content-end px-2">
           <button
             type="button"
-            className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
+            className="link-button btn btn-sm rounded-md link-button-sm m-1 btn-primary"
             onClick={() => onOpen({ startStep: 1, flowType: "assign" })}
           >
             <i className="bx bx-plus-circle me-2"></i>

src/components/Project/ProjectOverview.jsx

@@ -10,9 +10,9 @@ import ReactApexChart from "react-apexcharts";
 import Chart from "react-apexcharts";
 
 const ProjectOverview = ({ project }) => {
-  const { projects } = useProjects();
+  const { data } = useProjects();
   const [current_project, setCurrentProject] = useState(
-    projects.find((pro) => pro.id == project)
+    data?.find((pro) => pro.id == project)
   );
 
   const selectedProject = useSelector(
@@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
   }, [current_project]);
 
   useEffect(() => {
-    setCurrentProject(projects.find((pro) => pro.id == selectedProject));
+    setCurrentProject(data?.find((pro) => pro.id == selectedProject));
     if (current_project) {
       let val = getProgressInPercentage(
         current_project.plannedWork,

src/components/Project/ProjectSchema.jsx

@@ -0,0 +1,59 @@
+import { z } from "zod";
+import { DEFAULT_EMPTY_STATUS_ID } from "../../utils/constants";
+const currentDate = new Date()
+
+
+export const projectDefault = {
+  name: "",
+  shortName: "",
+  contactPerson: "",
+  projectAddress: "",
+  startDate: currentDate.toISOString().split("T")[0],
+  endDate: currentDate.toISOString().split("T")[0],
+  projectStatusId: DEFAULT_EMPTY_STATUS_ID,
+  promoterId: "",
+  pmcId: "",
+};
+
+
+export const projectSchema = z
+  .object({
+    name: z.string().min(1, { message: "Project Name is required" }),
+    shortName: z.string().optional(),
+    contactPerson: z
+      .string()
+      .min(1, { message: "Contact Person Name is required" })
+      .regex(/^[A-Za-z\s]+$/, {
+        message: "Contact Person must contain only letters",
+      }),
+    projectAddress: z
+      .string()
+      .min(1, { message: "Address is required" })
+      .max(500, "Address must not exceed 150 characters"),
+    startDate: z
+      .string()
+      .min(1, { message: "Start Date is required" })
+      .default(projectDefault),
+    endDate: z
+      .string()
+      .min(1, { message: "End Date is required" })
+      .default(projectDefault),
+    projectStatusId: z.string().min(1, { message: "Status is required" }),
+    promoterId: z.string().min(1, { message: "Promoter is required" }),
+    pmcId: z.string().min(1, { message: "PMC is required" }),
+  })
+  .refine(
+    (data) => {
+      const start = new Date(data.startDate);
+      const end = new Date(data.endDate);
+      return end >= start;
+    },
+    {
+      path: ["endDate"],
+      message: "End Date must be greater than Start Date",
+    }
+  );
+
+
+
+

src/components/Project/Team/TeamAssignToProject.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import TeamEmployeeList from "./TeamEmployeeList";
+import { useOrganization } from "../../../hooks/useDirectory";
+import { useOrganizationsList } from "../../../hooks/useOrganization";
+import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
+import { useSelectedProject } from "../../../slices/apiDataManager";
+
+const TeamAssignToProject = ({ closeModal }) => {
+  const [searchText, setSearchText] = useState("");
+  const [selectedOrg, setSelectedOrg] = useState(null);
+  const project = useSelectedProject();
+  const { data, isLoading, isError, error } =
+    useProjectAssignedOrganizations(project);
+  return (
+    <div className="container">
+      <p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
+
+      <div class="row align-items-center gx-5">
+        <div class="col">
+          <div className="d-flex flex-grow-1 align-items-center gap-2">
+            {isLoading ? (
+              <select className="form-select form-select-sm w-100" disabled>
+                <option value="">Loading...</option>
+              </select>
+            ) : data?.length === 0 ? (
+              <p className="mb-0 badge bg-label-secondary">No organizations found</p>
+            ) : (
+              <>
+                <label
+                  htmlFor="organization"
+                  className="form-label mb-0 text-nowrap"
+                >
+                  Select Organization
+                </label>
+                <select
+                  id="organization"
+                  className="form-select form-select-sm w-100"
+                  value={selectedOrg || ""}
+                  onChange={(e) => setSelectedOrg(e.target.value)}
+                >
+                  <option value="">Select</option>
+                  {data.map((org) => (
+                    <option key={org.id} value={org.id}>
+                      {org.name}
+                    </option>
+                  ))}
+                </select>
+              </>
+            )}
+          </div>
+        </div>
+        <div class="col">
+          <div className="d-flex flex-grow-1 align-items-center gap-2">
+            <label htmlFor="search" className="form-label mb-0 text-nowrap">
+              Search Employee
+            </label>
+            <input
+              id="search"
+              type="search"
+              className="form-control form-control-sm w-100"
+              placeholder="Search..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div >
+        <TeamEmployeeList
+          organizationId={selectedOrg}
+          searchTerm={searchText}
+          closeModal={closeModal}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TeamAssignToProject;

src/components/Project/Team/TeamEmployeeList.jsx

@@ -0,0 +1,250 @@
+import React, { useState, useEffect } from "react";
+import Avatar from "../../common/Avatar";
+import { useDebounce } from "../../../utils/appUtils";
+import { useSelectedProject } from "../../../slices/apiDataManager";
+import { useOrganizationEmployees } from "../../../hooks/useOrganization";
+import {
+  useEmployeesByProjectAllocated,
+  useManageProjectAllocation,
+} from "../../../hooks/useProjects";
+import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
+import showToast from "../../../services/toastService";
+
+const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
+  const selectedProject = useSelectedProject();
+  const debounceSearchTerm = useDebounce(searchTerm, 500);
+
+  const {
+    data: employeesData = [],
+    isLoading,
+    isError,
+    error,
+  } = useOrganizationEmployees(
+    selectedProject,
+    organizationId,
+    debounceSearchTerm
+  );
+
+  const { projectEmployees, loading: employeeLodaing } =
+    useEmployeesByProjectAllocated(selectedProject, null);
+
+  const { data: jobRoles } = useMaster();
+  const { data: services } = useServices();
+
+  const [employees, setEmployees] = useState([]);
+
+  const { mutate: handleAssignEmployee, isPending } =
+    useManageProjectAllocation({
+      onSuccessCallback: () => {
+        closeModal();
+      },
+      onErrorCallback: () => {
+        closeModal();
+      },
+    });
+
+  useEffect(() => {
+    if (employeesData?.data?.length > 0) {
+      const available = employeesData.data.filter((emp) => {
+        const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
+        return !projEmp || projEmp.isActive === false;
+      });
+
+      setEmployees(
+        available.map((emp) => ({
+          ...emp,
+          isChecked: false,
+          jobRole: emp?.jobRoleId || null,
+          serviceId: "",
+          errors: {},
+        }))
+      );
+    }
+  }, [employeesData, projectEmployees, organizationId]);
+
+  const handleCheckboxChange = (index) => {
+    setEmployees((prev) => {
+      const newArr = [...prev];
+      newArr[index].isChecked = !newArr[index].isChecked;
+      newArr[index].errors = {};
+      return newArr;
+    });
+  };
+
+  const handleSelectChange = (index, field, value) => {
+    setEmployees((prev) => {
+      const newArr = [...prev];
+      newArr[index][field] = value;
+      newArr[index].errors[field] = "";
+      return newArr;
+    });
+  };
+
+  const onSubmit = () => {
+    const checkedEmployees = employees.filter((emp) => emp.isChecked);
+
+    setEmployees((prev) => prev.map((emp) => ({ ...emp, errors: {} })));
+
+    if (checkedEmployees.length === 0) {
+      showToast("Select at least one employee", "info");
+      return;
+    }
+
+    let hasError = false;
+    const newEmployees = employees.map((emp) => {
+      const empErrors = {};
+      if (emp.isChecked) {
+        if (!emp.jobRole) {
+          empErrors.jobRole = "Job role is required";
+          hasError = true;
+        }
+        if (!emp.serviceId) {
+          empErrors.serviceId = "Service is required";
+          hasError = true;
+        }
+      }
+      return { ...emp, errors: empErrors };
+    });
+
+    setEmployees(newEmployees);
+
+    if (hasError) return; // stop submit if validation fails
+
+    const payload = checkedEmployees.map((emp) => ({
+      employeeId: emp.id,
+      jobRoleId: emp.jobRole,
+      serviceId: emp.serviceId,
+      projectId: selectedProject,
+      status: true,
+    }));
+
+    handleAssignEmployee({ payload,actionType:"assign"} );
+
+    setEmployees((prev) =>
+      prev.map((emp) => ({
+        ...emp,
+        isChecked: false,
+        jobRole: "",
+        serviceId: "",
+        errors: {},
+      }))
+    );
+  };
+
+if (isLoading) {
+  return (   <div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>) ;
+}
+
+if (isError) {
+  return (
+    <div className="page-min-h d-flex justify-content-center align-items-center ">
+  {error?.status === 400 ? (
+    <p className="m-0">Enter employee you want to find.</p>
+  ) : (
+    <p className="m-0 dange-text">Something went wrong. Please try again later.</p>
+  )}
+</div>
+
+  );
+}
+
+if (employees.length === 0) {
+  return(<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>) ;
+}
+
+
+  return (
+    <div className=" position-relative">
+      <table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
+        <thead className=" position-sticky top-0">
+          <tr>
+            <th>Employee</th>
+            <th>Service</th>
+            <th>Job Role</th>
+            <th>Select</th>
+          </tr>
+        </thead>
+        <tbody>
+          {employees.map((emp, index) => (
+            <tr key={emp.id}>
+              <td>
+                <div className="d-flex align-items-center">
+                  <Avatar firstName={emp.firstName} lastName={emp.lastName} />
+                  <span className="ms-2 fw-semibold">
+                    {emp.firstName} {emp.lastName}
+                  </span>
+                </div>
+              </td>
+              <td>
+                <select
+                  value={emp.serviceId}
+                  disabled={!emp.isChecked}
+                  onChange={(e) =>
+                    handleSelectChange(index, "serviceId", e.target.value)
+                  }
+                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
+                    emp.errors.serviceId ? "is-invalid" : ""
+                  }`}
+                >
+                  <option value="">Select Service</option>
+                  {services?.data?.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.name}
+                    </option>
+                  ))}
+                </select>
+                {emp.errors.serviceId && (
+                  <div className="danger-text">{emp.errors.serviceId}</div>
+                )}
+              </td>
+              <td>
+                <select
+                  value={emp.jobRole}
+                  disabled={!emp.isChecked}
+                  onChange={(e) =>
+                    handleSelectChange(index, "jobRole", e.target.value)
+                  }
+                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
+                    emp.errors.jobRole ? "is-invalid" : ""
+                  }`}
+                >
+                  <option value="">Select Job Role</option>
+                  {jobRoles?.map((r) => (
+                    <option key={r.id} value={r.id}>
+                      {r.name}
+                    </option>
+                  ))}
+                </select>
+                {emp.errors.jobRole && (
+                  <div className="danger-text">{emp.errors.jobRole}</div>
+                )}
+              </td>
+              <td>
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={emp.isChecked}
+                  onChange={() => handleCheckboxChange(index)}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="position-sticky bottom-0 bg-white  d-flex justify-content-end gap-3 z-25 ">
+        <button
+          type="button"
+          className="btn btn-sm btn-label-secondary"
+          onClick={() => closeModal()}
+        >
+          Cancel
+        </button>
+        <button onClick={onSubmit} className="btn btn-primary">
+          {isPending ? "Please Wait..." : "Assign to Project"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TeamEmployeeList;

src/components/Project/Team/Teams.jsx

@@ -0,0 +1,333 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
+
+import showToast from "../../../services/toastService";
+import Avatar from "../../common/Avatar";
+import moment from "moment";
+
+import ProjectRepository from "../../../repositories/ProjectRepository";
+import { useDispatch, useSelector } from "react-redux";
+import { changeMaster } from "../../../slices/localVariablesSlice";
+import useMaster from "../../../hooks/masterHook/useMaster";
+import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
+import { ASSIGN_TO_PROJECT } from "../../../utils/constants";
+import ConfirmModal from "../../common/ConfirmModal";
+import eventBus from "../../../services/eventBus";
+import {
+  useEmployeesByProjectAllocated,
+  useManageProjectAllocation,
+  useProjectAssignedServices,
+} from "../../../hooks/useProjects";
+import { useSelectedProject } from "../../../slices/apiDataManager";
+import GlobalModel from "../../common/GlobalModel";
+import TeamAssignToProject from "./TeamAssignToProject";
+
+const Teams = () => {
+  const selectedProject = useSelectedProject();
+  const dispatch = useDispatch();
+  const [AssigTeam, setAssignTeam] = useState(false);
+  const [employees, setEmployees] = useState([]);
+  const [selectedEmployee, setSelectedEmployee] = useState(null);
+  const [deleteEmployee, setDeleteEmplyee] = useState(null);
+  const [searchTerm, setSearchTerm] = useState(""); // State for search term
+  const [selectedService, setSelectedService] = useState(null);
+  const [activeEmployee, setActiveEmployee] = useState(false);
+
+  const { data: assignedServices, isLoading: servicesLoading } =
+    useProjectAssignedServices(selectedProject);
+  const { data: empJobRoles, loading } = useMaster();
+  const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
+
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
+
+  const navigate = useNavigate();
+
+  const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
+  const [IsDeleteModal, setIsDeleteModal] = useState(false);
+  const {
+    projectEmployees,
+    loading: employeeLodaing,
+    refetch,
+  } = useEmployeesByProjectAllocated(
+    selectedProject,
+    selectedService,
+    null,
+    activeEmployee
+  );
+  const {
+    mutate: submitAllocations,
+    isPending,
+    isSuccess,
+    isError,
+  } = useManageProjectAllocation({
+    onSuccessCallback: () => {
+      setSelectedEmployee(null);
+    },
+    onErrorCallback: () => {
+      setSelectedEmployee(null);
+    },
+  });
+
+  const handleDelete = (employee) => {
+    let payload = [
+      {
+        employeeId: employee?.employeeId,
+        jobRoleId: employee?.jobRoleId,
+        projectId: selectedProject,
+        serviceId: employee?.serviceId,
+        status: false,
+      },
+    ];
+
+    submitAllocations({ payload: payload, actionType: "remove" });
+  };
+  const getJobRole = (jobRoleId) => {
+    if (loading) return "Loading...";
+    if (!Array.isArray(empJobRoles)) return "Unassigned";
+    if (!jobRoleId) return "Unassigned";
+
+    const role = empJobRoles.find((b) => b.id == jobRoleId);
+    return role ? role.name : "Unassigned";
+  };
+
+  const filteredEmployees = useMemo(() => {
+    if (!projectEmployees || !searchTerm?.trim()) return projectEmployees;
+
+    const lower = searchTerm.toLowerCase();
+
+    return projectEmployees?.filter((emp) => {
+      const fullName = `${emp.firstName ?? ""} ${
+        emp.lastName ?? ""
+      }`.toLowerCase();
+
+      const joberole = getJobRole(emp?.jobRoleId)?.toLowerCase();
+
+      return fullName?.includes(lower) || joberole?.includes(lower);
+    });
+  }, [projectEmployees, searchTerm]);
+  const handleSearch = (e) => setSearchTerm(e.target.value);
+  const employeeHandler = useCallback(
+    (msg) => {
+      if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
+        refetch();
+      }
+    },
+    [filteredEmployees, refetch]
+  );
+
+  useEffect(() => {
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
+
+  return (
+    <>
+      {AssigTeam && (
+        <GlobalModel
+          size="lg"
+          isOpen={AssigTeam}
+          closeModal={() => setAssignTeam(false)}
+        >
+          <TeamAssignToProject closeModal={() => setAssignTeam(false)} />
+        </GlobalModel>
+      )}
+
+      <ConfirmModal
+        type="delete"
+        header={"Remove Employee"}
+        message={"Are you sure you want to remove?"}
+        isOpen={!!selectedEmployee}
+        loading={isPending}
+        onSubmit={() => handleDelete(selectedEmployee)}
+        onClose={() => setSelectedEmployee(null)}
+      />
+
+      <div className="card card-action mb-6">
+        <div className="card-body">
+          <div className="row align-items-center justify-content-between mb-4 g-3">
+            <div className="col-md-6 col-12 algin-items-center">
+              <div className="d-flex flex-wrap align-items-center gap-3">
+                <div>
+                  {!servicesLoading && (
+                    <>
+                      {(!assignedServices || assignedServices.length === 0) && (
+                        <span className="badge bg-label-secondary">
+                          Not Service Assigned
+                        </span>
+                      )}
+
+                      {assignedServices?.length === 1 && (
+                        <span className="badge bg-label-secondary">
+                          {assignedServices[0].name}
+                        </span>
+                      )}
+
+                      {assignedServices?.length > 1 && (
+                        <select
+                          className="form-select form-select-sm"
+                          aria-label="Select Service"
+                          value={selectedService}
+                          onChange={handleServiceChange}
+                        >
+                          <option value="">All Services</option>
+                          {assignedServices.map((service) => (
+                            <option key={service.id} value={service.id}>
+                              {service.name}
+                            </option>
+                          ))}
+                        </select>
+                      )}
+                    </>
+                  )}
+                </div>
+
+                <div className="form-check form-switch d-flex align-items-center text-nowrap">
+                  <input
+                    type="checkbox"
+                    className="form-check-input"
+                    id="activeEmployeeSwitch"
+                    checked={activeEmployee}
+                    onChange={handleToggleActive}
+                  />
+                  <label
+                    className="form-check-label ms-2"
+                    htmlFor="activeEmployeeSwitch"
+                  >
+                    {activeEmployee ? "Active Employees" : "Include Inactive Employees"}
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
+              <input
+                type="search"
+                className="form-control form-control-sm"
+                placeholder="Search by Name or Role"
+                aria-controls="DataTables_Table_0"
+                style={{ maxWidth: "200px" }}
+                value={searchTerm}
+                onChange={handleSearch}
+              />
+
+              {HasAssignUserPermission && (
+                <button
+                  type="button"
+                  className="btn btn-primary btn-sm text-nowrap"
+                  onClick={() => setAssignTeam(true)}
+                >
+                  <i className="bx bx-plus-circle me-1"></i>
+                  Assign Employee
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="table-responsive text-nowrap modal-min-h">
+            {employeeLodaing && <p>Loading..</p>}
+            {projectEmployees && projectEmployees.length > 0 && (
+              <table className="table ">
+                <thead>
+                  <tr>
+                    <th>
+                      <div className="text-start ms-5">Name</div>
+                    </th>
+                    <th>Services</th>
+                    <th>Organization</th>
+                    <th>Assigned Date</th>
+                    {activeEmployee && <th>Release Date</th>}
+                    <th>Project Role</th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="table-border-bottom-0">
+                  {filteredEmployees &&
+                    filteredEmployees
+                      .sort((a, b) =>
+                        (a.firstName || "").localeCompare(b.firstName || "")
+                      )
+                      .map((emp) => (
+                        <tr key={emp.id}>
+                          <td>
+                            <div className="d-flex justify-content-start align-items-center">
+                              <Avatar
+                                firstName={emp.firstName}
+                                lastName={emp.lastName}
+                              />
+                              <div className="d-flex flex-column">
+                                <a
+                                  onClick={() =>
+                                    navigate(
+                                      `/employee/${emp.employeeId}?for=attendance`
+                                    )
+                                  }
+                                  className="text-heading text-truncate cursor-pointer"
+                                >
+                                  <span className="fw-normal">
+                                    {emp.firstName}
+                                    {emp.lastName}
+                                  </span>
+                                </a>
+                              </div>
+                            </div>
+                          </td>
+
+                          <td>{emp.serviceName || "N/A"}</td>
+                          <td>{emp.organizationName || "N/A"}</td>
+
+                          <td>
+                            {moment(emp.allocationDate).format("DD-MMM-YYYY")}
+                          </td>
+                          {activeEmployee && (
+                            <td>
+                              {emp.reAllocationDate
+                                ? moment(emp.reAllocationDate).format(
+                                    "DD-MMM-YYYY"
+                                  )
+                                : "Present"}
+                            </td>
+                          )}
+                          <td>
+                            <span className="badge bg-label-primary me-1">
+                              {getJobRole(emp.jobRoleId)}
+                            </span>
+                          </td>
+                          <td>
+                            {emp.isActive ? (
+                              <button
+                                aria-label="Delete"
+                                type="button"
+                                title="Remove from project"
+                                className="btn p-0 dropdown-toggle hide-arrow"
+                                onClick={() => setSelectedEmployee(emp)}
+                              >
+                                <i className="bx bx-trash me-1 text-danger"></i>
+                              </button>
+                            ) : (
+                              <span>Not in project</span>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                </tbody>
+              </table>
+            )}
+            {!employeeLodaing && filteredEmployees.length === 0 && (
+              <div className="text-center text-muted py-3  d-flex justify-content-center align-items-center py-12">
+                <p>
+                  {!activeEmployee
+                    ? "No active employees assigned to the project"
+                    : "No inactive employees assigned to the project"}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Teams;

src/components/Project/Teams.jsx

@@ -1,443 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import MapUsers from "./MapUsers";
-import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
-
-import showToast from "../../services/toastService";
-import Avatar from "../common/Avatar";
-import moment from "moment";
-
-import ProjectRepository from "../../repositories/ProjectRepository";
-import { useDispatch, useSelector } from "react-redux";
-import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster from "../../hooks/masterHook/useMaster";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { ASSIGN_TO_PROJECT } from "../../utils/constants";
-import ConfirmModal from "../common/ConfirmModal";
-import eventBus from "../../services/eventBus";
-import {
-  useEmployeesByProjectAllocated,
-  useManageProjectAllocation,
-  useProjectAssignedServices,
-} from "../../hooks/useProjects";
-import { useSelectedProject } from "../../slices/apiDataManager";
-
-const Teams = () => {
-  const projectId = useSelectedProject();
-  const dispatch = useDispatch();
-
-  const { data, loading } = useMaster();
-  const [isModalOpen, setIsModelOpen] = useState(false);
-  const [error, setError] = useState("");
-  const [empJobRoles, setEmpJobRoles] = useState(null);
-  const [employees, setEmployees] = useState([]);
-  const [filteredEmployees, setFilteredEmployees] = useState([]);
-  const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
-  const [assignedLoading, setAssignedLoading] = useState(false);
-  const [activeEmployee, setActiveEmployee] = useState(true);
-  const [deleteEmployee, setDeleteEmplyee] = useState(null);
-  const [searchTerm, setSearchTerm] = useState(""); // State for search term
-  const [selectedService, setSelectedService] = useState(null);
-
-  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
-  const handleToggleActive = e => setActiveEmployee(e.target.checked);
-
-
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
-
-  const navigate = useNavigate();
-
-  const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
-  const [IsDeleteModal, setIsDeleteModal] = useState(false);
-  const {
-    projectEmployees,
-    loading: employeeLodaing,
-    refetch,
-  } = useEmployeesByProjectAllocated(projectId, selectedService);
-  const {
-    mutate: submitAllocations,
-    isPending,
-    isSuccess,
-    isError,
-  } = useManageProjectAllocation({
-    onSuccessCallback: () => {
-      setRemovingEmployeeId(null);
-      setAssignedLoading(false);
-      setDeleteEmplyee(null);
-      closeDeleteModal();
-    },
-    onErrorCallback: () => {
-      closeDeleteModal();
-    },
-  });
-
-  const removeAllocation = (item) => {
-    setRemovingEmployeeId(item.id);
-
-    submitAllocations({
-      items: [
-        {
-          empID: item.employeeId,
-          jobRoleId: item.jobRoleId,
-          projectId: projectId,
-          status: false,
-        },
-      ],
-      added: false,
-    });
-  };
-
-  const handleEmpAlicationFormSubmit = (allocaionObj) => {
-    let items = allocaionObj.map((item) => {
-      return {
-        empID: item.empID,
-        jobRoleId: item.jobRoleId,
-        projectId: projectId,
-        status: true,
-      };
-    });
-
-    submitAllocations({ items, added: true });
-
-    setActiveEmployee(true);
-    setFilteredEmployees(employees.filter((emp) => emp.isActive));
-
-    const dropdown = document.querySelector(
-      'select[name="DataTables_Table_0_length"]'
-    );
-    if (dropdown) dropdown.value = "true";
-  };
-
-  const getRole = (jobRoleId) => {
-    if (loading) return "Loading...";
-    if (!Array.isArray(empJobRoles)) return "Unassigned";
-    if (!jobRoleId) return "Unassigned";
-
-    const role = empJobRoles.find((b) => b.id == jobRoleId);
-    return role ? role.name : "Unassigned";
-  };
-  const openModel = () => {
-    setIsModelOpen(true);
-  };
-
-  const onModelClose = () => {
-    setIsModelOpen(false);
-    const modalElement = document.getElementById("user-model");
-    if (modalElement) {
-      modalElement.classList.remove("show");
-      modalElement.style.display = "none";
-      document.body.classList.remove("modal-open");
-      document.querySelector(".modal-backdrop").remove();
-    }
-    const modalBackdropElement = document.querySelector(".modal-backdrop");
-    if (modalBackdropElement) {
-      modalBackdropElement.remove();
-    }
-    document.body.style.overflow = "auto";
-  };
-
-  useEffect(() => {
-    dispatch(changeMaster("Job Role"));
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (projectEmployees) {
-      setEmployees(projectEmployees);
-      const filtered = projectEmployees.filter((emp) => emp.isActive);
-      setFilteredEmployees(filtered);
-    }
-  }, [projectEmployees, employeeLodaing]);
-
-  useEffect(() => {
-    if (data) {
-      setEmpJobRoles(data);
-    }
-  }, [data]);
-  const filterAndSearchEmployees = useCallback(() => {
-    const statusFiltered = employees.filter((emp) =>
-      activeEmployee ? emp.isActive : !emp.isActive
-    );
-
-    if (searchTerm === "") {
-      setFilteredEmployees(statusFiltered);
-      return;
-    }
-
-    const lowercasedSearchTerm = searchTerm.toLowerCase();
-
-    const searchedAndFiltered = statusFiltered.filter((item) => {
-      const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
-      const roleName = getRole(item.jobRoleId).toLowerCase();
-      const orgName = (item.organizationName || "").toLowerCase();
-      const serviceName = (item.serviceName || "").toLowerCase();
-
-      return (
-        fullName.includes(lowercasedSearchTerm) ||
-        roleName.includes(lowercasedSearchTerm) ||
-        orgName.includes(lowercasedSearchTerm) ||
-        serviceName.includes(lowercasedSearchTerm)
-      );
-    });
-
-    setFilteredEmployees(searchedAndFiltered);
-  }, [employees, activeEmployee, searchTerm, getRole]);
-
-
-  useEffect(() => {
-    filterAndSearchEmployees();
-  }, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
-
-  const handleFilterEmployee = (e) => {
-    const filterValue = e.target.value;
-    setActiveEmployee(filterValue === "true");
-    setSearchTerm("");
-  };
-
-  const handleSearch = (e) => {
-    setSearchTerm(e.target.value);
-  };
-
-  const deleteModalOpen = (item) => {
-    setDeleteEmplyee(item);
-    setIsDeleteModal(true);
-  };
-  const closeDeleteModal = () => setIsDeleteModal(false);
-
-  const handler = useCallback(
-    (msg) => {
-      if (msg.projectIds.some((item) => item === projectId)) {
-        refetch();
-      }
-    },
-    [projectId, refetch]
-  );
-
-  useEffect(() => {
-    eventBus.on("assign_project_all", handler);
-    return () => eventBus.off("assign_project_all", handler);
-  }, [handler]);
-
-  const employeeHandler = useCallback(
-    (msg) => {
-      if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
-        refetch();
-      }
-    },
-    [filteredEmployees, refetch]
-  );
-
-  useEffect(() => {
-    eventBus.on("employee", employeeHandler);
-    return () => eventBus.off("employee", employeeHandler);
-  }, [employeeHandler]);
-
-  return (
-    <>
-      <div
-        className="modal fade"
-        id="user-model"
-        tabIndex="-1"
-        aria-labelledby="userModalLabel"
-        aria-hidden="true"
-      >
-        <MapUsers
-          projectId={projectId}
-          onClose={onModelClose}
-          empJobRoles={empJobRoles}
-          onSubmit={handleEmpAlicationFormSubmit}
-          allocation={employees}
-          assignedLoading={assignedLoading}
-          setAssignedLoading={setAssignedLoading}
-        ></MapUsers>
-      </div>
-
-      {IsDeleteModal && (
-        <ConfirmModal
-          isOpen={IsDeleteModal}
-          type="delete"
-          header="Removed Employee"
-          message="Are you sure you want delete?"
-          onSubmit={() => removeAllocation(deleteEmployee)}
-          onClose={closeDeleteModal}
-          loading={isPending}
-        />
-      )}
-
-      <div className="card card-action mb-6">
-        <div className="card-body">
-          <div className="row d-flex justify-content-between mb-4">
-            <div className="col-md-6 col-12 d-flex align-items-center">
-              <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
-                {!servicesLoading && assignedServices?.length > 0 && (
-                  assignedServices.length > 1 ? (
-                    <label>
-                      <select
-                        name="DataTables_Table_0_length"
-                        aria-controls="DataTables_Table_0"
-                        className="form-select form-select-sm"
-                        aria-label="Select Service"
-                        value={selectedService}
-                        onChange={handleServiceChange}
-                        style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
-                      >
-                        <option value="">All Services</option>
-                        {assignedServices.map((service) => (
-                          <option key={service.id} value={service.id}>
-                            {service.name}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                  ) : (
-                    <h5>{assignedServices[0].name}</h5>
-                  )
-                )}
-              </div>
-            </div>
-            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
-              <div className="form-check form-switch me-2 mt-2">
-                <input
-                  type="checkbox"
-                  className="form-check-input"
-                  checked={activeEmployee}
-                  onChange={handleToggleActive}
-                  id="activeEmployeeSwitch"
-                />
-                <label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
-                  {activeEmployee ? "Active Employees" : "Inactive Employees"}
-                </label>
-              </div>
-              <div className="dataTables_filter d-inline-flex align-items-center ms-2">
-                <input
-                  type="search"
-                  className="form-control form-control-sm me-4"
-                  placeholder="Search by Name or Role"
-                  aria-controls="DataTables_Table_0"
-                  value={searchTerm}
-                  onChange={handleSearch}
-                />
-              </div>
-
-              <button
-                type="button"
-                className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"
-                  }`}
-                data-bs-toggle="modal"
-                data-bs-target="#user-model"
-              >
-                <i className="bx bx-plus-circle me-2"></i>
-                Assign Employee
-              </button>
-            </div>
-          </div>
-          <div className="table-responsive text-nowrap">
-            {employeeLodaing && <p>Loading..</p>}
-            {!employeeLodaing &&
-              filteredEmployees &&
-              filteredEmployees.length > 0 && (
-                <table className="table ">
-                  <thead>
-                    <tr>
-                      <th>
-                        <div className="text-start ms-5">Name</div>
-                      </th>
-                      <th>Services</th>
-                      <th>Organization</th>
-                      <th>Assigned Date</th>
-                      {!activeEmployee && <th>Release Date</th>}
-                      <th>Project Role</th>
-                      <th>Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody className="table-border-bottom-0">
-                    {filteredEmployees &&
-                      filteredEmployees.map((item) => (
-                        <tr key={item.id}>
-                          <td>
-                            <div className="d-flex justify-content-start align-items-center">
-                              <Avatar
-                                firstName={item.firstName}
-                                lastName={item.lastName}
-                              />
-                              <div className="d-flex flex-column">
-                                <a
-                                  onClick={() =>
-                                    navigate(
-                                      `/employee/${item.employeeId}?for=attendance`
-                                    )
-                                  }
-                                  className="text-heading text-truncate cursor-pointer"
-                                >
-                                  <span className="fw-normal">
-                                    {item.firstName} {item.middleName}{" "}
-                                    {item.lastName}
-                                  </span>
-                                </a>
-                              </div>
-                            </div>
-                          </td>
-
-                          <td>{item.serviceName || "N/A"}</td>
-                          <td>{item.organizationName || "N/A"}</td>
-
-                          <td>
-                            {moment(item.allocationDate).format("DD-MMM-YYYY")}
-                          </td>
-                          {!activeEmployee && (
-                            <td>
-                              {item.reAllocationDate
-                                ? moment(item.reAllocationDate).format("DD-MMM-YYYY")
-                                : "Present"}
-                            </td>
-                          )}
-                          <td>
-                            <span className="badge bg-label-primary me-1">
-                              {getRole(item.jobRoleId)}
-                            </span>
-                          </td>
-                          <td>
-                            {item.isActive ? (
-                              <button
-                                aria-label="Delete"
-                                type="button"
-                                title="Remove from project"
-                                className="btn p-0 dropdown-toggle hide-arrow"
-                                onClick={() => deleteModalOpen(item)}
-                              >
-                                {removingEmployeeId === item.id ? (
-                                  <div
-                                    className="spinner-border spinner-border-sm text-primary"
-                                    role="status"
-                                  >
-                                    <span className="visually-hidden">Loading...</span>
-                                  </div>
-                                ) : (
-                                  <i className="bx bx-trash me-1 text-danger"></i>
-                                )}
-                              </button>
-                            ) : (
-                              <span>Not in project</span>
-                            )}
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-
-              )}
-            {!employeeLodaing && filteredEmployees.length === 0 && (
-              <div className="text-center text-muted py-3">
-                {activeEmployee
-                  ? "No active employees assigned to the project"
-                  : "No inactive employees assigned to the project"}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Teams;

src/components/Tenant/EditProfile.jsx

@@ -72,15 +72,15 @@ const EditProfile = ({ TenantId, onClose }) => {
   return (
     <FormProvider {...methods}>
       <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
-        <h6>Edit Tenant</h6>
+        <h5>Edit Tenant</h5>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="firstName" required>First Name</Label>
           <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
           {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="lastName" required>Last Name</Label>
           <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
           {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
@@ -88,32 +88,32 @@ const EditProfile = ({ TenantId, onClose }) => {
 
 
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="contactNumber" required>Contact Number</Label>
           <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
             placeholder="+91 9876543210" />
           {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="domainName" >Domain Name</Label>
           <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
           {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="taxId" >Tax ID</Label>
           <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
           {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="officeNumber" >Office Number</Label>
           <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
           {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="industryId" required>Industry</Label>
           <select className="form-select form-select-sm" {...register("industryId")}>
             {industryLoading ? <option value="">Loading...</option> :
@@ -125,7 +125,7 @@ const EditProfile = ({ TenantId, onClose }) => {
           {errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="reference">Reference</Label>
           <select className="form-select form-select-sm" {...register("reference")}>
             {reference.map((org) => (
@@ -134,7 +134,7 @@ const EditProfile = ({ TenantId, onClose }) => {
           </select>
           {errors.reference && <div className="danger-text">{errors.reference.message}</div>}
         </div>
-        <div className="col-sm-6">
+        <div className="col-sm-6 text-start">
           <Label htmlFor="organizationSize" required>
             Organization Size
           </Label>
@@ -154,19 +154,19 @@ const EditProfile = ({ TenantId, onClose }) => {
           )}
         </div>
 
-        <div className="col-12 mt-1">
+        <div className="col-12 mt-1 text-start">
           <Label htmlFor="billingAddress" required>Billing Address</Label>
           <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
           {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
         </div>
 
-        <div className="col-12 mt-1">
+        <div className="col-12 mt-1 text-start">
           <Label htmlFor="description">Description</Label>
           <textarea id="description" className="form-control" {...register("description")} rows={2} />
           {errors.description && <div className="danger-text">{errors.description.message}</div>}
         </div>
 
-        <div className="col-sm-12">
+        <div className="col-sm-12 text-start">
           <Label htmlFor="logImage">Logo Image</Label>
           <LogoUpload
             preview={logoPreview}
@@ -176,9 +176,9 @@ const EditProfile = ({ TenantId, onClose }) => {
           />
         </div>
 
-        <div className="d-flex justify-content-center gap-2 mt-3">
+        <div className="d-flex justify-content-end gap-2 mt-3">
+          <button type="button" disabled={isPending} className="btn btn-sm btn-label-secondary" onClick={onClose}>Cancel</button>
           <button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
-          <button type="button" disabled={isPending} className="btn btn-sm btn-secondary" onClick={onClose}>Cancel</button>
         </div>
       </form>
     </FormProvider>

src/components/Tenant/LogoUpload.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 const toBase64 = (file) =>
@@ -10,11 +10,15 @@ const toBase64 = (file) =>
   });
 
 export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
-  const {
-    register,
-    setValue,
-    formState: { errors },
-  } = useFormContext();
+  const { register, setValue, watch, formState: { errors } } = useFormContext();
+  const logoImage = watch("logoImage");
+
+  // Sync preview when the form value changes
+  useEffect(() => {
+    if (logoImage && !preview) {
+      setPreview(logoImage); // Use base64 as preview
+    }
+  }, [logoImage, preview, setPreview]);
 
   const handleUpload = async (e) => {
     const file = e.target.files?.[0];

src/components/Tenant/OrganizationInfo.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
@@ -6,11 +6,14 @@ import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
 import { LogoUpload } from "./LogoUpload";
 import { orgSize, reference } from "../../utils/constants";
 import moment from "moment";
+import { useGlobalServices } from "../../hooks/masterHook/useMaster";
+import SelectMultiple from "../common/SelectMultiple";
 
 const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
   const [logoPreview, setLogoPreview] = useState(null);
   const [logoName, setLogoName] = useState("");
+  const { data: services, isLoading: serviceLoading } = useGlobalServices();
   const {
     register,
     control,
@@ -42,6 +45,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       "industryId",
       "reference",
       "logoImage",
+      "serviceIds",
     ]);
 
     if (valid) {
@@ -53,6 +57,13 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
     }
   };
 
+  useEffect(() => {
+  const logoImage = getValues("logoImage"); 
+  if (logoImage) {
+    setLogoPreview(logoImage); 
+    setLogoName("Uploaded Logo"); 
+  }
+}, [getValues]);
 
 
   return (
@@ -181,7 +192,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="reference">Reference</Label>
+        <Label htmlFor="reference" required>Reference</Label>
         <select
           id="reference"
           className="form-select shadow-none border py-1 px-2 small"
@@ -198,6 +209,20 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         )}
       </div>
 
+      <div className="col-sm-6">
+        <SelectMultiple          
+          name="serviceIds"
+          label="Services"
+          options={services?.data}
+          isLoading={serviceLoading}
+          labelKey="name"
+          valueKey="id"
+        />
+        {errors.serviceIds && (
+          <div className="danger-text">{errors.serviceIds.message}</div>
+        )}
+      </div>
+
 
       <div className="col-sm-12">
         <Label htmlFor="description">Description</Label>

src/components/Tenant/SubScription.jsx

@@ -224,7 +224,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
           </div>
 
           {Object.keys(errors).length > 0 && (
-            <div class="alert alert-danger" role="alert">
+            <div role="alert">
               {Object.entries(errors).map(([key, error]) => (
                 <div key={key} className="danger-text">
                   {error?.message}

src/components/Tenant/TenantFilterPanel.jsx

@@ -38,7 +38,7 @@ const TenantFilterPanel = ({ onApply }) => {
   );
 
 
-  // ✅ Close popup when navigating to another component
+  // Close popup when navigating to another component
   const location = useLocation();
   useEffect(() => {
     handleClosePanel();
@@ -106,13 +106,13 @@ const TenantFilterPanel = ({ onApply }) => {
         <div className="d-flex justify-content-end py-3 gap-2">
           <button
             type="button"
-            className="btn btn-label-secondary btn-xs"
+            className="btn btn-label-secondary btn-sm"
             onClick={onClear}
 
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-xs" >
+          <button type="submit" className="btn btn-primary btn-sm" >
             Apply
           </button>
         </div>

src/components/Tenant/TenantSchema.js

@@ -33,6 +33,7 @@ export const newTenantSchema = z.object({
   organizationSize: z.string().nonempty("Organization size is required"),
   industryId: z.string().uuid("Invalid industry ID"),
   reference: z.string().nonempty("Reference is required"),
+  serviceIds: z.array(z.string()).optional(),
 });
 
 export const tenantDefaultValues = {
@@ -51,13 +52,14 @@ export const tenantDefaultValues = {
   organizationSize: "",
   industryId: "", // should be a valid UUID if pre-filled
   reference: "",
+  serviceIds:[]
 };
 
 
 
 export const getSubscriptionSchema = (minUsers) =>
   z.object({
-    planId: z.string().min(1, { message: "Please select Plan" }),
+    planId: z.string().min(1, { message: "Please select a plan to continue" }),
     currencyId: z.string().uuid("Invalid currency"),
     maxUsers: z
       .number({ invalid_type_error: "Must be a number" })

src/components/common/DatePicker.jsx

@@ -1,14 +1,13 @@
 import { useEffect, useRef } from "react";
 import { useController } from "react-hook-form";
 
-
 const DatePicker = ({
   name,
   control,
   placeholder = "DD-MM-YYYY",
   className = "",
   allowText = false,
-  maxDate,   // removed default new Date()
+  maxDate,
   minDate,
   ...rest
 }) => {
@@ -22,43 +21,43 @@ const DatePicker = ({
   });
 
   useEffect(() => {
-    if (inputRef.current) {
-      flatpickr(inputRef.current, {
-        dateFormat: "d-m-Y",
-        allowInput: allowText,
-        defaultDate: value
-          ? flatpickr.parseDate(value, "Y-m-d")
-          : null,
-        maxDate: maxDate ?? undefined, // only applied if passed
-        minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
-        onChange: function (selectedDates) {
-          if (selectedDates.length > 0) {
-            // store in YYYY-MM-DD
-            const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
-            onChange(formatted);
-          } else {
-            onChange("");
-          }
-        },
-        ...rest
-      });
-    }
+    if (!inputRef.current) return;
+
+    const fp = flatpickr(inputRef.current, {
+      dateFormat: "d-m-Y",
+      allowInput: allowText,
+      defaultDate: value ? new Date(value) : null, // safely convert to Date
+      maxDate: maxDate ? new Date(maxDate) : undefined,
+      minDate: minDate ? new Date(minDate) : undefined,
+      onChange: (selectedDates) => {
+        if (selectedDates.length > 0) {
+          onChange(flatpickr.formatDate(selectedDates[0], "Y-m-d"));
+        } else {
+          onChange("");
+        }
+      },
+      ...rest
+    });
+
+    return () => {
+      fp.destroy(); // clean up on unmount
+    };
   }, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
 
+  const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
+
   return (
-    <div className={` position-relative ${className}`}>
+    <div className={`position-relative ${className}`}>
       <input
         type="text"
-        className="form-control form-control-sm " 
+        className="form-control form-control-sm"
         placeholder={placeholder}
-        defaultValue={
-          value
-            ? flatpickr.formatDate(
-                flatpickr.parseDate(value, "Y-m-d"),
-                "d-m-Y"
-              )
-            : ""
-        }
+        value={displayValue}
+        onChange={(e) => {
+          if (allowText) {
+            onChange(e.target.value); // allow manual typing if enabled
+          }
+        }}
         ref={(el) => {
           inputRef.current = el;
           ref(el);
@@ -70,7 +69,7 @@ const DatePicker = ({
       <span
         className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
         onClick={() => {
-          if (inputRef.current && inputRef.current._flatpickr) {
+          if (inputRef.current?._flatpickr) {
             inputRef.current._flatpickr.open();
           }
         }}

src/components/common/DateRangePicker.jsx

@@ -150,10 +150,20 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-    if (defaultRange && resetSignal !== undefined) {
+  if (resetSignal !== undefined) {
+    if (defaultRange) {
       applyDefaultDates();
+    } else {
+      setValue(startField, "", { shouldValidate: true });
+      setValue(endField, "", { shouldValidate: true });
+
+      if (inputRef.current?._flatpickr) {
+        inputRef.current._flatpickr.clear();
+      }
     }
-  }, [resetSignal, defaultRange]);
+  }
+}, [resetSignal, defaultRange, setValue, startField, endField]);
+
 
   const start = getValues(startField);
   const end = getValues(endField);

src/components/common/HoverPopup.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from "react";
+
+const HoverPopup = ({ title, content, children }) => {
+  const [visible, setVisible] = useState(false);
+  const triggerRef = useRef(null);
+  const popupRef = useRef(null);
+
+  // Toggle on hover or click
+  const handleMouseEnter = () => setVisible(true);
+  const handleClick = () => setVisible((prev) => !prev);
+
+  // Hide on outside click
+  useEffect(() => {
+    const handleDocumentClick = (e) => {
+      if (
+        !popupRef.current?.contains(e.target) &&
+        !triggerRef.current?.contains(e.target)
+      ) {
+        setVisible(false);
+      }
+    };
+
+    if (visible) {
+      document.addEventListener("click", handleDocumentClick);
+    }
+
+    return () => {
+      document.removeEventListener("click", handleDocumentClick);
+    };
+  }, [visible]);
+
+  return (
+    <div
+      className="d-inline-block position-relative"
+      ref={triggerRef}
+      onMouseEnter={handleMouseEnter}
+      onClick={handleClick}
+      style={{ cursor: "pointer" }}
+    >
+      {children}
+
+      {visible && (
+        <div
+          ref={popupRef}
+          className="bg-white border rounded shadow-sm py-1 px-2 text-start text-lowercase"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 1050,
+            minWidth: "220px",
+            marginTop: "8px",
+          }}
+        >
+          {title && <h6 className="mb-2 text-capitalize">{title}</h6>}
+          <div className="text-capitalize">{content}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HoverPopup;
+

src/components/common/SelectMultiple.jsx

@@ -8,25 +8,24 @@ const SelectMultiple = ({
   name,
   options = [],
   label = "Select options",
-  labelKey = "name",
+  labelKey = "name", 
   valueKey = "id",
   placeholder = "Please select...",
-  IsLoading = false,
-  required = false
+  IsLoading = false,required = false
 }) => {
-  const { setValue, watch } = useFormContext();
-  const selectedValues = watch(name) || [];
+  const { setValue, watch,register } = useFormContext();
+  useEffect(() => {
+  register(name, { value: [] });
+}, [register, name]);
+
+const selectedValues = watch(name) || [];
 
   const [isOpen, setIsOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const containerRef = useRef(null);
   const dropdownRef = useRef(null);
 
-  const [dropdownStyles, setDropdownStyles] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
+  const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
 
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -65,10 +64,14 @@ const SelectMultiple = ({
     setValue(name, updated, { shouldValidate: true });
   };
 
-  const filteredOptions = options.filter((item) => {
-    const label = getLabel(item);
-    return label?.toLowerCase().includes(searchText.toLowerCase());
-  });
+  const filteredOptions = (options || []).filter((item) => {
+  const label = getLabel(item);
+  return (
+    typeof label === "string" &&
+    label.toLowerCase().includes(searchText.toLowerCase())
+  );
+});
+
 
   const dropdownElement = (
     <div
@@ -106,14 +109,8 @@ const SelectMultiple = ({
         return (
           <div
             key={valueVal}
-            className={`multi-select-dropdown-option ${
-              isChecked ? "selected" : ""
-            }`}
-            style={{
-              display: "flex",
-              alignItems: "center",
-              padding: "4px 8px",
-            }}
+            className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
+            style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
           >
             <input
               type="checkbox"
@@ -142,13 +139,9 @@ const SelectMultiple = ({
 
   return (
     <>
-      <div
-        ref={containerRef}
-        className="multi-select-dropdown-container"
-        style={{ position: "relative" }}
-      >
-      <Label required={required}>{label}</Label>
-
+      <div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
+        <label className="form-label mb-1">{label}</label>
+        <Label className={name} required={required}></Label>
 
         <div
           className="multi-select-dropdown-header"
@@ -157,9 +150,7 @@ const SelectMultiple = ({
         >
           <span
             className={
-              selectedValues.length > 0
-                ? "placeholder-style-selected"
-                : "placeholder-style"
+              selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
             }
           >
             <div className="selected-badges-container">
@@ -168,10 +159,7 @@ const SelectMultiple = ({
                   const found = options.find((opt) => opt[valueKey] === val);
                   const label = found ? getLabel(found) : "";
                   return (
-                    <span
-                      key={val}
-                      className="badge badge-selected-item mx-1 mb-1"
-                    >
+                    <span key={val} className="badge badge-selected-item mx-1 mb-1">
                       {label}
                     </span>
                   );

src/components/master/EditActivity.jsx

@@ -1,258 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useForm, useFieldArray } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { MasterRespository } from "../../repositories/MastersRepository";
-import showToast from "../../services/toastService";
-import { getCachedData, cacheData } from "../../slices/apiDataManager";
-import { useUpdateActivity } from "../../hooks/masterHook/useMaster";
-import Label from "../common/Label";
-
-
-const schema = z.object({
-  activityName: z.string().min(1, { message: "Activity name is required" }),
-  unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }),
-  checkList: z
-    .array(
-      z.object({
-        id: z.any().default(null),
-        description: z.string().min(1, { message: "Checklist item cannot be empty" }),
-        isMandatory: z.boolean().default(false),
-      })
-    )
-    .optional(),
-});
-
-
-const UpdateActivity = ({ activityData, onClose }) => {
-  const { mutate: updateActivity, isPending: isLoading } = useUpdateActivity(() => onClose?.());
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    setValue,
-    reset,
-    setError,
-    clearErrors,
-    getValues,
-    formState: { errors },
-  } = useForm({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      id: activityData?.id,
-      activityName: activityData?.activityName,
-      unitOfMeasurement: activityData?.unitOfMeasurement,
-      checkList: activityData?.checkLists || [],
-    },
-  });
-
-  const { fields: checkListItems, append, remove } = useFieldArray({
-    control,
-    name: "checkList",
-  });
-
-  useEffect(() => {
-    if (activityData) {
-      reset({
-        id: activityData.id,
-        activityName: activityData.activityName,
-        unitOfMeasurement: activityData.unitOfMeasurement,
-        checkList: activityData.checkLists || [],
-      });
-    }
-  }, [activityData, reset]);
-
-  const addChecklistItem = () => {
-    const values = getValues("checkList");
-    const lastIndex = checkListItems.length - 1;
-
-    if (
-      checkListItems.length > 0 &&
-      (!values?.[lastIndex] || values[lastIndex].description.trim() === "")
-    ) {
-      setError(`checkList.${lastIndex}.description`, {
-        type: "manual",
-        message: "Please fill this checklist item before adding another.",
-      });
-      return;
-    }
-
-    clearErrors(`checkList.${lastIndex}.description`);
-    append({ id: null, description: "", isMandatory: false });
-  };
-
-  const removeChecklistItem = (index) => {
-    remove(index);
-  };
-
-  const handleChecklistChange = (index, value) => {
-    setValue(`checkList.${index}`, value);
-  };
-
-  const onSubmit = (formData) => {
-    const payload = { ...formData, id: activityData.id };
-    updateActivity({ id: activityData.id, payload });
-  };
-  // const onSubmit = async(data) => {
-  //   setIsLoading(true);
-
-  //   const Activity = {...data, id:activityData.id}
-  //   try
-  //   {
-  //     const response = await MasterRespository.updateActivity( activityData?.id, Activity );
-  //     const updatedActivity = response.data;
-  //     const cachedData = getCachedData("Activity")
-
-  //     if (cachedData) {
-  //       const updatedActivities = cachedData.map((activity) =>
-  //         activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
-  //       );
-
-  //       cacheData( "Activity", updatedActivities );
-  //       onClose()
-  //     }
-  //     setIsLoading( false )
-  //     showToast("Activity Successfully Updated", "success");
-  //   } catch ( err )
-  //   {
-  //     setIsLoading( false )
-
-  //     showToast("error.message", "error");
-  //   }
-  // };
-
-  useEffect(() => {
-    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
-  }, []);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {/* <h6>Update Activity</h6> */}
-      <div className="row">
-        {/* Activity Name */}
-        <div className="col-md-6 text-start">
-          <Label className="form-label" required>Activity Name</Label>
-          <input
-            type="text"
-            {...register("activityName")}
-            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
-          />
-          {errors.activityName && (
-            <div className="text-danger">{errors.activityName.message}</div>
-          )}
-        </div>
-
-        {/* Unit of Measurement */}
-        <div className="col-md-6 text-start">
-          <Label className="form-label" required>Measurement</Label>
-          <input
-            type="text"
-            {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
-          />
-          {errors.unitOfMeasurement && (
-            <div className="text-danger">{errors.unitOfMeasurement.message}</div>
-          )}
-        </div>
-
-        {/* Checklist */}
-        <div className="col-md-12 text-start mt-1">
-          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
-          {checkListItems.length > 0 && (
-            <table className="table mt-1  border-0">
-              <thead className="py-0 my-0 table-border-top-0">
-                <tr className="py-1">
-                  <th colSpan={2} className="py-1">
-                    <small>Name</small>
-                  </th>
-                  <th colSpan={2} className="py-1 text-center">
-                    <small>Is Mandatory</small>
-                  </th>
-                  <th className="text-center py-1">Action</th>
-                </tr>
-              </thead>
-              <tbody>
-                {checkListItems.map((item, index) => (
-                  <tr key={item.id} className="border-top-0">
-                    <td colSpan={2} className=" border-0">
-                      <input
-                        className="d-none"
-                        {...register(`checkList.${index}.id`)}
-                      ></input>
-                      <input
-                        {...register(`checkList.${index}.description`)}
-                        className="form-control form-control-sm"
-                        placeholder={`Checklist item ${index + 1}`}
-                        onChange={(e) =>
-                          handleChecklistChange(index, e.target.value)
-                        }
-                      />
-                      {errors.checkList?.[index]?.description && (
-                        <small
-                          style={{ fontSize: "10px" }}
-                          className="danger-text"
-                        >
-                          {errors.checkList[index]?.description?.message}
-                        </small>
-                      )}
-                    </td>
-                    <td colSpan={2} className="text-center border-0">
-                      <input
-                        className="form-check-input"
-                        type="checkbox"
-                        {...register(`checkList.${index}.isMandatory`)}
-                        defaultChecked={item.isMandatory}
-                      />
-                    </td>
-                    <td className="text-center border-0">
-                      <button
-                        type="button"
-                        onClick={() => removeChecklistItem(index)}
-                        className="btn btn-xs btn-icon btn-text-secondary"
-
-                      >
-                        <i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
-                          title="Add Check"
-                          data-bs-original-title="Add check"  ></i>
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-
-
-          <button
-            type="button"
-            className="btn btn-xs btn-primary mt-2"
-            onClick={addChecklistItem}
-          >
-            <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
-              title="Add Check"
-              data-bs-original-title="Add check" ></i>
-          </button>
-        </div>
-
-        {/* Submit / Cancel */}
-        <div className="col-12 text-end mt-3">
-          <button
-            type="button"
-            className="btn btn-sm btn-label-secondary me-3"
-            onClick={onClose}
-          >
-            Cancel
-          </button>
-          <button type="submit" className="btn btn-sm btn-primary">
-            {isLoading ? "Please Wait" : "Submit"}
-          </button>
-
-        </div>
-      </div>
-    </form>
-  );
-};
-
-export default UpdateActivity;

src/components/master/MasterModal.jsx

@@ -3,8 +3,6 @@ import CreateRole from "./CreateRole";
 import EditRole from "./EditRole";
 import CreateJobRole from "./CreateJobRole";
 import EditJobRole from "./EditJobRole";
-import CreateActivity from "./CreateActivity";
-import EditActivity from "./EditActivity";
 import CreateWorkCategory from "./CreateWorkCategory";
 import EditWorkCategory from "./EditWorkCategory";
 import CreateCategory from "./CreateContactCategory";
@@ -17,6 +15,7 @@ import ManageExpenseStatus from "./ManageExpenseStatus";
 import ManageDocumentCategory from "./ManageDocumentCategory";
 import ManageDocumentType from "./ManageDocumentType";
 import ManageServices from "./Services/ManageServices";
+import ServiceGroups from "./Services/ServicesGroups";
 
 const MasterModal = ({ modaldata, closeModal }) => {
   if (!modaldata?.modalType || modaldata.modalType === "delete") {
@@ -34,9 +33,7 @@ const MasterModal = ({ modaldata, closeModal }) => {
       <EditRole master={modaldata} onClose={closeModal} />
     ),
     "Job Role": <CreateJobRole onClose={closeModal} />,
-    "Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
-    "Activity": <CreateActivity onClose={closeModal} />,
-    "Edit-Activity": <EditActivity activityData={item} onClose={closeModal} />,
+    "Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,   
     "Work Category": <CreateWorkCategory onClose={closeModal} />,
     "Edit-Work Category": <EditWorkCategory data={item} onClose={closeModal} />,
     "Contact Category": <CreateCategory data={item} onClose={closeModal} />,
@@ -67,6 +64,9 @@ const MasterModal = ({ modaldata, closeModal }) => {
     "Edit-Services": (
       <ManageServices data={item} onClose={closeModal} />
     ),
+    "Manage-Services": (
+      <ServiceGroups service={item} onClose={closeModal}/>
+    ),
   };
 
   return modalComponents[modalType] || null;

src/components/master/Services/ManageActivity.jsx

@@ -3,20 +3,23 @@ import { useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import { MasterRespository } from "../../repositories/MastersRepository";
-import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-import { getCachedData, cacheData } from "../../slices/apiDataManager";
-import showToast from "../../services/toastService";
-import { useCreateActivity } from "../../hooks/masterHook/useMaster";
-import Label from "../common/Label";
+import {
+  useCreateActivity,
+  useUpdateActivity,
+} from "../../../hooks/masterHook/useMaster";
+import Label from "../../common/Label";
 
 const schema = z.object({
   activityName: z.string().min(1, { message: "Activity Name is required" }),
-  unitOfMeasurement: z.string().min(1, { message: "Unit of Measurement is required" }),
+  unitOfMeasurement: z
+    .string()
+    .min(1, { message: "Unit of Measurement is required" }),
   checkList: z
     .array(
       z.object({
-        description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
+        description: z
+          .string()
+          .min(1, { message: "descriptionlist item cannot be empty" }),
         isMandatory: z.boolean().default(false),
         id: z.any().default(null),
       })
@@ -24,9 +27,14 @@ const schema = z.object({
     .optional(),
 });
 
-const CreateActivity = ({ onClose }) => {
+const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
   const maxDescriptionLength = 255;
-  const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
+  const { mutate: createActivity, isPending: isLoading } = useCreateActivity(
+    () => close?.()
+  );
+  const { mutate: UpdateActivity, isPending: isUpdating } = useUpdateActivity(
+    () => close?.()
+  );
 
   const {
     register,
@@ -75,82 +83,107 @@ const CreateActivity = ({ onClose }) => {
     append({ id: null, description: "", isMandatory: false });
   }, [checkListItems, getValues, append, setError, clearErrors]);
 
-  const removeChecklistItem = useCallback((index) => {
-    remove(index);
-  }, [remove]);
+  const removeChecklistItem = useCallback(
+    (index) => {
+      remove(index);
+    },
+    [remove]
+  );
 
-  const handleChecklistChange = useCallback((index, value) => {
-    setValue(`checkList.${index}`, value);
-  }, [setValue]);
+  const handleChecklistChange = useCallback(
+    (index, value) => {
+      setValue(`checkList.${index}`, value);
+    },
+    [setValue]
+  );
 
   const onSubmit = (formData) => {
-    createActivity(formData);
+    let payload = {
+      ...formData,
+      activityGroupId: whichGroup,
+    };
+    if (activity) {
+      UpdateActivity({ id: activity.id, payload: payload });
+    } else {
+      createActivity(payload);
+    }
   };
-  // const onSubmit = (data) => {
-  //   setIsLoading(true);
-
-  //   MasterRespository.createActivity(data)
-  //     .then( ( resp ) =>
-  //     {
-
-  //       const cachedData = getCachedData("Activity");
-  //       const updatedData = [ ...cachedData, resp?.data ];
-  //       cacheData("Activity", updatedData);
-  //       showToast("Activity Successfully Added.", "success");
-  //       setIsLoading(false);
-  //       handleClose()
-  //     })
-  //     .catch((error) => {
-  //       showToast(error.message, "error");
-  //       setIsLoading(false);
-  //     });
-  // };
-  const handleClose = useCallback(() => {
-    reset();
-    onClose();
-  }, [reset, onClose]);
 
   useEffect(() => {
-    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    if (activity) {
+      reset({
+        activityName: activity.activityName || "",
+        unitOfMeasurement: activity.unitOfMeasurement || "",
+        checkList: activity.checkLists?.map((check) => ({
+          id: check.id || null, // Use the ID provided in the checklist
+          description: check.description || "",
+          isMandatory: check.isMandatory || false,
+        })) || [{ description: "", isMandatory: false }], // Default to an empty checklist item
+      });
+    }
+  }, [activity, reset]);
+  const handleClose = useCallback(() => {
+    reset();
+    close();
+  }, [reset, close]);
+
+  useEffect(() => {
+    const tooltipTriggerList = Array.from(
+      document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
-
+  let isPending = isLoading || isUpdating;
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onSubmit)} className="px-7">
       {/* <h6>Create Activity</h6> */}
-      <div className="row">
-        <div className="col-6 text-start">
-          <Label className="form-label" required>Activity</Label>
+      <div className="row border border-1 border-secondary rounded-3 mt-2">
+        <div className="col-6 text-start mt-3">
+          <Label className="form-label" required>
+            Activity
+          </Label>
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
-              }`}
+            className={`form-control form-control-sm ${
+              errors.activityName ? "is-invalid" : ""
+            }`}
           />
           {errors.activityName && (
             <p className="danger-text">{errors.activityName.message}</p>
           )}
         </div>
 
-        <div className="col-6 text-start">
-          <Label className="form-label" required>Measurement</Label>
+        <div className="col-6 text-start mt-3">
+          <Label className="form-label" required>
+            Measurement
+          </Label>
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
-              }`}
+            className={`form-control form-control-sm ${
+              errors.unitOfMeasurement ? "is-invalid" : ""
+            }`}
           />
           {errors.unitOfMeasurement && (
             <p className="danger-text">{errors.unitOfMeasurement.message}</p>
           )}
         </div>
 
-        <div className="col-md-12 text-start mt-1">
-          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
-          {checkListItems.length > 0 && (
-            <table className="table mt-1  border-0">
-              <thead className="py-0 my-0 table-border-top-0">
-                <tr className="py-1">
+        <div className="col-md-12 text-start mt-3">
+          <label className="py-1 form-label my-0">
+            Add Check List <i
+              className="bx bx-plus-circle text-primary cursor-pointer"
+              data-bs-toggle="tooltip"
+              title="Add Check"
+              data-bs-original-title="Add check"
+               onClick={addChecklistItem}
+            ></i>
+          </label>
+          {checkListItems.length > 0 ? (
+            <table className="table mt-1  border-none">
+              <thead className="py-0 my-0  border-none  ">
+                <tr className="py-1 border-secondary ">
                   <th colSpan={2} className="py-1">
                     <small>Name</small>
                   </th>
@@ -160,10 +193,10 @@ const CreateActivity = ({ onClose }) => {
                   <th className="text-center py-1">Action</th>
                 </tr>
               </thead>
-              <tbody className="table-border-bottom-0 ">
+              <tbody className="table-border-bottom-0 border-secondary ">
                 {checkListItems.map((item, index) => (
-                  <tr key={index} className="border-top-0">
-                    <td colSpan={2} className="border-top-0 border-0">
+                  <tr key={index}>
+                    <td colSpan={2} className="border-none" >
                       <input
                         className="d-none"
                         {...register(`checkList.${index}.id`)}
@@ -185,7 +218,7 @@ const CreateActivity = ({ onClose }) => {
                         </small>
                       )}
                     </td>
-                    <td colSpan={2} className="text-center border-0">
+                    <td colSpan={2} className="text-center border-none">
                       <input
                         className="form-check-input"
                         type="checkbox"
@@ -193,49 +226,44 @@ const CreateActivity = ({ onClose }) => {
                         defaultChecked={item.isMandatory}
                       />
                     </td>
-                    <td className="text-center border-0">
+                    <td className="text-center border-none">
                       <button
                         type="button"
                         onClick={() => removeChecklistItem(index)}
                         className="btn btn-xs btn-icon btn-text-secondary"
                       >
-                        <i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
+                        <i
+                          className="bx bxs-minus-circle text-danger"
+                          data-bs-toggle="tooltip"
                           title="Remove Check"
-                          data-bs-original-title="Remove check"></i>
+                          data-bs-original-title="Remove check"
+                        ></i>
                       </button>
                     </td>
                   </tr>
                 ))}
               </tbody>
             </table>
-          )}
-          <button
-            type="button"
-            className="btn btn-xs btn-primary mt-2"
-            onClick={addChecklistItem}
-          >
-            <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
-              title="Add Check"
-              data-bs-original-title="Add check" ></i>
-          </button>
+          ):(<div className="d-flex justify-content-center my-0"><p className="text-secondary m-0">Not Yet Added</p> </div>)}
+        
         </div>
 
-        <div className="col-12 text-end mt-3">
+        <div className="col-12 text-end mt-3 mb-4">
           <button
             type="reset"
             className="btn btn-sm btn-label-secondary me-3"
             onClick={handleClose}
+            disabled={isPending}
           >
             Cancel
           </button>
           <button type="submit" className="btn btn-sm btn-primary">
-            {isLoading ? "Please Wait" : "Submit"}
+            {isPending ? "Please Wait" : activity ? "Update" : "Submit"}
           </button>
-
         </div>
       </div>
     </form>
   );
 };
 
-export default CreateActivity;
+export default ManageActivity;

src/components/master/Services/ManageGroup.jsx

@@ -0,0 +1,110 @@
+import { useForm } from "react-hook-form";
+import {
+  useCreateActivityGroup,
+  useUpdateActivityGroup,
+} from "../../../hooks/masterHook/useMaster";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ActivityGroupSchema } from "./ServicesSchema";
+import Label from "../../common/Label";
+import { useEffect } from "react";
+
+const ManageGroup = ({ group = null, whichService = null, close }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(ActivityGroupSchema),
+    defaultValues: { name: "", description: "" },
+  });
+  const { mutate: createGroup, isPending: isCreating } = useCreateActivityGroup(
+    () => close()
+  );
+  const { mutate: UpdateGroup, isPending: isUpdating } = useUpdateActivityGroup(
+    () => close()
+  );
+
+  useEffect(() => {
+    if (group) {
+      reset({
+        name: group.name || " ",
+        description: group.description || "",
+      });
+    }
+  }, [group, reset]);
+  const onSubmit = (formdata) => {
+    if (group) {
+      let payload = {
+        ...formdata,
+        serviceId: whichService,
+        id: group.id,
+      };
+      UpdateGroup({ id: group.id, payload: payload });
+    } else {
+      let payload = {
+        ...formdata,
+        serviceId: whichService,
+      };
+
+      createGroup(payload);
+    }
+  };
+
+  let isPending = isCreating || isUpdating;
+  return (
+    <form className="row px-12" onSubmit={handleSubmit(onSubmit)} >
+      <div className="border border-1 border-secondary rounded-3 p-2 mt-2">
+        <div className="col-12 col-md-12 text-start">
+          <Label className="form-label" required>
+            Group Name
+          </Label>
+          <input
+            type="text"
+            {...register("name")}
+            className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""
+              }`}
+          />
+          {errors.name && (
+            <p className="danger-text m-0">{errors.name.message}</p>
+          )}
+        </div>
+        <div className="col-12 col-md-12 text-start mb-2">
+          <Label className="form-label" htmlFor="description" required>
+            Description
+          </Label>
+          <textarea
+            rows="3"
+            {...register("description")}
+            className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""
+              }`}
+          ></textarea>
+
+          {errors.description && (
+            <p className="danger-text m-0">{errors.description.message}</p>
+          )}
+        </div>
+
+        <div className="col-12 text-end mt-5">
+          <button
+            className="btn btn-sm btn-label-secondary me-3"
+            aria-label="Close"
+            disabled={isPending}
+            onClick={close}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-sm btn-primary"
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : group ? "Update" : "Submit"}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default ManageGroup;

src/components/master/Services/ServicesGroups.jsx

@@ -0,0 +1,263 @@
+import { useState } from "react";
+import {
+  useActivitiesByGroups,
+  useGroups,
+} from "../../../hooks/masterHook/useMaster";
+import ManageGroup from "./ManageGroup";
+import ManageActivity from "./ManageActivity";
+import { useMasterContext } from "../../../pages/master/MasterPage";
+const ServiceGroups = ({ service }) => {
+  const [openService, setOpenService] = useState(true);
+  const [activeGroupId, setActiveGroupId] = useState(null); // track selected group
+  const {setDeleletingServiceItem}  =useMasterContext()
+  const [isManageGroup, setManageGroup] = useState({
+    isOpen: false,
+    group: null,
+    serviceId: null,
+  });
+  const [isManageActivity, setManageActivity] = useState({
+    isOpen: false,
+    activity: null, // activity is either a single activity for editing or null for creating new activity
+    groupId: null, // groupId for managing activities in specific groups
+  });
+
+  // Fetch groups and activities data
+  const { data: groups, isLoading } = useGroups(service?.id); // Fetch groups for the service
+  const { data: activities, isLoading: actLoading } =
+    useActivitiesByGroups(activeGroupId); // Fetch activities based on activeGroupId
+
+  if (isLoading) return <div>Loading groups...</div>; // Show loading state while groups are being fetched
+
+  // Handle toggling of group to view activities
+  const toggleGroup = (groupId) => {
+    setActiveGroupId((prev) => (prev === groupId ? null : groupId)); // If the same group is clicked again, close it
+  };
+
+  return (
+
+    <div className="w-100 my-2">
+      
+      <p className="fs-5 fw-semibold">Manage Service</p>
+      <div className="accordion" id="accordionExample">
+        <div className="accordion-item active shadow-none">
+          {/* Service Header */}
+          <div className="d-flex justify-content-between text-start align-items-center accordion-header py-1">
+            <p className="m-0 fw-bold fs-6">{service.name}</p>
+            <button
+              className="btn btn-sm btn-primary"
+              onClick={() =>
+                setManageGroup({
+                  isOpen: true,
+                  group: null, // No group selected, for creating a new group
+                  serviceId: service.id,
+                })
+              }
+            >
+              <i className="bx bx-plus-circle me-2"></i>Add Group
+            </button>
+          </div>
+
+          {/* Groups Section */}
+          <div
+            id="accordionOne"
+            className={`accordion-collapse collapse ${
+              openService ? "show" : ""
+            }`}
+            aria-labelledby="headingOne"
+            data-bs-parent="#accordionExample"
+          >
+            {/* Show ManageGroup for creating a new group */}
+            {isManageGroup.isOpen && isManageGroup.group === null ? (
+              <ManageGroup
+                group={null} // Indicating new group creation
+                whichService={isManageGroup.serviceId}
+                close={() =>
+                  setManageGroup({
+                    isOpen: false,
+                    group: null,
+                    serviceId: service.id,
+                  })
+                }
+              />
+            ) : (
+              <div className="accordion-body text-start m-0 p-0">
+                <div className="dropdown-divider border"></div>
+
+                {groups?.data?.map((group) => {
+                  const isOpen = activeGroupId === group.id;
+
+                  return (
+                    <div
+                      className="accordion-item shadow-none m-0 py-2 px-2"
+                      key={group.id}
+                    >
+                      <div className="d-flex justify-content-between text-start accordion-header">
+                        {/* Show group toggle button only if ManageGroup is not open */}
+                        <div className="d-flex gap-1 align-items-center">
+                          {!isManageGroup.isOpen && (
+                            <span
+                              onClick={() => toggleGroup(group.id)}
+                              className="text-end cursor-pointer"
+                              data-bs-toggle="collapse"
+                              data-bs-target={`#accordionGroup${group.id}`}
+                              aria-expanded={isOpen}
+                              aria-controls={`accordionGroup${group.id}`}
+                            >
+                              <i
+                                className={`bx bx-lg ${
+                                  isOpen ? "bx-chevron-up" : "bx-chevron-down"
+                                }`}
+                              />
+                            </span>
+                          )}
+                          <p className="m-0 fw-bold ">{group.name}</p>
+                        </div>
+                        <div className="d-flex flex-row gap-3">
+                          <div className="d-flex flex-row gap-2">
+                            {/* Create New Activity */}
+                            <i
+                              className="bx bx-plus-circle text-primary cursor-pointer"
+                              onClick={() => {
+                                setManageActivity({
+                                  isOpen: true,
+                                  activity: null, // Indicating new activity creation
+                                  groupId: group.id, // Set the groupId for the new activity
+                                });
+                              }}
+                            />
+                            {/* Edit Group */}
+                            <i
+                              className="bx bx-edit text-secondary cursor-pointer"
+                              onClick={() =>
+                                setManageGroup({
+                                  isOpen: true,
+                                  group: group, // Group selected for Editing
+                                  serviceId: service.id,
+                                })
+                              }
+                            />
+                            {/* Delete Group */}
+                            <i className="bx bx-trash text-danger cursor-pointer" onClick={()=>setDeleletingServiceItem({isOpen:true,ItemId:group.id,whichItem:"group"})} />
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Only show ManageGroup for the specific group if it's open */}
+                      {isManageGroup.isOpen &&
+                      isManageGroup.group?.id === group.id ? (
+                        <ManageGroup
+                          group={group} // For editing
+                          whichService={isManageGroup.serviceId}
+                          close={() =>
+                            setManageGroup({
+                              isOpen: false,
+                              group: null,
+                              serviceId: null,
+                            })
+                          }
+                        />
+                      ) : isManageActivity.isOpen &&
+                        isManageActivity.groupId === group.id ? (
+                        <ManageActivity
+                          activity={isManageActivity.activity} // Pass the activity object for editing
+                          whichGroup={group.id} // Set groupId for creating/editing activity
+                          close={() => {
+                            setManageActivity({
+                              isOpen: false,
+                              activity: null,
+                              groupId: null,
+                            });
+                          }}
+                        />
+                      ) : (
+                        <div
+                          id={`accordionGroup${group.id}`}
+                          className={`accordion-collapse collapse ${
+                            isOpen ? "show" : ""
+                          }`}
+                          aria-labelledby={group.id}
+                          data-bs-parent="#accordionOne"
+                        >
+                          <div className="accordion-body ">
+                            {isOpen && actLoading && (
+                              <p className="text-center m-0">
+                                Loading activities...
+                              </p>
+                            )}
+
+                            {isOpen && activities?.data?.length > 0 ? (
+                              <div className="row border-top-2">
+                                {/* Header Row */}
+                                <div className="col-12 d-flex justify-content-between py-2 border-bottom px-4">
+                                  <span className="fw-semibold text-uppercase">
+                                    Activity Name
+                                  </span>
+                                  <span className="fw-semibold text-uppercase">
+                                    Unit of Measurement
+                                  </span>
+                                  <span className="fw-semibold text-uppercase">
+                                    Action
+                                  </span>
+                                </div>
+
+                                {/* Map through activities */}
+                                {activities.data.map((activity) => (
+                                  <div
+                                    className="col-12 d-flex justify-content-between py-2 "
+                                    key={activity.id}
+                                  >
+                                    {/* Activity Name Column */}
+                                    <div className="col d-flex justify-content-start">
+                                      <span>{activity.activityName}</span>
+                                    </div>
+
+                                    {/* Unit of Measurement Column */}
+                                    <div className="col d-flex justify-content-start">
+                                      <span>{activity.unitOfMeasurement}</span>
+                                    </div>
+
+                                    {/* Action Column */}
+                                    <div className="col-auto d-flex gap-3 justify-content-end">
+                                      {/* Edit Activity */}
+                                      <i
+                                        className="bx bx-sm bx-edit text-secondary cursor-pointer"
+                                        onClick={() => {
+                                          setManageActivity({
+                                            isOpen: true,
+                                            activity: activity, // Pass the specific activity for editing
+                                            groupId: group.id, // Set groupId for the specific activity
+                                          });
+                                        }}
+                                      />
+                                      {/* Delete Activity */}
+                                      <i
+                                        className="bx bx-sm bx-trash text-danger cursor-pointer"
+                                        onClick={() => setDeleletingServiceItem({isOpen:true,ItemId:activity.id,whichItem:"activity"})}
+                                      />
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+                            ) : (
+                              isOpen && (
+                                <p className="text-center m-0">
+                                  No activities found
+                                </p>
+                              )
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ServiceGroups;

src/components/master/Services/ServicesSchema.js

@@ -6,4 +6,12 @@ const schema = z.object({
     .string()
     .min(1, { message: "Description is required" })
     .max(255, { message: "Description cannot exceed 255 characters" }),
+});
+
+export const ActivityGroupSchema = z.object({
+  name: z.string().min(1, { message: "Group Name is required" }),
+  description: z
+    .string()
+    .min(1, { message: "Description is required" })
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 });

src/hooks/useAuth.jsx

@@ -12,6 +12,7 @@ import {
   closeAuthModal,
   openAuthModal,
 } from "../slices/localVariablesSlice.jsx";
+import { removeSession } from "../utils/authUtils.js";
 
 export const useTenants = () => {
   return useQuery({
@@ -28,18 +29,24 @@ export const useSelectTenant = (onSuccessCallBack) => {
       const res = await AuthRepository.selectTenant(tenantId);
       return res.data;
     },
-    
+
     onSuccess: (data) => {
-      localStorage.setItem("jwtToken", data.token);
-      localStorage.setItem("refreshToken", data.refreshToken);
+      if (localStorage.getItem("jwtToken")) {
+        localStorage.setItem("jwtToken", data.token);
+        localStorage.setItem("refreshToken", data.refreshToken);
+      } else {
+        sessionStorage.setItem("jwtToken", data.token);
+        sessionStorage.setItem("refreshToken", data.refreshToken);
+      }
+
       if (onSuccessCallBack) onSuccessCallBack();
     },
 
     onError: (error) => {
       showToast(error.message || "Error while creating project", "error");
       localStorage.removeItem("jwtToken");
-      localStorage.removeItem("refreshToken")
-      localStorage.removeItem("ctnt")
+      localStorage.removeItem("refreshToken");
+      localStorage.removeItem("ctnt");
     },
   });
 };
@@ -55,29 +62,26 @@ export const useAuthModal = () => {
   };
 };
 
-export const useLogout = ()=>{
+
+export const useLogout = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async () => {
-      let payload = {refreshToken: localStorage.getItem("refreshToken")}
-     return await AuthRepository.logout(payload);
+      let payload = { refreshToken: localStorage.getItem("refreshToken") || sessionStorage.getItem("refreshToken") };
+      return await AuthRepository.logout(payload);
     },
-    
+
     onSuccess: (data) => {
-              localStorage.removeItem("jwtToken");
-              localStorage.removeItem("refreshToken");
-              localStorage.removeItem("ctnt");
-              localStorage.clear();
-              window.location.href = "/auth/login";
+      removeSession()
+
+      window.location.href = "/auth/login";
       if (onSuccessCallBack) onSuccessCallBack();
     },
 
     onError: (error) => {
       showToast(error.message || "Error while creating project", "error");
-      localStorage.removeItem("jwtToken");
-      localStorage.removeItem("refreshToken")
-      localStorage.removeItem("ctnt")
+      removeSession()
     },
   });
-}
+};

src/hooks/useDirectory.js

@@ -399,11 +399,13 @@ export const useUpdateBucket = (onSuccessCallBack) => {
     mutationFn: async ({ bucketId, BucketPayload }) =>
       await DirectoryRepository.UpdateBuckets(bucketId, BucketPayload),
     onSuccess: (_, variables) => {
+      debugger;
       queryClient.invalidateQueries({ queryKey: ["bucketList"] });
       showToast("Bucket updated successfully", "success");
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
+      debugger;
       showToast(
         error?.response?.data?.message ||
           "Something went wrong. Please try again later.",

src/hooks/useEmployees.js

@@ -221,7 +221,7 @@ export const useUpdateEmployee = () => {
     mutationFn: (employeeData) =>
       EmployeeRepository.manageEmployee(employeeData),
     onSuccess: (_, variables) => {
-      const id = variables.id || variables.employeeId;
+      const id = variables?.id || variables?.employeeId;
       const isAllEmployee = variables.IsAllEmployee;
 
       // Cache invalidation

src/hooks/useOrganization.js

@@ -35,6 +35,18 @@ export const useOrganizationModal = () => {
   };
 };
 
+// ================================Query=============================================================
+
+export const useOrganization=(id)=>{
+return useQuery({
+  queryKey:["organization",id],
+  queryFn:async()=> {
+    const resp = await await OrganizationRepository.getOrganizaion(id);
+    return resp.data
+  },
+  enabled:!!id
+})
+}
 export const useOrganizationBySPRID = (sprid) => {
   return useQuery({
     queryKey: ["organization by", sprid],
@@ -76,6 +88,25 @@ export const useOrganizationsList = (
   });
 };
 
+export const useOrganizationEmployees = (
+  projectId,
+  organizationId,
+  searchString
+) => {
+  return useQuery({
+    queryKey: ["OrgEmployees", projectId, organizationId, searchString],
+    queryFn: async () =>
+      await OrganizationRepository.getOrganizationEmployees(
+        projectId,
+        organizationId,
+        searchString
+      ),
+    enabled: !!projectId ,
+  });
+};
+
+// =================================Mutation========================================================
+
 export const useCreateOrganization = (onSuccessCallback) => {
   const useClient = useQueryClient();
   return useMutation({
@@ -103,9 +134,13 @@ export const useAssignOrgToProject = (onSuccessCallback) => {
     mutationFn: async (payload) =>
       await OrganizationRepository.assignOrganizationToProject(payload),
     onSuccess: (_, variables) => {
+      const { projectId } = variables;
       useClient.invalidateQueries({
         queryKey: ["projectAssignedOrganiztions"],
       });
+      useClient.invalidateQueries({
+        queryKey: ["projectAssignedOrganization", projectId],
+      });
       showToast("Organization  successfully", "success");
       if (onSuccessCallback) onSuccessCallback();
     },
@@ -139,14 +174,14 @@ export const useAssignOrgToTenant = (onSuccessCallback) => {
     },
   });
 };
-export const useUpdateOrganization = () => {
+export const useUpdateOrganization = (onSuccessCallback) => {
   const useClient = useQueryClient();
   return useMutation({
-    mutationFn: async (payload) =>
-      await OrganizationRepository.assignOrganizationToProject(payload),
+    mutationFn: async ({orgId,payload}) =>
+      await OrganizationRepository.updateOrganizaion(orgId,payload),
     onSuccess: (_, variables) => {
-      // useClient.invalidateQueries({ queryKey: ["organizationList"] });
-      showToast("Organization  successfully", "success");
+      useClient.invalidateQueries({ queryKey: ["organizationList"] });
+      showToast("Organization Updated successfully", "success");
       if (onSuccessCallback) onSuccessCallback();
     },
     onError: (error) => {

src/hooks/useProjectAccess.js

@@ -6,21 +6,24 @@ import { VIEW_PROJECTS } from "../utils/constants";
 import showToast from "../services/toastService";
 
 export const useProjectAccess = (projectId) => {
+  const navigate = useNavigate();
+
   const { data: projectPermissions, isLoading, isFetched } =
     useAllProjectLevelPermissions(projectId);
 
-  const canView = useHasUserPermission(VIEW_PROJECTS);
-  const navigate = useNavigate();
+  const canView = useHasUserPermission(VIEW_PROJECTS); 
+
+  const loading = isLoading || !isFetched;
 
   useEffect(() => {
-    if (projectId && isFetched && !isLoading && !canView) {
+    if (projectId && !loading && !canView) {
       showToast("You don't have permission to view project details", "warning");
       navigate("/projects");
     }
-  }, [projectId, isFetched, isLoading, canView, navigate]);
+  }, [projectId, loading, canView, navigate]);
 
   return {
     canView,
-    loading: isLoading || !isFetched,
+    loading,
   };
-};
+};

src/hooks/useProjects.js

@@ -14,17 +14,15 @@ import {
 } from "@tanstack/react-query";
 import showToast from "../services/toastService";
 
+export const useCurrentService = () => {
+  return useSelector((store) => store.globalVariables.selectedServiceId);
+};
+
 // ------------------------------Query-------------------
 
 export const useProjects = () => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
-
-  const {
-    data: projects = [],
-    isLoading: loading,
-    error,
-    refetch,
-  } = useQuery({
+  return useQuery({
     queryKey: ["ProjectsList"],
     queryFn: async () => {
       const response = await ProjectRepository.getProjectList();
@@ -32,19 +30,13 @@ export const useProjects = () => {
     },
     enabled: !!loggedUser,
   });
-
-  return {
-    projects,
-    loading,
-    error,
-    refetch,
-  };
 };
 
 export const useEmployeesByProjectAllocated = (
   projectId,
   serviceId,
-    organizationId,
+  organizationId,
+  emloyeeeStatus
 ) => {
   const {
     data = [],
@@ -52,16 +44,23 @@ export const useEmployeesByProjectAllocated = (
     refetch,
     error,
   } = useQuery({
-    queryKey: ["empListByProjectAllocated", projectId, serviceId,organizationId],
+    queryKey: [
+      "empListByProjectAllocated",
+      projectId,
+      serviceId,
+      organizationId,
+      emloyeeeStatus,
+    ],
     queryFn: async () => {
       const res = await ProjectRepository.getProjectAllocation(
         projectId,
+        serviceId,
         organizationId,
-        serviceId
+        emloyeeeStatus
       );
       return res?.data || res;
     },
-    enabled: !!projectId, 
+    enabled: !!projectId,
     onError: (error) => {
       showToast(
         error.message || "Error while fetching project allocated employees",
@@ -180,17 +179,20 @@ export const useProjectName = () => {
   };
 };
 
-export const useProjectInfra = (projectId) => {
+export const useProjectInfra = (projectId, serviceId) => {
   const {
     data: projectInfra,
     isLoading,
     error,
     isFetched,
   } = useQuery({
-    queryKey: ["ProjectInfra", projectId],
+    queryKey: ["ProjectInfra", projectId, serviceId],
     queryFn: async () => {
       if (!projectId) return null;
-      const res = await ProjectRepository.getProjectInfraByproject(projectId);
+      const res = await ProjectRepository.getProjectInfraByproject(
+        projectId,
+        serviceId
+      );
       return res.data;
     },
     enabled: !!projectId,
@@ -202,11 +204,18 @@ export const useProjectInfra = (projectId) => {
   return { projectInfra, isLoading, error, isFetched };
 };
 
-export const useProjectTasks = (workAreaId, serviceId = null, isExpandedArea = false) => {
+export const useProjectTasks = (
+  workAreaId,
+  serviceId = null,
+  isExpandedArea = false
+) => {
   const { data, isLoading, error } = useQuery({
     queryKey: ["WorkItems", workAreaId, serviceId],
     queryFn: async () => {
-      const res = await ProjectRepository.getProjectTasksByWorkArea(workAreaId, serviceId);
+      const res = await ProjectRepository.getProjectTasksByWorkArea(
+        workAreaId,
+        serviceId
+      );
       return res.data; // return actual task list
     },
     enabled: !!workAreaId && isExpandedArea, // only fetch if workAreaId exists and area is expanded
@@ -298,14 +307,30 @@ export const useProjectAssignedServices = (projectId) => {
   });
 };
 
+export const useEmployeeForTaskAssign = (
+  projectId,
+  serviceId,
+  organizationId
+) => {
+  return useQuery({
+    queryKey: ["EmployeeForTaskAssign", projectId, serviceId, organizationId],
+    queryFn: async () =>
+      await ProjectRepository.getEmployeeForTaskAssign(
+        projectId,
+        serviceId,
+        organizationId
+      ),
+  });
+};
+
 // -- -------------Mutation-------------------------------
 
 export const useCreateProject = ({ onSuccessCallback }) => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (newProject) => {
-      const res = await ProjectRepository.manageProject(newProject);
+    mutationFn: async (payload) => {
+      const res = await ProjectRepository.manageProject(payload);
       return res.data;
     },
     onSuccess: (data) => {
@@ -331,11 +356,11 @@ export const useCreateProject = ({ onSuccessCallback }) => {
   });
 };
 
-export const useUpdateProject = ({ onSuccessCallback }) => {
+export const useUpdateProject = ( onSuccessCallback ) => {
   const queryClient = useQueryClient();
   const { mutate, isPending, isSuccess, isError } = useMutation({
-    mutationFn: async ({ projectId, updatedData }) => {
-      return await ProjectRepository.updateProject(projectId, updatedData);
+    mutationFn: async ({ projectId, payload }) => {
+      return await ProjectRepository.updateProject(projectId, payload);
     },
 
     onSuccess: (data, variables) => {
@@ -395,8 +420,8 @@ export const useManageProjectAllocation = ({
   const queryClient = useQueryClient();
 
   const { mutate, isPending, isSuccess, isError } = useMutation({
-    mutationFn: async ({ items }) => {
-      const response = await ProjectRepository.manageProjectAllocation(items);
+    mutationFn: async ({ payload }) => {
+      const response = await ProjectRepository.manageProjectAllocation(payload);
       return response.data;
     },
     onSuccess: (data, variables, context) => {
@@ -404,7 +429,7 @@ export const useManageProjectAllocation = ({
         queryKey: ["empListByProjectAllocated"],
       });
       queryClient.removeQueries({ queryKey: ["projectEmployees"] });
-      if (variables?.added) {
+      if (variables.actionType === "assign") {
         showToast("Employee Assigned Successfully", "success");
       } else {
         showToast("Removed Employee Successfully", "success");

src/hooks/useTasks.js

@@ -8,30 +8,25 @@ import { useSelector } from "react-redux";
 
 // ---------Query---------------------------------
 
-export const useTaskList = (projectId, dateFrom, toDate) => {
-  const enabled = !!projectId && !!dateFrom && !!toDate;
+export const useTaskList = (projectId, pageSize, pageNumber, serviceId, filter) => {
 
-  const {
-    data: TaskList = [],
-    isLoading: loading,
-    error,
-    refetch,
-  } = useQuery({
-    queryKey: ["taskList", projectId, dateFrom, toDate],
+  return useQuery({
+    queryKey: ["taskList", projectId, pageSize, pageNumber, serviceId, filter],
     queryFn: async () => {
       const response = await TasksRepository.getTaskList(
         projectId,
-        dateFrom,
-        toDate
+        pageSize,
+        pageNumber,
+        serviceId,
+        filter
       );
       return response.data;
     },
-    enabled,
+    enabled:!!projectId
   });
-
-  return { TaskList, loading, error, refetch };
 };
 
+
 export const useTaskById = (TaskId) => {
   const {
     data: Task = null,

src/pages/Activities/DailyTask.jsx

@@ -1,289 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useDispatch } from "react-redux";
-import { useTaskList } from "../../hooks/useTasks";
-import { useProjectAssignedServices, useProjectName } from "../../hooks/useProjects";
-import { setProjectId } from "../../slices/localVariablesSlice";
-import Breadcrumb from "../../components/common/Breadcrumb";
-import DateRangePicker from "../../components/common/DateRangePicker";
-import FilterIcon from "../../components/common/FilterIcon";
-import GlobalModel from "../../components/common/GlobalModel";
-import ReportTask from "../../components/Activities/ReportTask";
-import ReportTaskComments from "../../components/Activities/ReportTaskComments";
-import SubTask from "../../components/Activities/SubTask";
-import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
-import { useSelectedProject } from "../../slices/apiDataManager";
-import moment from "moment";
-import Loader from "../../components/common/Loader";
-
-const DailyTask = () => {
-  const dispatch = useDispatch();
-  const selectedProject = useSelectedProject();
-  const { projectNames } = useProjectName();
-  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
-  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
-
-  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(selectedProject);
-
-  const [selectedService, setSelectedService] = useState("");
-
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
-
-  const [filters, setFilters] = useState({
-    selectedBuilding: "",
-    selectedFloors: [],
-    selectedActivities: [],
-  });
-
-  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-
-  const { TaskList, loading: taskLoading } = useTaskList(
-    selectedProject || null,
-    dateRange?.startDate || null,
-    dateRange?.endDate || null
-  );
-
-  useEffect(() => {
-    if (!selectedProject && projectNames.length > 0) {
-      debugger
-      dispatch(setProjectId(projectNames[0].id));
-    }
-  }, [selectedProject, projectNames, dispatch]);
-
-  useEffect(() => {
-    setFilters({
-      selectedBuilding: "",
-      selectedFloors: [],
-      selectedActivities: [],
-    });
-  }, [selectedProject]);
-
-  const filteredTasks = useMemo(() => {
-    if (!TaskList) return [];
-    return TaskList.filter((task) => {
-      const { selectedBuilding, selectedFloors, selectedActivities } = filters;
-
-      if (selectedBuilding && task?.workItem?.workArea?.floor?.building?.name !== selectedBuilding) return false;
-      if (selectedFloors.length > 0 && !selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)) return false;
-      if (selectedActivities.length > 0 && !selectedActivities.includes(task?.workItem?.activityMaster?.activityName)) return false;
-
-      return true;
-    });
-  }, [TaskList, filters]);
-
-  const groupedTasks = useMemo(() => {
-    const groups = {};
-    filteredTasks.forEach((task) => {
-      const date = task.assignmentDate.split("T")[0];
-      if (!groups[date]) groups[date] = [];
-      groups[date].push(task);
-    });
-    return Object.keys(groups)
-      .sort((a, b) => new Date(b) - new Date(a))
-      .map((date) => ({ date, tasks: groups[date] }));
-  }, [filteredTasks]);
-
-  const [modal, setModal] = useState({ type: null, data: null });
-
-  const openModal = (type, data = null) => setModal({ type, data });
-  const closeModal = () => setModal({ type: null, data: null });
-
-  const renderTeamMembers = (task, refIndex) => (
-    <div
-      key={refIndex}
-      tabIndex="0"
-      className="d-flex align-items-center avatar-group justify-content-center"
-      data-bs-toggle="popover"
-      data-bs-trigger="focus"
-      data-bs-placement="left"
-      data-bs-html="true"
-      data-bs-content={`
-        <div class="border border-secondary rounded custom-popover p-2 px-3">
-          ${task.teamMembers
-          .map(
-            (m) => `
-            <div class="d-flex align-items-center gap-2 mb-2">
-              <div class="avatar avatar-xs">
-                <span class="avatar-initial rounded-circle bg-label-primary">
-                  ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""}
-                </span>
-              </div>
-              <span>${m.firstName} ${m.lastName}</span>
-            </div>`
-          )
-          .join("")}
-        </div>
-      `}
-    >
-      {task.teamMembers.slice(0, 3).map((m) => (
-        <div key={m.id} className="avatar avatar-xs" title={`${m.firstName} ${m.lastName}`}>
-          <span className="avatar-initial rounded-circle bg-label-primary">
-            {m?.firstName.slice(0, 1)}
-          </span>
-        </div>
-      ))}
-      {task.teamMembers.length > 3 && (
-        <div className="avatar avatar-xs" title={`${task.teamMembers.length - 3} more`}>
-          <span className="avatar-initial rounded-circle bg-label-secondary">+{task.teamMembers.length - 3}</span>
-        </div>
-      )}
-    </div>
-  );
-
-  return (
-    <>
-      {modal.type === "report" && (
-        <GlobalModel isOpen size="md" closeModal={closeModal}>
-          <ReportTask report={modal.data} closeModal={closeModal} />
-        </GlobalModel>
-      )}
-      {modal.type === "comments" && (
-        <GlobalModel isOpen size="lg" closeModal={closeModal}>
-          <ReportTaskComments
-            commentsData={modal.data.task}
-            actionAllow={modal.data.isActionAllow}
-            handleCloseAction={(isSubTask) => {
-              if (isSubTask) openModal("subtask", modal.data.task);
-              else closeModal();
-            }}
-            closeModal={closeModal}
-          />
-        </GlobalModel>
-      )}
-      {modal.type === "subtask" && (
-        <GlobalModel isOpen size="lg" closeModal={closeModal}>
-          <SubTask activity={modal.data} onClose={closeModal} />
-        </GlobalModel>
-      )}
-
-      <div className="container-fluid">
-        <Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Daily Progress Report" }]} />
-
-        <div className="card card-action mb-6 p-5">
-          <div className="card-body p-1 p-sm-2">
-            {!selectedProject && (<div className="text-center text-muted">Please Select Project</div>)}
-
-            <div className="d-flex align-items-center justify-content-between mb-2">
-              {/* --- Left: Service Dropdown + Filter Icon --- */}
-              <div className="d-flex align-items-center gap-6">
-                <div className="me-3">
-                  {!servicesLoading && assignedServices?.length > 0 && (
-                    assignedServices.length > 1 ? (
-                      <label>
-                        <select
-                          name="DataTables_Table_0_length"
-                          aria-controls="DataTables_Table_0"
-                          className="form-select form-select-sm"
-                          aria-label="Select Service"
-                          value={selectedService}
-                          onChange={handleServiceChange}
-                          style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
-                        >
-                          <option value="">All Services</option>
-                          {assignedServices.map((service) => (
-                            <option key={service.id} value={service.id}>
-                              {service.name}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
-                    ) : (
-                      <h5>{assignedServices[0].name}</h5>
-                    )
-                  )}
-                </div>
-              </div>
-
-              {/* --- Right: DateRangePicker --- */}
-              <div className="d-flex justify-content-end align-items-center gap-3 me-3">
-                <FilterIcon
-                  taskListData={TaskList}
-                  onApplyFilters={setFilters}
-                  currentSelectedBuilding={filters.selectedBuilding}
-                  currentSelectedFloors={filters.selectedFloors}
-                  currentSelectedActivities={filters.selectedActivities}
-                  selectedProject={selectedProject}
-                />
-                <DateRangePicker
-                  onRangeChange={setDateRange}
-                  endDateMode="today"
-                  DateDifference="6"
-                  dateFormat="DD-MM-YYYY"
-                />
-              </div>
-
-            </div>
-            {/* --- Table --- */}
-            <div className="table-responsive text-nowrap mt-3" style={{ minHeight: "200px" }}>
-              <table className="table">
-                <thead>
-                  <tr>
-                    <th>Activity</th>
-                    <th>Assigned</th>
-                    <th>Completed</th>
-                    <th>Assign On</th>
-                    <th>Team</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {taskLoading && (
-                    <tr>
-                      <td colSpan={6} className="text-center align-middle" style={{ height: "200px" }}>
-                        <Loader />
-                      </td>
-                    </tr>
-                  )}
-                  {!taskLoading && groupedTasks.length === 0 && (
-                    <tr>
-                      <td colSpan={6} className="text-center align-middle" style={{ height: "200px" }}>
-                        No reports available for the selected date range.
-                      </td>
-                    </tr>
-                  )}
-                  {!taskLoading &&
-                    groupedTasks.map(({ date, tasks }) => (
-                      <React.Fragment key={date}>
-                        <tr className="table-row-header text-start">
-                          <td colSpan={6}><strong>{formatUTCToLocalTime(date)}</strong></td>
-                        </tr>
-                        {tasks.map((task, idx) => (
-                          <tr key={task.id || idx}>
-                            <td className="flex-wrap text-start">
-                              <div>{task.workItem.activityMaster?.activityName || "No Activity Name"}</div>
-                              <div className="text-sm">
-                                {task.workItem.workArea?.floor?.building?.name} › {task.workItem.workArea?.floor?.floorName} › {task.workItem.workArea?.areaName}
-                              </div>
-                            </td>
-                            <td>{formatNumber(task.plannedTask)} / {formatNumber(task.workItem.plannedWork - task.workItem.completedWork)}</td>
-                            <td>{task.completedTask}</td>
-                            <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
-                            <td className="text-center">{renderTeamMembers(task, idx)}</td>
-                            <td className="text-center">
-                              <div className="d-flex justify-content-end gap-2">
-                                {ReportTaskRights && !task.reportedDate && (
-                                  <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>Report</button>
-                                )}
-                                {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
-                                  <button className="btn btn-xs btn-warning" onClick={() => openModal("comments", { task, isActionAllow: true })}>QC</button>
-                                )}
-                                <button className="btn btn-xs btn-primary" onClick={() => openModal("comments", { task, isActionAllow: false })}>Comment</button>
-                              </div>
-                            </td>
-                          </tr>
-                        ))}
-                      </React.Fragment>
-                    ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-export default DailyTask;

src/pages/Activities/TaskPlannng.jsx

@@ -1,32 +1,34 @@
 import React, { useEffect, useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import InfraPlanning from "../../components/Activities/InfraPlanning";
-import { useProjectName } from "../../hooks/useProjects";
+import { useCurrentService, useProjectName } from "../../hooks/useProjects";
 import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useProjectAssignedServices } from "../../hooks/useProjects";
+import { setService } from "../../slices/globalVariablesSlice";
 
-const TaskPlannng = () => {
+const TaskPlanning = () => {
   const selectedProject = useSelectedProject();
+  const selectedService = useCurrentService();
   const dispatch = useDispatch();
+
   const { projectNames = [], loading: projectLoading } = useProjectName();
 
-  // Service dropdown state
-  const { data: assignedServices, isLoading: servicesLoading } =
+  const { data, isLoading: servicesLoading } =
     useProjectAssignedServices(selectedProject);
-  const [selectedService, setSelectedService] = useState("");
 
+  // Set default project if none selected
   useEffect(() => {
-    if (!selectedProject && projectNames?.length > 0) {
+    if (!selectedProject && projectNames.length > 0) {
       dispatch(setProjectId(projectNames[0]?.id));
     }
   }, [projectNames, selectedProject, dispatch]);
 
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
-
+  // Loading state
+  if (projectLoading) {
+    return <div className="text-center py-5">Loading...</div>;
+  }
   return (
     <div className="container-fluid">
       <Breadcrumb
@@ -36,51 +38,39 @@ const TaskPlannng = () => {
         ]}
       />
 
-      <div className="card">
-        <div className="card-body">
-          {/* Service Dropdown */}       
-
-          <div
-            className="dataTables_length text-start py-2 px-5 col-md-4 col-12"
-            id="DataTables_Table_0_length"
-          >
-            {!servicesLoading && assignedServices?.length > 0 && (
-              assignedServices.length > 1 ? (
-                <label>
-                  <select
-                    name="DataTables_Table_0_length"
-                    aria-controls="DataTables_Table_0"
-                    className="form-select form-select-sm"
-                    aria-label="Select Service"
-                    value={selectedService}
-                    onChange={handleServiceChange}
-                    style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
-                  >
-                    <option value="">All Services</option>
-                    {assignedServices.map((service) => (
-                      <option key={service.id} value={service.id}>
-                        {service.name}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-              ) : (
-                <h5>{assignedServices[0].name}</h5>
-              )
-            )}
-          </div>
-
-
-          {/* Infra Planning Component */}
-          {selectedProject ? (
-            <InfraPlanning selectedService={selectedService} />
+      <div className="card py-2 ">
+        <div className="col-sm-4 col-md-3 col-12 px-4 py-2 text-start">
+          {data?.length === 0 ? (
+            <p className="badge bg-label-secondary m-0">Service not assigned</p>
           ) : (
-            <div className="text-center">Please Select Project</div>
+            <select
+              name="DataTables_Table_0_length"
+              aria-controls="DataTables_Table_0"
+              className="form-select form-select-sm"
+              aria-label="Select Service"
+              value={selectedService ?? ""}
+              onChange={(e) => dispatch(setService(e.target.value))}
+            >
+              <option value="">All Services</option>
+              {!servicesLoading &&
+                data?.map((service) => (
+                  <option key={service.id} value={service.id}>
+                    {service.name}
+                  </option>
+                ))}
+            </select>
           )}
         </div>
+
+        {/* Planning Component */}
+        {selectedProject ? (
+          <InfraPlanning />
+        ) : (
+          <div className="text-center py-3">Please select a project</div>
+        )}
       </div>
     </div>
   );
 };
 
-export default TaskPlannng;
+export default TaskPlanning;

src/pages/DailyProgressReport/DailyProgrssReport.jsx

@@ -0,0 +1,119 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import { useServices } from "../../hooks/masterHook/useMaster";
+import TaskReportList from "../../components/DailyProgressRport/TaskReportList";
+import GlobalModel from "../../components/common/GlobalModel";
+import ReportTaskComments from "../../components/Activities/ReportTaskComments";
+import ReportTask from "../../components/Activities/ReportTask";
+import TaskReportFilterPanel from "../../components/DailyProgressRport/TaskReportFilterPanel";
+import { useFab } from "../../Context/FabContext";
+
+const DailyProgrssContext = createContext();
+export const useDailyProgrssContext = () => {
+  const context = useContext(DailyProgrssContext);
+  if (!context) {
+    throw new Error(
+      "useDailyTaskContext must be used within a DailyTaskProvider"
+    );
+  }
+  return context;
+};
+
+const DailyProgrssReport = () => {
+  const [service, setService] = useState("");
+  const [filter,setFilter] = useState('')
+  const { setOffcanvasContent, setShowTrigger } = useFab();
+  const { data, isLoading, isError, error } = useServices();
+
+  const [modal, setModal] = useState({ type: null, data: null });
+
+  const openModal = (type, data = null) => setModal({ type, data });
+  const closeModal = () => setModal({ type: null, data: null });
+
+  const contextDispatcher = {
+    service,
+    openModal,
+    closeModal,
+    filter,
+  };
+
+  const handleFilter = (filterObj)=>{
+     setFilter(filterObj)
+  }
+
+  useEffect(() => {
+    setShowTrigger(true);
+    setOffcanvasContent("Report Filter", <TaskReportFilterPanel handleFilter={handleFilter} />);
+
+    return () => {
+      setShowTrigger(false);
+      setOffcanvasContent("", null);
+    };
+  }, []);
+  return (
+    <div className="container-fluid">
+      <DailyProgrssContext.Provider value={contextDispatcher}>
+        {modal.type === "report" && (
+          <GlobalModel isOpen size="md" closeModal={closeModal}>
+            <ReportTask report={modal.data} closeModal={closeModal} />
+          </GlobalModel>
+        )}
+        {modal.type === "comments" && (
+          <GlobalModel isOpen size="lg" closeModal={closeModal}>
+            <ReportTaskComments
+              commentsData={modal.data.task}
+              actionAllow={modal.data.isActionAllow}
+              handleCloseAction={(isSubTask) => {
+                if (isSubTask) openModal("subtask", modal.data.task);
+                else closeModal();
+              }}
+              closeModal={closeModal}
+            />
+          </GlobalModel>
+        )}
+        {modal.type === "subtask" && (
+          <GlobalModel isOpen size="lg" closeModal={closeModal}>
+            <SubTask activity={modal.data} onClose={closeModal} />
+          </GlobalModel>
+        )}
+
+        <Breadcrumb
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Daily Progress Report" },
+          ]}
+        />
+
+        <div className="card card-fullscreen p-5">
+          <div className="col-sm-4 col-md-3 col-12">
+            <select
+              className="form-select form-select-sm"
+              value={service ?? ""}
+              onChange={(e) => setService(e.target.value)}
+            >
+              {isLoading ? (
+                <option value="lading" disabled>Loading...</option>
+              ) : (
+                <>
+                  <option value="">
+                    All Services
+                  </option>
+                  {data?.data?.map((service) => (
+                    <option key={service.id} value={service.id}>
+                      {service.name}
+                    </option>
+                  ))}
+                </>
+              )}
+            </select>
+          </div>
+          <div>
+            <TaskReportList />
+          </div>
+        </div>
+      </DailyProgrssContext.Provider>
+    </div>
+  );
+};
+
+export default DailyProgrssReport;

src/pages/Expense/ExpensePage.jsx

@@ -131,9 +131,8 @@ const ExpensePage = () => {
                   <div className="col-6  text-end mt-2 mt-sm-0">
                     {IsCreatedAble && (
                       <button
+                        className="btn btn-sm btn-primary"
                         type="button"
-                        className="p-1 me-1 m-sm-0  bg-primary rounded-circle"
-                        title="Add New Expense"
                         onClick={() =>
                           setManageExpenseModal({
                             IsOpen: true,
@@ -141,7 +140,10 @@ const ExpensePage = () => {
                           })
                         }
                       >
-                        <i className="bx bx-plus fs-4 text-white"></i>
+                        <i className="bx bx-plus-circle me-2"></i>
+                        <span className="d-none d-md-inline-block">
+                          Add New Expense
+                        </span>
                       </button>
                     )}
                   </div>

src/pages/Organization/OrganizationPage.jsx

@@ -4,9 +4,9 @@ import { useOrganizationModal } from "../../hooks/useOrganization";
 import OrganizationsList from "../../components/Organization/OrganizationsList";
 
 const OrganizationPage = () => {
-    const { isOpen, orgData, startStep, onOpen, flowType  } =
+  const { isOpen, orgData, startStep, onOpen, flowType } =
     useOrganizationModal();
-  const [searchText,setSearchText] = useState("")
+  const [searchText, setSearchText] = useState("")
 
   return (
     <div className="container-fluid">
@@ -21,7 +21,7 @@ const OrganizationPage = () => {
                 <input
                   type="search"
                   value={searchText}
-                  onChange={(e)=>setSearchText(e.target.value)}
+                  onChange={(e) => setSearchText(e.target.value)}
                   className="form-control form-control-sm w-auto"
                   placeholder="Search Organization"
                   aria-describedby="search-label"
@@ -29,20 +29,22 @@ const OrganizationPage = () => {
               </div>
             </div>
 
-            <div className="col-6  text-end mt-2 mt-sm-0">
+            <div className="col-6  text-end mt-2 mt-sm-0">          
               <button
+                className="btn btn-sm btn-primary"
                 type="button"
-                className="p-1 me-1 m-sm-0  bg-primary rounded-circle"
-                title="Add New Organization"
-                onClick={()=>onOpen({ startStep: 2,flowType:"default"  })}
+                onClick={() => onOpen({ startStep: 2, flowType: "default" })}
               >
-                <i className="bx bx-plus fs-4 text-white"></i>
+                 <i className="bx bx-plus-circle me-2"></i>
+                  <span className="d-none d-md-inline-block">
+                    Add New Organization
+                  </span>
               </button>
             </div>
           </div>
         </div>
       </div>
-      <OrganizationsList searchText={searchText}/>
+      <OrganizationsList searchText={searchText} />
 
     </div>
   );

src/pages/Tenant/TenantPage.jsx

@@ -127,38 +127,27 @@ const TenantPage = () => {
             <div className="p-0">
               <div className="row align-items-center">
                 {/* Search */}
-                <div className="col-6 col-md-6 col-lg-3 mb-md-0">
+                <div className="col-6 col-md-6 col-lg-2 mb-md-0">
                   <input
                     type="search"
                     value={searchText}
+                    className="form-control form-control-sm"
                     onChange={(e) => setSearchText(e.target.value)}
-                    className="form-control form-control"
                     placeholder="Search Tenant"
                   />
                 </div>
 
                 {/* Actions */}
-                <div className="col-6 col-md-6 col-lg-9 text-end">
-                  <span
-                    className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 cursor-pointer"
-                    disabled={isRefetching}
-                    onClick={() => refetchFn && refetchFn()}
-                  >
-                    Refresh{" "}
-                    <i
-                      className={`bx bx-refresh ms-1 ${
-                        isRefetching ? "bx-spin" : ""
-                      }`}
-                    ></i>
-                  </span>
-
+                <div className="col-6 col-md-6 col-lg-10 text-end">
                   <button
+                    className="btn btn-sm btn-primary"
                     type="button"
-                    title="Add New Tenant"
-                    className="p-1 bg-primary rounded-circle cursor-pointer"
                     onClick={handleNewTenant}
                   >
-                    <i className="bx bx-plus fs-4 text-white"></i>
+                    <i className="bx bx-plus-circle me-2"></i>
+                    <span className="d-none d-md-inline-block">
+                      Add New Tenant
+                    </span>
                   </button>
                 </div>
               </div>

src/pages/authentication/LoginPage.jsx

@@ -16,13 +16,13 @@ const LoginPage = () => {
 
   const loginSchema = IsLoginWithOTP
     ? z.object({
-      username: z.string().trim().email({ message: "Valid email required" }),
-    })
+        username: z.string().trim().email({ message: "Valid email required" }),
+      })
     : z.object({
-      username: z.string().trim().email({ message: "Valid email required" }),
-      password: z.string().trim().min(1, { message: "Password required" }),
-      rememberMe: z.boolean(),
-    });
+        username: z.string().trim().email({ message: "Valid email required" }),
+        password: z.string().trim().min(1, { message: "Password required" }),
+        rememberMe: z.boolean(),
+      });
 
   const {
     register,
@@ -41,8 +41,13 @@ const LoginPage = () => {
           password: data.password,
         };
         const response = await AuthRepository.login(userCredential);
-        localStorage.setItem("jwtToken", response.data.token);
-        localStorage.setItem("refreshToken", response.data.refreshToken);
+        if (data.rememberMe) {
+          localStorage.setItem("jwtToken", response.data.token);
+          localStorage.setItem("refreshToken", response.data.refreshToken);
+        } else {
+          sessionStorage.setItem("jwtToken", response.data.token);
+          sessionStorage.setItem("refreshToken", response.data.refreshToken);
+        }
         setLoading(false);
         navigate("/auth/switch/org");
       } else {
@@ -69,6 +74,16 @@ const LoginPage = () => {
     }
   }, [IsLoginWithOTP]);
 
+  useEffect(() => {
+  const token =
+    localStorage.getItem("jwtToken") ||
+    sessionStorage.getItem("jwtToken");
+
+  if (token) {
+    navigate("/dashboard", { replace: true });
+  }
+}, []);
+
   return (
     <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
       <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
@@ -106,36 +121,6 @@ const LoginPage = () => {
           {/* Password */}
           {!IsLoginWithOTP && (
             <>
-              {/* <div className="mb-3 text-start">
-                <label htmlFor="password" className="form-label">
-                  Password
-                </label>
-                <div className="input-group input-group-merge">
-                  <input
-                    type={hidepass ? "password" : "text"}
-                    id="password"
-                    className={`form-control ${errors.password ? "is-invalid" : ""
-                      }`}
-                    placeholder="••••••••"
-                    {...register("password")}
-                  />
-                  <span
-                    className="input-group-text cursor-pointer"
-                    onClick={() => setHidepass(!hidepass)}
-                  >
-                    <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`}></i>
-                  </span>
-                </div>
-                {errors.password && (
-                  <div
-                    className="invalid-feedback text-start"
-                    style={{ fontSize: "12px" }}
-                  >
-                    {errors.password.message}
-                  </div>
-                )}
-              </div> */}
-
               <div className="mb-3 form-password-toggle text-start">
                 <label htmlFor="password" className="form-label">
                   Password
@@ -146,8 +131,9 @@ const LoginPage = () => {
                     type={hidepass ? "password" : "text"}
                     autoComplete="new-password"
                     id="password"
-                    className={`form-control form-control-xl shadow-none ${errors.password ? "is-invalid" : ""
-                      }`}
+                    className={`form-control form-control-xl shadow-none ${
+                      errors.password ? "is-invalid" : ""
+                    }`}
                     name="password"
                     {...register("password")}
                     placeholder="••••••••••••"
@@ -168,15 +154,16 @@ const LoginPage = () => {
                   </span>
                 </div>
 
-                {/* ✅ Error message */}
                 {errors.password && (
-                  <div className="invalid-feedback text-start" style={{ fontSize: "12px" }}>
+                  <div
+                    className="invalid-feedback text-start"
+                    style={{ fontSize: "12px" }}
+                  >
                     {errors.password.message}
                   </div>
                 )}
               </div>
 
-
               {/* Remember Me + Forgot Password */}
               <div className="mb-3 d-flex justify-content-between align-items-center">
                 <div className="form-check">
@@ -209,8 +196,8 @@ const LoginPage = () => {
             {loading
               ? "Please Wait..."
               : IsLoginWithOTP
-                ? "Send OTP"
-                : "Sign In"}
+              ? "Send OTP"
+              : "Sign In"}
           </button>
 
           {/* Login With OTP Button */}
@@ -254,4 +241,4 @@ const LoginPage = () => {
   );
 };
 
-export default LoginPage;
+export default LoginPage;

src/pages/authentication/LoginWithOtp.jsx

@@ -52,7 +52,7 @@ const LoginWithOtp = () => {
       setLoading(false);
       localStorage.removeItem("otpUsername");
       localStorage.removeItem("otpSentTime");
-        navigate("/dashboard");
+        navigate("/auth/switch/org");
 
     } catch (err) {
       showToast("Invalid or expired OTP.", "error");

src/pages/authentication/MainForgetPage.jsx

@@ -7,7 +7,7 @@ const MainForgetPage = () => {
     <>
       <div className="authentication-inner row m-0">
         <div className="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
-          <div className="w-75 h-75 d-flex justify-content-center">
+          <div className="w-100 h-75 d-flex justify-content-center">
             <img
               src="/img/illustrations/girl-unlock-password-light.png"
               className="object-fit-sm-contain "

src/pages/authentication/MainRegisterPage.jsx

@@ -6,7 +6,7 @@ const MainRegisterPage = () => {
     <>
       <div className="authentication-inner row m-0">
         <div className="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
-          <div className="w-75 h-75 d-flex justify-content-center">
+          <div className="w-100 h-75 d-flex justify-content-center">
             <img
               src="/img/illustrations/registration.jpg"
               className="object-fit-sm-contain "

src/pages/authentication/TenantSelectionPage.jsx

@@ -18,14 +18,14 @@ const TenantSelectionPage = () => {
     chooseTenant(tenantId);
   };
   
-  const {mutate:handleLogout,isPending:isLogouting} = useLogout(()=>{})
+  const {mutate:handleLogout,isPending:isLogouting} = useLogout()
 
 
-  // useEffect(() => {
-  //   if (localStorage.getItem("ctnt")) {
-  //     navigate("/dashboard");
-  //   }
-  // }, [navigate]);
+  useEffect(() => {
+    if (localStorage.getItem("ctnt")) {
+      chooseTenant(localStorage.getItem("ctnt"))
+    }
+  }, [navigate]);
 
   useEffect(() => {
     if (!isLoading && data?.data?.length === 1) {

src/pages/employee/EmployeeList.jsx

@@ -751,7 +751,6 @@ const EmployeeList = () => {
             </div>
           </div>
         ) : (
-          // </div>
           <div className="card">
             <div className="text-center">
               <i className="fa-solid fa-triangle-exclamation fs-5"></i>

src/pages/master/MasterPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useMemo, useEffect, createContext, useContext } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useQueryClient } from "@tanstack/react-query";
 import Breadcrumb from "../../components/common/Breadcrumb";
@@ -6,7 +6,9 @@ import MasterModal from "../../components/master/MasterModal";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import MasterTable from "./MasterTable";
 import useMaster, {
+  useDeleteActivity,
   useDeleteMasterItem,
+  useDeleteServiceGroup,
   useMasterMenu,
 } from "../../hooks/masterHook/useMaster";
 import { changeMaster } from "../../slices/localVariablesSlice";
@@ -14,6 +16,16 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
 import GlobalModel from "../../components/common/GlobalModel";
 
+
+export const MasterContext = createContext();
+export const useMasterContext = () => {
+  const context = useContext(MasterContext);
+  if (!context) {
+    throw new Error("useMasterContext must be used within an MasterProvider");
+  }
+  return context;
+};
+
 const MasterPage = () => {
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
@@ -34,6 +46,9 @@ const MasterPage = () => {
     isError: isMasterError,
   } = useMaster();
   const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
+  const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null})
+  const {mutate:DeleteSericeGroup,isPending:deletingGroup}  =useDeleteServiceGroup()
+  const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity()
 
   const [modalConfig, setModalConfig] = useState(null);
   const [deleteData, setDeleteData] = useState(null);
@@ -73,6 +88,19 @@ const MasterPage = () => {
     );
   };
 
+
+  const handleDeleteServiceItem =()=>{
+    if(!isDeleletingServiceItem.ItemId) return
+    debugger
+    if(isDeleletingServiceItem.whichItem === "activity"){
+        DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
+    }else{
+      DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
+    }
+  
+
+  }
+
   if (menuErrorFlag || isMasterError)
     return (
       <div className="d-flex flex-column align-items-center justify-content-center py-5">
@@ -87,7 +115,7 @@ const MasterPage = () => {
     );
 
   return (
-    <>
+    <MasterContext.Provider value={{setDeleletingServiceItem}}>
       {modalConfig && (
         <GlobalModel
           size={
@@ -106,6 +134,7 @@ const MasterPage = () => {
           />
         </GlobalModel>
       )}
+      
 
       <ConfirmModal
         type="delete"
@@ -116,6 +145,16 @@ const MasterPage = () => {
         onSubmit={handleDeleteSubmit}
         onClose={() => setDeleteData(null)}
       />
+      
+      <ConfirmModal
+        type="delete"
+        header={`Delete ${isDeleletingServiceItem?.whichItem}`}
+        message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`}
+        isOpen={!!isDeleletingServiceItem?.isOpen}
+        loading={deletingActivity}
+            onSubmit={handleDeleteServiceItem}
+        onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}
+      />
 
       <div className="container-fluid">
         <Breadcrumb
@@ -185,7 +224,7 @@ const MasterPage = () => {
           </div>
         </div>
       </div>
-    </>
+     </MasterContext.Provider>
   );
 };
 

src/pages/master/MasterTable.jsx

@@ -158,6 +158,21 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                       </>
                     ) : (
                       <>
+                        {selectedMaster === "Services" && (
+                          <button
+                            aria-label="View"
+                            type="button"
+                            className="btn p-0 dropdown-toggle hide-arrow"
+                            onClick={() =>
+                              handleModalData(`Manage-${selectedMaster}`, item, selectedMaster)
+                            }
+                            data-bs-toggle="modal"
+                            data-bs-target="#servicesActivityTreeModal"
+                          >
+                            <i className="bx bx-show me-2 text-primary"></i>
+                          </button>
+                        )}
+
                         <button
                           aria-label="Modify"
                           type="button"

src/pages/project/ProjectDetails.jsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 import ProjectOverview from "../../components/Project/ProjectOverview";
 import AboutProject from "../../components/Project/AboutProject";
 import ProjectNav from "../../components/Project/ProjectNav";
-import Teams from "../../components/Project/Teams";
+import Teams from "../../components/Project/Team/Teams";
 import ProjectInfra from "../../components/Project/ProjectInfra";
 import Loader from "../../components/common/Loader";
 import WorkPlan from "../../components/Project/WorkPlan";

src/pages/project/ProjectList.jsx

@@ -1,427 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import ProjectCard from "../../components/Project/ProjectCard";
-import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
-import Breadcrumb from "../../components/common/Breadcrumb";
-import ProjectRepository from "../../repositories/ProjectRepository";
-import { useProjects, useCreateProject } from "../../hooks/useProjects";
-import showToast from "../../services/toastService";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { useProfile } from "../../hooks/useProfile";
-import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
-import ProjectListView from "./ProjectListView";
-import eventBus from "../../services/eventBus";
-import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-import { defaultCheckBoxAppearanceProvider } from "pdf-lib";
-import { useMutation } from "@tanstack/react-query";
-import usePagination from "../../hooks/usePagination";
-import GlobalModel from "../../components/common/GlobalModel";
-import { useDispatch, useSelector } from "react-redux";
-import { setProjectId } from "../../slices/localVariablesSlice";
-
-const ProjectList = () => {
-  const { profile: loginUser } = useProfile();
-  const [listView, setListView] = useState(false);
-  const [showModal, setShowModal] = useState(false);
-  const selectedProject = useSelector(
-    (store) => store.localVariables.projectId
-  );
-  const dispatch = useDispatch();
-
-  const { projects, loading, error, refetch } = useProjects();
-  const [projectList, setProjectList] = useState([]);
-
-  const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  const [HasManageProject, setHasManageProject] = useState(
-    HasManageProjectPermission
-  );
-
-  const { mutate: createProject, isPending } = useCreateProject({
-    onSuccessCallback: () => {
-      setShowModal(false);
-    },
-  });
-
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedStatuses, setSelectedStatuses] = useState([
-    "b74da4c2-d07e-46f2-9919-e75e49b12731",
-    "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-    "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-    "cdad86aa-8a56-4ff4-b633-9c629057dfef",
-    "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-  ]);
-
-  const handleShow = () => setShowModal(true);
-  const handleClose = () => setShowModal(false);
-  useEffect(() => {
-    dispatch(setProjectId(null));
-  }, []);
-  const sortingProject = (projects) => {
-    if (!loading && Array.isArray(projects)) {
-      const grouped = {};
-      projects.forEach((project) => {
-        const statusId = project.projectStatusId;
-        if (!grouped[statusId]) grouped[statusId] = [];
-        grouped[statusId].push(project);
-      });
-
-      const sortedGrouped = selectedStatuses
-        .filter((statusId) => grouped[statusId])
-        .flatMap((statusId) =>
-          grouped[statusId].sort((a, b) =>
-            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-          )
-        );
-
-      setProjectList((prev) => {
-        const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
-        return isSame ? prev : sortedGrouped;
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!loading && projects) {
-      sortingProject(projects);
-    }
-  }, [projects, loading, selectedStatuses]);
-
-  useEffect(() => {
-    setHasManageProject(loginUser ? HasManageProjectPermission : false);
-  }, [loginUser, HasManageProjectPermission]);
-
-  const handleSubmitForm = (newProject) => {
-    createProject(newProject);
-  };
-
-  const handleStatusChange = (statusId) => {
-    setCurrentPage(1);
-    setSelectedStatuses((prev) =>
-      prev.includes(statusId)
-        ? prev.filter((id) => id !== statusId)
-        : [...prev, statusId]
-    );
-  };
-
-  const handleStatusFilterFromChild = (statusesFromChild) => {
-    setSelectedStatuses(statusesFromChild);
-  };
-
-  const filteredProjects = projectList.filter((project) => {
-    const matchesStatus = selectedStatuses.includes(project.projectStatusId);
-    const matchesSearch = project.name
-      .toLowerCase()
-      .includes(searchTerm.toLowerCase());
-    return matchesStatus && matchesSearch;
-  });
-
-  const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
-
-  const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
-    filteredProjects,
-    ITEMS_PER_PAGE
-  );
-
-  useEffect(() => {
-    const tooltipTriggerList = Array.from(
-      document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    );
-    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
-  }, []);
-
-  return (
-    <>
-      {showModal && (
-        <GlobalModel isOpen={showModal} closeModal={handleClose}>
-          <ManageProjectInfo
-            project={null}
-            handleSubmitForm={handleSubmitForm}
-            onClose={handleClose}
-            isPending={isPending}
-          />
-        </GlobalModel>
-      )}
-
-      <div className="container-fluid">
-        <Breadcrumb
-          data={[
-            { label: "Home", link: "/dashboard" },
-            { label: "Projects", link: null },
-          ]}
-        />
-        <div className="card cursor-pointer mb-5">
-          <div className="card-body p-2 pb-1">
-            <div className="d-flex flex-wrap justify-content-between align-items-start">
-              <div className="d-flex flex-wrap align-items-start">
-                <div className="flex-grow-1 me-2 mb-2">
-                  <input
-                    type="search"
-                    className="form-control form-control-sm"
-                    placeholder="Search projects..."
-                    value={searchTerm}
-                    onChange={(e) => {
-                      setSearchTerm(e.target.value);
-                      setCurrentPage(1);
-                    }}
-                  />
-                </div>
-
-                <div className="d-flex gap-2 mb-2">
-                  <button
-                    type="button"
-                    className={`btn  btn-sm p-1 ${
-                      !listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
-                    onClick={() => setListView(false)}
-                    data-bs-toggle="tooltip"
-                    data-bs-custom-class="tooltip"
-                    title="Card View"
-                  >
-                    <i className="bx bx-grid-alt fs-5"></i>
-                  </button>
-                  <button
-                    type="button"
-                    className={`btn btn-sm p-1  ${
-                      listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
-                    onClick={() => setListView(true)}
-                    data-bs-toggle="tooltip"
-                    data-bs-custom-class="tooltip"
-                    title="List View"
-                  >
-                    <i className="bx bx-list-ul fs-5"></i>
-                  </button>
-                </div>
-
-                 <div className="dropdown mt-1">
-                  <a
-                    className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                    data-bs-custom-class="tooltip"
-                    title="Filter"
-                  >
-                    <i className="bx bx-slider-alt ms-1"></i>
-                  </a>
-                  <ul className="dropdown-menu p-2 text-capitalize">
-                    {[
-                      {
-                        id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
-                        label: "Active",
-                      },
-                      {
-                        id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
-                        label: "In Progress",
-                      },
-                      {
-                        id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-                        label: "On Hold",
-                      },
-                      {
-                        id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-                        label: "Inactive",
-                      },
-                      {
-                        id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-                        label: "Completed",
-                      },
-                    ].map(({ id, label }) => (
-                      <li key={id}>
-                        <div className="form-check">
-                          <input
-                            className="form-check-input  "
-                            type="checkbox"
-                            checked={selectedStatuses.includes(id)}
-                            onChange={() => handleStatusChange(id)}
-                          />
-                          <label className="form-check-label">{label}</label>
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-
-              <div>
-                <button
-                  type="button"
-                  data-bs-toggle="tooltip"
-                  data-bs-offset="0,8"
-                  data-bs-placement="top"
-                  data-bs-custom-class="tooltip"
-                  title="Add New Project"
-                  className={`p-1 me-2 bg-primary rounded-circle ${
-                    !HasManageProject && "d-none"
-                  }`}
-                  onClick={handleShow}
-                >
-                  <i className="bx bx-plus fs-4 text-white"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        {loading && <p className="text-center">Loading...</p>}
-        {!loading && filteredProjects.length === 0 && !listView && (
-          <p className="text-center text-muted">No projects found.</p>
-        )}
-
-        {listView ? (
-          <div className="card cursor-pointer">
-            <div className="card-body p-2">
-              <div
-                className="table-responsive text-nowrap py-2 mx-2"
-                style={{ minHeight: "200px" }}
-              >
-                <table className="table m-0">
-                  <thead>
-                    <tr>
-                      <th className="text-start" colSpan={5}>
-                        Project Name
-                      </th>
-                      <th className="mx-2 text-start">Contact Person</th>
-                      <th className="mx-2">START DATE</th>
-                      <th className="mx-2">DEADLINE</th>
-                      <th className="mx-2">Task</th>
-                      <th className="mx-2">Progress</th>
-                      <th className="mx-2">
-                        <div className="dropdown">
-                          <a
-                            className="dropdown-toggle hide-arrow cursor-pointer"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false"
-                          >
-                            Status <i className="bx bx-filter bx-sm"></i>
-                          </a>
-                          <ul className="dropdown-menu p-2 text-capitalize">
-                            {[
-                              {
-                                id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
-                                label: "Active",
-                              },
-                              {
-                                id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
-                                label: "In Progress",
-                              },
-                              {
-                                id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-                                label: "On Hold",
-                              },
-                              {
-                                id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-                                label: "Inactive",
-                              },
-                              {
-                                id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-                                label: "Completed",
-                              },
-                            ].map(({ id, label }) => (
-                              <li key={id}>
-                                <div className="form-check">
-                                  <input
-                                    className="form-check-input  "
-                                    type="checkbox"
-                                    checked={selectedStatuses.includes(id)}
-                                    onChange={() => handleStatusChange(id)}
-                                  />
-                                  <label className="form-check-label">
-                                    {label}
-                                  </label>
-                                </div>
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-                      </th>
-                      <th
-                        className={`mx-2 ${
-                          HasManageProject ? "d-sm-table-cell" : "d-none"
-                        }`}
-                      >
-                        Action
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="table-border-bottom-0 overflow-auto ">
-                    {currentItems.length === 0 ? (
-                      <tr className="text-center">
-                        <td
-                          colSpan="12"
-                          rowSpan="12"
-                          style={{ height: "200px" }}
-                        >
-                          No projects found
-                        </td>
-                      </tr>
-                    ) : (
-                      currentItems.map((project) => (
-                        <ProjectListView
-                          key={project.id}
-                          projectData={project}
-                          recall={sortingProject}
-                        />
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              </div>{" "}
-            </div>{" "}
-          </div>
-        ) : (
-          <div className="row">
-            {currentItems.map((project) => (
-              <ProjectCard
-                key={project.id}
-                projectData={project}
-                recall={sortingProject}
-              />
-            ))}
-          </div>
-        )}
-
-        {!loading && totalPages > 1 && (
-          <nav>
-            <ul className="pagination pagination-sm justify-content-end py-2">
-              <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-                <button
-                  className="page-link"
-                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                >
-                  &laquo;
-                </button>
-              </li>
-              {[...Array(totalPages)].map((_, i) => (
-                <li
-                  key={i}
-                  className={`page-item ${currentPage === i + 1 && "active"}`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => setCurrentPage(i + 1)}
-                  >
-                    {i + 1}
-                  </button>
-                </li>
-              ))}
-              <li
-                className={`page-item ${
-                  currentPage === totalPages && "disabled"
-                }`}
-              >
-                <button
-                  className="page-link"
-                  onClick={() =>
-                    setCurrentPage((p) => Math.min(totalPages, p + 1))
-                  }
-                >
-                  &raquo;
-                </button>
-              </li>
-            </ul>
-          </nav>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default ProjectList;

src/pages/project/ProjectListView.jsx

@@ -1,202 +0,0 @@
-import React, { useState, useEffect } from "react";
-import moment from "moment";
-import {
-  useProjectDetails,
-  useProjects,
-  useUpdateProject,
-} from "../../hooks/useProjects";
-import {
-  getProjectStatusName,
-  getProjectStatusColor,
-} from "../../utils/projectStatus";
-import ProgressBar from "../../components/common/ProgressBar";
-import { useNavigate } from "react-router-dom";
-import ManageProject from "../../components/Project/ManageProject";
-import ProjectRepository from "../../repositories/ProjectRepository";
-import { MANAGE_PROJECT } from "../../utils/constants";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
-import showToast from "../../services/toastService";
-import { getCachedData, cacheData } from "../../slices/apiDataManager";
-import GlobalModel from "../../components/common/GlobalModel";
-import {formatNumber} from "../../utils/dateUtils";
-import { setProjectId } from "../../slices/localVariablesSlice";
-import { useDispatch } from "react-redux";
-
-const ProjectListView = ({ projectData, recall }) => {
-  const [projectInfo, setProjectInfo] = useState(projectData);
-    const dispatch = useDispatch()
-  const { projects_Details, loading, error, refetch } = useProjectDetails(
-    projectInfo?.id,false
-  );
-  const [showModal, setShowModal] = useState(false);
-  const navigate = useNavigate();
-  const ManageProject = useHasUserPermission(MANAGE_PROJECT);
-  useEffect(() => {
-    setProjectInfo(projectData);
-  }, [projectData]);
- const {
-  mutate: updateProject,
-  isPending,
-  isSuccess,
-  isError,
-} = useUpdateProject({
-  onSuccessCallback: () => {
-    setShowModal(false);
-  },
-})
-
-  const handleShow = async () => {
-    try {
-      const { data } = await refetch();
-      setShowModal(true);
-    } catch (err) {
-      showToast("Failed to load project details", "error");
-    }
-  };
-
-  const getProgress = (planned, completed) => {
-    return (completed * 100) / planned + "%";
-  };
-  const getProgressInNumber = (planned, completed) => {
-    return (completed * 100) / planned;
-  };
-
-  const handleClose = () => setShowModal(false);
-
-  const handleViewProject = () => {
-    navigate(`/projects/details`);
-  };
-
-  const handleFormSubmit = (updatedProject) => {
-    if (projectInfo?.id) {
-      updateProject({
-        projectId: projectInfo.id,
-        updatedData: updatedProject,
-      });
-    }
-  };
-
-  return (
-    <>
-      {showModal && projects_Details && (
-        <GlobalModel isOpen={showModal} closeModal={handleClose}>   <ManageProjectInfo
-              project={projects_Details}
-              handleSubmitForm={handleFormSubmit}
-             onClose={handleClose}
-             isPending={isPending}
-            /></GlobalModel>
-      )}
-
-      <tr className={`py-8 ${isPending ? "bg-light opacity-50 pointer-events-none" : ""} `}>
-        <td className="text-start" colSpan={5}>
-          <span
-            className="text-primary cursor-pointer"
-             onClick={() => {
-              dispatch(setProjectId(projectInfo.id))
-              navigate(`/projects/details`)
-            }}
-          >
-            {projectInfo.shortName
-              ? `${projectInfo.name} (${projectInfo.shortName})`
-              : projectInfo.name}
-          </span>
-        </td>
-        <td className="text-start small">{projectInfo.contactPerson}</td>
-        <td className="small text-center">
-          <small>
-            {projectInfo.startDate
-              ? moment(projectInfo.startDate).format("DD-MMM-YYYY")
-              : "NA"}
-          </small>
-        </td>
-        <td className="mx-2 text-center small">
-          {projectInfo.endDate
-            ? moment(projectInfo.endDate).format("DD-MMM-YYYY")
-            : "NA"}
-        </td>
-        <td className="mx-2 text-center small">{formatNumber(projectInfo.plannedWork)}</td>
-        <td className="py-6 mx-2 text-start small align-items-center">
-          <ProgressBar
-            plannedWork={projectInfo.plannedWork}
-            completedWork={projectInfo.completedWork}
-            className="mb-0"
-            height="4px"
-          />
-        </td>
-
-        <td className="mx-3">
-          <p className="mb-0">
-            <span
-              className={`badge ${getProjectStatusColor(
-                projectInfo.projectStatusId
-              )}`}
-            >
-              {getProjectStatusName(projectInfo.projectStatusId)}
-            </span>
-          </p>
-        </td>
-
-        <td className={`mx-2 ${ManageProject ? "d-sm-table-cell" : "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"
-            >
-              {loading ? (
-                <div
-                  className="spinner-border spinner-border-sm text-secondary"
-                  role="status"
-                >
-                  <span className="visually-hidden">Loading...</span>
-                </div>
-              ) : (
-                <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={() => navigate(`/projects/details`)}
-                >
-                  <i className="bx bx-detail me-2"></i>
-                  <span className="align-left">View details</span>
-                </a>
-              </li>
-
-              <li onClick={handleShow}>
-                <a className="dropdown-item">
-                  <i className="bx bx-pencil me-2"></i>
-                  <span className="align-left">Modify</span>
-                </a>
-              </li>
-              <li
-                onClick={() =>
-                  navigate(`/activities/records?project=${projectInfo.id}`)
-                }
-              >
-                <a className="dropdown-item">
-                  <i className="bx bx-task me-2"></i>
-                  <span className="align-left">Activities</span>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-    </>
-  );
-};
-
-export default ProjectListView;

src/pages/project/ProjectPage.jsx

@@ -0,0 +1,235 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import { ITEMS_PER_PAGE, MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
+import ProjectListView from "../../components/Project/ProjectListView";
+import GlobalModel from "../../components/common/GlobalModel";
+import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
+import ProjectCardView from "../../components/Project/ProjectCardView";
+import usePagination from "../../hooks/usePagination";
+import { useProjects } from "../../hooks/useProjects";
+import Loader from "../../components/common/Loader";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+
+const ProjectContext = createContext();
+export const useProjectContext = () => {
+  const context = useContext(ProjectContext);
+  if (!context) {
+    throw new Error("useProjectContext must be used within an ProjectProvider");
+  }
+  return context;
+};
+
+const ProjectPage = () => {
+  const [manageProject, setMangeProject] = useState({
+    isOpen: false,
+    Project: null,
+  });
+
+  const [projectList, setProjectList] = useState([]);
+  const [listView, setListView] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
+
+  const [selectedStatuses, setSelectedStatuses] = useState(
+    PROJECT_STATUS.map((s) => s.id)
+  );
+
+  const { data, isLoading, isError, error } = useProjects();
+
+  const contextDispatcher = {
+    setMangeProject,
+  };
+
+  const filteredProjects = projectList.filter((project) => {
+    const matchesStatus = selectedStatuses.includes(project.projectStatusId);
+    const matchesSearch = project.name
+      .toLowerCase()
+      .includes(searchTerm.toLowerCase());
+    return matchesStatus && matchesSearch;
+  });
+
+  const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
+
+  const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
+    filteredProjects,
+    ITEMS_PER_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)) {
+      const grouped = {};
+
+      projects.forEach((project) => {
+        const statusId = project.projectStatusId;
+        if (!grouped[statusId]) grouped[statusId] = [];
+        grouped[statusId].push(project);
+      });
+
+      const sortedGrouped = selectedStatuses
+        .filter((statusId) => grouped[statusId])
+        .flatMap((statusId) =>
+          grouped[statusId].sort((a, b) =>
+            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+          )
+        );
+
+      setProjectList((prev) => {
+        const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
+        return isSame ? prev : sortedGrouped;
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isLoading && data) {
+      sortingProject(data);
+    }
+  }, [data, isLoading, selectedStatuses]);
+
+
+  if(isLoading) return <div className="page-min-h"><Loader/></div>
+   if(isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
+  return (
+    <ProjectContext.Provider value={contextDispatcher}>
+      <div className="container-fluid">
+        <Breadcrumb
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Projects", link: null },
+          ]}
+        />
+
+        <div className="card cursor-pointer mb-5">
+          <div className="card-body p-2 pb-1">
+            <div className="d-flex flex-wrap justify-content-between align-items-start">
+              <div className="d-flex flex-wrap align-items-start">
+                <div className="flex-grow-1 me-2 mb-2">
+                  <input
+                    type="search"
+                    className="form-control form-control-sm"
+                    placeholder="Search projects..."
+                    value={searchTerm}
+                    onChange={(e) => {
+                      setSearchTerm(e.target.value);
+                      setCurrentPage(1);
+                    }}
+                  />
+                </div>
+
+                <div className="d-flex gap-2 mb-2">
+                  <button
+                    type="button"
+                    className={`btn  btn-sm p-1 ${
+                      !listView ? "btn-primary" : "btn-outline-primary"
+                    }`}
+                    onClick={() => setListView(false)}
+                    data-bs-toggle="tooltip"
+                    data-bs-custom-class="tooltip"
+                    title="Card View"
+                  >
+                    <i className="bx bx-grid-alt fs-5"></i>
+                  </button>
+                  <button
+                    type="button"
+                    className={`btn btn-sm p-1  ${
+                      listView ? "btn-primary" : "btn-outline-primary"
+                    }`}
+                    onClick={() => setListView(true)}
+                    data-bs-toggle="tooltip"
+                    data-bs-custom-class="tooltip"
+                    title="List View"
+                  >
+                    <i className="bx bx-list-ul fs-5"></i>
+                  </button>
+                </div>
+
+                <div className="dropdown mt-1">
+                  <a
+                    className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                    data-bs-custom-class="tooltip"
+                    title="Filter"
+                  >
+                    <i className="bx bx-slider-alt ms-1"></i>
+                  </a>
+                  <ul className="dropdown-menu p-2 text-capitalize">
+                    {PROJECT_STATUS.map(({ id, label }) => (
+                      <li key={id}>
+                        <div className="form-check">
+                          <input
+                            className="form-check-input  "
+                            type="checkbox"
+                            checked={selectedStatuses.includes(id)}
+                            onChange={() => handleStatusChange(id)}
+                          />
+                          <label className="form-check-label">{label}</label>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+
+              <div>
+              {HasManageProject && (  <button
+                  className="btn btn-sm btn-primary"
+                  type="button"
+                  onClick={() =>
+                    setMangeProject({ isOpen: true, Project: null })
+                  }
+                >
+                  <i className="bx bx-plus-circle me-2"></i>
+                  <span className="d-none d-md-inline-block">
+                    Add New Project
+                  </span>
+                </button>)}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Project Render here */}
+        {listView ? (
+          <ProjectListView
+            currentItems={currentItems}
+            selectedStatuses={selectedStatuses}
+            handleStatusChange={handleStatusChange}
+            setCurrentPage={setCurrentPage}
+            totalPages={totalPages}
+            isLoading={isLoading}
+          />
+        ) : (
+          <ProjectCardView currentItems={currentItems} setCurrentPage={setCurrentPage} totalPages={totalPages} />
+        )}
+
+        {/* ------------------ */}
+
+        {/* Project Manage UPdate or create */}
+
+        {manageProject.isOpen && (
+          <GlobalModel
+            isOpen={manageProject.isOpen}
+            closeModal={() => setMangeProject({ isOpen: false, Project: null })}
+          >
+            <ManageProjectInfo
+              project={manageProject.Project}
+              onClose={() => setMangeProject({ isOpen: false, Project: null })}
+            />
+          </GlobalModel>
+        )}
+      </div>
+    </ProjectContext.Provider>
+  );
+};
+
+export default ProjectPage;

src/repositories/AuthRepository.jsx

@@ -2,7 +2,7 @@ import { api } from "../utils/axiosClient";
 
 const AuthRepository = {
   //  Public routes (no auth token required)
-  login: (data) => api.postPublic("/api/auth/login/v1", data),
+  login: (data) => api.postPublic("/api/auth/login", data),
   refreshToken: (data) => api.postPublic("/api/auth/refresh-token", data),
   forgotPassword: (data) => api.postPublic("/api/auth/forgot-password", data),
   resetPassword: (data) => api.postPublic("/api/auth/reset-password", data),

src/repositories/MastersRepository.jsx

@@ -32,11 +32,11 @@ export const MasterRespository = {
   getActivites: () => api.get("api/master/activities"),
   createActivity: (data) => api.post("api/master/activity", data),
 
-//Services
+  //Services
   getService: () => api.get("api/master/service/list"),
   createService: (data) => api.post("api/master/service/create", data),
   updateService: (id, data) => api.put(`api/master/service/edit/${id}`, data),
-  "Services": (id) => api.delete(`/api/master/service/delete/${id}`),
+  Services: (id) => api.delete(`/api/master/service/delete/${id}`),
 
   updateActivity: (id, data) =>
     api.post(`api/master/activity/edit/${id}`, data),
@@ -114,10 +114,20 @@ export const MasterRespository = {
   updateDocumentType: (id, data) =>
     api.put(`/api/Master/document-type/edit/${id}`, data),
 
+  getGlobalServices: () => api.get("/api/Master/global-service/list"),
+  getMasterServices: () => api.get("/api/Master/service/list"),
+  getActivityGrops: (serviceId) =>
+    api.get(`/api/Master/activity-group/list?serviceId=${serviceId}`),
+  createActivityGroup: (data) =>
+    api.post(`/api/Master/activity-group/create`, data),
+  updateActivityGrop: (serviceId, data) =>
+    api.put(`/api/Master/activity-group/edit/${serviceId}`, data),
+  getActivitesByGroup: (activityGroupId) =>
+    api.get(`api/master/activities?activityGroupId=${activityGroupId}`),
+  deleteActivityGroup:(id)=>api.delete(`/api/Master/activity-group/delete/${id}`),
 
 
-  getGlobalServices:()=>api.get("/api/Master/global-service/list"),
-  getMasterServices:()=>api.get("/api/Master/service/list"),
+  deleteActivity:(id)=>api.delete(`/api/Master/activity/delete/${id}`),
 
-  getOrganizationType:()=>api.get('/api/Master/organization-type/list')
+  getOrganizationType: () => api.get("/api/Master/organization-type/list"),
 };

src/repositories/OrganizationRespository.jsx

@@ -2,6 +2,8 @@ import { api } from "../utils/axiosClient";
 
 const OrganizationRepository = {
   createOrganization: (data) => api.post("/api/Organization/create", data),
+  updateOrganizaion:(id,data)=>api.put(`/api/Organization/edit/${id}`,data),
+  getOrganizaion:(id)=>api.get(`/api/Organization/details/${id}`),
   getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
     return api.get(
       `/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${
@@ -10,11 +12,33 @@ const OrganizationRepository = {
     );
   },
 
-  getOrganizationBySPRID :(sprid)=>api.get(`/api/Organization/list?sprid=${sprid}`),
+  getOrganizationBySPRID: (sprid) =>
+    api.get(`/api/Organization/list?sprid=${sprid}`),
 
-  assignOrganizationToProject:(data)=>api.post(`/api/Organization/assign/project`,data),
+  assignOrganizationToProject: (data) =>
+    api.post(`/api/Organization/assign/project`, data),
 
-  assignOrganizationToTenanat:(organizationId)=>api.post(`/api/Organization/assign/tenant/${organizationId}`)
+  assignOrganizationToTenanat: (organizationId) =>
+    api.post(`/api/Organization/assign/tenant/${organizationId}`),
+
+  getOrganizationEmployees: (projectId, organizationId, searchString) => {
+    let url = `/api/Employee/list/organizations/${projectId}`;
+    const queryParams = [];
+
+    if (organizationId) {
+      queryParams.push(`organizationId=${organizationId}`);
+    }
+
+    if (searchString) {
+      queryParams.push(`searchString=${encodeURIComponent(searchString)}`);
+    }
+
+    if (queryParams.length > 0) {
+      url += `?${queryParams.join("&")}`;
+    }
+
+    return api.get(url);
+  },
 };
 
 export default OrganizationRepository;

src/repositories/ProjectRepository.jsx

@@ -5,19 +5,20 @@ const ProjectRepository = {
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),
 
-  getProjectAllocation: (projectId, organizationId, serviceId) => {
-    let url = `/api/project/allocation/${projectId}`;
+  getProjectAllocation: (projectId, serviceId, organizationId, employeeStatus) => {
+  let url = `/api/project/allocation/${projectId}`;
 
-    const params = [];
-    if (organizationId) params.push(`organizationId=${organizationId}`);
-    if (serviceId) params.push(`serviceId=${serviceId}`);
+  const params = [];
+  if (organizationId) params.push(`organizationId=${organizationId}`);
+  if (serviceId) params.push(`serviceId=${serviceId}`);
+  if (employeeStatus !== undefined) params.push(`includeInactive=${employeeStatus}`);
 
-    if (params.length > 0) {
-      url += `?${params.join("&")}`;
-    }
+  if (params.length > 0) {
+    url += `?${params.join("&")}`;
+  }
 
-    return api.get(url);
-  },
+  return api.get(url);
+},
 
 
   getEmployeesByProject: (projectId) =>
@@ -42,7 +43,14 @@ const ProjectRepository = {
   projectNameList: () => api.get("/api/project/list/basic"),
 
   getProjectDetails: (id) => api.get(`/api/project/details/${id}`),
-  getProjectInfraByproject: (id) => api.get(`/api/project/infra-details/${id}`),
+  getProjectInfraByproject: (projectId, serviceId) => {
+    let url = `/api/project/infra-details/${projectId}`;
+
+    if (serviceId) {
+      url + `?serviceId=${serviceId}`;
+    }
+    return api.get(url);
+  },
   getProjectTasksByWorkArea: (workAreaId, serviceId) => {
     let url = `/api/project/tasks/${workAreaId}`;
     if (serviceId) {
@@ -58,16 +66,37 @@ const ProjectRepository = {
 
   // Permission Managment for Employee at Project Level
 
-  getProjectLevelEmployeeList: (projectId) => api.get(`/api/Project/get/proejct-level/employees/${projectId}`),
-  getProjectLevelModules: () => api.get(`/api/Project/get/proejct-level/modules`),
-  getProjectLevelEmployeePermissions: (employeeId, projectId) => api.get(`/api/Project/get/project-level-permission/employee/${employeeId}/project/${projectId}`),
-  updateProjectLevelEmployeePermission: (data) => api.post(`/api/Project/assign/project-level-permission`, data),
-  getAllProjectLevelPermission: (projectId) => api.get(`/api/Project/get/all/project-level-permission/${projectId}`),
-
+  getProjectLevelEmployeeList: (projectId) =>
+    api.get(`/api/Project/get/proejct-level/employees/${projectId}`),
+  getProjectLevelModules: () =>
+    api.get(`/api/Project/get/proejct-level/modules`),
+  getProjectLevelEmployeePermissions: (employeeId, projectId) =>
+    api.get(
+      `/api/Project/get/project-level-permission/employee/${employeeId}/project/${projectId}`
+    ),
+  updateProjectLevelEmployeePermission: (data) =>
+    api.post(`/api/Project/assign/project-level-permission`, data),
+  getAllProjectLevelPermission: (projectId) =>
+    api.get(`/api/Project/get/all/project-level-permission/${projectId}`),
 
   // Services
-  getProjectAssignedServices: (projectId) => api.get(`/api/Project/get/assigned/services/${projectId}`),
-  getProjectAssignedOrganizations: (projectId) => api.get(`/api/Project/get/assigned/organization/${projectId}`)
+  getProjectAssignedServices: (projectId) =>
+    api.get(`/api/Project/get/assigned/services/${projectId}`),
+  getProjectAssignedOrganizations: (projectId) =>
+    api.get(`/api/Project/get/assigned/organization/${projectId}`),
+
+  getEmployeeForTaskAssign: (projectId, serviceId, organizationId) => {
+    let url = `/api/Project/get/task/team/${projectId}`;
+
+    const params = [];
+    if (serviceId) params.push(`serviceId=${serviceId}`);
+    if (organizationId) params.push(`organizationId=${organizationId}`);
+
+    if (params.length > 0) {
+      url += `?${params.join("&")}`;
+    }
+    return api.get(url);
+  },
 };
 
 export const TasksRepository = {

src/repositories/TaskRepository.jsx

@@ -1,25 +1,26 @@
 import { api } from "../utils/axiosClient";
 
 export const TasksRepository = {
-  getTaskList: (id, fromdate = null, todate = null) => {
-    let url = `api/task/list?projectId=${id}`;
+  getTaskList: (projectId, pageSize, pageNumber, serviceId, filter) => {
+    const payloadJsonString = JSON.stringify(filter);
+    let url = `api/task/list?projectId=${projectId}&pageSize=${pageSize}&pageNumber=${pageNumber}`;
 
-    if (fromdate) {
-      url += `&dateFrom=${fromdate}`;
+    if (serviceId) {
+      url += `&serviceId=${serviceId}`;
     }
-
-    if (todate) {
-      url += `&dateTo=${todate}`;
+    if (filter && Object.keys(filter).length > 0) {
+      const payloadJsonString = encodeURIComponent(JSON.stringify(filter));
+      url += `&filter=${payloadJsonString}`;
     }
+    debugger
 
     return api.get(url);
   },
 
-  getTaskById:(id)=>api.get(`/api/task/get/${id}`),
+  getTaskById: (id) => api.get(`/api/task/get/${id}`),
   reportTask: (data) => api.post("api/task/report", data),
-  taskComments: ( data ) => api.post( "api/task/comment", data ),
-  auditTask: ( data ) => api.post( '/api/task/approve', data ),
-  
-  assignTask:(data) =>api.post('/api/task/assign',data)
+  taskComments: (data) => api.post("api/task/comment", data),
+  auditTask: (data) => api.post("/api/task/approve", data),
 
+  assignTask: (data) => api.post("/api/task/assign", data),
 };

src/router/AppRoutes.jsx

@@ -13,7 +13,6 @@ import ChangePasswordPage from "../pages/authentication/ChangePassword";
 
 // Home & Protected Pages
 import Dashboard from "../components/Dashboard/Dashboard";
-import ProjectList from "../pages/project/ProjectList";
 import ProjectDetails from "../pages/project/ProjectDetails";
 import ManageProject from "../components/Project/ManageProject";
 import EmployeeList from "../pages/employee/EmployeeList";
@@ -21,7 +20,6 @@ import EmployeeList from "../pages/employee/EmployeeList";
 import EmployeeProfile from "../pages/employee/EmployeeProfile";
 import Inventory from "../pages/project/Inventory";
 import AttendancePage from "../pages/Activities/AttendancePage";
-import DailyTask from "../pages/Activities/DailyTask";
 import TaskPlannng from "../pages/Activities/TaskPlannng";
 import Reports from "../pages/reports/Reports";
 import MasterPage from "../pages/master/MasterPage";
@@ -53,6 +51,8 @@ import CreateTenant from "../pages/Tenant/CreateTenant";
 import OrganizationPage from "../pages/Organization/OrganizationPage";
 import LandingPage from "../pages/Home/LandingPage";
 import TenantSelectionPage from "../pages/authentication/TenantSelectionPage";
+import DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport";
+import ProjectPage from "../pages/project/ProjectPage";
 const router = createBrowserRouter(
   [
     {
@@ -80,7 +80,7 @@ const router = createBrowserRouter(
           element: <HomeLayout />,
           children: [
             { path: "/dashboard", element: <Dashboard /> },
-            { path: "/projects", element: <ProjectList /> },
+            { path: "/projects", element: <ProjectPage /> },
             { path: "/projects/details", element: <ProjectDetails /> },
             { path: "/project/manage/:projectId", element: <ManageProject /> },
             { path: "/employees", element: <EmployeeList /> },
@@ -90,7 +90,7 @@ const router = createBrowserRouter(
             { path: "/directory", element: <DirectoryPage /> },
             { path: "/inventory", element: <Inventory /> },
             { path: "/activities/attendance", element: <AttendancePage /> },
-            { path: "/activities/records/:projectId?", element: <DailyTask /> },
+            { path: "/activities/records/:projectId?", element: <DailyProgrssReport /> },
             { path: "/activities/task", element: <TaskPlannng /> },
             { path: "/activities/reports", element: <Reports /> },
             { path: "/gallary", element: <ImageGalleryPage /> },

src/router/ProtectedRoute.jsx

@@ -2,13 +2,69 @@ import React, { useState, useEffect } from "react";
 import { Navigate, Outlet } from "react-router-dom";
 import { jwtDecode } from "jwt-decode";
 import AuthRepository from "../repositories/AuthRepository";
+import { removeSession } from "../utils/authUtils";
+
+const isTokenExpired = (token) => {
+  if (!token) return true;
+  try {
+    const { exp } = jwtDecode(token);
+    return exp * 1000 < Date.now();
+  } catch {
+    return true;
+  }
+};
+
+const validateToken = async () => {
+  const token =
+    localStorage.getItem("jwtToken") ||
+    sessionStorage.getItem("jwtToken");
+
+  const refreshTokenStored =
+    localStorage.getItem("refreshToken") ||
+    sessionStorage.getItem("refreshToken");
+
+  if (!refreshTokenStored){
+    console.log("no refrh tokem");
+    removeSession()
+    return false
+  };
+
+  if (isTokenExpired(token)) {
+    return await attemptTokenRefresh(refreshTokenStored);
+  }
+
+  return true;
+};
+
+const attemptTokenRefresh = async (storedRefreshToken) => {
+  try {
+    const currentToken =
+      localStorage.getItem("jwtToken") ||
+      sessionStorage.getItem("jwtToken");
+
+    const response = await AuthRepository.refreshToken({
+      token: currentToken,
+      refreshToken: storedRefreshToken,
+    });
+
+    const { token: newToken, refreshToken: newRefreshToken } = response.data;
+
+    if (localStorage.getItem("jwtToken")) {
+      localStorage.setItem("jwtToken", newToken);
+      localStorage.setItem("refreshToken", newRefreshToken);
+    } else {
+      sessionStorage.setItem("jwtToken", newToken);
+      sessionStorage.setItem("refreshToken", newRefreshToken);
+    }
+
+    return true;
+  } catch (error) {
+    console.error("Token refresh failed:", error);
+    return false;
+  }
+};
 
 const ProtectedRoute = () => {
-  // const isAuthenticated = localStorage.getItem("jwtToken"); // Example authentication check
-  // // const isAuthenticated = true;
-  // isTokenValid();
-  // return isAuthenticated ? <Outlet /> : <Navigate to="/auth/login" />
-
   const [isAuthenticated, setIsAuthenticated] = useState(null);
 
   useEffect(() => {
@@ -21,80 +77,10 @@ const ProtectedRoute = () => {
   }, []);
 
   if (isAuthenticated === null) {
-    return <div>Loading...</div>; // Show a loader while checking
+    return <div>Loading...</div>;
   }
 
   return isAuthenticated ? <Outlet /> : <Navigate to="/auth/login" replace />;
 };
 
-// Function to check if the token is expired
-const isTokenExpired = (token) => {
-  if (!token) return true;
-  try {
-    const { exp } = jwtDecode(token);
-    return exp * 1000 < Date.now(); // Check if expired
-  } catch (error) {
-    return true; // If decoding fails, treat as expired
-  }
-};
-
-// Function to validate and refresh the token if expired
-export const validateToken = async () => {
-  const token = localStorage.getItem("jwtToken");
-  const refreshTokenStored = localStorage.getItem("refreshToken");
-  // If refresh token is absent, cannot proceed
-  if (!refreshTokenStored) {
-    console.warn("No refresh token available. Redirecting to login.");
-    return false;
-  }
-
-  // If access token expired, try to refresh
-  if (isTokenExpired(token)) {
-    return await attemptTokenRefresh(refreshTokenStored);
-  }
-  return true;
-};
-
-// Attempt to refresh the access token
-const attemptTokenRefresh = async (storedRefreshToken) => {
-  try {
-    const response = await AuthRepository.refreshToken({
-      token: localStorage.getItem("jwtToken"),
-      refreshToken: storedRefreshToken,
-    });
-
-    localStorage.setItem("jwtToken", response.data.token);
-    localStorage.setItem("refreshToken", response.data.refreshToken);
-    return true;
-    // api
-    //   .post("/api/auth/refresh-token", {
-    //     token: localStorage.getItem("jwtToken"),
-    //     refreshToken: refreshToken,
-    //   })
-    //   .then((data) => {
-    //     localStorage.setItem("jwtToken", response.data.token);
-    //     localStorage.setItem("refreshToken", response.data.refreshToken);
-    //     return true;
-    //   })
-    //   .catch((error) => {
-    //     console.error("Token refresh failed:", error);
-    //   });
-
-    // const refreshToken = localStorage.getItem("refreshToken");
-    // const response = await axiosClient.post(`/api/auth/refresh-token`, {
-    //   token: localStorage.getItem("jwtToken"),
-    //   refreshToken: refreshToken,
-    // });
-
-    // if (response.status === 200) {
-    //   localStorage.setItem("jwtToken", response.data.token);
-    //   localStorage.setItem("refreshToken", response.data.refreshToken);
-    //   return true;
-    // }
-  } catch (error) {
-    console.error("Token refresh failed:", error);
-    return false;
-  }
-};
-
 export default ProtectedRoute;