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

import { useMemo, useState } from "react";
import { Box } from "@mui/material";
import { useNavigate } 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 { 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 { WorkOrdersListOverlays } from "@/app/(protected)/workorders/_components/list/work-orders-list-overlays";
import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
import { useWorkOrdersTableData } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-data";
import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
import {
  useWorkOrderLocations,
  useWorkOrderVendors,
} from "@/domain/work-orders/use-cases/use-work-order-detail";
import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
import type { CompDocData } from "@/domain/work-orders/types/completion-doc";
import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
import { useAuthContext } from "@/providers/auth-context";

function resolveActiveRow(
  selected: WorkOrderTableRow | null,
  rows: WorkOrderTableRow[],
): WorkOrderTableRow | null {
  if (!selected) return null;
  return rows.find((row) => row.id === selected.id) ?? selected;
}

export default function WorkOrdersListPage() {
  const navigate = useNavigate();
  const { user } = useAuthContext();
  const [wizardOpen, setWizardOpen] = useState(false);
  const [docRow, setDocRow] = useState<WorkOrderTableRow | null>(null);
  const [mediaRow, setMediaRow] = useState<WorkOrderTableRow | null>(null);
  const [completionDocs, setCompletionDocs] = useState<Record<string, CompDocData>>({});
  const filters = useWorkOrdersListFilters();
  const tableData = useWorkOrdersTableData(filters);
  const { patchField, patchFieldAsync } = useWorkOrderTableMutations({
    onPatch: tableData.patchRow,
    clearPatch: tableData.clearRowPatch,
    getRow: (id) => tableData.rows.find((row) => String(row.id) === String(id)),
  });
  const { data: users = [], isLoading: usersLoading } = useWorkOrderUsers();
  const { data: locations = [] } = useWorkOrderLocations();
  const { data: vendors = [] } = useWorkOrderVendors();
  const { data: problemOptions = [] } = useDropdownOptionsByCategory("Problem");
  const pmTypes = useMemo(
    () => problemOptions.map((option) => option.value).filter(Boolean),
    [problemOptions],
  );
  const vendorTechs = useMemo(
    () => [...new Set(vendors.map((vendor) => vendor.companyName).filter(Boolean))],
    [vendors],
  );
  const activeDocRow = useMemo(
    () => resolveActiveRow(docRow, tableData.rows),
    [docRow, tableData.rows],
  );
  const activeMediaRow = useMemo(
    () => resolveActiveRow(mediaRow, tableData.rows),
    [mediaRow, tableData.rows],
  );
  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={() => 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={users}
        usersLoading={usersLoading}
        currentUserId={user?.id}
        filteredCount={tableData.totalCount}
        scopeTotalCount={tableData.scopeTotalCount}
      />

      {filters.advApplied != null && (
        <WorkOrdersAdvancedFiltersBanner
          applied={filters.advApplied}
          totalCount={tableData.totalCount}
          sites={locations}
          users={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={users}
        sites={locations}
        vendors={vendors}
        pmTypes={pmTypes}
        weekMonday={filters.weekMonday}
        onWeekChange={filters.setWeekMonday}
        onOpenSlideOver={(row, edit) => {
          tableData.setSelectedId(row.id);
          navigate(edit ? `/workorders/edit/${row.id}` : `/workorders/${row.id}`);
        }}
        onOpenCompDoc={(row) => {
          if (!hasCompletionDocService(row.pm)) return;
          setDocRow(row);
        }}
        onOpenMedia={setMediaRow}
        onClearSearch={() => filters.handleSearchChange("")}
        onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
        onPatch={patchField}
      />

      <WorkOrdersListOverlays
        wizardOpen={wizardOpen}
        onWizardOpenChange={setWizardOpen}
        users={users}
        sites={locations}
        pmTypes={pmTypes}
        vendorTechs={vendorTechs}
        advOpen={filters.advOpen}
        onAdvOpenChange={filters.setAdvOpen}
        advInitial={filters.advInitial}
        onApplyAdvanced={filters.applyAdvancedFilters}
        onClearAdvanced={filters.clearAdvancedFilters}
        activeDocRow={activeDocRow}
        onDocOpenChange={(open) => {
          if (!open) setDocRow(null);
        }}
        completionDocs={completionDocs}
        onSaveCompDoc={async (data, status) => {
          if (!activeDocRow) return;
          // Persist board docStatus first so local generatedAt/notes never outrun the server.
          await patchFieldAsync(activeDocRow.id, { docStatus: status });
          setCompletionDocs((prev) => ({ ...prev, [String(activeDocRow.id)]: data }));
        }}
        onDateCompletedChange={async (date) => {
          if (!activeDocRow) return;
          await patchFieldAsync(activeDocRow.id, { completedDate: date });
        }}
        activeMediaRow={activeMediaRow}
        onMediaOpenChange={(open) => {
          if (!open) setMediaRow(null);
        }}
      />
    </Box>
  );
}