jason/mrp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
jason
2026-03-18 22:44:01 -05:00
parent 1e408d5316
commit dc07bfc8e0
8 changed files with 148 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -26,6 +26,9 @@ This file is the running release and change log for CODEXIUM. Keep it updated wh
- UI density standardization pass across app shell, dashboard, finance, project detail, manufacturing detail, and admin surfaces, including tighter panel spacing, more compact shell/navigation spacing, and removal of redundant explanatory subcopy in favor of concise uppercase section labels - UI density standardization pass across app shell, dashboard, finance, project detail, manufacturing detail, and admin surfaces, including tighter panel spacing, more compact shell/navigation spacing, and removal of redundant explanatory subcopy in favor of concise uppercase section labels
- Continued density standardization across CRM, inventory, sales, purchasing, and shipping list/detail surfaces so module headers, filter bars, and status panels follow the same tighter uppercase operational pattern - Continued density standardization across CRM, inventory, sales, purchasing, and shipping list/detail surfaces so module headers, filter bars, and status panels follow the same tighter uppercase operational pattern
- Continued density standardization across CRM, sales, purchasing, shipping, manufacturing, and project form/detail headers so editor and record surfaces now follow the same compact uppercase pattern with less redundant helper copy - Continued density standardization across CRM, sales, purchasing, shipping, manufacturing, and project form/detail headers so editor and record surfaces now follow the same compact uppercase pattern with less redundant helper copy
- Continued density standardization across CRM detail internals and inventory item editing so secondary cards, timeline/history panels, thumbnail panels, BOM/routing editors, and empty states use the tighter shared surface treatment with less filler copy
- Continued density standardization across inventory detail transaction/transfer/reservation surfaces, and fixed item-editor navigation controls so SKU master and cancel actions navigate reliably from the create-item form
- Continued density standardization across sales, purchasing, shipping, and manufacturing editor internals, and standardized form-header cancel actions onto button-driven navigation to avoid in-form route-transition edge cases
- Project-side milestone and work-order rollups surfaced on project list and detail pages - Project-side milestone and work-order rollups surfaced on project list and detail pages
- Inventory SKU master builder with family-level sequence codes, branch-aware taxonomy management, and generated SKU previews on the item form - Inventory SKU master builder with family-level sequence codes, branch-aware taxonomy management, and generated SKU previews on the item form
- Thumbnail image attachment staging on inventory item create/edit pages, with upload-on-save and replacement/removal support - Thumbnail image attachment staging on inventory item create/edit pages, with upload-on-save and replacement/removal support

49
client/src/modules/crm/CrmDetailPage.tsx
View File

