si-klinik/sk-klinik.my.id/resources/views/livewire/patient/dashboard.blade.php

116 lines
6.1 KiB
PHP

<div class="space-y-6">
{{-- Welcome Section --}}
<div class="flex justify-between items-center">
<div>
<flux:heading size="xl">Halo, {{ auth()->user()->name }}! 👋</flux:heading>
<flux:subheading>Semoga sehat selalu hari ini.</flux:subheading>
</div>
<flux:button href="{{ route('patient.appointment') }}" variant="primary" icon="plus">
Buat Janji Temu
</flux:button>
</div>
<div class="gap-6 grid grid-cols-1 lg:grid-cols-3">
{{-- Status Antrean Hari Ini --}}
<div class="space-y-4 lg:col-span-2">
<flux:heading>Janji Temu Hari Ini</flux:heading>
@if ($currentAppointment)
<flux:card class="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
<div class="flex md:flex-row flex-col justify-between md:items-center gap-4">
<div class="flex items-center gap-4">
<div class="bg-blue-600 p-4 rounded-2xl text-white">
<flux:text class="font-bold text-white/80 text-xs uppercase">No. Antrean</flux:text>
<flux:heading size="xl" class="text-white text-3xl">
{{ $currentAppointment->queue_number }}</flux:heading>
</div>
<div>
<flux:heading>{{ $currentAppointment->serviceCategory->name }}</flux:heading>
<flux:subheading>Dokter: {{ $currentAppointment->doctor->name ?? 'Akan ditentukan' }}
</flux:subheading>
<div class="mt-2">
<flux:badge
color="{{ $currentAppointment->status === 'calling' ? 'green' : 'warning' }}"
variant="solid">
{{ strtoupper($currentAppointment->status) }}
</flux:badge>
</div>
</div>
</div>
<div class="text-right">
<flux:text size="sm" class="text-zinc-500">Tanggal Sesi</flux:text>
<flux:text class="font-medium">
{{ \Carbon\Carbon::parse($currentAppointment->appointment_date)->translatedFormat('d F Y') }}
</flux:text>
</div>
</div>
</flux:card>
@else
<flux:card class="flex flex-col justify-center items-center py-10 text-center">
<flux:icon.calendar class="mb-2 size-10 text-zinc-300" />
<flux:heading>Tidak ada jadwal hari ini</flux:heading>
<flux:subheading>Silakan buat janji temu jika Anda merasa kurang sehat.</flux:subheading>
</flux:card>
@endif
{{-- Riwayat Singkat --}}
<div class="space-y-4 mt-8">
<flux:heading>Riwayat Berobat Terakhir</flux:heading>
<flux:table>
<flux:table.columns>
<flux:table.column>Tanggal</flux:table.column>
<flux:table.column>Layanan</flux:table.column>
<flux:table.column>Status</flux:table.column>
</flux:table.columns>
<flux:table.rows>
@forelse($history as $item)
<flux:table.row>
<flux:table.cell>
{{ \Carbon\Carbon::parse($item->appointment_date)->translatedFormat('d M Y') }}
</flux:table.cell>
<flux:table.cell>{{ $item->serviceCategory->name }}</flux:table.cell>
<flux:table.cell>
<flux:badge size="sm" inset="top bottom">{{ $item->status }}</flux:badge>
</flux:table.cell>
</flux:table.row>
@empty
<flux:table.row>
<flux:table.cell colspan="3" class="py-4 text-center">
<flux:icon.inbox class="mb-2 size-8 text-zinc-300" />
<flux:text class="text-zinc-500">Belum ada riwayat berobat.</flux:text>
</flux:table.cell>
</flux:table.row>
@endforelse
</flux:table.rows>
</flux:table>
</div>
</div>
{{-- Sidebar: Berita Kesehatan --}}
<div class="space-y-4">
<flux:heading>Info Kesehatan</flux:heading>
@forelse ($news as $article)
<a href="#" class="group block">
<flux:card class="p-0 hover:ring-1 hover:ring-blue-500 overflow-hidden transition-all">
@if ($article->image)
<img src="{{ asset('storage/' . $article->image) }}" class="w-full h-32 object-cover">
@endif
<div class="p-4">
<flux:heading size="sm" class="group-hover:text-blue-600">{{ $article->title }}
</flux:heading>
<flux:text size="xs" class="mt-1 line-clamp-2">
{{ Str::limit(strip_tags($article->content), 80) }}</flux:text>
</div>
</flux:card>
</a>
@empty
<div class="flex flex-col items-center gap-4 py-10 text-center">
<flux:icon.newspaper class="size-10 text-zinc-300" />
<flux:heading>Tidak ada berita kesehatan.</flux:heading>
<flux:subheading>Silakan cek kembali nanti untuk informasi terbaru.</flux:subheading>
</div>
@endforelse
</div>
</div>
</div>