372 lines
14 KiB
PHP
372 lines
14 KiB
PHP
@extends('layout.app')
|
|
@section('content')
|
|
<div class="pagetitle">
|
|
<h1>Dashboard</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
|
|
<li class="breadcrumb-item active">Dashboard</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section class="section dashboard">
|
|
<div class="row">
|
|
|
|
<!-- Left side columns -->
|
|
<div class="col-lg-8">
|
|
<div class="row">
|
|
|
|
<!-- Users Card -->
|
|
<!-- Users Card -->
|
|
<div class="col-xxl-6 col-md-6">
|
|
<div class="card info-card customers-card">
|
|
<div class="card-body position-relative">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">Users <span>| Total</span></h5>
|
|
<small>
|
|
<a href="{{ route('datauser') }}" class="text-primary d-flex align-items-center" style="text-decoration: none;">
|
|
<span>Selengkapnya<span> <i class="bi bi-arrow-right-circle ms-1"></i>
|
|
</a>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center mt-3">
|
|
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-people"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6>{{ $userCount }} Users</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Makanan Card -->
|
|
<div class="col-xxl-6 col-md-6">
|
|
<div class="card info-card sales-card">
|
|
<div class="card-body position-relative">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">Data Makanan <span>| Total</span></h5>
|
|
<small>
|
|
<a href="{{ route('makanan') }}" class="text-primary d-flex align-items-center" style="text-decoration: none;">
|
|
<span>Selengkapnya<span> <i class="bi bi-arrow-right-circle ms-1"></i>
|
|
</a>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center mt-3">
|
|
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-basket"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6>{{ $makananCount }} Data</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- End Data Makanan Card -->
|
|
|
|
|
|
<div class="card shadow-lg border-start border-4 border-primary mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary fw-bold mb-0 d-flex justify-content-between align-items-center">
|
|
📌 Aturan Penilaian <span class="text-muted">| AHP</span>
|
|
<button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAHP" aria-expanded="false" aria-controls="collapseAHP">
|
|
Lihat Detail
|
|
</button>
|
|
</h5>
|
|
|
|
<div class="collapse mt-3" id="collapseAHP">
|
|
<p class="fs-6">Sebelum melakukan perbandingan, pahami skala penilaian berikut. Skala ini digunakan untuk menilai tingkat kepentingan antar kriteria maupun alternatif.</p>
|
|
|
|
<div class="row row-cols-1 row-cols-md-2 g-3 mt-2">
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-success rounded-pill me-3">1</span>
|
|
<div>
|
|
<strong>Equal Importance</strong><br>
|
|
Kedua elemen sama pentingnya
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-primary rounded-pill me-3">3</span>
|
|
<div>
|
|
<strong>Moderate Importance</strong><br>
|
|
Salah satu elemen sedikit lebih penting
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-warning text-dark rounded-pill me-3">5</span>
|
|
<div>
|
|
<strong>Strong Importance</strong><br>
|
|
Salah satu elemen lebih penting secara kuat
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-danger rounded-pill me-3">7</span>
|
|
<div>
|
|
<strong>Very Strong Importance</strong><br>
|
|
Salah satu elemen sangat penting
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-dark rounded-pill me-3">9</span>
|
|
<div>
|
|
<strong>Extreme Importance</strong><br>
|
|
Salah satu elemen mutlak lebih penting
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-secondary rounded-pill me-3">2, 4, 6, 8</span>
|
|
<div>
|
|
<strong>Intermediate Values</strong><br>
|
|
Nilai antara dua pertimbangan yang berdekatan
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-lg border-start border-4 border-primary mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary fw-bold mb-0 d-flex justify-content-between align-items-center">
|
|
📋 Langkah-langkah Mengisi Data <span class="text-muted">| Aplikasi</span>
|
|
<button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSteps" aria-expanded="false" aria-controls="collapseSteps">
|
|
Lihat Detail
|
|
</button>
|
|
</h5>
|
|
|
|
<div class="collapse mt-3" id="collapseSteps">
|
|
<p class="fs-6">Berikut adalah langkah-langkah yang harus diikuti untuk mengisi data dalam aplikasi ini. Pastikan Anda mengikuti setiap langkah untuk mendapatkan hasil yang tepat.</p>
|
|
|
|
<div class="row row-cols-1 row-cols-md-2 g-3 mt-2">
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-success rounded-pill me-3">1</span>
|
|
<div>
|
|
<strong>Masukkan Data Makanan</strong><br>
|
|
Pilih kategori makanan dan masukkan informasi seperti lemak, natrium, energi, dan karbohidrat.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-primary rounded-pill me-3">2</span>
|
|
<div>
|
|
<strong>Input Kriteria</strong><br>
|
|
Tentukan kriteria yang relevan untuk perbandingan antar makanan, seperti kandungan gizi dan kecocokan dengan kebutuhan diet.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-warning text-dark rounded-pill me-3">3</span>
|
|
<div>
|
|
<strong>Perbandingan Berpasangan</strong><br>
|
|
Bandingkan alternatif makanan menggunakan skala penilaian untuk menentukan prioritas berdasarkan kriteria.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-danger rounded-pill me-3">4</span>
|
|
<div>
|
|
<strong>Normalisasi Data</strong><br>
|
|
Lakukan normalisasi terhadap data yang telah dimasukkan untuk memastikan konsistensi perbandingan antar makanan.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-dark rounded-pill me-3">5</span>
|
|
<div>
|
|
<strong>Simpan dan Hasilkan Rekomendasi</strong><br>
|
|
Setelah data selesai diinput dan dinormalisasi, simpan perubahan dan hasilkan rekomendasi menu makanan berdasarkan analisis AHP.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-start">
|
|
<span class="badge bg-secondary rounded-pill me-3">6</span>
|
|
<div>
|
|
<strong>Evaluasi dan Sesuaikan</strong><br>
|
|
Evaluasi rekomendasi yang diberikan dan sesuaikan jika diperlukan berdasarkan kebutuhan diet atau preferensi pengguna.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Recent Sales -->
|
|
<div class="col-12">
|
|
<div class="card recent-sales overflow-auto">
|
|
|
|
<div class="filter">
|
|
<a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
|
<li class="dropdown-header text-start">
|
|
<h6>Filter</h6>
|
|
</li>
|
|
|
|
<li><a class="dropdown-item" href="#">Today</a></li>
|
|
<li><a class="dropdown-item" href="#">This Month</a></li>
|
|
<li><a class="dropdown-item" href="#">This Year</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h5 class="card-title">Recent Sales <span>| Today</span></h5>
|
|
|
|
<table class="table table-borderless datatable">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Product</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row"><a href="#">#2457</a></th>
|
|
<td>Brandon Jacob</td>
|
|
<td><a href="#" class="text-primary">At praesentium minu</a></td>
|
|
<td>$64</td>
|
|
<td><span class="badge bg-success">Approved</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#">#2147</a></th>
|
|
<td>Bridie Kessler</td>
|
|
<td><a href="#" class="text-primary">Blanditiis dolor omnis similique</a></td>
|
|
<td>$47</td>
|
|
<td><span class="badge bg-warning">Pending</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#">#2049</a></th>
|
|
<td>Ashleigh Langosh</td>
|
|
<td><a href="#" class="text-primary">At recusandae consectetur</a></td>
|
|
<td>$147</td>
|
|
<td><span class="badge bg-success">Approved</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#">#2644</a></th>
|
|
<td>Angus Grady</td>
|
|
<td><a href="#" class="text-primar">Ut voluptatem id earum et</a></td>
|
|
<td>$67</td>
|
|
<td><span class="badge bg-danger">Rejected</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#">#2644</a></th>
|
|
<td>Raheem Lehner</td>
|
|
<td><a href="#" class="text-primary">Sunt similique distinctio</a></td>
|
|
<td>$165</td>
|
|
<td><span class="badge bg-success">Approved</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- End Recent Sales -->
|
|
</div>
|
|
</div><!-- End Left side columns -->
|
|
|
|
<!-- Right side columns -->
|
|
<div class="col-lg-4">
|
|
|
|
<!-- Recent Activity -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Website Traffic -->
|
|
<div class="card">
|
|
<div class="card-body pb-0">
|
|
<h5 class="card-title">Rekomendasi Tertinggi</h5>
|
|
<div id="trafficChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const chart = echarts.init(document.querySelector("#trafficChart"));
|
|
const chartData = @json($chartData);
|
|
|
|
chart.setOption({
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center'
|
|
},
|
|
series: [{
|
|
name: 'Rekomendasi Makanan',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: chartData
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div><!-- End Right side columns -->
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
@endsection |