@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/ui/icons.tsx

@@ -0,0 +1,112 @@
+// Re-exported from react-icons/lu (Lucide icons via React Icons, ISC license)
+// Allows mixing packs or swapping individual icons without touching consumers.
+
+export { LuActivity as IconActivity } from "react-icons/lu";
+export { LuTriangleAlert as IconAlertTriangle } from "react-icons/lu";
+export { LuAlignLeft as IconAlignLeft } from "react-icons/lu";
+export { LuArchive as IconArchive } from "react-icons/lu";
+export { LuArrowDown as IconArrowDown } from "react-icons/lu";
+export { LuArrowRight as IconArrowRight } from "react-icons/lu";
+export { LuArrowUpRight as IconArrowUpRight } from "react-icons/lu";
+export { LuBlocks as IconBlocks } from "react-icons/lu";
+export { LuBold as IconBold } from "react-icons/lu";
+export { LuBook as IconBook } from "react-icons/lu";
+export { LuBox as IconBox } from "react-icons/lu";
+export { LuCircleCheck as IconCheckCircle2 } from "react-icons/lu";
+export { LuCheck as IconCheck } from "react-icons/lu";
+export { LuChevronDown as IconChevronDown } from "react-icons/lu";
+export { LuChevronLeft as IconChevronLeft } from "react-icons/lu";
+export { LuChevronRight as IconChevronRight } from "react-icons/lu";
+export { LuChevronUp as IconChevronUp } from "react-icons/lu";
+export { LuClock as IconClock } from "react-icons/lu";
+export { LuCode as IconCode } from "react-icons/lu";
+export { LuCodeXml as IconCode2 } from "react-icons/lu";
+export { LuColumns3 as IconColumns3 } from "react-icons/lu";
+export { LuCopy as IconCopy } from "react-icons/lu";
+export { LuCrop as IconCrop } from "react-icons/lu";
+export { LuDatabase as IconDatabase } from "react-icons/lu";
+export { LuDownload as IconDownload } from "react-icons/lu";
+export { LuCloudDownload as IconDownloadCloud } from "react-icons/lu";
+export { LuExternalLink as IconExternalLink } from "react-icons/lu";
+export { LuEye as IconEye } from "react-icons/lu";
+export { LuEyeOff as IconEyeOff } from "react-icons/lu";
+export { LuFile as IconFile } from "react-icons/lu";
+export { LuGlobe as IconGlobe } from "react-icons/lu";
+export { LuFilm as IconFilm } from "react-icons/lu";
+export { LuFilter as IconFilter } from "react-icons/lu";
+export { LuFolder as IconFolder } from "react-icons/lu";
+export { LuFolderInput as IconFolderInput } from "react-icons/lu";
+export { LuFolderPlus as IconFolderPlus } from "react-icons/lu";
+export { LuGrid3X3 as IconGrid } from "react-icons/lu";
+export { LuGripVertical as IconGripVertical } from "react-icons/lu";
+export { LuHeading1 as IconHeading1 } from "react-icons/lu";
+export { LuHexagon as IconHexagon } from "react-icons/lu";
+export { LuHouse as IconHome } from "react-icons/lu";
+export { LuImage as IconImage } from "react-icons/lu";
+export { LuInfo as IconInfo } from "react-icons/lu";
+export { LuItalic as IconItalic } from "react-icons/lu";
+export { LuKey as IconKey } from "react-icons/lu";
+export { LuLayoutPanelTop as IconLayout } from "react-icons/lu";
+export { LuLayoutDashboard as IconLayoutDashboard } from "react-icons/lu";
+export { LuLink as IconLink } from "react-icons/lu";
+export { LuLink2 as IconLink2 } from "react-icons/lu";
+export { LuList as IconList } from "react-icons/lu";
+export { LuListOrdered as IconListOrdered } from "react-icons/lu";
+export { LuLoaderCircle as IconLoader2 } from "react-icons/lu";
+export { LuLock as IconLock } from "react-icons/lu";
+export { LuLogOut as IconLogOut } from "react-icons/lu";
+export { LuMail as IconMail } from "react-icons/lu";
+export { LuMaximize2 as IconMaximize2 } from "react-icons/lu";
+export { LuMenu as IconMenu } from "react-icons/lu";
+export { LuMinus as IconMinus } from "react-icons/lu";
+export { LuMonitor as IconMonitor } from "react-icons/lu";
+export { LuMoon as IconMoon } from "react-icons/lu";
+export { LuEllipsisVertical as IconMoreVertical } from "react-icons/lu";
+export { LuMousePointerClick as IconMousePointerClick } from "react-icons/lu";
+export { LuMusic as IconMusic } from "react-icons/lu";
+export { LuNetwork as IconNetwork } from "react-icons/lu";
+export { LuPalette as IconPalette } from "react-icons/lu";
+export { LuPause as IconPause } from "react-icons/lu";
+export { LuPencil as IconPencil } from "react-icons/lu";
+export { LuPlay as IconPlay } from "react-icons/lu";
+export { LuCirclePlay as IconPlayCircle } from "react-icons/lu";
+export { LuPlus as IconPlus } from "react-icons/lu";
+export { LuRedo as IconRedo } from "react-icons/lu";
+export { LuRefreshCcw as IconRefreshCcw } from "react-icons/lu";
+export { LuRefreshCw as IconRefreshCw } from "react-icons/lu";
+export { LuSave as IconSave } from "react-icons/lu";
+export { LuSearch as IconSearch } from "react-icons/lu";
+export { LuSend as IconSend } from "react-icons/lu";
+export { LuSettings as IconSettings } from "react-icons/lu";
+export { LuShield as IconShield } from "react-icons/lu";
+export { LuShieldCheck as IconShieldCheck } from "react-icons/lu";
+export { LuSparkles as IconSparkles } from "react-icons/lu";
+export { LuStar as IconStar } from "react-icons/lu";
+export { LuStrikethrough as IconStrikethrough } from "react-icons/lu";
+export { LuSun as IconSun } from "react-icons/lu";
+export { LuTag as IconTag } from "react-icons/lu";
+export { LuTerminal as IconTerminal } from "react-icons/lu";
+export { LuToggleLeft as IconToggleLeft } from "react-icons/lu";
+export { LuToggleRight as IconToggleRight } from "react-icons/lu";
+export { LuTrash2 as IconTrash2 } from "react-icons/lu";
+export { LuTrendingUp as IconTrendingUp } from "react-icons/lu";
+export { LuType as IconType } from "react-icons/lu";
+export { LuUnderline as IconUnderline } from "react-icons/lu";
+export { LuUndo as IconUndo } from "react-icons/lu";
+export { LuLockOpen as IconUnlock } from "react-icons/lu";
+export { LuUser as IconUser } from "react-icons/lu";
+export { LuUserPlus as IconUserPlus } from "react-icons/lu";
+export { LuUsers as IconUsers } from "react-icons/lu";
+export { LuVideo as IconVideo } from "react-icons/lu";
+export { LuWebhook as IconWebhook } from "react-icons/lu";
+export { LuX as IconX } from "react-icons/lu";
+export { LuZap as IconZap } from "react-icons/lu";
+export { LuDot as IconDot } from "react-icons/lu";
+export { LuShieldAlert as IconShieldAlert } from "react-icons/lu";
+export { LuPencil as IconEdit2 } from "react-icons/lu";
+export { LuCalendar as IconCalendar } from "react-icons/lu";
+export { LuGrid3X3 as IconGrid3X3 } from "react-icons/lu";
+
+// Direct re-exports for files that still use original lucide-react names
+export { LuActivity as Activity, LuAlignLeft as AlignLeft, LuArchive as Archive, LuArrowDown as ArrowDown, LuArrowRight as ArrowRight, LuArrowUpRight as ArrowUpRight, LuBlocks as Blocks, LuBox as Box, LuCalendar as Calendar, LuCheck as Check, LuChevronDown as ChevronDown, LuChevronLeft as ChevronLeft, LuChevronRight as ChevronRight, LuChevronUp as ChevronUp, LuClock as Clock, LuCode as Code, LuColumns3 as Columns3, LuCopy as Copy, LuCrop as Crop, LuDownload as Download, LuExternalLink as ExternalLink, LuEye as Eye, LuEyeOff as EyeOff, LuFile as File, LuFile as FileIcon, LuFileText as FileText, LuGlobe as Globe, LuFilm as Film, LuFilter as Filter, LuFolder as Folder, LuFolderInput as FolderInput, LuFolderPlus as FolderPlus, LuGripVertical as GripVertical, LuHeading1 as Heading1, LuImage as Image, LuInfo as Info, LuKey as Key, LuLayoutDashboard as LayoutDashboard, LuLink as Link, LuLink2 as Link2, LuList as List, LuListOrdered as ListOrdered, LuLock as Lock, LuMail as Mail, LuMaximize2 as Maximize2, LuMenu as Menu, LuMinus as Minus, LuMonitor as Monitor, LuMousePointerClick as MousePointerClick, LuMusic as Music, LuPalette as Palette, LuPause as Pause, LuPlay as Play, LuPlus as Plus, LuRefreshCcw as RefreshCcw, LuRefreshCw as RefreshCw, LuSave as Save, LuSearch as Search, LuSend as Send, LuSettings as Settings, LuShield as Shield, LuSparkles as Sparkles, LuStar as Star, LuTag as Tag, LuTerminal as Terminal, LuToggleLeft as ToggleLeft, LuToggleRight as ToggleRight, LuTrash2 as Trash2, LuTrendingUp as TrendingUp, LuType as Type, LuUser as User, LuUserPlus as UserPlus, LuUsers as Users, LuVideo as Video, LuWebhook as Webhook, LuX as X, LuZap as Zap, LuCircleHelp as HelpCircle } from "react-icons/lu";
+export { LuCircleCheck as CheckCircle2, LuGrid3X3 as Grid, LuHouse as Home, LuLayoutPanelTop as Layout, LuLoaderCircle as Loader2, LuLockOpen as Unlock, LuCirclePlay as PlayCircle, LuTriangleAlert as AlertTriangle, LuCodeXml as Code2, LuCloudDownload as DownloadCloud, LuEllipsisVertical as MoreVertical, LuShieldCheck as ShieldCheck, LuShieldAlert as ShieldAlert, LuPencil as Edit2, LuMoon as Moon, LuSun as Sun, LuLogOut as LogOut, LuDatabase as Database, LuHexagon as Hexagon, LuNetwork as Network, LuBook as Book, LuBold as Bold, LuItalic as Italic, LuUnderline as Underline, LuStrikethrough as Strikethrough, LuUndo as Undo, LuRedo as Redo, LuDot as Dot, LuGrid3X3, LuLaptop as Laptop, LuSmartphone as Smartphone } from "react-icons/lu";

