@kyro-cms/admin 0.9.0 → 0.9.1

package/src/components/ui/icons.tsx

@@ -1,112 +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.
+// Re-exported from lucide-react (ISC license)
+// Allows 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";
+export { Activity as IconActivity } from "lucide-react";
+export { TriangleAlert as IconAlertTriangle } from "lucide-react";
+export { AlignLeft as IconAlignLeft } from "lucide-react";
+export { Archive as IconArchive } from "lucide-react";
+export { ArrowDown as IconArrowDown } from "lucide-react";
+export { ArrowRight as IconArrowRight } from "lucide-react";
+export { ArrowUpRight as IconArrowUpRight } from "lucide-react";
+export { Blocks as IconBlocks } from "lucide-react";
+export { Bold as IconBold } from "lucide-react";
+export { Book as IconBook } from "lucide-react";
+export { Box as IconBox } from "lucide-react";
+export { CircleCheck as IconCheckCircle2 } from "lucide-react";
+export { Check as IconCheck } from "lucide-react";
+export { ChevronDown as IconChevronDown } from "lucide-react";
+export { ChevronLeft as IconChevronLeft } from "lucide-react";
+export { ChevronRight as IconChevronRight } from "lucide-react";
+export { ChevronUp as IconChevronUp } from "lucide-react";
+export { Clock as IconClock } from "lucide-react";
+export { Code as IconCode } from "lucide-react";
+export { CodeXml as IconCode2 } from "lucide-react";
+export { Columns3 as IconColumns3 } from "lucide-react";
+export { Copy as IconCopy } from "lucide-react";
+export { Crop as IconCrop } from "lucide-react";
+export { Database as IconDatabase } from "lucide-react";
+export { Download as IconDownload } from "lucide-react";
+export { CloudDownload as IconDownloadCloud } from "lucide-react";
+export { ExternalLink as IconExternalLink } from "lucide-react";
+export { Eye as IconEye } from "lucide-react";
+export { EyeOff as IconEyeOff } from "lucide-react";
+export { File as IconFile } from "lucide-react";
+export { Globe as IconGlobe } from "lucide-react";
+export { Film as IconFilm } from "lucide-react";
+export { Filter as IconFilter } from "lucide-react";
+export { Folder as IconFolder } from "lucide-react";
+export { FolderInput as IconFolderInput } from "lucide-react";
+export { FolderPlus as IconFolderPlus } from "lucide-react";
+export { Grid3X3 as IconGrid } from "lucide-react";
+export { GripVertical as IconGripVertical } from "lucide-react";
+export { Heading1 as IconHeading1 } from "lucide-react";
+export { Hexagon as IconHexagon } from "lucide-react";
+export { House as IconHome } from "lucide-react";
+export { Image as IconImage } from "lucide-react";
+export { Info as IconInfo } from "lucide-react";
+export { Italic as IconItalic } from "lucide-react";
+export { Key as IconKey } from "lucide-react";
+export { LayoutPanelTop as IconLayout } from "lucide-react";
+export { LayoutDashboard as IconLayoutDashboard } from "lucide-react";
+export { Link as IconLink } from "lucide-react";
+export { Link2 as IconLink2 } from "lucide-react";
+export { List as IconList } from "lucide-react";
+export { ListOrdered as IconListOrdered } from "lucide-react";
+export { LoaderCircle as IconLoader2 } from "lucide-react";
+export { Lock as IconLock } from "lucide-react";
+export { LogOut as IconLogOut } from "lucide-react";
+export { Mail as IconMail } from "lucide-react";
+export { Maximize2 as IconMaximize2 } from "lucide-react";
+export { Menu as IconMenu } from "lucide-react";
+export { Minus as IconMinus } from "lucide-react";
+export { Monitor as IconMonitor } from "lucide-react";
+export { Moon as IconMoon } from "lucide-react";
+export { EllipsisVertical as IconMoreVertical } from "lucide-react";
+export { MousePointerClick as IconMousePointerClick } from "lucide-react";
+export { Music as IconMusic } from "lucide-react";
+export { Network as IconNetwork } from "lucide-react";
+export { Palette as IconPalette } from "lucide-react";
+export { Pause as IconPause } from "lucide-react";
+export { Pencil as IconPencil } from "lucide-react";
+export { Play as IconPlay } from "lucide-react";
+export { CirclePlay as IconPlayCircle } from "lucide-react";
+export { Plus as IconPlus } from "lucide-react";
+export { Redo as IconRedo } from "lucide-react";
+export { RefreshCcw as IconRefreshCcw } from "lucide-react";
+export { RefreshCw as IconRefreshCw } from "lucide-react";
+export { Save as IconSave } from "lucide-react";
+export { Search as IconSearch } from "lucide-react";
+export { Send as IconSend } from "lucide-react";
+export { Settings as IconSettings } from "lucide-react";
+export { Shield as IconShield } from "lucide-react";
+export { ShieldCheck as IconShieldCheck } from "lucide-react";
+export { Sparkles as IconSparkles } from "lucide-react";
+export { Star as IconStar } from "lucide-react";
+export { Strikethrough as IconStrikethrough } from "lucide-react";
+export { Sun as IconSun } from "lucide-react";
+export { Tag as IconTag } from "lucide-react";
+export { Terminal as IconTerminal } from "lucide-react";
+export { ToggleLeft as IconToggleLeft } from "lucide-react";
+export { ToggleRight as IconToggleRight } from "lucide-react";
+export { Trash2 as IconTrash2 } from "lucide-react";
+export { TrendingUp as IconTrendingUp } from "lucide-react";
+export { Type as IconType } from "lucide-react";
+export { Underline as IconUnderline } from "lucide-react";
+export { Undo as IconUndo } from "lucide-react";
+export { LockOpen as IconUnlock } from "lucide-react";
+export { User as IconUser } from "lucide-react";
+export { UserPlus as IconUserPlus } from "lucide-react";
+export { Users as IconUsers } from "lucide-react";
+export { Video as IconVideo } from "lucide-react";
+export { Webhook as IconWebhook } from "lucide-react";
+export { X as IconX } from "lucide-react";
+export { Zap as IconZap } from "lucide-react";
+export { Dot as IconDot } from "lucide-react";
+export { ShieldAlert as IconShieldAlert } from "lucide-react";
+export { Pencil as IconEdit2 } from "lucide-react";
+export { Calendar as IconCalendar } from "lucide-react";
+export { Grid3X3 as IconGrid3X3 } from "lucide-react";
 
 // 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";
