first commit

src/features/customers/components/CustomerHistory.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import {VStack, HStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+import {Divider} from '@astryxdesign/core/Divider';
+import {AsyncBoundary} from '@/shared/components/data/AsyncBoundary';
+import {SkeletonRows} from '@/shared/components/patterns/LoadingState';
+import {EmptyPanel} from '@/shared/components/patterns/EmptyPanel';
+import {useCustomerHistory} from '@/features/customers/hooks/useCustomers';
+
+/** Their visits, newest first — the one that enrolled them is marked. */
+export function CustomerHistory({customerId}: {customerId: string}) {
+  const history = useCustomerHistory(customerId);
+
+  return (
+    <AsyncBoundary
+      resource={history}
+      loading={<SkeletonRows count={4} height={28} />}
+      empty={
+        <EmptyPanel
+          icon="visitors"
+          title="No visits recorded"
+          description="Visits appear here once a camera recognises them."
+        />
+      }
+    >
+      {(visits) => (
+        <VStack gap={2}>
+          {visits.map((v, i) => (
+            <VStack key={v.id} gap={2}>
+              {i > 0 ? <Divider /> : null}
+              <HStack gap={2} vAlign="center" hAlign="between">
+                <VStack gap={0}>
+                  <Timestamp value={v.occurredAt} format="date_time" />
+                  <Text size="xsm" color="secondary">
+                    {v.siteName}
+                  </Text>
+                </VStack>
+                {v.isNewVisitor ? <Badge variant="neutral" label="First visit" /> : null}
+              </HStack>
+            </VStack>
+          ))}
+        </VStack>
+      )}
+    </AsyncBoundary>
+  );
+}