62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useI18n } from "@/lib/i18n/useI18n";
|
|
import { formatRecapProgressPercent, progressBarWidthPercent } from "@/lib/recap/progressDisplay";
|
|
import type { RecapMachine } from "@/lib/recap/types";
|
|
|
|
type Props = {
|
|
workOrders: RecapMachine["workOrders"];
|
|
};
|
|
|
|
export default function RecapWorkOrderStatus({ workOrders }: Props) {
|
|
const { t, locale } = useI18n();
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-black/40 p-4">
|
|
<div className="mb-3 text-sm font-semibold text-white">{t("recap.workOrders.title")}</div>
|
|
|
|
<div className="mb-3">
|
|
<div className="text-xs uppercase tracking-wide text-zinc-400">{t("recap.workOrders.active")}</div>
|
|
{!workOrders.active ? (
|
|
<div className="mt-1 text-sm text-zinc-400">{t("recap.workOrders.none")}</div>
|
|
) : (
|
|
<div className="mt-2 rounded-xl border border-white/10 bg-black/30 p-3 text-sm text-zinc-200">
|
|
<div className="font-medium text-white">{workOrders.active.id}</div>
|
|
<div className="text-zinc-400">SKU: {workOrders.active.sku || "--"}</div>
|
|
<div className="mt-1 text-xs text-zinc-300">
|
|
{t("recap.production.progress")}: {formatRecapProgressPercent(workOrders.active.progressPct, locale)}
|
|
</div>
|
|
<div className="mt-2 h-2 rounded-full bg-white/10">
|
|
<div
|
|
className="h-2 rounded-full bg-emerald-400 transition-[width]"
|
|
style={{ width: `${progressBarWidthPercent(workOrders.active.progressPct)}%` }}
|
|
/>
|
|
</div>
|
|
<div className="mt-2 text-xs text-zinc-400">
|
|
{t("recap.workOrders.startedAt")}: {workOrders.active.startedAt ? new Date(workOrders.active.startedAt).toLocaleString(locale) : "--"}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-xs uppercase tracking-wide text-zinc-400">{t("recap.workOrders.completed")}</div>
|
|
{workOrders.completed.length === 0 ? (
|
|
<div className="mt-1 text-sm text-zinc-400">{t("recap.workOrders.none")}</div>
|
|
) : (
|
|
<div className="mt-2 space-y-2">
|
|
{workOrders.completed.slice(0, 4).map((row) => (
|
|
<div key={row.id} className="rounded-xl border border-white/10 bg-black/30 p-3 text-xs text-zinc-300">
|
|
<div className="font-medium text-white">{row.id}</div>
|
|
<div>SKU: {row.sku || "--"}</div>
|
|
<div>{t("recap.workOrders.goodParts")}: {row.goodParts}</div>
|
|
<div>{t("recap.workOrders.duration")}: {row.durationHrs.toFixed(2)}h</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|