Car-Repairs-Shop/resources/views/livewire/users/show.blade.php

<div>
    <div class="p-6 space-y-6">
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-center justify-between space-y-4 md:space-y-0">
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <div class="flex-shrink-0 w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg">
                        {{ $user->initials() }}
                    </div>
                    <div class="absolute -bottom-1 -right-1 w-6 h-6 {{ $this->getStatusBadgeClass($user->status) }} rounded-full border-2 border-white dark:border-zinc-800 flex items-center justify-center">
                        @if($user->status === 'active')
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                        @elseif($user->status === 'suspended')
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        @else
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
                            </svg>
                        @endif
                    </div>
                </div>
                <div class="space-y-1">
                    <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">{{ $user->name }}</h1>
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="text-zinc-600 dark:text-zinc-400">{{ $user->position ?? 'User' }}</span>
                        @if($user->department)
                            <span class="text-zinc-400">•</span>
                            <span class="text-zinc-600 dark:text-zinc-400">{{ $user->department }}</span>
                        @endif
                        @if($user->employee_id)
                            <span class="text-zinc-400">•</span>
                            <span class="text-xs font-mono px-2 py-1 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 rounded">{{ $user->employee_id }}</span>
                        @endif
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $this->getStatusBadgeClass($user->status) }}">
                            {{ ucfirst($user->status) }}
                        </span>
                        @if($user->branch_code)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
                                Branch: {{ $user->branch_code }}
                            </span>
                        @endif
                        @if($user->customer)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">
                                Customer Account
                            </span>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex items-center space-x-3">
                @if($user->customer)
                <flux:button href="{{ route('customers.show', $user->customer) }}" wire:navigate variant="outline" size="sm" icon="user">
                    View Customer
                </flux:button>
                @endif
                
                @if($this->canPerformAction('impersonate'))
                <flux:button variant="outline" size="sm" wire:click="confirmImpersonate" icon="user-circle">
                    Impersonate
                </flux:button>
                @endif
                
                @if($this->canPerformAction('reset_password'))
                <flux:button variant="outline" size="sm" wire:click="sendPasswordReset" icon="key">
                    Reset Password
                </flux:button>
                @endif
                
                @if($this->canPerformAction('edit'))
                <flux:button href="{{ route('users.edit', $user) }}" wire:navigate variant="primary" size="sm" icon="pencil">
                    Edit User
                </flux:button>
                @endif
                
                <flux:button href="{{ route('users.index') }}" wire:navigate variant="ghost" size="sm" icon="arrow-left">
                    Back to Users
                </flux:button>
            </div>
        </div>

        <!-- User Management Submenu -->
        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
            <div class="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-700">
                <h2 class="text-lg font-medium text-zinc-900 dark:text-white">User Management</h2>
                <div class="flex items-center space-x-1">
                    <button class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 rounded-md transition-colors">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        User Details
                    </button>
                </div>
            </div>
            
            <div class="flex items-center space-x-1 p-4">
                <a href="{{ route('users.index') }}" 
                   class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 rounded-md transition-colors"
                   wire:navigate>
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                    </svg>
                    All Users
                </a>

                <a href="{{ route('users.show', $user) }}" 
                   class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-200 dark:border-blue-800"
                   wire:navigate>
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    User Details
                </a>

                <a href="{{ route('users.manage-roles', $user) }}" 
                   class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 rounded-md transition-colors"
                   wire:navigate>
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                    </svg>
                    Roles & Permissions
                </a>

                @if($user->customer)
                <a href="{{ route('customers.show', $user->customer) }}" 
                   class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-md transition-colors"
                   wire:navigate>
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    Customer Profile
                </a>
                @endif

                <a href="{{ route('users.edit', $user) }}" 
                   class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 rounded-md transition-colors"
                   wire:navigate>
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    Edit User
                </a>

                <div class="border-l border-zinc-200 dark:border-zinc-600 mx-2 h-6"></div>

                <button onclick="showUserActionsMenu()" 
                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 rounded-md transition-colors">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                    </svg>
                    Actions
                </button>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Total Permissions</p>
                        <p class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $metrics['total_permissions'] }}</p>
                    </div>
                    <div class="flex-shrink-0 p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Active Roles</p>
                        <p class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $metrics['active_roles'] }}</p>
                    </div>
                    <div class="flex-shrink-0 p-2 bg-purple-100 dark:bg-purple-900 rounded-lg">
                        <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Work Orders</p>
                        <p class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $workStats['work_orders_completed'] ?? 0 }}/{{ $workStats['work_orders_assigned'] ?? 0 }}</p>
                    </div>
                    <div class="flex-shrink-0 p-2 bg-green-100 dark:bg-green-900 rounded-lg">
                        <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Days Active</p>
                        <p class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $metrics['days_since_created'] }}</p>
                    </div>
                    <div class="flex-shrink-0 p-2 bg-amber-100 dark:bg-amber-900 rounded-lg">
                        <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- User Information Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Personal Information -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-4">Personal Information</h3>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Email:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->email }}</span>
                    </div>
                    @if($user->phone)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Phone:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->phone }}</span>
                    </div>
                    @endif
                    @if($user->date_of_birth)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Date of Birth:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->date_of_birth->format('M d, Y') }}</span>
                    </div>
                    @endif
                    @if($user->national_id)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">National ID:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->national_id }}</span>
                    </div>
                    @endif
                    @if($user->address)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Address:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->address }}</span>
                    </div>
                    @endif
                    @if($user->emergency_contact)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Emergency Contact:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->emergency_contact }}</span>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Professional Information -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-4">Professional Information</h3>
                <div class="space-y-3">
                    @if($user->position)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Position:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->position }}</span>
                    </div>
                    @endif
                    @if($user->department)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Department:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ ucfirst(str_replace('_', ' ', $user->department)) }}</span>
                    </div>
                    @endif
                    @if($user->salary)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Salary:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">${{ number_format($user->salary, 2) }}</span>
                    </div>
                    @endif
                    @if($user->hire_date)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Hire Date:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ $user->hire_date->format('M d, Y') }}</span>
                    </div>
                    @endif
                    @if($user->branch)
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Branch:</span>
                        <span class="text-sm text-zinc-900 dark:text-white">{{ ucfirst(str_replace('_', ' ', $user->branch)) }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between">
                        <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Status:</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $this->getStatusBadgeClass($user->status) }}">
                            {{ ucfirst($user->status) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabs Navigation -->
        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden">
            <div class="border-b border-zinc-200 dark:border-zinc-700">
                <nav class="flex space-x-8 px-6" aria-label="Tabs">
                    <button class="py-4 px-1 border-b-2 font-medium text-sm {{ $activeTab === 'roles' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600' }}" 
                            wire:click="$set('activeTab', 'roles')">
                        Roles & Permissions
                    </button>
                    <button class="py-4 px-1 border-b-2 font-medium text-sm {{ $activeTab === 'activity' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600' }}" 
                            wire:click="$set('activeTab', 'activity')">
                        Activity Log
                    </button>
                </nav>
            </div>

            <!-- Tab Content -->
            <div class="p-6">
                @if($activeTab === 'roles')
                <!-- Roles Tab -->
                <div class="space-y-6">
                    <!-- User Roles -->
                    <div>
                        <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-4">Assigned Roles</h3>
                        @if($user->roles->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach($user->roles as $role)
                            <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <h4 class="text-sm font-medium text-zinc-900 dark:text-white">{{ $role->display_name }}</h4>
                                        @if($role->description)
                                        <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">{{ $role->description }}</p>
                                        @endif
                                    </div>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $this->getRoleBadgeClass($role->name) }}">
                                        {{ $role->name }}
                                    </span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <div class="text-center py-8">
                            <svg class="w-12 h-12 text-zinc-400 dark:text-zinc-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                            <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-2">No roles assigned</h3>
                            <p class="text-zinc-500 dark:text-zinc-400">This user doesn't have any roles assigned yet.</p>
                        </div>
                        @endif
                    </div>

                    <!-- User Permissions -->
                    <div>
                        <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-4">Effective Permissions</h3>
                        @php
                            $allPermissions = $user->getAllPermissions();
                            $groupedPermissions = $allPermissions->groupBy(function($permission) {
                                return explode('.', $permission->name)[0];
                            });
                        @endphp
                        
                        @if($allPermissions->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($groupedPermissions as $module => $permissions)
                            <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-4">
                                <h4 class="text-sm font-medium text-zinc-900 dark:text-white mb-3">{{ ucfirst($module) }}</h4>
                                <div class="space-y-2">
                                    @foreach($permissions as $permission)
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-zinc-600 dark:text-zinc-300">{{ str_replace($module.'.', '', $permission->name) }}</span>
                                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                        </svg>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <div class="text-center py-8">
                            <svg class="w-12 h-12 text-zinc-400 dark:text-zinc-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-2">No permissions</h3>
                            <p class="text-zinc-500 dark:text-zinc-400">This user doesn't have any permissions assigned.</p>
                        </div>
                        @endif
                    </div>
                </div>
                @endif

                @if($activeTab === 'activity')
                <!-- Activity Tab -->
                <div>
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-4">Recent Activity</h3>
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 text-zinc-400 dark:text-zinc-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <h3 class="text-lg font-medium text-zinc-900 dark:text-white mb-2">Activity log coming soon</h3>
                        <p class="text-zinc-500 dark:text-zinc-400">User activity tracking will be available in a future update.</p>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 28px;
    font-weight: 600;
}
</style>
@endpush