@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/ThemeProvider.tsx

@@ -1,161 +1,7 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  type ReactNode,
-} from "react";
-import {
-  defaultLightTheme,
-  defaultDarkTheme,
-  type ThemeConfig,
-} from "@kyro-cms/core/client";
-
-export type ThemeMode = "light" | "dark" | "system";
-
-interface ThemeContextValue {
-  mode: ThemeMode;
-  theme: ThemeConfig;
-  setMode: (mode: ThemeMode) => void;
-  setCustomTheme: (theme: ThemeConfig) => void;
-}
-
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    // Return default light theme if used outside of a provider to prevent crashes
-    return {
-      mode: "light" as ThemeMode,
-      theme: defaultLightTheme,
-      setMode: () => {},
-      setCustomTheme: () => {},
-    };
-  }
-  return context;
-}
-
-interface ThemeProviderProps {
-  children: ReactNode;
-  defaultMode?: ThemeMode;
-  themes?: {
-    light?: ThemeConfig;
-    dark?: ThemeConfig;
-  };
-}
-
-export function ThemeProvider({
-  children,
-  defaultMode = "light",
-  themes = {},
-}: ThemeProviderProps) {
-  const [mode, setMode] = useState<ThemeMode>(defaultMode);
-  const [customTheme, setCustomTheme] = useState<ThemeConfig | null>(null);
-
-  const lightTheme = themes.light || defaultLightTheme;
-  const darkTheme = themes.dark || defaultDarkTheme;
-
-  const getResolvedTheme = (): ThemeConfig => {
-    if (customTheme) return customTheme;
-
-    if (mode === "system") {
-      if (typeof window !== "undefined") {
-        return window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? darkTheme
-          : lightTheme;
-      }
-      return lightTheme;
-    }
-
-    return mode === "dark" ? darkTheme : lightTheme;
-  };
-
-  const [theme, setTheme] = useState<ThemeConfig>(lightTheme);
-
-  useEffect(() => {
-    const resolved = getResolvedTheme();
-    setTheme(resolved);
-    applyThemeVariables(resolved);
-  }, [mode, customTheme]);
-
-  useEffect(() => {
-    if (mode !== "system") return;
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = () => {
-      const resolved = getResolvedTheme();
-      setTheme(resolved);
-      applyThemeVariables(resolved);
-    };
-
-    mediaQuery.addEventListener("change", handler);
-    return () => mediaQuery.removeEventListener("change", handler);
-  }, [mode, customTheme]);
-
-  const applyThemeVariables = (config: ThemeConfig) => {
-    const root = document.documentElement;
-
-    if (config.colors) {
-      Object.entries(config.colors).forEach(([key, value]) => {
-        root.style.setProperty(`--kyro-${key}`, value);
-        root.style.setProperty(
-          `--kyro-${key}-light`,
-          adjustBrightness(value, 0.9),
-        );
-        root.style.setProperty(
-          `--kyro-${key}-dark`,
-          adjustBrightness(value, 0.8),
-        );
-      });
-    }
-
-    if (config.borderRadius) {
-      Object.entries(config.borderRadius).forEach(([key, value]) => {
-        root.style.setProperty(`--kyro-radius-${key}`, value);
-      });
-    }
-
-    if (config.fonts) {
-      Object.entries(config.fonts).forEach(([key, value]) => {
-        root.style.setProperty(`--kyro-font-${key}`, value);
-      });
-    }
-  };
-
-  const adjustBrightness = (hex: string, factor: number): string => {
-    if (!hex.startsWith("#")) return hex;
-
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-
-    const adjust = (c: number) =>
-      Math.round(c * factor)
-        .toString(16)
-        .padStart(2, "0");
-
-    return `#${adjust(r)}${adjust(g)}${adjust(b)}`;
-  };
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        mode,
-        theme,
-        setMode,
-        setCustomTheme,
-      }}
-    >
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const LightThemeProvider = (
-  props: Omit<ThemeProviderProps, "defaultMode">,
-) => <ThemeProvider defaultMode="light" {...props} />;
-
-export const DarkThemeProvider = (
-  props: Omit<ThemeProviderProps, "defaultMode">,
-) => <ThemeProvider defaultMode="dark" {...props} />;
+export {
+  ThemeProvider,
+  LightThemeProvider,
+  DarkThemeProvider,
+  useTheme,
+} from "../theme/ThemeProvider";
+export type { ThemeMode } from "../theme/ThemeProvider";

