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 { 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 { 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 { useAuthContext } from "@/providers/auth-context";

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

  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}
        disabled={filters.advApplied != null}
      />

      {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={page.setDocRow}
        onOpenMedia={page.setMediaRow}
        onOpenUplifts={page.setUpliftsRow}
        onClearSearch={() => filters.handleSearchChange("")}
        onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
        onPatch={page.patchField}
      />

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