diff --git a/src/components/dashboard/OfficerManagement/OfficerManagement.tsx b/src/components/dashboard/OfficerManagement/OfficerManagement.tsx index ea75b49..76348ec 100644 --- a/src/components/dashboard/OfficerManagement/OfficerManagement.tsx +++ b/src/components/dashboard/OfficerManagement/OfficerManagement.tsx @@ -1117,211 +1117,369 @@ export default function OfficerManagement() { }; return ( -
- {/* Toast notifications are handled by react-hot-toast */} - - {/* Admin status indicator */} - {isCurrentUserAdmin && ( -
- - - - You have administrator privileges and can manage all officers -
- )} - -
- {/* Add New Officer Section */} -
-

- - - - Add New Officer -

-
+
+ {/* Header Section with Breadcrumb */} +
+
+ {/* Breadcrumb */} + + + {/* Page Title and Description */} +
- -
- searchUsers(userSearchTerm)} - /> -
- {selectedUsers.length > 0 ? ( -
- {selectedUsers.length} -
- ) : null} - - +

+
+ +
+ Officer Management +

+

Manage organization officers, roles, and permissions

+
+ + {/* Quick Stats */} +
+
+
+
Total Officers
+
{officers.length}
+
+
+
+
+
Active
+
+ {officers.filter(o => o.type === OfficerTypes.GENERAL || o.type === OfficerTypes.EXECUTIVE).length} +
+
+
+
+
- {/* User search results dropdown */} - {userSearchTerm.length > 0 && ( -
-
- - {userSearchResults.length > 0 - ? `${userSearchResults.length} result${userSearchResults.length !== 1 ? 's' : ''}` - : 'No results found'} - -
+ {/* Admin status indicator */} + {isCurrentUserAdmin && ( +
+
+ + + +
+
+ Administrator Access +

You have full privileges to manage all officers and sensitive operations

+
+
+ )} +
+
+ + {/* Main Content */} +
+ {/* Management Cards Grid */} +
+ {/* Add New Officer Section */} +
+
+
+
+
+ + + +
+
+
+
+

Add New Officer

+

Search and assign roles to organization members

+
+
+ {selectedUsers.length > 0 && ( +
+
+ {selectedUsers.length} selected +
+ )} +
+ + + {/* Enhanced User Search Section */} +
+
+ + {userSearchResults.length > 0 && userSearchTerm && ( + + {userSearchResults.length} found + + )} +
+ +
+
+ searchUsers(userSearchTerm)} + /> + + {/* Search Icon */} +
+
+ + + +
+
+ + {/* Selected Counter & Clear Button */} +
+ {selectedUsers.length > 0 && ( +
+ {selectedUsers.length} +
+ )} + {userSearchTerm && ( - -
-
- - {userSearchResults.length === 0 ? ( -
- - - -

No users found matching "{userSearchTerm}"

-

Try a different search term

-
- ) : ( -
    - {userSearchResults.map((user, index) => { - const isSelected = selectedUsers.some(u => u.id === user.id); - const isAlreadyOfficer = officers.some(officer => officer.expand?.user.id === user.id); - const isHighlighted = index === currentHighlightedIndex; - - return ( -
  • handleSelectUser(user)} - className={`px-4 py-2 hover:bg-base-100 cursor-pointer - ${isSelected ? 'bg-primary/10' : ''} - ${isHighlighted ? 'bg-base-content/10' : ''}`} - > -
    -
    -
    - {user.name} - {isAlreadyOfficer && ( - - Already an officer - - )} -
    -
    {user.email}
    -
    - {!isAlreadyOfficer && ( - isSelected ? ( -
    - - - -
    - ) : ( -
    - - - -
    - ) - )} -
    -
    • - ); - })} -
- )} - -
- - + )}
- )} -
- {/* Selected users display */} - {selectedUsers.length > 0 && ( -
-
- - {selectedUsers.length > 0 && ( + {/* Enhanced Search Results Dropdown */} + {userSearchTerm.length > 0 && ( +
+ {/* Results Header */} +
+
+
+
+ + {userSearchResults.length > 0 + ? `${userSearchResults.length} user${userSearchResults.length !== 1 ? 's' : ''} found` + : 'No users found'} + +
+
+ + +
+
+
+ + {/* Search Results List */} + {userSearchResults.length === 0 ? ( +
+
+
+ + + +
+
+

No users found

+

Try searching with a different name or email

+
+
+
+ ) : ( +
+ {userSearchResults.map((user, index) => { + const isSelected = selectedUsers.some(u => u.id === user.id); + const isAlreadyOfficer = officers.some(officer => officer.expand?.user.id === user.id); + const isHighlighted = index === currentHighlightedIndex; + + return ( +
handleSelectUser(user)} + className={`relative px-6 py-4 cursor-pointer transition-all duration-200 border-b border-base-content/5 last:border-b-0 ${ + isSelected ? 'bg-gradient-to-r from-primary/10 to-primary/5 border-l-4 border-l-primary' : + isHighlighted ? 'bg-base-content/5' : 'hover:bg-base-content/5' + }`} + > +
+
+ {/* User Avatar */} +
+ {user.name.charAt(0).toUpperCase()} + {isSelected && ( +
+ + + +
+ )} +
+ +
+
+ {user.name} + {isAlreadyOfficer && ( + + + + + Officer + + )} +
+

{user.email}

+
+
+ + {/* Selection Indicator */} +
+ {isSelected ? ( +
+ + + +
+ ) : !isAlreadyOfficer ? ( +
+ + + +
+ ) : null} +
+
+
+ ); + })} +
+ )} + + {/* Footer Actions */} +
+
+ + +
+
+
+ )} +
+ + {/* Enhanced Selected Users Display */} + {selectedUsers.length > 0 && ( +
+
+
+
+ + + +
+
+

Selected Users

+

{selectedUsers.length} user{selectedUsers.length !== 1 ? 's' : ''} ready to be assigned

+
+
- )} -
-
- {selectedUsers.length === 0 ? ( -
- No users selected -
- ) : ( - selectedUsers.map(user => ( +
+ +
+ {selectedUsers.map((user, index) => (
- {user.name} +
+ {user.name.charAt(0).toUpperCase()} +
+
+

{user.name}

+

{user.email}

+
- )) - )} + ))} +
-
- )} -
+ )} +
-
- - setNewOfficerRole(e.target.value)} - placeholder="e.g. President, Technical Vice Chair" - className="w-full p-3 bg-base-300 border border-base-content/20 rounded-lg text-base-content placeholder-base-content/50 focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200" - /> -
- -
- - -
- - - -
- - {/* JSON Import Section */} -
-

- - - - Import Officers from JSON -

- -
-
- -
-