login issue

src/app/(workspace)/settings/security/page.tsx

@@ -1,4 +1,5 @@
 import {SettingsPage} from '@/features/settings/components/SettingsPage';
+import {AccountCard} from '@/features/settings/components/AccountCard';
 import {SecurityManager} from '@/features/settings/components/SecurityManager';
 
 export default function SecuritySettingsPage() {
@@ -7,6 +8,9 @@ export default function SecuritySettingsPage() {
       title="Security & Audit Logs"
       description="Two-Factor authentication, password management, active login sessions and security audit history."
     >
+      {/* Who you are, then the devices signed in as you — both read from the
+          platform. The panels below them are still local-only. */}
+      <AccountCard />
       <SecurityManager />
     </SettingsPage>
   );

src/app/(workspace)/stores/page.tsx

@@ -1,17 +1,12 @@
 'use client';
 
-import {VStack, HStack} from '@astryxdesign/core/Layout';
-import {Grid} from '@astryxdesign/core/Grid';
-import {Card} from '@astryxdesign/core/Card';
-import {Text, Heading} from '@astryxdesign/core/Text';
-import {StatusDot} from '@astryxdesign/core/StatusDot';
+import {VStack} from '@astryxdesign/core/Layout';
 import {PageHeader} from '@/shared/components/primitives/PageHeader';
 import {AsyncBoundary} from '@/shared/components/data/AsyncBoundary';
 import {SkeletonCardGrid} from '@/shared/components/patterns/LoadingState';
 import {EmptyPanel} from '@/shared/components/patterns/EmptyPanel';
-import {StatPair, StatRow} from '@/shared/components/patterns/StatPair';
 import {useSites} from '@/features/stores/hooks/useSites';
-import {formatPct} from '@/shared/utils/format';
+import {ShopSection} from '@/features/stores/components/ShopSection';
 
 /**
  * The estate, from GET /api/sites.
@@ -28,7 +23,7 @@ export default function StoresPage() {
     <VStack gap={5}>
       <PageHeader
         title="Store"
-        description="Every shop in the network, with its camera health."
+        description="Every shop, its cameras, and the shop PC that watches them."
       />
 
       <AsyncBoundary
@@ -43,52 +38,11 @@ export default function StoresPage() {
         }
       >
         {(rows) => (
-          <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
+          <VStack gap={6}>
             {rows.map((site) => (
-              <Card key={site.id}>
-                <VStack gap={3}>
-                  <HStack gap={2} vAlign="center" hAlign="between">
-                    <Heading level={3}>{site.name}</Heading>
-                    {site.isOnline === null ? null : (
-                      <HStack gap={1.5} vAlign="center">
-                        <StatusDot
-                          variant={site.isOnline ? 'success' : 'error'}
-                          label={site.isOnline ? 'Online' : 'Offline'}
-                        />
-                        <Text size="xsm" color="secondary">
-                          {site.isOnline ? 'Online' : 'Offline'}
-                        </Text>
-                      </HStack>
-                    )}
-                  </HStack>
-
-                  <Text size="sm" color="secondary" className="font-mono">
-                    {site.id}
-                  </Text>
-
-                  <StatRow>
-                    <StatPair
-                      label="Cameras up"
-                      value={
-                        site.camerasUp === null || site.camerasTotal === null
-                          ? '—'
-                          : `${site.camerasUp}/${site.camerasTotal}`
-                      }
-                    />
-                    <StatPair
-                      label="Below gate"
-                      value={
-                        site.fractionBelowGate === null
-                          ? '—'
-                          : formatPct(site.fractionBelowGate * 100, 0)
-                      }
-                      align="end"
-                    />
-                  </StatRow>
-                </VStack>
-              </Card>
+              <ShopSection key={site.id} site={site} />
             ))}
-          </Grid>
+          </VStack>
         )}
       </AsyncBoundary>
     </VStack>