reliability semi-fix

app/(app)/recap/RecapClient.tsx

@@ -1,310 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { useI18n } from "@/lib/i18n/useI18n";
-import type { RecapMachine, RecapResponse, RecapTimelineResponse } from "@/lib/recap/types";
-import RecapKpiRow from "@/components/recap/RecapKpiRow";
-import RecapProductionBySku from "@/components/recap/RecapProductionBySku";
-import RecapDowntimeTop from "@/components/recap/RecapDowntimeTop";
-import RecapWorkOrderStatus from "@/components/recap/RecapWorkOrderStatus";
-import RecapMachineStatus from "@/components/recap/RecapMachineStatus";
-import RecapTimeline from "@/components/recap/RecapTimeline";
-
-type Props = {
-  initialData: RecapResponse;
-  initialFilters: {
-    machineId: string;
-    shift: string;
-    start: string;
-    end: string;
-  };
-};
-
-type RangeMode = "24h" | "shift" | "custom";
-
-function toInputDate(value: string) {
-  if (!value) return "";
-  const d = new Date(value);
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
-function toMinutesLabel(minutes: number | null) {
-  if (minutes == null || minutes <= 0) return "0";
-  return String(Math.round(minutes));
-}
-
-export default function RecapClient({ initialData, initialFilters }: Props) {
-  const { t, locale } = useI18n();
-  const [data, setData] = useState<RecapResponse>(initialData);
-  const [machineId, setMachineId] = useState(initialFilters.machineId || "");
-  const [shift, setShift] = useState(initialFilters.shift || "shift1");
-  const [customStart, setCustomStart] = useState(toInputDate(initialFilters.start));
-  const [customEnd, setCustomEnd] = useState(toInputDate(initialFilters.end));
-  const [mode, setMode] = useState<RangeMode>(() => {
-    if (initialFilters.shift) return "shift";
-    if (initialFilters.start || initialFilters.end) return "custom";
-    return "24h";
-  });
-  const [loading, setLoading] = useState(false);
-  const [timeline, setTimeline] = useState<RecapTimelineResponse | null>(null);
-
-  const shiftOptions = useMemo(
-    () =>
-      data.availableShifts?.length
-        ? data.availableShifts
-        : [
-            { id: "shift1", name: t("recap.shift.1") },
-            { id: "shift2", name: t("recap.shift.2") },
-            { id: "shift3", name: t("recap.shift.3") },
-          ],
-    [data.availableShifts, t]
-  );
-
-  useEffect(() => {
-    if (mode !== "shift") return;
-    if (shiftOptions.some((option) => option.id === shift)) return;
-    setShift(shiftOptions[0]?.id ?? "shift1");
-  }, [mode, shift, shiftOptions]);
-
-  useEffect(() => {
-    let alive = true;
-
-    async function load() {
-      setLoading(true);
-      const qs = new URLSearchParams();
-      if (machineId) qs.set("machineId", machineId);
-      if (mode === "shift") qs.set("shift", shift || "shift1");
-      if (mode === "custom") {
-        if (customStart) qs.set("start", new Date(customStart).toISOString());
-        if (customEnd) qs.set("end", new Date(customEnd).toISOString());
-      }
-
-      try {
-        const res = await fetch(`/api/recap?${qs.toString()}`, { cache: "no-cache" });
-        const json = await res.json().catch(() => null);
-        if (!alive || !json) return;
-        setData(json as RecapResponse);
-      } finally {
-        if (alive) setLoading(false);
-      }
-    }
-
-    const timeout = setTimeout(load, 200);
-    return () => {
-      alive = false;
-      clearTimeout(timeout);
-    };
-  }, [machineId, mode, shift, customStart, customEnd]);
-
-  useEffect(() => {
-    async function refresh() {
-      const qs = new URLSearchParams();
-      if (machineId) qs.set("machineId", machineId);
-      if (mode === "shift") qs.set("shift", shift || "shift1");
-      if (mode === "custom") {
-        if (customStart) qs.set("start", new Date(customStart).toISOString());
-        if (customEnd) qs.set("end", new Date(customEnd).toISOString());
-      }
-      const res = await fetch(`/api/recap?${qs.toString()}`, { cache: "no-cache" });
-      const json = await res.json().catch(() => null);
-      if (json) setData(json as RecapResponse);
-    }
-
-    const onFocus = () => {
-      void refresh();
-    };
-
-    const interval = window.setInterval(onFocus, 60000);
-    window.addEventListener("focus", onFocus);
-    return () => {
-      window.clearInterval(interval);
-      window.removeEventListener("focus", onFocus);
-    };
-  }, [machineId, mode, shift, customStart, customEnd]);
-
-  const selectedMachine = useMemo(() => {
-    if (!data.machines.length) return null;
-    return data.machines.find((m) => m.machineId === machineId) ?? data.machines[0];
-  }, [data.machines, machineId]);
-
-  useEffect(() => {
-    let alive = true;
-
-    async function loadTimeline() {
-      if (mode !== "24h") {
-        if (alive) setTimeline(null);
-        return;
-      }
-      if (!selectedMachine?.machineId) {
-        if (alive) setTimeline(null);
-        return;
-      }
-
-      const qs = new URLSearchParams({
-        machineId: selectedMachine.machineId,
-        hours: "24",
-        start: data.range.start,
-        end: data.range.end,
-      });
-      const res = await fetch(`/api/recap/timeline?${qs.toString()}`, { cache: "no-cache" });
-      const json = await res.json().catch(() => null);
-      if (!alive) return;
-      if (res.ok && json && json.segments) {
-        setTimeline(json as RecapTimelineResponse);
-      } else {
-        setTimeline(null);
-      }
-    }
-
-    void loadTimeline();
-    return () => {
-      alive = false;
-    };
-  }, [mode, selectedMachine?.machineId, data.range.start, data.range.end]);
-
-  const fleet = useMemo(() => {
-    let good = 0;
-    let scrap = 0;
-    let stops = 0;
-    let oeeSum = 0;
-    let oeeCount = 0;
-    for (const m of data.machines) {
-      good += m.production.goodParts;
-      scrap += m.production.scrapParts;
-      stops += m.downtime.stopsCount;
-      if (m.oee.avg != null) {
-        oeeSum += m.oee.avg;
-        oeeCount += 1;
-      }
-    }
-    return {
-      oeeAvg: oeeCount ? oeeSum / oeeCount : null,
-      good,
-      scrap,
-      stops,
-    };
-  }, [data.machines]);
-
-  const bannerMold = selectedMachine?.workOrders.moldChangeInProgress;
-  const moldStartMs = selectedMachine?.workOrders.moldChangeStartMs ?? null;
-  const moldStartLabel = moldStartMs
-    ? new Date(moldStartMs).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" })
-    : "--:--";
-  const moldElapsedMin = moldStartMs ? Math.max(0, Math.floor((Date.now() - moldStartMs) / 60000)) : null;
-  const bannerStop = (selectedMachine?.downtime.ongoingStopMin ?? 0) > 0;
-
-  return (
-    <div className="p-4 sm:p-6">
-      <div className="mb-4 rounded-2xl border border-white/10 bg-black/40 p-4">
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <h1 className="text-2xl font-semibold text-white">{t("recap.title")}</h1>
-            <p className="text-sm text-zinc-400">
-              {t("recap.subtitle")} · {new Date(data.range.start).toLocaleString(locale)} - {new Date(data.range.end).toLocaleString(locale)}
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2 text-sm">
-            <select
-              value={machineId}
-              onChange={(event) => setMachineId(event.target.value)}
-              className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
-            >
-              <option value="">{t("recap.allMachines")}</option>
-              {data.machines.map((m) => (
-                <option key={m.machineId} value={m.machineId}>
-                  {m.machineName}
-                </option>
-              ))}
-            </select>
-
-            <select
-              value={mode}
-              onChange={(event) => setMode(event.target.value as RangeMode)}
-              className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
-            >
-              <option value="24h">24h</option>
-              <option value="shift">{t("recap.range.shift")}</option>
-              <option value="custom">{t("recap.range.custom")}</option>
-            </select>
-
-            {mode === "shift" ? (
-              <select
-                value={shift}
-                onChange={(event) => setShift(event.target.value)}
-                className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
-              >
-                {shiftOptions.map((option) => (
-                  <option key={option.id} value={option.id}>
-                    {option.name}
-                  </option>
-                ))}
-              </select>
-            ) : null}
-
-            {mode === "custom" ? (
-              <>
-                <input
-                  type="datetime-local"
-                  value={customStart}
-                  onChange={(event) => setCustomStart(event.target.value)}
-                  className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
-                />
-                <input
-                  type="datetime-local"
-                  value={customEnd}
-                  onChange={(event) => setCustomEnd(event.target.value)}
-                  className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
-                />
-              </>
-            ) : null}
-          </div>
-        </div>
-      </div>
-
-      {bannerMold ? (
-        <div className="mb-3 rounded-2xl border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-300">
-          {t("recap.banner.mold")} {moldStartLabel}
-          {moldElapsedMin != null ? ` · ${moldElapsedMin} min` : ""}
-        </div>
-      ) : null}
-      {bannerStop ? (
-        <div className="mb-3 rounded-2xl border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
-          {t("recap.banner.stopped", { minutes: toMinutesLabel(selectedMachine?.downtime.ongoingStopMin ?? null) })}
-        </div>
-      ) : null}
-
-      {loading ? <div className="mb-3 text-sm text-zinc-400">{t("common.loading")}</div> : null}
-
-      {timeline ? (
-        <RecapTimeline
-          rangeStart={timeline.range.start}
-          rangeEnd={timeline.range.end}
-          segments={timeline.segments}
-          locale={locale}
-        />
-      ) : null}
-
-      <RecapKpiRow oeeAvg={fleet.oeeAvg} goodParts={fleet.good} totalStops={fleet.stops} scrapParts={fleet.scrap} />
-
-      <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
-        <RecapProductionBySku rows={selectedMachine?.production.bySku ?? []} />
-        <RecapDowntimeTop rows={selectedMachine?.downtime.topReasons ?? []} />
-      </div>
-
-      <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
-        <RecapWorkOrderStatus
-          workOrders={
-            selectedMachine?.workOrders ?? {
-              completed: [],
-              active: null,
-              moldChangeInProgress: false,
-              moldChangeStartMs: null,
-            }
-          }
-        />
-        <RecapMachineStatus machine={selectedMachine as RecapMachine | null} />
-      </div>
-    </div>
-  );
-}

app/(app)/recap/RecapGridClient.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useI18n } from "@/lib/i18n/useI18n";
+import type { RecapMachineStatus, RecapSummaryResponse } from "@/lib/recap/types";
+import RecapMachineCard from "@/components/recap/RecapMachineCard";
+
+type Props = {
+  initialData: RecapSummaryResponse;
+};
+
+function statusLabel(status: RecapMachineStatus, t: (key: string) => string) {
+  if (status === "running") return t("recap.status.running");
+  if (status === "mold-change") return t("recap.status.moldChange");
+  if (status === "stopped") return t("recap.status.stopped");
+  return t("recap.status.offline");
+}
+
+export default function RecapGridClient({ initialData }: Props) {
+  const { t } = useI18n();
+
+  const [data, setData] = useState<RecapSummaryResponse>(initialData);
+  const [loading, setLoading] = useState(false);
+  const [locationFilter, setLocationFilter] = useState("all");
+  const [statusFilter, setStatusFilter] = useState<"all" | RecapMachineStatus>("all");
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    let alive = true;
+
+    async function refresh() {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/recap/summary?hours=${data.range.hours}`, { cache: "no-store" });
+        const json = await res.json().catch(() => null);
+        if (!alive || !json || !res.ok) return;
+        setData(json as RecapSummaryResponse);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    }
+
+    const onFocus = () => {
+      void refresh();
+    };
+
+    const interval = window.setInterval(onFocus, 60000);
+    window.addEventListener("focus", onFocus);
+
+    return () => {
+      alive = false;
+      window.clearInterval(interval);
+      window.removeEventListener("focus", onFocus);
+    };
+  }, [data.range.hours]);
+
+  const locationOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const machine of data.machines) {
+      if (machine.location) set.add(machine.location);
+    }
+    return [...set].sort((a, b) => a.localeCompare(b));
+  }, [data.machines]);
+
+  const filteredMachines = useMemo(() => {
+    return data.machines.filter((machine) => {
+      if (locationFilter !== "all" && machine.location !== locationFilter) return false;
+      if (statusFilter !== "all" && machine.status !== statusFilter) return false;
+      return true;
+    });
+  }, [data.machines, locationFilter, statusFilter]);
+
+  const generatedAtMs = new Date(data.generatedAt).getTime();
+  const freshAgeSec = Number.isFinite(generatedAtMs) ? Math.max(0, Math.floor((nowMs - generatedAtMs) / 1000)) : null;
+
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="mb-4 rounded-2xl border border-white/10 bg-black/40 p-4">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold text-white">{t("recap.grid.title")}</h1>
+            <p className="text-sm text-zinc-400">{t("recap.grid.subtitle")}</p>
+            {freshAgeSec != null ? (
+              <p className="mt-1 text-xs text-zinc-500">{t("recap.grid.updatedAgo", { sec: freshAgeSec })}</p>
+            ) : null}
+          </div>
+
+          <div className="flex flex-wrap gap-2 text-sm">
+            <select
+              value={locationFilter}
+              onChange={(event) => setLocationFilter(event.target.value)}
+              className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
+            >
+              <option value="all">{t("recap.filter.allLocations")}</option>
+              {locationOptions.map((location) => (
+                <option key={location} value={location}>
+                  {location}
+                </option>
+              ))}
+            </select>
+
+            <select
+              value={statusFilter}
+              onChange={(event) => setStatusFilter(event.target.value as "all" | RecapMachineStatus)}
+              className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
+            >
+              <option value="all">{t("recap.filter.allStatuses")}</option>
+              {(["running", "mold-change", "stopped", "offline"] as const).map((status) => (
+                <option key={status} value={status}>
+                  {statusLabel(status, t)}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {loading && data.machines.length === 0 ? (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, idx) => (
+            <div key={idx} className="h-[220px] animate-pulse rounded-2xl border border-white/10 bg-white/5" />
+          ))}
+        </div>
+      ) : null}
+
+      {loading && data.machines.length > 0 ? (
+        <div className="mb-3 text-xs text-zinc-500">{t("common.loading")}</div>
+      ) : null}
+
+      {filteredMachines.length === 0 ? (
+        <div className="rounded-2xl border border-white/10 bg-black/30 p-4 text-sm text-zinc-400">
+          {t("recap.grid.empty")}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+          {filteredMachines.map((machine) => (
+            <RecapMachineCard
+              key={machine.machineId}
+              machine={machine}
+              rangeStart={data.range.start}
+              rangeEnd={data.range.end}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

app/(app)/recap/[machineId]/RecapDetailClient.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState, useTransition } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useI18n } from "@/lib/i18n/useI18n";
+import type { RecapDetailResponse, RecapRangeMode, RecapTimelineResponse } from "@/lib/recap/types";
+import RecapBanners from "@/components/recap/RecapBanners";
+import RecapKpiRow from "@/components/recap/RecapKpiRow";
+import RecapProductionBySku from "@/components/recap/RecapProductionBySku";
+import RecapDowntimeTop from "@/components/recap/RecapDowntimeTop";
+import RecapWorkOrders from "@/components/recap/RecapWorkOrders";
+import RecapMachineStatus from "@/components/recap/RecapMachineStatus";
+import RecapFullTimeline from "@/components/recap/RecapFullTimeline";
+
+type Props = {
+  machineId: string;
+  initialData: RecapDetailResponse;
+};
+
+function toInputDate(value: string) {
+  const d = new Date(value);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function normalizeInputDate(value: string) {
+  const d = new Date(value);
+  if (!Number.isFinite(d.getTime())) return null;
+  return d.toISOString();
+}
+
+export default function RecapDetailClient({ machineId, initialData }: Props) {
+  const { t, locale } = useI18n();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+  const [timeline, setTimeline] = useState<RecapTimelineResponse | null>(null);
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  const [customStart, setCustomStart] = useState(toInputDate(initialData.range.start));
+  const [customEnd, setCustomEnd] = useState(toInputDate(initialData.range.end));
+
+  const selectedRange = (searchParams.get("range") as RecapRangeMode | null) ?? initialData.range.mode;
+
+  function pushRange(nextRange: RecapRangeMode, start?: string, end?: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("range", nextRange);
+
+    if (nextRange === "custom" && start && end) {
+      params.set("start", start);
+      params.set("end", end);
+    } else {
+      params.delete("start");
+      params.delete("end");
+    }
+
+    startTransition(() => {
+      router.push(`${pathname}?${params.toString()}`);
+    });
+  }
+
+  function applyCustomRange() {
+    const start = normalizeInputDate(customStart);
+    const end = normalizeInputDate(customEnd);
+    if (!start || !end || end <= start) return;
+    pushRange("custom", start, end);
+  }
+
+  const machine = initialData.machine;
+  const generatedAtMs = new Date(initialData.generatedAt).getTime();
+  const freshAgeSec = Number.isFinite(generatedAtMs) ? Math.max(0, Math.floor((nowMs - generatedAtMs) / 1000)) : null;
+  const timelineStart = timeline?.range.start ?? initialData.range.start;
+  const timelineEnd = timeline?.range.end ?? initialData.range.end;
+  const timelineSegments = timeline?.segments ?? machine.timeline;
+  const timelineHasData = timeline?.hasData ?? true;
+
+  useEffect(() => {
+    let alive = true;
+
+    async function loadTimeline() {
+      try {
+        const params = new URLSearchParams({
+          start: initialData.range.start,
+          end: initialData.range.end,
+        });
+        const res = await fetch(`/api/recap/${machineId}/timeline?${params.toString()}`, { cache: "no-store" });
+        const json = await res.json().catch(() => null);
+        if (!alive || !res.ok || !json) return;
+        setTimeline(json as RecapTimelineResponse);
+      } catch {
+      }
+    }
+
+    void loadTimeline();
+    return () => {
+      alive = false;
+    };
+  }, [initialData.range.end, initialData.range.start, machineId]);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <Link href="/recap" className="text-sm text-zinc-400 hover:text-zinc-200">
+            {`← ${t("recap.detail.back")}`}
+          </Link>
+          <h1 className="mt-1 text-2xl font-semibold text-white">{machine.name || machineId}</h1>
+          <div className="text-sm text-zinc-400">{machine.location || t("common.na")}</div>
+          {freshAgeSec != null ? (
+            <div className="mt-1 text-xs text-zinc-500">{t("recap.grid.updatedAgo", { sec: freshAgeSec })}</div>
+          ) : null}
+        </div>
+
+        <div className="flex flex-wrap gap-2 text-sm">
+          {(["24h", "shift", "yesterday", "custom"] as const).map((range) => (
+            <button
+              key={range}
+              type="button"
+              onClick={() => {
+                if (range === "custom") {
+                  pushRange("custom", normalizeInputDate(customStart) ?? undefined, normalizeInputDate(customEnd) ?? undefined);
+                  return;
+                }
+                pushRange(range);
+              }}
+              className={`rounded-xl border px-3 py-2 ${
+                selectedRange === range
+                  ? "border-emerald-300/60 bg-emerald-500/20 text-emerald-100"
+                  : "border-white/10 bg-black/40 text-zinc-200"
+              }`}
+            >
+              {range === "24h" ? t("recap.range.24h") : null}
+              {range === "shift" ? t("recap.range.shiftCurrent") : null}
+              {range === "yesterday" ? t("recap.range.yesterday") : null}
+              {range === "custom" ? t("recap.range.custom") : null}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {selectedRange === "custom" ? (
+        <div className="mb-4 flex flex-wrap gap-2 text-sm">
+          <input
+            type="datetime-local"
+            value={customStart}
+            onChange={(event) => setCustomStart(event.target.value)}
+            className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
+          />
+          <input
+            type="datetime-local"
+            value={customEnd}
+            onChange={(event) => setCustomEnd(event.target.value)}
+            className="rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-zinc-200"
+          />
+          <button
+            type="button"
+            onClick={applyCustomRange}
+            className="rounded-xl border border-emerald-300/50 bg-emerald-500/20 px-3 py-2 text-emerald-100"
+          >
+            {t("recap.range.apply")}
+          </button>
+        </div>
+      ) : null}
+
+      {isPending ? <div className="mb-3 text-xs text-zinc-500">{t("common.loading")}</div> : null}
+
+      <div className="mb-4">
+        <RecapBanners
+          moldChangeStartMs={machine.moldChange?.active ? machine.moldChange.startMs : null}
+          offlineForMin={machine.offlineForMin}
+          ongoingStopMin={machine.ongoingStopMin}
+        />
+      </div>
+
+      <RecapKpiRow
+        oeeAvg={machine.oee}
+        goodParts={machine.goodParts}
+        totalStops={Math.round(machine.stopMinutes)}
+        scrapParts={machine.scrap}
+      />
+
+      <div className="mt-4">
+        <RecapFullTimeline
+          rangeStart={timelineStart}
+          rangeEnd={timelineEnd}
+          segments={timelineSegments}
+          hasData={timelineHasData}
+          locale={locale}
+        />
+      </div>
+
+      <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
+        <RecapProductionBySku rows={machine.productionBySku} />
+        <RecapDowntimeTop rows={machine.downtimeTop} />
+      </div>
+
+      <div className="mt-4">
+        <RecapWorkOrders workOrders={machine.workOrders} />
+      </div>
+
+      <div className="mt-4">
+        <RecapMachineStatus heartbeat={machine.heartbeat} />
+      </div>
+    </div>
+  );
+}

app/(app)/recap/[machineId]/loading.tsx

@@ -0,0 +1,13 @@
+export default function LoadingRecapDetail() {
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="h-16 animate-pulse rounded-2xl border border-white/10 bg-black/40" />
+      <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <div key={index} className="h-24 animate-pulse rounded-2xl border border-white/10 bg-black/30" />
+        ))}
+      </div>
+      <div className="mt-4 h-48 animate-pulse rounded-2xl border border-white/10 bg-black/30" />
+    </div>
+  );
+}

app/(app)/recap/[machineId]/page.tsx

@@ -0,0 +1,35 @@
+import { notFound, redirect } from "next/navigation";
+import { requireSession } from "@/lib/auth/requireSession";
+import { getRecapMachineDetailCached, parseRecapDetailRangeInput } from "@/lib/recap/redesign";
+import RecapDetailClient from "./RecapDetailClient";
+
+export default async function RecapMachineDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ machineId: string }>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const session = await requireSession();
+  const { machineId } = await params;
+  if (!session) redirect(`/login?next=/recap/${machineId}`);
+
+  const rawSearchParams = (await searchParams) ?? {};
+  const input = parseRecapDetailRangeInput(rawSearchParams);
+
+  const initialData = await getRecapMachineDetailCached({
+    orgId: session.orgId,
+    machineId,
+    input,
+  });
+
+  if (!initialData) notFound();
+
+  return (
+    <RecapDetailClient
+      key={`${machineId}:${initialData.range.mode}:${initialData.range.start}:${initialData.range.end}`}
+      machineId={machineId}
+      initialData={initialData}
+    />
+  );
+}

app/(app)/recap/loading.tsx

@@ -0,0 +1,12 @@
+export default function LoadingRecapGrid() {
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="mb-4 h-24 animate-pulse rounded-2xl border border-white/10 bg-black/40" />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <div key={index} className="h-[220px] animate-pulse rounded-2xl border border-white/10 bg-white/5" />
+        ))}
+      </div>
+    </div>
+  );
+}

app/(app)/recap/page.tsx

@@ -1,46 +1,16 @@
 import { redirect } from "next/navigation";
 import { requireSession } from "@/lib/auth/requireSession";
-import { getRecapDataCached, parseRecapQuery } from "@/lib/recap/getRecapData";
-import RecapClient from "./RecapClient";
+import { getRecapSummaryCached } from "@/lib/recap/redesign";
+import RecapGridClient from "./RecapGridClient";
 
-export default async function RecapPage({
-  searchParams,
-}: {
-  searchParams?: Promise<Record<string, string | string[] | undefined>>;
-}) {
+export default async function RecapPage() {
   const session = await requireSession();
   if (!session) redirect("/login?next=/recap");
 
-  const params = (await searchParams) ?? {};
-  const getParam = (key: string) => {
-    const value = params[key];
-    return Array.isArray(value) ? value[0] : value;
-  };
-
-  const parsed = parseRecapQuery({
-    machineId: getParam("machineId"),
-    start: getParam("start"),
-    end: getParam("end"),
-    shift: getParam("shift"),
-  });
-
-  const initialData = await getRecapDataCached({
+  const initialData = await getRecapSummaryCached({
     orgId: session.orgId,
-    machineId: parsed.machineId,
-    start: parsed.start ?? undefined,
-    end: parsed.end ?? undefined,
-    shift: parsed.shift ?? undefined,
+    hours: 24,
   });
 
-  return (
-    <RecapClient
-      initialData={initialData}
-      initialFilters={{
-        machineId: parsed.machineId ?? "",
-        shift: parsed.shift ?? "",
-        start: parsed.start?.toISOString() ?? "",
-        end: parsed.end?.toISOString() ?? "",
-      }}
-    />
-  );
+  return <RecapGridClient initialData={initialData} />;
 }