235 lines
12 KiB
PHP
235 lines
12 KiB
PHP
<div>
|
|
@if(!$selectedProject)
|
|
<!-- Project Selection -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-bold mb-4">Seleccione un proyecto para ver detalles</h2>
|
|
|
|
<div class="space-y-4">
|
|
@foreach($projects as $project)
|
|
<div class="project-card cursor-pointer hover:shadow-lg transition-shadow"
|
|
wire:click="selectProject({{ $project['id'] }})">
|
|
<div class="p-4">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">{{ $project['name'] }}</h3>
|
|
<p class="text-sm text-gray-500 mb-2">
|
|
{{ $project['description'] ?? 'Sin descripción disponible' }}
|
|
</p>
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
|
|
{{ ucfirst($project['pivot']['role_in_project']) }}
|
|
</span>
|
|
<span class="text-sm font-medium">
|
|
@php
|
|
$progress = collect($project['phases'])->avg('progress_percent') ?? 0;
|
|
@endphp
|
|
{{ number_format($progress, 1) }}% completado
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@else
|
|
<!-- Project Details -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-bold">{{ $projectDetails['name'] }}</h2>
|
|
<button wire:click="selectedProject = null"
|
|
class="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded hover:bg-gray-300">
|
|
← Volver a proyectos
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<h3 class="text-sm font-medium text-gray-500 mb-2">Estado</h3>
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
@php
|
|
$statuses = [
|
|
'planning' => 'Planificación',
|
|
'in_progress' => 'En progreso',
|
|
'on_hold' => 'En espera',
|
|
'completed' => 'Completado',
|
|
'cancelled' => 'Cancelado'
|
|
];
|
|
echo $statuses[$projectDetails['status']] ?? ucfirst($projectDetails['status']);
|
|
@endphp
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<h3 class="text-sm font-medium text-gray-500 mb-2">Fecha de inicio</h3>
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
{{ $projectDetails['start_date'] ?? 'No definida' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<h3 class="text-sm font-medium text-gray-500 mb-2">Fecha estimada</h3>
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
{{ $projectDetails['end_date'] ?? 'No definida' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-6">
|
|
<h3 class="text-sm font-medium text-gray-500 mb-2">Descripción</h3>
|
|
<p class="text-gray-700">
|
|
{{ $projectDetails['description'] ?? 'No hay descripción disponible' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Overview -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-bold mb-4">Resumen de Progreso</h2>
|
|
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-medium">Progreso General</h3>
|
|
<div class="text-2xl font-bold text-green-600">
|
|
{{ number_format($projectDetails['progress'] ?? 0, 1) }}%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
|
|
<div class="bg-green-600 h-2.5 rounded-full"
|
|
style="width: {{ min(max($projectDetails['progress'] ?? 0, 0), 100) }}%"></div>
|
|
</div>
|
|
|
|
<div class="text-sm text-gray-500">
|
|
{{ $projectDetails['progress'] ?? 0 }}% completado
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phases Progress -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-bold mb-4">Progreso por Fase</h2>
|
|
|
|
@php
|
|
$project = \App\Models\Project::find($selectedProject);
|
|
$phases = $project->phases ?? collect();
|
|
@endphp
|
|
|
|
@if($phases->isNotEmpty())
|
|
<div class="space-y-4">
|
|
@foreach($phases as $phase)
|
|
<div class="bg-white rounded-lg shadow p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-medium">{{ $phase->name }}</h3>
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">
|
|
Fase {{ $phase->id }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
|
<div class="bg-indigo-600 h-2.5 rounded-full"
|
|
style="width: {{ min(max($phase->progress_percent ?? 0, 0), 100) }}%"></div>
|
|
</div>
|
|
|
|
<div class="text-sm text-gray-500 mt-1">
|
|
{{ $phase->progress_percent ?? 0 }}% completado
|
|
</div>
|
|
|
|
@if($phase->features->isNotEmpty())
|
|
<div class="mt-3 pt-2 border-t border-gray-200">
|
|
<h4 class="text-sm font-medium text-gray-600 mb-2">Características:</h4>
|
|
<div class="space-y-1 text-sm">
|
|
@foreach($phase->features as $feature)
|
|
<div class="flex items-start">
|
|
<span class="flex-shrink-0">•</span>
|
|
<span class="ml-2">
|
|
{{ $feature->name }}:
|
|
<span class="font-medium">{{ $feature->completion_status ?? 'Pendiente' }}</span>
|
|
</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="bg-gray-50 p-6 text-center rounded-lg">
|
|
<p class="text-gray-500">No hay fases definidas para este proyecto</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Gallery -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-bold mb-4">Galería de Progreso</h2>
|
|
|
|
<div class="gallery-grid">
|
|
@foreach($galleryImages as $image)
|
|
<div class="gallery-item">
|
|
<img src="{{ $image['url'] }}"
|
|
alt="{{ $image['title'] }}"
|
|
class="w-full h-48 object-cover">
|
|
<div class="p-3">
|
|
<h4 class="text-sm font-medium">{{ $image['title'] }}</h4>
|
|
<p class="text-xs text-gray-500">{{ $image['date'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Change Orders -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-bold mb-4">Órdenes de Cambio</h2>
|
|
|
|
@if($changeOrders->isNotEmpty())
|
|
<div class="space-y-4">
|
|
@foreach($changeOrders as $order)
|
|
<div class="change-order-card change-order-{{ strtolower($order['status']) }} p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-medium">{{ $order['title'] }}</h3>
|
|
<span class="px-2 py-1 text-xs rounded-full
|
|
@if($order['status'] == 'pending') bg-yellow-100 text-yellow-800
|
|
@elseif($order['status'] == 'approved') bg-green-100 text-green-800
|
|
@elseif($order['status'] == 'rejected') bg-red-100 text-red-800
|
|
@endif">
|
|
{{ ucfirst($order['status']) }}
|
|
</span>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-2">{{ $order['description'] }}</p>
|
|
|
|
<div class="flex items-center space-x-3 text-sm">
|
|
<span class="mr-4">
|
|
<span class="font-medium">Solicitado:</span> {{ $order['requested_at'] }}
|
|
</span>
|
|
<span class="mr-4">
|
|
<span class="font-medium">Monto:</span> ${{ number_format($order['amount'], 2) }}
|
|
</span>
|
|
</div>
|
|
|
|
@if($order['status'] == 'pending')
|
|
<div class="mt-3 pt-2 border-t border-gray-200">
|
|
<div class="flex items-center space-x-3">
|
|
<button wire:click="approveChangeOrder({{ $order['id'] }})"
|
|
class="flex-1 px-3 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700 disabled:opacity-50">
|
|
Aprobar
|
|
</button>
|
|
<button wire:click="rejectChangeOrder({{ $order['id'] }})"
|
|
class="flex-1 px-3 py-2 bg-red-600 text-white text-sm rounded hover:bg-red-700 disabled:opacity-50">
|
|
Rechazar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="bg-gray-50 p-6 text-center rounded-lg">
|
|
<p class="text-gray-500">No hay órdenes de cambio pendientes</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|