qr code

src/features/nearle-admin/pages/StoreDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { Badge } from '@astryxdesign/core/Badge';
 import { Button } from '@astryxdesign/core/Button';
@@ -7,7 +7,7 @@ import { HStack } from '@astryxdesign/core/HStack';
 import { Table, type TableColumn } from '@astryxdesign/core/Table';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
-import { IndianRupee, ShoppingCart, Store, TriangleAlert } from 'lucide-react';
+import { IndianRupee, QrCode, ShoppingCart, Store, TriangleAlert } from 'lucide-react';
 import { DataState } from '@/components/DataState';
 import { Freshness } from '@/components/Freshness';
 import { KpiCard } from '@/components/KpiCard';
@@ -17,6 +17,8 @@ import { useLocationSummary, useOrderSummary, useTenantLocations, useTenants } f
 import type { LocationOrderSummary, TenantInfo, TenantLocation } from '@/api/types';
 import { TablePager } from '@/components/TablePager';
 import { usePaged } from '@/components/usePaged';
+import { Drawer } from '@/features/store-admin/Drawer';
+import { StoreQrPanel } from '@/features/qr/StoreQrPanel';
 
 interface BranchRow extends Record<string, unknown> {
   locationid: number;
@@ -91,6 +93,9 @@ export function StoreDetailPage() {
     return { branches, active, totalOrders, totalRevenue, cancelled };
   }, [rows, orders.data]);
 
+  /** The branch whose code is on screen, if any. */
+  const [qrFor, setQrFor] = useState<BranchRow | null>(null);
+
   const columns: TableColumn<BranchRow>[] = [
     {
       key: 'locationname',
@@ -172,6 +177,26 @@ export function StoreDetailPage() {
         />
       ),
     },
+    {
+      /* The storefront code, per branch, after the day it was commissioned.
+         Shown at creation too — but a poster gets lost, a shop reopens, a
+         merchant asks for it again a month later, and the person they ask is
+         whoever is looking at this page. The code is derived from the two ids
+         on this row, so there is nothing to look up and nothing to reissue. */
+      key: 'qr',
+      header: 'QR',
+      align: 'end',
+      width: { type: 'pixel', value: 84 },
+      renderCell: (row) => (
+        <Button
+          label="QR"
+          variant="ghost"
+          size="sm"
+          icon={<QrCode size={14} />}
+          onClick={() => setQrFor(row)}
+        />
+      ),
+    },
   ];
 
   return (
@@ -267,6 +292,22 @@ export function StoreDetailPage() {
           </DataState>
         </Card>
       </VStack>
+
+      {qrFor && tenantid ? (
+        <Drawer
+          title="Store QR code"
+          subtitle={qrFor.locationname}
+          width={400}
+          onClose={() => setQrFor(null)}
+        >
+          <StoreQrPanel
+            tenantid={tenantid}
+            locationid={qrFor.locationid}
+            locationname={qrFor.locationname}
+            {...(qrFor.city ? { where: String(qrFor.city) } : {})}
+          />
+        </Drawer>
+      ) : null}
     </VStack>
   );
 }