feat(settings): add settings UI with users and roles pages

- Add /settings route with sidebar navigation
- Add ProtectedRoute component for capability-based access control
- Add SettingsLayout component with Users and Roles navigation
- Add RolesPage for read-only role viewing with capability grouping
- Update Header with Settings link in user dropdown (gated by capability)
- Wrap App with PermissionsProvider
- Add URY Role and URY User Role to fixtures export

Author: esafwan

pos/src/App.tsx

@@ -9,7 +9,14 @@ import POSOpeningProvider from './components/POSOpeningProvider';
 import ScreenSizeProvider from './components/ScreenSizeProvider';
 import { ToastProvider } from './components/ui/toast';
 import { usePOSStore } from './store/pos-store';
-import { useEffect } from 'react';
+import { useEffect, lazy, Suspense } from 'react';
+import { PermissionsProvider } from './contexts/PermissionsContext';
+import { ProtectedRoute } from './components/ProtectedRoute';
+
+// Lazy load settings pages
+const SettingsLayout = lazy(() => import('./components/SettingsLayout'));
+const UsersPage = lazy(() => import('./pages/admin/UsersPage'));
+const RolesPage = lazy(() => import('./pages/admin/RolesPage'));
 
 function App() {
   const {
@@ -19,25 +26,45 @@ function App() {
   useEffect(() => {
     initializeApp();
   }, [initializeApp]);
+
   return (
     <>
       <ToastProvider />
       <ScreenSizeProvider>
         <AuthGuard>
           <POSOpeningProvider>
-            <Router basename="/pos">
-              <div className="flex flex-col h-screen bg-gray-100 font-inter">
-                <Header />
-                <div className="flex-1 overflow-hidden">
-                  <Routes>
-                    <Route path="/" element={<POS/>} />
-                    <Route path="/orders" element={<Orders />} />
-                    <Route path="/table" element={<Table />} />
-                  </Routes>
+            <PermissionsProvider>
+              <Router basename="/pos">
+                <div className="flex flex-col h-screen bg-gray-100 font-inter">
+                  <Header />
+                  <div className="flex-1 overflow-hidden">
+                    <Suspense fallback={<div className="flex items-center justify-center h-full">Loading...</div>}>
+                      <Routes>
+                        <Route path="/" element={<POS/>} />
+                        <Route path="/orders" element={<Orders />} />
+                        <Route path="/table" element={<Table />} />
+                        
+                        {/* Settings Routes */}
+                        <Route path="/settings" element={
+                          <ProtectedRoute requiredCapability="users.manage">
+                            <SettingsLayout />
+                          </ProtectedRoute>
+                        }>
+                          <Route index element={<UsersPage />} />
+                          <Route path="users" element={<UsersPage />} />
+                          <Route path="roles" element={
+                            <ProtectedRoute requiredCapability="roles.manage">
+                              <RolesPage />
+                            </ProtectedRoute>
+                          } />
+                        </Route>
+                      </Routes>
+                    </Suspense>
+                  </div>
+                  <Footer />
                 </div>
-                <Footer />
-              </div>
-            </Router>
+              </Router>
+            </PermissionsProvider>
           </POSOpeningProvider>
         </AuthGuard>
       </ScreenSizeProvider>

pos/src/components/Header.tsx

@@ -1,29 +1,36 @@
 import { useState, useEffect, useRef } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { 
   Command,
   User,
   ChevronDown,
   Monitor,
   LogOut,
   RefreshCw,
+  Settings,
 } from 'lucide-react';
 import { Button, Input } from './ui';
 import { useRootStore } from '../store/root-store';
 import { usePOSStore } from '../store/pos-store';
 import type { RootState } from '../store/root-store';
 import { logout } from '../lib/auth-api';
 import { showToast } from './ui/toast';
+import { usePermissions } from '../contexts/PermissionsContext';
 
 const Header = () => {
   const [showUserMenu, setShowUserMenu] = useState(false);
   const userMenuRef = useRef<HTMLDivElement>(null);
   const user = useRootStore((state: RootState) => state.user);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const location = useLocation();
+  const navigate = useNavigate();
   const { searchQuery, setSearchQuery } = usePOSStore();
   const { orderSearchQuery, setOrderSearchQuery } = useRootStore();
   const [orderSearchInput, setOrderSearchInput] = useState(orderSearchQuery);
+  const { hasCapability } = usePermissions();
+  
+  // Check if user has any settings-related capability
+  const canAccessSettings = hasCapability('users.manage') || hasCapability('roles.manage');
 
   // Determine placeholder and handlers based on route
   let searchPlaceholder = 'Search orders, menu items, or customers...';
@@ -155,6 +162,19 @@ const Header = () => {
                   <p className="text-sm text-gray-500">{user?.name || ''}</p>
                 </div>
                 <div className="py-2">
+                  {canAccessSettings && (
+                    <Button
+                      variant="ghost"
+                      className="flex justify-start items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+                      onClick={() => {
+                        setShowUserMenu(false);
+                        navigate('/settings');
+                      }}
+                    >
+                      <Settings className="w-4 h-4 mr-3" />
+                      Settings
+                    </Button>
+                  )}
                   <Button
                     variant="ghost"
                     className="flex justify-start items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"

pos/src/components/ProtectedRoute.tsx

@@ -0,0 +1,21 @@
+import { Navigate } from 'react-router-dom';
+import { usePermissions } from '../contexts/PermissionsContext';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  requiredCapability: string;
+}
+
+export function ProtectedRoute({ children, requiredCapability }: ProtectedRouteProps) {
+  const { hasCapability, isLoading } = usePermissions();
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center h-full">Loading...</div>;
+  }
+
+  if (!hasCapability(requiredCapability)) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+}

pos/src/components/SettingsLayout.tsx

@@ -0,0 +1,84 @@
+import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Users, Shield, ArrowLeft, Settings } from 'lucide-react';
+import { Button } from './ui';
+import { usePermissions } from '../contexts/PermissionsContext';
+
+const SettingsLayout = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { hasCapability } = usePermissions();
+
+  const navItems = [
+    {
+      path: '/settings/users',
+      label: 'Users',
+      icon: Users,
+      capability: 'users.manage',
+    },
+    {
+      path: '/settings/roles',
+      label: 'Roles',
+      icon: Shield,
+      capability: 'roles.manage',
+    },
+  ].filter(item => hasCapability(item.capability));
+
+  const currentPath = location.pathname;
+
+  return (
+    <div className="h-full flex flex-col bg-gray-50">
+      {/* Settings Header */}
+      <div className="bg-white border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            <Settings className="w-6 h-6 text-gray-700" />
+            <h1 className="text-xl font-semibold text-gray-900">Settings</h1>
+          </div>
+          <Button
+            variant="ghost"
+            onClick={() => navigate('/')}
+            className="flex items-center space-x-2 text-gray-600 hover:text-gray-900"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            <span>Back to POS</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* Settings Content */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Sidebar */}
+        <aside className="w-64 bg-white border-r border-gray-200">
+          <nav className="p-4 space-y-1">
+            {navItems.map((item) => {
+              const isActive = currentPath === item.path || currentPath.startsWith(item.path);
+              const Icon = item.icon;
+              
+              return (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  className={`flex items-center space-x-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-primary-50 text-primary-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  <Icon className={`w-5 h-5 ${isActive ? 'text-primary-600' : 'text-gray-500'}`} />
+                  <span>{item.label}</span>
+                </Link>
+              );
+            })}
+          </nav>
+        </aside>
+
+        {/* Main Content Area */}
+        <main className="flex-1 overflow-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsLayout;