clear and structured code

src/components/Project/ProjectPermission.jsx

@@ -12,16 +12,15 @@ import { z } from "zod";
 import showToast from "../../services/toastService";
 
 export const ProjectPermissionSchema = z.object({
-  employeeId: z.string(),
+  employeeId: z.string().min(1, "Employee is required"),
   selectedPermissions: z.array(z.string()).optional(),
 });
 
 const ProjectPermission = () => {
   const selectedProject = useSelectedproject();
 
-  const { data: ProjectModules } = useProjectLevelModules();
-  const { employees = [], isLoading: isEmployeeLoading } =
-    useEmployeesByProject(selectedProject);
+  const { data: ProjectModules = [] } = useProjectLevelModules();
+  const { employees = [], loading } = useEmployeesByProject(selectedProject);
 
   const {
     register,
@@ -39,14 +38,14 @@ const ProjectPermission = () => {
 
   const selectedEmployee = watch("employeeId");
 
-  // Fetch permissions for the selected employee
   const { data: selectedEmpPermissions } = useProjectLevelEmployeePermission(
     selectedEmployee || "",
     selectedProject
   );
 
-  // Update form state when employee permissions change
   useEffect(() => {
+    if (!employees.length) return;
+
     const enabledPerms =
       selectedEmpPermissions?.permissions
         ?.filter((perm) => perm.isEnabled)
@@ -58,18 +57,17 @@ const ProjectPermission = () => {
     });
   }, [selectedEmpPermissions, reset, selectedEmployee, employees]);
 
-  const { mutate: UpdatePermission, isPending } =
+  const { mutate: updatePermission, isPending } =
     useUpdateProjectLevelEmployeePermission();
+
   const onSubmit = (formData) => {
-    // Guard 1: Ensure employee selected
     if (!formData.employeeId) {
-      console.warn("No employee selected");
+      showToast("Please select an employee", "warn");
       return;
     }
 
     const existingPermissions = selectedEmpPermissions?.permissions || [];
 
-    // Build payload
     const payloadPermissions =
       existingPermissions.length > 0
         ? existingPermissions.map((perm) => ({
@@ -81,20 +79,19 @@ const ProjectPermission = () => {
             isEnabled: true,
           }));
 
-    // Guard 2: Prevent API call if no permissions at all
     if (payloadPermissions.length === 0) {
       showToast("No permissions selected", "warn");
       return;
     }
 
-    // Guard 3 (optional): Prevent API call if nothing changed
     const hasChanges = existingPermissions.some(
       (perm) =>
         perm.isEnabled !==
         (formData.selectedPermissions?.includes(perm.id) || false)
     );
+
     if (!hasChanges && existingPermissions.length > 0) {
-      showToast("No changes detected", "warn");
+      showToast("No changes detected", "info");
       return;
     }
 
@@ -104,75 +101,79 @@ const ProjectPermission = () => {
       permission: payloadPermissions,
     };
 
-    UpdatePermission(payload);
+    updatePermission(payload);
   };
 
   return (
     <div className="row">
-      {isEmployeeLoading ? (
-        <>Loading...</>
-      ) : (
-        <form className="row" onSubmit={handleSubmit(onSubmit)}>
-          <div className="d-flex align-items-end gap-2">
-            <div className="text-start">
-              <label className="form-label">Select Employee</label>
-              <select
-                className="form-select form-select-sm"
-                {...register("employeeId")}
-                disabled={isPending}
-              >
-                <option value="">-- Select --</option>
-                {employees.map((emp) => (
-                  <option key={emp.id} value={emp.id}>
-                    {emp.firstName} {emp.lastName}
-                  </option>
-                ))}
-              </select>
-              {errors.employeeId && (
-                <div className="text-danger small">
-                  {errors.employeeId.message}
-                </div>
-              )}
-            </div>
-            <button className="btn btn-sm btn-primary">
-              {isPending ? "Please Wait..." : "Update Permission"}
-            </button>
-          </div>
-
-          {ProjectModules?.map((feature) => (
-            <div key={feature.id} className="row my-1">
-              <div className="col-12 text-start fw-semibold mb-2">
-                {feature.name}
-              </div>
-              <div className="col-12">
-                <div className="row">
-                  {feature.featurePermissions?.map((perm) => (
-                    <div
-                      className="col-12 col-sm-6 col-md-4 mb-3"
-                      key={perm.id}
-                    >
-                      <label
-                        className="form-check-label d-flex align-items-center"
-                        htmlFor={perm.id}
-                      >
-                        <input
-                          type="checkbox"
-                          className="form-check-input me-2"
-                          id={perm.id}
-                          value={perm.id}
-                          {...register("selectedPermissions")}
-                        />
-                        {perm.name}
-                      </label>
-                    </div>
+      <form className="row" onSubmit={handleSubmit(onSubmit)}>
+        {/* Employee Dropdown */}
+        <div className="d-flex align-items-end gap-2">
+          <div className="text-start">
+            <label className="form-label">Select Employee</label>
+            <select
+              className="form-select form-select-sm"
+              {...register("employeeId")}
+              disabled={isPending}
+            >
+              {loading ? (
+                <option value="">Loading...</option>
+              ) : (
+                <>
+                  <option value="">-- Select --</option>
+                  {employees.map((emp) => (
+                    <option key={emp.id} value={emp.id}>
+                      {emp.firstName} {emp.lastName}
+                    </option>
                   ))}
-                </div>
+                </>
+              )}
+            </select>
+            {errors.employeeId && (
+              <div className="text-danger small">
+                {errors.employeeId.message}
               </div>
-              <hr className="my-2" />
+            )}
+          </div>
+          <button className="btn btn-sm btn-primary" disabled={isPending}>
+            {isPending ? "Please Wait..." : "Update Permission"}
+          </button>
+        </div>
+
+        {/* Permissions */}
+        {ProjectModules.map((feature) => (
+          <div key={feature.id} className="row my-2">
+            <div className="col-12 text-start fw-semibold mb-2">
+              {feature.name}
             </div>
-          ))}
-        </form>
-      )}
+            <div className="col-12">
+              <div className="row">
+                {feature.featurePermissions?.map((perm) => (
+                  <div
+                    className="col-12 col-sm-6 col-md-4 mb-2"
+                    key={perm.id}
+                  >
+                    <label
+                      className="form-check-label d-flex align-items-center"
+                      htmlFor={perm.id}
+                    >
+                      <input
+                        type="checkbox"
+                        className="form-check-input me-2"
+                        id={perm.id}
+                        value={perm.id}
+                        {...register("selectedPermissions")}
+                      />
+                      {perm.name}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <hr className="my-2" />
+          </div>
+        ))}
+      </form>
     </div>
   );
 };