115 lines
5.5 KiB
PHP
115 lines
5.5 KiB
PHP
<?php
|
|
|
|
use Livewire\Volt\Component;
|
|
use Livewire\WithPagination;
|
|
|
|
new class extends Component
|
|
{
|
|
use WithPagination;
|
|
|
|
public function with(): array
|
|
{
|
|
return [
|
|
'activeTimelines' => auth()->user()
|
|
->timelines()
|
|
->active()
|
|
->withCount('updates')
|
|
->with(['updates' => fn ($q) => $q->latest()->limit(1)])
|
|
->latest('updated_at')
|
|
->paginate(10, pageName: 'active'),
|
|
|
|
'archivedTimelines' => auth()->user()
|
|
->timelines()
|
|
->archived()
|
|
->withCount('updates')
|
|
->latest('updated_at')
|
|
->paginate(10, pageName: 'archived'),
|
|
];
|
|
}
|
|
}; ?>
|
|
|
|
<div class="max-w-4xl mx-auto">
|
|
<flux:heading size="xl" class="mb-6 text-xl sm:text-2xl">{{ __('client.my_cases') }}</flux:heading>
|
|
|
|
{{-- Active Timelines --}}
|
|
@if($activeTimelines->total() > 0)
|
|
<div class="mb-6 sm:mb-8">
|
|
<h2 class="text-base sm:text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">{{ __('client.active_cases') }}</h2>
|
|
<div class="space-y-3 sm:space-y-4">
|
|
@foreach($activeTimelines as $timeline)
|
|
<div wire:key="timeline-{{ $timeline->id }}" class="bg-white dark:bg-zinc-800 p-3 sm:p-4 rounded-lg border-s-4 border-amber-500 shadow-sm">
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-medium text-zinc-900 dark:text-zinc-100 truncate">{{ $timeline->case_name }}</h3>
|
|
@if($timeline->case_reference)
|
|
<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
|
|
@endif
|
|
<p class="text-xs sm:text-sm text-zinc-500 dark:text-zinc-500 mt-1">
|
|
{{ __('client.updates') }}: {{ $timeline->updates_count }}
|
|
@if($timeline->updates->first())
|
|
· {{ __('client.last_update') }}: {{ $timeline->updates->first()->created_at->diffForHumans() }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<flux:badge variant="success">{{ __('client.active') }}</flux:badge>
|
|
<flux:button size="sm" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
|
|
{{ __('client.view') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@if($activeTimelines->hasPages())
|
|
<div class="mt-4">
|
|
{{ $activeTimelines->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Archived Timelines --}}
|
|
@if($archivedTimelines->total() > 0)
|
|
<div>
|
|
<h2 class="text-base sm:text-lg font-semibold text-zinc-600 dark:text-zinc-400 mb-4">{{ __('client.archived_cases') }}</h2>
|
|
<div class="space-y-3 sm:space-y-4 opacity-75">
|
|
@foreach($archivedTimelines as $timeline)
|
|
<div wire:key="timeline-{{ $timeline->id }}" class="bg-zinc-50 dark:bg-zinc-900 p-3 sm:p-4 rounded-lg shadow-sm">
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-medium text-zinc-700 dark:text-zinc-300 truncate">{{ $timeline->case_name }}</h3>
|
|
@if($timeline->case_reference)
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-500">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
|
|
@endif
|
|
<p class="text-xs sm:text-sm text-zinc-400 dark:text-zinc-600 mt-1">
|
|
{{ __('client.updates') }}: {{ $timeline->updates_count }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<flux:badge>{{ __('client.archived') }}</flux:badge>
|
|
<flux:button size="sm" variant="ghost" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
|
|
{{ __('client.view') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@if($archivedTimelines->hasPages())
|
|
<div class="mt-4">
|
|
{{ $archivedTimelines->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Empty State --}}
|
|
@if($activeTimelines->total() === 0 && $archivedTimelines->total() === 0)
|
|
<div class="empty-state">
|
|
<flux:icon name="folder-open" class="empty-state-icon text-zinc-300 dark:text-zinc-600" />
|
|
<p class="text-zinc-500 dark:text-zinc-400">{{ __('client.no_cases_yet') }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|