sales

client/src/components/AppShell.tsx

@@ -10,6 +10,8 @@ const links = [
   { to: "/crm/vendors", label: "Vendors" },
   { to: "/inventory/items", label: "Inventory" },
   { to: "/inventory/warehouses", label: "Warehouses" },
+  { to: "/sales/quotes", label: "Quotes" },
+  { to: "/sales/orders", label: "Sales Orders" },
   { to: "/planning/gantt", label: "Gantt" },
 ];
 

client/src/components/FileAttachmentsPanel.tsx

@@ -0,0 +1,194 @@
+import type { FileAttachmentDto } from "@mrp/shared";
+import { permissions } from "@mrp/shared";
+import { useEffect, useState } from "react";
+
+import { useAuth } from "../auth/AuthProvider";
+import { api, ApiError } from "../lib/api";
+
+interface FileAttachmentsPanelProps {
+  ownerType: string;
+  ownerId: string;
+  eyebrow: string;
+  title: string;
+  description: string;
+  emptyMessage: string;
+  onAttachmentCountChange?: (count: number) => void;
+}
+
+function formatFileSize(sizeBytes: number) {
+  if (sizeBytes < 1024) {
+    return `${sizeBytes} B`;
+  }
+
+  if (sizeBytes < 1024 * 1024) {
+    return `${(sizeBytes / 1024).toFixed(1)} KB`;
+  }
+
+  return `${(sizeBytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function FileAttachmentsPanel({
+  ownerType,
+  ownerId,
+  eyebrow,
+  title,
+  description,
+  emptyMessage,
+  onAttachmentCountChange,
+}: FileAttachmentsPanelProps) {
+  const { token, user } = useAuth();
+  const [attachments, setAttachments] = useState<FileAttachmentDto[]>([]);
+  const [status, setStatus] = useState("Loading attachments...");
+  const [isUploading, setIsUploading] = useState(false);
+  const [deletingAttachmentId, setDeletingAttachmentId] = useState<string | null>(null);
+
+  const canReadFiles = user?.permissions.includes(permissions.filesRead) ?? false;
+  const canWriteFiles = user?.permissions.includes(permissions.filesWrite) ?? false;
+
+  useEffect(() => {
+    if (!token || !canReadFiles) {
+      return;
+    }
+
+    api
+      .getAttachments(token, ownerType, ownerId)
+      .then((nextAttachments) => {
+        setAttachments(nextAttachments);
+        onAttachmentCountChange?.(nextAttachments.length);
+        setStatus(nextAttachments.length === 0 ? "No attachments uploaded yet." : `${nextAttachments.length} attachment(s) available.`);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load attachments.";
+        setStatus(message);
+      });
+  }, [canReadFiles, onAttachmentCountChange, ownerId, ownerType, token]);
+
+  async function handleUpload(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file || !token || !canWriteFiles) {
+      return;
+    }
+
+    setIsUploading(true);
+    setStatus("Uploading attachment...");
+
+    try {
+      const attachment = await api.uploadFile(token, file, ownerType, ownerId);
+      setAttachments((current) => {
+        const nextAttachments = [attachment, ...current];
+        onAttachmentCountChange?.(nextAttachments.length);
+        return nextAttachments;
+      });
+      setStatus("Attachment uploaded.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to upload attachment.";
+      setStatus(message);
+    } finally {
+      setIsUploading(false);
+      event.target.value = "";
+    }
+  }
+
+  async function handleOpen(attachment: FileAttachmentDto) {
+    if (!token) {
+      return;
+    }
+
+    try {
+      const blob = await api.getFileContentBlob(token, attachment.id);
+      const objectUrl = window.URL.createObjectURL(blob);
+      window.open(objectUrl, "_blank", "noopener,noreferrer");
+      window.setTimeout(() => window.URL.revokeObjectURL(objectUrl), 60_000);
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to open attachment.";
+      setStatus(message);
+    }
+  }
+
+  async function handleDelete(attachment: FileAttachmentDto) {
+    if (!token || !canWriteFiles) {
+      return;
+    }
+
+    setDeletingAttachmentId(attachment.id);
+    setStatus(`Deleting ${attachment.originalName}...`);
+
+    try {
+      await api.deleteAttachment(token, attachment.id);
+      setAttachments((current) => {
+        const nextAttachments = current.filter((item) => item.id !== attachment.id);
+        onAttachmentCountChange?.(nextAttachments.length);
+        return nextAttachments;
+      });
+      setStatus("Attachment deleted.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to delete attachment.";
+      setStatus(message);
+    } finally {
+      setDeletingAttachmentId(null);
+    }
+  }
+
+  return (
+    <article className="min-w-0 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">{eyebrow}</p>
+          <h4 className="mt-2 text-lg font-bold text-text">{title}</h4>
+          <p className="mt-2 text-sm text-muted">{description}</p>
+        </div>
+        {canWriteFiles ? (
+          <label className="inline-flex cursor-pointer items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
+            {isUploading ? "Uploading..." : "Upload file"}
+            <input className="hidden" type="file" onChange={handleUpload} disabled={isUploading} />
+          </label>
+        ) : null}
+      </div>
+      <div className="mt-5 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 text-sm text-muted">{status}</div>
+      {!canReadFiles ? (
+        <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
+          You do not have permission to view file attachments.
+        </div>
+      ) : attachments.length === 0 ? (
+        <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
+          {emptyMessage}
+        </div>
+      ) : (
+        <div className="mt-5 space-y-3">
+          {attachments.map((attachment) => (
+            <div
+              key={attachment.id}
+              className="flex flex-col gap-2 rounded-3xl border border-line/70 bg-page/60 px-2 py-2 lg:flex-row lg:items-center lg:justify-between"
+            >
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold text-text">{attachment.originalName}</p>
+                <p className="mt-1 text-xs text-muted">
+                  {attachment.mimeType} · {formatFileSize(attachment.sizeBytes)} · {new Date(attachment.createdAt).toLocaleString()}
+                </p>
+              </div>
+              <div className="flex shrink-0 gap-3">
+                <button
+                  type="button"
+                  onClick={() => handleOpen(attachment)}
+                  className="rounded-2xl border border-line/70 px-4 py-2 text-sm font-semibold text-text"
+                >
+                  Open
+                </button>
+                {canWriteFiles ? (
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(attachment)}
+                    disabled={deletingAttachmentId === attachment.id}
+                    className="rounded-2xl border border-rose-400/40 px-4 py-2 text-sm font-semibold text-rose-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-rose-300"
+                  >
+                    {deletingAttachmentId === attachment.id ? "Deleting..." : "Delete"}
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </article>
+  );
+}

client/src/lib/api.ts

@@ -33,6 +33,13 @@ import type {
   WarehouseLocationOptionDto,
   WarehouseSummaryDto,
 } from "@mrp/shared/dist/inventory/types.js";
+import type {
+  SalesCustomerOptionDto,
+  SalesDocumentDetailDto,
+  SalesDocumentInput,
+  SalesDocumentStatus,
+  SalesDocumentSummaryDto,
+} from "@mrp/shared/dist/sales/types.js";
 
 export class ApiError extends Error {
   constructor(message: string, public readonly code: string) {
@@ -362,6 +369,47 @@ export const api = {
   getGanttDemo(token: string) {
     return request<{ tasks: GanttTaskDto[]; links: GanttLinkDto[] }>("/api/v1/gantt/demo", undefined, token);
   },
+  getSalesCustomers(token: string) {
+    return request<SalesCustomerOptionDto[]>("/api/v1/sales/customers/options", undefined, token);
+  },
+  getQuotes(token: string, filters?: { q?: string; status?: SalesDocumentStatus }) {
+    return request<SalesDocumentSummaryDto[]>(
+      `/api/v1/sales/quotes${buildQueryString({
+        q: filters?.q,
+        status: filters?.status,
+      })}`,
+      undefined,
+      token
+    );
+  },
+  getQuote(token: string, quoteId: string) {
+    return request<SalesDocumentDetailDto>(`/api/v1/sales/quotes/${quoteId}`, undefined, token);
+  },
+  createQuote(token: string, payload: SalesDocumentInput) {
+    return request<SalesDocumentDetailDto>("/api/v1/sales/quotes", { method: "POST", body: JSON.stringify(payload) }, token);
+  },
+  updateQuote(token: string, quoteId: string, payload: SalesDocumentInput) {
+    return request<SalesDocumentDetailDto>(`/api/v1/sales/quotes/${quoteId}`, { method: "PUT", body: JSON.stringify(payload) }, token);
+  },
+  getSalesOrders(token: string, filters?: { q?: string; status?: SalesDocumentStatus }) {
+    return request<SalesDocumentSummaryDto[]>(
+      `/api/v1/sales/orders${buildQueryString({
+        q: filters?.q,
+        status: filters?.status,
+      })}`,
+      undefined,
+      token
+    );
+  },
+  getSalesOrder(token: string, orderId: string) {
+    return request<SalesDocumentDetailDto>(`/api/v1/sales/orders/${orderId}`, undefined, token);
+  },
+  createSalesOrder(token: string, payload: SalesDocumentInput) {
+    return request<SalesDocumentDetailDto>("/api/v1/sales/orders", { method: "POST", body: JSON.stringify(payload) }, token);
+  },
+  updateSalesOrder(token: string, orderId: string, payload: SalesDocumentInput) {
+    return request<SalesDocumentDetailDto>(`/api/v1/sales/orders/${orderId}`, { method: "PUT", body: JSON.stringify(payload) }, token);
+  },
   async getCompanyProfilePreviewPdf(token: string) {
     const response = await fetch("/api/v1/documents/company-profile-preview.pdf", {
       headers: {

client/src/main.tsx

@@ -21,6 +21,9 @@ import { InventoryItemsPage } from "./modules/inventory/InventoryItemsPage";
 import { WarehouseDetailPage } from "./modules/inventory/WarehouseDetailPage";
 import { WarehouseFormPage } from "./modules/inventory/WarehouseFormPage";
 import { WarehousesPage } from "./modules/inventory/WarehousesPage";
+import { SalesDetailPage } from "./modules/sales/SalesDetailPage";
+import { SalesFormPage } from "./modules/sales/SalesFormPage";
+import { SalesListPage } from "./modules/sales/SalesListPage";
 import { ThemeProvider } from "./theme/ThemeProvider";
 import "./index.css";
 
@@ -57,6 +60,15 @@ const router = createBrowserRouter([
               { path: "/inventory/warehouses/:warehouseId", element: <WarehouseDetailPage /> },
             ],
           },
+          {
+            element: <ProtectedRoute requiredPermissions={[permissions.salesRead]} />,
+            children: [
+              { path: "/sales/quotes", element: <SalesListPage entity="quote" /> },
+              { path: "/sales/quotes/:quoteId", element: <SalesDetailPage entity="quote" /> },
+              { path: "/sales/orders", element: <SalesListPage entity="order" /> },
+              { path: "/sales/orders/:orderId", element: <SalesDetailPage entity="order" /> },
+            ],
+          },
           {
             element: <ProtectedRoute requiredPermissions={[permissions.crmWrite]} />,
             children: [
@@ -66,6 +78,15 @@ const router = createBrowserRouter([
               { path: "/crm/vendors/:vendorId/edit", element: <CrmFormPage entity="vendor" mode="edit" /> },
             ],
           },
+          {
+            element: <ProtectedRoute requiredPermissions={[permissions.salesWrite]} />,
+            children: [
+              { path: "/sales/quotes/new", element: <SalesFormPage entity="quote" mode="create" /> },
+              { path: "/sales/quotes/:quoteId/edit", element: <SalesFormPage entity="quote" mode="edit" /> },
+              { path: "/sales/orders/new", element: <SalesFormPage entity="order" mode="create" /> },
+              { path: "/sales/orders/:orderId/edit", element: <SalesFormPage entity="order" mode="edit" /> },
+            ],
+          },
           {
             element: <ProtectedRoute requiredPermissions={[permissions.inventoryWrite]} />,
             children: [

client/src/modules/crm/CrmAttachmentsPanel.tsx

@@ -1,9 +1,4 @@
-import type { FileAttachmentDto } from "@mrp/shared";
-import { permissions } from "@mrp/shared";
-import { useEffect, useState } from "react";
-
-import { useAuth } from "../../auth/AuthProvider";
-import { api, ApiError } from "../../lib/api";
+import { FileAttachmentsPanel } from "../../components/FileAttachmentsPanel";
 
 interface CrmAttachmentsPanelProps {
   ownerType: string;
@@ -11,176 +6,16 @@ interface CrmAttachmentsPanelProps {
   onAttachmentCountChange?: (count: number) => void;
 }
 
-function formatFileSize(sizeBytes: number) {
-  if (sizeBytes < 1024) {
-    return `${sizeBytes} B`;
-  }
-
-  if (sizeBytes < 1024 * 1024) {
-    return `${(sizeBytes / 1024).toFixed(1)} KB`;
-  }
-
-  return `${(sizeBytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
 export function CrmAttachmentsPanel({ ownerType, ownerId, onAttachmentCountChange }: CrmAttachmentsPanelProps) {
-  const { token, user } = useAuth();
-  const [attachments, setAttachments] = useState<FileAttachmentDto[]>([]);
-  const [status, setStatus] = useState("Loading attachments...");
-  const [isUploading, setIsUploading] = useState(false);
-  const [deletingAttachmentId, setDeletingAttachmentId] = useState<string | null>(null);
-
-  const canReadFiles = user?.permissions.includes(permissions.filesRead) ?? false;
-  const canWriteFiles = user?.permissions.includes(permissions.filesWrite) ?? false;
-
-  useEffect(() => {
-    if (!token || !canReadFiles) {
-      return;
-    }
-
-    api
-      .getAttachments(token, ownerType, ownerId)
-      .then((nextAttachments) => {
-        setAttachments(nextAttachments);
-        onAttachmentCountChange?.(nextAttachments.length);
-        setStatus(
-          nextAttachments.length === 0 ? "No attachments uploaded yet." : `${nextAttachments.length} attachment(s) available.`
-        );
-      })
-      .catch((error: unknown) => {
-        const message = error instanceof ApiError ? error.message : "Unable to load attachments.";
-        setStatus(message);
-      });
-  }, [canReadFiles, onAttachmentCountChange, ownerId, ownerType, token]);
-
-  async function handleUpload(event: React.ChangeEvent<HTMLInputElement>) {
-    const file = event.target.files?.[0];
-    if (!file || !token || !canWriteFiles) {
-      return;
-    }
-
-    setIsUploading(true);
-    setStatus("Uploading attachment...");
-
-    try {
-      const attachment = await api.uploadFile(token, file, ownerType, ownerId);
-      setAttachments((current) => {
-        const nextAttachments = [attachment, ...current];
-        onAttachmentCountChange?.(nextAttachments.length);
-        return nextAttachments;
-      });
-      setStatus("Attachment uploaded.");
-    } catch (error: unknown) {
-      const message = error instanceof ApiError ? error.message : "Unable to upload attachment.";
-      setStatus(message);
-    } finally {
-      setIsUploading(false);
-      event.target.value = "";
-    }
-  }
-
-  async function handleOpen(attachment: FileAttachmentDto) {
-    if (!token) {
-      return;
-    }
-
-    try {
-      const blob = await api.getFileContentBlob(token, attachment.id);
-      const objectUrl = window.URL.createObjectURL(blob);
-      window.open(objectUrl, "_blank", "noopener,noreferrer");
-      window.setTimeout(() => window.URL.revokeObjectURL(objectUrl), 60_000);
-    } catch (error: unknown) {
-      const message = error instanceof ApiError ? error.message : "Unable to open attachment.";
-      setStatus(message);
-    }
-  }
-
-  async function handleDelete(attachment: FileAttachmentDto) {
-    if (!token || !canWriteFiles) {
-      return;
-    }
-
-    setDeletingAttachmentId(attachment.id);
-    setStatus(`Deleting ${attachment.originalName}...`);
-
-    try {
-      await api.deleteAttachment(token, attachment.id);
-      setAttachments((current) => {
-        const nextAttachments = current.filter((item) => item.id !== attachment.id);
-        onAttachmentCountChange?.(nextAttachments.length);
-        return nextAttachments;
-      });
-      setStatus("Attachment deleted.");
-    } catch (error: unknown) {
-      const message = error instanceof ApiError ? error.message : "Unable to delete attachment.";
-      setStatus(message);
-    } finally {
-      setDeletingAttachmentId(null);
-    }
-  }
-
   return (
-    <article className="min-w-0 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">Attachments</p>
-          <h4 className="mt-2 text-lg font-bold text-text">Shared files</h4>
-          <p className="mt-2 text-sm text-muted">
-            Drawings, customer markups, vendor documents, and other reference files linked to this record.
-          </p>
-        </div>
-        {canWriteFiles ? (
-          <label className="inline-flex cursor-pointer items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
-            {isUploading ? "Uploading..." : "Upload file"}
-            <input className="hidden" type="file" onChange={handleUpload} disabled={isUploading} />
-          </label>
-        ) : null}
-      </div>
-      <div className="mt-5 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 text-sm text-muted">{status}</div>
-      {!canReadFiles ? (
-        <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
-          You do not have permission to view file attachments.
-        </div>
-      ) : attachments.length === 0 ? (
-        <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
-          No attachments have been added to this record yet.
-        </div>
-      ) : (
-        <div className="mt-5 space-y-3">
-          {attachments.map((attachment) => (
-            <div
-              key={attachment.id}
-              className="flex flex-col gap-2 rounded-3xl border border-line/70 bg-page/60 px-2 py-2 lg:flex-row lg:items-center lg:justify-between"
-            >
-              <div className="min-w-0">
-                <p className="truncate text-sm font-semibold text-text">{attachment.originalName}</p>
-                <p className="mt-1 text-xs text-muted">
-                  {attachment.mimeType} · {formatFileSize(attachment.sizeBytes)} · {new Date(attachment.createdAt).toLocaleString()}
-                </p>
-              </div>
-              <div className="flex shrink-0 gap-3">
-                <button
-                  type="button"
-                  onClick={() => handleOpen(attachment)}
-                  className="rounded-2xl border border-line/70 px-4 py-2 text-sm font-semibold text-text"
-                >
-                  Open
-                </button>
-                {canWriteFiles ? (
-                  <button
-                    type="button"
-                    onClick={() => handleDelete(attachment)}
-                    disabled={deletingAttachmentId === attachment.id}
-                    className="rounded-2xl border border-rose-400/40 px-4 py-2 text-sm font-semibold text-rose-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-rose-300"
-                  >
-                    {deletingAttachmentId === attachment.id ? "Deleting..." : "Delete"}
-                  </button>
-                ) : null}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </article>
+    <FileAttachmentsPanel
+      ownerType={ownerType}
+      ownerId={ownerId}
+      eyebrow="Attachments"
+      title="Shared files"
+      description="Drawings, customer markups, vendor documents, and other reference files linked to this record."
+      emptyMessage="No attachments have been added to this record yet."
+      onAttachmentCountChange={onAttachmentCountChange}
+    />
   );
 }

client/src/modules/inventory/InventoryAttachmentsPanel.tsx

@@ -0,0 +1,22 @@
+import { FileAttachmentsPanel } from "../../components/FileAttachmentsPanel";
+import { inventoryFileOwnerType } from "./config";
+
+export function InventoryAttachmentsPanel({
+  itemId,
+  onAttachmentCountChange,
+}: {
+  itemId: string;
+  onAttachmentCountChange?: (count: number) => void;
+}) {
+  return (
+    <FileAttachmentsPanel
+      ownerType={inventoryFileOwnerType}
+      ownerId={itemId}
+      eyebrow="Attachments"
+      title="Drawings and support docs"
+      description="Store drawings, cut sheets, work instructions, and other manufacturing support files on the item record."
+      emptyMessage="No drawings or support documents have been added to this item yet."
+      onAttachmentCountChange={onAttachmentCountChange}
+    />
+  );
+}

client/src/modules/inventory/InventoryDetailPage.tsx

@@ -6,6 +6,7 @@ import { Link, useParams } from "react-router-dom";
 import { useAuth } from "../../auth/AuthProvider";
 import { api, ApiError } from "../../lib/api";
 import { emptyInventoryTransactionInput, inventoryTransactionOptions } from "./config";
+import { InventoryAttachmentsPanel } from "./InventoryAttachmentsPanel";
 import { InventoryStatusBadge } from "./InventoryStatusBadge";
 import { InventoryTransactionTypeBadge } from "./InventoryTransactionTypeBadge";
 import { InventoryTypeBadge } from "./InventoryTypeBadge";
@@ -355,6 +356,7 @@ export function InventoryDetailPage() {
           )}
         </article>
       </section>
+      <InventoryAttachmentsPanel itemId={item.id} />
     </section>
   );
 }

client/src/modules/inventory/config.ts

@@ -92,6 +92,8 @@ export const inventoryStatusPalette: Record<InventoryItemStatus, string> = {
   OBSOLETE: "border border-rose-400/30 bg-rose-500/12 text-rose-700 dark:text-rose-300",
 };
 
+export const inventoryFileOwnerType = "inventory-item";
+
 export const inventoryTypePalette: Record<InventoryItemType, string> = {
   PURCHASED: "border border-slate-400/30 bg-slate-500/12 text-slate-700 dark:text-slate-300",
   MANUFACTURED: "border border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300",

client/src/modules/sales/SalesDetailPage.tsx

@@ -0,0 +1,143 @@
+import { permissions } from "@mrp/shared";
+import type { SalesDocumentDetailDto } from "@mrp/shared/dist/sales/types.js";
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { salesConfigs, type SalesDocumentEntity } from "./config";
+import { SalesStatusBadge } from "./SalesStatusBadge";
+
+export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
+  const { token, user } = useAuth();
+  const { quoteId, orderId } = useParams();
+  const config = salesConfigs[entity];
+  const documentId = entity === "quote" ? quoteId : orderId;
+  const [document, setDocument] = useState<SalesDocumentDetailDto | null>(null);
+  const [status, setStatus] = useState(`Loading ${config.singularLabel.toLowerCase()}...`);
+
+  const canManage = user?.permissions.includes(permissions.salesWrite) ?? false;
+
+  useEffect(() => {
+    if (!token || !documentId) {
+      return;
+    }
+
+    const loader = entity === "quote" ? api.getQuote(token, documentId) : api.getSalesOrder(token, documentId);
+    loader
+      .then((nextDocument) => {
+        setDocument(nextDocument);
+        setStatus(`${config.singularLabel} loaded.`);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : `Unable to load ${config.singularLabel.toLowerCase()}.`;
+        setStatus(message);
+      });
+  }, [config.singularLabel, documentId, entity, token]);
+
+  if (!document) {
+    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">{config.detailEyebrow}</p>
+            <h3 className="mt-2 text-xl font-bold text-text">{document.documentNumber}</h3>
+            <p className="mt-1 text-sm text-text">{document.customerName}</p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              <SalesStatusBadge status={document.status} />
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <Link to={config.routeBase} 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 {config.collectionLabel.toLowerCase()}
+            </Link>
+            {canManage ? (
+              <Link to={`${config.routeBase}/${document.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
+                Edit {config.singularLabel.toLowerCase()}
+              </Link>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <section className="grid gap-3 xl:grid-cols-4">
+        <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">Issue Date</p>
+          <div className="mt-2 text-base font-bold text-text">{new Date(document.issueDate).toLocaleDateString()}</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">Expires</p>
+          <div className="mt-2 text-base font-bold text-text">{document.expiresAt ? new Date(document.expiresAt).toLocaleDateString() : "N/A"}</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">Lines</p>
+          <div className="mt-2 text-base font-bold text-text">{document.lineCount}</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">Subtotal</p>
+          <div className="mt-2 text-base font-bold text-text">${document.subtotal.toFixed(2)}</div>
+        </article>
+      </section>
+      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
+        <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">Customer</p>
+          <dl className="mt-5 grid gap-3">
+            <div>
+              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account</dt>
+              <dd className="mt-1 text-sm text-text">{document.customerName}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Email</dt>
+              <dd className="mt-1 text-sm text-text">{document.customerEmail}</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">Notes</p>
+          <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{document.notes || "No notes recorded for this document."}</p>
+        </article>
+      </div>
+      <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">Line Items</p>
+        {document.lines.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 line items have been added yet.
+          </div>
+        ) : (
+          <div className="mt-6 overflow-hidden rounded-2xl border border-line/70">
+            <table className="min-w-full divide-y divide-line/70 text-sm">
+              <thead className="bg-page/80 text-left text-muted">
+                <tr>
+                  <th className="px-2 py-2">Item</th>
+                  <th className="px-2 py-2">Description</th>
+                  <th className="px-2 py-2">Qty</th>
+                  <th className="px-2 py-2">UOM</th>
+                  <th className="px-2 py-2">Unit Price</th>
+                  <th className="px-2 py-2">Total</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-line/70 bg-surface">
+              {document.lines.map((line: SalesDocumentDetailDto["lines"][number]) => (
+                  <tr key={line.id}>
+                    <td className="px-2 py-2">
+                      <div className="font-semibold text-text">{line.itemSku}</div>
+                      <div className="mt-1 text-xs text-muted">{line.itemName}</div>
+                    </td>
+                    <td className="px-2 py-2 text-muted">{line.description}</td>
+                    <td className="px-2 py-2 text-muted">{line.quantity}</td>
+                    <td className="px-2 py-2 text-muted">{line.unitOfMeasure}</td>
+                    <td className="px-2 py-2 text-muted">${line.unitPrice.toFixed(2)}</td>
+                    <td className="px-2 py-2 text-muted">${line.lineTotal.toFixed(2)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </section>
+  );
+}

client/src/modules/sales/SalesFormPage.tsx

@@ -0,0 +1,316 @@
+import type { InventoryItemOptionDto } from "@mrp/shared/dist/inventory/types.js";
+import type { SalesCustomerOptionDto, SalesDocumentDetailDto, SalesDocumentInput, SalesLineInput } from "@mrp/shared/dist/sales/types.js";
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { inventoryUnitOptions } from "../inventory/config";
+import { emptySalesDocumentInput, salesConfigs, salesStatusOptions, type SalesDocumentEntity } from "./config";
+
+export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; mode: "create" | "edit" }) {
+  const { token } = useAuth();
+  const navigate = useNavigate();
+  const { quoteId, orderId } = useParams();
+  const documentId = entity === "quote" ? quoteId : orderId;
+  const config = salesConfigs[entity];
+  const [form, setForm] = useState<SalesDocumentInput>(emptySalesDocumentInput);
+  const [status, setStatus] = useState(mode === "create" ? `Create a new ${config.singularLabel.toLowerCase()}.` : `Loading ${config.singularLabel.toLowerCase()}...`);
+  const [customers, setCustomers] = useState<SalesCustomerOptionDto[]>([]);
+  const [itemOptions, setItemOptions] = useState<InventoryItemOptionDto[]>([]);
+  const [lineSearchTerms, setLineSearchTerms] = useState<string[]>([]);
+  const [activeLinePicker, setActiveLinePicker] = useState<number | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    api.getSalesCustomers(token).then(setCustomers).catch(() => setCustomers([]));
+    api.getInventoryItemOptions(token).then(setItemOptions).catch(() => setItemOptions([]));
+  }, [token]);
+
+  useEffect(() => {
+    if (!token || mode !== "edit" || !documentId) {
+      return;
+    }
+
+    const loader = entity === "quote" ? api.getQuote(token, documentId) : api.getSalesOrder(token, documentId);
+    loader
+      .then((document) => {
+        setForm({
+          customerId: document.customerId,
+          status: document.status,
+          issueDate: document.issueDate,
+          expiresAt: entity === "quote" ? document.expiresAt : null,
+          notes: document.notes,
+          lines: document.lines.map((line) => ({
+            itemId: line.itemId,
+            description: line.description,
+            quantity: line.quantity,
+            unitOfMeasure: line.unitOfMeasure,
+            unitPrice: line.unitPrice,
+            position: line.position,
+          })),
+        });
+        setLineSearchTerms(document.lines.map((line: SalesDocumentDetailDto["lines"][number]) => line.itemSku));
+        setStatus(`${config.singularLabel} loaded.`);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : `Unable to load ${config.singularLabel.toLowerCase()}.`;
+        setStatus(message);
+      });
+  }, [config.singularLabel, documentId, entity, mode, token]);
+
+  function updateField<Key extends keyof SalesDocumentInput>(key: Key, value: SalesDocumentInput[Key]) {
+    setForm((current: SalesDocumentInput) => ({ ...current, [key]: value }));
+  }
+
+  function updateLine(index: number, nextLine: SalesLineInput) {
+    setForm((current: SalesDocumentInput) => ({
+      ...current,
+      lines: current.lines.map((line: SalesLineInput, lineIndex: number) => (lineIndex === index ? nextLine : line)),
+    }));
+  }
+
+  function updateLineSearchTerm(index: number, value: string) {
+    setLineSearchTerms((current: string[]) => {
+      const next = [...current];
+      next[index] = value;
+      return next;
+    });
+  }
+
+  function addLine() {
+    setForm((current: SalesDocumentInput) => ({
+      ...current,
+      lines: [
+        ...current.lines,
+        {
+          itemId: "",
+          description: "",
+          quantity: 1,
+          unitOfMeasure: "EA",
+          unitPrice: 0,
+          position: current.lines.length === 0 ? 10 : Math.max(...current.lines.map((line: SalesLineInput) => line.position)) + 10,
+        },
+      ],
+    }));
+    setLineSearchTerms((current: string[]) => [...current, ""]);
+  }
+
+  function removeLine(index: number) {
+    setForm((current: SalesDocumentInput) => ({
+      ...current,
+      lines: current.lines.filter((_line: SalesLineInput, lineIndex: number) => lineIndex !== index),
+    }));
+    setLineSearchTerms((current: string[]) => current.filter((_term: string, termIndex: number) => termIndex !== index));
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token) {
+      return;
+    }
+
+    setIsSaving(true);
+    setStatus(`Saving ${config.singularLabel.toLowerCase()}...`);
+
+    try {
+      const saved =
+        entity === "quote"
+          ? mode === "create"
+            ? await api.createQuote(token, form)
+            : await api.updateQuote(token, documentId ?? "", form)
+          : mode === "create"
+            ? await api.createSalesOrder(token, { ...form, expiresAt: null })
+            : await api.updateSalesOrder(token, documentId ?? "", { ...form, expiresAt: null });
+
+      navigate(`${config.routeBase}/${saved.id}`);
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : `Unable to save ${config.singularLabel.toLowerCase()}.`;
+      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">{config.detailEyebrow} Editor</p>
+            <h3 className="mt-2 text-xl font-bold text-text">{mode === "create" ? `New ${config.singularLabel}` : `Edit ${config.singularLabel}`}</h3>
+          </div>
+          <Link to={mode === "create" ? config.routeBase : `${config.routeBase}/${documentId}`} 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-4">
+          <label className="block xl:col-span-2">
+            <span className="mb-2 block text-sm font-semibold text-text">Customer</span>
+            <select
+              value={form.customerId}
+              onChange={(event) => updateField("customerId", 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 customer</option>
+              {customers.map((customer) => (
+                <option key={customer.id} value={customer.id}>
+                  {customer.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <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 SalesDocumentInput["status"])}
+              className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+            >
+              {salesStatusOptions.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">Issue date</span>
+            <input
+              type="date"
+              value={form.issueDate.slice(0, 10)}
+              onChange={(event) => updateField("issueDate", new Date(event.target.value).toISOString())}
+              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>
+        {entity === "quote" ? (
+          <label className="block xl:max-w-sm">
+            <span className="mb-2 block text-sm font-semibold text-text">Expiration date</span>
+            <input
+              type="date"
+              value={form.expiresAt ? form.expiresAt.slice(0, 10) : ""}
+              onChange={(event) => updateField("expiresAt", 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>
+        ) : null}
+        <label className="block">
+          <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
+          <textarea
+            value={form.notes}
+            onChange={(event) => updateField("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>
+      </section>
+      <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">Line Items</p>
+            <h4 className="mt-2 text-lg font-bold text-text">Commercial lines</h4>
+          </div>
+          <button type="button" onClick={addLine} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
+            Add line
+          </button>
+        </div>
+        {form.lines.length === 0 ? (
+          <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
+            No line items added yet.
+          </div>
+        ) : (
+          <div className="mt-5 space-y-4">
+            {form.lines.map((line: SalesLineInput, index: number) => (
+              <div key={index} className="rounded-3xl border border-line/70 bg-page/60 p-3">
+                <div className="grid gap-3 xl:grid-cols-[1.25fr_1.4fr_0.55fr_0.55fr_0.75fr_auto]">
+                  <label className="block">
+                    <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">SKU</span>
+                    <div className="relative">
+                      <input
+                        value={lineSearchTerms[index] ?? ""}
+                        onChange={(event) => {
+                          updateLineSearchTerm(index, event.target.value);
+                          updateLine(index, { ...line, itemId: "" });
+                          setActiveLinePicker(index);
+                        }}
+                        onFocus={() => setActiveLinePicker(index)}
+                        onBlur={() => window.setTimeout(() => setActiveLinePicker((current) => (current === index ? null : current)), 120)}
+                        placeholder="Search by SKU"
+                        className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand"
+                      />
+                      {activeLinePicker === index ? (
+                        <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) => option.sku.toLowerCase().includes((lineSearchTerms[index] ?? "").trim().toLowerCase()))
+                            .slice(0, 12)
+                            .map((option) => (
+                              <button
+                                key={option.id}
+                                type="button"
+                                onMouseDown={(event) => {
+                                  event.preventDefault();
+                                  updateLine(index, {
+                                    ...line,
+                                    itemId: option.id,
+                                    description: line.description || option.name,
+                                  });
+                                  updateLineSearchTerm(index, option.sku);
+                                  setActiveLinePicker(null);
+                                }}
+                                className="block w-full border-b border-line/50 px-4 py-2 text-left text-sm font-semibold text-text transition last:border-b-0 hover:bg-page/70"
+                              >
+                                {option.sku}
+                              </button>
+                            ))}
+                        </div>
+                      ) : null}
+                    </div>
+                  </label>
+                  <label className="block">
+                    <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Description</span>
+                    <input value={line.description} onChange={(event) => updateLine(index, { ...line, description: event.target.value })} className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand" />
+                  </label>
+                  <label className="block">
+                    <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Qty</span>
+                    <input type="number" min={1} step={1} value={line.quantity} onChange={(event) => updateLine(index, { ...line, quantity: Number.parseInt(event.target.value, 10) || 0 })} className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand" />
+                  </label>
+                  <label className="block">
+                    <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">UOM</span>
+                    <select value={line.unitOfMeasure} onChange={(event) => updateLine(index, { ...line, unitOfMeasure: event.target.value as SalesLineInput["unitOfMeasure"] })} className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand">
+                      {inventoryUnitOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <label className="block">
+                    <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Unit Price</span>
+                    <input type="number" min={0} step={0.01} value={line.unitPrice} onChange={(event) => updateLine(index, { ...line, unitPrice: Number(event.target.value) })} className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand" />
+                  </label>
+                  <div className="flex items-end">
+                    <button type="button" onClick={() => removeLine(index)} className="rounded-2xl border border-rose-400/40 px-2 py-2 text-sm font-semibold text-rose-700 dark:text-rose-300">
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="mt-6 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 ${config.singularLabel.toLowerCase()}` : "Save changes"}
+          </button>
+        </div>
+      </section>
+    </form>
+  );
+}

client/src/modules/sales/SalesListPage.tsx

@@ -0,0 +1,124 @@
+import { permissions } from "@mrp/shared";
+import type { SalesDocumentStatus, SalesDocumentSummaryDto } from "@mrp/shared/dist/sales/types.js";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { salesConfigs, salesStatusFilters, type SalesDocumentEntity } from "./config";
+import { SalesStatusBadge } from "./SalesStatusBadge";
+
+export function SalesListPage({ entity }: { entity: SalesDocumentEntity }) {
+  const { token, user } = useAuth();
+  const config = salesConfigs[entity];
+  const [documents, setDocuments] = useState<SalesDocumentSummaryDto[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState<"ALL" | SalesDocumentStatus>("ALL");
+  const [status, setStatus] = useState(`Loading ${config.collectionLabel.toLowerCase()}...`);
+
+  const canManage = user?.permissions.includes(permissions.salesWrite) ?? false;
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    const loader =
+      entity === "quote"
+        ? api.getQuotes(token, { q: searchTerm.trim() || undefined, status: statusFilter === "ALL" ? undefined : statusFilter })
+        : api.getSalesOrders(token, { q: searchTerm.trim() || undefined, status: statusFilter === "ALL" ? undefined : statusFilter });
+
+    loader
+      .then((nextDocuments) => {
+        setDocuments(nextDocuments);
+        setStatus(`${nextDocuments.length} ${config.collectionLabel.toLowerCase()} matched the current filters.`);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : `Unable to load ${config.collectionLabel.toLowerCase()}.`;
+        setStatus(message);
+      });
+  }, [config.collectionLabel, entity, searchTerm, statusFilter, token]);
+
+  return (
+    <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel">
+      <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">{config.listEyebrow}</p>
+          <h3 className="mt-2 text-lg font-bold text-text">{config.collectionLabel}</h3>
+          <p className="mt-2 max-w-2xl text-sm text-muted">
+            Customer-facing commercial documents for pricing, commitment, and downstream fulfillment planning.
+          </p>
+        </div>
+        {canManage ? (
+          <Link to={`${config.routeBase}/new`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-3 py-2 text-sm font-semibold text-white">
+            New {config.singularLabel.toLowerCase()}
+          </Link>
+        ) : null}
+      </div>
+      <div className="mt-6 grid gap-3 rounded-3xl border border-line/70 bg-page/60 p-3 xl:grid-cols-[1.35fr_0.8fr]">
+        <label className="block">
+          <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Search</span>
+          <input
+            value={searchTerm}
+            onChange={(event) => setSearchTerm(event.target.value)}
+            placeholder={`Search ${config.collectionLabel.toLowerCase()} by document number or customer`}
+            className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand"
+          />
+        </label>
+        <label className="block">
+          <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Status</span>
+          <select
+            value={statusFilter}
+            onChange={(event) => setStatusFilter(event.target.value as "ALL" | SalesDocumentStatus)}
+            className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand"
+          >
+            {salesStatusFilters.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      <div className="mt-6 rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm text-muted">{status}</div>
+      {documents.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 {config.collectionLabel.toLowerCase()} have been added yet.
+        </div>
+      ) : (
+        <div className="mt-6 overflow-hidden rounded-2xl border border-line/70">
+          <table className="min-w-full divide-y divide-line/70 text-sm">
+            <thead className="bg-page/80 text-left text-muted">
+              <tr>
+                <th className="px-2 py-2">Document</th>
+                <th className="px-2 py-2">Customer</th>
+                <th className="px-2 py-2">Status</th>
+                <th className="px-2 py-2">Issue Date</th>
+                <th className="px-2 py-2">Value</th>
+                <th className="px-2 py-2">Lines</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-line/70 bg-surface">
+              {documents.map((document) => (
+                <tr key={document.id} className="transition hover:bg-page/70">
+                  <td className="px-2 py-2">
+                    <Link to={`${config.routeBase}/${document.id}`} className="font-semibold text-text hover:text-brand">
+                      {document.documentNumber}
+                    </Link>
+                  </td>
+                  <td className="px-2 py-2 text-muted">{document.customerName}</td>
+                  <td className="px-2 py-2">
+                    <SalesStatusBadge status={document.status} />
+                  </td>
+                  <td className="px-2 py-2 text-muted">{new Date(document.issueDate).toLocaleDateString()}</td>
+                  <td className="px-2 py-2 text-muted">${document.subtotal.toFixed(2)}</td>
+                  <td className="px-2 py-2 text-muted">{document.lineCount}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}

client/src/modules/sales/SalesStatusBadge.tsx

@@ -0,0 +1,9 @@
+import type { SalesDocumentStatus } from "@mrp/shared/dist/sales/types.js";
+
+import { salesStatusOptions, salesStatusPalette } from "./config";
+
+export function SalesStatusBadge({ status }: { status: SalesDocumentStatus }) {
+  const label = salesStatusOptions.find((option) => option.value === status)?.label ?? status;
+
+  return <span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold uppercase tracking-[0.12em] ${salesStatusPalette[status]}`}>{label}</span>;
+}

client/src/modules/sales/config.ts

@@ -0,0 +1,59 @@
+import type { SalesDocumentInput, SalesDocumentStatus } from "@mrp/shared/dist/sales/types.js";
+
+export type SalesDocumentEntity = "quote" | "order";
+
+interface SalesModuleConfig {
+  entity: SalesDocumentEntity;
+  singularLabel: string;
+  collectionLabel: string;
+  routeBase: string;
+  detailEyebrow: string;
+  listEyebrow: string;
+}
+
+export const salesConfigs: Record<SalesDocumentEntity, SalesModuleConfig> = {
+  quote: {
+    entity: "quote",
+    singularLabel: "Quote",
+    collectionLabel: "Quotes",
+    routeBase: "/sales/quotes",
+    detailEyebrow: "Sales Quote",
+    listEyebrow: "Sales",
+  },
+  order: {
+    entity: "order",
+    singularLabel: "Sales Order",
+    collectionLabel: "Sales Orders",
+    routeBase: "/sales/orders",
+    detailEyebrow: "Sales Order",
+    listEyebrow: "Sales",
+  },
+};
+
+export const salesStatusOptions: Array<{ value: SalesDocumentStatus; label: string }> = [
+  { value: "DRAFT", label: "Draft" },
+  { value: "ISSUED", label: "Issued" },
+  { value: "APPROVED", label: "Approved" },
+  { value: "CLOSED", label: "Closed" },
+];
+
+export const salesStatusFilters: Array<{ value: "ALL" | SalesDocumentStatus; label: string }> = [
+  { value: "ALL", label: "All statuses" },
+  ...salesStatusOptions,
+];
+
+export const salesStatusPalette: Record<SalesDocumentStatus, string> = {
+  DRAFT: "border border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300",
+  ISSUED: "border border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300",
+  APPROVED: "border border-emerald-400/30 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
+  CLOSED: "border border-slate-400/30 bg-slate-500/12 text-slate-700 dark:text-slate-300",
+};
+
+export const emptySalesDocumentInput: SalesDocumentInput = {
+  customerId: "",
+  status: "DRAFT",
+  issueDate: new Date().toISOString(),
+  expiresAt: null,
+  notes: "",
+  lines: [],
+};