qr code

src/features/store-admin/StoreAdminShell.tsx

@@ -1,6 +1,8 @@
 import { useState, useRef, useEffect } from 'react';
 import { Check, ChevronDown, FileSpreadsheet, Monitor, Store, Users } from 'lucide-react';
-import { AppShell, type MenuEntry, type NavEntry } from '@/components/shell/AppShell';
+import { QrCode } from 'lucide-react';
+import { StoreQrDrawer } from '@/features/store-user/StoreQrDrawer';
+import { AppShell, IconButton, type MenuEntry, type NavEntry } from '@/components/shell/AppShell';
 import { OnboardingGate } from '@/features/onboarding/OnboardingGate';
 import { AssistantScope } from '@/features/console/AssistantScope';
 import { BranchScopeProvider, useBranchScope } from './BranchScope';
@@ -86,19 +88,48 @@ export function StoreAdminShell() {
       <LiveWatch />
       <OnboardingGate />
       <AssistantScope>
-        <AppShell
-          nav={NAV}
-          home="/admin/console"
-          navLabel="Store Admin"
-          scopeControl={<BranchSelector />}
-          manageItems={MANAGE}
-        />
+        <AdminShell />
       </AssistantScope>
     </BranchScopeProvider>
     </DateScopeProvider>
   );
 }
 
+/**
+ * The shell itself, inside the providers so it can read the branch in scope.
+ *
+ * Split out for the QR button: it needs open/closed state and it needs to know
+ * which outlet is selected, and both of those have to sit under
+ * `BranchScopeProvider`.
+ */
+function AdminShell() {
+  const [isQrOpen, setQrOpen] = useState(false);
+
+  return (
+    <>
+      <AppShell
+        nav={NAV}
+        home="/admin/console"
+        navLabel="Store Admin"
+        scopeControl={<BranchSelector />}
+        manageItems={MANAGE}
+        /* The storefront code, in the same place the branch login has it.
+           A merchant runs the outlets — they are the one who prints the poster
+           for a new shop and reprints it when it is lost — and until now the
+           code existed only on the branch user's header, so an owner with five
+           shops could not reach any of them. It follows the branch selector, so
+           the code on screen is always the one for the outlet in scope. */
+        headerActions={
+          <IconButton label="Store QR code" onClick={() => setQrOpen(true)}>
+            <QrCode size={16} />
+          </IconButton>
+        }
+      />
+      {isQrOpen ? <StoreQrDrawer onClose={() => setQrOpen(false)} /> : null}
+    </>
+  );
+}
+
 /**
  * Opens the live stream for the branch currently in scope.
  *