Nexora/resources/views/dashboard.blade.php

<!-- resources/views/layouts/app.blade.php -->
<x-layouts.app :title="__('Home')" :showSidebar={{ $showSidebar }}>
    <!-- Estadísticas rápidas -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <x-stats-card title="Proyectos" value=" {{ $stats['projects_count'] }} " icon="folder" color="bg-blue-500"/>
        <x-stats-card title="Documentos" value=" {{ $stats['documents_count'] }} " icon="document" color="bg-green-500" />
        <x-stats-card title="Almacenamiento" value=" {{$stats['users_count'] }} " icon="storage" color="bg-purple-500" />
        <x-stats-card title="Pendientes" value=" {{ $stats['storage_used'] }} " icon="clock" color="bg-yellow-500" />
    </div>

    <!-- Documentos recientes -->
    <div class="bg-white rounded-lg shadow mb-8">
        <div class="px-6 py-4 border-b">
            <h3 class="text-lg font-semibold">Documentos recientes</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nombre</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tipo</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Estado</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Acciones</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($recentDocuments as $document)
                        @if(!$document)
                            @continue
                        @endif
                        <tr>
                            <td class="px-6 py-4">{{ $document->name }}</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ $document->type }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <x-status-badge :status="$document->status" />
                            </td>
                            <td class="px-6 py-4">
                                <x-dropdown>
                                    <x-dropdown-link href="{{ route('documents.show', $document) }}">
                                        <x-icons icon="eye" class="w-4 h-4 mr-2" /> Ver
                                    </x-dropdown-link>
                                    <x-dropdown-link href="#">
                                        <x-icons icon="download" class="w-4 h-4 mr-2" /> Descargar
                                    </x-dropdown-link>
                                </x-dropdown>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Actividad reciente -->
    <div class="grid lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b">
                <h3 class="text-lg font-semibold">Actividad reciente</h3>
            </div>
            <div class="p-6">
                <div class="flow-root">
                    <ul class="-mb-4">
                        @foreach($recentActivities as $activity)
                        <li class="mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="flex-shrink-0">
                                    <flux:icon.calendar variant="solid" class="w-8 h-8 text-blue-800"/>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm text-gray-900">{{ $activity->description }}</p>
                                    <p class="text-xs text-gray-500">{{ $activity->created_at }}</p>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <!-- Uso de almacenamiento -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b">
                <h3 class="text-lg font-semibold">Uso de almacenamiento</h3>
            </div>
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <p class="text-2xl font-bold">{{ $stats['storage_used'] }}</p>
                        <p class="text-sm text-gray-500">de {{ $stats['storage_limit'] }} disponibles</p>
                    </div>
                    <x-icons icon="storage" class="w-12 h-12 text-purple-500" />
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-purple-500 rounded-full h-2" 
                        style="width: {{ $stats['storage_percentage'] }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar menu -->
    @push('sidebar-menu')
    <flux:navlist variant="outline">
        <flux:navlist.item 
                icon="computer-desktop" 
                :href="route('dashboard')" 
                wire:navigate
            >
                {{ __('Panel de control') }}
            </flux:navlist.item>
    
        <flux:separator />
        
        <!-- Sección de Usuarios -->
        <flux:navlist.group :heading="__('User')" expandable>
            <flux:navlist.item 
                icon="users" 
                :href="route('users.index')" 
                wire:navigate
            >
                {{ __('List Users') }}
            </flux:navlist.item>
            
            <flux:navlist.item 
                icon="user-plus" 
                :href="route('users.create')" 
                wire:navigate
            >
                {{ __('Create User') }}
            </flux:navlist.item>
        </flux:navlist.group>
        
        <flux:separator />
        <!-- Sección de Empresas -->
        <flux:navlist.group :heading="__('Empresas')" expandable>
            <flux:navlist.item 
                icon="building-office-2" 
                :href="route('companies.index')" 
                wire:navigate
            >
                {{ __('List companies') }}
            </flux:navlist.item>
            
            <flux:navlist.item 
                icon="building-office" 
                :href="route('companies.create')" 
                wire:navigate
            >
                {{ __('Create new company') }}
            </flux:navlist.item>
        </flux:navlist.group>
        
        <flux:separator />
        <flux:navlist.group :heading="__('Projects')" expandable>
            <flux:navlist.item 
                icon="folder" 
                :href="route('projects.index')" 
                wire:navigate
            >
                {{ __('List Projects') }}
            </flux:navlist.item>
            
            <flux:navlist.item 
                icon="plus" 
                :href="route('projects.create')" 
                wire:navigate
            >
                {{ __('Create Project') }}
            </flux:navlist.item>
        </flux:navlist.group>
    </flux:navlist>

    @endpush

</x-layouts.app>