MIF_E31221264/resources/views/admin/pages/dashboard/index.blade.php

106 lines
3.6 KiB
PHP

@extends('admin.layouts.base')
@section('title','Dashboard')
@section('content')
<style>
#content-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#content {
flex: 1;
}
.sticky-footer {
width: calc(100% - 225px);
position: fixed;
bottom: 0;
left: 225px;
background-color: white;
padding: 10px 0;
text-align: center;
}
</style>
<h1 class="h3 text-gray-800">
<i class="bi bi-house-door-fill"></i> Dashboard
</h1>
<!-- Notification -->
<div class="alert alert-success alert-dismissible fade show" role="alert" style="font-size: 14px; display: flex; align-items: center; justify-content: space-between; background-color: #d4edda; border: 1px solid #c3e6cb; padding: 10px; border-radius: 5px;">
<span><strong>Selamat datang ADMIN!</strong> Anda bisa mengoperasikan sistem dengan wewenang tertentu melalui pilihan menu di bawah.</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close" style="margin-left: 10px;">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="row mt-4">
<!-- Tentang Sistem -->
<div class="col-md-6 mb-4">
<div class="card shadow-sm h-100 p-4">
<h5 class="mb-3" style="color: #155724; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 600;">
Informasi Sistem Pendukung Keputusan Pemilihan Pakaian
</h5>
<p class="text-gray-700 mb-0">
Sistem ini menggunakan metode <strong>Simple Additive Weighting (SAW)</strong> untuk memberikan rekomendasi pakaian berdasarkan preferensi pengguna.
Setiap pakaian dinilai berdasarkan kecocokan terhadap subkriteria dari 5 kriteria utama, dengan bobot yang telah ditentukan.
Semakin tinggi skor akhir, semakin cocok pakaian tersebut untuk kebutuhan pengguna.
</p>
</div>
</div>
<!-- Grafik -->
<div class="col-md-6 mb-4">
<div class="card shadow-sm h-100 p-4">
<h5 class="mb-3" style="color: #155724; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 600;">
Statistik Jumlah Data
</h5>
<canvas id="dashboardChart" height="170"></canvas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('dashboardChart').getContext('2d');
const dashboardChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Kriteria', 'Sub Kriteria', 'Pakaian'],
datasets: [{
label: 'Jumlah Data',
data: [{{ $totalKriteria }}, {{ $totalSubKriteria }}, {{ $totalPakaian }}],
backgroundColor: [
'rgba(78, 115, 223, 0.7)',
'rgba(54, 185, 204, 0.7)',
'rgba(28, 200, 138, 0.7)'
],
borderColor: [
'rgba(78, 115, 223, 1)',
'rgba(54, 185, 204, 1)',
'rgba(28, 200, 138, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: { display: false }
},
scales: {
y: {
beginAtZero: true,
ticks: {
precision: 0
}
}
}
}
});
</script>
@endsection