+export { Activity as Activity, AlignLeft as AlignLeft, Archive as Archive, ArrowDown as ArrowDown, ArrowRight as ArrowRight, ArrowUpRight as ArrowUpRight, Blocks as Blocks, Box as Box, Calendar as Calendar, Check as Check, ChevronDown as ChevronDown, ChevronLeft as ChevronLeft, ChevronRight as ChevronRight, ChevronUp as ChevronUp, Clock as Clock, Code as Code, Columns3 as Columns3, Copy as Copy, Crop as Crop, Download as Download, ExternalLink as ExternalLink, Eye as Eye, EyeOff as EyeOff, File as File, File as FileIcon, FileText as FileText, Globe as Globe, Film as Film, Filter as Filter, Folder as Folder, FolderInput as FolderInput, FolderPlus as FolderPlus, GripVertical as GripVertical, Heading1 as Heading1, Image as Image, Info as Info, Key as Key, LayoutDashboard as LayoutDashboard, Link as Link, Link2 as Link2, List as List, ListOrdered as ListOrdered, Lock as Lock, Mail as Mail, Maximize2 as Maximize2, Menu as Menu, Minus as Minus, Monitor as Monitor, MousePointerClick as MousePointerClick, Music as Music, Palette as Palette, Pause as Pause, Play as Play, Plus as Plus, RefreshCcw as RefreshCcw, RefreshCw as RefreshCw, Save as Save, Search as Search, Send as Send, Settings as Settings, Shield as Shield, Sparkles as Sparkles, Star as Star, Tag as Tag, Terminal as Terminal, ToggleLeft as ToggleLeft, ToggleRight as ToggleRight, Trash2 as Trash2, TrendingUp as TrendingUp, Type as Type, User as User, UserPlus as UserPlus, Users as Users, Video as Video, Webhook as Webhook, X as X, Zap as Zap, CircleHelp as HelpCircle } from "lucide-react";
+export { CircleCheck as CheckCircle2, Grid3X3 as Grid, House as Home, LayoutPanelTop as Layout, LoaderCircle as Loader2, LockOpen as Unlock, CirclePlay as PlayCircle, TriangleAlert as AlertTriangle, CodeXml as Code2, CloudDownload as DownloadCloud, EllipsisVertical as MoreVertical, ShieldCheck as ShieldCheck, ShieldAlert as ShieldAlert, Pencil as Edit2, Moon as Moon, Sun as Sun, LogOut as LogOut, Database as Database, Hexagon as Hexagon, Network as Network, Book as Book, Bold as Bold, Italic as Italic, Underline as Underline, Strikethrough as Strikethrough, Undo as Undo, Redo as Redo, Dot as Dot, Grid3X3, Laptop as Laptop, Smartphone as Smartphone } from "lucide-react";

package/src/components/users/UserDetail.tsx

