PO logic
This commit is contained in:
@@ -3,7 +3,7 @@ import { Gantt } from "@svar-ui/react-gantt";
|
||||
import "@svar-ui/react-gantt/style.css";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import type { GanttTaskDto, PlanningExceptionDto, PlanningTimelineDto } from "@mrp/shared";
|
||||
import type { DemandPlanningRollupDto, GanttTaskDto, PlanningExceptionDto, PlanningTimelineDto } from "@mrp/shared";
|
||||
|
||||
import { useAuth } from "../../auth/AuthProvider";
|
||||
import { ApiError, api } from "../../lib/api";
|
||||
@@ -24,6 +24,7 @@ export function GanttPage() {
|
||||
const { token } = useAuth();
|
||||
const { mode } = useTheme();
|
||||
const [timeline, setTimeline] = useState<PlanningTimelineDto | null>(null);
|
||||
const [planningRollup, setPlanningRollup] = useState<DemandPlanningRollupDto | null>(null);
|
||||
const [status, setStatus] = useState("Loading live planning timeline...");
|
||||
|
||||
useEffect(() => {
|
||||
@@ -31,10 +32,10 @@ export function GanttPage() {
|
||||
return;
|
||||
}
|
||||
|
||||
api
|
||||
.getPlanningTimeline(token)
|
||||
.then((data) => {
|
||||
Promise.all([api.getPlanningTimeline(token), api.getDemandPlanningRollup(token)])
|
||||
.then(([data, rollup]) => {
|
||||
setTimeline(data);
|
||||
setPlanningRollup(rollup);
|
||||
setStatus("Planning timeline loaded.");
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
@@ -90,6 +91,16 @@ export function GanttPage() {
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Unscheduled Work</p>
|
||||
<div className="mt-2 text-xl font-extrabold text-text">{summary?.unscheduledWorkOrders ?? 0}</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">Shortage Items</p>
|
||||
<div className="mt-2 text-xl font-extrabold text-text">{planningRollup?.summary.uncoveredItemCount ?? 0}</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">Build / Buy</p>
|
||||
<div className="mt-2 text-xl font-extrabold text-text">
|
||||
{planningRollup ? `${planningRollup.summary.totalBuildQuantity} / ${planningRollup.summary.totalPurchaseQuantity}` : "0 / 0"}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<div className="grid gap-3 xl:grid-cols-[minmax(0,1.2fr)_360px]">
|
||||
<div
|
||||
@@ -148,6 +159,16 @@ export function GanttPage() {
|
||||
</section>
|
||||
<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">Planner Actions</p>
|
||||
<div className="mt-4 space-y-2 rounded-3xl border border-line/70 bg-page/60 p-3 text-sm">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-muted">Uncovered quantity</span>
|
||||
<span className="font-semibold text-text">{planningRollup?.summary.totalUncoveredQuantity ?? 0}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-muted">Projects with linked demand</span>
|
||||
<span className="font-semibold text-text">{planningRollup?.summary.projectCount ?? 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<Link to="/projects" className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
|
||||
Open projects
|
||||
|
||||
Reference in New Issue
Block a user