package/src/components/UserManagement.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { apiGet, apiPatch } from "../lib/api";
+import { apiGet, apiPatch, apiDelete } from "../lib/api";
 import {
   Users,
   UserPlus,
@@ -11,7 +11,15 @@ import {
   Clock,
   Search,
   Filter,
-} from "lucide-react";
+  Trash2,
+  Edit2,
+  ChevronRight,
+  ShieldCheck,
+  ShieldAlert
+} from "./ui/icons";
+import { useUIStore, toast } from "../lib/stores";
+import { Badge } from "./ui/Badge";
+import { PageHeader } from "./ui/PageHeader";
 
 interface User {
   id: string;
@@ -20,6 +28,7 @@ interface User {
   role: string;
   locked?: boolean;
   lastLogin?: string;
+  tenantId?: string;
   createdAt: string;
 }
 
@@ -27,6 +36,7 @@ export function UserManagement() {
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
+  const { confirm, alert } = useUIStore();
 
   useEffect(() => {
     loadUsers();
@@ -35,7 +45,7 @@ export function UserManagement() {
   const loadUsers = async () => {
     try {
       setLoading(true);
-      const result = await apiGet("/api/auth/users");
+      const result = await apiGet<any>("/api/users");
       setUsers(result.docs || []);
     } catch (error) {
       console.error("Failed to load users:", error);
@@ -44,15 +54,44 @@ export function UserManagement() {
     }
   };
 
-  const handleToggleLock = async (user: User) => {
-    try {
-      await apiPatch(`/api/auth/${user.id}`, { locked: !user.locked });
-      setUsers((prev) =>
-        prev.map((u) => (u.id === user.id ? { ...u, locked: !u.locked } : u)),
-      );
-    } catch (error) {
-      console.error("Failed to toggle user lock:", error);
-    }
+  const handleToggleLock = (user: User) => {
+    const isLocking = !user.locked;
+    confirm({
+      title: isLocking ? "Lock User Account?" : "Unlock User Account?",
+      message: isLocking
+        ? `Are you sure you want to lock ${user.email}? They will be immediately logged out and unable to return.`
+        : `Restore system access for ${user.email}?`,
+      variant: isLocking ? "danger" : "success",
+      onConfirm: async () => {
+        try {
+          await apiPatch(`/api/users/${user.id}`, { locked: isLocking });
+          setUsers((prev) =>
+            prev.map((u) => (u.id === user.id ? { ...u, locked: isLocking } : u)),
+          );
+          toast.success(isLocking ? `Account locked: ${user.email}` : `Account restored: ${user.email}`);
+        } catch (error) {
+          console.error("Failed to toggle user lock:", error);
+        }
+      },
+    });
+  };
+
+  const handleDelete = (user: User) => {
+    confirm({
+      title: "Destroy User Account",
+      message: `You are about to permanently delete ${user.email}. This will remove all their data and cannot be undone.`,
+      variant: "danger",
+      confirmLabel: "Destroy Account",
+      onConfirm: async () => {
+        try {
+          await apiDelete(`/api/users/${user.id}`);
+          setUsers((prev) => prev.filter((u) => u.id !== user.id));
+          toast.success(`Identity purged: ${user.email}`);
+        } catch (error) {
+          console.error("Failed to delete user:", error);
+        }
+      },
+    });
   };
 
   const filteredUsers = users.filter(
@@ -62,152 +101,129 @@ export function UserManagement() {
   );
 
   return (
-    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12">
+    <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12">
       {/* Header */}
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
-        <div>
-          <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
-            Team <span className="text-[var(--kyro-primary)]">Management</span>
-          </h1>
-          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-60">
-            Control access and oversee administrative governance.
-          </p>
-        </div>
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-sm shadow-xl active:scale-95 transition-all"
-          >
-            <UserPlus className="w-4 h-4" />
-            Invite Member
-          </button>
-        </div>
-      </div>
+      <PageHeader
+        title="Identity & Access"
+        description="Manage the core administrative team and security permissions."
+        icon={Users}
+        action={{
+          label: "New User",
+          onClick: () => {
+            // New user logic
+          },
+          icon: UserPlus,
+        }}
+      />
 
-      {/* Tools bar */}
-      <div className="flex flex-col md:flex-row gap-4">
+      {/* Control Bar */}
+      <div className="flex flex-col md:flex-row gap-3">
         <div className="relative flex-1 group">
-          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
+          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
           <input
             type="text"
-            placeholder="Search by name or email..."
+            placeholder="Search by identity or email..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-11 pr-4 py-3 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-2xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] focus:border-[var(--kyro-primary)] transition-all text-sm font-medium"
+            className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
           />
         </div>
-        <div className="flex items-center gap-3 bg-[var(--kyro-bg-secondary)] p-1 rounded-2xl border border-[var(--kyro-border)]">
-          <button
-            type="button"
-            className="px-4 py-2 text-[10px] font-black uppercase tracking-widest bg-[var(--kyro-surface)] shadow-sm rounded-xl border border-[var(--kyro-border)]"
-          >
-            All Users
-          </button>
-          <button
-            type="button"
-            className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all"
-          >
-            Admins
-          </button>
-          <button
-            type="button"
-            className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all"
-          >
-            Restricted
-          </button>
+        <div className="flex items-center gap-1 bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
+          <button className="px-4 py-1.5 text-[10px] font-bold tracking-widest bg-[var(--kyro-surface)] shadow-sm rounded-lg border border-[var(--kyro-border)]">ALL</button>
+          <button className="px-4 py-1.5 text-[10px] font-bold tracking-widest opacity-40 hover:opacity-100 transition-all">ADMINS</button>
+          <button className="px-4 py-1.5 text-[10px] font-bold tracking-widest opacity-40 hover:opacity-100 transition-all">LOCKED</button>
         </div>
       </div>
 
-      {/* User Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-        {loading ? (
-          Array(6)
-            .fill(0)
-            .map((_, i) => (
-              <div
-                key={i}
-                className="surface-tile h-48 animate-pulse p-8 bg-[var(--kyro-bg-secondary)]"
-              />
-            ))
-        ) : filteredUsers.length === 0 ? (
-          <div className="col-span-full py-20 text-center surface-tile">
-            <Users className="w-12 h-12 mx-auto opacity-10 mb-4" />
-            <p className="opacity-40 italic">
-              No team members found matching your search.
-            </p>
-          </div>
-        ) : (
-          filteredUsers.map((user) => (
-            <div
-              key={user.id}
-              className={`surface-tile p-8 group transition-all duration-500 hover:shadow-2xl relative overflow-hidden ${user.locked ? "grayscale opacity-60" : ""}`}
-            >
-              {/* Status Badge */}
-              <div className="absolute top-0 right-0 p-6">
-                <span
-                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-[8px] font-black uppercase tracking-widest ${user.locked ? "bg-red-500/10 text-red-500" : "bg-green-500/10 text-green-500"}`}
-                >
-                  {user.locked ? "Locked" : "Active"}
-                </span>
-              </div>
-
-              <div className="flex items-center gap-4 mb-6">
-                <div className="w-14 h-14 rounded-2xl bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] flex items-center justify-center text-xl font-black text-[var(--kyro-primary)] group-hover:scale-110 transition-transform duration-500">
-                  {user.name ? user.name[0] : user.email[0].toUpperCase()}
-                </div>
-                <div>
-                  <h3 className="text-lg font-black tracking-tight">
-                    {user.name || "Set Name"}
-                  </h3>
-                  <div className="flex items-center gap-2 text-[11px] font-bold opacity-40 uppercase tracking-wider">
-                    <Shield className="w-3 h-3" />
-                    {user.role}
-                  </div>
-                </div>
-              </div>
-
-              <div className="space-y-4 mb-8">
-                <div className="flex items-center gap-3 text-sm font-medium text-[var(--kyro-text-secondary)]">
-                  <Mail className="w-4 h-4 opacity-40" />
-                  <span className="truncate">{user.email}</span>
-                </div>
-                <div className="flex items-center gap-3 text-sm font-medium text-[var(--kyro-text-secondary)]">
-                  <Clock className="w-4 h-4 opacity-40" />
-                  <span>
-                    Last seen{" "}
-                    {user.lastLogin
-                      ? new Date(user.lastLogin).toLocaleDateString()
-                      : "Never"}
-                  </span>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-3">
-                <button
-                  type="button"
-                  onClick={() => handleToggleLock(user)}
-                  className={`flex-1 py-2.5 rounded-xl font-black text-[10px] uppercase tracking-widest transition-all flex items-center justify-center gap-2 ${user.locked ? "bg-green-500/10 text-green-500 hover:bg-green-500/20" : "bg-red-500/10 text-red-500 hover:bg-red-500/20"}`}
-                >
-                  {user.locked ? (
-                    <Unlock className="w-3 h-3" />
-                  ) : (
-                    <Lock className="w-3 h-3" />
-                  )}
-                  {user.locked ? "Unlock Account" : "Lock Account"}
-                </button>
-                <button
-                  type="button"
-                  className="p-2.5 bg-[var(--kyro-bg-secondary)] rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-all"
-                >
-                  <MoreVertical className="w-4 h-4 opacity-40" />
-                </button>
-              </div>
-
-              {/* Decorative detail */}
-              <div className="absolute -bottom-4 -right-4 w-24 h-24 bg-[var(--kyro-primary)] opacity-0 group-hover:opacity-5 blur-3xl transition-opacity" />
-            </div>
-          ))
-        )}
+      {/* User Table */}
+      <div className="surface-tile overflow-hidden">
+        <table className="w-full text-left table-fixed">
+          <thead>
+            <tr className="text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)]">
+              <th className="px-6 py-4 w-64">Member Identity</th>
+              <th className="px-6 py-4">Administrative Role</th>
+              <th className="px-6 py-4">Security Status</th>
+              <th className="px-6 py-4">Last Activity</th>
+              <th className="px-6 py-4 w-32 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-[var(--kyro-border)]">
+            {loading ? (
+              Array.from({ length: 6 }).map((_, i) => (
+                <tr key={i} className="animate-pulse">
+                  <td colSpan={5} className="px-6 py-5 bg-[var(--kyro-surface-accent)]/30" />
+                </tr>
+              ))
+            ) : filteredUsers.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-6 py-20 text-center">
+                  <p className="text-xs font-bold opacity-30 tracking-widest uppercase italic">No identity matches found</p>
+                </td>
+              </tr>
+            ) : (
+              filteredUsers.map((user) => (
+                <tr key={user.id} className={`hover:bg-[var(--kyro-surface-accent)]/50 transition-colors group ${user.locked ? "opacity-50 grayscale" : ""}`}>
+                  <td className="px-6 py-3.5">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center text-xs font-bold text-[var(--kyro-primary)] group-hover:scale-105 transition-transform">
+                        {user.name ? user.name[0] : user.email[0].toUpperCase()}
+                      </div>
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                           <div className="text-xs font-bold text-[var(--kyro-text-primary)] truncate">{user.name || user.email.split("@")[0]}</div>
+                           {user.tenantId && (
+                             <Badge variant="outline" className="text-[7px] px-1 py-0 border-none bg-[var(--kyro-surface-accent)] opacity-50">
+                               {user.tenantId}
+                             </Badge>
+                           )}
+                        </div>
+                        <div className="text-[10px] text-[var(--kyro-text-secondary)] opacity-50 truncate">{user.email}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-3.5">
+                    <div className="flex items-center gap-2">
+                       <Shield className="w-3.5 h-3.5 opacity-30" />
+                       <span className="text-[10px] font-bold tracking-widest uppercase opacity-70">{user.role}</span>
+                    </div>
+                  </td>
+                  <td className="px-6 py-3.5">
+                    <Badge variant={user.locked ? "danger" : "success"} dot className="text-[8px] font-bold uppercase tracking-widest">
+                      {user.locked ? "Restricted" : "Authorized"}
+                    </Badge>
+                  </td>
+                  <td className="px-6 py-3.5">
+                    <div className="flex items-center gap-2 text-[10px] font-bold text-[var(--kyro-text-secondary)] opacity-50 uppercase tabular-nums">
+                      <Clock className="w-3 h-3" />
+                      {user.lastLogin ? new Date(user.lastLogin).toLocaleDateString() : "Never"}
+                    </div>
+                  </td>
+                  <td className="px-6 py-3.5 text-right">
+                    <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-all">
+                      <button
+                        onClick={() => handleToggleLock(user)}
+                        className={`p-1.5 rounded-lg border transition-all ${user.locked ? "bg-green-500/10 text-green-500 border-green-500/20 hover:bg-green-500/20" : "bg-amber-500/10 text-amber-500 border-amber-500/20 hover:bg-amber-500/20"}`}
+                        title={user.locked ? "Restore Access" : "Restrict Access"}
+                      >
+                        {user.locked ? <Unlock className="w-3.5 h-3.5" /> : <Lock className="w-3.5 h-3.5" />}
+                      </button>
+                      <button
+                        onClick={() => handleDelete(user)}
+                        className="p-1.5 rounded-lg border border-red-500/20 bg-red-500/10 text-red-500 hover:bg-red-500/20 transition-all"
+                        title="Delete User"
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                      <button className="p-1.5 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface)] transition-all">
+                        <MoreVertical className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
       </div>
     </div>
   );

package/src/components/UserMenu.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
+import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle, LogOut } from "./ui/icons";
+
+interface UserMenuProps {
+  adminPath: string;
+}
+
+export function UserMenu({ adminPath }: UserMenuProps) {
+
+  return (
+    <Dropdown
+      align="right"
+      trigger={
+        <div
+          className="flex justify-center p-2.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
+          title="Account"
+        >
+          <User className="w-4 h-4" strokeWidth={2.5} />
+        </div>
+      }
+    >
+      <div className="px-4 py-2 mb-1">
+        <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
+          Account
+        </p>
+      </div>
+
+      <DropdownItem
+        icon={<User className="w-4 h-4" />}
+        onClick={() => window.location.href = `${adminPath}/settings/account`}
+      >
+        Profile Settings
+      </DropdownItem>
+
+      <DropdownItem
+        icon={<Shield className="w-4 h-4" />}
+        onClick={() => window.location.href = `${adminPath}/roles`}
+      >
+        Permissions
+      </DropdownItem>
+
+      <DropdownSeparator />
+
+      <div className="px-4 py-2 mb-1">
+        <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
+          Developer
+        </p>
+      </div>
+
+      <DropdownItem
+        icon={<Key className="w-4 h-4" />}
+        onClick={() => (window.location.href = `${adminPath}/keys`)}
+      >
+        API Keys
+      </DropdownItem>
+
+      <DropdownItem
+        icon={<Webhook className="w-4 h-4" />}
+        onClick={() => (window.location.href = `${adminPath}/webhooks`)}
+      >
+        Web Hooks
+      </DropdownItem>
+      <DropdownItem
+        icon={<Clock className="w-4 h-4" />}
+        onClick={() => (window.location.href = `${adminPath}/sessions`)}
+      >
+        Sessions
+      </DropdownItem>
+      <DropdownItem
+        icon={<FileText className="w-4 h-4" />}
+        onClick={() => (window.location.href = `${adminPath}/audit`)}
+      >
+        Audit Logs
+      </DropdownItem>
+
+      <DropdownSeparator />
+
+      <div className="px-4 py-2 mb-1">
+        <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
+          Resources
+        </p>
+      </div>
+
+      <DropdownItem
+        icon={<ExternalLink className="w-4 h-4" />}
+        onClick={() => window.open("https://docs.kyro.dev", "_blank")}
+      >
+        Documentation
+      </DropdownItem>
+
+      <DropdownItem
+        icon={<HelpCircle className="w-4 h-4" />}
+        onClick={() => window.open("https://github.com/danielDozie/kyro-cms/issues", "_blank")}
+      >
+        Get Support
+      </DropdownItem>
+
+      <DropdownSeparator />
+
+      <DropdownItem
+        icon={<LogOut className="w-4 h-4" />}
+        danger
+        onClick={() => document.getElementById("logout-btn")?.click()}
+      >
+        Sign Out
+      </DropdownItem>
+    </Dropdown>
+  );
+}