import React from 'react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link } from '@inertiajs/react'; import { PageProps, User } from '@/types'; interface UserShowProps extends PageProps { viewUser: User & { roles: any[]; permissions: string[]; created_at: string; updated_at: string; }; } function InfoRow({ label, children }: { label: string; children: React.ReactNode }) { return (
{label}
{children}
); } export default function UserShow({ viewUser }: UserShowProps) { const initials = `${viewUser.first_name?.charAt(0) || ''}${viewUser.last_name?.charAt(0) || ''}`.toUpperCase(); return (
Users {viewUser.first_name} {viewUser.last_name}
{/* Left: profile card */}
{viewUser.avatar_url ? : initials}

{viewUser.first_name} {viewUser.last_name}

{viewUser.email}

{viewUser.roles?.map((role: any) => ( {role.name || role} ))}
{viewUser.status === 'active' ? 'Active' : 'Inactive'}
Back to Users
{/* Right: details */}

Personal Information

{viewUser.first_name} {viewUser.last_name} {viewUser.email} #{viewUser.id}

Roles & Permissions

Assigned Roles

{viewUser.roles?.length ? viewUser.roles.map((role: any) => ( {role.name || role} )) : No roles assigned}

Granted Permissions

{viewUser.permissions?.length ? viewUser.permissions.map((p: any) => (
{p.name || p}
)) : Inherited from roles}

Activity Timeline

Account Created

{new Date(viewUser.created_at).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

Last Updated

{new Date(viewUser.updated_at).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

); }