Move payment settings to Brand tab in Settings

- Integrated PaymentSettingsForm into SettingsClient Brand tab - Added paymentSettings prop to SettingsClient and Settings page - Redirected /admin/settings/payments to /admin/settings#brand - Updated PaymentSettingsForm to use admin CSS variables for styling - Fixed colors to match admin design system (no dark backgrounds)
2026-06-02 04:14:27 +00:00
parent d44506dd01
commit 7783604141
11 changed files with 535 additions and 264 deletions
@@ -31,9 +31,6 @@ type SettingsItem = {

 const SETTINGS_ITEMS: SettingsItem[] = [
  { href: "/admin/settings", label: "General", description: "Brand name, logo, timezone" },
-  { href: "/admin/settings/brand", label: "Brand", description: "Brand profile and preferences" },
-  { href: "/admin/users", label: "Users & Permissions", description: "Team members and access roles" },
-  { href: "/admin/settings/integrations", label: "Integrations", description: "Stripe, Square, Resend, Twilio" },
  { href: "/admin/settings/apps", label: "Add-ons", description: "Enable and manage feature add-ons" },
  { href: "/admin/settings/billing", label: "Billing & Plans", description: "Subscription, invoices, usage" },
  { href: "/admin/settings/payments", label: "Payments", description: "Stripe, Square, payment methods" },
@@ -29,9 +29,6 @@ type SettingsItem = {

 const SETTINGS_SUB_LINKS: SettingsItem[] = [
  { href: "/admin/settings", label: "General", description: "Brand name, logo, timezone" },
-  { href: "/admin/settings/brand", label: "Brand", description: "Brand profile and preferences" },
-  { href: "/admin/users", label: "Users & Permissions", description: "Team members and access roles" },
-  { href: "/admin/settings/integrations", label: "Integrations", description: "Stripe, Square, Resend, Twilio" },
  { href: "/admin/settings/apps", label: "Add-ons", description: "Enable and manage feature add-ons" },
  { href: "/admin/settings/billing", label: "Billing & Plans", description: "Subscription, invoices, usage" },
  { href: "/admin/settings/payments", label: "Payments", description: "Stripe, Square, payment methods" },
@@ -0,0 +1,300 @@
+"use client";
+
+import { useState } from "react";
+import GlassModal from "@/components/admin/GlassModal";
+import { AdminInput, AdminTextInput } from "@/components/admin/design-system";
+
+type Role = "platform_admin" | "brand_admin" | "store_employee";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (user: import("@/actions/admin/users").AdminUserRow) => void;
+  brands: { id: string; name: string }[];
+  currentUser: {
+    role: string;
+  };
+};
+
+const FLAG_LABELS: Record<string, string> = {
+  can_manage_products: "Products",
+  can_manage_stops: "Stops",
+  can_manage_orders: "Orders",
+  can_manage_pickup: "Pickup",
+  can_manage_messages: "Messages",
+  can_manage_refunds: "Refunds",
+  can_manage_users: "Users",
+  can_manage_water_log: "Water Log",
+  can_manage_reports: "Reports",
+};
+
+const ALL_FLAGS = Object.keys(FLAG_LABELS);
+
+const defaultFlags: Record<string, boolean> = {
+  can_manage_products: false,
+  can_manage_stops: false,
+  can_manage_orders: false,
+  can_manage_pickup: false,
+  can_manage_messages: false,
+  can_manage_refunds: false,
+  can_manage_users: false,
+  can_manage_water_log: false,
+  can_manage_reports: false,
+};
+
+const UserIcon = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
+    <circle cx="9" cy="7" r="4"/>
+    <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
+  </svg>
+);
+
+export default function CreateUserModal({ isOpen, onClose, onSuccess, brands, currentUser }: Props) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [role, setRole] = useState<Role>("store_employee");
+  const [brandId, setBrandId] = useState<string | null>(null);
+  const [flags, setFlags] = useState<Record<string, boolean>>({ ...defaultFlags });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const showBrandSelect = role === "brand_admin" || role === "store_employee";
+
+  const availableRoles: Role[] =
+    currentUser.role === "platform_admin"
+      ? ["platform_admin", "brand_admin", "store_employee"]
+      : ["brand_admin", "store_employee"];
+
+  function toggleFlag(flag: string) {
+    setFlags((prev) => ({ ...prev, [flag]: !prev[flag] }));
+  }
+
+  function resetForm() {
+    setEmail("");
+    setPassword("");
+    setDisplayName("");
+    setPhoneNumber("");
+    setRole("store_employee");
+    setBrandId(null);
+    setFlags({ ...defaultFlags });
+    setError(null);
+  }
+
+  async function handleSubmit() {
+    if (!email.includes("@") || !password || password.length < 6) {
+      setError("Please enter a valid email and a password with at least 6 characters.");
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const { createAdminUser } = await import("@/actions/admin/users");
+      const result = await createAdminUser({
+        email,
+        password,
+        display_name: displayName || undefined,
+        phone_number: phoneNumber || undefined,
+        role,
+        brand_id: brandId,
+        flags,
+        mustChangePassword: true,
+      });
+
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+
+      if (result.user) {
+        onSuccess(result.user);
+        resetForm();
+        onClose();
+      }
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "An unexpected error occurred.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleClose() {
+    if (!saving) {
+      resetForm();
+      onClose();
+    }
+  }
+
+  const roleDescriptions: Record<Role, string> = {
+    platform_admin: "Full platform access",
+    brand_admin: "Brand-level admin",
+    store_employee: "Pickup and order operations only",
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <GlassModal
+      title="Create User"
+      titleIcon={<UserIcon className="h-5 w-5 text-[var(--admin-accent)]" />}
+      subtitle="Add a new admin user to your organization"
+      onClose={handleClose}
+      maxWidth="max-w-lg"
+    >
+      <div className="space-y-6">
+        {/* Error banner */}
+        {error && (
+          <div className="flex items-start justify-between rounded-lg bg-red-50 p-4 text-sm text-red-700 gap-3 border border-red-200">
+            <span>{error}</span>
+            <button onClick={() => setError(null)} className="text-red-400 hover:text-red-600 shrink-0">
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        )}
+
+        {/* Email */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Email</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="user@example.com"
+          />
+        </div>
+
+        {/* Password */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Password</label>
+          <p className="text-xs text-[var(--admin-text-muted)] mb-1.5">Minimum 6 characters.</p>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="Choose a password"
+            minLength={6}
+          />
+        </div>
+
+        {/* Display Name */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Display Name</label>
+          <input
+            type="text"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="Kyle Martinez"
+          />
+        </div>
+
+        {/* Phone Number */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Phone Number</label>
+          <p className="text-xs text-[var(--admin-text-muted)] mb-1.5">Optional.</p>
+          <input
+            type="tel"
+            value={phoneNumber}
+            onChange={(e) => setPhoneNumber(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="+1 (555) 000-0000"
+          />
+        </div>
+
+        {/* Role */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-2">Role</label>
+          <div className="space-y-2">
+            {availableRoles.map((r) => (
+              <label key={r} className="flex items-center gap-3 rounded-lg border border-[var(--admin-border)] px-3 py-2.5 cursor-pointer hover:bg-[var(--admin-bg)] transition-colors">
+                <input
+                  type="radio"
+                  name="role"
+                  value={r}
+                  checked={role === r}
+                  onChange={() => setRole(r)}
+                  className="accent-[var(--admin-accent)]"
+                />
+                <div>
+                  <span className="font-medium text-[var(--admin-text-primary)] capitalize">{r.replace("_", " ")}</span>
+                  <p className="text-xs text-[var(--admin-text-muted)]">{roleDescriptions[r]}</p>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Brand */}
+        {showBrandSelect && (
+          <div>
+            <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Brand</label>
+            <select
+              value={brandId ?? ""}
+              onChange={(e) => setBrandId(e.target.value || null)}
+              className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20"
+            >
+              <option value="">Select a brand</option>
+              {brands.map((b) => (
+                <option key={b.id} value={b.id}>{b.name}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Permissions */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-2">Permissions</label>
+          <div className="space-y-2">
+            {ALL_FLAGS.map((flag) => (
+              <label key={flag} className="flex items-center justify-between rounded-lg border border-[var(--admin-border)] px-4 py-2.5 hover:bg-[var(--admin-bg)] cursor-pointer transition-colors">
+                <span className="text-sm text-[var(--admin-text-primary)]">{FLAG_LABELS[flag]}</span>
+                <button
+                  type="button"
+                  onClick={() => toggleFlag(flag)}
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${flags[flag] ? "bg-[var(--admin-accent)]" : "bg-stone-300"}`}
+                >
+                  <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${flags[flag] ? "translate-x-6" : "translate-x-1"}`} />
+                </button>
+              </label>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-end gap-3 mt-8 -mx-8 -mb-8 px-8 py-6 border-t border-[var(--admin-border)] bg-[var(--admin-bg)] rounded-b-2xl">
+        <button
+          onClick={handleClose}
+          disabled={saving}
+          className="rounded-xl border border-[var(--admin-border)] px-5 py-2.5 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg-subtle)] transition-colors disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={saving || !email.includes("@") || !password || password.length < 6}
+          className="rounded-xl bg-[var(--admin-accent)] px-5 py-2.5 text-sm font-medium text-white hover:bg-[var(--admin-accent-hover)] transition-colors disabled:opacity-50"
+        >
+          {saving ? (
+            <span className="flex items-center gap-2">
+              <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+              Creating...
+            </span>
+          ) : "Create User"}
+        </button>
+      </div>
+    </GlassModal>
+  );
+}
@@ -164,16 +164,16 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
      )}

      {error && (
-        <div className="rounded-xl bg-red-900/50 border border-red-700 p-4 text-sm text-red-200">{error}</div>
+        <div className="rounded-xl bg-red-950/50 border border-red-800 p-4 text-sm text-red-300">{error}</div>
      )}
      {saved && (
-        <div className="rounded-xl bg-green-900/50 border border-green-700 p-4 text-sm text-green-200">
+        <div className="rounded-xl bg-green-950/50 border border-green-800 p-4 text-sm text-green-300">
          Payment settings saved.
        </div>
      )}
      {syncResult && (
        <div className={`rounded-xl p-4 text-sm border ${
-          syncResult.success ? "bg-green-900/50 border-green-700 text-green-200" : "bg-red-900/50 border-red-700 text-red-200"
+          syncResult.success ? "bg-green-950/50 border-green-800 text-green-300" : "bg-red-950/50 border-red-800 text-red-300"
        }`}>
          {syncResult.message}
        </div>
@@ -181,19 +181,19 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is

      {/* Connected status banner */}
      {settings?.stripe_publishable_key && (
-        <div className="flex items-center gap-3 rounded-xl border border-green-200 bg-green-900/30 px-4 py-3 text-sm">
-          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-green-900/300 text-white text-xs font-bold">✓</span>
+        <div className="flex items-center gap-3 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-green-600 text-white text-xs font-bold">✓</span>
          <div>
-            <p className="font-semibold text-green-300">Stripe Connected</p>
-            <p className="text-xs text-green-400/70">Payments are configured for this brand</p>
+            <p className="font-semibold text-green-800">Stripe Connected</p>
+            <p className="text-xs text-green-600">Payments are configured for this brand</p>
          </div>
        </div>
      )}

      {/* Provider selection */}
      <div>
-        <label className="block text-sm font-semibold text-zinc-300">Payment Provider</label>
-        <p className="mt-1 text-sm text-zinc-500">
+        <label className="block text-sm font-semibold text-[var(--admin-text-primary)]">Payment Provider</label>
+        <p className="mt-1 text-sm text-[var(--admin-text-muted)]">
          Choose how to process payments for this brand.
        </p>
        <div className="mt-3 flex gap-3">
@@ -210,10 +210,10 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
                setShowStripe(opt.value === "stripe");
                setShowSquare(opt.value === "square");
              }}
-              className={`rounded-xl border px-4 py-3 text-sm font-medium ${
+              className={`rounded-xl border px-4 py-3 text-sm font-medium transition-colors ${
                provider === opt.value
-                  ? "border-zinc-400 bg-zinc-700 text-zinc-50"
-                  : "border-zinc-600 text-zinc-400 hover:bg-zinc-800"
+                  ? "border-[var(--admin-accent)] bg-[var(--admin-accent)] text-white"
+                  : "border-[var(--admin-border)] text-[var(--admin-text-secondary)] hover:bg-stone-50"
              }`}
            >
              {opt.label}
@@ -224,12 +224,12 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is

      {/* Stripe credentials */}
      {showStripe && (
-        <div className="space-y-4 rounded-xl border border-blue-200 bg-blue-900/30 p-4">
+        <div className="space-y-4 rounded-xl border border-blue-200 bg-blue-50 p-4">
          <div className="flex items-center justify-between">
            <h3 className="font-semibold text-blue-900">Stripe</h3>
            {settings?.stripe_publishable_key && (
-              <span className="flex items-center gap-1.5 rounded-full bg-green-900/40 px-2.5 py-1 text-xs font-semibold text-green-400">
-                <span className="h-1.5 w-1.5 rounded-full bg-green-900/300"></span>
+              <span className="flex items-center gap-1.5 rounded-full bg-green-100 px-2.5 py-1 text-xs font-semibold text-green-700">
+                <span className="h-1.5 w-1.5 rounded-full bg-green-600"></span>
                Connected
              </span>
            )}
@@ -237,7 +237,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
          
          {!settings?.stripe_publishable_key ? (
            <div className="space-y-3">
-              <p className="text-sm text-blue-200">
+              <p className="text-sm text-blue-800">
                Connect your Stripe account to process payments. You'll be redirected to Stripe to authorize the connection.
              </p>
              <a
@@ -249,7 +249,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
            </div>
          ) : (
            <div className="space-y-3">
-              <p className="text-sm text-green-400">
+              <p className="text-sm text-green-700">
                ✓ Your Stripe account is connected and ready to accept payments.
              </p>
              <button
@@ -266,7 +266,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
                    window.location.reload();
                  }
                }}
-                className="text-sm text-red-400 hover:underline"
+                className="text-sm text-red-600 hover:underline"
              >
                Disconnect Stripe
              </button>
@@ -277,11 +277,11 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is

      {/* Square credentials */}
      {showSquare && (
-        <div className="space-y-4 rounded-xl border border-green-200 bg-green-900/30 p-4">
+        <div className="space-y-4 rounded-xl border border-green-200 bg-green-50 p-4">
          <h3 className="font-semibold text-green-900">Square</h3>
          {!hasSquareToken ? (
            <div className="space-y-3">
-              <p className="text-sm text-green-400">
+              <p className="text-sm text-green-800">
                Connect your Square account via OAuth to enable sync.
              </p>
              <a
@@ -303,7 +303,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
              <button
                type="button"
                onClick={handleDisconnectSquare}
-                className="text-sm text-red-400 hover:underline"
+                className="text-sm text-red-600 hover:underline"
              >
                Disconnect Square
              </button>
@@ -314,10 +314,10 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is

      {/* Square Sync section */}
      {hasSquareToken && provider === "square" && (
-        <div className="space-y-5 rounded-xl border border-purple-200 bg-purple-50 p-5">
+        <div className="space-y-5 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-bg-light)] p-5">
          <div>
-            <h3 className="font-semibold text-purple-900">Square Sync</h3>
-            <p className="mt-1 text-sm text-purple-700">
+            <h3 className="font-semibold text-[var(--admin-text-primary)]">Square Sync</h3>
+            <p className="mt-1 text-sm text-[var(--admin-text-muted)]">
              Keep products, orders, and inventory in sync between Route Commerce and Square.
            </p>
          </div>
@@ -328,16 +328,16 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
              type="button"
              onClick={() => setSquareSyncEnabled(!squareSyncEnabled)}
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                squareSyncEnabled ? "bg-purple-600" : "bg-slate-300"
+                squareSyncEnabled ? "bg-[var(--admin-accent)]" : "bg-stone-300"
              }`}
            >
              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-zinc-900 transition-transform ${
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                  squareSyncEnabled ? "translate-x-6" : "translate-x-1"
                }`}
              />
            </button>
-            <span className="text-sm font-medium text-purple-900">
+            <span className="text-sm font-medium text-[var(--admin-text-primary)]">
              {squareSyncEnabled ? "Enabled" : "Disabled"}
            </span>
          </div>
@@ -346,7 +346,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
            <>
              {/* Inventory mode */}
              <div>
-                <p className="mb-2 text-sm font-medium text-zinc-300">Inventory sync direction</p>
+                <p className="mb-2 text-sm font-medium text-[var(--admin-text-primary)]">Inventory sync direction</p>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                  {[
                    { value: "none", label: "None" },
@@ -360,8 +360,8 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
                      onClick={() => setSquareInventoryMode(opt.value as InventoryMode)}
                      className={`rounded-lg border px-3 py-2 text-xs font-medium ${
                        squareInventoryMode === opt.value
-                          ? "border-purple-600 bg-purple-600 text-white"
-                          : "border-zinc-600 text-zinc-400 hover:bg-purple-100"
+                          ? "border-[var(--admin-accent)] bg-[var(--admin-accent)] text-white"
+                          : "border-[var(--admin-border)] text-[var(--admin-text-secondary)] hover:bg-stone-50"
                      }`}
                    >
                      {opt.label}
@@ -376,7 +376,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
                  type="button"
                  onClick={() => handleSyncNow("products")}
                  disabled={syncing}
-                  className="rounded-lg border border-purple-300 bg-zinc-900 px-4 py-2 text-sm font-medium text-purple-700 hover:bg-purple-100 disabled:opacity-50"
+                  className="rounded-lg border border-[var(--admin-border)] bg-white px-4 py-2 text-sm font-medium text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-50"
                >
                  {syncing ? "Syncing..." : "Sync Products Now"}
                </button>
@@ -384,7 +384,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
                  type="button"
                  onClick={() => handleSyncNow("orders")}
                  disabled={syncing}
-                  className="rounded-lg border border-purple-300 bg-zinc-900 px-4 py-2 text-sm font-medium text-purple-700 hover:bg-purple-100 disabled:opacity-50"
+                  className="rounded-lg border border-[var(--admin-border)] bg-white px-4 py-2 text-sm font-medium text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-50"
                >
                  {syncing ? "Syncing..." : "Sync Orders Now"}
                </button>
@@ -392,24 +392,24 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
                  type="button"
                  onClick={() => handleSyncNow("all")}
                  disabled={syncing}
-                  className="rounded-lg bg-purple-600 px-4 py-2 text-sm font-semibold text-white hover:bg-purple-700 disabled:opacity-50"
+                  className="rounded-lg bg-[var(--admin-accent)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-50"
                >
                  {syncing ? "Syncing..." : "Sync All Now"}
                </button>
              </div>

              {/* Last sync info */}
-              <div className="text-xs text-zinc-500">
+              <div className="text-xs text-[var(--admin-text-muted)]">
                Last sync: {lastSyncAt}
                {settings?.square_last_sync_error && (
-                  <span className="ml-2 text-red-500">— {settings.square_last_sync_error}</span>
+                  <span className="ml-2 text-red-600">— {settings.square_last_sync_error}</span>
                )}
              </div>

              {/* Sync log preview */}
              {syncLog.length > 0 && (
                <div>
-                  <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--admin-text-muted)]">
                    Recent sync activity
                  </p>
                  <div className="space-y-1">
@@ -418,14 +418,14 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
                        key={entry.id}
                        className={`flex items-center justify-between rounded-lg border px-3 py-2 text-xs ${
                          entry.status === "success"
-                            ? "border-green-200 bg-green-900/30 text-green-400"
-                            : "border-red-200 bg-red-900/30 text-red-400"
+                            ? "border-green-200 bg-green-50 text-green-700"
+                            : "border-red-200 bg-red-50 text-red-700"
                        }`}
                      >
                        <span>
                          [{entry.direction ?? "—"}] {entry.event_type} — {entry.status}
                        </span>
-                        <span className="text-slate-400">
+                        <span className="text-[var(--admin-text-muted)]">
                          {new Date(entry.created_at).toLocaleTimeString()}
                        </span>
                      </div>
@@ -444,7 +444,7 @@ export default function PaymentSettingsForm({ settings, brandId, brands = [], is
      <button
        type="submit"
        disabled={saving}
-        className="rounded-xl bg-zinc-100 px-6 py-3 text-sm font-bold text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
+        className="rounded-xl bg-[var(--admin-accent)] px-6 py-3 text-sm font-bold text-white hover:opacity-90 disabled:opacity-50"
      >
        {saving ? "Saving..." : "Save Payment Settings"}
      </button>
@@ -3,12 +3,16 @@
 import { useState, useEffect } from "react";
 import SettingsSections from "@/components/admin/SettingsSections";
 import UsersPage from "@/components/admin/UsersPage";
+import BrandSettingsForm from "@/components/admin/BrandSettingsForm";
+import PaymentSettingsForm from "@/components/admin/PaymentSettingsForm";
 import { PageHeader, AdminButton } from "@/components/admin/design-system";
+import type { PaymentProvider } from "@/actions/payments";

-type Tab = "general" | "workers" | "tasks" | "users";
+type Tab = "general" | "brand" | "workers" | "tasks" | "users";

 const TABS: { id: Tab; label: string; icon: string; hash: string }[] = [
  { id: "general", label: "General", icon: "settings", hash: "general" },
+  { id: "brand", label: "Brand", icon: "brand", hash: "brand" },
  { id: "workers", label: "Workers", icon: "users", hash: "workers" },
  { id: "tasks", label: "Tasks", icon: "list", hash: "tasks" },
  { id: "users", label: "Users", icon: "user-check", hash: "users" },
@@ -22,6 +26,11 @@ const Icons = {
      <circle cx="12" cy="12" r="3"/>
    </svg>
  ),
+  brand: (className: string) => (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.592 9.592c1.106.105 1.35.374 1.591.659l4.317 4.317c.221.241.375.574.375.896v.318c0 .621-.504 1.125-1.125 1.125H5.25A2.25 2.25 0 013 16.5v-4.318c0-.597-.237-1.17-.659-1.591l-9.592-9.592A2.25 2.25 0 012.25 5.25m5.318 4.5v4.318l3.591 3.591M5.25 7.5a2.25 2.25 0 012.25-2.25h4.318m0 0L9 10.5m5.25-2.25v4.318m0 0L14.25 12m5.25-2.25H9.75" />
+    </svg>
+  ),
  users: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
@@ -53,6 +62,17 @@ type Props = {
  brandId: string;
  users: import("@/actions/admin/users").AdminUserRow[];
  brands: Brand[];
+  paymentSettings?: {
+    provider?: PaymentProvider | null;
+    stripe_publishable_key?: string | null;
+    stripe_secret_key?: string | null;
+    square_access_token?: string | null;
+    square_location_id?: string | null;
+    square_sync_enabled?: boolean;
+    square_inventory_mode?: "none" | "rc_to_square" | "square_to_rc" | "bidirectional";
+    square_last_sync_at?: string | null;
+    square_last_sync_error?: string | null;
+  } | null;
  currentUser: {
    id: string;
    role: string;
@@ -64,6 +84,7 @@ export default function SettingsClient({
  brandId,
  users,
  brands,
+  paymentSettings,
  currentUser,
 }: Props) {
  const [activeTab, setActiveTab] = useState<Tab>("general");
@@ -128,6 +149,59 @@ export default function SettingsClient({
          </div>
        )}

+        {activeTab === "brand" && (
+          <div className="space-y-6">
+            {/* Brand Settings */}
+            <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
+              <div className="p-4 sm:p-6 border-b border-[var(--admin-border)]">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
+                    {Icons.brand("w-4 h-4 text-white")}
+                  </div>
+                  <div>
+                    <h2 className="text-sm sm:text-lg font-bold text-[var(--admin-text-primary)]">Brand Settings</h2>
+                    <p className="text-[10px] sm:text-xs text-[var(--admin-text-muted)]">Company information, logos, and default signatures</p>
+                  </div>
+                </div>
+              </div>
+              <div className="p-4 sm:p-6">
+                <BrandSettingsForm
+                  settings={null}
+                  brandId={brandId}
+                  brandName=""
+                  brands={brands}
+                  isPlatformAdmin={currentUser.role === "platform_admin"}
+                />
+              </div>
+            </div>
+
+            {/* Payment Settings */}
+            <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
+              <div className="p-4 sm:p-6 border-b border-[var(--admin-border)]">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--admin-accent)]">
+                    <svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 0h3m-3.75 0h3m-3.75 0h3m-3.75 0h3m3.75 0h3m-3.75 0h3m-3.75 0h3m-3.75 0h3m3.75 0h3m-3.75 0h3m-3.75 0h3m-3.75 0h3" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h2 className="text-sm sm:text-lg font-bold text-[var(--admin-text-primary)]">Payment Settings</h2>
+                    <p className="text-[10px] sm:text-xs text-[var(--admin-text-muted)]">Configure your payment provider for checkout processing</p>
+                  </div>
+                </div>
+              </div>
+              <div className="p-4 sm:p-6">
+                <PaymentSettingsForm
+                  settings={paymentSettings ?? null}
+                  brandId={brandId}
+                  brands={brands}
+                  isPlatformAdmin={currentUser.role === "platform_admin"}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
        {activeTab === "workers" && (
          <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
            <div className="p-4 sm:p-6 border-b border-[var(--admin-border)]">
@@ -1,8 +1,9 @@
 "use client";

 import { useState } from "react";
-import { AdminUserRow, CreateAdminUserInput, UpdateAdminUserInput } from "@/actions/admin/users";
+import { AdminUserRow, UpdateAdminUserInput } from "@/actions/admin/users";
 import { formatDate } from "@/lib/format-date";
+import CreateUserModal from "./CreateUserModal";

 type UsersPageProps = {
  initialUsers: AdminUserRow[];
@@ -12,6 +13,7 @@ type UsersPageProps = {
    role: string;
    can_manage_users?: boolean;
  };
+  onUserCreated?: (user: AdminUserRow) => void;
 };

 type PasswordModal = {
@@ -110,9 +112,10 @@ function editingFromRow(row: AdminUserRow): EditingUser {
  };
 }

-export default function UsersPage({ initialUsers, brands, currentUser }: UsersPageProps) {
+export default function UsersPage({ initialUsers, brands, currentUser, onUserCreated }: UsersPageProps) {
  const [users, setUsers] = useState(initialUsers);
  const [panelOpen, setPanelOpen] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editing, setEditing] = useState<EditingUser>(emptyEditing(true));
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
@@ -126,9 +129,12 @@ export default function UsersPage({ initialUsers, brands, currentUser }: UsersPa
    (currentUser.role === "brand_admin" && currentUser.can_manage_users);

  function openCreate() {
-    setEditing(emptyEditing(true));
-    setError(null);
-    setPanelOpen(true);
+    setShowCreateModal(true);
+  }
+
+  function handleUserCreated(user: AdminUserRow) {
+    setUsers((prev) => [user, ...prev]);
+    onUserCreated?.(user);
  }

  function openEdit(row: AdminUserRow) {
@@ -655,6 +661,17 @@ export default function UsersPage({ initialUsers, brands, currentUser }: UsersPa
          </div>
        </div>
      )}
+
+      {/* Create User Modal */}
+      <CreateUserModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        onSuccess={handleUserCreated}
+        brands={brands}
+        currentUser={{
+          role: currentUser.role,
+        }}
+      />
    </>
  );
 }