import { useRef, useState } from "react"; import { Form, Head, Link, router, usePage } from "@inertiajs/react"; import { AlertTriangle, BriefcaseBusiness, CalendarDays, Camera, KeyRound, MailCheck, ShieldCheck, Sparkles, Trash2, UserRound, } from "lucide-react"; import ProfileController from "@/actions/App/Http/Controllers/Settings/ProfileController"; import { Field } from "@/components/crm/form-field"; import { KpiTile } from "@/components/crm/kpi-tile"; import { Callout, MetaStrip, PageHeader, SectionCard, } from "@/components/crm/page-header"; import { StatusPill } from "@/components/crm/status-badge"; import DeleteUser from "@/components/delete-user"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useInitials } from "@/hooks/use-initials"; import { formatDate, formatDateTime } from "@/lib/format"; import { edit as appearanceEdit } from "@/routes/appearance"; import { edit as profileEdit } from "@/routes/profile"; import { destroy as destroyAvatar } from "@/routes/profile/avatar"; import { edit as securityEdit } from "@/routes/security"; import { send } from "@/routes/verification"; import type { Auth } from "@/types"; type Profile = { phone: string | null; job_title: string | null; department: string | null; employee_code: string | null; roles: string[]; created_at: string | null; last_login_at: string | null; email_verified_at: string | null; stats: { customers: number; active_jobs: number; open_tickets: number; }; }; type PageProps = { auth: Auth; }; const roleTones: Record = { "Super Admin": "violet", "Managing Director": "teal", Admin: "blue", "Admin Support": "indigo", "Operations Manager": "amber", "Sales Manager": "cyan", Sales: "emerald", Installer: "orange", Warehouse: "slate", Finance: "green", }; export default function Profile({ mustVerifyEmail, status, profile, }: { mustVerifyEmail: boolean; status?: string; profile: Profile; }) { const { auth } = usePage().props; const getInitials = useInitials(); const fileInput = useRef(null); const [preview, setPreview] = useState(null); const user = auth.user; const roles = profile.roles; const removePhoto = (): void => { if ( window.confirm( "Remove your photo? Your initials will be shown instead, everywhere your name appears.", ) ) { router.delete(destroyAvatar(), { preserveScroll: true }); } }; return ( <>
{({ processing, errors }) => ( <> Your account {profile.employee_code ? ( <> · {profile.employee_code} ) : null} } title="Your profile" description="The details your team sees, and the ones we use to reach you. Only you and an administrator can change these." actions={ } /> {/* The hero is the page's own summary: photo, name and how this person fits into the business, before any form field asks them to type anything. */}
{(preview ?? user.avatar) ? ( {user.name} ) : ( getInitials(user.name) )}

{user.name}

{roles.length === 0 ? ( No role assigned ) : ( roles.map((role) => ( {role} )) )}

{profile.job_title ?? "Add your job title so the team knows what you do"} {profile.department ? ` · ${profile.department}` : ""}

{(preview ?? user.avatar) ? ( ) : ( getInitials(user.name) )}
{user.avatar ? ( ) : null}

JPG, PNG or WebP, up to 4 MB. It is saved when you save the profile.

{errors.avatar ? (

{errors.avatar}

) : null}
{ const file = event.target.files?.[0]; setPreview( file ? URL.createObjectURL( file, ) : null, ); }} />
{mustVerifyEmail && user.email_verified_at === null ? (

Confirm your address to secure your account and receive account email. Re-send the verification email

{status === "verification-link-sent" ? (

A new verification link has been sent to your email address.

) : null} ) : profile.email_verified_at ? (

Email confirmed{" "} {formatDate( profile.email_verified_at, )}

) : null}
{roles.length === 0 ? ( No role assigned yet ) : ( roles.map((role) => ( {role} )) )}
Changes are visible to your team immediately.
Password & two-factor Change your password or add an authenticator app Appearance Light, dark, or follow your system
Signed in as
{user.email}
Last sign in
{formatDateTime( profile.last_login_at, )}
Member since
{formatDate(profile.created_at)}
Your photo and contact details follow your name everywhere in the CRM. Roles, access and whether the account is active are managed by an administrator on the{" "} staff screen .
)}
); } Profile.layout = { breadcrumbs: [ { title: "Your profile", href: profileEdit(), }, ], };