import AdminLayout from '@/Layouts/AdminLayout'; import { ImageUploader } from '@/components/ImageUploader'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { api } from '@/lib/api'; import { parseServerDate } from '@/lib/date'; import { cn } from '@/lib/utils'; import type { PageProps } from '@/types'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { format } from 'date-fns'; import { AtSign, Briefcase, Building2, Calendar, CheckCircle2, Clock, Globe, KeyRound, Loader2, Phone, Save, Shield, ShieldCheck, } from 'lucide-react'; // ── Types ───────────────────────────────────────────────────────────────────── interface Profile { id: string; name: string; email: string; phone: string | null; job_title: string | null; department: string | null; timezone: string; avatar_url: string | null; role: string | null; status: string; last_login_at: string | null; email_verified_at: string | null; created_at: string; } interface Props { profile: Profile; } // ── Constants ───────────────────────────────────────────────────────────────── const TIMEZONES = [ 'Africa/Nairobi', 'Africa/Lagos', 'Africa/Cairo', 'Africa/Johannesburg', 'UTC', 'Europe/London', 'Europe/Paris', 'Asia/Dubai', 'Asia/Kolkata', 'America/New_York', 'America/Los_Angeles', ]; // ── Form field ──────────────────────────────────────────────────────────────── function Field({ label, hint, error, children, required, }: { label: string; hint?: string; error?: string; children: React.ReactNode; required?: boolean; }) { return (
{children} {hint && !error && (

{hint}

)} {error &&

{error}

}
); } // ── Meta row ────────────────────────────────────────────────────────────────── function MetaRow({ icon: Icon, label, value, }: { icon: React.ComponentType<{ className?: string }>; label: string; value: React.ReactNode; }) { return (

{label}

{value}

); } // ── Page ────────────────────────────────────────────────────────────────────── export default function ProfileIndex({ profile }: Props) { const { props } = usePage(); const success = (props.flash as { success?: string } | undefined)?.success; const { data, setData, put, processing, errors } = useForm({ name: profile.name, email: profile.email, phone: profile.phone ?? '', job_title: profile.job_title ?? '', department: profile.department ?? '', timezone: profile.timezone, }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); put('/admin/profile'); }; const initials = profile.name .split(' ') .map((w) => w[0]) .join('') .slice(0, 2) .toUpperCase(); return ( {/* Hero */}
{profile.avatar_url ? ( {profile.name} ) : (
{initials}
)}

{profile.name}

{profile.role && ( {profile.role} )} {profile.status}
{/* ── Left column: avatar + account meta ── */}
{/* Avatar */}
{ const form = new FormData(); form.append('avatar', file); return api.upload<{ avatar_url: string }>( '/admin/profile/avatar', form, ); }} onRemove={() => api.delete('/admin/profile/avatar')} />
{/* Account meta */}

Account

{profile.role} ) : ( None ) } /> Never ) } /> Not verified ) } />
{/* Change password link */}

Change password

Security settings

{/* ── Right column: edit form ── */}
{success && (
{success}
)}

Personal information

Update your name, contact details, and work info.

setData('name', e.target.value) } className={cn( errors.name && 'border-destructive', )} autoComplete="name" />
setData('email', e.target.value) } className={cn( 'pl-9', errors.email && 'border-destructive', )} autoComplete="email" />
setData('phone', e.target.value) } className={cn( 'pl-9', errors.phone && 'border-destructive', )} placeholder="+254 7xx xxx xxx" />

Work

setData( 'job_title', e.target.value, ) } className={cn( 'pl-9', errors.job_title && 'border-destructive', )} placeholder="e.g. Operations Lead" />
setData( 'department', e.target.value, ) } className={cn( 'pl-9', errors.department && 'border-destructive', )} placeholder="e.g. Product" />

Role and status can only be changed by another super admin.

); }