67 lines
2.4 KiB
PHP
67 lines
2.4 KiB
PHP
<?php
|
|
|
|
use App\Models\Timeline;
|
|
use Livewire\Volt\Component;
|
|
|
|
new class extends Component
|
|
{
|
|
public Timeline $timeline;
|
|
|
|
public function mount(Timeline $timeline): void
|
|
{
|
|
// Authorization: Ensure client owns this timeline
|
|
abort_unless($timeline->user_id === auth()->id(), 403);
|
|
|
|
$this->timeline = $timeline->load(['updates' => fn ($q) => $q->oldest()]);
|
|
}
|
|
}; ?>
|
|
|
|
<div class="max-w-3xl mx-auto">
|
|
{{-- Header --}}
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<flux:heading size="xl">{{ $timeline->case_name }}</flux:heading>
|
|
@if($timeline->case_reference)
|
|
<p class="text-zinc-600 dark:text-zinc-400">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
|
|
@endif
|
|
</div>
|
|
<flux:badge :variant="$timeline->status->value === 'active' ? 'success' : 'default'">
|
|
{{ __('client.' . $timeline->status->value) }}
|
|
</flux:badge>
|
|
</div>
|
|
|
|
{{-- Timeline Updates --}}
|
|
<div class="relative">
|
|
{{-- Vertical line --}}
|
|
<div class="absolute start-4 top-0 bottom-0 w-0.5 bg-amber-500/30"></div>
|
|
|
|
<div class="space-y-6">
|
|
@forelse($timeline->updates as $update)
|
|
<div wire:key="update-{{ $update->id }}" class="relative ps-12">
|
|
{{-- Dot --}}
|
|
<div class="absolute start-2 top-2 w-4 h-4 rounded-full bg-amber-500 border-4 border-amber-50 dark:border-zinc-900"></div>
|
|
|
|
<div class="bg-white dark:bg-zinc-800 p-4 rounded-lg shadow-sm">
|
|
<div class="text-sm text-zinc-500 dark:text-zinc-400 mb-2">
|
|
{{ $update->created_at->translatedFormat('l, d M Y - g:i A') }}
|
|
</div>
|
|
<div class="prose prose-sm dark:prose-invert max-w-none">
|
|
{!! $update->update_text !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="text-center text-zinc-500 dark:text-zinc-400 py-8">
|
|
{{ __('client.no_updates_yet') }}
|
|
</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<flux:button href="{{ route('client.timelines.index') }}">
|
|
{{ __('client.back_to_cases') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|