205 lines
10 KiB
PHP
205 lines
10 KiB
PHP
<x-app-layout>
|
|
@section('title', 'Dashboard MedData')
|
|
|
|
<div class="space-y-6">
|
|
<!-- Statistics Cards -->
|
|
<div class="grid grid-cols-4 gap-6">
|
|
<x-stat-card
|
|
label="Total Obat Masuk"
|
|
:value="$totalJenisObat"
|
|
color="indigo">
|
|
<x-slot name="icon">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
|
</svg>
|
|
</x-slot>
|
|
</x-stat-card>
|
|
|
|
<x-stat-card
|
|
label="Obat Masuk (Bulan Ini)"
|
|
:value="$obatMasukBulanIni"
|
|
color="green">
|
|
<x-slot name="icon">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
</x-slot>
|
|
</x-stat-card>
|
|
|
|
<x-stat-card
|
|
label="Obat Keluar (Bulan Ini)"
|
|
:value="$obatKeluarBulanIni"
|
|
color="blue">
|
|
<x-slot name="icon">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
|
|
</svg>
|
|
</x-slot>
|
|
</x-stat-card>
|
|
|
|
<x-stat-card
|
|
label="Kadaluarsa Dekat"
|
|
:value="$kadaluarsaDekat"
|
|
color="red">
|
|
<x-slot name="icon">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</x-slot>
|
|
</x-stat-card>
|
|
</div>
|
|
|
|
<!-- Charts Row -->
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<!-- Line Chart -->
|
|
<x-card class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-semibold text-[#2F347A]">Tren Obat Keluar Masuk {{ $selectedDate->translatedFormat('F Y') }}</h2>
|
|
<form method="GET" action="{{ route('dashboard') }}" class="flex items-center gap-2">
|
|
<select name="chart_month" onchange="updateChartYear(this); this.form.submit();"
|
|
class="px-3 py-1.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A] text-sm">
|
|
@foreach($monthOptions as $option)
|
|
<option value="{{ $option['month'] }}"
|
|
data-year="{{ $option['year'] }}"
|
|
{{ $filterMonth == $option['month'] && $filterYear == $option['year'] ? 'selected' : '' }}>
|
|
{{ $option['label'] }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<input type="hidden" name="chart_year" id="chartYearInput" value="{{ $filterYear }}">
|
|
</form>
|
|
</div>
|
|
<div class="h-80">
|
|
<canvas id="trendChart"></canvas>
|
|
</div>
|
|
</x-card>
|
|
</div>
|
|
|
|
<!-- Expiring Medicines Table -->
|
|
<x-card class="overflow-hidden">
|
|
<div class="px-6 py-4 table-header-custom">
|
|
<h2 class="text-lg font-semibold">Obat Kadaluarsa / Mendekati Kadaluarsa (≤ 120 Hari)</h2>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-[#F4F6FF] border-b border-[#E5E7F2]">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Nama Obat</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Kode Batch</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Stok</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Tanggal Kadaluarsa</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Sisa Hari</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-[#7A7FAE] uppercase tracking-wider">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-[#E5E7F2]">
|
|
@forelse($obatKadaluarsa as $item)
|
|
@php
|
|
$sisaHari = (int) now()->diffInDays($item->tanggal_kadaluarsa, false);
|
|
if ($sisaHari <= 0) {
|
|
$status = 'danger';
|
|
$statusLabel = 'Kadaluarsa';
|
|
} elseif ($sisaHari <= 30) {
|
|
$status = 'awas';
|
|
$statusLabel = 'Awas';
|
|
} else {
|
|
$status = 'waspada';
|
|
$statusLabel = 'Waspada';
|
|
}
|
|
@endphp
|
|
<tr class="hover:bg-[#F4F6FF]">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="font-medium text-[#2F347A]">{{ $item->nama_obat ?? 'N/A' }}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->kode_batch }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->stok }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-[#7A7FAE]">{{ $item->tanggal_kadaluarsa->format('d M Y') }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium {{ $sisaHari <= 0 ? 'text-[#DC2626]' : ($sisaHari <= 30 ? 'text-[#C2410C]' : 'text-[#A16207]') }}">
|
|
{{ $sisaHari <= 0 ? $sisaHari . ' hari (lewat)' : $sisaHari . ' hari' }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<x-badge :type="$status">{{ $statusLabel }}</x-badge>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-12 text-center text-[#7A7FAE]">
|
|
<svg class="w-12 h-12 mx-auto mb-4 text-[#E5E7F2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Tidak ada obat yang kadaluarsa atau mendekati kadaluarsa
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</x-card>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Line Chart
|
|
const ctx = document.getElementById('trendChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: @json($labels),
|
|
datasets: [
|
|
{
|
|
label: 'Obat Masuk',
|
|
data: @json($obatMasukData),
|
|
borderColor: '#7B7AFD',
|
|
backgroundColor: 'rgba(123, 122, 253, 0.3)',
|
|
fill: true,
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: 'Obat Keluar',
|
|
data: @json($obatKeluarData),
|
|
borderColor: '#FF8A80',
|
|
backgroundColor: 'rgba(255, 138, 128, 0.3)',
|
|
fill: true,
|
|
tension: 0.4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
align: 'center'
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
stepSize: 1
|
|
},
|
|
grid: {
|
|
color: 'rgba(229, 231, 242, 0.5)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(229, 231, 242, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Update chart year when month changes
|
|
window.updateChartYear = function(select) {
|
|
const selectedOption = select.options[select.selectedIndex];
|
|
document.getElementById('chartYearInput').value = selectedOption.dataset.year;
|
|
};
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|