feat: implement staff directory list view with search and filters

apps/web/src/features/layouts/Sidebar.tsx

@@ -3,7 +3,6 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { LogOut, Menu, X } from 'lucide-react';
 import { Button } from '../../common/components/ui/button';
 import { NAV_CONFIG } from "../../common/config/navigation";
-import type { Role } from '../../common/config/navigation';
 
 interface SidebarProps {
     sidebarOpen: boolean;
@@ -38,11 +37,12 @@ const Sidebar: React.FC<SidebarProps> = ({
 
     // Filter navigation based on user role
     const filteredNav = useMemo(() => {
-        const userRole = (user?.role || 'Client') as Role;
+        const userRoleRaw = (user?.role || 'Client') as string;
+        const userRole = userRoleRaw.toLowerCase();
 
         return NAV_CONFIG.map(group => {
             const visibleItems = group.items.filter(item =>
-                item.allowedRoles.includes(userRole)
+                item.allowedRoles.some(r => r.toLowerCase() === userRole)
             );
             return {
                 ...group,