store user login

src/App.tsx

@@ -6,6 +6,7 @@ import { HOME_ROUTE } from '@/auth/roles';
 import { LoginPage } from '@/features/auth/LoginPage';
 import { NearleAdminShell } from '@/features/nearle-admin/NearleAdminShell';
 import { StoreAdminShell } from '@/features/store-admin/StoreAdminShell';
+import { StoreUserShell } from '@/features/store-user/StoreUserShell';
 
 /**
  * Routes are split per page.
@@ -30,6 +31,14 @@ const OnboardBranchPage = named('OnboardBranchPage', () => import('@/features/st
 const UsersPage = named('UsersPage', () => import('@/features/store-admin/pages/UsersPage'));
 const TerminalsPage = named('TerminalsPage', () => import('@/features/store-admin/pages/TerminalsPage'));
 
+/* The Store user workspace reuses the merchant's four pages, pinned to one
+   branch by `BranchScopeProvider pin=`. Only what a shop does differently is
+   its own file: the store catalogue, its customers, its QR and its account. */
+const StoreProductsPage = named('StoreProductsPage', () => import('@/features/store-user/pages/StoreProductsPage'));
+const StoreCustomersPage = named('StoreCustomersPage', () => import('@/features/store-user/pages/StoreCustomersPage'));
+const StoreStaffPage = named('StoreStaffPage', () => import('@/features/store-user/pages/StoreStaffPage'));
+const StoreAccountPage = named('StoreAccountPage', () => import('@/features/store-user/pages/StoreAccountPage'));
+
 function RouteFallback() {
   return (
     <div style={{ display: 'grid', placeItems: 'center', padding: 64 }}>
@@ -107,8 +116,32 @@ export function App() {
         <Route path="*" element={<Navigate to="/admin/console" replace />} />
       </Route>
 
-      {/* Not built yet. Named rather than missing, so the redirect has somewhere to land. */}
-      <Route path="/store/*" element={<NotBuiltYet workspace="Store Manager" />} />
+      {/* Store user — one branch, fixed. Same four destinations as the
+          merchant, and mostly the same pages: what differs is the scope, not
+          the shape, so pinning them beats a second set that drifts. */}
+      <Route
+        path="/store"
+        element={
+          <RequireRole role="store-manager">
+            <Suspense fallback={<RouteFallback />}>
+              <StoreUserShell />
+            </Suspense>
+          </RequireRole>
+        }
+      >
+        <Route index element={<Navigate to="/store/console" replace />} />
+        <Route path="console" element={<ConsolePage />} />
+        <Route path="products" element={<StoreProductsPage />} />
+        <Route path="sales" element={<SalesPage />} />
+        <Route path="reports" element={<ReportsPage />} />
+        {/* Reached from the account menu. A shop does not commission outlets,
+            so there is deliberately no `branches/new` here. */}
+        <Route path="customers" element={<StoreCustomersPage />} />
+        <Route path="terminals" element={<TerminalsPage />} />
+        <Route path="staff" element={<StoreStaffPage />} />
+        <Route path="account" element={<StoreAccountPage />} />
+        <Route path="*" element={<Navigate to="/store/console" replace />} />
+      </Route>
 
       <Route
         path="*"
@@ -117,36 +150,3 @@ export function App() {
     </Routes>
   );
 }
-
-function NotBuiltYet({ workspace }: { workspace: string }) {
-  const { signOut } = useAuth();
-  return (
-    <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', padding: 24 }}>
-      <div style={{ maxWidth: 460, textAlign: 'center' }}>
-        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginBottom: 8 }}>
-          The {workspace} workspace is not built yet
-        </h1>
-        <p style={{ color: 'var(--color-slate-500)', fontSize: 14, lineHeight: 1.6 }}>
-          This console currently covers the Nearle Admin workspace. Your account signs in
-          correctly — there is simply nothing here for it to open.
-        </p>
-        <button
-          type="button"
-          onClick={signOut}
-          style={{
-            marginTop: 20,
-            padding: '9px 16px',
-            borderRadius: 12,
-            border: '1px solid var(--color-slate-200)',
-            background: '#fff',
-            cursor: 'pointer',
-            fontSize: 13,
-            fontWeight: 600,
-          }}
-        >
-          Sign out
-        </button>
-      </div>
-    </div>
-  );
-}