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/pages/LoginPage.tsx

@@ -0,0 +1,128 @@
+import React, { useState, FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await login(email, password);
+      navigate("/", { replace: true });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={styles.page}>
+      <div style={styles.card}>
+        <h1 style={styles.title}>POS Admin</h1>
+        <p style={styles.subtitle}>Sign in to your account</p>
+        <form onSubmit={handleSubmit} style={styles.form}>
+          {error && <div style={styles.error}>{error}</div>}
+          <label style={styles.label}>
+            Email
+            <input
+              style={styles.input}
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoFocus
+              autoComplete="email"
+            />
+          </label>
+          <label style={styles.label}>
+            Password
+            <input
+              style={styles.input}
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              autoComplete="current-password"
+            />
+          </label>
+          <button style={styles.button} type="submit" disabled={loading}>
+            {loading ? "Signing in…" : "Sign in"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  page: {
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "var(--color-bg)",
+  },
+  card: {
+    background: "var(--color-surface)",
+    borderRadius: "var(--radius)",
+    boxShadow: "var(--shadow)",
+    border: "1px solid var(--color-border)",
+    padding: "40px",
+    width: "100%",
+    maxWidth: "380px",
+  },
+  title: {
+    fontSize: "22px",
+    fontWeight: 700,
+    marginBottom: "4px",
+  },
+  subtitle: {
+    color: "var(--color-text-muted)",
+    marginBottom: "24px",
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+  },
+  label: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    fontWeight: 500,
+  },
+  input: {
+    border: "1px solid var(--color-border)",
+    borderRadius: "var(--radius)",
+    padding: "8px 12px",
+    outline: "none",
+    fontSize: "14px",
+  },
+  button: {
+    background: "var(--color-primary)",
+    color: "#fff",
+    border: "none",
+    borderRadius: "var(--radius)",
+    padding: "10px",
+    fontWeight: 600,
+    fontSize: "14px",
+    marginTop: "4px",
+  },
+  error: {
+    background: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "var(--color-danger)",
+    borderRadius: "var(--radius)",
+    padding: "10px 12px",
+    fontSize: "13px",
+  },
+};