From 77dbd154502d689bd0eff81238d7fd41787967fe Mon Sep 17 00:00:00 2001
From: toanhoang <toanhoang@appsrv01.toanhoang.local>
Date: Wed, 19 Aug 2026 22:07:25 -0400
Subject: [PATCH] feat: add Inventory Scans review page

List + inline edit (model within category, area, assignee, specs, asset tag, serial number) + delete. No create form -- creation only happens via the bot.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/inventory-scans/page.tsx | 347 +++++++++++++++++++++++++++++++
 src/components/nav.tsx           |   1 +
 2 files changed, 348 insertions(+)
 create mode 100644 src/app/inventory-scans/page.tsx

diff --git a/src/app/inventory-scans/page.tsx b/src/app/inventory-scans/page.tsx
new file mode 100644
index 0000000..f449b5d
--- /dev/null
+++ b/src/app/inventory-scans/page.tsx
@@ -0,0 +1,347 @@
+"use client";
+
+import { useState } from "react";
+import { useApiList } from "@/hooks/use-api-list";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+// Shape returned by GET /api/inventory-scans — snake_case per this repo's
+// API-boundary convention (see src/lib/inventory-scans.ts's toRecord()).
+interface InventoryScanRecord {
+  id: string;
+  category_id: string;
+  category_name: string;
+  model_id: string;
+  model_name: string;
+  model_manufacturer: string;
+  area_id: string | null;
+  area_name: string | null;
+  assigned_employee_id: string | null;
+  assigned_employee_name: string | null;
+  asset_tag: string | null;
+  serial_number: string | null;
+  specs: Record<string, unknown>;
+  photo_file_id: string | null;
+  created_at: string;
+}
+
+interface AreaRecord {
+  id: string;
+  name: string;
+  team: string | null;
+}
+
+interface EmployeeRecord {
+  id: string;
+  name: string;
+}
+
+interface AssetModelRecord {
+  id: string;
+  category_id: string;
+  manufacturer: string;
+  name: string;
+}
+
+const NO_AREA_VALUE = "none";
+const NO_EMPLOYEE_VALUE = "none";
+
+export default function InventoryScansPage() {
+  const { data: scans, loading, error, refetch } = useApiList<InventoryScanRecord>(
+    "/api/inventory-scans"
+  );
+  const { data: areas } = useApiList<AreaRecord>("/api/areas");
+  const { data: employees } = useApiList<EmployeeRecord>("/api/employees");
+  const { data: models } = useApiList<AssetModelRecord>("/api/asset-models");
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editModelId, setEditModelId] = useState("");
+  const [editAreaId, setEditAreaId] = useState(NO_AREA_VALUE);
+  const [editEmployeeId, setEditEmployeeId] = useState(NO_EMPLOYEE_VALUE);
+  const [editAssetTag, setEditAssetTag] = useState("");
+  const [editSerialNumber, setEditSerialNumber] = useState("");
+  const [editSpecs, setEditSpecs] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+  const [rowError, setRowError] = useState<string | null>(null);
+
+  function startEdit(scan: InventoryScanRecord) {
+    setEditingId(scan.id);
+    setEditModelId(scan.model_id);
+    setEditAreaId(scan.area_id ?? NO_AREA_VALUE);
+    setEditEmployeeId(scan.assigned_employee_id ?? NO_EMPLOYEE_VALUE);
+    setEditAssetTag(scan.asset_tag ?? "");
+    setEditSerialNumber(scan.serial_number ?? "");
+    setEditSpecs(
+      Object.fromEntries(Object.entries(scan.specs).map(([k, v]) => [k, String(v ?? "")]))
+    );
+    setRowError(null);
+  }
+
+  function cancelEdit() {
+    setEditingId(null);
+    setRowError(null);
+  }
+
+  async function saveEdit(scan: InventoryScanRecord) {
+    setSaving(true);
+    setRowError(null);
+    try {
+      const specs: Record<string, unknown> = {};
+      for (const [k, v] of Object.entries(editSpecs)) {
+        const asNumber = Number(v);
+        specs[k] = v !== "" && !Number.isNaN(asNumber) && /^-?\d+(\.\d+)?$/.test(v) ? asNumber : v;
+      }
+
+      const response = await fetch(`/api/inventory-scans/${scan.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          modelId: editModelId,
+          areaId: editAreaId === NO_AREA_VALUE ? null : editAreaId,
+          assignedEmployeeId: editEmployeeId === NO_EMPLOYEE_VALUE ? null : editEmployeeId,
+          assetTag: editAssetTag.trim() === "" ? null : editAssetTag.trim(),
+          serialNumber: editSerialNumber.trim() === "" ? null : editSerialNumber.trim(),
+          specs,
+        }),
+      });
+
+      let body: unknown;
+      try {
+        body = await response.json();
+      } catch {
+        body = null;
+      }
+
+      if (!response.ok) {
+        const message =
+          body !== null && typeof body === "object" && "error" in body
+            ? String((body as { error: unknown }).error)
+            : "Request failed";
+        setRowError(message);
+        return;
+      }
+
+      setEditingId(null);
+      refetch();
+    } catch {
+      setRowError("Request failed");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm("Xoá bản ghi này?")) return;
+    const response = await fetch(`/api/inventory-scans/${id}`, { method: "DELETE" });
+    if (response.ok) {
+      refetch();
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <h1 className="text-xl font-semibold">Inventory Scans (Move Project)</h1>
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      ) : error ? (
+        <p className="text-sm text-destructive">{error}</p>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Ảnh</TableHead>
+              <TableHead>Category</TableHead>
+              <TableHead>Model</TableHead>
+              <TableHead>Asset Tag</TableHead>
+              <TableHead>Serial Number</TableHead>
+              <TableHead>Specs</TableHead>
+              <TableHead>Area</TableHead>
+              <TableHead>Assigned to</TableHead>
+              <TableHead>Created At</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {scans.map((scan) => {
+              const isEditing = editingId === scan.id;
+              const modelsInCategory = models.filter((m) => m.category_id === scan.category_id);
+
+              return (
+                <TableRow key={scan.id}>
+                  <TableCell>
+                    {scan.photo_file_id ? (
+                      <a
+                        href={`/api/inventory-scans/${scan.id}/photo`}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-blue-500 underline"
+                      >
+                        Xem ảnh
+                      </a>
+                    ) : (
+                      "-"
+                    )}
+                  </TableCell>
+                  <TableCell>{scan.category_name}</TableCell>
+                  <TableCell>
+                    {isEditing ? (
+                      <Select value={editModelId} onValueChange={setEditModelId}>
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {modelsInCategory.map((m) => (
+                            <SelectItem key={m.id} value={m.id}>
+                              {m.manufacturer} {m.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      `${scan.model_manufacturer} ${scan.model_name}`
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {isEditing ? (
+                      <Input
+                        className="h-8 w-28"
+                        value={editAssetTag}
+                        onChange={(e) => setEditAssetTag(e.target.value)}
+                        placeholder="(chưa có)"
+                      />
+                    ) : (
+                      scan.asset_tag ?? "-"
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {isEditing ? (
+                      <Input
+                        className="h-8 w-32"
+                        value={editSerialNumber}
+                        onChange={(e) => setEditSerialNumber(e.target.value)}
+                        placeholder="(chưa có)"
+                      />
+                    ) : (
+                      scan.serial_number ?? "-"
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {isEditing ? (
+                      <div className="flex flex-col gap-1">
+                        {Object.keys(editSpecs).length === 0 ? (
+                          <span className="text-muted-foreground text-xs">(không có)</span>
+                        ) : (
+                          Object.entries(editSpecs).map(([key, value]) => (
+                            <div key={key} className="flex items-center gap-1">
+                              <span className="w-16 text-xs text-muted-foreground">{key}</span>
+                              <Input
+                                className="h-7"
+                                value={value}
+                                onChange={(e) =>
+                                  setEditSpecs((prev) => ({ ...prev, [key]: e.target.value }))
+                                }
+                              />
+                            </div>
+                          ))
+                        )}
+                      </div>
+                    ) : Object.keys(scan.specs).length === 0 ? (
+                      "-"
+                    ) : (
+                      Object.entries(scan.specs)
+                        .map(([k, v]) => `${k}: ${v}`)
+                        .join(", ")
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {isEditing ? (
+                      <Select value={editAreaId} onValueChange={setEditAreaId}>
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value={NO_AREA_VALUE}>None</SelectItem>
+                          {areas.map((a) => (
+                            <SelectItem key={a.id} value={a.id}>
+                              {a.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      scan.area_name ?? "-"
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {isEditing ? (
+                      <Select value={editEmployeeId} onValueChange={setEditEmployeeId}>
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value={NO_EMPLOYEE_VALUE}>None</SelectItem>
+                          {employees.map((e) => (
+                            <SelectItem key={e.id} value={e.id}>
+                              {e.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      scan.assigned_employee_name ?? "-"
+                    )}
+                  </TableCell>
+                  <TableCell>{scan.created_at}</TableCell>
+                  <TableCell>
+                    {isEditing ? (
+                      <div className="flex flex-col gap-1">
+                        <div className="flex gap-1">
+                          <Button size="sm" disabled={saving} onClick={() => saveEdit(scan)}>
+                            Save
+                          </Button>
+                          <Button size="sm" variant="outline" onClick={cancelEdit}>
+                            Cancel
+                          </Button>
+                        </div>
+                        {rowError ? <p className="text-xs text-destructive">{rowError}</p> : null}
+                      </div>
+                    ) : (
+                      <div className="flex gap-1">
+                        <Button size="sm" variant="outline" onClick={() => startEdit(scan)}>
+                          Edit
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => handleDelete(scan.id)}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    )}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index aacbf2e..5fffc41 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -22,6 +22,7 @@ const ENTITY_LINKS = [
   { href: "/requests", label: "Requests" },
   { href: "/assignments", label: "Assignments" },
   { href: "/maintenance-records", label: "Maintenance Records" },
+  { href: "/inventory-scans", label: "Inventory Scans (Move)" },
 ] as const;
 
 export function Nav() {