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

import { Box, Link as MuiLink } from "@mui/material";
import { Link as RouterLink } from "react-router";
import { PageHeader } from "@/components/ui/page-header";
import { QueryErrorPanel } from "@/components/ui/query-error-panel";
import { WorkOrdersAdvancedFiltersBanner } from "@/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner";
import { DispatcherFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter";
import { WorkOrdersFilterBar } from "@/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar";
import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
import { WorkOrdersListPagePanels } from "@/app/(protected)/workorders/_components/list/work-orders-list-page-panels";
import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
import { useDashboardDrilldownFilters } from "@/app/(protected)/workorders/_hooks/use-dashboard-drilldown-filters";
import { useWorkOrderDeepLink } from "@/app/(protected)/workorders/_hooks/use-work-order-deep-link";
import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
import { useAuthContext } from "@/providers/auth-context";

function openCompletionDoc(
  row: WorkOrderTableRow,
  setDocRow: (row: WorkOrderTableRow | null) => void,
) {
  if (!hasCompletionDocService(row.pm)) return;
  setDocRow(row);
}

export default function WorkOrdersListPage() {
  const { user } = useAuthContext();
  const page = useWorkOrdersListPage();
  const { filters, tableData } = page;
  const fromDashboard = useDashboardDrilldownFilters(filters.applyAdvancedFilters);
  useWorkOrderDeepLink(page.handleOpenSlideOver);

  return (
    <Box className="flex h-full flex-col overflow-hidden p-2.5">
      <PageHeader
        surface
        title="Work Orders"
        belowTitle={
          <DispatcherFilter
            selectedIds={filters.dispatcherIds}
            onChange={filters.setDispatcherIds}
            users={page.users}
            usersLoading={page.usersLoading}
            currentUserId={user?.id}
            disabled={filters.advApplied != null}
          />
        }
        actions={
          <WorkOrdersListHeader
            search={filters.search}
            weekLabel={filters.weekLabel}
            onSearchChange={filters.handleSearchChange}
            onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
            onNewWorkOrder={() => page.setWizardOpen(true)}
            activeFilterCount={filters.activeFilterCount}
            advancedFiltersActive={filters.advApplied != null}
            isFetching={tableData.isFetching && !tableData.isLoading}
          />
        }
      />

      {fromDashboard && (
        <MuiLink component={RouterLink} to="/" underline="hover" className="mb-2 self-start">
          Back to Dashboard
        </MuiLink>
      )}

      <WorkOrdersFilterBar
        weekMonday={filters.weekMonday}
        onWeekChange={filters.setWeekMonday}
        selectedDayIso={filters.selectedDayIso}
        onSelectedDayChange={filters.setSelectedDayIso}
        types={filters.types}
        onTypesChange={filters.setTypes}
        filteredCount={tableData.totalCount}
        scopeTotalCount={tableData.scopeTotalCount}
        disabled={filters.advApplied != null}
      />

      {filters.advApplied != null && (
        <WorkOrdersAdvancedFiltersBanner
          applied={filters.advApplied}
          totalCount={tableData.scopeTotalCount}
          sites={page.locations}
          users={page.users}
          onClearChip={filters.clearAdvancedFilterChip}
          onClearAll={filters.clearAdvancedFilters}
        />
      )}

      {Boolean(tableData.error) && (
        <QueryErrorPanel
          className="mb-2 shrink-0"
          compact
          message={
            tableData.error instanceof Error
              ? tableData.error.message
              : "Failed to load work orders."
          }
          onRetry={() => void tableData.refetch()}
        />
      )}

      <WoTable
        tableData={tableData}
        users={page.users}
        sites={page.locations}
        vendors={page.vendors}
        pmTypes={page.pmTypes}
        weekMonday={filters.weekMonday}
        onNavigateToDay={filters.navigateToDay}
        onOpenSlideOver={page.handleOpenSlideOver}
        onRequestComplete={page.setConfirmComplete}
        onOpenCompDoc={(row) => openCompletionDoc(row, page.setDocRow)}
        onOpenMedia={page.setMediaRow}
        onOpenUplifts={page.setUpliftsRow}
        onClearSearch={() => filters.handleSearchChange("")}
        onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
        onPatch={page.patchField}
      />

      <WorkOrdersListPagePanels page={page} />
    </Box>
  );
}