93 lines
4.6 KiB
TypeScript
93 lines
4.6 KiB
TypeScript
import { createPurchaseOrder, receivePurchaseOrder } from "@/lib/actions";
|
|
import { formatCurrency, formatDate } from "@/lib/format";
|
|
import { getLowStockParts, getPurchaseOrders, getVendors } from "@/lib/repository";
|
|
|
|
export default function PurchaseOrdersPage() {
|
|
const vendors = getVendors();
|
|
const orders = getPurchaseOrders();
|
|
const lowStockParts = getLowStockParts();
|
|
|
|
return (
|
|
<div className="grid">
|
|
<section className="two-up">
|
|
<article className="panel">
|
|
<h2 className="section-title">Create Purchase Order</h2>
|
|
<p className="section-copy">Enter one line per row as `SKU,quantity,unit cost`.</p>
|
|
<form action={createPurchaseOrder} className="form-grid">
|
|
<div className="form-row">
|
|
<label htmlFor="vendorCode">Vendor Code</label>
|
|
<select className="select" id="vendorCode" name="vendorCode">
|
|
{vendors.map((vendor) => <option key={vendor.id} value={vendor.code}>{vendor.code} - {vendor.name}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="form-row"><label htmlFor="purchase-lines">Line Items</label><textarea className="textarea" id="purchase-lines" name="lines" placeholder={"PART-001,10,31.50\nPART-002,24,6.25"} required /></div>
|
|
<div className="form-row"><label htmlFor="purchase-notes">Notes</label><textarea className="textarea" id="purchase-notes" name="notes" /></div>
|
|
<button className="button" type="submit">Save Purchase Order</button>
|
|
</form>
|
|
</article>
|
|
<article className="panel">
|
|
<h2 className="section-title">Receiving Flow</h2>
|
|
<p className="section-copy">Leave line quantities blank to receive the remaining balance, or enter `SKU,quantity` rows for a partial receipt.</p>
|
|
<div className="table-wrap">
|
|
<table className="table">
|
|
<thead><tr><th>Order</th><th>Vendor</th><th>Status</th><th>Total</th><th>Qty Progress</th><th>Created</th><th>Action</th></tr></thead>
|
|
<tbody>
|
|
{orders.length === 0 ? (
|
|
<tr><td colSpan={7} className="muted">No purchase orders yet.</td></tr>
|
|
) : (
|
|
orders.map((order) => (
|
|
<tr key={order.id}>
|
|
<td>{order.orderNumber}</td>
|
|
<td>{order.vendorName}</td>
|
|
<td><span className={`pill ${order.status === "received" ? "" : "warning"}`}>{order.status}</span></td>
|
|
<td>{formatCurrency(order.totalAmount)}</td>
|
|
<td>{order.fulfilledQuantity} / {order.orderedQuantity}</td>
|
|
<td>{formatDate(order.createdAt)}</td>
|
|
<td>
|
|
{order.status === "received" ? (
|
|
<span className="muted">Received</span>
|
|
) : (
|
|
<form action={receivePurchaseOrder} className="form-grid">
|
|
<input type="hidden" name="orderId" value={order.id} />
|
|
<textarea className="textarea" name="lines" placeholder={"PART-001,4\nPART-002,10"} />
|
|
<button className="button secondary" type="submit">Receive</button>
|
|
</form>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section className="panel">
|
|
<h2 className="section-title">Restock Recommendations</h2>
|
|
<p className="section-copy">Use this list to plan the next purchase order from items already below target.</p>
|
|
<div className="table-wrap">
|
|
<table className="table">
|
|
<thead><tr><th>SKU</th><th>Name</th><th>On Hand</th><th>Reorder Point</th><th>Suggested Qty</th><th>Last Vendor</th></tr></thead>
|
|
<tbody>
|
|
{lowStockParts.length === 0 ? (
|
|
<tr><td colSpan={6} className="muted">No parts currently need restocking.</td></tr>
|
|
) : (
|
|
lowStockParts.map((part) => (
|
|
<tr key={part.id}>
|
|
<td>{part.sku}</td>
|
|
<td>{part.name}</td>
|
|
<td>{part.quantityOnHand} {part.unitOfMeasure}</td>
|
|
<td>{part.reorderPoint}</td>
|
|
<td>{part.suggestedReorderQuantity}</td>
|
|
<td>{part.preferredVendorName || "-"}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|