PO logic
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { permissions } from "@mrp/shared";
|
||||
import type { ProjectDetailDto } from "@mrp/shared/dist/projects/types.js";
|
||||
import type { SalesOrderPlanningDto } from "@mrp/shared/dist/sales/types.js";
|
||||
import type { WorkOrderSummaryDto } from "@mrp/shared";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
@@ -15,6 +16,7 @@ export function ProjectDetailPage() {
|
||||
const { projectId } = useParams();
|
||||
const [project, setProject] = useState<ProjectDetailDto | null>(null);
|
||||
const [workOrders, setWorkOrders] = useState<WorkOrderSummaryDto[]>([]);
|
||||
const [planning, setPlanning] = useState<SalesOrderPlanningDto | null>(null);
|
||||
const [status, setStatus] = useState("Loading project...");
|
||||
|
||||
const canManage = user?.permissions.includes(permissions.projectsWrite) ?? false;
|
||||
@@ -28,6 +30,11 @@ export function ProjectDetailPage() {
|
||||
.then((nextProject) => {
|
||||
setProject(nextProject);
|
||||
setStatus("Project loaded.");
|
||||
if (nextProject.salesOrderId) {
|
||||
api.getSalesOrderPlanning(token, nextProject.salesOrderId).then(setPlanning).catch(() => setPlanning(null));
|
||||
} else {
|
||||
setPlanning(null);
|
||||
}
|
||||
return api.getWorkOrders(token, { projectId: nextProject.id });
|
||||
})
|
||||
.then((nextWorkOrders) => setWorkOrders(nextWorkOrders))
|
||||
@@ -97,6 +104,47 @@ export function ProjectDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{planning ? (
|
||||
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Material Readiness</p>
|
||||
<div className="mt-5 grid gap-3 xl:grid-cols-4">
|
||||
<article className="rounded-[24px] border border-line/70 bg-page/60 px-3 py-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Build Qty</p>
|
||||
<div className="mt-2 text-base font-bold text-text">{planning.summary.totalBuildQuantity}</div>
|
||||
</article>
|
||||
<article className="rounded-[24px] border border-line/70 bg-page/60 px-3 py-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Buy Qty</p>
|
||||
<div className="mt-2 text-base font-bold text-text">{planning.summary.totalPurchaseQuantity}</div>
|
||||
</article>
|
||||
<article className="rounded-[24px] border border-line/70 bg-page/60 px-3 py-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Uncovered Qty</p>
|
||||
<div className="mt-2 text-base font-bold text-text">{planning.summary.totalUncoveredQuantity}</div>
|
||||
</article>
|
||||
<article className="rounded-[24px] border border-line/70 bg-page/60 px-3 py-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Shortage Items</p>
|
||||
<div className="mt-2 text-base font-bold text-text">{planning.summary.uncoveredItemCount}</div>
|
||||
</article>
|
||||
</div>
|
||||
<div className="mt-5 space-y-3">
|
||||
{planning.items
|
||||
.filter((item) => item.recommendedBuildQuantity > 0 || item.recommendedPurchaseQuantity > 0 || item.uncoveredQuantity > 0)
|
||||
.slice(0, 8)
|
||||
.map((item) => (
|
||||
<div key={item.itemId} className="rounded-3xl border border-line/70 bg-page/60 p-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="font-semibold text-text">{item.itemSku}</div>
|
||||
<div className="mt-1 text-xs text-muted">{item.itemName}</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted">
|
||||
Build {item.recommendedBuildQuantity} · Buy {item.recommendedPurchaseQuantity} · Uncovered {item.uncoveredQuantity}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user