Add multi-vendor capability with admin vendor management

- Add resolveVendorId() helper — admin can pass ?vendorId= to scope catalog operations to any vendor; other roles locked to JWT vendorId - Thread ?vendorId= through products, categories, taxes, events routes - Add DELETE /vendors/:id (admin only) with cascade-safe guard: blocks if vendor has users or transactions; otherwise cascade-deletes EventProduct → EventTax → Event → Product → Tax → Category → Vendor - Rewrite VendorPage: admin gets full CRUD list, vendor gets own settings - Add VendorFilter shared component (admin-only dropdown) - Integrate VendorFilter into Catalog, Users, and Events pages so admin can switch vendor context for all create/read operations Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-21 07:59:58 -05:00
parent 65eb405cf1
commit e1b1a82e07
11 changed files with 379 additions and 195 deletions
--- a/client/src/components/VendorFilter.tsx
+++ b/client/src/components/VendorFilter.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+import { api } from "../api/client";
+import { useAuth } from "../context/AuthContext";
+
+interface Vendor { id: string; name: string; }
+
+interface Props {
+  vendorId: string;
+  onChange: (vendorId: string) => void;
+}
+
+/**
+ * Dropdown that lets admin users switch vendor context.
+ * Renders nothing for non-admin roles.
+ */
+export function VendorFilter({ vendorId, onChange }: Props) {
+  const { user } = useAuth();
+  const [vendors, setVendors] = useState<Vendor[]>([]);
+
+  useEffect(() => {
+    if (user?.role !== "admin") return;
+    api.get<{ data: Vendor[] }>("/vendors?limit=200")
+      .then((r) => setVendors(r.data))
+      .catch(console.error);
+  }, [user?.role]);
+
+  if (user?.role !== "admin" || vendors.length === 0) return null;
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      <span style={{ fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>Vendor:</span>
+      <select
+        style={sel}
+        value={vendorId}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        {vendors.map((v) => (
+          <option key={v.id} value={v.id}>{v.name}</option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+const sel: React.CSSProperties = {
+  border: "1px solid var(--color-border)",
+  borderRadius: "var(--radius)",
+  padding: "5px 8px",
+  fontSize: 13,
+  background: "var(--color-surface)",
+  cursor: "pointer",
+  minWidth: 140,
+};
--- a/client/src/pages/CatalogPage.tsx
+++ b/client/src/pages/CatalogPage.tsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { api } from "../api/client";
+import { useAuth } from "../context/AuthContext";
 import { Table } from "../components/Table";
 import { Modal } from "../components/Modal";
 import { PageHeader } from "../components/PageHeader";
 import { FormField, inputStyle, Btn } from "../components/FormField";
+import { VendorFilter } from "../components/VendorFilter";

 interface Category { id: string; name: string; }
 interface Tax { id: string; name: string; rate: number; }
@@ -16,31 +18,36 @@ interface ApiList<T> { data: T[]; }
 type Tab = "products" | "categories" | "taxes";

 export default function CatalogPage() {
+  const { user } = useAuth();
  const [tab, setTab] = useState<Tab>("products");
+  const [vendorId, setVendorId] = useState(user?.vendorId ?? "");

  return (
    <div style={{ padding: "32px 28px" }}>
-      <PageHeader title="Catalog" subtitle="Products, categories, and tax rates" />
+      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 4 }}>
+        <PageHeader title="Catalog" subtitle="Products, categories, and tax rates" />
+        <VendorFilter vendorId={vendorId} onChange={setVendorId} />
+      </div>
      <div style={tabs}>
        {(["products", "categories", "taxes"] as Tab[]).map((t) => (
-          <button
-            key={t}
-            style={{ ...tabBtn, ...(tab === t ? tabBtnActive : {}) }}
-            onClick={() => setTab(t)}
-          >
+          <button key={t} style={{ ...tabBtn, ...(tab === t ? tabBtnActive : {}) }} onClick={() => setTab(t)}>
            {t.charAt(0).toUpperCase() + t.slice(1)}
          </button>
        ))}
      </div>
-      {tab === "products" && <ProductsTab />}
-      {tab === "categories" && <CategoriesTab />}
-      {tab === "taxes" && <TaxesTab />}
+      {tab === "products" && <ProductsTab vendorId={vendorId} />}
+      {tab === "categories" && <CategoriesTab vendorId={vendorId} />}
+      {tab === "taxes" && <TaxesTab vendorId={vendorId} />}
    </div>
  );
 }

+function qs(vendorId: string) {
+  return vendorId ? `?vendorId=${encodeURIComponent(vendorId)}` : "";
+}
+
 // ─── Products ──────────────────────────────────────────────────────────────
-function ProductsTab() {
+function ProductsTab({ vendorId }: { vendorId: string }) {
  const [products, setProducts] = useState<Product[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [taxes, setTaxes] = useState<Tax[]>([]);
@@ -53,16 +60,17 @@ function ProductsTab() {

  const load = useCallback(async () => {
    setLoading(true);
+    const q = qs(vendorId);
    const [p, c, t] = await Promise.all([
-      api.get<ApiList<Product>>("/products"),
-      api.get<ApiList<Category>>("/categories"),
-      api.get<ApiList<Tax>>("/taxes"),
+      api.get<ApiList<Product>>(`/products${q}`),
+      api.get<ApiList<Category>>(`/categories${q}`),
+      api.get<ApiList<Tax>>(`/taxes${q}`),
    ]);
    setProducts(p.data);
    setCategories(c.data);
    setTaxes(t.data);
    setLoading(false);
-  }, []);
+  }, [vendorId]);

  useEffect(() => { load(); }, [load]);

@@ -70,8 +78,7 @@ function ProductsTab() {
  const openEdit = (p: Product) => {
    setSelected(p);
    setForm({ name: p.name, sku: p.sku ?? "", price: String(p.price), categoryId: p.category?.id ?? "", taxId: p.tax?.id ?? "", description: p.description ?? "" });
-    setError("");
-    setModal("edit");
+    setError(""); setModal("edit");
  };

  const handleSubmit = async (e: React.FormEvent) => {
@@ -80,8 +87,9 @@ function ProductsTab() {
    setError("");
    try {
      const payload = { ...form, price: parseFloat(form.price), categoryId: form.categoryId || null, taxId: form.taxId || null };
-      if (modal === "create") await api.post("/products", payload);
-      else if (selected) await api.put(`/products/${selected.id}`, payload);
+      const q = qs(vendorId);
+      if (modal === "create") await api.post(`/products${q}`, payload);
+      else if (selected) await api.put(`/products/${selected.id}${q}`, payload);
      setModal(null);
      load();
    } catch (err) { setError(err instanceof Error ? err.message : "Save failed"); }
@@ -110,9 +118,7 @@ function ProductsTab() {

  return (
    <>
-      <div style={{ marginBottom: 16 }}>
-        <Btn onClick={openCreate}>+ Add Product</Btn>
-      </div>
+      <div style={{ marginBottom: 16 }}><Btn onClick={openCreate}>+ Add Product</Btn></div>
      <Table columns={columns} data={products} keyField="id" loading={loading} />
      {modal && (
        <Modal title={modal === "create" ? "Add Product" : "Edit Product"} onClose={() => setModal(null)}>
@@ -122,12 +128,8 @@ function ProductsTab() {
              <input style={inputStyle} value={form.name} onChange={f("name", setForm)} required />
            </FormField>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
-              <FormField label="SKU">
-                <input style={inputStyle} value={form.sku} onChange={f("sku", setForm)} />
-              </FormField>
-              <FormField label="Price" required>
-                <input style={inputStyle} type="number" min="0" step="0.01" value={form.price} onChange={f("price", setForm)} required />
-              </FormField>
+              <FormField label="SKU"><input style={inputStyle} value={form.sku} onChange={f("sku", setForm)} /></FormField>
+              <FormField label="Price" required><input style={inputStyle} type="number" min="0" step="0.01" value={form.price} onChange={f("price", setForm)} required /></FormField>
            </div>
            <FormField label="Description">
              <textarea style={{ ...inputStyle, resize: "vertical", minHeight: 60 }} value={form.description} onChange={f("description", setForm)} />
@@ -158,7 +160,7 @@ function ProductsTab() {
 }

 // ─── Categories ────────────────────────────────────────────────────────────
-function CategoriesTab() {
+function CategoriesTab({ vendorId }: { vendorId: string }) {
  const [items, setItems] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState<"create" | "edit" | null>(null);
@@ -169,10 +171,10 @@ function CategoriesTab() {

  const load = useCallback(async () => {
    setLoading(true);
-    const res = await api.get<ApiList<Category>>("/categories");
+    const res = await api.get<ApiList<Category>>(`/categories${qs(vendorId)}`);
    setItems(res.data);
    setLoading(false);
-  }, []);
+  }, [vendorId]);

  useEffect(() => { load(); }, [load]);

@@ -181,13 +183,12 @@ function CategoriesTab() {

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
-    setSaving(true);
-    setError("");
+    setSaving(true); setError("");
    try {
-      if (modal === "create") await api.post("/categories", { name });
-      else if (selected) await api.put(`/categories/${selected.id}`, { name });
-      setModal(null);
-      load();
+      const q = qs(vendorId);
+      if (modal === "create") await api.post(`/categories${q}`, { name });
+      else if (selected) await api.put(`/categories/${selected.id}${q}`, { name });
+      setModal(null); load();
    } catch (err) { setError(err instanceof Error ? err.message : "Save failed"); }
    finally { setSaving(false); }
  };
@@ -225,7 +226,7 @@ function CategoriesTab() {
 }

 // ─── Taxes ─────────────────────────────────────────────────────────────────
-function TaxesTab() {
+function TaxesTab({ vendorId }: { vendorId: string }) {
  const [items, setItems] = useState<Tax[]>([]);
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState<"create" | "edit" | null>(null);
@@ -236,10 +237,10 @@ function TaxesTab() {

  const load = useCallback(async () => {
    setLoading(true);
-    const res = await api.get<ApiList<Tax>>("/taxes");
+    const res = await api.get<ApiList<Tax>>(`/taxes${qs(vendorId)}`);
    setItems(res.data);
    setLoading(false);
-  }, []);
+  }, [vendorId]);

  useEffect(() => { load(); }, [load]);

@@ -248,14 +249,13 @@ function TaxesTab() {

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
-    setSaving(true);
-    setError("");
+    setSaving(true); setError("");
    try {
      const payload = { name: form.name, rate: parseFloat(form.rate) };
-      if (modal === "create") await api.post("/taxes", payload);
-      else if (selected) await api.put(`/taxes/${selected.id}`, payload);
-      setModal(null);
-      load();
+      const q = qs(vendorId);
+      if (modal === "create") await api.post(`/taxes${q}`, payload);
+      else if (selected) await api.put(`/taxes/${selected.id}${q}`, payload);
+      setModal(null); load();
    } catch (err) { setError(err instanceof Error ? err.message : "Save failed"); }
    finally { setSaving(false); }
  };
@@ -311,20 +311,6 @@ const errStyle: React.CSSProperties = {
  color: "var(--color-danger)", borderRadius: "var(--radius)",
  padding: "10px 12px", fontSize: 13, marginBottom: 16,
 };
-
-const tabs: React.CSSProperties = {
-  display: "flex", gap: 4, marginBottom: 20,
-  borderBottom: "1px solid var(--color-border)", paddingBottom: 0,
-};
-
-const tabBtn: React.CSSProperties = {
-  padding: "8px 16px", background: "none", border: "none",
-  borderBottom: "2px solid transparent", cursor: "pointer",
-  fontWeight: 500, fontSize: 14, color: "var(--color-text-muted)",
-  marginBottom: -1,
-};
-
-const tabBtnActive: React.CSSProperties = {
-  color: "var(--color-primary)",
-  borderBottomColor: "var(--color-primary)",
-};
+const tabs: React.CSSProperties = { display: "flex", gap: 4, marginBottom: 20, borderBottom: "1px solid var(--color-border)" };
+const tabBtn: React.CSSProperties = { padding: "8px 16px", background: "none", border: "none", borderBottom: "2px solid transparent", cursor: "pointer", fontWeight: 500, fontSize: 14, color: "var(--color-text-muted)", marginBottom: -1 };
+const tabBtnActive: React.CSSProperties = { color: "var(--color-primary)", borderBottomColor: "var(--color-primary)" };
--- a/client/src/pages/EventsPage.tsx
+++ b/client/src/pages/EventsPage.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { api } from "../api/client";
+import { useAuth } from "../context/AuthContext";
 import { PageHeader } from "../components/PageHeader";
+import { VendorFilter } from "../components/VendorFilter";
 import { Table } from "../components/Table";
 import { Modal } from "../components/Modal";
 import { FormField, Btn } from "../components/FormField";
@@ -50,6 +52,8 @@ interface EventSummary {
 // ─── Main Page ──────────────────────────────────────────────────────────────

 export default function EventsPage() {
+  const { user } = useAuth();
+  const [vendorId, setVendorId] = useState(user?.vendorId ?? "");
  const [events, setEvents] = useState<Event[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
@@ -61,7 +65,8 @@ export default function EventsPage() {
  const load = useCallback(async () => {
    setLoading(true);
    try {
-      const res = await api.get<ApiList<Event>>("/events?limit=50");
+      const q = vendorId && user?.role === "admin" ? `?vendorId=${encodeURIComponent(vendorId)}&limit=50` : "?limit=50";
+      const res = await api.get<ApiList<Event>>(`/events${q}`);
      setEvents(res.data);
      setTotal(res.pagination.total);
    } catch (err) {
@@ -69,7 +74,7 @@ export default function EventsPage() {
    } finally {
      setLoading(false);
    }
-  }, []);
+  }, [vendorId, user?.role]);

  useEffect(() => { load(); }, [load]);

@@ -120,11 +125,14 @@ export default function EventsPage() {

  return (
    <div style={{ padding: "32px 28px" }}>
-      <PageHeader
-        title="Events"
-        subtitle={`${total} event${total !== 1 ? "s" : ""}`}
-        action={<Btn onClick={() => { setEditing(null); setShowForm(true); }}>+ New Event</Btn>}
-      />
+      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 4 }}>
+        <PageHeader
+          title="Events"
+          subtitle={`${total} event${total !== 1 ? "s" : ""}`}
+          action={<Btn onClick={() => { setEditing(null); setShowForm(true); }}>+ New Event</Btn>}
+        />
+        <VendorFilter vendorId={vendorId} onChange={setVendorId} />
+      </div>

      <Table columns={columns} data={events} keyField="id" loading={loading} emptyText="No events yet." />

--- a/client/src/pages/UsersPage.tsx
+++ b/client/src/pages/UsersPage.tsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { api } from "../api/client";
+import { useAuth } from "../context/AuthContext";
 import { Table } from "../components/Table";
 import { Modal } from "../components/Modal";
 import { PageHeader } from "../components/PageHeader";
 import { FormField, inputStyle, Btn } from "../components/FormField";
+import { VendorFilter } from "../components/VendorFilter";

 interface Role { id: string; name: string; }
 interface User {
@@ -11,14 +13,17 @@ interface User {
  name: string;
  email: string;
  role: Role;
+  vendor?: { id: string; name: string };
  createdAt: string;
 }

 interface ApiList<T> { data: T[]; pagination: { total: number; page: number; limit: number; totalPages: number }; }

-const EMPTY_FORM = { name: "", email: "", password: "", roleId: "" };
+const EMPTY_FORM = { name: "", email: "", password: "", roleId: "", vendorId: "" };

 export default function UsersPage() {
+  const { user: me } = useAuth();
+  const [vendorId, setVendorId] = useState(me?.vendorId ?? "");
  const [users, setUsers] = useState<User[]>([]);
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(true);
@@ -31,8 +36,9 @@ export default function UsersPage() {
  const load = useCallback(async () => {
    setLoading(true);
    try {
+      const q = vendorId && me?.role === "admin" ? `?vendorId=${encodeURIComponent(vendorId)}` : "";
      const [usersRes, rolesRes] = await Promise.all([
-        api.get<ApiList<User>>("/users"),
+        api.get<ApiList<User>>(`/users${q}`),
        api.get<Role[]>("/users/roles/list"),
      ]);
      setUsers(usersRes.data);
@@ -42,13 +48,13 @@ export default function UsersPage() {
    } finally {
      setLoading(false);
    }
-  }, []);
+  }, [vendorId, me?.role]);

  useEffect(() => { load(); }, [load]);

  const openCreate = () => {
    setSelected(null);
-    setForm(EMPTY_FORM);
+    setForm({ ...EMPTY_FORM, vendorId });
    setError("");
    setModal("create");
  };
@@ -66,7 +72,7 @@ export default function UsersPage() {
    setError("");
    try {
      if (modal === "create") {
-        await api.post("/users", form);
+        await api.post("/users", { ...form, vendorId: form.vendorId || undefined });
      } else if (selected) {
        const patch: Record<string, string> = { name: form.name, roleId: form.roleId };
        if (form.password) patch.password = form.password;
@@ -91,9 +97,12 @@ export default function UsersPage() {
    }
  };

+  const isAdmin = me?.role === "admin";
+
  const columns = [
    { key: "name", header: "Name" },
    { key: "email", header: "Email" },
+    ...(isAdmin ? [{ key: "vendor", header: "Vendor", render: (u: User) => u.vendor?.name ?? "—" }] : []),
    {
      key: "role",
      header: "Role",
@@ -120,11 +129,14 @@ export default function UsersPage() {

  return (
    <div style={{ padding: "32px 28px" }}>
-      <PageHeader
-        title="Users"
-        subtitle="Manage staff accounts and roles"
-        action={<Btn onClick={openCreate}>+ Add User</Btn>}
-      />
+      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 16 }}>
+        <PageHeader
+          title="Users"
+          subtitle="Manage staff accounts and roles"
+          action={<Btn onClick={openCreate}>+ Add User</Btn>}
+        />
+        <VendorFilter vendorId={vendorId} onChange={setVendorId} />
+      </div>
      <Table columns={columns} data={users} keyField="id" loading={loading} />

      {modal && (
--- a/client/src/pages/VendorPage.tsx
+++ b/client/src/pages/VendorPage.tsx
@@ -1,6 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { api } from "../api/client";
+import { useAuth } from "../context/AuthContext";
 import { PageHeader } from "../components/PageHeader";
+import { Table } from "../components/Table";
+import { Modal } from "../components/Modal";
 import { FormField, inputStyle, Btn } from "../components/FormField";

 interface Vendor {
@@ -12,17 +15,131 @@ interface Vendor {
  updatedAt: string;
 }

-export default function VendorPage() {
+interface ApiList<T> { data: T[]; pagination: { total: number } }
+
+const EMPTY_FORM = { name: "", businessNum: "" };
+
+// ─── Admin view: list all vendors, create/edit/delete ────────────────────────
+
+function AdminVendorPage() {
+  const [vendors, setVendors] = useState<Vendor[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [modal, setModal] = useState<"create" | "edit" | null>(null);
+  const [selected, setSelected] = useState<Vendor | null>(null);
+  const [form, setForm] = useState(EMPTY_FORM);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await api.get<ApiList<Vendor>>("/vendors?limit=100");
+      setVendors(res.data);
+      setTotal(res.pagination.total);
+    } catch (err) { console.error(err); }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const openCreate = () => {
+    setSelected(null);
+    setForm(EMPTY_FORM);
+    setError("");
+    setModal("create");
+  };
+
+  const openEdit = (v: Vendor) => {
+    setSelected(v);
+    setForm({ name: v.name, businessNum: v.businessNum ?? "" });
+    setError("");
+    setModal("edit");
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Delete this vendor? All associated data will be removed.")) return;
+    try {
+      await api.delete(`/vendors/${id}`);
+      load();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : "Delete failed");
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError("");
+    try {
+      if (modal === "edit" && selected) {
+        await api.put(`/vendors/${selected.id}`, form);
+      } else {
+        await api.post("/vendors", form);
+      }
+      setModal(null);
+      load();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Save failed");
+    } finally { setSaving(false); }
+  };
+
+  const columns = [
+    { key: "name", header: "Name", render: (v: Vendor) => v.name },
+    { key: "businessNum", header: "Business No.", render: (v: Vendor) => v.businessNum ?? "—" },
+    { key: "createdAt", header: "Created", render: (v: Vendor) => new Date(v.createdAt).toLocaleDateString() },
+    {
+      key: "actions", header: "", render: (v: Vendor) => (
+        <div style={{ display: "flex", gap: 6 }}>
+          <Btn size="sm" onClick={() => openEdit(v)}>Edit</Btn>
+          <Btn size="sm" variant="danger" onClick={() => handleDelete(v.id)}>Delete</Btn>
+        </div>
+      )
+    },
+  ];
+
+  return (
+    <div style={{ padding: "32px 28px" }}>
+      <PageHeader
+        title="Vendors"
+        subtitle={`${total} vendor${total !== 1 ? "s" : ""}`}
+        action={<Btn onClick={openCreate}>+ New Vendor</Btn>}
+      />
+
+      <Table columns={columns} data={vendors} keyField="id" loading={loading} emptyText="No vendors found." />
+
+      {modal && (
+        <Modal title={modal === "create" ? "New Vendor" : "Edit Vendor"} onClose={() => setModal(null)}>
+          <FormField label="Business Name" required>
+            <input style={inputStyle} value={form.name}
+              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} required />
+          </FormField>
+          <FormField label="Business Number / ABN">
+            <input style={inputStyle} value={form.businessNum}
+              onChange={(e) => setForm((f) => ({ ...f, businessNum: e.target.value }))} />
+          </FormField>
+          {error && <div style={errStyle}>{error}</div>}
+          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 8 }}>
+            <Btn variant="ghost" onClick={() => setModal(null)}>Cancel</Btn>
+            <Btn onClick={handleSave} disabled={saving}>{saving ? "Saving…" : "Save"}</Btn>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+// ─── Vendor/user view: own settings only ────────────────────────────────────
+
+function OwnVendorPage() {
  const [vendor, setVendor] = useState<Vendor | null>(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
-  const [form, setForm] = useState({ name: "", businessNum: "" });
+  const [form, setForm] = useState(EMPTY_FORM);

  useEffect(() => {
-    api
-      .get<{ data: Vendor[] }>("/vendors")
+    api.get<ApiList<Vendor>>("/vendors")
      .then((res) => {
        const v = res.data[0] ?? null;
        setVendor(v);
@@ -43,9 +160,7 @@ export default function VendorPage() {
      setEditing(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Save failed");
-    } finally {
-      setSaving(false);
-    }
+    } finally { setSaving(false); }
  };

  if (loading) return <div style={{ padding: 32 }}>Loading…</div>;
@@ -56,38 +171,23 @@ export default function VendorPage() {
      <PageHeader
        title="Vendor Settings"
        subtitle="Business details and configuration"
-        action={
-          !editing && (
-            <Btn onClick={() => setEditing(true)}>Edit</Btn>
-          )
-        }
+        action={!editing && <Btn onClick={() => setEditing(true)}>Edit</Btn>}
      />

      {editing ? (
        <form onSubmit={handleSave} style={card}>
          {error && <div style={errStyle}>{error}</div>}
          <FormField label="Business Name" required>
-            <input
-              style={inputStyle}
-              value={form.name}
-              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-              required
-            />
+            <input style={inputStyle} value={form.name}
+              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} required />
          </FormField>
          <FormField label="Business Number / ABN">
-            <input
-              style={inputStyle}
-              value={form.businessNum}
-              onChange={(e) => setForm((f) => ({ ...f, businessNum: e.target.value }))}
-            />
+            <input style={inputStyle} value={form.businessNum}
+              onChange={(e) => setForm((f) => ({ ...f, businessNum: e.target.value }))} />
          </FormField>
          <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
-            <Btn type="submit" disabled={saving}>
-              {saving ? "Saving…" : "Save changes"}
-            </Btn>
-            <Btn variant="ghost" onClick={() => setEditing(false)}>
-              Cancel
-            </Btn>
+            <Btn type="submit" disabled={saving}>{saving ? "Saving…" : "Save changes"}</Btn>
+            <Btn variant="ghost" onClick={() => setEditing(false)}>Cancel</Btn>
          </div>
        </form>
      ) : (
@@ -102,6 +202,15 @@ export default function VendorPage() {
  );
 }

+// ─── Root export — branches on role ─────────────────────────────────────────
+
+export default function VendorPage() {
+  const { user } = useAuth();
+  return user?.role === "admin" ? <AdminVendorPage /> : <OwnVendorPage />;
+}
+
+// ─── Shared helpers ──────────────────────────────────────────────────────────
+
 function Row({ label, value }: { label: string; value: string }) {
  return (
    <div style={{ display: "flex", gap: 16, padding: "10px 0", borderBottom: "1px solid var(--color-border)" }}>
--- a/server/src/lib/vendorScope.ts
+++ b/server/src/lib/vendorScope.ts
@@ -0,0 +1,16 @@
+import { AuthenticatedRequest } from "../types/index.js";
+
+/**
+ * Resolves the effective vendorId for a request.
+ * Admin users may pass ?vendorId= to operate on any vendor's data.
+ * All other roles are locked to their own vendorId.
+ */
+export function resolveVendorId(
+  authReq: AuthenticatedRequest,
+  query: Record<string, unknown> = {}
+): string {
+  if (authReq.auth.roleName === "admin" && typeof query.vendorId === "string" && query.vendorId) {
+    return query.vendorId;
+  }
+  return authReq.auth.vendorId;
+}
--- a/server/src/routes/categories.ts
+++ b/server/src/routes/categories.ts
@@ -5,86 +5,76 @@ import { requireAuth, requireRole } from "../middleware/auth.js";
 import { AppError } from "../middleware/errorHandler.js";
 import { parsePage, paginatedResponse } from "../lib/pagination.js";
 import { AuthenticatedRequest } from "../types/index.js";
+import { resolveVendorId } from "../lib/vendorScope.js";

 const router = Router();
 const auth = requireAuth as unknown as (r: Request, s: Response, n: NextFunction) => void;
 const vendorUp = requireRole("admin", "vendor") as unknown as (r: Request, s: Response, n: NextFunction) => void;

-const CategorySchema = z.object({
-  name: z.string().min(1).max(100),
-});
+const CategorySchema = z.object({ name: z.string().min(1).max(100) });

 router.get("/", auth, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
    const { page, limit, skip } = parsePage(req.query as Record<string, unknown>);
-    const where = { vendorId: authReq.auth.vendorId };
+    const vendorId = resolveVendorId(authReq, req.query as Record<string, unknown>);
+    const where = { vendorId };

    const [data, total] = await Promise.all([
      prisma.category.findMany({ where, skip, take: limit, orderBy: { name: "asc" } }),
      prisma.category.count({ where }),
    ]);
-
    res.json(paginatedResponse(data, total, { page, limit, skip }));
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.get("/:id", auth, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const cat = await prisma.category.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!cat) throw new AppError(404, "NOT_FOUND", "Category not found");
    res.json(cat);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.post("/", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const vendorId = resolveVendorId(authReq, req.query as Record<string, unknown>);
    const body = CategorySchema.parse(req.body);
-    const cat = await prisma.category.create({
-      data: { ...body, vendorId: authReq.auth.vendorId },
-    });
+    const cat = await prisma.category.create({ data: { ...body, vendorId } });
    res.status(201).json(cat);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.put("/:id", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const existing = await prisma.category.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!existing) throw new AppError(404, "NOT_FOUND", "Category not found");
-
    const body = CategorySchema.parse(req.body);
    const cat = await prisma.category.update({ where: { id: req.params.id }, data: body });
    res.json(cat);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.delete("/:id", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const existing = await prisma.category.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!existing) throw new AppError(404, "NOT_FOUND", "Category not found");
    await prisma.category.delete({ where: { id: req.params.id } });
    res.status(204).send();
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 export default router;
--- a/server/src/routes/events.ts
+++ b/server/src/routes/events.ts
@@ -5,6 +5,7 @@ import { requireAuth, requireRole } from "../middleware/auth.js";
 import { AppError } from "../middleware/errorHandler.js";
 import { parsePage, paginatedResponse } from "../lib/pagination.js";
 import { AuthenticatedRequest } from "../types/index.js";
+import { resolveVendorId } from "../lib/vendorScope.js";

 const router = Router();
 const auth = requireAuth as unknown as (r: Request, s: Response, n: NextFunction) => void;
@@ -71,11 +72,7 @@ router.post("/", auth, vendorUp, async (req: Request, res: Response, next: NextF
      throw new AppError(400, "BAD_REQUEST", "endsAt must be after startsAt");
    }

-    // Admin can specify vendorId; vendor always uses their own
-    const targetVendorId =
-      authReq.auth.roleName === "admin" && (req.body as { vendorId?: string }).vendorId
-        ? (req.body as { vendorId: string }).vendorId
-        : authReq.auth.vendorId;
+    const targetVendorId = resolveVendorId(authReq, req.query as Record<string, unknown>);

    const event = await prisma.event.create({
      data: {
--- a/server/src/routes/products.ts
+++ b/server/src/routes/products.ts
@@ -5,6 +5,7 @@ import { requireAuth, requireRole } from "../middleware/auth.js";
 import { AppError } from "../middleware/errorHandler.js";
 import { parsePage, paginatedResponse } from "../lib/pagination.js";
 import { AuthenticatedRequest } from "../types/index.js";
+import { resolveVendorId } from "../lib/vendorScope.js";

 const router = Router();
 const auth = requireAuth as unknown as (r: Request, s: Response, n: NextFunction) => void;
@@ -25,65 +26,55 @@ router.get("/", auth, async (req: Request, res: Response, next: NextFunction) =>
    const authReq = req as AuthenticatedRequest;
    const { page, limit, skip } = parsePage(req.query as Record<string, unknown>);
    const { categoryId, search } = req.query as { categoryId?: string; search?: string };
+    const vendorId = resolveVendorId(authReq, req.query as Record<string, unknown>);

    const where = {
-      vendorId: authReq.auth.vendorId,
+      vendorId,
      ...(categoryId ? { categoryId } : {}),
-      ...(search
-        ? { name: { contains: search } }
-        : {}),
+      ...(search ? { name: { contains: search } } : {}),
    };

    const [data, total] = await Promise.all([
-      prisma.product.findMany({
-        where,
-        skip,
-        take: limit,
-        orderBy: { name: "asc" },
-        include: { category: true, tax: true },
-      }),
+      prisma.product.findMany({ where, skip, take: limit, orderBy: { name: "asc" }, include: { category: true, tax: true } }),
      prisma.product.count({ where }),
    ]);

    res.json(paginatedResponse(data, total, { page, limit, skip }));
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.get("/:id", auth, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const product = await prisma.product.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
      include: { category: true, tax: true },
    });
    if (!product) throw new AppError(404, "NOT_FOUND", "Product not found");
    res.json(product);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.post("/", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const vendorId = resolveVendorId(authReq, req.query as Record<string, unknown>);
    const body = ProductSchema.parse(req.body);
    const product = await prisma.product.create({
-      data: { ...body, vendorId: authReq.auth.vendorId },
+      data: { ...body, vendorId },
      include: { category: true, tax: true },
    });
    res.status(201).json(product);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.put("/:id", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const existing = await prisma.product.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!existing) throw new AppError(404, "NOT_FOUND", "Product not found");

@@ -94,23 +85,20 @@ router.put("/:id", auth, vendorUp, async (req: Request, res: Response, next: Nex
      include: { category: true, tax: true },
    });
    res.json(product);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.delete("/:id", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const existing = await prisma.product.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!existing) throw new AppError(404, "NOT_FOUND", "Product not found");
    await prisma.product.delete({ where: { id: req.params.id } });
    res.status(204).send();
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 export default router;
--- a/server/src/routes/taxes.ts
+++ b/server/src/routes/taxes.ts
@@ -5,6 +5,7 @@ import { requireAuth, requireRole } from "../middleware/auth.js";
 import { AppError } from "../middleware/errorHandler.js";
 import { parsePage, paginatedResponse } from "../lib/pagination.js";
 import { AuthenticatedRequest } from "../types/index.js";
+import { resolveVendorId } from "../lib/vendorScope.js";

 const router = Router();
 const auth = requireAuth as unknown as (r: Request, s: Response, n: NextFunction) => void;
@@ -19,73 +20,64 @@ router.get("/", auth, async (req: Request, res: Response, next: NextFunction) =>
  try {
    const authReq = req as AuthenticatedRequest;
    const { page, limit, skip } = parsePage(req.query as Record<string, unknown>);
-    const where = { vendorId: authReq.auth.vendorId };
+    const vendorId = resolveVendorId(authReq, req.query as Record<string, unknown>);
+    const where = { vendorId };

    const [data, total] = await Promise.all([
      prisma.tax.findMany({ where, skip, take: limit, orderBy: { name: "asc" } }),
      prisma.tax.count({ where }),
    ]);
-
    res.json(paginatedResponse(data, total, { page, limit, skip }));
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.get("/:id", auth, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const tax = await prisma.tax.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!tax) throw new AppError(404, "NOT_FOUND", "Tax not found");
    res.json(tax);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.post("/", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const vendorId = resolveVendorId(authReq, req.query as Record<string, unknown>);
    const body = TaxSchema.parse(req.body);
-    const tax = await prisma.tax.create({
-      data: { ...body, vendorId: authReq.auth.vendorId },
-    });
+    const tax = await prisma.tax.create({ data: { ...body, vendorId } });
    res.status(201).json(tax);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.put("/:id", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const existing = await prisma.tax.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!existing) throw new AppError(404, "NOT_FOUND", "Tax not found");
-
    const body = TaxSchema.parse(req.body);
    const tax = await prisma.tax.update({ where: { id: req.params.id }, data: body });
    res.json(tax);
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 router.delete("/:id", auth, vendorUp, async (req: Request, res: Response, next: NextFunction) => {
  try {
    const authReq = req as AuthenticatedRequest;
+    const isAdmin = authReq.auth.roleName === "admin";
    const existing = await prisma.tax.findFirst({
-      where: { id: req.params.id, vendorId: authReq.auth.vendorId },
+      where: { id: req.params.id, ...(isAdmin ? {} : { vendorId: authReq.auth.vendorId }) },
    });
    if (!existing) throw new AppError(404, "NOT_FOUND", "Tax not found");
    await prisma.tax.delete({ where: { id: req.params.id } });
    res.status(204).send();
-  } catch (err) {
-    next(err);
-  }
+  } catch (err) { next(err); }
 });

 export default router;
--- a/server/src/routes/vendors.ts
+++ b/server/src/routes/vendors.ts
@@ -71,6 +71,39 @@ router.post("/", auth, adminOnly, async (req: Request, res: Response, next: Next
  }
 });

+// DELETE /api/v1/vendors/:id — admin only
+router.delete("/:id", auth, adminOnly, async (req: Request, res: Response, next: NextFunction) => {
+  try {
+    const vendor = await prisma.vendor.findUnique({ where: { id: req.params.id } });
+    if (!vendor) throw new AppError(404, "NOT_FOUND", "Vendor not found");
+
+    // Check for dependent data before deleting
+    const [users, transactions] = await Promise.all([
+      prisma.user.count({ where: { vendorId: req.params.id } }),
+      prisma.transaction.count({ where: { vendorId: req.params.id } }),
+    ]);
+    if (users > 0 || transactions > 0) {
+      throw new AppError(
+        409,
+        "CONFLICT",
+        `Cannot delete vendor with existing data (${users} user(s), ${transactions} transaction(s)). Remove all associated data first.`
+      );
+    }
+
+    // Safe to delete — cascade via Prisma in order
+    await prisma.eventProduct.deleteMany({ where: { event: { vendorId: req.params.id } } });
+    await prisma.eventTax.deleteMany({ where: { event: { vendorId: req.params.id } } });
+    await prisma.event.deleteMany({ where: { vendorId: req.params.id } });
+    await prisma.product.deleteMany({ where: { vendorId: req.params.id } });
+    await prisma.tax.deleteMany({ where: { vendorId: req.params.id } });
+    await prisma.category.deleteMany({ where: { vendorId: req.params.id } });
+    await prisma.vendor.delete({ where: { id: req.params.id } });
+    res.status(204).send();
+  } catch (err) {
+    next(err);
+  }
+});
+
 // PUT /api/v1/vendors/:id — admin or vendor (own only)
 router.put("/:id", auth, async (req: Request, res: Response, next: NextFunction) => {
  try {