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

import { Box } from "@mui/material";
import { PageHeader } from "@/components/ui/page-header";
import { QueryErrorPanel } from "@/components/ui/query-error-panel";
import { WorkOrderSlideOver } from "@/app/(protected)/workorders/_components/detail/work-order-slide-over";
import { WorkOrdersAdvancedFiltersBanner } from "@/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner";
import { WorkOrdersFilterBar } from "@/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar";
import { WorkOrderCancelDialog } from "@/app/(protected)/workorders/_components/list/work-order-cancel-dialog";
import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
import { WorkOrdersListOverlays } from "@/app/(protected)/workorders/_components/list/work-orders-list-overlays";
import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
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";

export default function WorkOrdersListPage() {
  const { user } = useAuthContext();
  const page = useWorkOrdersListPage();
  const { filters, tableData, activeDocRow } = page;

  const openCompletionDoc = (row: WorkOrderTableRow) => {
    if (!hasCompletionDocService(row.pm)) return;
    page.setDocRow(row);
  };

  return (
    <Box className="flex h-full flex-col overflow-hidden p-2.5">
      <PageHeader
        surface
        eyebrow="OPERATIONS"
        title="Work Orders"
        actions={
          <WorkOrdersListHeader
            search={filters.search}
            onSearchChange={filters.handleSearchChange}
            onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
            onNewWorkOrder={() => page.setWizardOpen(true)}
            activeFilterCount={filters.activeFilterCount}
            isFetching={tableData.isFetching && !tableData.isLoading}
          />
        }
      />

      <WorkOrdersFilterBar
        weekMonday={filters.weekMonday}
        onWeekChange={filters.setWeekMonday}
        dispatcherIds={filters.dispatcherIds}
        onDispatcherChange={filters.setDispatcherIds}
        typeFilter={filters.typeFilter}
        onTypeChange={filters.setTypeFilter}
        users={page.users}
        usersLoading={page.usersLoading}
        currentUserId={user?.id}
        filteredCount={tableData.totalCount}
        scopeTotalCount={tableData.scopeTotalCount}
      />

      {filters.advApplied != null && (
        <WorkOrdersAdvancedFiltersBanner
          applied={filters.advApplied}
          totalCount={tableData.totalCount}
          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}
        onWeekChange={filters.setWeekMonday}
        onOpenSlideOver={page.handleOpenSlideOver}
        onOpenCompDoc={openCompletionDoc}
        onOpenMedia={page.setMediaRow}
        onClearSearch={() => filters.handleSearchChange("")}
        onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
        onPatch={page.patchField}
      />

      <WorkOrdersListOverlays
        wizardOpen={page.wizardOpen}
        onWizardOpenChange={page.setWizardOpen}
        users={page.users}
        sites={page.locations}
        pmTypes={page.pmTypes}
        vendorTechs={page.vendorTechs}
        advOpen={filters.advOpen}
        onAdvOpenChange={filters.setAdvOpen}
        advInitial={filters.advInitial}
        onApplyAdvanced={filters.applyAdvancedFilters}
        onClearAdvanced={filters.clearAdvancedFilters}
        activeDocRow={activeDocRow}
        onDocOpenChange={(open) => {
          if (!open) page.setDocRow(null);
        }}
        completionDocs={page.completionDocs}
        onSaveCompDoc={async (data, status) => {
          if (!activeDocRow) return;
          await page.saveCompletionDoc(activeDocRow, data, status);
        }}
        onDateCompletedChange={async (date) => {
          if (!activeDocRow) return;
          await page.patchFieldAsync(activeDocRow.id, { completedDate: date });
        }}
        activeMediaRow={page.activeMediaRow}
        onMediaOpenChange={(open) => {
          if (!open) page.setMediaRow(null);
        }}
      />

      <WorkOrderSlideOver
        row={page.activeSlideOverRow}
        editMode={page.slideOverEdit}
        users={page.users}
        sites={page.locations}
        vendors={page.vendors}
        pmTypes={page.pmTypes}
        allOrders={tableData.rows}
        onSave={page.patchField}
        onOpenCompletionDoc={openCompletionDoc}
        onCancelWO={page.setConfirmCancel}
        onDuplicateFound={(existing) => page.handleOpenSlideOver(existing, false)}
        saving={page.isPatchPending}
        onClose={page.handleCloseSlideOver}
      />

      <WorkOrderCancelDialog
        row={page.confirmCancel}
        isPending={page.isPatchPending}
        onDialogClose={page.cancelDialogClose}
        onKeepWO={() => page.setConfirmCancel(null)}
        onConfirm={page.handleConfirmCancel}
      />
    </Box>
  );
}