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

manufacturing stabilization

Browse Source
This commit is contained in:
jason
2026-03-15 11:30:10 -05:00
parent 0596970b99
commit e2254d020e
15 changed files with 492 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/src/modules/projects/ProjectDetailPage.tsx
View File

@@ -1,5 +1,6 @@
import { permissions } from "@mrp/shared";
import type { ProjectDetailDto } from "@mrp/shared/dist/projects/types.js";
import type { WorkOrderSummaryDto } from "@mrp/shared";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
@@ -13,6 +14,7 @@ export function ProjectDetailPage() {
const { token, user } = useAuth();
const { projectId } = useParams();
const [project, setProject] = useState<ProjectDetailDto | null>(null);
const [workOrders, setWorkOrders] = useState<WorkOrderSummaryDto[]>([]);
const [status, setStatus] = useState("Loading project...");
const canManage = user?.permissions.includes(permissions.projectsWrite) ?? false;
@@ -26,7 +28,9 @@ export function ProjectDetailPage() {
.then((nextProject) => {
setProject(nextProject);
setStatus("Project loaded.");
return api.getWorkOrders(token, { projectId: nextProject.id });
})
.then((nextWorkOrders) => setWorkOrders(nextWorkOrders))
.catch((error: unknown) => {
const message = error instanceof ApiError ? error.message : "Unable to load project.";
setStatus(message);
@@ -93,6 +97,36 @@ export function ProjectDetailPage() {
</div>
</div>
</section>
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing Links</p>
<p className="mt-2 text-sm text-muted">Work orders already linked to this project.</p>
</div>
{canManage ? (
<Link to={`/manufacturing/work-orders/new?projectId=${project.id}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
New work order
</Link>
) : null}
</div>
{workOrders.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 work orders are linked to this project yet.</div>
) : (
<div className="mt-6 space-y-3">
{workOrders.map((workOrder) => (
<Link key={workOrder.id} to={`/manufacturing/work-orders/${workOrder.id}`} className="block rounded-3xl 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>
<div className="font-semibold text-text">{workOrder.workOrderNumber}</div>
<div className="mt-1 text-xs text-muted">{workOrder.itemSku} · {workOrder.completedQuantity}/{workOrder.quantity} complete</div>
</div>
<div className="text-sm font-semibold text-text">{workOrder.status.replace("_", " ")}</div>
</div>
</Link>
))}
</div>
)}
</section>
<FileAttachmentsPanel
ownerType="PROJECT"
ownerId={project.id}

286
client/src/modules/projects/ProjectFormPage.tsx
View File

@@ -22,6 +22,16 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
const [quoteOptions, setQuoteOptions] = useState<ProjectDocumentOptionDto[]>([]);
const [orderOptions, setOrderOptions] = useState<ProjectDocumentOptionDto[]>([]);
const [shipmentOptions, setShipmentOptions] = useState<ProjectShipmentOptionDto[]>([]);
const [customerSearchTerm, setCustomerSearchTerm] = useState("");
const [ownerSearchTerm, setOwnerSearchTerm] = useState("");
const [quoteSearchTerm, setQuoteSearchTerm] = useState("");
const [orderSearchTerm, setOrderSearchTerm] = useState("");
const [shipmentSearchTerm, setShipmentSearchTerm] = useState("");
const [customerPickerOpen, setCustomerPickerOpen] = useState(false);
const [ownerPickerOpen, setOwnerPickerOpen] = useState(false);
const [quotePickerOpen, setQuotePickerOpen] = useState(false);
const [orderPickerOpen, setOrderPickerOpen] = useState(false);
const [shipmentPickerOpen, setShipmentPickerOpen] = useState(false);
const [status, setStatus] = useState(mode === "create" ? "Create a new project." : "Loading project...");
const [isSaving, setIsSaving] = useState(false);
@@ -66,6 +76,11 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
dueDate: project.dueDate,
notes: project.notes,
});
setCustomerSearchTerm(project.customerName);
setOwnerSearchTerm(project.ownerName ?? "");
setQuoteSearchTerm(project.salesQuoteNumber ?? "");
setOrderSearchTerm(project.salesOrderNumber ?? "");
setShipmentSearchTerm(project.shipmentNumber ?? "");
setStatus("Project loaded.");
})
.catch((error: unknown) => {
@@ -88,6 +103,20 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
}));
}
function restoreSearchTerms() {
const selectedCustomer = customerOptions.find((customer) => customer.id === form.customerId);
const selectedOwner = ownerOptions.find((owner) => owner.id === form.ownerId);
const selectedQuote = quoteOptions.find((quote) => quote.id === form.salesQuoteId);
const selectedOrder = orderOptions.find((order) => order.id === form.salesOrderId);
const selectedShipment = shipmentOptions.find((shipment) => shipment.id === form.shipmentId);
setCustomerSearchTerm(selectedCustomer?.name ?? "");
setOwnerSearchTerm(selectedOwner?.fullName ?? "");
setQuoteSearchTerm(selectedQuote?.documentNumber ?? "");
setOrderSearchTerm(selectedOrder?.documentNumber ?? "");
setShipmentSearchTerm(selectedShipment?.shipmentNumber ?? "");
}
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
if (!token) {
@@ -128,10 +157,47 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
</label>
<label className="block">
<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>
{customerOptions.map((customer) => <option key={customer.id} value={customer.id}>{customer.name}</option>)}
</select>
<div className="relative">
<input
value={customerSearchTerm}
onChange={(event) => {
setCustomerSearchTerm(event.target.value);
updateField("customerId", "");
setCustomerPickerOpen(true);
}}
onFocus={() => setCustomerPickerOpen(true)}
onBlur={() => window.setTimeout(() => {
setCustomerPickerOpen(false);
restoreSearchTerms();
}, 120)}
placeholder="Search customer"
className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
/>
{customerPickerOpen ? (
<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">
{customerOptions
.filter((customer) => {
const query = customerSearchTerm.trim().toLowerCase();
if (!query) {
return true;
}
return customer.name.toLowerCase().includes(query) || customer.email.toLowerCase().includes(query);
})
.slice(0, 12)
.map((customer) => (
<button key={customer.id} type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("customerId", customer.id);
setCustomerSearchTerm(customer.name);
setCustomerPickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
<div className="font-semibold text-text">{customer.name}</div>
<div className="mt-1 text-xs text-muted">{customer.email}</div>
</button>
))}
</div>
) : null}
</div>
</label>
</div>
<div className="grid gap-3 xl:grid-cols-4">
@@ -149,10 +215,55 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
</label>
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Owner</span>
<select value={form.ownerId ?? ""} onChange={(event) => updateField("ownerId", event.target.value || null)} 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="">Unassigned</option>
{ownerOptions.map((owner) => <option key={owner.id} value={owner.id}>{owner.fullName}</option>)}
</select>
<div className="relative">
<input
value={ownerSearchTerm}
onChange={(event) => {
setOwnerSearchTerm(event.target.value);
updateField("ownerId", null);
setOwnerPickerOpen(true);
}}
onFocus={() => setOwnerPickerOpen(true)}
onBlur={() => window.setTimeout(() => {
setOwnerPickerOpen(false);
restoreSearchTerms();
}, 120)}
placeholder="Search owner"
className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
/>
{ownerPickerOpen ? (
<div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
<button type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("ownerId", null);
setOwnerSearchTerm("");
setOwnerPickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
<div className="font-semibold text-text">Unassigned</div>
</button>
{ownerOptions
.filter((owner) => {
const query = ownerSearchTerm.trim().toLowerCase();
if (!query) {
return true;
}
return owner.fullName.toLowerCase().includes(query) || owner.email.toLowerCase().includes(query);
})
.slice(0, 12)
.map((owner) => (
<button key={owner.id} type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("ownerId", owner.id);
setOwnerSearchTerm(owner.fullName);
setOwnerPickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
<div className="font-semibold text-text">{owner.fullName}</div>
<div className="mt-1 text-xs text-muted">{owner.email}</div>
</button>
))}
</div>
) : null}
</div>
</label>
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Due date</span>
@@ -162,24 +273,159 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
<div className="grid gap-3 xl:grid-cols-3">
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Quote</span>
<select value={form.salesQuoteId ?? ""} onChange={(event) => updateField("salesQuoteId", event.target.value || null)} 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="">No linked quote</option>
{quoteOptions.map((quote) => <option key={quote.id} value={quote.id}>{quote.documentNumber}</option>)}
</select>
<div className="relative">
<input
value={quoteSearchTerm}
onChange={(event) => {
setQuoteSearchTerm(event.target.value);
updateField("salesQuoteId", null);
setQuotePickerOpen(true);
}}
onFocus={() => setQuotePickerOpen(true)}
onBlur={() => window.setTimeout(() => {
setQuotePickerOpen(false);
restoreSearchTerms();
}, 120)}
placeholder="Search quote"
className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
/>
{quotePickerOpen ? (
<div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
<button type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("salesQuoteId", null);
setQuoteSearchTerm("");
setQuotePickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
<div className="font-semibold text-text">No linked quote</div>
</button>
{quoteOptions
.filter((quote) => {
const query = quoteSearchTerm.trim().toLowerCase();
if (!query) {
return true;
}
return quote.documentNumber.toLowerCase().includes(query) || quote.customerName.toLowerCase().includes(query) || quote.status.toLowerCase().includes(query);
})
.slice(0, 12)
.map((quote) => (
<button key={quote.id} type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("salesQuoteId", quote.id);
setQuoteSearchTerm(quote.documentNumber);
setQuotePickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
<div className="font-semibold text-text">{quote.documentNumber}</div>
<div className="mt-1 text-xs text-muted">{quote.customerName} · {quote.status}</div>
</button>
))}
</div>
) : null}
</div>
</label>
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Sales order</span>
<select value={form.salesOrderId ?? ""} onChange={(event) => updateField("salesOrderId", event.target.value || null)} 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="">No linked sales order</option>
{orderOptions.map((order) => <option key={order.id} value={order.id}>{order.documentNumber}</option>)}
</select>
<div className="relative">
<input
value={orderSearchTerm}
onChange={(event) => {
setOrderSearchTerm(event.target.value);
updateField("salesOrderId", null);
setOrderPickerOpen(true);
}}
onFocus={() => setOrderPickerOpen(true)}
onBlur={() => window.setTimeout(() => {
setOrderPickerOpen(false);
restoreSearchTerms();
}, 120)}
placeholder="Search sales order"
className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
/>
{orderPickerOpen ? (
<div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
<button type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("salesOrderId", null);
setOrderSearchTerm("");
setOrderPickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
<div className="font-semibold text-text">No linked sales order</div>
</button>
{orderOptions
.filter((order) => {
const query = orderSearchTerm.trim().toLowerCase();
if (!query) {
return true;
}
return order.documentNumber.toLowerCase().includes(query) || order.customerName.toLowerCase().includes(query) || order.status.toLowerCase().includes(query);
})
.slice(0, 12)
.map((order) => (
<button key={order.id} type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("salesOrderId", order.id);
setOrderSearchTerm(order.documentNumber);
setOrderPickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
<div className="font-semibold text-text">{order.documentNumber}</div>
<div className="mt-1 text-xs text-muted">{order.customerName} · {order.status}</div>
</button>
))}
</div>
) : null}
</div>
</label>
<label className="block">
<span className="mb-2 block text-sm font-semibold text-text">Shipment</span>
<select value={form.shipmentId ?? ""} onChange={(event) => updateField("shipmentId", event.target.value || null)} 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="">No linked shipment</option>
{shipmentOptions.map((shipment) => <option key={shipment.id} value={shipment.id}>{shipment.shipmentNumber}</option>)}
</select>
<div className="relative">
<input
value={shipmentSearchTerm}
onChange={(event) => {
setShipmentSearchTerm(event.target.value);
updateField("shipmentId", null);
setShipmentPickerOpen(true);
}}
onFocus={() => setShipmentPickerOpen(true)}
onBlur={() => window.setTimeout(() => {
setShipmentPickerOpen(false);
restoreSearchTerms();
}, 120)}
placeholder="Search shipment"
className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
/>
{shipmentPickerOpen ? (
<div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
<button type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("shipmentId", null);
setShipmentSearchTerm("");
setShipmentPickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
<div className="font-semibold text-text">No linked shipment</div>
</button>
{shipmentOptions
.filter((shipment) => {
const query = shipmentSearchTerm.trim().toLowerCase();
if (!query) {
return true;
}
return shipment.shipmentNumber.toLowerCase().includes(query) || shipment.salesOrderNumber.toLowerCase().includes(query) || shipment.customerName.toLowerCase().includes(query) || shipment.status.toLowerCase().includes(query);
})
.slice(0, 12)
.map((shipment) => (
<button key={shipment.id} type="button" onMouseDown={(event) => {
event.preventDefault();
updateField("shipmentId", shipment.id);
setShipmentSearchTerm(shipment.shipmentNumber);
setShipmentPickerOpen(false);
}} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
<div className="font-semibold text-text">{shipment.shipmentNumber}</div>
<div className="mt-1 text-xs text-muted">{shipment.salesOrderNumber} · {shipment.status}</div>
</button>
))}
</div>
) : null}
</div>
</label>
</div>
<label className="block">