feat: add basic list+create UI for Employee, Vendor, AssetCategory

2026-08-03 06:54:41 -04:00
parent 0576d6e61c
commit 4bcd4da11b
3 changed files with 567 additions and 0 deletions
@@ -0,0 +1,168 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useApiList } from "@/hooks/use-api-list";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+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/asset-categories — snake_case per this repo's
+// API-boundary convention (see src/lib/asset-categories.ts's toRecord()).
+interface AssetCategoryRecord {
+  id: string;
+  name: string;
+  value_group: "high_value" | "low_value";
+  created_at: string;
+}
+
+const VALUE_GROUP_OPTIONS = ["high_value", "low_value"] as const;
+
+export default function AssetCategoriesPage() {
+  const {
+    data: assetCategories,
+    loading,
+    error,
+    refetch,
+  } = useApiList<AssetCategoryRecord>("/api/asset-categories");
+
+  const [name, setName] = useState("");
+  const [valueGroup, setValueGroup] = useState<(typeof VALUE_GROUP_OPTIONS)[number]>(
+    "high_value"
+  );
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitting(true);
+    setSubmitError(null);
+
+    try {
+      const response = await fetch("/api/asset-categories", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, valueGroup }),
+      });
+
+      let body: unknown;
+      try {
+        body = await response.json();
+      } catch {
+        body = null;
+      }
+
+      if (!response.ok) {
+        const message =
+          body !== null &&
+          typeof body === "object" &&
+          "error" in body &&
+          typeof (body as { error: unknown }).error === "string"
+            ? (body as { error: string }).error
+            : "Request failed";
+        setSubmitError(message);
+        return;
+      }
+
+      setName("");
+      setValueGroup("high_value");
+      refetch();
+    } catch {
+      setSubmitError("Request failed");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-8 p-6">
+      <h1 className="text-xl font-semibold">Asset Categories</h1>
+
+      <section className="flex flex-col gap-3">
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        ) : error ? (
+          <p className="text-sm text-destructive">{error}</p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Value Group</TableHead>
+                <TableHead>Created At</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {assetCategories.map((assetCategory) => (
+                <TableRow key={assetCategory.id}>
+                  <TableCell>{assetCategory.id}</TableCell>
+                  <TableCell>{assetCategory.name}</TableCell>
+                  <TableCell>{assetCategory.value_group}</TableCell>
+                  <TableCell>{assetCategory.created_at}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </section>
+
+      <section className="flex max-w-sm flex-col gap-4">
+        <h2 className="text-lg font-semibold">New Asset Category</h2>
+
+        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              required
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="valueGroup">Value Group</Label>
+            <Select
+              value={valueGroup}
+              onValueChange={(value) =>
+                setValueGroup(value as (typeof VALUE_GROUP_OPTIONS)[number])
+              }
+            >
+              <SelectTrigger id="valueGroup" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {VALUE_GROUP_OPTIONS.map((option) => (
+                  <SelectItem key={option} value={option}>
+                    {option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {submitError ? <p className="text-sm text-destructive">{submitError}</p> : null}
+
+          <Button type="submit" disabled={submitting}>
+            {submitting ? "Creating..." : "Create Asset Category"}
+          </Button>
+        </form>
+      </section>
+    </div>
+  );
+}