From 7679c28682f071f422fc4f882c359c2c47f5786d Mon Sep 17 00:00:00 2001
From: Codex Review Integration <codex-review@local.invalid>
Date: Thu, 17 Sep 2026 00:46:39 -0300
Subject: [PATCH] refactor(dashboard): extract dispatcher tables into a section
 component

Move the two paged dispatcher cards and their paging view-model derivation out
of DashboardPage into DispatcherTablesSection (a fragment, so both cards remain
direct children of the dashboard grid). This keeps DashboardPage under the
project complexity threshold after the pager additions, with no change to the
rendered layout or behaviour.
---
 .../_components/dispatcher-tables-section.tsx | 60 +++++++++++++++++++
 src/app/(protected)/dashboard/index.tsx       | 29 +++------
 2 files changed, 68 insertions(+), 21 deletions(-)
 create mode 100644 src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx

diff --git a/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx b/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx
new file mode 100644
index 00000000..05e1f301
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx
@@ -0,0 +1,60 @@
+import type { UseQueryResult } from "@tanstack/react-query";
+import {
+  DISPATCHER_PAGE_SIZE,
+  type DispatcherPage,
+} from "@/domain/dashboard/types/dashboard-dispatcher-page";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DispatcherPerformanceRow } from "@/domain/dashboard/types/dashboard-performance";
+import type { DispatcherWorkloadRow } from "@/domain/dashboard/types/dashboard-workload";
+import { DispatcherPerformanceCard } from "./dispatcher-performance-card";
+import { DispatcherWorkloadCard } from "./dispatcher-workload-card";
+
+interface DispatcherTablesSectionProps {
+  range: DashboardRangeKey;
+  workload: UseQueryResult<DispatcherPage<DispatcherWorkloadRow>, Error>;
+  performance: UseQueryResult<DispatcherPage<DispatcherPerformanceRow>, Error>;
+  workloadPage: number;
+  performancePage: number;
+  onWorkloadPageChange: (page: number) => void;
+  onPerformancePageChange: (page: number) => void;
+}
+
+/**
+ * The two paged dispatcher tables. Kept as a fragment so both cards stay direct
+ * children of the dashboard grid, and so the paging view-model derivation lives
+ * here rather than inflating the page component.
+ */
+export function DispatcherTablesSection({
+  range,
+  workload,
+  performance,
+  workloadPage,
+  performancePage,
+  onWorkloadPageChange,
+  onPerformancePageChange,
+}: DispatcherTablesSectionProps) {
+  return (
+    <>
+      <DispatcherWorkloadCard
+        rows={workload.data?.items ?? []}
+        range={range}
+        page={workloadPage}
+        pageSize={workload.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
+        totalDispatchers={workload.data?.totalDispatchers ?? 0}
+        onPageChange={onWorkloadPageChange}
+        isLoading={workload.isLoading}
+        error={workload.error}
+      />
+      <DispatcherPerformanceCard
+        rows={performance.data?.items ?? []}
+        range={range}
+        page={performancePage}
+        pageSize={performance.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
+        totalDispatchers={performance.data?.totalDispatchers ?? 0}
+        onPageChange={onPerformancePageChange}
+        isLoading={performance.isLoading}
+        error={performance.error}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/dashboard/index.tsx b/src/app/(protected)/dashboard/index.tsx
index 988dd493..cb20c9b4 100644
--- a/src/app/(protected)/dashboard/index.tsx
+++ b/src/app/(protected)/dashboard/index.tsx
@@ -8,12 +8,10 @@ import { PageHeader } from "@/components/ui/page-header";
 import { DashboardKpiCard } from "@/app/(protected)/dashboard/_components/dashboard-kpi-card";
 import { DashboardRangeToggle } from "@/app/(protected)/dashboard/_components/dashboard-range-toggle";
 import { DashboardTrendCard } from "@/app/(protected)/dashboard/_components/dashboard-trend-card";
-import { DispatcherPerformanceCard } from "@/app/(protected)/dashboard/_components/dispatcher-performance-card";
-import { DispatcherWorkloadCard } from "@/app/(protected)/dashboard/_components/dispatcher-workload-card";
+import { DispatcherTablesSection } from "@/app/(protected)/dashboard/_components/dispatcher-tables-section";
 import { VendorInsightsCard } from "@/app/(protected)/dashboard/_components/vendor-insights-card";
 import { WorkOrderBreakdownCard } from "@/app/(protected)/dashboard/_components/work-order-breakdown-card";
 import { WorkOrdersByRegionCard } from "@/app/(protected)/dashboard/_components/work-orders-by-region-card";
-import { DISPATCHER_PAGE_SIZE } from "@/domain/dashboard/types/dashboard-dispatcher-page";
 import {
   DEFAULT_DASHBOARD_RANGE,
   type DashboardRangeKey,
@@ -113,25 +111,14 @@ export default function DashboardPage() {
           isLoading={regions.isLoading}
           error={regions.error}
         />
-        <DispatcherWorkloadCard
-          rows={workload.data?.items ?? []}
+        <DispatcherTablesSection
           range={range}
-          page={workloadPage}
-          pageSize={workload.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
-          totalDispatchers={workload.data?.totalDispatchers ?? 0}
-          onPageChange={setWorkloadPage}
-          isLoading={workload.isLoading}
-          error={workload.error}
-        />
-        <DispatcherPerformanceCard
-          rows={performance.data?.items ?? []}
-          range={range}
-          page={performancePage}
-          pageSize={performance.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
-          totalDispatchers={performance.data?.totalDispatchers ?? 0}
-          onPageChange={setPerformancePage}
-          isLoading={performance.isLoading}
-          error={performance.error}
+          workload={workload}
+          performance={performance}
+          workloadPage={workloadPage}
+          performancePage={performancePage}
+          onWorkloadPageChange={setWorkloadPage}
+          onPerformancePageChange={setPerformancePage}
         />
       </Box>
       <DashboardTrendCard range={range} />