From 42258713fae6d9bdd7a0de7c7c6f7576c6585008 Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Mon, 3 Aug 2026 14:36:19 -0300
Subject: [PATCH] refactor(workorders): split work order view page into view
 components

---
 src/app/(protected)/workorders/[id].tsx       | 804 ++----------------
 .../view/work-order-activity-panel.tsx        | 101 +++
 .../view/work-order-audit-timeline.tsx        |  38 +
 .../view/work-order-detail-field.tsx          |  12 +
 .../view/work-order-dispatches-accordion.tsx  | 113 +++
 .../view/work-order-vendor-editor-dialog.tsx  | 135 +++
 .../view/work-order-vendor-editor-types.ts    |  11 +
 .../view/work-order-vendor-editor-utils.ts    |  16 +
 .../view/work-order-view-accordions.tsx       |  66 ++
 .../view/work-order-view-details.tsx          |  73 ++
 .../view/work-order-view-header.tsx           |  95 +++
 .../_hooks/use-work-order-view-page.ts        | 152 ++++
 12 files changed, 880 insertions(+), 736 deletions(-)
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-view-details.tsx
 create mode 100644 src/app/(protected)/workorders/_components/view/work-order-view-header.tsx
 create mode 100644 src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts

diff --git a/src/app/(protected)/workorders/[id].tsx b/src/app/(protected)/workorders/[id].tsx
index e9fb5b56..b9721508 100644
--- a/src/app/(protected)/workorders/[id].tsx
+++ b/src/app/(protected)/workorders/[id].tsx
@@ -1,282 +1,21 @@
-import { useMemo, useState } from "react";
-import { Link as RouterLink, useNavigate, useParams } from "react-router";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Alert,
-  Box,
-  Breadcrumbs,
-  Button,
-  Chip,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Link,
-  Menu,
-  MenuItem,
-  Paper,
-  Stack,
-  Tab,
-  Tabs,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
-import { CommentTimeline } from "@/components/common/comment-timeline";
-import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import { 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 type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
-import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
-import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
-import {
-  useAddWorkOrderComment,
-  useChangeWorkOrderAssignment,
-  useChangeWorkOrderStatus,
-  useUpdateWorkOrderVendor,
-} from "@/domain/work-orders/use-cases/use-work-order-mutations";
-import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
-import { vendorsApi } from "@/domain/vendors/api/vendors-api";
-import type { VendorPreferredContact } from "@/domain/vendors/types/vendor";
-import { extractMentionIds } from "@/domain/work-orders/utils/comment-mentions";
-import { formatDateTime, timeSince, waitTimeColor } from "@/lib/time-utils";
-
-const STATUS_COLORS: Record<
-  string,
-  "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
-> = {
-  Open: "primary",
-  "In Progress": "info",
-  "On Hold": "warning",
-  Done: "success",
-  Cancelled: "default",
-};
-
-type ActivityTab = "customer" | "internal" | "audit";
-
-interface VendorEditorState {
-  vendorId: string | number;
-  vendorName: string;
-  contactName: string;
-  preferredContact: VendorPreferredContact;
-  phone: string;
-  email: string;
-  notes: string;
-}
-
-function formatPhoneMask(input: string): string {
-  const digits = input.replace(/\D/g, "").slice(0, 10);
-  if (digits.length <= 3) return digits;
-  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
-  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
-}
-
-function isVendorEditorValid(editor: VendorEditorState): boolean {
-  const phoneValid = editor.phone === "" || /^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone);
-  const emailValid = editor.email === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editor.email);
-  return (
-    phoneValid && emailValid && editor.notes.length <= 2000 && editor.contactName.length <= 200
-  );
-}
-
-function AuditTimeline({ entries }: { entries: WorkOrderAuditEntry[] }) {
-  const sorted = useMemo(
-    () =>
-      [...entries].sort(
-        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
-      ),
-    [entries],
-  );
-
-  if (!sorted.length) {
-    return (
-      <Typography
-        sx={{
-          color: "text.secondary",
-        }}
-      >
-        No changes recorded.
-      </Typography>
-    );
-  }
-
-  return (
-    <Stack spacing={2} className="max-h-72 overflow-y-auto">
-      {sorted.map((entry) => (
-        <Box key={String(entry.id)} className="rounded border border-border p-3">
-          <Stack
-            direction="row"
-            className="mb-1"
-            sx={{
-              justifyContent: "space-between",
-            }}
-          >
-            <Typography variant="caption" className="font-semibold">
-              {entry.userName || "System"}
-            </Typography>
-            <Typography
-              variant="caption"
-              sx={{
-                color: "text.secondary",
-              }}
-            >
-              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
-            </Typography>
-          </Stack>
-          <Typography variant="body2">
-            <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
-          </Typography>
-        </Box>
-      ))}
-    </Stack>
-  );
-}
+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 navigate = useNavigate();
   const workOrderId = id ?? "";
+  const view = useWorkOrderViewPage(workOrderId);
 
