272 lines
12 KiB
PHP
272 lines
12 KiB
PHP
{{-- resources/views/dashboard.blade.php --}}
|
|
{{-- CSS sudah dipisah ke: public/css/dashboard.css --}}
|
|
<x-app-layout>
|
|
|
|
@push('scripts')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// ── BAR CHART ──
|
|
new Chart(document.getElementById('barChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: {!! json_encode($chartLabels) !!},
|
|
datasets: [{
|
|
label: 'Penugasan',
|
|
data: {!! json_encode($chartValues) !!},
|
|
backgroundColor: {!! json_encode($chartBgColors) !!},
|
|
borderRadius: 6,
|
|
borderSkipped: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { callbacks: { label: c => ' ' + c.raw + ' penugasan' } }
|
|
},
|
|
scales: {
|
|
x: { grid: { display: false }, ticks: { font: { size: 10 }, autoSkip: false } },
|
|
y: { grid: { color: 'rgba(0,0,0,0.06)' }, ticks: { font: { size: 10 }, stepSize: 5 } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// ── DONUT CHART ──
|
|
new Chart(document.getElementById('donutChart'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: {!! json_encode($chartLabels) !!},
|
|
datasets: [{
|
|
data: {!! json_encode($chartValues) !!},
|
|
backgroundColor: {!! json_encode($chartBgColors) !!},
|
|
borderWidth: 2,
|
|
borderColor: '#fff',
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '68%',
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { callbacks: { label: c => ' ' + c.raw + ' pekerjaan' } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// ── LINE CHART TEKNISI ──
|
|
new Chart(document.getElementById('teknisiChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: {!! json_encode($monthLabels) !!},
|
|
datasets: {!! json_encode($teknisiDatasets) !!}
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'left',
|
|
labels: { usePointStyle: true, boxWidth: 8 }
|
|
},
|
|
tooltip: { callbacks: { label: c => ' ' + c.dataset.label + ': ' + c.raw + ' penugasan' } }
|
|
},
|
|
scales: {
|
|
x: { grid: { display: false }, ticks: { font: { size: 10 }, autoSkip: false } },
|
|
y: { grid: { color: 'rgba(0,0,0,0.06)' }, ticks: { font: { size: 10 }, stepSize: 1, beginAtZero: true } }
|
|
}
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
<div class="db-wrap">
|
|
|
|
|
|
|
|
{{-- ── STAT CARDS ── --}}
|
|
<div class="db-stats">
|
|
<div class="db-stat s-green">
|
|
<div class="db-stat-deco"></div>
|
|
<div class="db-stat-ico">
|
|
<svg fill="none" stroke="#085041" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="db-stat-lbl">Total Teknisi</div>
|
|
<div class="db-stat-num">{{ $totalTeknisi ?? 0 }}</div>
|
|
<div class="db-stat-sub">Terdaftar dalam sistem</div>
|
|
</div>
|
|
|
|
<div class="db-stat s-blue">
|
|
<div class="db-stat-deco"></div>
|
|
<div class="db-stat-ico">
|
|
<svg fill="none" stroke="#042c53" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="db-stat-lbl">Teknisi Aktif</div>
|
|
<div class="db-stat-num">{{ $teknisiAktif ?? 0 }}</div>
|
|
<div class="db-stat-sub">Sedang bertugas</div>
|
|
</div>
|
|
|
|
<div class="db-stat s-amber">
|
|
<div class="db-stat-deco"></div>
|
|
<div class="db-stat-ico">
|
|
<svg fill="none" stroke="#412402" stroke-width="2" viewBox="0 0 24 24">
|
|
<rect x="2" y="7" width="20" height="14" rx="2"/>
|
|
<path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="db-stat-lbl">Total Pekerjaan</div>
|
|
<div class="db-stat-num">{{ $totalPekerjaan ?? 0 }}</div>
|
|
<div class="db-stat-sub">Semua penugasan</div>
|
|
</div>
|
|
|
|
<div class="db-stat s-violet">
|
|
<div class="db-stat-deco"></div>
|
|
<div class="db-stat-ico">
|
|
<svg fill="none" stroke="#26215c" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="db-stat-lbl">Total Laporan</div>
|
|
<div class="db-stat-num">{{ $totalLaporan ?? 0 }}</div>
|
|
<div class="db-stat-sub">Laporan kegiatan</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── BAR CHART ── --}}
|
|
<div class="db-chart-wrap">
|
|
<div class="db-panel-head">
|
|
<div class="db-panel-head-dot" style="background:#1d9e75;"></div>
|
|
<div class="db-panel-head-title">Penugasan per Jenis Pekerjaan — Bulan Ini</div>
|
|
</div>
|
|
<div class="db-bar-legend" style="flex-wrap: wrap;">
|
|
@foreach($chartLabels as $index => $label)
|
|
<span class="db-legend-item"><span class="db-legend-sq" style="background:{{ $chartBgColors[$index] }};"></span>{{ $label }}</span>
|
|
@endforeach
|
|
</div>
|
|
<div style="position:relative; width:100%; height:250px;">
|
|
<canvas id="barChart" role="img" aria-label="Bar chart penugasan per jenis pekerjaan bulan ini"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── BAR CHART TEKNISI ── --}}
|
|
<div class="db-chart-wrap" style="margin-bottom: 24px;">
|
|
<div class="db-panel-head">
|
|
<div class="db-panel-head-dot" style="background:#378add;"></div>
|
|
<div class="db-panel-head-title">Beban Kerja Teknisi — Seluruh Data</div>
|
|
</div>
|
|
<div style="position:relative; width:100%; height:250px; padding-top: 16px;">
|
|
<canvas id="teknisiChart" role="img" aria-label="Line chart penugasan per teknisi"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── TARIF PEKERJAAN (FULL WIDTH) ── --}}
|
|
<div class="db-panel" style="width: 100%; margin-bottom: 24px;">
|
|
<div class="db-panel-head">
|
|
<div class="db-panel-head-dot" style="background:#378add;"></div>
|
|
<div class="db-panel-head-title">Tarif Pekerjaan — Referensi Cepat</div>
|
|
</div>
|
|
<table class="db-tarif-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Pekerjaan</th>
|
|
<th>Kode</th>
|
|
<th>Tarif</th>
|
|
<th>Satuan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($tarifPekerjaans ?? [] as $tarif)
|
|
<tr>
|
|
<td>
|
|
@php
|
|
$badgeClass = match($tarif->jenis_pekerjaan) {
|
|
'sr' => 'bj-sr',
|
|
'pengembangan_jaringan_pipa',
|
|
'penyempurnaan_jaringan_pipa' => 'bj-pjp',
|
|
'perbaikan_jaringan_pipa' => 'bj-perbaikan',
|
|
'gali_urug' => 'bj-gali',
|
|
'pemasangan_gate_valve',
|
|
'pengangkatan' => 'bj-gv',
|
|
'pengecatan_pipa_besi' => 'bj-cat',
|
|
default => 'bj-sr',
|
|
};
|
|
$priceColor = match($tarif->jenis_pekerjaan) {
|
|
'sr' => '#0f6e56',
|
|
'pengembangan_jaringan_pipa', 'penyempurnaan_jaringan_pipa'=> '#185fa5',
|
|
'perbaikan_jaringan_pipa' => '#a32d2d',
|
|
'gali_urug' => '#633806',
|
|
'pengecatan_pipa_besi' => '#72243e',
|
|
default => '#3c3489',
|
|
};
|
|
@endphp
|
|
<span class="badge-jenis {{ $badgeClass }}">{{ $tarif->nama_item }}</span>
|
|
</td>
|
|
<td style="font-size:10px; color:#999;">{{ $tarif->kode_item }}</td>
|
|
<td class="db-tarif-price" style="color: {{ $priceColor }};">
|
|
Rp {{ number_format($tarif->tarif_per_unit ?? $tarif->tarif_per_meter, 0, ',', '.') }}
|
|
</td>
|
|
<td style="font-size:11px; color:#999;">
|
|
{{ $tarif->tarif_per_meter ? '/meter' : '/unit' }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- ── BOTTOM WIDGETS ── --}}
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 24px;">
|
|
|
|
{{-- INFO PERUMDA --}}
|
|
<div class="db-info-card" style="margin: 0;">
|
|
<div class="db-info-logo">PERUMDA Air Minum</div>
|
|
<div class="db-info-name">Tirta Sanjiwani</div>
|
|
<div class="db-info-region">Kabupaten Gianyar, Bali</div>
|
|
<hr class="db-info-divider">
|
|
<div class="db-info-row">
|
|
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
|
</svg>
|
|
(0361) 943233
|
|
</div>
|
|
<div class="db-info-row">
|
|
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 00-2-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
tekleperumda@gmail.com
|
|
</div>
|
|
</div>
|
|
|
|
{{-- DONUT CHART --}}
|
|
<div class="db-donut-card" style="margin: 0; padding: 24px;">
|
|
<div class="db-panel-head" style="margin-bottom: 12px;">
|
|
<div class="db-panel-head-dot" style="background:#7f77dd;"></div>
|
|
<div class="db-panel-head-title">Distribusi Pekerjaan</div>
|
|
</div>
|
|
<div style="display:flex; justify-content:center;">
|
|
<div style="position:relative; width:150px; height:150px;">
|
|
<canvas id="donutChart" role="img" aria-label="Donut chart distribusi jenis pekerjaan bulan ini"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="db-chart-legend" style="justify-content:center; margin-top:16px; flex-wrap:wrap; gap: 8px;">
|
|
@foreach($chartLabels as $index => $label)
|
|
<span class="db-legend-item" style="font-size: 10px; margin: 0;"><span class="db-legend-sq" style="background:{{ $chartBgColors[$index] }};"></span>{{ $label }}</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</x-app-layout> |