andrean_ramadani
/
PAMSIMAS_Gumuksari
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
PAMSIMAS_Gumuksari/PAMSIMAS_Petugas/resources/views/dashboard/index.blade.php

375 lines
18 KiB
PHP
Raw Permalink Blame History

@extends('layout.layout')
@php
$title = 'Dashboard';
$subTitle = 'PAMSIMAS';
@endphp
@section('content')
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
{{-- ========================================== --}}
{{-- STATS CARDS --}}
{{-- ========================================== --}}
<div class="md:col-span-12">
{{-- ADMIN: 6 Card (3 kolom) --}}
@if($isAdmin)
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{{-- Total Pelanggan --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-primary-600/20 border border-primary-300 dark:border-primary-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="flowbite:users-group-solid" class="text-primary-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Total Pelanggan</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $totalPelanggan ?? 0 }}</h6>
</div>
</div>
</div>
</div>
{{-- Total Petugas --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-success-600/20 border border-success-300 dark:border-success-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="solar:user-check-outline" class="text-success-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Total Petugas</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $totalPetugas ?? 0 }}</h6>
</div>
</div>
</div>
</div>
{{-- Tagihan Bulan Ini --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-warning-600/20 border border-warning-300 dark:border-warning-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="majesticons:shopping-cart" class="text-warning-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Tagihan Bulan Ini</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $tagihanBulanIni ?? 0 }}</h6>
</div>
</div>
</div>
</div>
{{-- Total Pemakaian Air --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-cyan-600/20 border border-cyan-300 dark:border-cyan-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="solar:water-linear" class="text-cyan-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Total Pemakaian Air</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ number_format($pemakaianBulanIni ?? 0, 0, ',', '.') }} M³</h6>
</div>
</div>
</div>
</div>
{{-- Rata-rata Pemakaian --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-teal-600/20 border border-teal-300 dark:border-teal-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="solar:chart-2-linear" class="text-teal-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Rata-rata Pemakaian</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ number_format($rataPemakaian ?? 0, 1, ',', '.') }} M³</h6>
</div>
</div>
</div>
</div>
{{-- Pemasukan Bulan Ini --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-info-600/20 border border-info-300 dark:border-info-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="solar:wallet-money-outline" class="text-info-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Pemasukan Bulan Ini</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">Rp {{ number_format($pemasukanBulanIni ?? 0, 0, ',', '.') }}</h6>
</div>
</div>
</div>
</div>
</div>
@endif
{{-- PETUGAS: 4 Card (4 kolom) --}}
@if(!$isAdmin)
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{{-- Total Pelanggan --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-primary-600/20 border border-primary-300 dark:border-primary-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="flowbite:users-group-solid" class="text-primary-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Total Pelanggan</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $totalPelanggan ?? 0 }}</h6>
</div>
</div>
</div>
</div>
{{-- Tagihan Bulan Ini --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-warning-600/20 border border-warning-300 dark:border-warning-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="majesticons:shopping-cart" class="text-warning-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Tagihan Bulan Ini</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $tagihanBulanIni ?? 0 }}</h6>
</div>
</div>
</div>
</div>
{{-- Total Pemakaian Air --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-cyan-600/20 border border-cyan-300 dark:border-cyan-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="solar:water-linear" class="text-cyan-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Total Pemakaian Air</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ number_format($pemakaianBulanIni ?? 0, 0, ',', '.') }} M³</h6>
</div>
</div>
</div>
</div>
{{-- Pemasukan Bulan Ini --}}
<div class="card border-0 rounded-lg">
<div class="card-body p-6">
<div class="flex items-center gap-4">
<span class="w-[44px] h-[44px] bg-info-600/20 border border-info-300 dark:border-info-600/50 shrink-0 flex justify-center items-center rounded-lg">
<iconify-icon icon="solar:wallet-money-outline" class="text-info-600 text-xl"></iconify-icon>
</span>
<div>
<span class="text-secondary-light text-sm">Pemasukan Bulan Ini</span>
<h6 class="font-semibold text-neutral-900 text-lg mt-1">Rp {{ number_format($pemasukanBulanIni ?? 0, 0, ',', '.') }}</h6>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
{{-- ========================================== --}}
{{-- GRAFIK PEMAKAIAN AIR 6 BULAN --}}
{{-- ========================================== --}}
<div class="md:col-span-12 2xl:col-span-8">
<div class="card rounded-lg border-0 h-full">
<div class="card-body p-6">
<div class="flex items-center flex-wrap gap-2 justify-between mb-5">
<h6 class="font-bold text-lg">💧 Pemakaian Air 6 Bulan Terakhir</h6>
</div>
<div style="height: 300px;">
<canvas id="chartPemakaianAir"></canvas>
</div>
</div>
</div>
</div>
{{-- ========================================== --}}
{{-- TAGIHAN TERBARU --}}
{{-- ========================================== --}}
<div class="md:col-span-12 2xl:col-span-4">
<div class="card rounded-lg border-0 h-full">
<div class="card-body p-6">
<div class="flex items-center flex-wrap gap-2 justify-between mb-5">
<h6 class="font-bold text-lg">Tagihan Terbaru</h6>
<a href="{{ route('tagihan.index') }}" class="text-primary-600 hover-text-primary flex items-center gap-1 text-sm">
Lihat Semua
<iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon>
</a>
</div>
<div class="space-y-4">
@forelse($tagihanTerbaru ?? [] as $tagihan)
<div class="flex items-center justify-between border-b border-neutral-100 dark:border-neutral-700 pb-3">
<div>
<h6 class="text-sm font-semibold text-neutral-800">{{ $tagihan->user->name ?? '-' }}</h6>
<span class="text-xs text-secondary-light">{{ $tagihan->invoice_number }}</span>
</div>
<div class="text-right">
<span class="text-sm font-semibold text-neutral-800">Rp {{ number_format($tagihan->total_amount, 0, ',', '.') }}</span>
<br>
@if($tagihan->status == 'paid')
<span class="bg-success-100 text-success-600 px-2 py-0.5 rounded-full text-xs font-medium">Lunas</span>
@elseif($tagihan->status == 'unpaid')
<span class="bg-warning-100 text-warning-600 px-2 py-0.5 rounded-full text-xs font-medium">Belum</span>
@else
<span class="bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full text-xs font-medium">{{ $tagihan->status }}</span>
@endif
</div>
</div>
@empty
<p class="text-secondary-light text-sm text-center py-6">Belum ada tagihan</p>
@endforelse
</div>
</div>
</div>
</div>
{{-- ========================================== --}}
{{-- PELANGGAN TERBARU (HANYA ADMIN) --}}
{{-- ========================================== --}}
@if($isAdmin)
<div class="md:col-span-12 2xl:col-span-6">
<div class="card rounded-lg border-0">
<div class="card-body p-6">
<div class="flex items-center flex-wrap gap-2 justify-between mb-5">
<h6 class="font-bold text-lg">Pelanggan Terbaru</h6>
<a href="{{ route('DataPelanggan') }}" class="text-primary-600 hover-text-primary flex items-center gap-1 text-sm">
Lihat Semua
<iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon>
</a>
</div>
<div class="table-responsive scroll-sm">
<table class="table bordered-table mb-0">
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@forelse($pelangganTerbaru ?? [] as $pelanggan)
<tr>
<td class="font-semibold text-sm">{{ $pelanggan->name }}</td>
<td class="text-sm">{{ $pelanggan->email }}</td>
<td>
@if($pelanggan->status == 'aktif')
<span class="bg-success-100 text-success-600 px-3 py-1 rounded-full text-xs font-medium">Aktif</span>
@elseif($pelanggan->status == 'pending')
<span class="bg-warning-100 text-warning-600 px-3 py-1 rounded-full text-xs font-medium">Pending</span>
@else
<span class="bg-danger-100 text-danger-600 px-3 py-1 rounded-full text-xs font-medium">Nonaktif</span>
@endif
</td>
</tr>
@empty
<tr><td colspan="3" class="text-center text-secondary-light py-4">Belum ada pelanggan</td></tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
@endif
{{-- ========================================== --}}
{{-- STATUS TAGIHAN --}}
{{-- ========================================== --}}
<div class="md:col-span-12 2xl:col-span-{{ $isAdmin ? '6' : '6' }}">
<div class="card rounded-lg border-0 h-full">
<div class="card-body p-6">
<div class="flex items-center flex-wrap gap-2 justify-between mb-5">
<h6 class="font-bold text-lg">Status Tagihan Bulan Ini</h6>
</div>
<div style="height: 250px;">
<canvas id="chartStatusTagihan"></canvas>
</div>
<ul class="flex flex-wrap items-center justify-center mt-4 gap-6">
<li class="flex items-center gap-2">
<span class="w-3 h-3 rounded-sm bg-success-600"></span>
<span class="text-secondary-light text-sm">Lunas: <strong>{{ $totalLunas ?? 0 }}</strong></span>
</li>
<li class="flex items-center gap-2">
<span class="w-3 h-3 rounded-sm bg-warning-600"></span>
<span class="text-secondary-light text-sm">Belum: <strong>{{ $totalBelum ?? 0 }}</strong></span>
</li>
</ul>
</div>
</div>
</div>
</div>
{{-- ========================================== --}}
{{-- SCRIPT CHARTS --}}
{{-- ========================================== --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
(function() {
// Chart Pemakaian Air
var canvas1 = document.getElementById('chartPemakaianAir');
if (canvas1) {
var months = {!! json_encode($chartPemakaianAir['months'] ?? ['Nov', 'Des', 'Jan', 'Feb', 'Mar', 'Apr']) !!};
var data = {!! json_encode($chartPemakaianAir['data'] ?? [0, 0, 0, 0, 0, 0]) !!};
new Chart(canvas1.getContext('2d'), {
type: 'bar',
data: {
labels: months,
datasets: [{
label: 'Pemakaian Air (M³)',
data: data,
backgroundColor: '#06b6d4',
borderRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
y: { beginAtZero: true, ticks: { callback: function(v) { return v + ' M³'; } } },
x: { grid: { display: false } }
}
}
});
}
// Chart Status Tagihan
var canvas2 = document.getElementById('chartStatusTagihan');
if (canvas2) {
new Chart(canvas2.getContext('2d'), {
type: 'doughnut',
data: {
labels: ['Lunas', 'Belum Bayar'],
datasets: [{
data: [{{ $totalLunas ?? 0 }}, {{ $totalBelum ?? 0 }}],
backgroundColor: ['#16a34a', '#d97706'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } }
}
});
}
})();
</script>
@endsection
Reference in New Issue View Git Blame Copy Permalink