manufacturing

client/src/components/AppShell.tsx

@@ -16,6 +16,7 @@ const links = [
   { to: "/purchasing/orders", label: "Purchase Orders", icon: <PurchaseOrderIcon /> },
   { to: "/shipping/shipments", label: "Shipments", icon: <ShipmentIcon /> },
   { to: "/projects", label: "Projects", icon: <ProjectsIcon /> },
+  { to: "/manufacturing/work-orders", label: "Manufacturing", icon: <ManufacturingIcon /> },
   { to: "/planning/gantt", label: "Gantt", icon: <GanttIcon /> },
 ];
 
@@ -170,6 +171,18 @@ function ProjectsIcon() {
   );
 }
 
+function ManufacturingIcon() {
+  return (
+    <NavIcon>
+      <circle cx="8" cy="16" r="2" />
+      <circle cx="16" cy="16" r="2" />
+      <path d="M8 14V8l4-2 4 2v6" />
+      <path d="M12 10h6" />
+      <path d="M18 8v4" />
+    </NavIcon>
+  );
+}
+
 export function AppShell() {
   const { user, logout } = useAuth();
 

client/src/lib/api.ts

@@ -33,6 +33,16 @@ import type {
   WarehouseLocationOptionDto,
   WarehouseSummaryDto,
 } from "@mrp/shared/dist/inventory/types.js";
+import type {
+  ManufacturingItemOptionDto,
+  ManufacturingProjectOptionDto,
+  WorkOrderCompletionInput,
+  WorkOrderDetailDto,
+  WorkOrderInput,
+  WorkOrderMaterialIssueInput,
+  WorkOrderStatus,
+  WorkOrderSummaryDto,
+} from "@mrp/shared";
 import type {
   ProjectCustomerOptionDto,
   ProjectDetailDto,
@@ -444,6 +454,54 @@ export const api = {
       token
     );
   },
+  getManufacturingItemOptions(token: string) {
+    return request<ManufacturingItemOptionDto[]>("/api/v1/manufacturing/items/options", undefined, token);
+  },
+  getManufacturingProjectOptions(token: string) {
+    return request<ManufacturingProjectOptionDto[]>("/api/v1/manufacturing/projects/options", undefined, token);
+  },
+  getWorkOrders(token: string, filters?: { q?: string; status?: WorkOrderStatus; projectId?: string; itemId?: string }) {
+    return request<WorkOrderSummaryDto[]>(
+      `/api/v1/manufacturing/work-orders${buildQueryString({
+        q: filters?.q,
+        status: filters?.status,
+        projectId: filters?.projectId,
+        itemId: filters?.itemId,
+      })}`,
+      undefined,
+      token
+    );
+  },
+  getWorkOrder(token: string, workOrderId: string) {
+    return request<WorkOrderDetailDto>(`/api/v1/manufacturing/work-orders/${workOrderId}`, undefined, token);
+  },
+  createWorkOrder(token: string, payload: WorkOrderInput) {
+    return request<WorkOrderDetailDto>("/api/v1/manufacturing/work-orders", { method: "POST", body: JSON.stringify(payload) }, token);
+  },
+  updateWorkOrder(token: string, workOrderId: string, payload: WorkOrderInput) {
+    return request<WorkOrderDetailDto>(`/api/v1/manufacturing/work-orders/${workOrderId}`, { method: "PUT", body: JSON.stringify(payload) }, token);
+  },
+  updateWorkOrderStatus(token: string, workOrderId: string, status: WorkOrderStatus) {
+    return request<WorkOrderDetailDto>(
+      `/api/v1/manufacturing/work-orders/${workOrderId}/status`,
+      { method: "PATCH", body: JSON.stringify({ status }) },
+      token
+    );
+  },
+  issueWorkOrderMaterial(token: string, workOrderId: string, payload: WorkOrderMaterialIssueInput) {
+    return request<WorkOrderDetailDto>(
+      `/api/v1/manufacturing/work-orders/${workOrderId}/issues`,
+      { method: "POST", body: JSON.stringify(payload) },
+      token
+    );
+  },
+  recordWorkOrderCompletion(token: string, workOrderId: string, payload: WorkOrderCompletionInput) {
+    return request<WorkOrderDetailDto>(
+      `/api/v1/manufacturing/work-orders/${workOrderId}/completions`,
+      { method: "POST", body: JSON.stringify(payload) },
+      token
+    );
+  },
   getGanttDemo(token: string) {
     return request<{ tasks: GanttTaskDto[]; links: GanttLinkDto[] }>("/api/v1/gantt/demo", undefined, token);
   },

client/src/main.tsx

@@ -18,6 +18,9 @@ import { GanttPage } from "./modules/gantt/GanttPage";
 import { InventoryDetailPage } from "./modules/inventory/InventoryDetailPage";
 import { InventoryFormPage } from "./modules/inventory/InventoryFormPage";
 import { InventoryItemsPage } from "./modules/inventory/InventoryItemsPage";
+import { ManufacturingPage } from "./modules/manufacturing/ManufacturingPage";
+import { WorkOrderDetailPage } from "./modules/manufacturing/WorkOrderDetailPage";
+import { WorkOrderFormPage } from "./modules/manufacturing/WorkOrderFormPage";
 import { PurchaseDetailPage } from "./modules/purchasing/PurchaseDetailPage";
 import { PurchaseFormPage } from "./modules/purchasing/PurchaseFormPage";
 import { PurchaseListPage } from "./modules/purchasing/PurchaseListPage";
@@ -76,6 +79,13 @@ const router = createBrowserRouter([
               { path: "/projects/:projectId", element: <ProjectDetailPage /> },
             ],
           },
+          {
+            element: <ProtectedRoute requiredPermissions={[permissions.manufacturingRead]} />,
+            children: [
+              { path: "/manufacturing/work-orders", element: <ManufacturingPage /> },
+              { path: "/manufacturing/work-orders/:workOrderId", element: <WorkOrderDetailPage /> },
+            ],
+          },
           {
             element: <ProtectedRoute requiredPermissions={["purchasing.read"]} />,
             children: [
@@ -115,6 +125,13 @@ const router = createBrowserRouter([
               { path: "/projects/:projectId/edit", element: <ProjectFormPage mode="edit" /> },
             ],
           },
+          {
+            element: <ProtectedRoute requiredPermissions={[permissions.manufacturingWrite]} />,
+            children: [
+              { path: "/manufacturing/work-orders/new", element: <WorkOrderFormPage mode="create" /> },
+              { path: "/manufacturing/work-orders/:workOrderId/edit", element: <WorkOrderFormPage mode="edit" /> },
+            ],
+          },
           {
             element: <ProtectedRoute requiredPermissions={["purchasing.write"]} />,
             children: [

client/src/modules/dashboard/DashboardPage.tsx

@@ -10,6 +10,7 @@ interface DashboardSnapshot {
   vendors: Awaited<ReturnType<typeof api.getVendors>> | null;
   items: Awaited<ReturnType<typeof api.getInventoryItems>> | null;
   warehouses: Awaited<ReturnType<typeof api.getWarehouses>> | null;
+  workOrders: Awaited<ReturnType<typeof api.getWorkOrders>> | null;
   quotes: Awaited<ReturnType<typeof api.getQuotes>> | null;
   orders: Awaited<ReturnType<typeof api.getSalesOrders>> | null;
   shipments: Awaited<ReturnType<typeof api.getShipments>> | null;
@@ -51,6 +52,7 @@ export function DashboardPage() {
   const [snapshot, setSnapshot] = useState<DashboardSnapshot | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const canWriteManufacturing = hasPermission(user?.permissions, permissions.manufacturingWrite);
   const canWriteProjects = hasPermission(user?.permissions, permissions.projectsWrite);
 
   useEffect(() => {
@@ -67,6 +69,7 @@ export function DashboardPage() {
 
     const canReadCrm = hasPermission(user.permissions, permissions.crmRead);
     const canReadInventory = hasPermission(user.permissions, permissions.inventoryRead);
+    const canReadManufacturing = hasPermission(user.permissions, permissions.manufacturingRead);
     const canReadSales = hasPermission(user.permissions, permissions.salesRead);
     const canReadShipping = hasPermission(user.permissions, permissions.shippingRead);
     const canReadProjects = hasPermission(user.permissions, permissions.projectsRead);
@@ -77,6 +80,7 @@ export function DashboardPage() {
         canReadCrm ? api.getVendors(authToken) : Promise.resolve(null),
         canReadInventory ? api.getInventoryItems(authToken) : Promise.resolve(null),
         canReadInventory ? api.getWarehouses(authToken) : Promise.resolve(null),
+        canReadManufacturing ? api.getWorkOrders(authToken) : Promise.resolve(null),
         canReadSales ? api.getQuotes(authToken) : Promise.resolve(null),
         canReadSales ? api.getSalesOrders(authToken) : Promise.resolve(null),
         canReadShipping ? api.getShipments(authToken) : Promise.resolve(null),
@@ -98,10 +102,11 @@ export function DashboardPage() {
         vendors: results[1].status === "fulfilled" ? results[1].value : null,
         items: results[2].status === "fulfilled" ? results[2].value : null,
         warehouses: results[3].status === "fulfilled" ? results[3].value : null,
-        quotes: results[4].status === "fulfilled" ? results[4].value : null,
-        orders: results[5].status === "fulfilled" ? results[5].value : null,
-        shipments: results[6].status === "fulfilled" ? results[6].value : null,
-        projects: results[7].status === "fulfilled" ? results[7].value : null,
+        workOrders: results[4].status === "fulfilled" ? results[4].value : null,
+        quotes: results[5].status === "fulfilled" ? results[5].value : null,
+        orders: results[6].status === "fulfilled" ? results[6].value : null,
+        shipments: results[7].status === "fulfilled" ? results[7].value : null,
+        projects: results[8].status === "fulfilled" ? results[8].value : null,
         refreshedAt: new Date().toISOString(),
       });
       setIsLoading(false);
@@ -126,6 +131,7 @@ export function DashboardPage() {
   const vendors = snapshot?.vendors ?? [];
   const items = snapshot?.items ?? [];
   const warehouses = snapshot?.warehouses ?? [];
+  const workOrders = snapshot?.workOrders ?? [];
   const quotes = snapshot?.quotes ?? [];
   const orders = snapshot?.orders ?? [];
   const shipments = snapshot?.shipments ?? [];
@@ -134,6 +140,7 @@ export function DashboardPage() {
   const accessibleModules = [
     snapshot?.customers !== null || snapshot?.vendors !== null,
     snapshot?.items !== null || snapshot?.warehouses !== null,
+    snapshot?.workOrders !== null,
     snapshot?.quotes !== null || snapshot?.orders !== null,
     snapshot?.shipments !== null,
     snapshot?.projects !== null,
@@ -152,6 +159,11 @@ export function DashboardPage() {
   const warehouseCount = warehouses.length;
   const locationCount = sumNumber(warehouses.map((warehouse) => warehouse.locationCount));
 
+  const workOrderCount = workOrders.length;
+  const activeWorkOrderCount = workOrders.filter((workOrder) => workOrder.status === "RELEASED" || workOrder.status === "IN_PROGRESS" || workOrder.status === "ON_HOLD").length;
+  const releasedWorkOrderCount = workOrders.filter((workOrder) => workOrder.status === "RELEASED").length;
+  const overdueWorkOrderCount = workOrders.filter((workOrder) => workOrder.dueDate && workOrder.status !== "COMPLETE" && workOrder.status !== "CANCELLED" && new Date(workOrder.dueDate).getTime() < Date.now()).length;
+
   const quoteCount = quotes.length;
   const orderCount = orders.length;
   const draftQuoteCount = quotes.filter((quote) => quote.status === "DRAFT").length;
@@ -180,6 +192,7 @@ export function DashboardPage() {
     ...vendors.map((vendor) => vendor.updatedAt),
     ...items.map((item) => item.updatedAt),
     ...warehouses.map((warehouse) => warehouse.updatedAt),
+    ...workOrders.map((workOrder) => workOrder.updatedAt),
     ...quotes.map((quote) => quote.updatedAt),
     ...orders.map((order) => order.updatedAt),
     ...shipments.map((shipment) => shipment.updatedAt),
@@ -207,6 +220,15 @@ export function DashboardPage() {
           : "Inventory metrics are permission-gated.",
       tone: "border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300",
     },
+    {
+      label: "Manufacturing Load",
+      value: snapshot?.workOrders !== null ? `${activeWorkOrderCount}` : "No access",
+      detail:
+        snapshot?.workOrders !== null
+          ? `${releasedWorkOrderCount} released and ${overdueWorkOrderCount} overdue`
+          : "Manufacturing metrics are permission-gated.",
+      tone: "border-indigo-400/30 bg-indigo-500/12 text-indigo-700 dark:text-indigo-300",
+    },
     {
       label: "Commercial Value",
       value: snapshot?.quotes !== null || snapshot?.orders !== null ? formatCurrency(quoteValue + orderValue) : "No access",
@@ -271,6 +293,23 @@ export function DashboardPage() {
         { label: "Open warehouses", to: "/inventory/warehouses" },
       ],
     },
+    {
+      title: "Manufacturing",
+      eyebrow: "Execution Load",
+      summary:
+        snapshot?.workOrders !== null
+          ? "Work orders, released load, and overdue build pressure are now visible from the dashboard."
+          : "Manufacturing read permission is required to surface work-order metrics here.",
+      metrics: [
+        { label: "Open work", value: snapshot?.workOrders !== null ? `${activeWorkOrderCount}` : "No access" },
+        { label: "Released", value: snapshot?.workOrders !== null ? `${releasedWorkOrderCount}` : "No access" },
+        { label: "Overdue", value: snapshot?.workOrders !== null ? `${overdueWorkOrderCount}` : "No access" },
+      ],
+      links: [
+        { label: "Open work orders", to: "/manufacturing/work-orders" },
+        ...(canWriteManufacturing ? [{ label: "New work order", to: "/manufacturing/work-orders/new" }] : []),
+      ],
+    },
     {
       title: "Sales",
       eyebrow: "Revenue Flow",
@@ -327,7 +366,6 @@ export function DashboardPage() {
   const futureModules = [
     "Vendor invoice attachments and supplier exception queues",
     "Stock transfers, allocations, and cycle counts",
-    "Manufacturing work orders, routings, and bottleneck metrics",
     "Planning timeline, milestones, and dependency views",
     "Audit trails, diagnostics, and system health checks",
   ];
@@ -350,8 +388,8 @@ export function DashboardPage() {
                 </div>
               </div>
               <p className="mt-3 max-w-3xl text-sm leading-6 text-muted">
-                This landing page now reads directly from live CRM, inventory, sales, shipping, and project data. It is intentionally modular so future
-                purchasing, manufacturing, and audit slices can slot into the same command surface without a redesign.
+                This landing page now reads directly from live CRM, inventory, manufacturing, sales, shipping, and project data. It is intentionally
+                modular so future purchasing, planning, and audit slices can slot into the same command surface without a redesign.
               </p>
               <div className="mt-5 grid gap-2 sm:grid-cols-3">
                 <div className="rounded-2xl border border-line/70 bg-surface/80 px-2 py-2">
@@ -380,6 +418,9 @@ export function DashboardPage() {
                 <Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/projects">
                   Open projects
                 </Link>
+                <Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/manufacturing/work-orders">
+                  Open manufacturing
+                </Link>
               </div>
               {error ? <div className="mt-4 rounded-2xl border border-amber-400/30 bg-amber-500/12 px-2 py-2 text-sm text-amber-700 dark:text-amber-300">{error}</div> : null}
             </div>
@@ -396,7 +437,7 @@ export function DashboardPage() {
           </div>
         </div>
       </section>
-      <section className="grid gap-3 xl:grid-cols-5">
+      <section className="grid gap-3 xl:grid-cols-6">
         {metricCards.map((card) => (
           <article key={card.label} className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
             <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">{card.label}</p>
@@ -408,7 +449,7 @@ export function DashboardPage() {
           </article>
         ))}
       </section>
-      <section className="grid gap-3 xl:grid-cols-2 2xl:grid-cols-5">
+      <section className="grid gap-3 xl:grid-cols-2 2xl:grid-cols-6">
         {modulePanels.map((panel) => (
           <article key={panel.title} className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">{panel.eyebrow}</p>
@@ -432,7 +473,7 @@ export function DashboardPage() {
           </article>
         ))}
       </section>
-      <section className="grid gap-3 xl:grid-cols-4">
+      <section className="grid gap-3 xl:grid-cols-5">
         <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory Watch</p>
           <h4 className="mt-2 text-lg font-bold text-text">Master data pressure points</h4>
@@ -469,6 +510,24 @@ export function DashboardPage() {
             </div>
           </div>
         </article>
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing Watch</p>
+          <h4 className="mt-2 text-lg font-bold text-text">Build execution and due-date pressure</h4>
+          <div className="mt-4 grid gap-2">
+            <div className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
+              <span className="text-muted">Total work orders</span>
+              <span className="font-semibold text-text">{snapshot?.workOrders !== null ? `${workOrderCount}` : "No access"}</span>
+            </div>
+            <div className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
+              <span className="text-muted">Active queue</span>
+              <span className="font-semibold text-text">{snapshot?.workOrders !== null ? `${activeWorkOrderCount}` : "No access"}</span>
+            </div>
+            <div className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
+              <span className="text-muted">Overdue</span>
+              <span className="font-semibold text-text">{snapshot?.workOrders !== null ? `${overdueWorkOrderCount}` : "No access"}</span>
+            </div>
+          </div>
+        </article>
         <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Project Watch</p>
           <h4 className="mt-2 text-lg font-bold text-text">Program status and delivery pressure</h4>

client/src/modules/manufacturing/ManufacturingPage.tsx

@@ -0,0 +1,5 @@
+import { WorkOrderListPage } from "./WorkOrderListPage";
+
+export function ManufacturingPage() {
+  return <WorkOrderListPage />;
+}

client/src/modules/manufacturing/WorkOrderDetailPage.tsx

@@ -0,0 +1,338 @@
+import { permissions } from "@mrp/shared";
+import type { WorkOrderCompletionInput, WorkOrderDetailDto, WorkOrderMaterialIssueInput, WorkOrderStatus } from "@mrp/shared";
+import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+
+import { FileAttachmentsPanel } from "../../components/FileAttachmentsPanel";
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { emptyCompletionInput, emptyMaterialIssueInput, workOrderStatusOptions } from "./config";
+import { WorkOrderStatusBadge } from "./WorkOrderStatusBadge";
+
+export function WorkOrderDetailPage() {
+  const { token, user } = useAuth();
+  const { workOrderId } = useParams();
+  const [workOrder, setWorkOrder] = useState<WorkOrderDetailDto | null>(null);
+  const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
+  const [issueForm, setIssueForm] = useState<WorkOrderMaterialIssueInput>(emptyMaterialIssueInput);
+  const [completionForm, setCompletionForm] = useState<WorkOrderCompletionInput>(emptyCompletionInput);
+  const [status, setStatus] = useState("Loading work order...");
+  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
+  const [isPostingIssue, setIsPostingIssue] = useState(false);
+  const [isPostingCompletion, setIsPostingCompletion] = useState(false);
+
+  const canManage = user?.permissions.includes(permissions.manufacturingWrite) ?? false;
+
+  useEffect(() => {
+    if (!token || !workOrderId) {
+      return;
+    }
+
+    api.getWorkOrder(token, workOrderId)
+      .then((nextWorkOrder) => {
+        setWorkOrder(nextWorkOrder);
+        setIssueForm({
+          ...emptyMaterialIssueInput,
+          warehouseId: nextWorkOrder.warehouseId,
+          locationId: nextWorkOrder.locationId,
+        });
+        setCompletionForm({
+          ...emptyCompletionInput,
+          quantity: Math.max(nextWorkOrder.dueQuantity, 1),
+        });
+        setStatus("Work order loaded.");
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load work order.";
+        setStatus(message);
+      });
+
+    api.getWarehouseLocationOptions(token).then(setLocationOptions).catch(() => setLocationOptions([]));
+  }, [token, workOrderId]);
+
+  const filteredLocationOptions = useMemo(
+    () => locationOptions.filter((option) => option.warehouseId === issueForm.warehouseId),
+    [issueForm.warehouseId, locationOptions]
+  );
+
+  async function handleStatusChange(nextStatus: WorkOrderStatus) {
+    if (!token || !workOrder) {
+      return;
+    }
+
+    setIsUpdatingStatus(true);
+    setStatus("Updating work-order status...");
+    try {
+      const nextWorkOrder = await api.updateWorkOrderStatus(token, workOrder.id, nextStatus);
+      setWorkOrder(nextWorkOrder);
+      setStatus("Work-order status updated.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to update work-order status.";
+      setStatus(message);
+    } finally {
+      setIsUpdatingStatus(false);
+    }
+  }
+
+  async function handleIssueSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token || !workOrder) {
+      return;
+    }
+
+    setIsPostingIssue(true);
+    setStatus("Posting material issue...");
+    try {
+      const nextWorkOrder = await api.issueWorkOrderMaterial(token, workOrder.id, issueForm);
+      setWorkOrder(nextWorkOrder);
+      setIssueForm({
+        ...emptyMaterialIssueInput,
+        warehouseId: nextWorkOrder.warehouseId,
+        locationId: nextWorkOrder.locationId,
+      });
+      setStatus("Material issue posted.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to post material issue.";
+      setStatus(message);
+    } finally {
+      setIsPostingIssue(false);
+    }
+  }
+
+  async function handleCompletionSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token || !workOrder) {
+      return;
+    }
+
+    setIsPostingCompletion(true);
+    setStatus("Posting completion...");
+    try {
+      const nextWorkOrder = await api.recordWorkOrderCompletion(token, workOrder.id, completionForm);
+      setWorkOrder(nextWorkOrder);
+      setCompletionForm({
+        ...emptyCompletionInput,
+        quantity: Math.max(nextWorkOrder.dueQuantity, 1),
+      });
+      setStatus("Completion posted.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to post completion.";
+      setStatus(message);
+    } finally {
+      setIsPostingCompletion(false);
+    }
+  }
+
+  if (!workOrder) {
+    return <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 text-sm text-muted shadow-panel">{status}</div>;
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Work Order</p>
+            <h3 className="mt-2 text-xl font-bold text-text">{workOrder.workOrderNumber}</h3>
+            <p className="mt-1 text-sm text-text">{workOrder.itemSku} - {workOrder.itemName}</p>
+            <div className="mt-3"><WorkOrderStatusBadge status={workOrder.status} /></div>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <Link to="/manufacturing/work-orders" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Back to work orders</Link>
+            {workOrder.projectId ? <Link to={`/projects/${workOrder.projectId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Open project</Link> : null}
+            <Link to={`/inventory/items/${workOrder.itemId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Open item</Link>
+            {canManage ? <Link to={`/manufacturing/work-orders/${workOrder.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">Edit work order</Link> : null}
+          </div>
+        </div>
+      </div>
+      {canManage ? (
+        <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Quick Actions</p>
+              <p className="mt-2 text-sm text-muted">Release, hold, or close administrative status from the work-order record.</p>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {workOrderStatusOptions.map((option) => (
+                <button key={option.value} type="button" onClick={() => handleStatusChange(option.value)} disabled={isUpdatingStatus || workOrder.status === option.value} className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+      ) : null}
+      <section className="grid gap-3 xl:grid-cols-5">
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Planned</p><div className="mt-2 text-base font-bold text-text">{workOrder.quantity}</div></article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Completed</p><div className="mt-2 text-base font-bold text-text">{workOrder.completedQuantity}</div></article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Remaining</p><div className="mt-2 text-base font-bold text-text">{workOrder.dueQuantity}</div></article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Project</p><div className="mt-2 text-base font-bold text-text">{workOrder.projectNumber || "Unlinked"}</div></article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Due Date</p><div className="mt-2 text-base font-bold text-text">{workOrder.dueDate ? new Date(workOrder.dueDate).toLocaleDateString() : "Not set"}</div></article>
+      </section>
+      <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(360px,0.9fr)]">
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Execution Context</p>
+          <dl className="mt-5 grid gap-3">
+            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Build item</dt><dd className="mt-1 text-sm text-text">{workOrder.itemSku} - {workOrder.itemName}</dd></div>
+            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Item type</dt><dd className="mt-1 text-sm text-text">{workOrder.itemType}</dd></div>
+            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Output location</dt><dd className="mt-1 text-sm text-text">{workOrder.warehouseCode} / {workOrder.locationCode}</dd></div>
+            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Project customer</dt><dd className="mt-1 text-sm text-text">{workOrder.projectCustomerName || "Not linked"}</dd></div>
+          </dl>
+        </article>
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Work Instructions</p>
+          <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{workOrder.notes || "No work-order notes recorded."}</p>
+        </article>
+      </div>
+      {canManage ? (
+        <section className="grid gap-3 xl:grid-cols-2">
+          <form onSubmit={handleIssueSubmit} className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Material Issue</p>
+            <div className="mt-4 grid gap-3">
+              <label className="block">
+                <span className="mb-2 block text-sm font-semibold text-text">Component</span>
+                <select value={issueForm.componentItemId} onChange={(event) => setIssueForm((current) => ({ ...current, componentItemId: event.target.value }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+                  <option value="">Select component</option>
+                  {workOrder.materialRequirements.map((requirement) => (
+                    <option key={requirement.componentItemId} value={requirement.componentItemId}>{requirement.componentSku} - {requirement.componentName}</option>
+                  ))}
+                </select>
+              </label>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <label className="block">
+                  <span className="mb-2 block text-sm font-semibold text-text">Warehouse</span>
+                  <select value={issueForm.warehouseId} onChange={(event) => setIssueForm((current) => ({ ...current, warehouseId: event.target.value, locationId: "" }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+                    {[...new Map(locationOptions.map((option) => [option.warehouseId, option])).values()].map((option) => (
+                      <option key={option.warehouseId} value={option.warehouseId}>{option.warehouseCode} - {option.warehouseName}</option>
+                    ))}
+                  </select>
+                </label>
+                <label className="block">
+                  <span className="mb-2 block text-sm font-semibold text-text">Location</span>
+                  <select value={issueForm.locationId} onChange={(event) => setIssueForm((current) => ({ ...current, locationId: event.target.value }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+                    <option value="">Select location</option>
+                    {filteredLocationOptions.map((option) => (
+                      <option key={option.locationId} value={option.locationId}>{option.locationCode} - {option.locationName}</option>
+                    ))}
+                  </select>
+                </label>
+                <label className="block">
+                  <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
+                  <input type="number" min={1} step={1} value={issueForm.quantity} onChange={(event) => setIssueForm((current) => ({ ...current, quantity: Number.parseInt(event.target.value, 10) || 1 }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+                </label>
+              </div>
+              <label className="block">
+                <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
+                <textarea value={issueForm.notes} onChange={(event) => setIssueForm((current) => ({ ...current, notes: event.target.value }))} rows={3} className="w-full rounded-3xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+              </label>
+              <button type="submit" disabled={isPostingIssue} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
+                {isPostingIssue ? "Posting issue..." : "Post material issue"}
+              </button>
+            </div>
+          </form>
+          <form onSubmit={handleCompletionSubmit} className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Production Completion</p>
+            <div className="mt-4 grid gap-3">
+              <label className="block">
+                <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
+                <input type="number" min={1} step={1} value={completionForm.quantity} onChange={(event) => setCompletionForm((current) => ({ ...current, quantity: Number.parseInt(event.target.value, 10) || 1 }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+              </label>
+              <label className="block">
+                <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
+                <textarea value={completionForm.notes} onChange={(event) => setCompletionForm((current) => ({ ...current, notes: event.target.value }))} rows={3} className="w-full rounded-3xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+              </label>
+              <div className="rounded-2xl border border-line/70 bg-page/70 px-2 py-2 text-sm text-muted">Finished goods receipt posts back to {workOrder.warehouseCode} / {workOrder.locationCode}.</div>
+              <button type="submit" disabled={isPostingCompletion} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
+                {isPostingCompletion ? "Posting completion..." : "Post completion"}
+              </button>
+            </div>
+          </form>
+        </section>
+      ) : null}
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Material Requirements</p>
+        {workOrder.materialRequirements.length === 0 ? (
+          <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">This build item does not currently have BOM material requirements.</div>
+        ) : (
+          <div className="mt-5 overflow-hidden rounded-3xl border border-line/70">
+            <table className="min-w-full divide-y divide-line/70 text-sm">
+              <thead className="bg-page/70">
+                <tr className="text-left text-xs font-semibold uppercase tracking-[0.18em] text-muted">
+                  <th className="px-3 py-3">Component</th>
+                  <th className="px-3 py-3">Per</th>
+                  <th className="px-3 py-3">Required</th>
+                  <th className="px-3 py-3">Issued</th>
+                  <th className="px-3 py-3">Remaining</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-line/70">
+                {workOrder.materialRequirements.map((requirement) => (
+                  <tr key={requirement.componentItemId} className="bg-surface/70">
+                    <td className="px-3 py-3"><div className="font-semibold text-text">{requirement.componentSku}</div><div className="mt-1 text-xs text-muted">{requirement.componentName}</div></td>
+                    <td className="px-3 py-3 text-text">{requirement.quantityPer} {requirement.unitOfMeasure}</td>
+                    <td className="px-3 py-3 text-text">{requirement.requiredQuantity}</td>
+                    <td className="px-3 py-3 text-text">{requirement.issuedQuantity}</td>
+                    <td className="px-3 py-3 text-text">{requirement.remainingQuantity}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+      <section className="grid gap-3 xl:grid-cols-2">
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Issue History</p>
+          {workOrder.materialIssues.length === 0 ? (
+            <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No material issues have been posted yet.</div>
+          ) : (
+            <div className="mt-5 space-y-3">
+              {workOrder.materialIssues.map((issue) => (
+                <div key={issue.id} className="rounded-3xl border border-line/70 bg-page/60 px-3 py-3">
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <div>
+                      <div className="font-semibold text-text">{issue.componentSku} - {issue.componentName}</div>
+                      <div className="mt-1 text-xs text-muted">{issue.warehouseCode} / {issue.locationCode} · {issue.createdByName}</div>
+                    </div>
+                    <div className="text-sm font-semibold text-text">{issue.quantity}</div>
+                  </div>
+                  <div className="mt-2 text-xs text-muted">{new Date(issue.createdAt).toLocaleString()}</div>
+                  <div className="mt-2 text-sm text-text">{issue.notes || "No notes recorded."}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </article>
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Completion History</p>
+          {workOrder.completions.length === 0 ? (
+            <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No production completions have been posted yet.</div>
+          ) : (
+            <div className="mt-5 space-y-3">
+              {workOrder.completions.map((completion) => (
+                <div key={completion.id} className="rounded-3xl border border-line/70 bg-page/60 px-3 py-3">
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <div className="font-semibold text-text">{completion.quantity} completed</div>
+                    <div className="text-xs text-muted">{completion.createdByName}</div>
+                  </div>
+                  <div className="mt-2 text-xs text-muted">{new Date(completion.createdAt).toLocaleString()}</div>
+                  <div className="mt-2 text-sm text-text">{completion.notes || "No notes recorded."}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </article>
+      </section>
+      <FileAttachmentsPanel
+        ownerType="WORK_ORDER"
+        ownerId={workOrder.id}
+        eyebrow="Manufacturing Documents"
+        title="Work-order files"
+        description="Store travelers, build instructions, inspection records, and support documents directly on the work order."
+        emptyMessage="No manufacturing attachments have been uploaded for this work order yet."
+      />
+      <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm text-muted">{status}</div>
+    </section>
+  );
+}

client/src/modules/manufacturing/WorkOrderFormPage.tsx

@@ -0,0 +1,268 @@
+import type {
+  ManufacturingItemOptionDto,
+  ManufacturingProjectOptionDto,
+  WorkOrderInput,
+} from "@mrp/shared";
+import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { emptyWorkOrderInput, workOrderStatusOptions } from "./config";
+
+export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
+  const { token } = useAuth();
+  const navigate = useNavigate();
+  const { workOrderId } = useParams();
+  const [form, setForm] = useState<WorkOrderInput>(emptyWorkOrderInput);
+  const [itemOptions, setItemOptions] = useState<ManufacturingItemOptionDto[]>([]);
+  const [projectOptions, setProjectOptions] = useState<ManufacturingProjectOptionDto[]>([]);
+  const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
+  const [itemSearchTerm, setItemSearchTerm] = useState("");
+  const [projectSearchTerm, setProjectSearchTerm] = useState("");
+  const [itemPickerOpen, setItemPickerOpen] = useState(false);
+  const [projectPickerOpen, setProjectPickerOpen] = useState(false);
+  const [status, setStatus] = useState(mode === "create" ? "Create a new work order." : "Loading work order...");
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    api.getManufacturingItemOptions(token).then(setItemOptions).catch(() => setItemOptions([]));
+    api.getManufacturingProjectOptions(token).then(setProjectOptions).catch(() => setProjectOptions([]));
+    api.getWarehouseLocationOptions(token).then(setLocationOptions).catch(() => setLocationOptions([]));
+  }, [token]);
+
+  useEffect(() => {
+    if (!token || mode !== "edit" || !workOrderId) {
+      return;
+    }
+
+    api.getWorkOrder(token, workOrderId)
+      .then((workOrder) => {
+        setForm({
+          itemId: workOrder.itemId,
+          projectId: workOrder.projectId,
+          status: workOrder.status,
+          quantity: workOrder.quantity,
+          warehouseId: workOrder.warehouseId,
+          locationId: workOrder.locationId,
+          dueDate: workOrder.dueDate,
+          notes: workOrder.notes,
+        });
+        setItemSearchTerm(`${workOrder.itemSku} - ${workOrder.itemName}`);
+        setProjectSearchTerm(workOrder.projectNumber ? `${workOrder.projectNumber} - ${workOrder.projectName}` : "");
+        setStatus("Work order loaded.");
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load work order.";
+        setStatus(message);
+      });
+  }, [mode, token, workOrderId]);
+
+  const warehouseOptions = useMemo(
+    () => [...new Map(locationOptions.map((option) => [option.warehouseId, option])).values()],
+    [locationOptions]
+  );
+
+  const filteredLocationOptions = useMemo(
+    () => locationOptions.filter((option) => option.warehouseId === form.warehouseId),
+    [form.warehouseId, locationOptions]
+  );
+
+  function updateField<Key extends keyof WorkOrderInput>(key: Key, value: WorkOrderInput[Key]) {
+    setForm((current) => ({
+      ...current,
+      [key]: value,
+      ...(key === "warehouseId" ? { locationId: "" } : {}),
+    }));
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token) {
+      return;
+    }
+
+    setIsSaving(true);
+    setStatus("Saving work order...");
+    try {
+      const saved = mode === "create" ? await api.createWorkOrder(token, form) : await api.updateWorkOrder(token, workOrderId ?? "", form);
+      navigate(`/manufacturing/work-orders/${saved.id}`);
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to save work order.";
+      setStatus(message);
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <form className="space-y-6" onSubmit={handleSubmit}>
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing Editor</p>
+            <h3 className="mt-2 text-xl font-bold text-text">{mode === "create" ? "New Work Order" : "Edit Work Order"}</h3>
+            <p className="mt-2 max-w-2xl text-sm text-muted">Create a build record for a manufactured item, assign it to a project when needed, and define where completed output should post.</p>
+          </div>
+          <Link to={mode === "create" ? "/manufacturing/work-orders" : `/manufacturing/work-orders/${workOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
+            Cancel
+          </Link>
+        </div>
+      </section>
+      <section className="space-y-4 rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="grid gap-3 xl:grid-cols-2">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Build Item</span>
+            <div className="relative">
+              <input
+                value={itemSearchTerm}
+                onChange={(event) => {
+                  setItemSearchTerm(event.target.value);
+                  updateField("itemId", "");
+                  setItemPickerOpen(true);
+                }}
+                onFocus={() => setItemPickerOpen(true)}
+                onBlur={() => {
+                  window.setTimeout(() => {
+                    setItemPickerOpen(false);
+                    const selected = itemOptions.find((option) => option.id === form.itemId);
+                    if (selected) {
+                      setItemSearchTerm(`${selected.sku} - ${selected.name}`);
+                    }
+                  }, 120);
+                }}
+                placeholder="Search manufactured item"
+                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+              />
+              {itemPickerOpen ? (
+                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
+                  {itemOptions
+                    .filter((option) => {
+                      const query = itemSearchTerm.trim().toLowerCase();
+                      if (!query) {
+                        return true;
+                      }
+                      return option.sku.toLowerCase().includes(query) || option.name.toLowerCase().includes(query);
+                    })
+                    .slice(0, 12)
+                    .map((option) => (
+                      <button key={option.id} type="button" onMouseDown={(event) => {
+                        event.preventDefault();
+                        updateField("itemId", option.id);
+                        setItemSearchTerm(`${option.sku} - ${option.name}`);
+                        setItemPickerOpen(false);
+                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
+                        <div className="font-semibold text-text">{option.sku}</div>
+                        <div className="mt-1 text-xs text-muted">{option.name} · {option.type}</div>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Project</span>
+            <div className="relative">
+              <input
+                value={projectSearchTerm}
+                onChange={(event) => {
+                  setProjectSearchTerm(event.target.value);
+                  updateField("projectId", null);
+                  setProjectPickerOpen(true);
+                }}
+                onFocus={() => setProjectPickerOpen(true)}
+                onBlur={() => {
+                  window.setTimeout(() => {
+                    setProjectPickerOpen(false);
+                    const selected = projectOptions.find((option) => option.id === form.projectId);
+                    if (selected) {
+                      setProjectSearchTerm(`${selected.projectNumber} - ${selected.name}`);
+                    }
+                  }, 120);
+                }}
+                placeholder="Search linked project (optional)"
+                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+              />
+              {projectPickerOpen ? (
+                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
+                  <button type="button" onMouseDown={(event) => {
+                    event.preventDefault();
+                    updateField("projectId", null);
+                    setProjectSearchTerm("");
+                    setProjectPickerOpen(false);
+                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
+                    <div className="font-semibold text-text">No linked project</div>
+                  </button>
+                  {projectOptions
+                    .filter((option) => {
+                      const query = projectSearchTerm.trim().toLowerCase();
+                      if (!query) {
+                        return true;
+                      }
+                      return option.projectNumber.toLowerCase().includes(query) || option.name.toLowerCase().includes(query) || option.customerName.toLowerCase().includes(query);
+                    })
+                    .slice(0, 12)
+                    .map((option) => (
+                      <button key={option.id} type="button" onMouseDown={(event) => {
+                        event.preventDefault();
+                        updateField("projectId", option.id);
+                        setProjectSearchTerm(`${option.projectNumber} - ${option.name}`);
+                        setProjectPickerOpen(false);
+                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
+                        <div className="font-semibold text-text">{option.projectNumber}</div>
+                        <div className="mt-1 text-xs text-muted">{option.name} · {option.customerName}</div>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
+          </label>
+        </div>
+        <div className="grid gap-3 xl:grid-cols-4">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Status</span>
+            <select value={form.status} onChange={(event) => updateField("status", event.target.value as WorkOrderInput["status"])} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              {workOrderStatusOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
+            <input type="number" min={1} step={1} value={form.quantity} onChange={(event) => updateField("quantity", Number.parseInt(event.target.value, 10) || 1)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Warehouse</span>
+            <select value={form.warehouseId} onChange={(event) => updateField("warehouseId", event.target.value)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              <option value="">Select warehouse</option>
+              {warehouseOptions.map((option) => <option key={option.warehouseId} value={option.warehouseId}>{option.warehouseCode} - {option.warehouseName}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Location</span>
+            <select value={form.locationId} onChange={(event) => updateField("locationId", event.target.value)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              <option value="">Select location</option>
+              {filteredLocationOptions.map((option) => <option key={option.locationId} value={option.locationId}>{option.locationCode} - {option.locationName}</option>)}
+            </select>
+          </label>
+        </div>
+        <label className="block max-w-sm">
+          <span className="mb-2 block text-sm font-semibold text-text">Due date</span>
+          <input type="date" value={form.dueDate ? form.dueDate.slice(0, 10) : ""} onChange={(event) => updateField("dueDate", event.target.value ? new Date(event.target.value).toISOString() : null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+        </label>
+        <label className="block">
+          <span className="mb-2 block text-sm font-semibold text-text">Work instructions / notes</span>
+          <textarea value={form.notes} onChange={(event) => updateField("notes", event.target.value)} rows={5} className="w-full rounded-3xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+        </label>
+        <div className="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
+          <span className="min-w-0 text-sm text-muted">{status}</span>
+          <button type="submit" disabled={isSaving} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
+            {isSaving ? "Saving..." : mode === "create" ? "Create work order" : "Save changes"}
+          </button>
+        </div>
+      </section>
+    </form>
+  );
+}

client/src/modules/manufacturing/WorkOrderListPage.tsx

@@ -0,0 +1,107 @@
+import { permissions } from "@mrp/shared";
+import type { WorkOrderStatus, WorkOrderSummaryDto } from "@mrp/shared";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { workOrderStatusFilters } from "./config";
+import { WorkOrderStatusBadge } from "./WorkOrderStatusBadge";
+
+export function WorkOrderListPage() {
+  const { token, user } = useAuth();
+  const [workOrders, setWorkOrders] = useState<WorkOrderSummaryDto[]>([]);
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<"ALL" | WorkOrderStatus>("ALL");
+  const [status, setStatus] = useState("Loading work orders...");
+
+  const canManage = user?.permissions.includes(permissions.manufacturingWrite) ?? false;
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    setStatus("Loading work orders...");
+    api.getWorkOrders(token, { q: query || undefined, status: statusFilter === "ALL" ? undefined : statusFilter })
+      .then((nextWorkOrders) => {
+        setWorkOrders(nextWorkOrders);
+        setStatus(nextWorkOrders.length === 0 ? "No work orders matched the current filters." : `${nextWorkOrders.length} work order(s) loaded.`);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load work orders.";
+        setStatus(message);
+      });
+  }, [query, statusFilter, token]);
+
+  return (
+    <section className="space-y-4">
+      <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing</p>
+            <h3 className="mt-2 text-xl font-bold text-text">Work Orders</h3>
+            <p className="mt-2 max-w-3xl text-sm text-muted">Release and execute build work against manufactured or assembly inventory items, with project linkage and real inventory posting.</p>
+          </div>
+          {canManage ? (
+            <Link to="/manufacturing/work-orders/new" className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
+              New work order
+            </Link>
+          ) : null}
+        </div>
+      </div>
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_240px]">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Search</span>
+            <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search work order, item, or project" className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Status</span>
+            <select value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as "ALL" | WorkOrderStatus)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              {workOrderStatusFilters.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+        </div>
+        <div className="mt-4 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 text-sm text-muted">{status}</div>
+      </section>
+      {workOrders.length === 0 ? (
+        <div className="rounded-[28px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No work orders are available yet.</div>
+      ) : (
+        <div className="overflow-hidden rounded-[28px] border border-line/70 bg-surface/90 shadow-panel">
+          <table className="min-w-full divide-y divide-line/70 text-sm">
+            <thead className="bg-page/70">
+              <tr className="text-left text-xs font-semibold uppercase tracking-[0.18em] text-muted">
+                <th className="px-3 py-3">Work Order</th>
+                <th className="px-3 py-3">Item</th>
+                <th className="px-3 py-3">Project</th>
+                <th className="px-3 py-3">Status</th>
+                <th className="px-3 py-3">Qty</th>
+                <th className="px-3 py-3">Location</th>
+                <th className="px-3 py-3">Due</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-line/70">
+              {workOrders.map((workOrder) => (
+                <tr key={workOrder.id} className="bg-surface/70 transition hover:bg-page/60">
+                  <td className="px-3 py-3 align-top">
+                    <Link to={`/manufacturing/work-orders/${workOrder.id}`} className="font-semibold text-text hover:text-brand">{workOrder.workOrderNumber}</Link>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    <div className="font-semibold text-text">{workOrder.itemSku}</div>
+                    <div className="mt-1 text-xs text-muted">{workOrder.itemName}</div>
+                  </td>
+                  <td className="px-3 py-3 align-top text-text">{workOrder.projectNumber ? `${workOrder.projectNumber} - ${workOrder.projectName}` : "Unlinked"}</td>
+                  <td className="px-3 py-3 align-top"><WorkOrderStatusBadge status={workOrder.status} /></td>
+                  <td className="px-3 py-3 align-top text-text">{workOrder.completedQuantity} / {workOrder.quantity}</td>
+                  <td className="px-3 py-3 align-top text-text">{workOrder.warehouseCode} / {workOrder.locationCode}</td>
+                  <td className="px-3 py-3 align-top text-text">{workOrder.dueDate ? new Date(workOrder.dueDate).toLocaleDateString() : "Not set"}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}

client/src/modules/manufacturing/WorkOrderStatusBadge.tsx

@@ -0,0 +1,7 @@
+import type { WorkOrderStatus } from "@mrp/shared";
+
+import { workOrderStatusPalette } from "./config";
+
+export function WorkOrderStatusBadge({ status }: { status: WorkOrderStatus }) {
+  return <span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${workOrderStatusPalette[status]}`}>{status.replace("_", " ")}</span>;
+}

client/src/modules/manufacturing/config.ts

@@ -0,0 +1,48 @@
+import type { WorkOrderCompletionInput, WorkOrderInput, WorkOrderMaterialIssueInput, WorkOrderStatus } from "@mrp/shared";
+
+export const workOrderStatusOptions: Array<{ value: WorkOrderStatus; label: string }> = [
+  { value: "DRAFT", label: "Draft" },
+  { value: "RELEASED", label: "Released" },
+  { value: "IN_PROGRESS", label: "In Progress" },
+  { value: "ON_HOLD", label: "On Hold" },
+  { value: "COMPLETE", label: "Complete" },
+  { value: "CANCELLED", label: "Cancelled" },
+];
+
+export const workOrderStatusFilters: Array<{ value: "ALL" | WorkOrderStatus; label: string }> = [
+  { value: "ALL", label: "All statuses" },
+  ...workOrderStatusOptions,
+];
+
+export const workOrderStatusPalette: Record<WorkOrderStatus, string> = {
+  DRAFT: "border border-slate-400/30 bg-slate-500/12 text-slate-700 dark:text-slate-300",
+  RELEASED: "border border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300",
+  IN_PROGRESS: "border border-emerald-400/30 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
+  ON_HOLD: "border border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300",
+  COMPLETE: "border border-brand/30 bg-brand/10 text-brand",
+  CANCELLED: "border border-rose-400/30 bg-rose-500/12 text-rose-700 dark:text-rose-300",
+};
+
+export const emptyWorkOrderInput: WorkOrderInput = {
+  itemId: "",
+  projectId: null,
+  status: "DRAFT",
+  quantity: 1,
+  warehouseId: "",
+  locationId: "",
+  dueDate: null,
+  notes: "",
+};
+
+export const emptyMaterialIssueInput: WorkOrderMaterialIssueInput = {
+  componentItemId: "",
+  warehouseId: "",
+  locationId: "",
+  quantity: 1,
+  notes: "",
+};
+
+export const emptyCompletionInput: WorkOrderCompletionInput = {
+  quantity: 1,
+  notes: "",
+};