@@ -1,11 +1,15 @@
-import React, { useState } from "react";
-import { useUIStore } from "../../lib/stores";
+import React, { useState, useEffect } from "react";
+import { apiGet } from "../../lib/api";
+import { useUIStore, toast } from "../../lib/stores";
+import { X } from "../ui/icons";
+import { UploadField } from "../fields/UploadField";
 
 interface User {
   id: string;
   name?: string;
   email: string;
   role: string;
+  avatar?: string;
   tenantId?: string;
   emailVerified?: boolean;
   locked?: boolean;
@@ -33,12 +37,41 @@ const roleOptions = [
 export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
   const [name, setName] = useState(user.name || "");
   const [role, setRole] = useState(user.role);
+  const [avatar, setAvatar] = useState<string | undefined>(user.avatar);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [avatarMedia, setAvatarMedia] = useState<any>(user.avatar ? { id: user.avatar } : null);
   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);
 
+  useEffect(() => {
+    if (typeof avatar === "string" && /^[0-9a-f-]+$/i.test(avatar)) {
+      apiGet<any>(`/api/media/${avatar}`)
+        .then((media) => {
+          setAvatarUrl(media?.thumbnailUrl || media?.url || null);
+          setAvatarMedia({ id: avatar, url: media.url, thumbnailUrl: media.thumbnailUrl, filename: media.filename, originalName: media.originalName, mimeType: media.mimeType });
+        })
+        .catch(() => { setAvatarUrl(null); setAvatarMedia(null); });
+    } else {
+      setAvatarUrl(null);
+      setAvatarMedia(null);
+    }
+  }, [avatar]);
+
+  const handleAvatarChange = (val: any) => {
+    if (val && typeof val === "object") {
+      setAvatar(val.id);
+      setAvatarUrl(val.url || val.thumbnailUrl || null);
+      setAvatarMedia(val);
+    } else {
+      setAvatar(undefined);
+      setAvatarUrl(null);
+      setAvatarMedia(null);
+    }
+  };
+
   const handleSave = async () => {
     setSaving(true);
     try {
@@ -50,6 +83,9 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
       if (name !== user.name) {
         body.name = name.trim() === "" ? null : name.trim();
       }
+      if (avatar !== user.avatar) {
+        body.avatar = avatar || null;
+      }
 
       if (Object.keys(body).length === 0) {
         window.location.href = adminPath + "/users";
@@ -66,12 +102,13 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
       const data = await res.json();
 
       if (res.ok) {
+        toast.success("User updated");
         window.location.href = adminPath + "/users";
       } else {
-        console.error("Save failed:", data.error);
+        toast.error(data.error || "Failed to save user");
       }
     } catch (e) {
-      console.error("Failed to save user:", e);
+      toast.error("Failed to save user");
     } finally {
       setSaving(false);
     }
@@ -96,9 +133,12 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
           });
           if (res.ok) {
             setIsLocked(!isLocked);
+            toast.success(isLocked ? "User unlocked" : "User locked");
+          } else {
+            toast.error("Failed to update lock status");
           }
         } catch (e) {
-          console.error("Failed to toggle lock:", e);
+          toast.error("Failed to toggle lock");
         } finally {
           setLocking(false);
         }
@@ -119,10 +159,13 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
             credentials: "include",
           });
           if (res.ok) {
+            toast.success("User deleted");
             window.location.href = adminPath + "/users";
+          } else {
+            toast.error("Failed to delete user");
           }
         } catch (e) {
-          console.error("Failed to delete user:", e);
+          toast.error("Failed to delete user");
         } finally {
           setDeleting(false);
         }
@@ -139,14 +182,18 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
     <div className="flex-1 overflow-y-auto  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 className="relative 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 overflow-hidden flex-shrink-0">
+            {avatarUrl ? (
+              <img src={avatarUrl} alt="" className="w-full h-full object-cover" />
+            ) : (
+              (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">
+            <p className="text-sm text-[var(--kyro-text-secondary)] font-medium mb-2">
               {name ? user.email : `User ID: ${user.id}`}
             </p>
           </div>
@@ -248,14 +295,20 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
                 : "Never"}
             </p>
           </div>
-          <div>
-            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
-              Failed Attempts
+          <div className="col-span-2">
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)] tracking-wider">
+              Photo
             </label>
-            <p className="mt-1 text-sm font-medium text-[var(--kyro-text-primary)]">
-              {user.failedLoginAttempts || 0}
-            </p>
+            <div className="mt-1 flex items-center gap-2">
+              <UploadField
+                field={{ label: "Photo", name: "avatar", maxCount: 1, allowedTypes: ["image/*"] }}
+                value={avatarMedia}
+                onChange={handleAvatarChange}
+                disabled={saving}
+              />
+            </div>
           </div>
+
           <div>
             <label className="text-xs font-bold text-[#64748b]  tracking-wider">
               Created
@@ -264,6 +317,16 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
               {formatDate(user.createdAt)}
             </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">
               Updated
@@ -278,7 +341,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
           <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"
+            className="kyro-btn kyro-btn-primary px-6 py-2 rounded-xl text-sm font-bold transition-colors disabled:opacity-50"
           >
             {saving ? "Saving…" : "Save Changes"}
           </button>