changes

components/recap/RecapWorkOrderStatus.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useI18n } from "@/lib/i18n/useI18n";
+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-2 h-2 rounded-full bg-white/10">
+              <div
+                className="h-2 rounded-full bg-emerald-400"
+                style={{ width: `${Math.max(0, Math.min(100, workOrders.active.progressPct ?? 0))}%` }}
+              />
+            </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>
+  );
+}