purchase slice 1

client/src/lib/api.ts

@@ -47,6 +47,7 @@ import type {
   PurchaseOrderSummaryDto,
   PurchaseVendorOptionDto,
 } from "@mrp/shared";
+import type { PurchaseReceiptInput } from "@mrp/shared/dist/purchasing/types.js";
 import type {
   ShipmentDetailDto,
   ShipmentInput,
@@ -470,6 +471,13 @@ export const api = {
       token
     );
   },
+  createPurchaseReceipt(token: string, orderId: string, payload: PurchaseReceiptInput) {
+    return request<PurchaseOrderDetailDto>(
+      `/api/v1/purchasing/orders/${orderId}/receipts`,
+      { method: "POST", body: JSON.stringify(payload) },
+      token
+    );
+  },
   getShipmentOrderOptions(token: string) {
     return request<ShipmentOrderOptionDto[]>("/api/v1/shipping/orders/options", undefined, token);
   },

client/src/modules/purchasing/PurchaseDetailPage.tsx

@@ -1,21 +1,29 @@
 import { permissions } from "@mrp/shared";
 import type { PurchaseOrderDetailDto, PurchaseOrderStatus } from "@mrp/shared";
+import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
+import type { PurchaseReceiptInput } from "@mrp/shared/dist/purchasing/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 { purchaseStatusOptions } from "./config";
+import { emptyPurchaseReceiptInput, purchaseStatusOptions } from "./config";
 import { PurchaseStatusBadge } from "./PurchaseStatusBadge";
 
 export function PurchaseDetailPage() {
   const { token, user } = useAuth();
   const { orderId } = useParams();
   const [document, setDocument] = useState<PurchaseOrderDetailDto | null>(null);
+  const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
+  const [receiptForm, setReceiptForm] = useState<PurchaseReceiptInput>(emptyPurchaseReceiptInput);
+  const [receiptQuantities, setReceiptQuantities] = useState<Record<string, number>>({});
+  const [receiptStatus, setReceiptStatus] = useState("Receive ordered material into inventory against this purchase order.");
+  const [isSavingReceipt, setIsSavingReceipt] = useState(false);
   const [status, setStatus] = useState("Loading purchase order...");
   const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
 
   const canManage = user?.permissions.includes("purchasing.write") ?? false;
+  const canReceive = canManage && (user?.permissions.includes(permissions.inventoryWrite) ?? false);
 
   useEffect(() => {
     if (!token || !orderId) {
@@ -31,13 +39,66 @@ export function PurchaseDetailPage() {
         const message = error instanceof ApiError ? error.message : "Unable to load purchase order.";
         setStatus(message);
       });
-  }, [orderId, token]);
+
+    if (!canReceive) {
+      return;
+    }
+
+    api.getWarehouseLocationOptions(token)
+      .then((options) => {
+        setLocationOptions(options);
+        setReceiptForm((current: PurchaseReceiptInput) => {
+          if (current.locationId) {
+            return current;
+          }
+
+          const firstOption = options[0];
+          return firstOption
+            ? {
+                ...current,
+                warehouseId: firstOption.warehouseId,
+                locationId: firstOption.locationId,
+              }
+            : current;
+        });
+      })
+      .catch(() => setLocationOptions([]));
+  }, [canReceive, orderId, token]);
+
+  useEffect(() => {
+    if (!document) {
+      return;
+    }
+
+    setReceiptQuantities((current) => {
+      const next: Record<string, number> = {};
+      for (const line of document.lines) {
+        if (line.remainingQuantity > 0) {
+          next[line.id] = current[line.id] ?? 0;
+        }
+      }
+
+      return next;
+    });
+  }, [document]);
 
   if (!document) {
     return <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 text-sm text-muted shadow-panel">{status}</div>;
   }
 
   const activeDocument = document;