-  const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
-  const { data: users = [] } = useWorkOrderUsers();
-  const statusMutation = useChangeWorkOrderStatus(workOrderId);
-  const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
-  const commentMutation = useAddWorkOrderComment(workOrderId);
-  const vendorMutation = useUpdateWorkOrderVendor(workOrderId);
-
-  const [activeTab, setActiveTab] = useState<ActivityTab>("customer");
-  const [commentText, setCommentText] = useState("");
-  const [dispatchOpen, setDispatchOpen] = useState(false);
-  const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
-  const [statusAnchor, setStatusAnchor] = useState<HTMLElement | null>(null);
-  const [assignAnchor, setAssignAnchor] = useState<HTMLElement | null>(null);
-  const [vendorEditor, setVendorEditor] = useState<VendorEditorState | null>(null);
-  const [vendorEditorLoading, setVendorEditorLoading] = useState(false);
-  const [vendorEditorError, setVendorEditorError] = useState("");
-
-  const customerComments = useMemo(
-    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "customer"),
-    [wo?.comments],
-  );
-  const internalComments = useMemo(
-    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "internal"),
-    [wo?.comments],
-  );
-  const auditLog = wo?.auditLog ?? [];
-  const mentionUsers = useMemo(
-    () => users.map((user) => ({ id: user.id, name: user.name })),
-    [users],
-  );
-  const customerTimelineItems = useMemo(
-    () => mapWorkOrderCommentsToTimeline(customerComments),
-    [customerComments],
-  );
-  const internalTimelineItems = useMemo(
-    () => mapWorkOrderCommentsToTimeline(internalComments),
-    [internalComments],
-  );
-
-  const handleCommentSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    if (!commentText.trim()) {
-      return;
-    }
-    if (activeTab !== "customer" && activeTab !== "internal") {
-      return;
-    }
-
-    const trimmedText = commentText.trim();
-    const mentions = extractMentionIds(trimmedText);
-
-    commentMutation.mutate(
-      {
-        text: trimmedText,
-        mentions: mentions.length > 0 ? mentions : undefined,
-        commentType: activeTab,
-      },
-      { onSuccess: () => setCommentText("") },
-    );
-  };
-
-  const openVendorEditor = async (
-    event: React.MouseEvent,
-    vendorId: string | number,
-    vendorName: string,
-  ) => {
-    event.stopPropagation();
-    setVendorEditorError("");
-    setVendorEditorLoading(true);
-    setVendorEditor({
-      vendorId,
-      vendorName,
-      contactName: "",
-      preferredContact: "Phone",
-      phone: "",
-      email: "",
-      notes: "",
-    });
-
-    try {
-      const vendor = await vendorsApi.getById(vendorId);
-      setVendorEditor({
-        vendorId,
-        vendorName: vendor.companyName || vendorName,
-        contactName: vendor.contactName,
-        preferredContact: vendor.preferredContact,
-        phone: vendor.phone,
-        email: vendor.email,
-        notes: vendor.notes,
-      });
-    } catch (vendorError) {
-      setVendorEditorError(
-        vendorError instanceof Error ? vendorError.message : "Unable to load vendor details",
-      );
-    } finally {
-      setVendorEditorLoading(false);
-    }
-  };
-
-  const saveVendorEditor = () => {
-    if (!vendorEditor || !isVendorEditorValid(vendorEditor)) return;
-    const numericWorkOrderId = Number(workOrderId);
-    if (!Number.isInteger(numericWorkOrderId) || numericWorkOrderId <= 0) {
-      setVendorEditorError("A valid work order is required");
-      return;
-    }
-
-    vendorMutation.mutate(
-      {
-        vendorId: vendorEditor.vendorId,
-        payload: {
-          workOrderId: numericWorkOrderId,
-          contactName: vendorEditor.contactName.trim(),
-          preferredContact: vendorEditor.preferredContact,
-          phone: vendorEditor.phone,
-          email: vendorEditor.email.trim(),
-          notes: vendorEditor.notes.trim(),
-        },
-      },
-      {
-        onSuccess: () => {
-          setVendorEditor(null);
-          void refetch();
-        },
-        onError: (vendorError) => setVendorEditorError(vendorError.message),
-      },
-    );
-  };
-
-  if (isLoading) {
+  if (view.isLoading) {
     return (
       <Box className="flex justify-center p-12">
         <CircularProgress />
@@ -284,11 +23,11 @@ export default function WorkOrderViewPage() {
     );
   }
 
-  if (error || !wo) {
+  if (view.error || !view.wo) {
     return (
       <Box className="p-4">
         <Alert severity="error">
-          {error instanceof Error ? error.message : "Work order not found."}
+          {view.error instanceof Error ? view.error.message : "Work order not found."}
         </Alert>
       </Box>
     );
@@ -296,476 +35,69 @@ export default function WorkOrderViewPage() {
 
   return (
     <Box className="flex flex-col gap-4 p-4">
-      <Breadcrumbs>
-        <Link component={RouterLink} to="/workorders" underline="hover">
-          Work Orders
-        </Link>
-        <Typography
-          sx={{
-            color: "text.primary",
-          }}
-        >
-          {wo.internalWONumber}
-        </Typography>
-      </Breadcrumbs>
-      <Stack
-        direction={{ xs: "column", md: "row" }}
-        spacing={2}
-        sx={{
-          justifyContent: "space-between",
-          alignItems: { xs: "stretch", md: "flex-start" },
-        }}
-      >
-        <Stack spacing={1}>
-          <Typography variant="h5" component="h1">
-            {wo.title}
-          </Typography>
-          <Chip
-            label={wo.status}
-            color={STATUS_COLORS[wo.status] ?? "default"}
-            onClick={(event) => setStatusAnchor(event.currentTarget)}
-            className="w-fit cursor-pointer"
-          />
-          <Menu
-            anchorEl={statusAnchor}
-            open={Boolean(statusAnchor)}
-            onClose={() => setStatusAnchor(null)}
-          >
-            {WORK_ORDER_STATUS_OPTIONS.map((status) => (
-              <MenuItem
-                key={status}
-                selected={status === wo.status}
-                onClick={() => {
-                  setStatusAnchor(null);
-                  if (status !== wo.status) {
-                    statusMutation.mutate(status);
-                  }
-                }}
-              >
-                {status}
-              </MenuItem>
-            ))}
-          </Menu>
-        </Stack>
+      <WorkOrderViewHeader
+        wo={view.wo}
+        workOrderId={workOrderId}
+        statusAnchor={view.statusAnchor}
+        onStatusAnchorChange={view.setStatusAnchor}
+        onStatusChange={(status) => view.statusMutation.mutate(status)}
+        onOpenDispatch={() => view.setDispatchOpen(true)}
+      />
 
-        <Stack
-          direction="row"
-          spacing={1}
-          sx={{
-            flexWrap: "wrap",
-          }}
-        >
-          <Button variant="contained" color="success" onClick={() => setDispatchOpen(true)}>
-            Dispatch
-          </Button>
-          <Button variant="contained" onClick={() => navigate(`/workorders/edit/${id}`)}>
-            Edit
-          </Button>
-          <Button variant="outlined" onClick={() => navigate("/workorders")}>
-            Back to List
-          </Button>
-        </Stack>
-      </Stack>
-      <Paper variant="outlined" className="p-4">
-        <Typography variant="subtitle1" className="mb-3 font-semibold">
-          Details
-        </Typography>
-        <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          <Field label="Internal WO" value={wo.internalWONumber} />
-          <Field label="Customer WO" value={wo.workOrderNumber || "—"} />
-          <Field label="Priority" value={wo.priority || "—"} />
-          <Field label="Location" value={wo.location || "—"} />
-          <Box>
-            <Typography
-              variant="caption"
-              sx={{
-                color: "text.secondary",
-                display: "block",
-              }}
-            >
-              Assigned To
-            </Typography>
-            <Button size="small" onClick={(event) => setAssignAnchor(event.currentTarget)}>
-              {wo.assignedTo || "Unassigned"}
-            </Button>
-            <Menu
-              anchorEl={assignAnchor}
-              open={Boolean(assignAnchor)}
-              onClose={() => setAssignAnchor(null)}
-            >
-              <MenuItem
-                onClick={() => {
-                  setAssignAnchor(null);
-                  assignmentMutation.mutate({ userId: "", userName: "" });
-                }}
-              >
-                Unassigned
-              </MenuItem>
-              {users.map((user) => (
-                <MenuItem
-                  key={String(user.id)}
-                  selected={wo.assignedTo === user.name}
-                  onClick={() => {
-                    setAssignAnchor(null);
-                    assignmentMutation.mutate({ userId: user.id, userName: user.name });
-                  }}
-                >
-                  {user.name}
-                </MenuItem>
-              ))}
-            </Menu>
-          </Box>
-          <Field label="Source" value={wo.source || "—"} />
-          <Field label="TT" value={wo.tt || "—"} />
-        </Box>
-      </Paper>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography
-            sx={{
-              fontWeight: 600,
-            }}
-          >
-            Classification
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-            <Field label="Problem" value={wo.problem || "—"} />
-            <Field label="Trade" value={wo.trade || "—"} />
-            <Field label="Sub-Trade" value={wo.subTrade || "—"} />
-          </Box>
-        </AccordionDetails>
-      </Accordion>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography
-            sx={{
-              fontWeight: 600,
-            }}
-          >
-            Schedule
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            <Field
-              label="Created"
-              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
-            />
-            <Field label="Due Date" value={wo.dueDate || "—"} />
-            <Field label="Scheduled" value={wo.scheduledDate || "—"} />
-            <Field label="Completed" value={wo.completedDate || "—"} />
-          </Box>
-        </AccordionDetails>
-      </Accordion>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography
-            sx={{
-              fontWeight: 600,
-            }}
-          >
-            Financial
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-            <Field
-              label="Vendor NTE"
-              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
-            />
-            <Field label="Customer PO" value={wo.po || "—"} />
-            <Field label="Customer NTE" value="Not connected" />
-          </Box>
-        </AccordionDetails>
-      </Accordion>
-      <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography
-            sx={{
-              fontWeight: 600,
-            }}
-          >
-            Dispatches ({wo.dispatches.length})
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          {wo.dispatches.length ? (
-            <TableContainer>
-              <Table size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Dispatch #</TableCell>
-                    <TableCell>Vendor</TableCell>
-                    <TableCell>NTE</TableCell>
-                    <TableCell>Status</TableCell>
-                    <TableCell>Date</TableCell>
-                    <TableCell>Wait</TableCell>
-                    <TableCell align="right">Actions</TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {wo.dispatches.map((dispatch) => {
-                    const waitColor = waitTimeColor(dispatch.dispatchedAt);
-                    return (
-                      <TableRow
-                        key={String(dispatch.id)}
-                        hover
-                        className="cursor-pointer"
-                        onClick={() => setDispatchDetailId(dispatch.id)}
-                      >
-                        <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
-                        <TableCell>{dispatch.vendorName}</TableCell>
-                        <TableCell>
-                          {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
-                        </TableCell>
-                        <TableCell>{dispatch.status}</TableCell>
-                        <TableCell>
-                          {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
-                        </TableCell>
-                        <TableCell>
-                          {dispatch.status === "Sent" ? (
-                            <Typography
-                              variant="caption"
-                              className={
-                                waitColor === "green"
-                                  ? "text-green-600"
-                                  : waitColor === "yellow"
-                                    ? "text-yellow-600"
-                                    : "text-red-600"
-                              }
-                            >
-                              {timeSince(dispatch.dispatchedAt)}
-                            </Typography>
-                          ) : (
-                            "—"
-                          )}
-                        </TableCell>
-                        <TableCell align="right">
-                          <Button
-                            size="small"
-                            onClick={(event) =>
-                              void openVendorEditor(event, dispatch.vendorId, dispatch.vendorName)
-                            }
-                            disabled={dispatch.vendorId === ""}
-                          >
-                            Edit vendor
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          ) : (
-            <Typography
-              sx={{
-                color: "text.secondary",
-              }}
-            >
-              No dispatches yet.
-            </Typography>
-          )}
-        </AccordionDetails>
-      </Accordion>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography
-            sx={{
-              fontWeight: 600,
-            }}
-          >
-            Description
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>{wo.description || "No description provided."}</Typography>
-        </AccordionDetails>
-      </Accordion>
-      <Paper variant="outlined" className="p-4">
-        <Typography variant="subtitle1" className="mb-3 font-semibold">
-          Activity
-        </Typography>
-        <Tabs
-          value={activeTab}
-          onChange={(_event, value: ActivityTab) => setActiveTab(value)}
-          className="mb-3"
-        >
-          <Tab value="customer" label={`Customer (${customerComments.length})`} />
-          <Tab value="internal" label={`Internal (${internalComments.length})`} />
-          <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
-        </Tabs>
+      <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: "" })}
+      />
 
-        {activeTab === "customer" && (
-          <CommentTimeline items={customerTimelineItems} mentionUsers={mentionUsers} />
-        )}
-        {activeTab === "internal" && (
-          <CommentTimeline items={internalTimelineItems} mentionUsers={mentionUsers} />
-        )}
-        {activeTab === "audit" && <AuditTimeline entries={auditLog} />}
+      <WorkOrderViewAccordions wo={view.wo} />
 
-        {activeTab === "internal" && (
-          <Box component="form" onSubmit={handleCommentSubmit} className="mt-4 flex flex-col gap-2">
-            <CommentMentionComposer
-              value={commentText}
-              onChange={setCommentText}
-              candidates={mentionUsers}
-              disabled={commentMutation.isPending}
-            />
-            <Button
-              type="submit"
-              variant="contained"
-              className="self-end"
-              disabled={commentMutation.isPending || !commentText.trim()}
-            >
-              {commentMutation.isPending ? "Sending..." : "Send"}
-            </Button>
-          </Box>
-        )}
-      </Paper>
-      {dispatchOpen && (
+      <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={wo}
-          onClose={() => setDispatchOpen(false)}
-          onDispatched={() => void refetch()}
+          workOrder={view.wo}
+          onClose={() => view.setDispatchOpen(false)}
+          onDispatched={() => void view.refetch()}
         />
       )}
-      {dispatchDetailId != null && (
-        <DispatchDetailModal
-          dispatchId={dispatchDetailId}
-          workOrderId={workOrderId}
-          onClose={() => setDispatchDetailId(null)}
-          onUpdated={() => void refetch()}
-        />
-      )}
-      <Dialog
-        open={vendorEditor !== null}
-        onClose={() => {
-          if (!vendorMutation.isPending) setVendorEditor(null);
-        }}
-        fullWidth
-        maxWidth="sm"
-      >
-        <DialogTitle>Edit assigned vendor</DialogTitle>
-        <DialogContent>
-          <Stack spacing={2} className="pt-2">
-            <Typography variant="body2" color="text.secondary">
-              {vendorEditor?.vendorName}
-            </Typography>
-            {Boolean(vendorEditorError) && <Alert severity="error">{vendorEditorError}</Alert>}
-            {vendorEditorLoading ? (
-              <Box className="flex justify-center p-6">
-                <CircularProgress size={28} />
-              </Box>
-            ) : (
-              <>
-                <TextField
-                  label="Technician name"
-                  value={vendorEditor?.contactName ?? ""}
-                  onChange={(event) =>
-                    setVendorEditor((current) =>
-                      current ? { ...current, contactName: event.target.value } : current,
-                    )
-                  }
-                  slotProps={{ htmlInput: { maxLength: 200 } }}
-                />
-                <TextField
-                  select
-                  label="Preferred contact"
-                  value={vendorEditor?.preferredContact ?? "Phone"}
-                  onChange={(event) =>
-                    setVendorEditor((current) =>
-                      current
-                        ? {
-                            ...current,
-                            preferredContact: event.target.value as VendorPreferredContact,
-                          }
-                        : current,
-                    )
-                  }
-                >
-                  <MenuItem value="Phone">Phone</MenuItem>
-                  <MenuItem value="Email">Email</MenuItem>
-                  <MenuItem value="Text">Text</MenuItem>
-                </TextField>
-                <TextField
-                  label="Phone"
-                  value={vendorEditor?.phone ?? ""}
-                  onChange={(event) =>
-                    setVendorEditor((current) =>
-                      current
-                        ? { ...current, phone: formatPhoneMask(event.target.value) }
-                        : current,
-                    )
-                  }
-                  error={Boolean(
-                    vendorEditor?.phone && !/^\(\d{3}\) \d{3}-\d{4}$/.test(vendorEditor.phone),
-                  )}
-                  helperText="Use (XXX) XXX-XXXX"
-                />
-                <TextField
-                  label="Email"
-                  type="email"
-                  value={vendorEditor?.email ?? ""}
-                  onChange={(event) =>
-                    setVendorEditor((current) =>
-                      current ? { ...current, email: event.target.value } : current,
-                    )
-                  }
-                />
-                <TextField
-                  label="Notes"
-                  multiline
-                  minRows={3}
-                  value={vendorEditor?.notes ?? ""}
-                  onChange={(event) =>
-                    setVendorEditor((current) =>
-                      current ? { ...current, notes: event.target.value } : current,
-                    )
-                  }
-                  slotProps={{ htmlInput: { maxLength: 2000 } }}
-                />
-              </>
-            )}
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setVendorEditor(null)} disabled={vendorMutation.isPending}>
-            Cancel
-          </Button>
-          <Button
-            variant="contained"
-            onClick={saveVendorEditor}
-            disabled={
-              !vendorEditor ||
-              vendorEditorLoading ||
-              vendorMutation.isPending ||
-              !isVendorEditorValid(vendorEditor)
-            }
-          >
-            {vendorMutation.isPending ? "Saving..." : "Save"}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
-  );
-}
 
-function Field({ label, value }: { label: string; value: string }) {
-  return (
-    <Box>
-      <Typography
-        variant="caption"
-        sx={{
-          color: "text.secondary",
-          display: "block",
+      {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);
         }}
-      >
-        {label}
-      </Typography>
-      <Typography variant="body2">{value}</Typography>
+        onSave={view.saveVendorEditor}
+        onEditorChange={view.setVendorEditor}
+      />
     </Box>
   );
 }
diff --git a/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx b/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx
new file mode 100644
index 00000000..4c1742b5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx
@@ -0,0 +1,101 @@
+import { useMemo, useState } from "react";
+import { Box, Button, Paper, Tab, Tabs } from "@mui/material";
+import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
+import { CommentTimeline } from "@/components/common/comment-timeline";
+import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import type {
+  WorkOrderAuditEntry,
+  WorkOrderComment,
+} from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderAuditTimeline } from "@/app/(protected)/workorders/_components/view/work-order-audit-timeline";
+import { Text } from "@/components/ui/text";
+
+export type WorkOrderActivityTab = "customer" | "internal" | "audit";
+
+type MentionUser = { id: string | number; name: string };
+
+type WorkOrderActivityPanelProps = {
+  customerComments: WorkOrderComment[];
+  internalComments: WorkOrderComment[];
+  auditLog: WorkOrderAuditEntry[];
+  mentionUsers: MentionUser[];
+  isSubmitting: boolean;
+  onSubmitComment: (text: string) => void;
+};
+
+export function WorkOrderActivityPanel({
+  customerComments,
+  internalComments,
+  auditLog,
+  mentionUsers,
+  isSubmitting,
+  onSubmitComment,
+}: WorkOrderActivityPanelProps) {
+  const [activeTab, setActiveTab] = useState<WorkOrderActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+
+  const customerTimelineItems = useMemo(
+    () => mapWorkOrderCommentsToTimeline(customerComments),
+    [customerComments],
+  );
+  const internalTimelineItems = useMemo(
+    () => mapWorkOrderCommentsToTimeline(internalComments),
+    [internalComments],
+  );
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Text as="p" variant="heading" className="mb-3 font-semibold">
+        Activity
+      </Text>
+      <Tabs
+        value={activeTab}
+        onChange={(_event, value: WorkOrderActivityTab) => setActiveTab(value)}
+        className="mb-3"
+      >
+        <Tab value="customer" label={`Customer (${customerComments.length})`} />
+        <Tab value="internal" label={`Internal (${internalComments.length})`} />
+        <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
+      </Tabs>
+
+      {activeTab === "customer" && (
+        <CommentTimeline items={customerTimelineItems} mentionUsers={mentionUsers} />
+      )}
+      {activeTab === "internal" && (
+        <CommentTimeline items={internalTimelineItems} mentionUsers={mentionUsers} />
+      )}
+      {activeTab === "audit" && <WorkOrderAuditTimeline entries={auditLog} />}
+
+      {activeTab === "internal" && (
+        <Box
+          component="form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const trimmed = commentText.trim();
+            if (!trimmed) {
+              return;
+            }
+            onSubmitComment(trimmed);
+            setCommentText("");
+          }}
+          className="mt-4 flex flex-col gap-2"
+        >
+          <CommentMentionComposer
+            value={commentText}
+            onChange={setCommentText}
+            candidates={mentionUsers}
+            disabled={isSubmitting}
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            className="self-end"
+            disabled={isSubmitting || !commentText.trim()}
+          >
+            {isSubmitting ? "Sending..." : "Send"}
+          </Button>
+        </Box>
+      )}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx b/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx
new file mode 100644
index 00000000..46c7b374
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function WorkOrderAuditTimeline({ entries }: { entries: WorkOrderAuditEntry[] }) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return <Typography sx={{ color: "text.secondary" }}>No changes recorded.</Typography>;
+  }
+
+  return (
+    <Stack spacing={2} className="max-h-72 overflow-y-auto">
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Stack direction="row" className="mb-1" sx={{ justifyContent: "space-between" }}>
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography variant="caption" sx={{ color: "text.secondary" }}>
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Stack>
+          <Typography variant="body2">
+            <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+          </Typography>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx b/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx
new file mode 100644
index 00000000..1e9f5184
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx
@@ -0,0 +1,12 @@
+import { Box, Typography } from "@mui/material";
+
+export function WorkOrderDetailField({ label, value }: { label: string; value: string }) {
+  return (
+    <Box>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+        {label}
+      </Typography>
+      <Typography variant="body2">{value}</Typography>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx b/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx
new file mode 100644
index 00000000..0d77c0f0
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx
@@ -0,0 +1,113 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { formatDateTime, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+type WorkOrderDispatchesAccordionProps = {
+  wo: WorkOrderDetail;
+  onOpenDispatchDetail: (dispatchId: string | number) => void;
+  onOpenVendorEditor: (
+    event: React.MouseEvent,
+    vendorId: string | number,
+    vendorName: string,
+  ) => void;
+};
+
+export function WorkOrderDispatchesAccordion({
+  wo,
+  onOpenDispatchDetail,
+  onOpenVendorEditor,
+}: WorkOrderDispatchesAccordionProps) {
+  return (
+    <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {wo.dispatches.length ? (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dispatch #</TableCell>
+                  <TableCell>Vendor</TableCell>
+                  <TableCell>NTE</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date</TableCell>
+                  <TableCell>Wait</TableCell>
+                  <TableCell align="right">Actions</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {wo.dispatches.map((dispatch) => {
+                  const waitColor = waitTimeColor(dispatch.dispatchedAt);
+                  return (
+                    <TableRow
+                      key={String(dispatch.id)}
+                      hover
+                      className="cursor-pointer"
+                      onClick={() => onOpenDispatchDetail(dispatch.id)}
+                    >
+                      <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
+                      <TableCell>{dispatch.vendorName}</TableCell>
+                      <TableCell>
+                        {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+                      </TableCell>
+                      <TableCell>{dispatch.status}</TableCell>
+                      <TableCell>
+                        {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+                      </TableCell>
+                      <TableCell>
+                        {dispatch.status === "Sent" ? (
+                          <Typography
+                            variant="caption"
+                            className={
+                              waitColor === "green"
+                                ? "text-green-600"
+                                : waitColor === "yellow"
+                                  ? "text-yellow-600"
+                                  : "text-red-600"
+                            }
+                          >
+                            {timeSince(dispatch.dispatchedAt)}
+                          </Typography>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                      <TableCell align="right">
+                        <Button
+                          size="small"
+                          onClick={(event) =>
+                            void onOpenVendorEditor(event, dispatch.vendorId, dispatch.vendorName)
+                          }
+                          disabled={dispatch.vendorId === ""}
+                        >
+                          Edit vendor
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <Typography sx={{ color: "text.secondary" }}>No dispatches yet.</Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx
new file mode 100644
index 00000000..503eadc2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx
@@ -0,0 +1,135 @@
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  MenuItem,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type { VendorPreferredContact } from "@/domain/vendors/types/vendor";
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+import { formatPhoneMask, isVendorEditorValid } from "./work-order-vendor-editor-utils";
+
+type WorkOrderVendorEditorDialogProps = {
+  editor: VendorEditorState | null;
+  loading: boolean;
+  error: string;
+  isSaving: boolean;
+  onClose: () => void;
+  onSave: () => void;
+  onEditorChange: (
+    updater: (current: VendorEditorState | null) => VendorEditorState | null,
+  ) => void;
+};
+
+export function WorkOrderVendorEditorDialog({
+  editor,
+  loading,
+  error,
+  isSaving,
+  onClose,
+  onSave,
+  onEditorChange,
+}: WorkOrderVendorEditorDialogProps) {
+  return (
+    <Dialog open={editor !== null} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>Edit assigned vendor</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} className="pt-2">
+          <Typography variant="body2" color="text.secondary">
+            {editor?.vendorName}
+          </Typography>
+          {Boolean(error) && <Alert severity="error">{error}</Alert>}
+          {loading ? (
+            <Box className="flex justify-center p-6">
+              <CircularProgress size={28} />
+            </Box>
+          ) : (
+            <>
+              <TextField
+                label="Technician name"
+                value={editor?.contactName ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, contactName: event.target.value } : current,
+                  )
+                }
+                slotProps={{ htmlInput: { maxLength: 200 } }}
+              />
+              <TextField
+                select
+                label="Preferred contact"
+                value={editor?.preferredContact ?? "Phone"}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current
+                      ? {
+                          ...current,
+                          preferredContact: event.target.value as VendorPreferredContact,
+                        }
+                      : current,
+                  )
+                }
+              >
+                <MenuItem value="Phone">Phone</MenuItem>
+                <MenuItem value="Email">Email</MenuItem>
+                <MenuItem value="Text">Text</MenuItem>
+              </TextField>
+              <TextField
+                label="Phone"
+                value={editor?.phone ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, phone: formatPhoneMask(event.target.value) } : current,
+                  )
+                }
+                error={Boolean(editor?.phone && !/^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone))}
+                helperText="Use (XXX) XXX-XXXX"
+              />
+              <TextField
+                label="Email"
+                type="email"
+                value={editor?.email ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, email: event.target.value } : current,
+                  )
+                }
+              />
+              <TextField
+                label="Notes"
+                multiline
+                minRows={3}
+                value={editor?.notes ?? ""}
+                onChange={(event) =>
+                  onEditorChange((current) =>
+                    current ? { ...current, notes: event.target.value } : current,
+                  )
+                }
+                slotProps={{ htmlInput: { maxLength: 2000 } }}
+              />
+            </>
+          )}
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={isSaving}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onSave}
+          disabled={!editor || loading || isSaving || !isVendorEditorValid(editor)}
+        >
+          {isSaving ? "Saving..." : "Save"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts
new file mode 100644
index 00000000..d3b155cc
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts
@@ -0,0 +1,11 @@
+import type { VendorPreferredContact } from "@/domain/vendors/types/vendor";
+
+export interface VendorEditorState {
+  vendorId: string | number;
+  vendorName: string;
+  contactName: string;
+  preferredContact: VendorPreferredContact;
+  phone: string;
+  email: string;
+  notes: string;
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts
new file mode 100644
index 00000000..a73099ab
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts
@@ -0,0 +1,16 @@
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+
+export function formatPhoneMask(input: string): string {
+  const digits = input.replace(/\D/g, "").slice(0, 10);
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
+
+export function isVendorEditorValid(editor: VendorEditorState): boolean {
+  const phoneValid = editor.phone === "" || /^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone);
+  const emailValid = editor.email === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editor.email);
+  return (
+    phoneValid && emailValid && editor.notes.length <= 2000 && editor.contactName.length <= 200
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx
new file mode 100644
index 00000000..707d8d61
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx
@@ -0,0 +1,66 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function WorkOrderViewAccordions({ wo }: { wo: WorkOrderDetail }) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <WorkOrderDetailField label="Problem" value={wo.problem || "—"} />
+            <WorkOrderDetailField label="Trade" value={wo.trade || "—"} />
+            <WorkOrderDetailField label="Sub-Trade" value={wo.subTrade || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <WorkOrderDetailField
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <WorkOrderDetailField label="Due Date" value={wo.dueDate || "—"} />
+            <WorkOrderDetailField label="Scheduled" value={wo.scheduledDate || "—"} />
+            <WorkOrderDetailField label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <WorkOrderDetailField
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <WorkOrderDetailField label="Customer PO" value={wo.po || "—"} />
+            <WorkOrderDetailField label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Description</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>{wo.description || "No description provided."}</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx
new file mode 100644
index 00000000..bf283bfd
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx
@@ -0,0 +1,73 @@
+import { Box, Button, Menu, MenuItem, Paper, Typography } from "@mui/material";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
+import { Text } from "@/components/ui/text";
+
+type WorkOrderViewDetailsProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  assignAnchor: HTMLElement | null;
+  onAssignAnchorChange: (anchor: HTMLElement | null) => void;
+  onAssign: (userId: string | number, userName: string) => void;
+  onUnassign: () => void;
+};
+
+export function WorkOrderViewDetails({
+  wo,
+  users,
+  assignAnchor,
+  onAssignAnchorChange,
+  onAssign,
+  onUnassign,
+}: WorkOrderViewDetailsProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Text as="p" variant="heading" className="mb-3 font-semibold">
+        Details
+      </Text>
+      <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <WorkOrderDetailField label="Internal WO" value={wo.internalWONumber} />
+        <WorkOrderDetailField label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <WorkOrderDetailField label="Priority" value={wo.priority || "—"} />
+        <WorkOrderDetailField label="Location" value={wo.location || "—"} />
+        <Box>
+          <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+            Assigned To
+          </Typography>
+          <Button size="small" onClick={(event) => onAssignAnchorChange(event.currentTarget)}>
+            {wo.assignedTo || "Unassigned"}
+          </Button>
+          <Menu
+            anchorEl={assignAnchor}
+            open={Boolean(assignAnchor)}
+            onClose={() => onAssignAnchorChange(null)}
+          >
+            <MenuItem
+              onClick={() => {
+                onAssignAnchorChange(null);
+                onUnassign();
+              }}
+            >
+              Unassigned
+            </MenuItem>
+            {users.map((user) => (
+              <MenuItem
+                key={String(user.id)}
+                selected={wo.assignedTo === user.name}
+                onClick={() => {
+                  onAssignAnchorChange(null);
+                  onAssign(user.id, user.name);
+                }}
+              >
+                {user.name}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Box>
+        <WorkOrderDetailField label="Source" value={wo.source || "—"} />
+        <WorkOrderDetailField label="TT" value={wo.tt || "—"} />
+      </Box>
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx
new file mode 100644
index 00000000..101abf72
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx
@@ -0,0 +1,95 @@
+import { Link as RouterLink, useNavigate } from "react-router";
+import { Breadcrumbs, Button, Chip, Link, Menu, MenuItem, Stack, Typography } from "@mui/material";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+
+const STATUS_COLORS: Record<
+  string,
+  "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
+> = {
+  Open: "primary",
+  "In Progress": "info",
+  "On Hold": "warning",
+  Done: "success",
+  Cancelled: "default",
+};
+
+type WorkOrderViewHeaderProps = {
+  wo: WorkOrderDetail;
+  workOrderId: string;
+  statusAnchor: HTMLElement | null;
+  onStatusAnchorChange: (anchor: HTMLElement | null) => void;
+  onStatusChange: (status: string) => void;
+  onOpenDispatch: () => void;
+};
+
+export function WorkOrderViewHeader({
+  wo,
+  workOrderId,
+  statusAnchor,
+  onStatusAnchorChange,
+  onStatusChange,
+  onOpenDispatch,
+}: WorkOrderViewHeaderProps) {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <Breadcrumbs>
+        <Link component={RouterLink} to="/workorders" underline="hover">
+          Work Orders
+        </Link>
+        <Typography sx={{ color: "text.primary" }}>{wo.internalWONumber}</Typography>
+      </Breadcrumbs>
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{ justifyContent: "space-between", alignItems: { xs: "stretch", md: "flex-start" } }}
+      >
+        <Stack spacing={1}>
+          <Typography variant="h5" component="h1">
+            {wo.title}
+          </Typography>
+          <Chip
+            label={wo.status}
+            color={STATUS_COLORS[wo.status] ?? "default"}
+            onClick={(event) => onStatusAnchorChange(event.currentTarget)}
+            className="w-fit cursor-pointer"
+          />
+          <Menu
+            anchorEl={statusAnchor}
+            open={Boolean(statusAnchor)}
+            onClose={() => onStatusAnchorChange(null)}
+          >
+            {WORK_ORDER_STATUS_OPTIONS.map((status) => (
+              <MenuItem
+                key={status}
+                selected={status === wo.status}
+                onClick={() => {
+                  onStatusAnchorChange(null);
+                  if (status !== wo.status) {
+                    onStatusChange(status);
+                  }
+                }}
+              >
+                {status}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: "wrap" }}>
+          <Button variant="contained" color="success" onClick={onOpenDispatch}>
+            Dispatch
+          </Button>
+          <Button variant="contained" onClick={() => navigate(`/workorders/edit/${workOrderId}`)}>
+            Edit
+          </Button>
+          <Button variant="outlined" onClick={() => navigate("/workorders")}>
+            Back to List
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts b/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts
new file mode 100644
index 00000000..96876af9
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts
@@ -0,0 +1,152 @@
+import { useMemo, useState } from "react";
+import type { VendorEditorState } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-types";
+import { isVendorEditorValid } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils";
+import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddWorkOrderComment,
+  useChangeWorkOrderAssignment,
+  useChangeWorkOrderStatus,
+  useUpdateWorkOrderVendor,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import { extractMentionIds } from "@/domain/work-orders/utils/comment-mentions";
+
+export function useWorkOrderViewPage(workOrderId: string) {
+  const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
+  const { data: users = [] } = useWorkOrderUsers();
+  const statusMutation = useChangeWorkOrderStatus(workOrderId);
+  const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
+  const commentMutation = useAddWorkOrderComment(workOrderId);
+  const vendorMutation = useUpdateWorkOrderVendor(workOrderId);
+
+  const [dispatchOpen, setDispatchOpen] = useState(false);
+  const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
+  const [statusAnchor, setStatusAnchor] = useState<HTMLElement | null>(null);
+  const [assignAnchor, setAssignAnchor] = useState<HTMLElement | null>(null);
+  const [vendorEditor, setVendorEditor] = useState<VendorEditorState | null>(null);
+  const [vendorEditorLoading, setVendorEditorLoading] = useState(false);
+  const [vendorEditorError, setVendorEditorError] = useState("");
+
+  const customerComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "customer"),
+    [wo?.comments],
+  );
+  const internalComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "internal"),
+    [wo?.comments],
+  );
+  const auditLog = wo?.auditLog ?? [];
+  const mentionUsers = useMemo(
+    () => users.map((user) => ({ id: user.id, name: user.name })),
+    [users],
+  );
+
+  const submitComment = (text: string) => {
+    const mentions = extractMentionIds(text);
+    commentMutation.mutate({
+      text,
+      mentions: mentions.length > 0 ? mentions : undefined,
+      commentType: "internal",
+    });
+  };
+
+  const openVendorEditor = async (
+    event: React.MouseEvent,
+    vendorId: string | number,
+    vendorName: string,
+  ) => {
+    event.stopPropagation();
+    setVendorEditorError("");
+    setVendorEditorLoading(true);
+    setVendorEditor({
+      vendorId,
+      vendorName,
+      contactName: "",
+      preferredContact: "Phone",
+      phone: "",
+      email: "",
+      notes: "",
+    });
+
+    try {
+      const vendor = await vendorsApi.getById(vendorId);
+      setVendorEditor({
+        vendorId,
+        vendorName: vendor.companyName || vendorName,
+        contactName: vendor.contactName,
+        preferredContact: vendor.preferredContact,
+        phone: vendor.phone,
+        email: vendor.email,
+        notes: vendor.notes,
+      });
+    } catch (vendorError) {
+      setVendorEditorError(
+        vendorError instanceof Error ? vendorError.message : "Unable to load vendor details",
+      );
+    } finally {
+      setVendorEditorLoading(false);
+    }
+  };
+
+  const saveVendorEditor = () => {
+    if (!vendorEditor || !isVendorEditorValid(vendorEditor)) return;
+    const numericWorkOrderId = Number(workOrderId);
+    if (!Number.isInteger(numericWorkOrderId) || numericWorkOrderId <= 0) {
+      setVendorEditorError("A valid work order is required");
+      return;
+    }
+
+    vendorMutation.mutate(
+      {
+        vendorId: vendorEditor.vendorId,
+        payload: {
+          workOrderId: numericWorkOrderId,
+          contactName: vendorEditor.contactName.trim(),
+          preferredContact: vendorEditor.preferredContact,
+          phone: vendorEditor.phone,
+          email: vendorEditor.email.trim(),
+          notes: vendorEditor.notes.trim(),
+        },
+      },
+      {
+        onSuccess: () => {
+          setVendorEditor(null);
+          void refetch();
+        },
+        onError: (vendorError) => setVendorEditorError(vendorError.message),
+      },
+    );
+  };
+
+  return {
+    wo,
+    isLoading,
+    error,
+    refetch,
+    users,
+    customerComments,
+    internalComments,
+    auditLog,
+    mentionUsers,
+    submitComment,
+    dispatchOpen,
+    setDispatchOpen,
+    dispatchDetailId,
+    setDispatchDetailId,
+    statusAnchor,
+    setStatusAnchor,
+    assignAnchor,
+    setAssignAnchor,
+    vendorEditor,
+    setVendorEditor,
+    vendorEditorLoading,
+    vendorEditorError,
+    openVendorEditor,
+    saveVendorEditor,
+    statusMutation,
+    assignmentMutation,
+    commentMutation,
+    vendorMutation,
+  };
+}