Files
Nexora/resources/views/projects/index.blade.php
2025-10-25 11:29:20 +02:00

139 lines
6.3 KiB
PHP

<!-- resources/views/projects/index.blade.php -->
<x-layouts.app :title="__('Proyectos')" :showSidebar={{ $showSidebar }}>
<!-- Barra de búsqueda y creación -->
<div class="flex flex-col justify-between mb-6 space-y-4 md:flex-row md:space-y-0">
<div class="flex-1 max-w-md">
<form action="{{ route('projects.index') }}" method="GET">
<div class="relative">
<input type="search" name="search" value="{{ request('search') }}"
class="w-full pl-10 pr-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Buscar proyectos...">
<x-icons icon="search" class="absolute left-3 top-2.5 w-5 h-5 text-gray-400" />
</div>
</form>
</div>
@can('create', App\Models\Project::class)
<a href="{{ route('projects.create') }}"
class="flex items-center px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700">
<x-icons icon="plus" class="w-5 h-5 mr-2" />
{{ __('Nuevo') }}
</a>
@endcan
</div>
<!-- Listado de proyectos -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
@forelse($projects as $project)
<div class="overflow-hidden bg-white rounded-lg shadow border-1 hover:shadow-lg transition duration-300">
<!-- Imagen del proyecto -->
@if($project->project_image_path)
<img src="{{ asset('storage/' . $project->project_image_path) }}"
alt="Imagen del proyecto {{ $project->name }}"
class="object-cover w-full h-48 border-b">
@endif
<div class="p-4">
<div class="flex items-start justify-between">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900">
<a href="{{ route('projects.show', $project) }}"
class="hover:text-blue-600 hover:underline">
{{ $project->name }}
</a>
</h3>
<a href="{{ route('projects.show', $project) }}"
class="hover:text-blue-600 hover:underline">
{{ $project->reference }}
</a>
<p class="mt-2 text-sm text-gray-500">
{{ Str::limit(strip_tags($project->description), 200) }}
</p>
</div>
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="p-1 text-gray-400 hover:text-gray-600">
<x-icons icon="dots-vertical class="w-5 h-5" />
</button>
</x-slot>
<x-slot name="content">
<x-dropdown-link href="{{ route('projects.show', $project) }}">
<x-icons icon="eye" class="w-5 h-5 mr-2" /> Ver Detalles
</x-dropdown-link>
@can('update', $project)
<x-dropdown-link href="{{ route('projects.edit', $project) }}">
<x-icons icon="pencil" class="w-5 h-5 mr-2" /> Editar
</x-dropdown-link>
@endcan
@can('delete', $project)
<form method="POST" action="{{ route('projects.destroy', $project) }}">
@csrf
@method('DELETE')
<x-dropdown-link href="#"
onclick="event.preventDefault(); this.closest('form').submit();"
class="text-red-600 hover:bg-red-50">
<x-icons icon="trash" class="w-5 h-5 mr-2" /> Eliminar
</x-dropdown-link>
</form>
@endcan
</x-slot>
</x-dropdown>
</div>
<!-- Metadatos del proyecto -->
<div class="mt-4">
<div class="flex items-center justify-between mt-3 text-sm">
<span class="flex items-center text-gray-500">
<flux:icon.document class="w-4 h-4 mr-1 inline" />
{{ $project->documents_count }} documentos
</span>
<flux:badge variant="solid" color="{{ $project->status === 'Activo' ? 'emerald' : 'red'}}">{{ __(Str::ucfirst($project->status)) }}</flux:badge>
</div>
<div class="mt-2 text-sm text-gray-500">
<flux:icon.calendar class="w-4 h-4 mr-1 inline" />
Creado {{ $project->created_at->diffForHumans() }}
</div>
</div>
</div>
</div>
@empty
<div class="p-6 text-center text-gray-500 col-span-full">
<x-icons icon="folder-remove" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
{{ __('No tienes proyectos asignados.') }}
</div>
@endforelse
</div>
<!-- Paginación -->
<!-- Sidebar menu -->
@push('sidebar-menu')
<flux:navlist variant="outline">
<!-- Sección de Proyectos -->
<flux:navlist.group :heading="__('Projects')">
<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>