Add Milestones 1 & 2: full-stack POS foundation with admin UI

- Node/Express/TypeScript API under /api/v1 with JWT auth (login, refresh, logout, /me)
- Prisma schema: vendors, users, roles, products, categories, taxes, transactions
- SQLite for local dev; Postgres via docker-compose for production
- Full CRUD routes for vendors, users, categories, taxes, products with Zod validation and RBAC
- Paginated list endpoints scoped per vendor; refresh token rotation
- React/TypeScript admin SPA (Vite): login, protected routing, sidebar layout
- Pages: Dashboard, Catalog (tabbed Products/Categories/Taxes), Users, Vendor Settings
- Shared UI: Table, Modal, FormField, Btn, PageHeader components
- Multi-stage Dockerfile; docker-compose with Postgres healthcheck
- Seed script with demo vendor and owner account
- INSTRUCTIONS.md, ROADMAP.md, .claude/launch.json for dev server config

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/components/Table.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+interface Column<T> {
+  key: string;
+  header: string;
+  render?: (row: T) => React.ReactNode;
+}
+
+interface TableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  keyField: keyof T;
+  loading?: boolean;
+  emptyText?: string;
+}
+
+export function Table<T>({ columns, data, keyField, loading, emptyText = "No records found." }: TableProps<T>) {
+  return (
+    <div style={s.wrapper}>
+      <table style={s.table}>
+        <thead>
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} style={s.th}>
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading ? (
+            <tr>
+              <td colSpan={columns.length} style={s.empty}>
+                Loading…
+              </td>
+            </tr>
+          ) : data.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} style={s.empty}>
+                {emptyText}
+              </td>
+            </tr>
+          ) : (
+            data.map((row) => (
+              <tr key={String(row[keyField])} style={s.tr}>
+                {columns.map((col) => (
+                  <td key={col.key} style={s.td}>
+                    {col.render ? col.render(row) : String((row as Record<string, unknown>)[col.key] ?? "")}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+const s: Record<string, React.CSSProperties> = {
+  wrapper: {
+    overflowX: "auto",
+    border: "1px solid var(--color-border)",
+    borderRadius: "var(--radius)",
+    background: "var(--color-surface)",
+  },
+  table: { width: "100%", borderCollapse: "collapse", fontSize: 14 },
+  th: {
+    textAlign: "left",
+    padding: "10px 16px",
+    background: "#f8fafc",
+    borderBottom: "1px solid var(--color-border)",
+    fontWeight: 600,
+    color: "var(--color-text-muted)",
+    fontSize: 12,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+    whiteSpace: "nowrap",
+  },
+  tr: { borderBottom: "1px solid var(--color-border)" },
+  td: { padding: "10px 16px", verticalAlign: "middle" },
+  empty: { padding: "32px 16px", textAlign: "center", color: "var(--color-text-muted)" },
+};