package/src/components/users/UserDetail.tsx

@@ -0,0 +1,290 @@
+import React, { useState } from "react";
+import { useUIStore } from "../../lib/stores";
+
+interface User {
+  id: string;
+  name?: string;
+  email: string;
+  role: string;
+  tenantId?: string;
+  emailVerified?: boolean;
+  locked?: boolean;
+  lastLogin?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  failedLoginAttempts?: number;
+}
+
+interface UserDetailProps {
+  user: User;
+  apiPath: string;
+  adminPath: string;
+}
+
+const roleOptions = [
+  "super_admin",
+  "admin",
+  "editor",
+  "author",
+  "customer",
+  "guest",
+];
+
+export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
+  const [name, setName] = useState(user.name || "");
+  const [role, setRole] = useState(user.role);
+  const [saving, setSaving] = useState(false);
+  const { confirm, alert } = useUIStore();
+  const [deleting, setDeleting] = useState(false);
+  const [locking, setLocking] = useState(false);
+  const [isLocked, setIsLocked] = useState(user.locked || false);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const body: Record<string, unknown> = {};
+
+      if (role !== user.role) {
+        body.role = role;
+      }
+      if (name !== user.name) {
+        body.name = name.trim() === "" ? null : name.trim();
+      }
+
+      if (Object.keys(body).length === 0) {
+        window.location.href = adminPath + "/users";
+        return;
+      }
+
+      const res = await fetch(`${apiPath}/users/${user.id}`, {
+        method: "PATCH",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        window.location.href = adminPath + "/users";
+      } else {
+        console.error("Save failed:", data.error);
+      }
+    } catch (e) {
+      console.error("Failed to save user:", e);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleLockToggle = () => {
+    confirm({
+      title: isLocked ? "Unlock User" : "Lock User",
+      message: isLocked
+        ? `Unlock ${user.email}? They will be able to log in again.`
+        : `Lock ${user.email}? They will not be able to log in.`,
+      variant: isLocked ? "default" : "danger",
+      confirmLabel: isLocked ? "Unlock" : "Lock",
+      onConfirm: async () => {
+        setLocking(true);
+        try {
+          const res = await fetch(`${apiPath}/users/${user.id}`, {
+            method: "PATCH",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ locked: !isLocked }),
+          });
+          if (res.ok) {
+            setIsLocked(!isLocked);
+          }
+        } catch (e) {
+          console.error("Failed to toggle lock:", e);
+        } finally {
+          setLocking(false);
+        }
+      }
+    });
+  };
+
+  const handleDelete = () => {
+    confirm({
+      title: "Delete User",
+      message: `Are you sure you want to delete ${user.email}? This action cannot be undone.`,
+      variant: "danger",
+      onConfirm: async () => {
+        setDeleting(true);
+        try {
+          const res = await fetch(`${apiPath}/users/${user.id}`, {
+            method: "DELETE",
+            credentials: "include",
+          });
+          if (res.ok) {
+            window.location.href = adminPath + "/users";
+          }
+        } catch (e) {
+          console.error("Failed to delete user:", e);
+        } finally {
+          setDeleting(false);
+        }
+      }
+    });
+  };
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return "—";
+    return new Date(dateStr).toLocaleString();
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto pr-12 space-y-8">
+      <div className="surface-tile p-6 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="w-14 h-14 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-bold text-xl">
+            {(name || user.email).charAt(0).toUpperCase()}
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+              {name || user.email}
+            </h1>
+            <p className="text-sm text-[var(--kyro-text-secondary)] font-medium">
+              {name ? user.email : `User ID: ${user.id}`}
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={handleLockToggle}
+            className="px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+          >
+            {isLocked ? "Unlock User" : "Lock User"}
+          </button>
+          <button
+            onClick={handleDelete}
+            className="px-4 py-2 border border-red-200 rounded-xl text-sm font-bold text-red-600 hover:bg-red-50 transition-colors"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+
+      <div className="surface-tile p-6">
+        <h2 className="text-lg font-bold text-[var(--kyro-text-primary)] tracking-tighter mb-6">
+          Details
+        </h2>
+        <div className="grid grid-cols-2 gap-6">
+          <div>
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+              Name
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 w-full px-3 py-2 border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)]"
+              placeholder="Enter name"
+            />
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+              Email
+            </label>
+            <p className="mt-1 font-medium text-[var(--kyro-text-primary)]">
+              {user.email}
+            </p>
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+              Role
+            </label>
+            <select
+              value={role}
+              onChange={(e) => setRole(e.target.value)}
+              className="mt-1 w-full px-3 py-2 border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)]"
+            >
+              {roleOptions.map((r) => (
+                <option key={r} value={r}>
+                  {r}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+              Email Verified
+            </label>
+            <p className="mt-1">
+              <span
+                className={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${user.emailVerified
+                  ? "bg-green-500/10 text-green-500"
+                  : "bg-yellow-500/10 text-yellow-500"
+                  }`}
+              >
+                {user.emailVerified ? "Verified" : "Not verified"}
+              </span>
+            </p>
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+              Status
+            </label>
+            <p className="mt-1">
+              <span
+                className={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${isLocked
+                  ? "bg-red-500/10 text-red-500"
+                  : "bg-green-500/10 text-green-500"
+                  }`}
+              >
+                {isLocked ? "Locked" : "Active"}
+              </span>
+            </p>
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+              Last Login
+            </label>
+            <p className="mt-1 text-sm text-[var(--kyro-text-secondary)]">
+              {user.lastLogin
+                ? new Date(user.lastLogin).toLocaleString()
+                : "Never"}
+            </p>
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+              Failed Attempts
+            </label>
+            <p className="mt-1 text-sm font-medium text-[var(--kyro-text-primary)]">
+              {user.failedLoginAttempts || 0}
+            </p>
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[#64748b]  tracking-wider">
+              Created
+            </label>
+            <p className="mt-1 text-sm text-[#64748b]">
+              {formatDate(user.createdAt)}
+            </p>
+          </div>
+          <div>
+            <label className="text-xs font-bold text-[#64748b]  tracking-wider">
+              Updated
+            </label>
+            <p className="mt-1 text-sm text-[#64748b]">
+              {formatDate(user.updatedAt)}
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-end">
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-6 py-2 bg-[#0b1222] text-white rounded-xl text-sm font-bold hover:bg-[#1a2332] transition-colors disabled:opacity-50"
+          >
+            {saving ? "Saving…" : "Save Changes"}
+          </button>
+        </div>
+      </div>
+
+    </div>
+  );
+}

package/src/components/users/UserForm.tsx

@@ -0,0 +1,242 @@
+import React, { useState } from "react";
+
+interface UserFormProps {
+  mode: "create" | "edit";
+  apiPath: string;
+  adminPath: string;
+  user?: {
+    id: string;
+    name?: string;
+    email: string;
+    role: string;
+    tenantId?: string;
+    emailVerified?: boolean;
+    locked?: boolean;
+  };
+}
+
+const roleOptions = [
+  "super_admin",
+  "admin",
+  "editor",
+  "author",
+  "customer",
+  "guest",
+];
+
+export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
+  const [email, setEmail] = useState(user?.email || "");
+  const [name, setName] = useState(user?.name || "");
+  const [password, setPassword] = useState("");
+  const [role, setRole] = useState(user?.role || "customer");
+  const [tenantId, setTenantId] = useState(user?.tenantId || "");
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{
+    text: string;
+    type: "success" | "error";
+  } | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+
+    const body: Record<string, string> = { email, role };
+    if (name.trim()) body.name = name.trim();
+    if (mode === "create") body.password = password;
+    if (tenantId.trim()) body.tenantId = tenantId.trim();
+
+    try {
+      const url =
+        mode === "create" ? `${apiPath}/users` : `${apiPath}/users/${user!.id}`;
+      const method = mode === "create" ? "POST" : "PATCH";
+
+      const res = await fetch(url, {
+        method,
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        setMessage({
+          text:
+            mode === "create"
+              ? "User created successfully!"
+              : "User updated successfully!",
+          type: "success",
+        });
+        setTimeout(() => {
+          window.location.href = `${adminPath}/users`;
+        }, 1000);
+      } else {
+        setMessage({
+          text: data.error || "Failed to save user",
+          type: "error",
+        });
+      }
+    } catch (err) {
+      setMessage({ text: "An unexpected error occurred", type: "error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto pr-12 space-y-8">
+      <div className="surface-tile p-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+            {mode === "create" ? "Create User" : "Edit User"}
+          </h1>
+          <p className="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium">
+            {mode === "create"
+              ? "Add a new user to the system"
+              : `Editing ${user?.email}`}
+          </p>
+        </div>
+        <a
+          href={`${adminPath}/users`}
+          className="text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+        >
+          ← Back to users
+        </a>
+      </div>
+
+      <div className="surface-tile p-6">
+        <form onSubmit={handleSubmit} className="space-y-6 max-w-2xl">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+            >
+              Name (optional)
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
+              placeholder="John Doe"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+            >
+              Email Address
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
+              placeholder="user@example.com"
+            />
+          </div>
+
+          {mode === "create" && (
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                minLength={12}
+                className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
+                placeholder="Minimum 12 characters"
+              />
+              <p className="text-xs text-[var(--kyro-text-secondary)] mt-1">
+                Must contain , lowercase, numbers, and special
+                characters
+              </p>
+            </div>
+          )}
+
+          <div>
+            <label
+              htmlFor="role"
+              className="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+            >
+              Role
+            </label>
+            <select
+              id="role"
+              value={role}
+              onChange={(e) => setRole(e.target.value)}
+              className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
+            >
+              {roleOptions.map((r) => (
+                <option key={r} value={r}>
+                  {r}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label
+              htmlFor="tenantId"
+              className="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+            >
+              Tenant ID (optional)
+            </label>
+            <input
+              type="text"
+              id="tenantId"
+              value={tenantId}
+              onChange={(e) => setTenantId(e.target.value)}
+              className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
+              placeholder="Leave empty for global user"
+            />
+          </div>
+
+          <div className="flex items-center justify-end gap-3 pt-4 border-t border-[var(--kyro-border)]">
+            <a
+              href={`${adminPath}/users`}
+              className="px-6 py-3 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+            >
+              Cancel
+            </a>
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:bg-opacity-90 transition-colors shadow-lg shadow-black/10 disabled:opacity-50"
+            >
+              {loading
+                ? "Saving..."
+                : mode === "create"
+                  ? "Create User"
+                  : "Save Changes"}
+            </button>
+          </div>
+        </form>
+
+        {message && (
+          <div
+            className={`mt-4 p-4 rounded-xl text-sm font-bold ${message.type === "success"
+              ? "bg-green-500/10 text-green-500"
+              : "bg-red-500/10 text-red-500"
+              }`}
+          >
+            {message.text}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}