stage 4

2026-04-21 09:29:44 -05:00
parent 41b06f89c0
commit fc5bce4868
19 changed files with 1469 additions and 190 deletions
@@ -1,16 +1,76 @@
-export default function OperatorHomePage() {
+import Link from "next/link";
+import { requireOperator } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+/**
+ * Operator dashboard. Because phones often have the browser open between scans,
+ * we want this page to answer one question fast: "what am I currently working
+ * on?" Active claims are the headline list; below that we show a generic
+ * "scan a card to start" hint so a fresh operator knows what to do.
+ */
+export default async function OperatorHomePage() {
+  const user = await requireOperator();
+
+  const claims = await prisma.operation.findMany({
+    where: { claimedByUserId: user.id, status: "in_progress" },
+    orderBy: { claimedAt: "desc" },
+    include: {
+      machine: { select: { name: true } },
+      part: {
+        select: {
+          code: true,
+          name: true,
+          assembly: {
+            select: {
+              code: true,
+              project: { select: { code: true, name: true } },
+            },
+          },
+        },
+      },
+    },
+  });
+
  return (
-    <div className="mx-auto max-w-3xl px-4 py-10 text-center space-y-6">
+    <div className="mx-auto max-w-3xl px-4 py-6 space-y-6">
      <div>
-        <h1 className="text-2xl font-semibold">Scan a traveler QR code</h1>
-        <p className="text-slate-500 mt-2">
-          Use your phone camera to scan the QR on a step card. It will open the step here so you can
-          start, log time, and close out.
+        <h1 className="text-2xl font-semibold">Hi, {user.name}</h1>
+        <p className="text-slate-500 mt-1 text-sm">
+          Scan a QR card with your phone camera to start a step, or continue an active one below.
        </p>
      </div>
-      <div className="rounded-xl bg-white border border-slate-200 p-6 text-slate-500 text-sm">
-        <p>Your active steps will appear here once you claim them.</p>
-      </div>
+
+      {claims.length === 0 ? (
+        <div className="rounded-xl bg-white border border-slate-200 p-6 text-slate-600 text-sm text-center">
+          You have no active steps. Scan a traveler QR to begin.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wide">
+            Active ({claims.length})
+          </h2>
+          {claims.map((c) => (
+            <Link
+              key={c.id}
+              href={`/op/scan/${c.qrToken}`}
+              className="block rounded-xl bg-white border border-slate-200 p-4 hover:border-slate-900 hover:shadow-sm transition"
+            >
+              <div className="text-xs text-slate-500">
+                {c.part.assembly.project.code} · {c.part.assembly.code}
+              </div>
+              <div className="font-medium mt-0.5">{c.part.name}</div>
+              <div className="text-sm text-slate-700 mt-1">
+                Step {c.sequence}: {c.name}
+              </div>
+              <div className="text-xs text-slate-500 mt-1 flex flex-wrap gap-x-3">
+                <span className="font-mono">{c.part.code}</span>
+                {c.machine ? <span>{c.machine.name}</span> : null}
+                {c.claimedAt ? <span>since {new Date(c.claimedAt).toLocaleTimeString()}</span> : null}
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
    </div>
  );
 }