mejoras
This commit is contained in:
@@ -1,183 +1,141 @@
|
||||
<!-- resources/views/layouts/app.blade.php -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<!-- Cabecera estándar de Laravel -->
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div x-data="{ sidebarOpen: false }" class="flex h-screen">
|
||||
<!-- Sidebar -->
|
||||
<aside class="bg-gray-800 text-white w-64 flex-shrink-0">
|
||||
<div class="p-4">
|
||||
<h1 class="text-2xl font-bold">mDMS</h1>
|
||||
</div>
|
||||
|
||||
<nav class="mt-6">
|
||||
<x-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
|
||||
<x-icons icon="dashboard" class="w-5 h-5 mr-3" />
|
||||
Dashboard
|
||||
</x-nav-link>
|
||||
|
||||
<x-nav-link href="{{ route('projects.index') }}" :active="request()->routeIs('projects.*')">
|
||||
<x-icons icon="folder" class="w-5 h-5 mr-3" />
|
||||
Proyectos
|
||||
</x-nav-link>
|
||||
|
||||
<x-nav-link href="{{ route('documents.index') }}" :active="request()->routeIs('documents.*')">
|
||||
<x-icons icon="document" class="w-5 h-5 mr-3" />
|
||||
Documentos
|
||||
</x-nav-link>
|
||||
<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>
|
||||
|
||||
@can('view roles')
|
||||
<x-nav-link :href="route('roles.index')" :active="request()->routeIs('roles.*')">
|
||||
<x-icons icon="roles" class="w-5 h-5 mr-3" />
|
||||
{{ __('Roles') }}
|
||||
</x-nav-link>
|
||||
@endcan
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Contenido principal -->
|
||||
<main class="flex-1 overflow-x-hidden overflow-y-auto">
|
||||
<!-- Header -->
|
||||
<header class="bg-white shadow">
|
||||
<div class="flex items-center justify-between px-6 py-4">
|
||||
<div class="flex-1 max-w-2xl">
|
||||
<div class="relative">
|
||||
<input type="search" placeholder="Buscar documentos..."
|
||||
class="w-full pl-10 pr-4 py-2 rounded-lg border focus:outline-none focus:border-blue-500">
|
||||
<x-icons icon="search" class="w-5 h-5 absolute left-3 top-2.5 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<x-dropdown align="right">
|
||||
<x-slot name="trigger">
|
||||
<button class="flex items-center space-x-2">
|
||||
<span class="text-gray-700">{{ Auth::user()->name }}</span>
|
||||
<x-icons icon="chevron-down" class="w-4 h-4" />
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
<x-dropdown-link href="{{ route('profile.show') }}">
|
||||
<x-icons icon="user" class="w-5 h-5 mr-2" /> Perfil
|
||||
</x-dropdown-link>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<x-dropdown-link href="{{ route('logout') }}"
|
||||
onclick="event.preventDefault(); this.closest('form').submit();">
|
||||
<x-icons icon="logout" class="w-5 h-5 mr-2" /> Cerrar sesión
|
||||
</x-dropdown-link>
|
||||
</form>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Contenido del dashboard -->
|
||||
<div class="p-6">
|
||||
<!-- 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)
|
||||
<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">
|
||||
<x-activity-icon :type="$activity->type" />
|
||||
</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->diffForHumans() }}</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>
|
||||
</div>
|
||||
</main>
|
||||
<!-- 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>
|
||||
</body>
|
||||
</html>
|
||||
<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">
|
||||
<x-icons icon="activity" class="w-8 h-8 text-blue-500" />
|
||||
</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:navlist>
|
||||
|
||||
@endpush
|
||||
|
||||
</x-layouts.app>
|
||||
Reference in New Issue
Block a user