MIF_E31220334/app/Views/admin/dashboard.php

232 lines
6.6 KiB
PHP

<!-- app/Views/admin/dashboard.php -->
<?= $this->extend('layouts/admin') ?>
<?= $this->section('content') ?>
<div class="row mb-5">
<div class="col-12">
<div class="card modern-info-card p-4 text-center shadow-sm">
<h4 class="fw-semibold mb-2 info-title">Admin Panel Management</h4>
<p class="mb-0 info-text">
Kelola data perhitungan dan rekomendasi wisata dengan mudah dan efisien melalui panel admin ini.
</p>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card modern-card">
<div class="card-body d-flex align-items-center gap-3">
<div class="icon-wrapper border-primary text-primary">
<i class="bi bi-geo-alt"></i>
</div>
<div>
<h6 class="card-title mb-1">Jumlah Wisata</h6>
<p class="card-text mb-0"><?= esc($jumlahWisata) ?></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card modern-card">
<div class="card-body d-flex align-items-center gap-3">
<div class="icon-wrapper border-success text-success">
<i class="bi bi-list-check"></i>
</div>
<div>
<h6 class="card-title mb-1">Jumlah Kriteria</h6>
<p class="card-text mb-0"><?= esc($jumlahKriteria) ?></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card modern-card">
<div class="card-body d-flex align-items-center gap-3">
<div class="icon-wrapper border-warning text-warning">
<i class="bi bi-filter-circle"></i>
</div>
<div>
<h6 class="card-title mb-1">Jumlah Sub Kriteria</h6>
<p class="card-text mb-0"><?= esc($jumlahSubKriteria) ?></p>
</div>
</div>
</div>
</div>
</div>
<h5 class="mb-3 mt-5">🏆 3 Wisata dengan Rating Tertinggi</h5>
<div class="row g-4">
<?php foreach ($topWisata as $wisata): ?>
<div class="col-md-4">
<div class="card top-wisata-card shadow-sm border-0 h-100">
<div class="card-body d-flex flex-column align-items-center text-center p-4">
<div class="top-wisata-icon mb-3">
<i class="bi bi-stars"></i>
</div>
<h6 class="fw-bold text-dark mb-2"><?= esc($wisata->nama_wisata) ?></h6>
<div class="rating-stars mb-2">
<?php
$fullStars = floor($wisata->rata_rating);
$halfStar = ($wisata->rata_rating - $fullStars) >= 0.5;
?>
<?php for ($i = 0; $i < $fullStars; $i++): ?>
<i class="bi bi-star-fill text-warning"></i>
<?php endfor; ?>
<?php if ($halfStar): ?>
<i class="bi bi-star-half text-warning"></i>
<?php endif; ?>
<?php for ($i = $fullStars + $halfStar; $i < 5; $i++): ?>
<i class="bi bi-star text-muted"></i>
<?php endfor; ?>
</div>
<small class="text-secondary">Rating Rata-rata: <?= number_format($wisata->rata_rating, 2) ?> / 5.00</small>
<small class="text-muted"><?= esc($wisata->total_ulasan) ?> ulasan</small>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
/* Card info atas */
.modern-info-card {
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
border-radius: 8px;
box-shadow: 0 6px 18px rgba(162, 191, 219, 0.4);
font-weight: 500;
color: #334155;
/* warna teks soft dark */
user-select: none;
font-family: 'Lora', serif;
padding: 3rem 2rem;
}
.info-title {
font-weight: 700;
font-size: 2rem;
letter-spacing: 0.03em;
margin-bottom: 0.5rem;
}
.info-text {
font-size: 1.1rem;
line-height: 1.5;
max-width: 700px;
margin: 0 auto;
}
/* Card statistik */
.modern-card {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
border: none;
cursor: default;
transition: box-shadow 0.3s ease, transform 0.3s ease;
height: 120px;
}
.modern-card:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.card-body {
padding: 1.4rem 2rem;
display: flex;
align-items: center;
gap: 1.25rem;
}
.icon-wrapper {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8rem;
border: 2.5px solid;
}
.border-primary {
border-color: #3b82f6;
}
.border-success {
border-color: #22c55e;
}
.border-warning {
border-color: #facc15;
}
.text-primary {
color: #3b82f6;
}
.text-success {
color: #22c55e;
}
.text-warning {
color: #facc15;
}
.card-title {
font-weight: 600;
font-size: 1.05rem;
color: #374151;
margin-bottom: 0.2rem;
}
.card-text {
font-weight: 700;
font-size: 2rem;
color: #111827;
}
/* Responsive */
@media (max-width: 768px) {
.icon-wrapper {
width: 40px;
height: 40px;
font-size: 1.4rem;
border-radius: 10px;
}
.card-text {
font-size: 1.5rem;
}
}
.top-wisata-card {
background: linear-gradient(135deg, #fef9c3, #fef3c7);
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.top-wisata-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.top-wisata-icon {
background-color: #fde68a;
color: #b45309;
font-size: 2rem;
padding: 12px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(252, 211, 77, 0.5);
}
.rating-stars i {
font-size: 1.3rem;
}
</style>
<?= $this->endSection() ?>