init

2026-07-23 17:48:44 -05:00
commit 5830cd7ab5
33 changed files with 6866 additions and 0 deletions
--- a/web/src/views/Businesses.tsx
+++ b/web/src/views/Businesses.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import { api, type BusinessList, type BusinessStatus } from '../api.js';
+
+const TABS: { status: BusinessStatus; label: string }[] = [
+  { status: 'ACTIVE', label: 'Active' },
+  { status: 'SOLD', label: 'Sold' },
+  { status: 'INACTIVE', label: 'Inactive' },
+];
+
+export default function Businesses({ onOpen }: { onOpen: (id: string) => void }) {
+  const [tab, setTab] = useState<BusinessStatus>('ACTIVE');
+  const [search, setSearch] = useState('');
+  const [data, setData] = useState<BusinessList | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [scanning, setScanning] = useState(false);
+  const [scanMsg, setScanMsg] = useState<string | null>(null);
+  const [reload, setReload] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    api
+      .businesses(tab, search)
+      .then((res) => {
+        if (!cancelled) {
+          setData(res);
+          setError(null);
+        }
+      })
+      .catch((err: Error) => !cancelled && setError(err.message));
+    return () => {
+      cancelled = true;
+    };
+  }, [tab, search, reload]);
+
+  async function scan() {
+    setScanning(true);
+    setScanMsg(null);
+    try {
+      const res = await api.scan();
+      setScanMsg(
+        `Scanned ${res.scanned} · inserted ${res.inserted} · updated ${res.updated} · missing ${res.missing}`,
+      );
+      setReload((n) => n + 1);
+      setTimeout(() => setScanMsg(null), 8000);
+    } catch (err) {
+      setScanMsg((err as Error).message);
+    } finally {
+      setScanning(false);
+    }
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <div className="flex gap-1">
+          {TABS.map((t) => (
+            <button
+              key={t.status}
+              onClick={() => setTab(t.status)}
+              className={`rounded px-3 py-1.5 text-sm ${
+                tab === t.status
+                  ? 'bg-gray-900 text-white'
+                  : 'border border-gray-300 bg-white hover:bg-gray-100'
+              }`}
+            >
+              {t.label} ({data?.counts[t.status] ?? 0})
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search name…"
+            className="w-56 rounded border border-gray-300 px-2 py-1.5 text-sm"
+          />
+          <button
+            onClick={scan}
+            disabled={scanning}
+            className="rounded bg-gray-900 px-3 py-1.5 text-sm text-white disabled:opacity-50"
+          >
+            {scanning ? 'Scanning…' : 'Scan NAS now'}
+          </button>
+        </div>
+      </div>
+
+      {scanMsg && <p className="mb-3 text-sm text-gray-600">{scanMsg}</p>}
+      {error && <p className="mb-3 text-sm text-red-600">{error}</p>}
+
+      <table className="w-full border-collapse bg-white text-sm">
+        <thead>
+          <tr className="border-b border-gray-200 text-left text-xs uppercase tracking-wide text-gray-500">
+            <th className="px-3 py-2 font-medium">Name</th>
+            <th className="w-32 px-3 py-2 font-medium">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data?.businesses.map((b) => (
+            <tr
+              key={b.id}
+              onClick={() => onOpen(b.id)}
+              className="cursor-pointer border-b border-gray-100 hover:bg-gray-50"
+            >
+              <td className="px-3 py-1.5">{b.name}</td>
+              <td className="px-3 py-1.5 text-gray-500">{b.status}</td>
+            </tr>
+          ))}
+          {data && data.businesses.length === 0 && (
+            <tr>
+              <td colSpan={2} className="px-3 py-4 text-gray-500">
+                No businesses.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}