diff --git a/client/src/pages/StaffDashboard/StaffDashboard.tsx b/client/src/pages/StaffDashboard/StaffDashboard.tsx index 2342dfc3..6ba37ddd 100644 --- a/client/src/pages/StaffDashboard/StaffDashboard.tsx +++ b/client/src/pages/StaffDashboard/StaffDashboard.tsx @@ -15,15 +15,16 @@ import { interface StaffMember { id: string; - employeeId: string; name: string; position: string; + locationObjectId: string; + phone: string; approvalStatus: string; } export default function StaffDashboard() { const navigate = useNavigate(); - const { userService } = useApi(); + const { userService, locationService } = useApi(); const { userObjectId } = useAuthContext(); const [searchTerm, setSearchTerm] = useState(''); const [filterRole, setFilterRole] = useState(''); @@ -38,6 +39,7 @@ export default function StaffDashboard() { }); const { data: users, mutate } = userService.useUsers() || {}; + const { data: locations } = locationService.useLocations() || {}; // Handlers const handleApproval = async (id: string, status: string) => { @@ -75,8 +77,13 @@ export default function StaffDashboard() { } }; + // Create location lookup map + const locationMap = new Map( + locations?.map(loc => [loc._id, loc.hubName]) ?? [] + ); + // Data processing pipeline - const staffMembers = transformUsersToStaff(users ?? []); + const staffMembers = transformUsersToStaff(users ?? [], locationMap); const filteredStaff = filterStaff(staffMembers, searchTerm, filterRole); const sortedStaff = sortStaff(filteredStaff, sortConfig); const currentStaff = paginateStaff(sortedStaff, currentPage, itemsPerPage); diff --git a/client/src/pages/StaffDashboard/components/StaffDashboardRow.tsx b/client/src/pages/StaffDashboard/components/StaffDashboardRow.tsx index a220f1f1..0cfc33ba 100644 --- a/client/src/pages/StaffDashboard/components/StaffDashboardRow.tsx +++ b/client/src/pages/StaffDashboard/components/StaffDashboardRow.tsx @@ -9,17 +9,17 @@ import { Stack, TableCell, TableRow, - Tooltip, - Typography + Tooltip } from '@mui/material'; import { UserDocument } from '@/types/User'; interface StaffMember { id: string; - employeeId: string; name: string; position: string; + locationObjectId: string; + phone: string; approvalStatus: string; } @@ -73,18 +73,10 @@ export default function StaffDashboardRow({ '&:hover': { backgroundColor: '#f8f8f8' } }} > - - - {member.employeeId} - - {member.name} {member.position} + {member.locationObjectId} + {member.phone} onSort('employeeId')} + onClick={() => onSort('name')} > - Employee ID + Name onSort('name')} + onClick={() => onSort('position')} > - Name + Role onSort('position')} + onClick={() => onSort('locationObjectId')} + > + Location + + + + onSort('phone')} > - Position + Phone Number {staff.length === 0 ? ( - + No staff members found. diff --git a/client/src/pages/StaffDashboard/utils/StaffDashboardUtils.tsx b/client/src/pages/StaffDashboard/utils/StaffDashboardUtils.tsx index 61e8cd14..86977280 100644 --- a/client/src/pages/StaffDashboard/utils/StaffDashboardUtils.tsx +++ b/client/src/pages/StaffDashboard/utils/StaffDashboardUtils.tsx @@ -2,9 +2,10 @@ import { UserDocument } from '@/types/User'; interface StaffMember { id: string; - employeeId: string; name: string; position: string; + locationObjectId: string; + phone: string; approvalStatus: string; } @@ -84,15 +85,17 @@ export const paginateStaff = ( * Transform users data to staff members format */ export const transformUsersToStaff = ( - users: UserDocument[] | undefined + users: UserDocument[] | undefined, + locationMap: Map ): StaffMember[] => { if (!users) return []; return users.map((user: UserDocument) => ({ id: user._id, - employeeId: user._id ?? 'N/A', name: `${user.firstName} ${user.lastName}`, position: user.role, + locationObjectId: locationMap.get(user.locationObjectId?.toString() ?? '') ?? 'N/A', + phone: user.phone ?? 'N/A', approvalStatus: user.approvalStatus ?? 'PENDING' })); };