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 { data: ProjectModules = [] } = useProjectLevelModules();
-  const { employees = [], isLoading: isEmployeeLoading } =
+  const { employees = [], loading } = useEmployeesByProject(selectedProject);
-    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,15 +101,13 @@ const ProjectPermission = () => {
       permission: payloadPermissions,
     };
 
-    UpdatePermission(payload);
+    updatePermission(payload);
   };
 
   return (
     <div className="row">
-      {isEmployeeLoading ? (
-        <>Loading...</>
-      ) : (
       <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>
@@ -121,12 +116,18 @@ const ProjectPermission = () => {
               {...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>
                   ))}
+                </>
+              )}
             </select>
             {errors.employeeId && (
               <div className="text-danger small">
@@ -134,13 +135,14 @@ const ProjectPermission = () => {
               </div>
             )}
           </div>
-            <button className="btn btn-sm btn-primary">
+          <button className="btn btn-sm btn-primary" disabled={isPending}>
             {isPending ? "Please Wait..." : "Update Permission"}
           </button>
         </div>
 
-          {ProjectModules?.map((feature) => (
+        {/* Permissions */}
-            <div key={feature.id} className="row my-1">
+        {ProjectModules.map((feature) => (
+          <div key={feature.id} className="row my-2">
             <div className="col-12 text-start fw-semibold mb-2">
               {feature.name}
             </div>
@@ -148,7 +150,7 @@ const ProjectPermission = () => {
               <div className="row">
                 {feature.featurePermissions?.map((perm) => (
                   <div
-                      className="col-12 col-sm-6 col-md-4 mb-3"
+                    className="col-12 col-sm-6 col-md-4 mb-2"
                     key={perm.id}
                   >
                     <label
@@ -172,7 +174,6 @@ const ProjectPermission = () => {
           </div>
         ))}
       </form>
-      )}
     </div>
   );
 };