411 lines
12 KiB
PHP
411 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
|
|
<!-- TITLE -->
|
|
<div class="mb-10">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800">
|
|
Ringkasan Data
|
|
</h1>
|
|
<p class="text-base text-gray-500 mt-2">
|
|
Overview data sistem rekomendasi makanan gastritis
|
|
</p>
|
|
</div>
|
|
|
|
<!-- CARDS -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
<!-- PASIEN -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<span class="text-base text-gray-500 font-medium">
|
|
Total Pasien
|
|
</span>
|
|
<div class="bg-green-100 text-green-700 p-3 rounded-xl">
|
|
<i class="ri-team-line text-xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-4xl font-bold text-gray-800">
|
|
{{ $pasienCount ?? 0 }}
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-400 mt-3">
|
|
Data pasien terdaftar
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<!-- MAKANAN -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<span class="text-base text-gray-500 font-medium">
|
|
Data Makanan
|
|
</span>
|
|
<div class="bg-emerald-100 text-emerald-700 p-3 rounded-xl">
|
|
<i class="ri-restaurant-line text-xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-4xl font-bold text-gray-800">
|
|
{{ $makananCount ?? 0 }}
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-400 mt-3">
|
|
Alternatif makanan tersedia
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<!-- LAPORAN -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<span class="text-base text-gray-500 font-medium">
|
|
Riwayat Rekomendasi
|
|
</span>
|
|
<div class="bg-teal-100 text-teal-700 p-3 rounded-xl">
|
|
<i class="ri-file-chart-line text-xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-4xl font-bold text-gray-800">
|
|
{{ $laporanCount ?? 0 }}
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-400 mt-3">
|
|
Total proses SAW dilakukan
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- PENJELASAN APLIKASI -->
|
|
<div class="mt-10 bg-gradient-to-r from-green-50 to-white border border-green-100 rounded-3xl p-8 shadow-sm">
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
|
|
|
<!-- TEXT -->
|
|
<div>
|
|
|
|
<span class="inline-flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-full text-sm font-semibold mb-5">
|
|
<i class="ri-heart-pulse-line"></i>
|
|
Sistem Pendukung Keputusan
|
|
</span>
|
|
|
|
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 leading-snug">
|
|
Sistem Rekomendasi Makanan
|
|
untuk Penderita Gastritis
|
|
</h2>
|
|
|
|
<p class="text-gray-600 leading-8 mt-5 text-justify">
|
|
Aplikasi ini digunakan untuk membantu proses pemilihan makanan yang lebih sesuai
|
|
bagi penderita gastritis berdasarkan kondisi pasien. Sistem mengolah data gejala,
|
|
aktivitas harian, berat badan, tinggi badan, jenis kelamin, serta data kandungan
|
|
makanan untuk menghasilkan rekomendasi menggunakan metode
|
|
<span class="font-semibold text-green-700">
|
|
Simple Additive Weighting (SAW)
|
|
</span>.
|
|
</p>
|
|
|
|
<p class="text-gray-600 leading-8 mt-4 text-justify">
|
|
Hasil rekomendasi tidak hanya menampilkan makanan dengan nilai SAW tertinggi,
|
|
tetapi juga memberikan informasi kebutuhan kalori harian, jumlah porsi, ukuran porsi,
|
|
frekuensi makan, komposisi makanan, dan alternatif makanan serupa. Dengan demikian,
|
|
aplikasi ini dapat membantu petugas dalam membuat laporan rekomendasi makanan
|
|
yang lebih terarah, mudah dipahami, dan sesuai dengan kondisi pasien.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- ILUSTRASI -->
|
|
<div class="relative">
|
|
|
|
<div class="bg-white rounded-3xl border border-green-100 p-8 shadow-sm">
|
|
|
|
<div class="space-y-5">
|
|
|
|
<div class="flex items-center gap-4 p-4 rounded-2xl bg-green-50">
|
|
|
|
<div class="w-14 h-14 rounded-2xl bg-green-100 flex items-center justify-center">
|
|
<i class="ri-user-search-line text-2xl text-green-700"></i>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-bold text-gray-800">
|
|
Analisis Kondisi Pasien
|
|
</h3>
|
|
|
|
<p class="text-sm text-gray-500 mt-1 leading-6">
|
|
Sistem mempertimbangkan gejala gastritis, aktivitas harian,
|
|
berat badan, tinggi badan, umur, dan jenis kelamin pasien.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 p-4 rounded-2xl bg-emerald-50">
|
|
|
|
<div class="w-14 h-14 rounded-2xl bg-emerald-100 flex items-center justify-center">
|
|
<i class="ri-scales-3-line text-2xl text-emerald-700"></i>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-bold text-gray-800">
|
|
Perhitungan Metode SAW
|
|
</h3>
|
|
|
|
<p class="text-sm text-gray-500 mt-1 leading-6">
|
|
Data makanan dihitung melalui normalisasi, pembobotan kriteria,
|
|
nilai preferensi, dan perangkingan alternatif makanan.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 p-4 rounded-2xl bg-teal-50">
|
|
|
|
<div class="w-14 h-14 rounded-2xl bg-teal-100 flex items-center justify-center">
|
|
<i class="ri-restaurant-line text-2xl text-teal-700"></i>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-bold text-gray-800">
|
|
Rekomendasi Makanan
|
|
</h3>
|
|
|
|
<p class="text-sm text-gray-500 mt-1 leading-6">
|
|
Sistem menampilkan makanan terbaik beserta skor SAW, porsi,
|
|
ukuran porsi, frekuensi makan, komposisi, dan alternatif serupa.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 p-4 rounded-2xl bg-cyan-50">
|
|
|
|
<div class="w-14 h-14 rounded-2xl bg-cyan-100 flex items-center justify-center">
|
|
<i class="ri-file-list-3-line text-2xl text-cyan-700"></i>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-bold text-gray-800">
|
|
Laporan Rekomendasi
|
|
</h3>
|
|
|
|
<p class="text-sm text-gray-500 mt-1 leading-6">
|
|
Hasil rekomendasi disimpan sebagai riwayat laporan dan dapat
|
|
dilihat kembali atau dicetak sebagai dokumen rekomendasi.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- GRAFIK -->
|
|
<div class="mt-10 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
|
|
|
<!-- HEADER -->
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
|
|
|
<div>
|
|
|
|
<h2 class="text-xl font-bold text-gray-800">
|
|
Statistik Sistem
|
|
</h2>
|
|
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
Visualisasi data berdasarkan periode waktu
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
|
|
<!-- PILIH DATA -->
|
|
<select id="jenisGrafik"
|
|
class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-700 focus:outline-none">
|
|
|
|
<option value="pasien">Data Pasien</option>
|
|
<option value="makanan">Data Makanan</option>
|
|
<option value="laporan">Riwayat Rekomendasi</option>
|
|
|
|
</select>
|
|
|
|
<!-- RANGE -->
|
|
<select id="rangeGrafik"
|
|
class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-700 focus:outline-none">
|
|
|
|
<option value="harian">Harian</option>
|
|
<option value="mingguan">Mingguan</option>
|
|
<option value="bulanan">Bulanan</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- CHART -->
|
|
<div class="h-[280px] sm:h-[350px]">
|
|
|
|
<canvas id="dashboardChart"></canvas>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
|
|
const ctx = document.getElementById('dashboardChart');
|
|
|
|
// =========================
|
|
// DATA DUMMY
|
|
// =========================
|
|
// Nanti bisa diganti dari database/controller
|
|
|
|
const chartData = {
|
|
|
|
pasien: {
|
|
|
|
harian: @json($pasienHarian),
|
|
mingguan: @json($pasienMingguan),
|
|
bulanan: @json($pasienBulanan)
|
|
|
|
},
|
|
|
|
makanan: {
|
|
|
|
harian: @json($makananHarian),
|
|
mingguan: @json($makananMingguan),
|
|
bulanan: @json($makananBulanan)
|
|
|
|
},
|
|
|
|
laporan: {
|
|
|
|
harian: @json($laporanHarian),
|
|
mingguan: @json($laporanMingguan),
|
|
bulanan: @json($laporanBulanan)
|
|
|
|
}
|
|
|
|
};
|
|
|
|
// =========================
|
|
// LABEL
|
|
// =========================
|
|
const labels = {
|
|
|
|
harian: ['Sen','Sel','Rab','Kam','Jum','Sab','Min'],
|
|
mingguan: ['M1','M2','M3','M4'],
|
|
bulanan: ['6 Bulan Lalu','5 Bulan','4 Bulan','3 Bulan','2 Bulan','Bulan Ini']
|
|
|
|
};
|
|
|
|
// =========================
|
|
// DEFAULT
|
|
// =========================
|
|
let selectedJenis = 'pasien';
|
|
let selectedRange = 'harian';
|
|
|
|
// =========================
|
|
// INIT CHART
|
|
// =========================
|
|
const dashboardChart = new Chart(ctx, {
|
|
|
|
type: 'bar',
|
|
|
|
data: {
|
|
|
|
labels: labels[selectedRange],
|
|
|
|
datasets: [{
|
|
|
|
label: 'Jumlah Data',
|
|
|
|
data: chartData[selectedJenis][selectedRange],
|
|
|
|
borderWidth: 1,
|
|
borderRadius: 10,
|
|
barThickness: 40
|
|
|
|
}]
|
|
},
|
|
|
|
options: {
|
|
|
|
responsive: true,
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
plugins: {
|
|
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
|
|
scales: {
|
|
|
|
y: {
|
|
|
|
beginAtZero: true,
|
|
|
|
ticks: {
|
|
precision: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// =========================
|
|
// UPDATE CHART
|
|
// =========================
|
|
function updateChart() {
|
|
|
|
selectedJenis =
|
|
document.getElementById('jenisGrafik').value;
|
|
|
|
selectedRange =
|
|
document.getElementById('rangeGrafik').value;
|
|
|
|
dashboardChart.data.labels =
|
|
labels[selectedRange];
|
|
|
|
dashboardChart.data.datasets[0].data =
|
|
chartData[selectedJenis][selectedRange];
|
|
|
|
dashboardChart.update();
|
|
}
|
|
|
|
// =========================
|
|
// EVENT
|
|
// =========================
|
|
document.getElementById('jenisGrafik')
|
|
.addEventListener('change', updateChart);
|
|
|
|
document.getElementById('rangeGrafik')
|
|
.addEventListener('change', updateChart);
|
|
|
|
</script>
|
|
|
|
@endsection |