From 3026767c12c42a503d88ed065daee5d2af69df90 Mon Sep 17 00:00:00 2001 From: ihsankahveci Date: Mon, 26 Jan 2026 01:41:01 -0800 Subject: [PATCH 1/2] Update StaffDashboard columns to show Name, Role, Location, Phone, Status, Actions - Removed employeeId column - Renamed Position to Role in UI - Added Location column showing hub name instead of ObjectId - Added Phone Number column - Updated StaffMember interface across all components - Fetch locations data to resolve locationObjectId to hubName Co-Authored-By: Claude Sonnet 4.5 --- .../pages/StaffDashboard/StaffDashboard.tsx | 13 +++-- .../components/StaffDashboardRow.tsx | 18 ++----- .../components/StaffDashboardTable.tsx | 47 +++++++++++++------ .../utils/StaffDashboardUtils.tsx | 9 ++-- 4 files changed, 54 insertions(+), 33 deletions(-) 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' })); }; From 5e06be423e250260a0258bd6dacadec060f63e4b Mon Sep 17 00:00:00 2001 From: ihsankahveci Date: Mon, 26 Jan 2026 01:56:08 -0800 Subject: [PATCH 2/2] Add location filter to Staff Dashboard - Added location dropdown filter in StaffDashboardControls - Updated filterStaff function to filter by location - Extract unique location names from locations data - Reset pagination when filters change - Location filter works alongside existing role and search filters Co-Authored-By: Claude Sonnet 4.5 --- .../pages/StaffDashboard/StaffDashboard.tsx | 18 +++++++++++++-- .../components/StaffDashboardControls.tsx | 22 +++++++++++++++++++ .../utils/StaffDashboardUtils.tsx | 8 ++++--- 3 files changed, 43 insertions(+), 5 deletions(-) diff --git a/client/src/pages/StaffDashboard/StaffDashboard.tsx b/client/src/pages/StaffDashboard/StaffDashboard.tsx index 6ba37ddd..6c893f1d 100644 --- a/client/src/pages/StaffDashboard/StaffDashboard.tsx +++ b/client/src/pages/StaffDashboard/StaffDashboard.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useAuthContext } from '@/contexts'; import { useApi } from '@/hooks'; @@ -28,6 +28,7 @@ export default function StaffDashboard() { const { userObjectId } = useAuthContext(); const [searchTerm, setSearchTerm] = useState(''); const [filterRole, setFilterRole] = useState(''); + const [filterLocation, setFilterLocation] = useState(''); const [currentPage, setCurrentPage] = useState(0); // MUI uses 0-based index const [itemsPerPage, setItemsPerPage] = useState(10); const [sortConfig, setSortConfig] = useState<{ @@ -41,6 +42,11 @@ export default function StaffDashboard() { const { data: users, mutate } = userService.useUsers() || {}; const { data: locations } = locationService.useLocations() || {}; + // Reset to first page when filters change + useEffect(() => { + setCurrentPage(0); + }, [searchTerm, filterRole, filterLocation]); + // Handlers const handleApproval = async (id: string, status: string) => { try { @@ -82,9 +88,14 @@ export default function StaffDashboard() { locations?.map(loc => [loc._id, loc.hubName]) ?? [] ); + // Get unique location names for filter dropdown + const uniqueLocations = Array.from( + new Set(locations?.map(loc => loc.hubName).filter(Boolean)) + ).sort(); + // Data processing pipeline const staffMembers = transformUsersToStaff(users ?? [], locationMap); - const filteredStaff = filterStaff(staffMembers, searchTerm, filterRole); + const filteredStaff = filterStaff(staffMembers, searchTerm, filterRole, filterLocation); const sortedStaff = sortStaff(filteredStaff, sortConfig); const currentStaff = paginateStaff(sortedStaff, currentPage, itemsPerPage); @@ -111,8 +122,11 @@ export default function StaffDashboard() { navigate('/add-new-user')} /> diff --git a/client/src/pages/StaffDashboard/components/StaffDashboardControls.tsx b/client/src/pages/StaffDashboard/components/StaffDashboardControls.tsx index 9317f769..d5121b7c 100644 --- a/client/src/pages/StaffDashboard/components/StaffDashboardControls.tsx +++ b/client/src/pages/StaffDashboard/components/StaffDashboardControls.tsx @@ -13,16 +13,22 @@ import { interface StaffDashboardControlsProps { searchTerm: string; filterRole: string; + filterLocation: string; + locations: string[]; onSearchChange: (value: string) => void; onRoleFilterChange: (value: string) => void; + onLocationFilterChange: (value: string) => void; onNewUserClick: () => void; } export default function StaffDashboardControls({ searchTerm, filterRole, + filterLocation, + locations, onSearchChange, onRoleFilterChange, + onLocationFilterChange, onNewUserClick }: StaffDashboardControlsProps) { return ( @@ -64,6 +70,22 @@ export default function StaffDashboardControls({ + + Filter Location + + +