+  const openLines = activeDocument.lines.filter((line) => line.remainingQuantity > 0);
+
+  function updateReceiptField<Key extends keyof PurchaseReceiptInput>(key: Key, value: PurchaseReceiptInput[Key]) {
+    setReceiptForm((current: PurchaseReceiptInput) => ({ ...current, [key]: value }));
+  }
+
+  function updateReceiptQuantity(lineId: string, quantity: number) {
+    setReceiptQuantities((current: Record<string, number>) => ({
+      ...current,
+      [lineId]: quantity,
+    }));
+  }
 
   async function handleStatusChange(nextStatus: PurchaseOrderStatus) {
     if (!token) {
@@ -59,6 +120,44 @@ export function PurchaseDetailPage() {
     }
   }
 
+  async function handleReceiptSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token || !canReceive) {
+      return;
+    }
+
+    setIsSavingReceipt(true);
+    setReceiptStatus("Posting purchase receipt...");
+
+    try {
+      const payload: PurchaseReceiptInput = {
+        ...receiptForm,
+        lines: openLines
+          .map((line) => ({
+            purchaseOrderLineId: line.id,
+            quantity: Math.max(0, Math.floor(receiptQuantities[line.id] ?? 0)),
+          }))
+          .filter((line) => line.quantity > 0),
+      };
+
+      const nextDocument = await api.createPurchaseReceipt(token, activeDocument.id, payload);
+      setDocument(nextDocument);
+      setReceiptQuantities({});
+      setReceiptForm((current: PurchaseReceiptInput) => ({
+        ...current,
+        receivedAt: new Date().toISOString(),
+        notes: "",
+      }));
+      setReceiptStatus("Purchase receipt recorded.");
+      setStatus("Purchase order updated after receipt.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to record purchase receipt.";
+      setReceiptStatus(message);
+    } finally {
+      setIsSavingReceipt(false);
+    }
+  }
+
   return (
     <section className="space-y-4">
       <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
@@ -103,10 +202,12 @@ export function PurchaseDetailPage() {
       <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(activeDocument.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">Lines</p><div className="mt-2 text-base font-bold text-text">{activeDocument.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">${activeDocument.subtotal.toFixed(2)}</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">Total</p><div className="mt-2 text-base font-bold text-text">${activeDocument.total.toFixed(2)}</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">Receipts</p><div className="mt-2 text-base font-bold text-text">{activeDocument.receipts.length}</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">Qty Remaining</p><div className="mt-2 text-base font-bold text-text">{activeDocument.lines.reduce((sum, line) => sum + line.remainingQuantity, 0)}</div></article>
       </section>
       <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">Subtotal</p><div className="mt-2 text-base font-bold text-text">${activeDocument.subtotal.toFixed(2)}</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">Total</p><div className="mt-2 text-base font-bold text-text">${activeDocument.total.toFixed(2)}</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">Tax</p><div className="mt-2 text-base font-bold text-text">${activeDocument.taxAmount.toFixed(2)}</div><div className="mt-1 text-xs text-muted">{activeDocument.taxPercent.toFixed(2)}%</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">Freight</p><div className="mt-2 text-base font-bold text-text">${activeDocument.freightAmount.toFixed(2)}</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">Payment Terms</p><div className="mt-2 text-base font-bold text-text">{activeDocument.paymentTerms || "N/A"}</div></article>
@@ -133,7 +234,7 @@ export function PurchaseDetailPage() {
           <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 Cost</th><th className="px-2 py-2">Total</th></tr>
+                <tr><th className="px-2 py-2">Item</th><th className="px-2 py-2">Description</th><th className="px-2 py-2">Ordered</th><th className="px-2 py-2">Received</th><th className="px-2 py-2">Remaining</th><th className="px-2 py-2">UOM</th><th className="px-2 py-2">Unit Cost</th><th className="px-2 py-2">Total</th></tr>
               </thead>
               <tbody className="divide-y divide-line/70 bg-surface">
                 {activeDocument.lines.map((line: PurchaseOrderDetailDto["lines"][number]) => (
@@ -141,6 +242,8 @@ export function PurchaseDetailPage() {
                     <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.receivedQuantity}</td>
+                    <td className="px-2 py-2 text-muted">{line.remainingQuantity}</td>
                     <td className="px-2 py-2 text-muted">{line.unitOfMeasure}</td>
                     <td className="px-2 py-2 text-muted">${line.unitCost.toFixed(2)}</td>
                     <td className="px-2 py-2 text-muted">${line.lineTotal.toFixed(2)}</td>
@@ -151,6 +254,143 @@ export function PurchaseDetailPage() {
           </div>
         )}
       </section>
+      <section className="grid gap-3 2xl:grid-cols-[minmax(360px,0.82fr)_minmax(0,1.18fr)]">
+        {canReceive ? (
+          <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">Purchase Receiving</p>
+            <h4 className="mt-2 text-lg font-bold text-text">Receive material</h4>
+            <p className="mt-2 text-sm text-muted">Post received quantities to inventory and retain a receipt record against this order.</p>
+            {openLines.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">
+                All ordered quantities have been received for this purchase order.
+              </div>
+            ) : (
+              <form className="mt-5 space-y-4" onSubmit={handleReceiptSubmit}>
+                <div className="grid gap-3 xl:grid-cols-2">
+                  <label className="block">
+                    <span className="mb-2 block text-sm font-semibold text-text">Receipt date</span>
+                    <input
+                      type="date"
+                      value={receiptForm.receivedAt.slice(0, 10)}
+                      onChange={(event) => updateReceiptField("receivedAt", 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>
+                  <label className="block">
+                    <span className="mb-2 block text-sm font-semibold text-text">Stock location</span>
+                    <select
+                      value={receiptForm.locationId}
+                      onChange={(event) => {
+                        const nextLocation = locationOptions.find((option) => option.locationId === event.target.value);
+                        updateReceiptField("locationId", event.target.value);
+                        if (nextLocation) {
+                          updateReceiptField("warehouseId", nextLocation.warehouseId);
+                        }
+                      }}
+                      className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+                    >
+                      {locationOptions.map((option) => (
+                        <option key={option.locationId} value={option.locationId}>
+                          {option.warehouseCode} / {option.locationCode}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                </div>
+                <label className="block">
+                  <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
+                  <textarea
+                    value={receiptForm.notes}
+                    onChange={(event) => updateReceiptField("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="space-y-3">
+                  {openLines.map((line) => (
+                    <div key={line.id} className="grid gap-3 rounded-3xl border border-line/70 bg-page/60 p-3 xl:grid-cols-[minmax(0,1.3fr)_0.6fr_0.7fr_0.7fr]">
+                      <div>
+                        <div className="font-semibold text-text">{line.itemSku}</div>
+                        <div className="mt-1 text-xs text-muted">{line.itemName}</div>
+                        <div className="mt-2 text-xs text-muted">{line.description}</div>
+                      </div>
+                      <div className="text-sm">
+                        <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Remaining</div>
+                        <div className="mt-2 font-semibold text-text">{line.remainingQuantity}</div>
+                      </div>
+                      <div className="text-sm">
+                        <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Received</div>
+                        <div className="mt-2 font-semibold text-text">{line.receivedQuantity}</div>
+                      </div>
+                      <label className="block">
+                        <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Receive Now</span>
+                        <input
+                          type="number"
+                          min={0}
+                          max={line.remainingQuantity}
+                          step={1}
+                          value={receiptQuantities[line.id] ?? 0}
+                          onChange={(event) => updateReceiptQuantity(line.id, 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>
+                    </div>
+                  ))}
+                </div>
+                <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">{receiptStatus}</span>
+                  <button
+                    type="submit"
+                    disabled={isSavingReceipt || locationOptions.length === 0}
+                    className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    {isSavingReceipt ? "Posting..." : "Post receipt"}
+                  </button>
+                </div>
+              </form>
+            )}
+          </article>
+        ) : null}
+        <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">Receipt History</p>
+          <h4 className="mt-2 text-lg font-bold text-text">Received material log</h4>
+          {activeDocument.receipts.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 purchase receipts have been recorded for this order yet.
+            </div>
+          ) : (
+            <div className="mt-6 space-y-3">
+              {activeDocument.receipts.map((receipt) => (
+                <article key={receipt.id} className="rounded-3xl border border-line/70 bg-page/60 p-3">
+                  <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+                    <div>
+                      <div className="text-sm font-semibold text-text">{receipt.receiptNumber}</div>
+                      <div className="mt-1 text-xs text-muted">
+                        {receipt.warehouseCode} / {receipt.locationCode} · {receipt.totalQuantity} units across {receipt.lineCount} line{receipt.lineCount === 1 ? "" : "s"}
+                      </div>
+                      <div className="mt-2 text-xs text-muted">
+                        {receipt.warehouseName} · {receipt.locationName}
+                      </div>
+                      <div className="mt-3 space-y-1">
+                        {receipt.lines.map((line) => (
+                          <div key={line.id} className="text-sm text-text">
+                            <span className="font-semibold">{line.itemSku}</span> · {line.quantity}
+                          </div>
+                        ))}
+                      </div>
+                      {receipt.notes ? <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{receipt.notes}</p> : null}
+                    </div>
+                    <div className="text-sm text-muted lg:text-right">
+                      <div>{new Date(receipt.receivedAt).toLocaleDateString()}</div>
+                      <div className="mt-1">{receipt.createdByName}</div>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+        </article>
+      </section>
       <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/purchasing/config.ts

@@ -1,4 +1,5 @@
 import type { PurchaseOrderInput, PurchaseOrderStatus } from "@mrp/shared";
+import type { PurchaseReceiptInput } from "@mrp/shared/dist/purchasing/types.js";
 
 export const purchaseStatusOptions: Array<{ value: PurchaseOrderStatus; label: string }> = [
   { value: "DRAFT", label: "Draft" },
@@ -28,3 +29,11 @@ export const emptyPurchaseOrderInput: PurchaseOrderInput = {
   notes: "",
   lines: [],
 };
+
+export const emptyPurchaseReceiptInput: PurchaseReceiptInput = {
+  receivedAt: new Date().toISOString(),
+  warehouseId: "",
+  locationId: "",
+  notes: "",
+  lines: [],
+};