shoc-frontend-new/src/app/(protected)/dashboard/index.tsx

import { Box } from "@mui/material";
import { PageHeader } from "@/components/ui/page-header";
import { DashboardHeaderActions } from "@/app/(protected)/dashboard/_components/dashboard-header-actions";
import { DashboardKpiCards } from "@/app/(protected)/dashboard/_components/dashboard-kpi-cards";
import { DashboardTrendCard } from "@/app/(protected)/dashboard/_components/dashboard-trend-card";
import { DispatcherTablesSection } from "@/app/(protected)/dashboard/_components/dispatcher-tables-section";
import { StatusDistributionCard } from "@/app/(protected)/dashboard/_components/status-distribution-card";
import { useDashboardScope } from "@/app/(protected)/dashboard/_components/use-dashboard-scope";
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 { useDashboardPerformance } from "@/domain/dashboard/use-cases/use-dashboard-performance";
import { useDashboardRegions } from "@/domain/dashboard/use-cases/use-dashboard-regions";
import { useDashboardStats } from "@/domain/dashboard/use-cases/use-dashboard-stats";
import { useDashboardVendorInsights } from "@/domain/dashboard/use-cases/use-dashboard-vendor-insights";
import { useDashboardWorkload } from "@/domain/dashboard/use-cases/use-dashboard-workload";
import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";

export default function DashboardPage() {
  const scope = useDashboardScope();
  const { canViewAll, range, dispatcherId, workloadPage, performancePage } = scope;

  const dispatcherUsers = useWorkOrderUsers();
  const stats = useDashboardStats(range, dispatcherId);
  const workload = useDashboardWorkload(range, workloadPage, dispatcherId, canViewAll);
  const performance = useDashboardPerformance(range, performancePage, dispatcherId, canViewAll);
  const regions = useDashboardRegions(range, dispatcherId);
  const vendors = useDashboardVendorInsights();

  const isRefreshing =
    [stats, workload, performance, regions, vendors].some((query) => query.isFetching) &&
    !stats.isLoading;

  return (
    <Box className="flex flex-col gap-4 p-4">
      <PageHeader
        title="Dashboard"
        actions={
          <DashboardHeaderActions
            isRefreshing={isRefreshing}
            showReset={scope.showReset}
            onResetFilters={scope.resetFilters}
            canViewAll={canViewAll}
            scope={scope.scope}
            onScopeChange={scope.changeScope}
            dispatcherUsers={dispatcherUsers.data ?? []}
            dispatcherUsersLoading={dispatcherUsers.isLoading}
            currentUserId={scope.currentUserId}
            range={range}
            onRangeChange={scope.changeRange}
          />
        }
      />
      <DashboardKpiCards stats={stats.data} loading={stats.isLoading} range={range} />
      <Box className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <WorkOrderBreakdownCard
          breakdown={stats.data?.breakdown ?? []}
          range={range}
          isLoading={stats.isLoading}
          error={stats.error}
        />
        <StatusDistributionCard
          rows={stats.data?.statusDistribution ?? []}
          range={range}
          isLoading={stats.isLoading}
          error={stats.error}
        />
        <WorkOrdersByRegionCard
          rows={regions.data ?? []}
          range={range}
          isLoading={regions.isLoading}
          error={regions.error}
        />
        {canViewAll && (
          <DispatcherTablesSection
            range={range}
            workload={workload}
            performance={performance}
            workloadPage={workloadPage}
            performancePage={performancePage}
            onWorkloadPageChange={scope.setWorkloadPage}
            onPerformancePageChange={scope.setPerformancePage}
          />
        )}
      </Box>
      <DashboardTrendCard range={range} />
      <VendorInsightsCard
        rows={vendors.data ?? []}
        isLoading={vendors.isLoading}
        error={vendors.error}
      />
    </Box>
  );
}