@@ -216,31 +216,30 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
) : null} ) : null}
</article> </article>
</div> </div>
<section className="grid gap-3 xl:grid-cols-4"> <section className="grid gap-2 xl:grid-cols-4">
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Last Contact</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Last Contact</p>
<div className="mt-2 text-base font-bold text-text"> <div className="mt-2 text-base font-bold text-text">
{record.rollups?.lastContactAt ? new Date(record.rollups.lastContactAt).toLocaleDateString() : "None"} {record.rollups?.lastContactAt ? new Date(record.rollups.lastContactAt).toLocaleDateString() : "None"}
</div> </div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Timeline Entries</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Timeline Entries</p>
<div className="mt-2 text-base font-bold text-text">{record.rollups?.contactHistoryCount ?? record.contactHistory.length}</div> <div className="mt-2 text-base font-bold text-text">{record.rollups?.contactHistoryCount ?? record.contactHistory.length}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account Contacts</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account Contacts</p>
<div className="mt-2 text-base font-bold text-text">{record.rollups?.contactCount ?? record.contacts?.length ?? 0}</div> <div className="mt-2 text-base font-bold text-text">{record.rollups?.contactCount ?? record.contacts?.length ?? 0}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Attachments</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Attachments</p>
<div className="mt-2 text-base font-bold text-text">{record.rollups?.attachmentCount ?? 0}</div> <div className="mt-2 text-base font-bold text-text">{record.rollups?.attachmentCount ?? 0}</div>
</article> </article>
</section> </section>
{entity === "customer" && (record.childCustomers?.length ?? 0) > 0 ? ( {entity === "customer" && (record.childCustomers?.length ?? 0) > 0 ? (
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Hierarchy</p> <p className="section-kicker">HIERARCHY</p>
<h4 className="mt-2 text-lg font-bold text-text">End customers under this reseller</h4> <div className="mt-3 grid gap-2 xl:grid-cols-2 2xl:grid-cols-3">
<div className="mt-5 grid gap-3 xl:grid-cols-2 2xl:grid-cols-3">
{record.childCustomers?.map((child) => ( {record.childCustomers?.map((child) => (
<Link <Link
key={child.id} key={child.id}
@@ -257,11 +256,10 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
</section> </section>
) : null} ) : null}
{entity === "vendor" ? ( {entity === "vendor" ? (
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Purchasing Activity</p> <p className="section-kicker">PURCHASING ACTIVITY</p>
<h4 className="mt-2 text-lg font-bold text-text">Recent purchase orders</h4>
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{canManage ? ( {canManage ? (
@@ -275,15 +273,15 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
</div> </div>
</div> </div>
{relatedPurchaseOrders.length === 0 ? ( {relatedPurchaseOrders.length === 0 ? (
<div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No purchase orders exist for this vendor yet.</div> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">No purchase orders yet.</div>
) : ( ) : (
<div className="mt-6 space-y-3"> <div className="mt-3 space-y-2">
{relatedPurchaseOrders.slice(0, 8).map((order) => ( {relatedPurchaseOrders.slice(0, 8).map((order) => (
<Link key={order.id} to={`/purchasing/orders/${order.id}`} className="block rounded-[18px] border border-line/70 bg-page/60 p-3 transition hover:bg-page/80"> <Link key={order.id} to={`/purchasing/orders/${order.id}`} className="block rounded-[18px] border border-line/70 bg-page/60 p-3 transition hover:bg-page/80">
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap items-center justify-between gap-3">
<div> <div>
<div className="font-semibold text-text">{order.documentNumber}</div> <div className="font-semibold text-text">{order.documentNumber}</div>
<div className="mt-1 text-xs text-muted">{new Date(order.issueDate).toLocaleDateString()} · {order.lineCount} lines</div> <div className="mt-1 text-xs text-muted">{new Date(order.issueDate).toLocaleDateString()} - {order.lineCount} lines</div>
</div> </div>
<div className="text-sm font-semibold text-text">${order.total.toFixed(2)}</div> <div className="text-sm font-semibold text-text">${order.total.toFixed(2)}</div>
</div> </div>
@@ -317,13 +315,9 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
/> />
<section className="grid gap-3 2xl:grid-cols-[minmax(360px,0.88fr)_minmax(0,1.12fr)]"> <section className="grid gap-3 2xl:grid-cols-[minmax(360px,0.88fr)_minmax(0,1.12fr)]">
{canManage ? ( {canManage ? (
<article className="min-w-0 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <article className="surface-panel min-w-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact History</p> <p className="section-kicker">CONTACT HISTORY</p>
<h4 className="mt-2 text-lg font-bold text-text">Add timeline entry</h4> <div className="mt-3">
<p className="mt-2 text-sm text-muted">
Record calls, emails, meetings, and follow-up notes directly against this account.
</p>
<div className="mt-6">
<CrmContactEntryForm <CrmContactEntryForm
form={contactEntryForm} form={contactEntryForm}
isSaving={isSavingContactEntry} isSaving={isSavingContactEntry}
@@ -334,15 +328,14 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
</div> </div>
</article> </article>
) : null} ) : null}
<article className="min-w-0 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <article className="surface-panel min-w-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timeline</p> <p className="section-kicker">TIMELINE</p>
<h4 className="mt-2 text-lg font-bold text-text">Recent interactions</h4>
{record.contactHistory.length === 0 ? ( {record.contactHistory.length === 0 ? (
<div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted"> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
No contact history has been recorded for this account yet. No contact history recorded yet.
</div> </div>
) : ( ) : (
<div className="mt-6 space-y-3"> <div className="mt-3 space-y-2">
{record.contactHistory.map((entry) => ( {record.contactHistory.map((entry) => (
<article key={entry.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <article key={entry.id} className="rounded-[18px] 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 className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">

66
client/src/modules/inventory/InventoryDetailPage.tsx
View File

@@ -334,32 +334,32 @@ export function InventoryDetailPage() {
</div> </div>
</div> </div>
<section className="grid gap-3 xl:grid-cols-7"> <section className="grid gap-2 xl:grid-cols-7">
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">On Hand</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">On Hand</p>
<div className="mt-2 text-base font-bold text-text">{item.onHandQuantity}</div> <div className="mt-2 text-base font-bold text-text">{item.onHandQuantity}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reserved</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reserved</p>
<div className="mt-2 text-base font-bold text-text">{item.reservedQuantity}</div> <div className="mt-2 text-base font-bold text-text">{item.reservedQuantity}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Available</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Available</p>
<div className="mt-2 text-base font-bold text-text">{item.availableQuantity}</div> <div className="mt-2 text-base font-bold text-text">{item.availableQuantity}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Stock Locations</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Stock Locations</p>
<div className="mt-2 text-base font-bold text-text">{item.stockBalances.length}</div> <div className="mt-2 text-base font-bold text-text">{item.stockBalances.length}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Transactions</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Transactions</p>
<div className="mt-2 text-base font-bold text-text">{item.recentTransactions.length}</div> <div className="mt-2 text-base font-bold text-text">{item.recentTransactions.length}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Transfers</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Transfers</p>
<div className="mt-2 text-base font-bold text-text">{item.transfers.length}</div> <div className="mt-2 text-base font-bold text-text">{item.transfers.length}</div>
</article> </article>
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"> <article className="surface-panel-tight">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reservations</p> <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reservations</p>
<div className="mt-2 text-base font-bold text-text">{item.reservations.length}</div> <div className="mt-2 text-base font-bold text-text">{item.reservations.length}</div>
</article> </article>
@@ -418,7 +418,7 @@ export function InventoryDetailPage() {
<article className="surface-panel"> <article className="surface-panel">
<p className="section-kicker">STOCK BY LOCATION</p> <p className="section-kicker">STOCK BY LOCATION</p>
{item.stockBalances.length === 0 ? ( {item.stockBalances.length === 0 ? (
<p className="mt-3 text-sm text-muted">No stock or reservation balances have been posted for this item yet.</p> <p className="mt-3 text-sm text-muted">No stock or reservation balances posted yet.</p>
) : ( ) : (
<div className="mt-3 space-y-2"> <div className="mt-3 space-y-2">
{item.stockBalances.map((balance) => ( {item.stockBalances.map((balance) => (
@@ -444,9 +444,9 @@ export function InventoryDetailPage() {
<section className="grid gap-3 xl:grid-cols-2"> <section className="grid gap-3 xl:grid-cols-2">
{canManage ? ( {canManage ? (
<form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleTransactionSubmit}> <form className="surface-panel" onSubmit={handleTransactionSubmit}>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Stock Transactions</p> <p className="section-kicker">STOCK TRANSACTIONS</p>
<div className="mt-5 grid gap-3"> <div className="mt-3 grid gap-3">
<div className="grid gap-3 xl:grid-cols-2"> <div className="grid gap-3 xl:grid-cols-2">
<label className="block"> <label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Transaction type</span> <span className="mb-2 block text-sm font-semibold text-text">Transaction type</span>
@@ -496,14 +496,14 @@ export function InventoryDetailPage() {
</div> </div>
</form> </form>
) : null} ) : null}
<article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <article className="surface-panel">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Recent Movements</p> <p className="section-kicker">RECENT MOVEMENTS</p>
{item.recentTransactions.length === 0 ? ( {item.recentTransactions.length === 0 ? (
<div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted"> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
No stock transactions have been recorded for this item yet. No stock transactions recorded yet.
</div> </div>
) : ( ) : (
<div className="mt-6 space-y-3"> <div className="mt-3 space-y-2">
{item.recentTransactions.map((transaction) => ( {item.recentTransactions.map((transaction) => (
<article key={transaction.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <article key={transaction.id} className="rounded-[18px] 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 className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
@@ -535,9 +535,9 @@ export function InventoryDetailPage() {
{canManage ? ( {canManage ? (
<section className="grid gap-3 xl:grid-cols-2"> <section className="grid gap-3 xl:grid-cols-2">
<form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleTransferSubmit}> <form className="surface-panel" onSubmit={handleTransferSubmit}>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory Transfer</p> <p className="section-kicker">INVENTORY TRANSFER</p>
<div className="mt-5 grid gap-3"> <div className="mt-3 grid gap-3">
<label className="block"> <label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Quantity</span> <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
<input type="number" min={1} step={1} value={transferForm.quantity} onChange={(event) => updateTransferField("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" /> <input type="number" min={1} step={1} value={transferForm.quantity} onChange={(event) => updateTransferField("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" />
@@ -588,9 +588,9 @@ export function InventoryDetailPage() {
</div> </div>
</div> </div>
</form> </form>
<form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleReservationSubmit}> <form className="surface-panel" onSubmit={handleReservationSubmit}>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manual Reservation</p> <p className="section-kicker">MANUAL RESERVATION</p>
<div className="mt-5 grid gap-3"> <div className="mt-3 grid gap-3">
<label className="block"> <label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Quantity</span> <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
<input type="number" min={1} step={1} value={reservationForm.quantity} onChange={(event) => setReservationForm((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" /> <input type="number" min={1} step={1} value={reservationForm.quantity} onChange={(event) => setReservationForm((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" />
@@ -629,14 +629,14 @@ export function InventoryDetailPage() {
) : null} ) : null}
<section className="grid gap-3 xl:grid-cols-2"> <section className="grid gap-3 xl:grid-cols-2">
<article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <article className="surface-panel">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Reservations</p> <p className="section-kicker">RESERVATIONS</p>
{item.reservations.length === 0 ? ( {item.reservations.length === 0 ? (
<div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted"> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
No reservations have been recorded for this item. No reservations recorded.
</div> </div>
) : ( ) : (
<div className="mt-5 space-y-3"> <div className="mt-3 space-y-2">
{item.reservations.map((reservation) => ( {item.reservations.map((reservation) => (
<article key={reservation.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <article key={reservation.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
@@ -655,14 +655,14 @@ export function InventoryDetailPage() {
</div> </div>
)} )}
</article> </article>
<article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <article className="surface-panel">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Transfers</p> <p className="section-kicker">TRANSFERS</p>
{item.transfers.length === 0 ? ( {item.transfers.length === 0 ? (
<div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted"> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
No transfers have been recorded for this item. No transfers recorded.
</div> </div>
) : ( ) : (
<div className="mt-5 space-y-3"> <div className="mt-3 space-y-2">
{item.transfers.map((transfer) => ( {item.transfers.map((transfer) => (
<article key={transfer.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <article key={transfer.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">

78
client/src/modules/inventory/InventoryFormPage.tsx
View File

@@ -11,7 +11,7 @@ import type {
} from "@mrp/shared/dist/inventory/types.js"; } from "@mrp/shared/dist/inventory/types.js";
import type { ManufacturingStationDto } from "@mrp/shared"; import type { ManufacturingStationDto } from "@mrp/shared";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog"; import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
import { useAuth } from "../../auth/AuthProvider"; import { useAuth } from "../../auth/AuthProvider";
@@ -444,41 +444,48 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
} }
} }
function openSkuMaster() {
navigate("/inventory/sku-master");
}
function closeEditor() {
navigate(mode === "create" ? "/inventory/items" : `/inventory/items/${itemId}`);
}
return ( return (
<form className="space-y-6" onSubmit={handleSubmit}> <form className="page-stack" onSubmit={handleSubmit}>
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory Editor</p> <p className="section-kicker">INVENTORY EDITOR</p>
<h3 className="mt-2 text-xl font-bold text-text">{mode === "create" ? "New Item" : "Edit Item"}</h3> <h3 className="module-title">{mode === "create" ? "NEW ITEM" : "EDIT ITEM"}</h3>
<p className="mt-2 max-w-2xl text-sm text-muted">
Define item master data and the first revision of the bill of materials for assemblies and manufactured items.
</p>
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
<Link <button
to="/inventory/sku-master" type="button"
onClick={openSkuMaster}
className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text"
> >
SKU master SKU master
</Link> </button>
<Link <button
to={mode === "create" ? "/inventory/items" : `/inventory/items/${itemId}`} type="button"
onClick={closeEditor}
className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text"
> >
Cancel Cancel
</Link> </button>
</div> </div>
</div> </div>
</section> </section>
<section className="space-y-4 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel space-y-3">
<div className="grid gap-3 xl:grid-cols-2 2xl:grid-cols-4"> <div className="grid gap-3 xl:grid-cols-2 2xl:grid-cols-4">
<div className="block 2xl:col-span-2"> <div className="block 2xl:col-span-2">
<div className="mb-2 flex items-center justify-between gap-2"> <div className="mb-2 flex items-center justify-between gap-2">
<span className="block text-sm font-semibold text-text">SKU builder</span> <span className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">SKU BUILDER</span>
<Link to="/inventory/sku-master" className="text-xs font-semibold text-brand"> <button type="button" onClick={openSkuMaster} className="text-xs font-semibold text-brand">
Manage SKU tree Manage SKU tree
</Link> </button>
</div> </div>
<div className="space-y-3 rounded-[18px] border border-line/70 bg-page/70 p-3"> <div className="space-y-3 rounded-[18px] border border-line/70 bg-page/70 p-3">
<label className="block"> <label className="block">
@@ -593,7 +600,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
</div> </div>
</div> </div>
<div className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
<div className="text-sm font-semibold text-text">Thumbnail attachment</div> <div className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Thumbnail attachment</div>
<div className="mt-2 text-sm text-muted"> <div className="mt-2 text-sm text-muted">
{pendingThumbnailFile {pendingThumbnailFile
? `${pendingThumbnailFile.name} will upload when you save this item.` ? `${pendingThumbnailFile.name} will upload when you save this item.`
@@ -603,9 +610,6 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
? `${thumbnailAttachment.originalName} is attached as the current item thumbnail.` ? `${thumbnailAttachment.originalName} is attached as the current item thumbnail.`
: "Attach a product image, render, or reference photo for this item."} : "Attach a product image, render, or reference photo for this item."}
</div> </div>
<div className="mt-3 text-xs text-muted">
Supported by the existing file-attachment system. The thumbnail is stored separately from general item documents so the item editor can treat it as the primary visual.
</div>
</div> </div>
</div> </div>
<div className="grid gap-3 xl:grid-cols-4"> <div className="grid gap-3 xl:grid-cols-4">
@@ -654,7 +658,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
<div className="grid gap-3 sm:grid-cols-2"> <div className="grid gap-3 sm:grid-cols-2">
<label className="flex items-center gap-3 rounded-2xl border border-line/70 bg-page px-2 py-2"> <label className="flex items-center gap-3 rounded-2xl border border-line/70 bg-page px-2 py-2">
<input type="checkbox" checked={form.isSellable} onChange={(event) => updateField("isSellable", event.target.checked)} /> <input type="checkbox" checked={form.isSellable} onChange={(event) => updateField("isSellable", event.target.checked)} />
<span className="text-sm font-semibold text-text">Sellable</span> <span className="text-sm font-semibold uppercase tracking-[0.08em] text-text">Sellable</span>
</label> </label>
<label className="flex items-center gap-3 rounded-2xl border border-line/70 bg-page px-2 py-2"> <label className="flex items-center gap-3 rounded-2xl border border-line/70 bg-page px-2 py-2">
<input <input
@@ -662,7 +666,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
checked={form.isPurchasable} checked={form.isPurchasable}
onChange={(event) => updateField("isPurchasable", event.target.checked)} onChange={(event) => updateField("isPurchasable", event.target.checked)}
/> />
<span className="text-sm font-semibold text-text">Purchasable</span> <span className="text-sm font-semibold uppercase tracking-[0.08em] text-text">Purchasable</span>
</label> </label>
</div> </div>
</div> </div>
@@ -733,7 +737,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
) : null} ) : null}
</div> </div>
<div className="mt-2 text-xs text-muted"> <div className="mt-2 text-xs text-muted">
{form.preferredVendorId ? getSelectedVendorName(form.preferredVendorId) : "Demand planning uses this vendor when creating buy recommendations."} {form.preferredVendorId ? getSelectedVendorName(form.preferredVendorId) : "Used as the default buy source."}
</div> </div>
</label> </label>
<label className="block"> <label className="block">
@@ -756,23 +760,22 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
</label> </label>
</section> </section>
{form.type === "ASSEMBLY" || form.type === "MANUFACTURED" ? ( {form.type === "ASSEMBLY" || form.type === "MANUFACTURED" ? (
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing Routing</p> <p className="section-kicker">MANUFACTURING ROUTING</p>
<h4 className="mt-2 text-lg font-bold text-text">Station and time template</h4> <h4 className="text-lg font-bold text-text">STATION AND TIME TEMPLATE</h4>
<p className="mt-2 text-sm text-muted">These operations are copied automatically into work orders and feed the planning workbench without manual planner task entry.</p>
</div> </div>
<button type="button" onClick={addOperation} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text"> <button type="button" onClick={addOperation} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
Add operation Add operation
</button> </button>
</div> </div>
{form.operations.length === 0 ? ( {form.operations.length === 0 ? (
<div className="mt-5 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted"> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
Add at least one station operation for this buildable item. Add at least one station operation for this buildable item.
</div> </div>
) : ( ) : (
<div className="mt-5 space-y-4"> <div className="mt-3 space-y-3">
{form.operations.map((operation, index) => ( {form.operations.map((operation, index) => (
<div key={`${operation.stationId}-${operation.position}-${index}`} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <div key={`${operation.stationId}-${operation.position}-${index}`} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
<div className="grid gap-3 xl:grid-cols-[1.2fr_0.55fr_0.7fr_0.55fr_0.55fr_auto]"> <div className="grid gap-3 xl:grid-cols-[1.2fr_0.55fr_0.7fr_0.55fr_0.55fr_auto]">
@@ -823,12 +826,11 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
)} )}
</section> </section>
) : null} ) : null}
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Bill Of Materials</p> <p className="section-kicker">BILL OF MATERIALS</p>
<h4 className="mt-2 text-lg font-bold text-text">Component lines</h4> <h4 className="text-lg font-bold text-text">COMPONENT LINES</h4>
<p className="mt-2 text-sm text-muted">Add BOM components for manufactured or assembly items. Purchased and service items can be saved without BOM lines.</p>
</div> </div>
<button <button
type="button" type="button"
@@ -839,11 +841,11 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
</button> </button>
</div> </div>
{form.bomLines.length === 0 ? ( {form.bomLines.length === 0 ? (
<div className="mt-5 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted"> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
No BOM lines added yet. No BOM lines added yet.
</div> </div>
) : ( ) : (
<div className="mt-5 space-y-4"> <div className="mt-3 space-y-3">
{form.bomLines.map((line, index) => ( {form.bomLines.map((line, index) => (
<div key={`${line.componentItemId}-${line.position}-${index}`} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <div key={`${line.componentItemId}-${line.position}-${index}`} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
<div className="grid gap-3 xl:grid-cols-[1.4fr_0.7fr_0.7fr_0.7fr_auto]"> <div className="grid gap-3 xl:grid-cols-[1.4fr_0.7fr_0.7fr_0.7fr_auto]">
@@ -974,7 +976,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
))} ))}
</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"> <div className="mt-4 flex flex-col gap-2 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> <span className="min-w-0 text-sm text-muted">{status}</span>
<button <button
type="submit" type="submit"

27
client/src/modules/manufacturing/WorkOrderFormPage.tsx
View File

@@ -5,7 +5,7 @@ import type {
} from "@mrp/shared"; } from "@mrp/shared";
import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js"; import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom"; import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { useAuth } from "../../auth/AuthProvider"; import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api"; import { api, ApiError } from "../../lib/api";
@@ -137,21 +137,24 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
} }
} }
function closeEditor() {
navigate(mode === "create" ? "/manufacturing/work-orders" : `/manufacturing/work-orders/${workOrderId}`);
}
return ( return (
<form className="space-y-6" onSubmit={handleSubmit}> <form className="page-stack" onSubmit={handleSubmit}>
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing Editor</p> <p className="section-kicker">MANUFACTURING EDITOR</p>
<h3 className="mt-2 text-xl font-bold text-text">{mode === "create" ? "New Work Order" : "Edit Work Order"}</h3> <h3 className="module-title">{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> </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"> <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
Cancel Cancel
</Link> </button>
</div> </div>
</section> </section>
<section className="space-y-4 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel space-y-3">
<div className="grid gap-3 xl:grid-cols-2"> <div className="grid gap-3 xl:grid-cols-2">
<label className="block"> <label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Build Item</span> <span className="mb-2 block text-sm font-semibold text-text">Build Item</span>
@@ -195,7 +198,7 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
setItemPickerOpen(false); 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"> }} 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="font-semibold text-text">{option.sku}</div>
<div className="mt-1 text-xs text-muted">{option.name} · {option.type} · {option.operationCount} ops</div> <div className="mt-1 text-xs text-muted">{option.name} - {option.type} - {option.operationCount} ops</div>
</button> </button>
))} ))}
</div> </div>
@@ -252,7 +255,7 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
setProjectPickerOpen(false); 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"> }} 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="font-semibold text-text">{option.projectNumber}</div>
<div className="mt-1 text-xs text-muted">{option.name} · {option.customerName}</div> <div className="mt-1 text-xs text-muted">{option.name} - {option.customerName}</div>
</button> </button>
))} ))}
</div> </div>
@@ -294,7 +297,7 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
<span className="mb-2 block text-sm font-semibold text-text">Work instructions / notes</span> <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-[18px] border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" /> <textarea value={form.notes} onChange={(event) => updateField("notes", event.target.value)} rows={5} className="w-full rounded-[18px] border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
</label> </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"> <div className="flex flex-col gap-2 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> <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"> <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"} {isSaving ? "Saving..." : mode === "create" ? "Create work order" : "Save changes"}

31
client/src/modules/purchasing/PurchaseFormPage.tsx
View File

@@ -1,6 +1,6 @@
import type { InventoryItemOptionDto, PurchaseLineInput, PurchaseOrderInput, PurchaseVendorOptionDto, SalesOrderPlanningDto, SalesOrderPlanningNodeDto } from "@mrp/shared"; import type { InventoryItemOptionDto, PurchaseLineInput, PurchaseOrderInput, PurchaseVendorOptionDto, SalesOrderPlanningDto, SalesOrderPlanningNodeDto } from "@mrp/shared";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom"; import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog"; import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
import { useAuth } from "../../auth/AuthProvider"; import { useAuth } from "../../auth/AuthProvider";
@@ -263,6 +263,10 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
return vendor.name.toLowerCase().includes(query) || vendor.email.toLowerCase().includes(query); return vendor.name.toLowerCase().includes(query) || vendor.email.toLowerCase().includes(query);
}).length; }).length;
function closeEditor() {
navigate(mode === "create" ? "/purchasing/orders" : `/purchasing/orders/${orderId}`);
}
return ( return (
<form className="page-stack" onSubmit={handleSubmit}> <form className="page-stack" onSubmit={handleSubmit}>
<section className="surface-panel"> <section className="surface-panel">
@@ -271,9 +275,9 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
<p className="section-kicker">PURCHASING EDITOR</p> <p className="section-kicker">PURCHASING EDITOR</p>
<h3 className="module-title">{mode === "create" ? "New Purchase Order" : "Edit Purchase Order"}</h3> <h3 className="module-title">{mode === "create" ? "New Purchase Order" : "Edit Purchase Order"}</h3>
</div> </div>
<Link to={mode === "create" ? "/purchasing/orders" : `/purchasing/orders/${orderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text"> <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
Cancel Cancel
</Link> </button>
</div> </div>
</section> </section>
<section className="space-y-3 surface-panel"> <section className="space-y-3 surface-panel">
@@ -352,18 +356,13 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
<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" /> <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> </label>
</div> </div>
<div className="rounded-[18px] border border-line/70 bg-page/60 px-3 py-3 text-sm"> <div className="rounded-[18px] border border-line/70 bg-page/60 px-2 py-2 text-sm">
<div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Linked Project</div> <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Linked Project</div>
<div className="mt-2 font-semibold text-text"> <div className="mt-2 font-semibold text-text">
{mode === "edit" {mode === "edit"
? (form.projectId ? "Project context saved on this purchase order." : "No project linked.") ? (form.projectId ? "Project context saved on this purchase order." : "No project linked.")
: (seededProjectId ? `${seededProjectNumber || "Project"}${seededProjectName ? ` - ${seededProjectName}` : ""}` : "Will auto-link from sales-order demand when possible.")} : (seededProjectId ? `${seededProjectNumber || "Project"}${seededProjectName ? ` - ${seededProjectName}` : ""}` : "Will auto-link from sales-order demand when possible.")}
</div> </div>
<div className="mt-1 text-xs text-muted">
{mode === "edit"
? "This header link is used for downstream project cockpit and finance rollups."
: "Generated purchasing from a project-linked sales order will carry project context automatically."}
</div>
</div> </div>
<label className="block"> <label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Notes</span> <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
@@ -391,18 +390,18 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
</label> </label>
</div> </div>
</section> </section>
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Line Items</p> <p className="section-kicker">LINE ITEMS</p>
<h4 className="mt-2 text-lg font-bold text-text">Procurement lines</h4> <h4 className="text-lg font-bold text-text">PROCUREMENT LINES</h4>
</div> </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> <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> </div>
{form.lines.length === 0 ? ( {form.lines.length === 0 ? (
<div className="mt-5 rounded-[18px] 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-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">No line items added yet.</div>
) : ( ) : (
<div className="mt-5 space-y-4"> <div className="mt-3 space-y-3">
{form.lines.map((line: PurchaseLineInput, index: number) => ( {form.lines.map((line: PurchaseLineInput, index: number) => (
<div key={index} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <div key={index} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
<div className="grid gap-3 xl:grid-cols-[1.15fr_1.25fr_0.5fr_0.55fr_0.7fr_0.75fr_auto]"> <div className="grid gap-3 xl:grid-cols-[1.15fr_1.25fr_0.5fr_0.55fr_0.7fr_0.75fr_auto]">
@@ -478,13 +477,13 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
))} ))}
</div> </div>
)} )}
<div className="mt-5 grid gap-3 md:grid-cols-3 xl:grid-cols-4"> <div className="mt-4 grid gap-2 md:grid-cols-3 xl:grid-cols-4">
<div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Subtotal</div><div className="mt-1 font-semibold text-text">${subtotal.toFixed(2)}</div></div> <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Subtotal</div><div className="mt-1 font-semibold text-text">${subtotal.toFixed(2)}</div></div>
<div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Tax</div><div className="mt-1 font-semibold text-text">${taxAmount.toFixed(2)}</div></div> <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Tax</div><div className="mt-1 font-semibold text-text">${taxAmount.toFixed(2)}</div></div>
<div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Freight</div><div className="mt-1 font-semibold text-text">${form.freightAmount.toFixed(2)}</div></div> <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Freight</div><div className="mt-1 font-semibold text-text">${form.freightAmount.toFixed(2)}</div></div>
<div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Total</div><div className="mt-1 font-semibold text-text">${total.toFixed(2)}</div></div> <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Total</div><div className="mt-1 font-semibold text-text">${total.toFixed(2)}</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"> <div className="mt-4 flex flex-col gap-2 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> <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"> <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 purchase order" : "Save changes"} {isSaving ? "Saving..." : mode === "create" ? "Create purchase order" : "Save changes"}

24
client/src/modules/sales/SalesFormPage.tsx
View File

@@ -1,7 +1,7 @@
import type { InventoryItemOptionDto } from "@mrp/shared/dist/inventory/types.js"; import type { InventoryItemOptionDto } from "@mrp/shared/dist/inventory/types.js";
import type { SalesCustomerOptionDto, SalesDocumentDetailDto, SalesDocumentInput, SalesLineInput } from "@mrp/shared/dist/sales/types.js"; import type { SalesCustomerOptionDto, SalesDocumentDetailDto, SalesDocumentInput, SalesLineInput } from "@mrp/shared/dist/sales/types.js";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog"; import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
import { useAuth } from "../../auth/AuthProvider"; import { useAuth } from "../../auth/AuthProvider";
@@ -167,6 +167,10 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
} }
} }
function closeEditor() {
navigate(mode === "create" ? config.routeBase : `${config.routeBase}/${documentId}`);
}
return ( return (
<form className="page-stack" onSubmit={handleSubmit}> <form className="page-stack" onSubmit={handleSubmit}>
<section className="surface-panel"> <section className="surface-panel">
@@ -175,9 +179,9 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
<p className="section-kicker">{`${config.detailEyebrow} EDITOR`.toUpperCase()}</p> <p className="section-kicker">{`${config.detailEyebrow} EDITOR`.toUpperCase()}</p>
<h3 className="module-title">{mode === "create" ? `New ${config.singularLabel}` : `Edit ${config.singularLabel}`}</h3> <h3 className="module-title">{mode === "create" ? `New ${config.singularLabel}` : `Edit ${config.singularLabel}`}</h3>
</div> </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"> <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
Cancel Cancel
</Link> </button>
</div> </div>
</section> </section>
<section className="space-y-3 surface-panel"> <section className="space-y-3 surface-panel">
@@ -351,22 +355,22 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
</label> </label>
</div> </div>
</section> </section>
<section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5"> <section className="surface-panel">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div> <div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Line Items</p> <p className="section-kicker">LINE ITEMS</p>
<h4 className="mt-2 text-lg font-bold text-text">Commercial lines</h4> <h4 className="text-lg font-bold text-text">COMMERCIAL LINES</h4>
</div> </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"> <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 Add line
</button> </button>
</div> </div>
{form.lines.length === 0 ? ( {form.lines.length === 0 ? (
<div className="mt-5 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted"> <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
No line items added yet. No line items added yet.
</div> </div>
) : ( ) : (
<div className="mt-5 space-y-4"> <div className="mt-3 space-y-3">
{form.lines.map((line: SalesLineInput, index: number) => ( {form.lines.map((line: SalesLineInput, index: number) => (
<div key={index} className="rounded-[18px] border border-line/70 bg-page/60 p-3"> <div key={index} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
<div className="grid gap-3 xl:grid-cols-[1.15fr_1.25fr_0.5fr_0.55fr_0.7fr_0.75fr_auto]"> <div className="grid gap-3 xl:grid-cols-[1.15fr_1.25fr_0.5fr_0.55fr_0.7fr_0.75fr_auto]">
@@ -451,7 +455,7 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
))} ))}
</div> </div>
)} )}
<div className="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4"> <div className="mt-4 grid gap-2 md:grid-cols-2 xl:grid-cols-4">
<div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"> <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
<div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Subtotal</div> <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Subtotal</div>
<div className="mt-1 font-semibold text-text">${subtotal.toFixed(2)}</div> <div className="mt-1 font-semibold text-text">${subtotal.toFixed(2)}</div>
@@ -469,7 +473,7 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
<div className="mt-1 font-semibold text-text">${total.toFixed(2)}</div> <div className="mt-1 font-semibold text-text">${total.toFixed(2)}</div>
</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"> <div className="mt-4 flex flex-col gap-2 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> <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"> <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"} {isSaving ? "Saving..." : mode === "create" ? `Create ${config.singularLabel.toLowerCase()}` : "Save changes"}

10
client/src/modules/shipping/ShipmentFormPage.tsx
View File

@@ -1,6 +1,6 @@
import type { ShipmentInput, ShipmentOrderOptionDto } from "@mrp/shared/dist/shipping/types.js"; import type { ShipmentInput, ShipmentOrderOptionDto } from "@mrp/shared/dist/shipping/types.js";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom"; import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { useAuth } from "../../auth/AuthProvider"; import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api"; import { api, ApiError } from "../../lib/api";
@@ -85,6 +85,10 @@ export function ShipmentFormPage({ mode }: { mode: "create" | "edit" }) {
} }
} }
function closeEditor() {
navigate(mode === "create" ? "/shipping/shipments" : `/shipping/shipments/${shipmentId}`);
}
return ( return (
<form className="page-stack" onSubmit={handleSubmit}> <form className="page-stack" onSubmit={handleSubmit}>
<section className="surface-panel"> <section className="surface-panel">
@@ -93,9 +97,9 @@ export function ShipmentFormPage({ mode }: { mode: "create" | "edit" }) {
<p className="section-kicker">SHIPPING EDITOR</p> <p className="section-kicker">SHIPPING EDITOR</p>
<h3 className="module-title">{mode === "create" ? "New Shipment" : "Edit Shipment"}</h3> <h3 className="module-title">{mode === "create" ? "New Shipment" : "Edit Shipment"}</h3>
</div> </div>
<Link to={mode === "create" ? "/shipping/shipments" : `/shipping/shipments/${shipmentId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text"> <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
Cancel Cancel
</Link> </button>
</div> </div>
</section> </section>
<section className="space-y-3 surface-panel"> <section className="space-y-3 surface-panel">