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

import { useParams } from "react-router";
import { Box } from "@mui/material";
import { QueryErrorPanel } from "@/components/ui/query-error-panel";
import { DetailPageSkeleton } from "./_components/loading/detail-page-skeleton";
import { DispatchCreateModal } from "./_components/dispatch-create-modal";
import { DispatchDetailModal } from "./_components/dispatch-detail-modal";
import { WorkOrderActivityPanel } from "./_components/view/work-order-activity-panel";
import { WorkOrderDispatchesAccordion } from "./_components/view/work-order-dispatches-accordion";
import { WorkOrderVendorEditorDialog } from "./_components/view/work-order-vendor-editor-dialog";
import { WorkOrderViewAccordions } from "./_components/view/work-order-view-accordions";
import { WorkOrderViewDetails } from "./_components/view/work-order-view-details";
import { WorkOrderViewHeader } from "./_components/view/work-order-view-header";
import { useWorkOrderViewPage } from "./_hooks/use-work-order-view-page";

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

  if (view.isLoading && !view.wo) {
    return <DetailPageSkeleton variant="view" />;
  }

  if (!view.wo) {
    return (
      <Box className="p-4">
        <QueryErrorPanel
          message={view.error instanceof Error ? view.error.message : "Work order not found."}
          onRetry={() => void view.refetch()}
        />
      </Box>
    );
  }

  return (
    <Box className="flex flex-col gap-4 p-4">
      <WorkOrderViewHeader
        wo={view.wo}
        workOrderId={workOrderId}
        statusAnchor={view.statusAnchor}
        onStatusAnchorChange={view.setStatusAnchor}
        onStatusChange={(status) => view.statusMutation.mutate(status)}
        onOpenDispatch={() => view.setDispatchOpen(true)}
      />

      <WorkOrderViewDetails
        wo={view.wo}
        users={view.users}
        assignAnchor={view.assignAnchor}
        onAssignAnchorChange={view.setAssignAnchor}
        onAssign={(userId, userName) => view.assignmentMutation.mutate({ userId, userName })}
        onUnassign={() => view.assignmentMutation.mutate({ userId: "", userName: "" })}
      />

      <WorkOrderViewAccordions wo={view.wo} />

      <WorkOrderDispatchesAccordion
        wo={view.wo}
        onOpenDispatchDetail={view.setDispatchDetailId}
        onOpenVendorEditor={view.openVendorEditor}
      />

      <WorkOrderActivityPanel
        customerComments={view.customerComments}
        internalComments={view.internalComments}
        auditLog={view.auditLog}
        mentionUsers={view.mentionUsers}
        isSubmitting={view.commentMutation.isPending}
        onSubmitComment={view.submitComment}
      />

      {view.dispatchOpen && (
        <DispatchCreateModal
          workOrder={view.wo}
          onClose={() => view.setDispatchOpen(false)}
          onDispatched={() => void view.refetch()}
        />
      )}
      {view.dispatchDetailId != null && (
        <DispatchDetailModal
          dispatchId={view.dispatchDetailId}
          workOrderId={workOrderId}
          onClose={() => view.setDispatchDetailId(null)}
          onUpdated={() => void view.refetch()}
        />
      )}

      <WorkOrderVendorEditorDialog
        editor={view.vendorEditor}
        loading={view.vendorEditorLoading}
        error={view.vendorEditorError}
        isSaving={view.vendorMutation.isPending}
        onClose={() => {
          if (!view.vendorMutation.isPending) view.setVendorEditor(null);
        }}
        onSave={view.saveVendorEditor}
        onEditorChange={view.setVendorEditor}
      />
    </Box>
  );
}