shoc-frontend-new/src/app/(protected)/workorders/[id].tsx

import { useState } from "react";
import { useNavigate, useParams } from "react-router";
import { Alert, Box, CircularProgress } from "@mui/material";
import { DispatchCreateModal } from "./_components/dispatch-create-modal";
import { DispatchDetailModal } from "./_components/dispatch-detail-modal";
import { VendorEditorDialog } from "./_components/vendor-editor-dialog";
import { useVendorEditor } from "./_components/use-vendor-editor";
import { WorkOrderActivity } from "./_components/work-order-activity";
import {
  DispatchAccordion,
  WorkOrderDetailsSection,
  WorkOrderHeader,
  WorkOrderSummaryAccordions,
} from "./_components/work-order-view-sections";
import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
import {
  useChangeWorkOrderAssignment,
  useChangeWorkOrderStatus,
} from "@/domain/work-orders/use-cases/use-work-order-mutations";
import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";

export default function WorkOrderViewPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const workOrderId = id ?? "";

  const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
  const { data: users = [] } = useWorkOrderUsers();
  const statusMutation = useChangeWorkOrderStatus(workOrderId);
  const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
  const vendorEditor = useVendorEditor({ workOrderId, onSaved: () => void refetch() });

  const [dispatchOpen, setDispatchOpen] = useState(false);
  const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);

  if (isLoading) {
    return (
      <Box className="flex justify-center p-12">
        <CircularProgress />
      </Box>
    );
  }

  if (error || !wo) {
    return (
      <Box className="p-4">
        <Alert severity="error">
          {error instanceof Error ? error.message : "Work order not found."}
        </Alert>
      </Box>
    );
  }

  return (
    <Box className="flex flex-col gap-4 p-4">
      <WorkOrderHeader
        wo={wo}
        onSelectStatus={(status) => statusMutation.mutate(status)}
        onDispatch={() => setDispatchOpen(true)}
        onEdit={() => navigate(`/workorders/edit/${id}`)}
        onBack={() => navigate("/workorders")}
      />
      <WorkOrderDetailsSection
        wo={wo}
        users={users}
        onAssign={(payload) => assignmentMutation.mutate(payload)}
      />
      <WorkOrderSummaryAccordions wo={wo} />
      <DispatchAccordion
        wo={wo}
        onEditVendor={(event, vendorId, vendorName) =>
          void vendorEditor.open(event, vendorId, vendorName)
        }
        onViewDispatch={setDispatchDetailId}
      />
      <WorkOrderActivity
        workOrderId={workOrderId}
        comments={wo.comments ?? []}
        auditLog={wo.auditLog ?? []}
      />
      {dispatchOpen && (
        <DispatchCreateModal
          workOrder={wo}
          onClose={() => setDispatchOpen(false)}
          onDispatched={() => void refetch()}
        />
      )}
      {dispatchDetailId != null && (
        <DispatchDetailModal
          dispatchId={dispatchDetailId}
          workOrderId={workOrderId}
          onClose={() => setDispatchDetailId(null)}
          onUpdated={() => void refetch()}
        />
      )}
      <VendorEditorDialog
        editor={vendorEditor.editor}
        loading={vendorEditor.loading}
        error={vendorEditor.error}
        isPending={vendorEditor.isPending}
        phoneInvalid={vendorEditor.phoneInvalid}
        isValid={vendorEditor.isValid}
        onClose={vendorEditor.close}
        onSave={vendorEditor.save}
        onFieldChange={vendorEditor.updateField}
      />
    </Box>
  );
}