dispatch testing

src/components/SuperAdminPage.tsx

@@ -11,36 +11,66 @@
  * scoped to a single tenant's own Settings page.
  */
 
-import React from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import Header from './Header';
 import AdminConsole from './AdminConsole';
+import CatalogueBrowser from './CatalogueBrowser';
+import SuperAdminSidebar, { type SuperAdminNavItem } from './SuperAdminSidebar';
+import { UserPlus, Box } from 'lucide-react';
 import type { AuthUser } from '../services/auth';
+import { FIESTA_TENANT_ID, FIESTA_PRIMARY_LOCATION_ID } from '../services/fiestaApi';
 
 interface SuperAdminPageProps {
   user: AuthUser;
   onLogout: () => void;
 }
 
+const NAV_ITEMS: SuperAdminNavItem[] = [
+  { id: 'onboarding', label: 'Onboard Tenant', icon: UserPlus },
+  { id: 'catalogue', label: 'Global Catalogue', icon: Box },
+];
+
 export default function SuperAdminPage({ user, onLogout }: SuperAdminPageProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const location = useLocation();
   const profile = { name: user.name, role: 'Super Admin', email: user.email };
+  const tenantId = user.tenantid || FIESTA_TENANT_ID;
+
+  const currentPath = location.pathname.split('/').pop();
+  const currentItem = NAV_ITEMS.find(item => item.id === currentPath) || NAV_ITEMS[0];
 
   return (
-    <div className="min-h-screen bg-slate-50">
+    <div className="min-h-screen bg-[#f8fafc] text-[#0f172a] font-sans antialiased overflow-x-hidden">
       <Header
-        isSidebarOpen={false}
-        onToggleSidebar={() => {}}
+        isSidebarOpen={sidebarOpen}
+        onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
         onHelpClick={() => {}}
         onLogoutClick={onLogout}
         profile={profile}
+        storeContext={{
+          storeName: currentItem.label,
+          icon: currentItem.icon
+        }}
       />
-      {/* Header is fixed (h-16); pt-16 keeps content from rendering under it. */}
-      <main className="pt-16 p-4 md:p-6 max-w-6xl mx-auto">
-        <Routes>
-          <Route path="onboarding" element={<AdminConsole showHeader />} />
-          <Route path="*" element={<Navigate to="onboarding" replace />} />
-        </Routes>
-      </main>
+      
+      <div className="flex pt-16 w-full max-w-[100vw]">
+        <SuperAdminSidebar 
+          items={NAV_ITEMS}
+          isOpen={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+        />
+        
+        <main className={`flex-1 min-w-0 transition-all duration-300 ${sidebarOpen ? 'md:pl-64' : 'md:pl-16'} min-h-[calc(100vh-64px)]`}>
+          <div className="w-full p-4 md:p-6 transition-all duration-300">
+            <Routes>
+              <Route path="onboarding" element={<AdminConsole showHeader />} />
+              <Route path="catalogue" element={<CatalogueBrowser tenantid={tenantId} locationid={FIESTA_PRIMARY_LOCATION_ID} />} />
+              <Route path="*" element={<Navigate to="onboarding" replace />} />
+            </Routes>
+          </div>
+        </main>
+      </div>
     </div>
   );
 }