update ui update and fix layout issue

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

@@ -2,19 +2,21 @@
 
 import {VStack} from '@astryxdesign/core/Layout';
 import {Grid} from '@astryxdesign/core/Grid';
-import {PageHeader} from '@/components/primitives/PageHeader';
-import {ChartCard} from '@/components/charts/ChartCard';
-import {BarChartView} from '@/components/charts/BarChartView';
-import {StaffKpis} from '@/features/staff/StaffKpis';
-import {StaffGrid} from '@/features/staff/StaffGrid';
-import {AttendanceChart} from '@/features/staff/AttendanceChart';
-import {Leaderboard} from '@/features/staff/Leaderboard';
-import {useResource} from '@/lib/api/useResource';
-import {endpoints} from '@/lib/api/client';
-import {useWorkspace} from '@/components/shell/WorkspaceProvider';
-import {ScopeControls} from '@/components/scope/ScopeControls';
-import {storeName} from '@/lib/mock/stores';
-import {formatCompact} from '@/lib/format';
+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';
 
 /**
  * The team.
@@ -23,18 +25,10 @@ import {formatCompact} from '@/lib/format';
  * morning is "who is in today", and only then "who is performing".
  */
 export default function StaffPage() {
-  const {storeId, range} = useWorkspace();
-  const scope = {range, storeId};
-
-  const summary = useResource(endpoints.staffSummary(scope), {
-    // A summary object is never "empty" the way a list is — zero present is
-    // a real answer, not an absence of data.
-    isEmpty: () => false,
-  });
-  const staff = useResource(endpoints.staff(scope));
-  const attendance = useResource(endpoints.staffAttendance(scope));
-
-  const scopeLabel = storeId === 'all' ? 'all stores' : storeName(storeId);
+  const summary = useStaffSummary();
+  const staff = useStaffList();
+  const attendance = useStaffAttendance();
+  const scopeLabel = useScopeLabel();
 
   return (
     <VStack gap={5}>