fix

client/src/components/employees/EmployeeList.js

@@ -127,6 +127,29 @@ const EmployeeList = () => {
     });
   };
 
+  const isHrPermissionGroupFullySelected = (permissionItems = []) => {
+    return permissionItems.length > 0 && permissionItems.every((permissionKey) => selectedHrPermissions.includes(permissionKey));
+  };
+
+  const toggleHrPermissionGroup = (permissionItems = [], checked) => {
+    if (!Array.isArray(permissionItems) || permissionItems.length === 0) return;
+    setSelectedHrPermissions((prev) => {
+      const nextSet = new Set(prev);
+      permissionItems.forEach((permissionKey) => {
+        if (permissionKey === SYSTEM_ACCESS_PERMISSION) {
+          nextSet.add(SYSTEM_ACCESS_PERMISSION);
+          return;
+        }
+        if (checked) {
+          nextSet.add(permissionKey);
+        } else {
+          nextSet.delete(permissionKey);
+        }
+      });
+      return Array.from(nextSet);
+    });
+  };
+
   const saveHrPermissions = () => {
     if (!editingHrUser?.employee_id) return;
     setIsSavingHrPermission(true);
@@ -292,7 +315,19 @@ const EmployeeList = () => {
           </div>
           {Object.entries(EMPLOYEE_PERMISSION_GROUPS).map(([groupName, permissionItems]) => (
             <div key={groupName} className="mb-3">
-              <div className="text-primary mb-1">{groupName}</div>
+              <div className="d-flex align-items-center justify-content-between mb-1" style={{ gap: '16px' }}>
+                <div className="text-primary">{groupName}</div>
+                <label>
+                  <input
+                    type="checkbox"
+                    className="me-2"
+                    checked={isHrPermissionGroupFullySelected(permissionItems)}
+                    onChange={(e) => toggleHrPermissionGroup(permissionItems, e.currentTarget.checked)}
+                    disabled={groupName === 'System'}
+                  />
+                  Select All
+                </label>
+              </div>
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px 18px' }}>
                 {permissionItems.map((permissionKey) => (
                   <label key={permissionKey} style={{ minWidth: '280px' }}>

client/src/components/employees/ExternalEmployeesImport.js

@@ -93,6 +93,29 @@ const ExternalEmployeesImport = () => {
     });
   };
 
+  const isPermissionGroupFullySelected = (permissionItems = []) => {
+    return permissionItems.length > 0 && permissionItems.every((permissionKey) => selectedPermissions.includes(permissionKey));
+  };
+
+  const togglePermissionGroup = (permissionItems = [], checked) => {
+    if (!Array.isArray(permissionItems) || permissionItems.length === 0) return;
+    setSelectedPermissions((prev) => {
+      const nextSet = new Set(prev);
+      permissionItems.forEach((permissionKey) => {
+        if (permissionKey === SYSTEM_ACCESS_PERMISSION) {
+          nextSet.add(SYSTEM_ACCESS_PERMISSION);
+          return;
+        }
+        if (checked) {
+          nextSet.add(permissionKey);
+        } else {
+          nextSet.delete(permissionKey);
+        }
+      });
+      return Array.from(nextSet);
+    });
+  };
+
   const savePermissions = () => {
     if (!selectedEmployee?.employee_id) return;
     setSaving(true);
@@ -209,7 +232,19 @@ const ExternalEmployeesImport = () => {
           </div>
           {Object.entries(EMPLOYEE_PERMISSION_GROUPS).map(([groupName, permissionItems]) => (
             <div key={groupName} className="mb-3">
-              <div className="text-primary mb-1">{groupName}</div>
+              <div className="d-flex align-items-center justify-content-between mb-1" style={{ gap: "16px" }}>
+                <div className="text-primary">{groupName}</div>
+                <label>
+                  <input
+                    type="checkbox"
+                    className="me-2"
+                    checked={isPermissionGroupFullySelected(permissionItems)}
+                    onChange={(e) => togglePermissionGroup(permissionItems, e.currentTarget.checked)}
+                    disabled={groupName === "System"}
+                  />
+                  Select All
+                </label>
+              </div>
               <div style={{ display: "flex", flexWrap: "wrap", gap: "10px 18px" }}>
                 {permissionItems.map((permissionKey) => (
                   <label key={permissionKey} style={{ minWidth: "280px" }}>