added confirmation modal inside serviceproject employee list

2025-11-17 12:44:01 +05:30 · 2025-11-17 12:44:01 +05:30 · b68f8306fd
commit b68f8306fd
parent 8761c128e6
6 changed files with 208 additions and 151 deletions
--- a/src/components/ServiceProject/ManageJob.jsx
+++ b/src/components/ServiceProject/ManageJob.jsx
@ -54,6 +54,7 @@ const ManageJob = ({ Job }) => {
    isError: isJobError,
    error: jobError,
  } = useServiceProjectJobDetails(Job);
+  // const {} = useSer

  const { mutate: CreateJob, isPending } = useCreateServiceProjectJob(() => {
    reset();
@ -67,7 +68,7 @@ const ManageJob = ({ Job }) => {

    formData.startDate = localToUtc(formData.startDate);
    formData.dueDate = localToUtc(formData.dueDate);
-    CreateJob(formData)
+    CreateJob(formData);
  };

  useEffect(() => {
@ -80,7 +81,7 @@ const ManageJob = ({ Job }) => {
      assignees: assignedEmployees,
      startDate: JobData.startDate ?? null,
      dueDate: JobData.dueDate ?? null,
-      tags: [],
+      tags: JobData.tags ?? [],
    });
  }, [JobData]);

@ -102,9 +103,9 @@ const ManageJob = ({ Job }) => {
              control={control}
              render={({ field }) => (
                <SelectField
-                  label="Project"
+                  label="Status"
                  options={data?.data}
-                  placeholder="Choose a Project"
+                  placeholder="Choose a Status"
                  required
                  labelKeyKey="name"
                  valueKeyKey="id"
@ -121,7 +122,8 @@ const ManageJob = ({ Job }) => {
              name="startDate"
              control={control}
              placeholder="DD-MM-YYYY"
-              className="w-full form-control-md"
+              className="w-full"
+              size="md"
            />
          </div>
          <div className="col-12 col-md-6 mb-2 mb-md-4">
@ -131,6 +133,7 @@ const ManageJob = ({ Job }) => {
              minDate={watch("startDate")}
              name="dueDate"
              className="w-full"
+               size="md"
            />
          </div>
          <div className="col-12 col-md-6 mb-2 mb-md-4">
--- a/src/components/ServiceProject/ServiceProjectSchema.jsx
+++ b/src/components/ServiceProject/ServiceProjectSchema.jsx
@ -3,15 +3,9 @@ import { PROJECT_STATUS } from "../../utils/constants";

 //#region  Service Project
 export const projectSchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .min(1, "Name is required"),
+  name: z.string().trim().min(1, "Name is required"),

-  shortName: z
-    .string()
-    .trim()
-    .min(1, "Short name is required"),
+  shortName: z.string().trim().min(1, "Short name is required"),

  clientId: z.string().trim().min(1, { message: "Client is required" }),

@ -38,10 +32,7 @@ export const projectSchema = z.object({
    .min(7, "Invalid phone number")
    .max(15, "Phone number too long"),

-  contactEmail: z
-    .string()
-    .trim()
-    .email("Invalid email address"),
+  contactEmail: z.string().trim().email("Invalid email address"),
 });

 export const defaultProjectValues = {
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx
@ -15,17 +15,21 @@ import {
 } from "../../../hooks/useServiceProject";
 import { SpinnerLoader } from "../../common/Loader";
 import showToast from "../../../services/toastService";
+import ConfirmModal from "../../common/ConfirmModal";

 const ServiceProjectTeamAllocation = () => {
  const { isOpen, onClose, data: Project } = useModal("ServiceTeamAllocation");
-  const [deletingId, setSeletingId] = useState(null);
+  const [deletingEmp, setSeletingEmp] = useState({
+    employee: null,
+    isOpen: false,
+  });
  const {
    data: Team,
    isLoading: isTeamLoading,
    isError: isTeamError,
    error: teamError,
  } = useServiceProjectTeam(Project?.projectId, true);
-  const [isManageEmployee, setIsMenageEmployee] = useState(false);
+  const [isAddEmployee, setIsAddEmployee] = useState(false);
  const [nonDuplicateEmployee, setNonDuplicateEmployee] = useState([]);
  const [selectedTeam, setSelectTeam] = useState(null);
  const [selectedEmployees, setSelectedEmployees] = useState([]);
@ -44,7 +48,10 @@ const ServiceProjectTeamAllocation = () => {
  const { mutate: AllocationTeam, isPending } = useAllocationServiceProjectTeam(
    () => {
      setSelectedEmployees([]);
-      setSeletingId(null);
+      setSeletingEmp({
+        employee: null,
+        isOpen: false,
+      });
    }
  );

@ -61,7 +68,6 @@ const ServiceProjectTeamAllocation = () => {
  };

  const handleDeAllocation = (emp) => {
-    setSeletingId(emp?.id);
    let payload = [
      {
        projectId: Project?.projectId,
@ -76,7 +82,7 @@ const ServiceProjectTeamAllocation = () => {
  useEffect(() => {
    if (selectedEmployees?.length > 0 && !selectedTeam) {
      handleRemove(selectedEmployees[0]?.id);
-      showToast(`Please select a first role`, "warning");
+      showToast(`Please select a  role`, "warning");
    }
    if (Team?.length > 0 && selectedEmployees?.length > 0) {
      setNonDuplicateEmployee((prev) => {
@ -103,125 +109,151 @@ const ServiceProjectTeamAllocation = () => {
  }, [Team, selectedEmployees, selectedTeam]);

  const TeamAllocationBody = (
-    <div className=" text-start">
-      <div className="row">
-        <div className="d-flex justify-content-end">
-          <button
-            className="btn btn-sm btn-primary"
-            onClick={() => setIsMenageEmployee(!isManageEmployee)}
-          >
-            <i className="bx bx-plus-circle me-2"></i>Add Employee
-          </button>
+    <>
+      <ConfirmModal
+        type="delete"
+        header="Remove Employee"
+        message="Are you sure you want remove?"
+        onSubmit={handleDeAllocation}
+        onClose={() => setSeletingEmp({ employee: null, isOpen: false })}
+        loading={isPending}
+        paramData={deletingEmp.employee}
+        isOpen={deletingEmp.isOpen}
+      />
+      <div className=" text-start">
+        <div className="row">
+          <div className="d-flex justify-content-end">
+          {!isAddEmployee &&  <button
+              className="btn btn-sm btn-primary"
+              onClick={() => setIsAddEmployee(!isAddEmployee)}
+            >
+              <i className="bx bx-plus-circle me-2"></i>Add Employee
+            </button>}
+          </div>
+
+          {isAddEmployee && (
+            <>
+              <div className="col-12 col-md-6 mb-3">
+                <SelectField
+                  label="Select Role"
+                  required
+                  options={data}
+                  value={selectedTeam}
+                  labelKey="name"
+                  valueKey="id"
+                  onChange={(e) => {
+                    setSelectedEmployees([]);
+                    setSelectTeam(e);
+                  }}
+                  isLoading={isLoading}
+                />
+              </div>
+
+              <div className="col-12 col-md-6 mb-3">
+                <SelectEmployeeServerSide
+                  label="Select Employee"
+                  isMultiple={true}
+                  isFullObject={true}
+                  value={selectedEmployees}
+                  onChange={setSelectedEmployees}
+                />
+              </div>
+              <div className="col-12 d-flex flex-row gap-2 flex-wrap">
+                {selectedEmployees.map((e) => (
+                  <EmployeeChip handleRemove={handleRemove} employee={e} />
+                ))}
+              </div>
+            </>
+          )}
        </div>
-
-        {isManageEmployee && (
-          <>
-            <div className="col-12 col-md-6 mb-3">
-              <SelectField
-                label="Select Role"
-                required
-                options={data}
-                value={selectedTeam}
-                labelKey="name"
-                valueKey="id"
-                onChange={(e) => {
-                  setSelectedEmployees([]);
-                  setSelectTeam(e);
-                }}
-                isLoading={isLoading}
-              />
-            </div>
-
-            <div className="col-12 col-md-6 mb-3">
-              <SelectEmployeeServerSide
-                label="Select Employee"
-                isMultiple={true}
-                isFullObject={true}
-                value={selectedEmployees}
-                onChange={setSelectedEmployees}
-              />
-            </div>
-            <div className="col-12 d-flex flex-row gap-2 flex-wrap">
-              {selectedEmployees.map((e) => (
-                <EmployeeChip handleRemove={handleRemove} employee={e} />
-              ))}
-            </div>
-          </>
+        { isAddEmployee && (
+          <div className="d-flex justify-content-end">
+            {" "}
+              <button
+            type="button"
+            className="btn btn-label-secondary btn-sm me-2"
+            onClick={()=>setIsAddEmployee(false)}
+            aria-label="Close"
+            disabled={isPending }
+          >
+            Cancel
+          </button>
+            <button
+              className="btn btn-sm btn-primary"
+              disabled={isPending}
+              onClick={AssignEmployee}
+            >
+              {isPending && !deletingEmp.employee ? "Please wait..." : "Save"}
+            </button>
+          </div>
        )}
-      </div>
-      {selectedEmployees?.length > 0 && isManageEmployee && (
-        <div className="d-flex justify-content-end">
-          {" "}
-          <button
-            className="btn btn-sm btn-primary"
-            disabled={isPending}
-            onClick={AssignEmployee}
-          >
-            {isPending && !deletingId ? "Please wait..." : "Save"}
-          </button>
-        </div>
-      )}
-      <div className="col-12">
-        <table className="table text-center ">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Role</th>
-              <th>Action</th>
-            </tr>
-          </thead>
+        <div className="col-12">
+          <table className="table text-center ">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Role</th>
+                <th>Action</th>
+              </tr>
+            </thead>

-          <tbody>
-            {Team?.length > 0 ? (
-              Team?.map((emp) => (
-                <tr key={emp?.id}>
-                  <td className="w-min">
-                    <div className="d-flex align-items-center ">
-                      {" "}
-                      <Avatar
-                        size="xs"
-                        firstName={emp?.employee?.firstName}
-                        lastName={emp?.employee?.lastName}
-                      />
-                      <span className="fw-medium">{`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}</span>
-                    </div>
-                  </td>
-                  <td>{emp?.teamRole?.name}</td>
-                  <td className="">
-                    {deletingId === emp.id ? (
-                      <div className="spinner-border spinner-border-sm "></div>
+            <tbody>
+              {Team?.length > 0 ? (
+                Team?.map((emp) => (
+                  <tr key={emp?.id}>
+                    <td className="w-min">
+                      <div className="d-flex align-items-center ">
+                        {" "}
+                        <Avatar
+                          size="xs"
+                          firstName={emp?.employee?.firstName}
+                          lastName={emp?.employee?.lastName}
+                        />
+                        <span className="fw-medium">{`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}</span>
+                      </div>
+                    </td>
+                    <td>{emp?.teamRole?.name}</td>
+                    <td className="">
+                      {deletingEmp?.emplyee?.id === emp.id && isPending ? (
+                        <div className="spinner-border spinner-border-sm "></div>
+                      ) : (
+                        <span disabled={isPending}>
+                          <i
+                            className="bx bx-trash bx-sm text-danger cursor-pointer"
+                            onClick={() =>
+                              setSeletingEmp({ employee: emp, isOpen: true })
+                            }
+                          ></i>
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td
+                    colSpan={3}
+                    className="text-muted border-0 d-flex justify-content-center "
+                  >
+                    {isTeamLoading ? (
+                      <SpinnerLoader />
                    ) : (
-                      <span disabled={isPending}>
-                        <i
-                          className="bx bx-trash bx-sm text-danger cursor-pointer"
-                          onClick={() => handleDeAllocation(emp)}
-                        ></i>
-                      </span>
+                      <div className="bg-light-secondary py-3 w-50 m-auto my-2">
+                        <i className="bx bx-box bx-md text-primary"></i>
+                        <p className="fw-medium mt-3">
+                          {" "}
+                          Please Add a Employee{" "}
+                        </p>
+                      </div>
                    )}
                  </td>
                </tr>
-              ))
-            ) : (
-              <tr>
-                <td
-                  colSpan={3}
-                  className="text-muted border-0 d-flex justify-content-center "
-                >
-                  {isTeamLoading ? (
-                    <SpinnerLoader />
-                  ) : (
-                    <div className="bg-light-secondary py-3 w-50 m-auto my-2">
-                      <i className="bx bx-box bx-md text-primary"></i>
-                      <p className="fw-medium mt-3"> Please Add a Employee </p>
-                    </div>
-                  )}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
+              )}
+            </tbody>
+          </table>
+        </div>
      </div>
-    </div>
+    </>
  );

  return (
--- a/src/components/common/DatePicker.jsx
+++ b/src/components/common/DatePicker.jsx
@ -4,6 +4,7 @@ import { useController } from "react-hook-form";
 const DatePicker = ({
  name,
  control,
+  size="sm",
  placeholder = "DD-MM-YYYY",
  className = "",
  allowText = false,
@ -51,7 +52,7 @@ const DatePicker = ({
    <div className={`position-relative ${className} w-max `}>
      <input
        type="text"
-        className="form-control form-control form-control-sm"
+        className={`form-control form-control form-control-${size}`}
        placeholder={placeholder}
        value={displayValue}
        onChange={(e) => {
--- a/src/hooks/useEmployees.js
+++ b/src/hooks/useEmployees.js
@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState,useCallback } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import { RolesRepository } from "../repositories/MastersRepository";
 import EmployeeRepository from "../repositories/EmployeeRepository";
@ -9,6 +9,36 @@ import { useSelector } from "react-redux";
 import { store } from "../store/store";
 import { queryClient } from "../layouts/AuthLayout";

+
+export const useUserCache = () => {
+  const [userCache, setUserCache] = useState({});
+
+  const addToCache = (id, user) => {
+    setUserCache((prev) => ({ ...prev, [id]: user }));
+  };
+
+  const getUser = async (id) => {
+    if (userCache[id]) return userCache[id];
+
+    try {
+      const res = await EmployeeRepository.getEmployeeProfile(id);
+      if (res?.data) {
+        addToCache(id, res.data);
+        return res.data;
+      }
+    } catch (err) {
+      console.error("User not found", id);
+      return null;
+    }
+  };
+
+  return {
+    userCache,
+    getUser,
+    addToCache,
+  };
+};
+
 // Query ---------------------------------------------------------------------------

 export const useEmployee = (employeeId) => {
@ -342,25 +372,25 @@ export const useUpdateEmployeeRoles = ({
  };
 };

-
-export const useOrganizationHierarchy=(employeeId)=>{
-return useQuery({
-  queryKey:["organizationHierarchy",employeeId],
-  queryFn:async()=> {
-    const resp = await EmployeeRepository.getOrganizaionHierarchy(employeeId);
-    return resp.data;
-  },
-  enabled:!!employeeId
-})
-}
-
-
+export const useOrganizationHierarchy = (employeeId) => {
+  return useQuery({
+    queryKey: ["organizationHierarchy", employeeId],
+    queryFn: async () => {
+      const resp = await EmployeeRepository.getOrganizaionHierarchy(employeeId);
+      return resp.data;
+    },
+    enabled: !!employeeId,
+  });
+};

 export const useManageEmployeeHierarchy = (employeeId, onSuccessCallBack) => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (payload) => {
-      return await EmployeeRepository.manageOrganizationHierarchy(employeeId, payload);
+      return await EmployeeRepository.manageOrganizationHierarchy(
+        employeeId,
+        payload
+      );
    },
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({
@ -378,4 +408,4 @@ export const useManageEmployeeHierarchy = (employeeId, onSuccessCallBack) => {
      );
    },
  });
-};
+};
--- a/src/hooks/useServiceProject.jsx
+++ b/src/hooks/useServiceProject.jsx
@ -132,7 +132,7 @@ export const useAllocationServiceProjectTeam = (onSuccessCallback) => {
          "success"
        );
      } else {
-        showToast(`Employee DeAllocated successfully`, "success");
+        showToast(`Employee removed successfully`, "success");
      }
    },
    onError: (error) => {