46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useI18n } from "@/lib/i18n/useI18n";
|
|
import type { RecapSkuRow } from "@/lib/recap/types";
|
|
|
|
type Props = {
|
|
rows: RecapSkuRow[];
|
|
};
|
|
|
|
export default function RecapProductionBySku({ rows }: Props) {
|
|
const { t } = 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.production.title")}</div>
|
|
{rows.length === 0 ? (
|
|
<div className="text-sm text-zinc-400">{t("recap.empty.production")}</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<div className="grid grid-cols-5 gap-2 border-b border-white/10 pb-2 text-xs uppercase tracking-wide text-zinc-400">
|
|
<div>SKU</div>
|
|
<div>{t("recap.production.good")}</div>
|
|
<div>{t("recap.production.scrap")}</div>
|
|
<div>{t("recap.production.target")}</div>
|
|
<div>{t("recap.production.progress")}</div>
|
|
</div>
|
|
{rows.slice(0, 8).map((row) => {
|
|
const pct = row.progressPct == null ? "--" : `${Math.round(row.progressPct)}%`;
|
|
return (
|
|
<div key={row.sku} className="grid grid-cols-5 gap-2 text-sm text-zinc-200">
|
|
<div className="truncate">{row.sku}</div>
|
|
<div>{row.good}</div>
|
|
<div className={row.scrap > 0 ? "text-red-400" : "text-zinc-200"}>{row.scrap}</div>
|
|
<div>{row.target ?? "--"}</div>
|
|
<div>
|
|
<span className="text-emerald-400">{pct}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|