update ui and remove mock data

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

@@ -1,79 +1,45 @@
 'use client';
 
 import {VStack} from '@astryxdesign/core/Layout';
-import {Grid} from '@astryxdesign/core/Grid';
 import {PageHeader} from '@/shared/components/primitives/PageHeader';
-import {ChartCard} from '@/shared/components/charts/ChartCard';
-import {BarChartView} from '@/shared/components/charts/BarChartView';
-import {StaffKpis} from '@/features/staff/components/StaffKpis';
-import {StaffGrid} from '@/features/staff/components/StaffGrid';
-import {AttendanceChart} from '@/features/staff/components/AttendanceChart';
-import {Leaderboard} from '@/features/staff/components/Leaderboard';
-import {
-  useStaffAttendance,
-  useStaffList,
-  useStaffSummary,
-} from '@/features/staff/hooks/useStaff';
-import {useScopeLabel} from '@/features/stores/hooks/useStoreDirectory';
-import {ScopeControls} from '@/shared/components/scope/ScopeControls';
-import {formatCompact} from '@/shared/utils/format';
+import {FeatureUnavailable} from '@/shared/components/patterns/FeatureUnavailable';
+import {TeamTable} from '@/features/team/components/TeamTable';
+import {useTeam} from '@/features/team/hooks/useTeam';
 
 /**
- * The team.
+ * Leaderboard.
  *
- * Ordered attendance-first: the question that brings a merchant here in the
- * morning is "who is in today", and only then "who is performing".
+ * ── An important distinction ─────────────────────────────────────────────
+ * The platform's `/api/team` is who can SIGN IN to the console, at what
+ * privilege. It is not shop-floor rostering: there is no attendance, no shift,
+ * no sales-per-head and no performance score anywhere in the contract.
+ *
+ * The page used to show all of those from a fixture. The real team list is
+ * shown instead, and the ranking metrics are named as the gap they are —
+ * because a leaderboard built from invented performance scores is the single
+ * most damaging fake number in this product.
  */
-export default function StaffPage() {
-  const summary = useStaffSummary();
-  const staff = useStaffList();
-  const attendance = useStaffAttendance();
-  const scopeLabel = useScopeLabel();
+export default function LeaderboardPage() {
+  const team = useTeam();
 
   return (
     <VStack gap={5}>
       <PageHeader
         title="Leaderboard"
-        description={`Attendance, sales contribution and performance across ${scopeLabel}.`}
-        controls={<ScopeControls />}
+        description="People with access to this console."
       />
 
-      <StaffKpis resource={summary} />
+      <TeamTable resource={team} />
 
-      <Grid columns={{minWidth: 360, max: 2, repeat: 'fit'}} gap={4}>
-        <AttendanceChart resource={attendance} />
-
-        <ChartCard
-          title="Sales by team member"
-          subtitle="Top 8 by transactions in the selected period"
-          resource={staff}
-        >
-          {(rows) => (
-            <BarChartView
-              data={[...rows]
-                .sort((a, b) => b.salesCount - a.salesCount)
-                .slice(0, 8)
-                .map((m) => ({
-                  // First name only — full names overflow the axis at this
-                  // width and the leaderboard below carries the detail.
-                  name: m.name.split(' ')[0],
-                  sales: m.salesCount,
-                  rewards: m.rewardsIssued,
-                }))}
-              xKey="name"
-              yFormat={formatCompact}
-              series={[
-                {key: 'sales', label: 'Sales'},
-                {key: 'rewards', label: 'Rewards issued'},
-              ]}
-            />
-          )}
-        </ChartCard>
-      </Grid>
-
-      <Leaderboard resource={staff} />
-
-      <StaffGrid resource={staff} />
+      <FeatureUnavailable
+        title="Attendance and performance ranking"
+        description="Ranking staff needs rostering data — shifts, attendance, sales attributed per person — which the platform does not record. /api/team answers who can sign in, not who was on the floor."
+        endpoints={[
+          'GET /api/staff — shop-floor roster, distinct from console accounts',
+          'GET /api/staff/attendance — present, late, absent, on leave',
+          'GET /api/reports/staff-sales — sales attributed per person',
+        ]}
+      />
     </VStack>
   );
 }