From 3ebd7efd7fce3d9e888c1771041f4962e9d64e78 Mon Sep 17 00:00:00 2001
From: toanhoang <toanhoang@appsrv01.toanhoang.local>
Date: Mon, 24 Aug 2026 20:28:30 -0400
Subject: [PATCH] Assets page: show model name instead of UUID, row index
 instead of raw ID, add filters

Model ID column now shows "Manufacturer Name" (looked up from the
already-fetched asset-models list) instead of the raw model_id UUID.
The ID column shows a 1-based row index within the current filtered view
instead of the AssetItem UUID -- the id itself was never actionable in
the UI (no per-row link/detail view exists), just clutter at this scale
(~600+ rows after the real-data import).

Added a filter bar: free-text search (matches serial_number or asset_tag,
case-insensitive substring), status dropdown, model dropdown -- all
client-side (assetItems is already the full list via useApiList, and
filtering ~600 rows in memory is trivial, no need for a server-side
filtered endpoint at this scale).

tsc/lint clean, no Vitest coverage -- same deviation as the rest of this
branch, see CLAUDE.md.
---
 src/app/assets/page.tsx | 93 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 87 insertions(+), 6 deletions(-)

diff --git a/src/app/assets/page.tsx b/src/app/assets/page.tsx
index 7218e08..19fd7bb 100644
--- a/src/app/assets/page.tsx
+++ b/src/app/assets/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useMemo, useState, type FormEvent } from "react";
 import { useApiList } from "@/hooks/use-api-list";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -85,6 +85,37 @@ export default function AssetsPage() {
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
 
+  // Filter/search state -- client-side only (assetItems is already the
+  // full list from useApiList, and this app's actual scale, ~600 rows
+  // after the 2026-08-24 real-data import, is well within "just filter
+  // in memory" territory; no need for a server-side filtered endpoint).
+  const [searchText, setSearchText] = useState("");
+  const [filterStatus, setFilterStatus] = useState("all");
+  const [filterModelId, setFilterModelId] = useState("all");
+
+  // modelId -> "Manufacturer Name" -- avoids showing the raw model_id UUID
+  // in the table (2026-08-25 -- was previously the literal FK value).
+  const modelNameById = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const m of assetModels) {
+      map.set(m.id, `${m.manufacturer} ${m.name}`);
+    }
+    return map;
+  }, [assetModels]);
+
+  const filteredAssetItems = useMemo(() => {
+    const query = searchText.trim().toLowerCase();
+    return assetItems.filter((item) => {
+      if (filterStatus !== "all" && item.status !== filterStatus) return false;
+      if (filterModelId !== "all" && item.model_id !== filterModelId) return false;
+      if (query) {
+        const haystack = `${item.serial_number} ${item.asset_tag ?? ""}`.toLowerCase();
+        if (!haystack.includes(query)) return false;
+      }
+      return true;
+    });
+  }, [assetItems, searchText, filterStatus, filterModelId]);
+
   const [importStatus, setImportStatus] = useState<"idle" | "uploading" | "done" | "error">(
     "idle"
   );
@@ -208,6 +239,56 @@ export default function AssetsPage() {
       <h1 className="text-xl font-semibold">Assets</h1>
 
       <section className="flex flex-col gap-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="search">Search (serial / asset tag)</Label>
+            <Input
+              id="search"
+              value={searchText}
+              onChange={(event) => setSearchText(event.target.value)}
+              placeholder="e.g. DANLAP001"
+              className="w-64"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="filterStatus">Status</Label>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger id="filterStatus" className="w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All</SelectItem>
+                <SelectItem value="in_stock">in_stock</SelectItem>
+                <SelectItem value="assigned">assigned</SelectItem>
+                <SelectItem value="repair">repair</SelectItem>
+                <SelectItem value="retired">retired</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="filterModel">Model</Label>
+            <Select value={filterModelId} onValueChange={setFilterModelId}>
+              <SelectTrigger id="filterModel" className="w-64">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All</SelectItem>
+                {assetModels.map((assetModel) => (
+                  <SelectItem key={assetModel.id} value={assetModel.id}>
+                    {assetModel.manufacturer} {assetModel.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <p className="pb-2 text-sm text-muted-foreground">
+            {filteredAssetItems.length} / {assetItems.length} assets
+          </p>
+        </div>
+
         {loading ? (
           <p className="text-sm text-muted-foreground">Loading...</p>
         ) : error ? (
@@ -216,10 +297,10 @@ export default function AssetsPage() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>ID</TableHead>
+                <TableHead>#</TableHead>
                 <TableHead>Serial Number</TableHead>
                 <TableHead>Asset Tag</TableHead>
-                <TableHead>Model ID</TableHead>
+                <TableHead>Model</TableHead>
                 <TableHead>Purchase Date</TableHead>
                 <TableHead>Warranty End Date</TableHead>
                 <TableHead>Status</TableHead>
@@ -230,12 +311,12 @@ export default function AssetsPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {assetItems.map((assetItem) => (
+              {filteredAssetItems.map((assetItem, index) => (
                 <TableRow key={assetItem.id}>
-                  <TableCell>{assetItem.id}</TableCell>
+                  <TableCell>{index + 1}</TableCell>
                   <TableCell>{assetItem.serial_number}</TableCell>
                   <TableCell>{assetItem.asset_tag ?? "-"}</TableCell>
-                  <TableCell>{assetItem.model_id}</TableCell>
+                  <TableCell>{modelNameById.get(assetItem.model_id) ?? assetItem.model_id}</TableCell>
                   <TableCell>{assetItem.purchase_date ?? "-"}</TableCell>
                   <TableCell>{assetItem.warranty_end_date ?? "-"}</TableCell>
                   <TableCell>{assetItem.status}</TableCell>