changes

components/recap/RecapProductionBySku.tsx

@@ -0,0 +1,45 @@
+"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>
+  );
+}