update
Ilham Wara Nugroho
parent
6927037892
commit
b87a13839d
|
|
@ -12,6 +12,7 @@ use App\Models\Penilaian;
|
||||||
use App\Models\SK;
|
use App\Models\SK;
|
||||||
use App\Models\Usulan;
|
use App\Models\Usulan;
|
||||||
use App\Models\SampahTerkelola;
|
use App\Models\SampahTerkelola;
|
||||||
|
use App\Models\SampahBelumTerkelola;
|
||||||
|
|
||||||
class HomeController extends Controller
|
class HomeController extends Controller
|
||||||
{
|
{
|
||||||
|
|
@ -126,6 +127,31 @@ class HomeController extends Controller
|
||||||
$data['total_sekolah_mandiri'] = Kuesioner::whereHas('sekolah',function($query){
|
$data['total_sekolah_mandiri'] = Kuesioner::whereHas('sekolah',function($query){
|
||||||
$query->where('ms_kabupaten_id',session('kabupaten_id'));
|
$query->where('ms_kabupaten_id',session('kabupaten_id'));
|
||||||
})->where('tahun',date('Y'))->where('level',3)->where('status',11)->count();
|
})->where('tahun',date('Y'))->where('level',3)->where('status',11)->count();
|
||||||
|
|
||||||
|
$data['summary2'] = SampahBelumTerkelola::whereHas('sekolah',function($query){
|
||||||
|
$query->where('ms_kabupaten_id',session('kabupaten_id'));
|
||||||
|
})->where('tahun', date('Y'))
|
||||||
|
->selectRaw('SUM(organik::integer) as organik,
|
||||||
|
SUM(sampah_anorganik::integer) as anorganik,
|
||||||
|
SUM(b3::integer) as b3,
|
||||||
|
SUM(residu::integer) as minyak
|
||||||
|
')->first();
|
||||||
|
|
||||||
|
$data['ranking_sekolah'] = Penilaian::join('ms_sekolah as ms', 'ms.MsSekolahId', '=', 'ms_sekolah_id')
|
||||||
|
->select(
|
||||||
|
'ms_sekolah_id',
|
||||||
|
'ms.nama_sekolah',
|
||||||
|
'ms.npsn',
|
||||||
|
\DB::raw('COUNT(*) as total_pengelolaan_sampah')
|
||||||
|
)
|
||||||
|
->whereRaw(
|
||||||
|
"p.value::text ILIKE '%Pengelolaan Sampah%'"
|
||||||
|
)
|
||||||
|
->groupBy('ms_sekolah_id', 'ms.nama_sekolah','ms.npsn')
|
||||||
|
->orderByDesc('total_pengelolaan_sampah')
|
||||||
|
->limit(4)
|
||||||
|
->get();
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
$data['usulan'] = Kuesioner::where('tahun',date('Y'))->get();
|
$data['usulan'] = Kuesioner::where('tahun',date('Y'))->get();
|
||||||
$data['total_usulan_kab'] = Kuesioner::where('tahun',date('Y'))->where('level',0)->count();
|
$data['total_usulan_kab'] = Kuesioner::where('tahun',date('Y'))->where('level',0)->count();
|
||||||
|
|
@ -145,6 +171,13 @@ class HomeController extends Controller
|
||||||
SUM(minyak_jelantah::integer) as minyak
|
SUM(minyak_jelantah::integer) as minyak
|
||||||
')->first();
|
')->first();
|
||||||
|
|
||||||
|
$data['summary2'] = SampahBelumTerkelola::where('tahun', date('Y'))
|
||||||
|
->selectRaw('SUM(organik::integer) as organik,
|
||||||
|
SUM(sampah_anorganik::integer) as anorganik,
|
||||||
|
SUM(b3::integer) as b3,
|
||||||
|
SUM(residu::integer) as minyak
|
||||||
|
')->first();
|
||||||
|
|
||||||
$data['ranking_sekolah'] = \DB::table('penilaian as p')
|
$data['ranking_sekolah'] = \DB::table('penilaian as p')
|
||||||
->join('ms_sekolah as ms', 'ms.MsSekolahId', '=', 'p.ms_sekolah_id')
|
->join('ms_sekolah as ms', 'ms.MsSekolahId', '=', 'p.ms_sekolah_id')
|
||||||
->select(
|
->select(
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,583 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="id">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>SIDIA Jakarta - Comprehensive Dashboard</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap 5 CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<!-- Google Fonts: Inter -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<!-- Font Awesome -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<!-- ApexCharts -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--primary-bg: #f8fafc;
|
||||||
|
--sidebar-bg: #ffffff;
|
||||||
|
--accent-blue: #3b82f6;
|
||||||
|
--accent-green: #10b981;
|
||||||
|
--accent-yellow: #f59e0b;
|
||||||
|
--accent-purple: #8b5cf6;
|
||||||
|
--text-main: #1e293b;
|
||||||
|
--text-muted: #64748b;
|
||||||
|
--card-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
|
||||||
|
--sidebar-width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: var(--primary-bg);
|
||||||
|
color: var(--text-main);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: var(--sidebar-width);
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
background: var(--sidebar-bg);
|
||||||
|
border-right: 1px solid #e2e8f0;
|
||||||
|
padding: 1.5rem;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo img {
|
||||||
|
width: 35px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover, .nav-link.active {
|
||||||
|
background-color: #eff6ff;
|
||||||
|
color: var(--accent-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link i:first-child {
|
||||||
|
width: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin-left: var(--sidebar-width);
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin: 1.5rem 0 1rem 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header::after {
|
||||||
|
content: "";
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-custom {
|
||||||
|
background: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-custom:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Soft Cards Style (Top) */
|
||||||
|
.card-soft-blue { background: #eff6ff; border-left: 4px solid #3b82f6; }
|
||||||
|
.card-soft-green { background: #ecfdf5; border-left: 4px solid #10b981; }
|
||||||
|
.card-soft-yellow { background: #fffbeb; border-left: 4px solid #f59e0b; }
|
||||||
|
.card-soft-purple { background: #f5f3ff; border-left: 4px solid #8b5cf6; }
|
||||||
|
|
||||||
|
/* Solid Cards Style (Middle) */
|
||||||
|
.card-solid-blue { background: #3b82f6; color: white; }
|
||||||
|
.card-solid-green { background: #059669; color: white; }
|
||||||
|
.card-solid-yellow { background: #d97706; color: white; }
|
||||||
|
.card-solid-purple { background: #7c3aed; color: white; }
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-circle {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table Styling */
|
||||||
|
.table-container {
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-status {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-dikembalikan { background: #fee2e2; color: #dc2626; }
|
||||||
|
.bg-proses { background: #fef3c7; color: #d97706; }
|
||||||
|
.bg-selesai { background: #dcfce7; color: #166534; }
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.sidebar { transform: translateX(-100%); }
|
||||||
|
.main-content { margin-left: 0; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="brand-logo">
|
||||||
|
<img src="https://placehold.co/40x40/10b981/ffffff?text=SJ" alt="Logo">
|
||||||
|
<div>
|
||||||
|
<h6 class="fw-bold mb-0">SIDIA Jakarta</h6>
|
||||||
|
<p class="text-muted small mb-0" style="font-size: 0.65rem;">Provinsi DKI Jakarta</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="nav flex-column">
|
||||||
|
<a href="#" class="nav-link active"><i class="fa-solid fa-grid-2"></i> Dashboard</a>
|
||||||
|
<a href="#" class="nav-link"><i class="fa-solid fa-school"></i> Profile Sekolah</a>
|
||||||
|
<a href="#" class="nav-link"><i class="fa-solid fa-edit"></i> Kuesioner Leveling</a>
|
||||||
|
|
||||||
|
<div class="mt-3 mb-2 px-3 small text-muted fw-bold">PROSES</div>
|
||||||
|
<a href="#" class="nav-link"><span><i class="fa-solid fa-award"></i> Usulan CSA</span> <i class="fa-solid fa-chevron-down small opacity-50"></i></a>
|
||||||
|
<a href="#" class="nav-link"><span><i class="fa-solid fa-trophy"></i> Usulan Adiwiyata</span> <i class="fa-solid fa-chevron-down small opacity-50"></i></a>
|
||||||
|
|
||||||
|
<div class="mt-3 mb-2 px-3 small text-muted fw-bold">PENGATURAN</div>
|
||||||
|
<a href="#" class="nav-link"><span><i class="fa-solid fa-users-gear"></i> Management</span> <i class="fa-solid fa-chevron-down small opacity-50"></i></a>
|
||||||
|
<a href="#" class="nav-link"><span><i class="fa-solid fa-database"></i> Master Data</span> <i class="fa-solid fa-chevron-down small opacity-50"></i></a>
|
||||||
|
|
||||||
|
<hr class="opacity-10 my-4">
|
||||||
|
<a href="#" class="nav-link text-danger"><i class="fa-solid fa-sign-out"></i> Keluar</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="main-content">
|
||||||
|
<header class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<div>
|
||||||
|
<h3 class="fw-bold mb-1">Dashboard Overview</h3>
|
||||||
|
<nav aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb mb-0">
|
||||||
|
<li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li>
|
||||||
|
<li class="breadcrumb-item active">Dashboard</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center gap-3">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<label class="input-group-text bg-white border-0" for="filterYear">Filter :</label>
|
||||||
|
<select class="form-select border-0 shadow-sm rounded-3" id="filterYear">
|
||||||
|
<option selected>2026</option>
|
||||||
|
<option>2025</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-white bg-white shadow-sm rounded-pill px-3 py-2 border-0 dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||||
|
<img src="https://placehold.co/24x24/3b82f6/ffffff?text=A" class="rounded-circle me-2" alt="Admin">
|
||||||
|
<span class="small fw-bold">Administrator</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Group 1: Usulan Adiwiyata (Referencing Screenshot 10.04.15) -->
|
||||||
|
<div class="section-header">Usulan Adiwiyata</div>
|
||||||
|
<div class="row g-3 mb-4">
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-soft-blue">
|
||||||
|
<div class="d-flex justify-content-between align-items-start">
|
||||||
|
<div>
|
||||||
|
<div class="metric-value text-primary">4</div>
|
||||||
|
<div class="metric-label text-primary">Sekolah</div>
|
||||||
|
</div>
|
||||||
|
<i class="fa-solid fa-city opacity-25 fa-2x"></i>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 small fw-bold text-primary">Usulan Adiwiyata Kota</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-soft-green">
|
||||||
|
<div class="d-flex justify-content-between align-items-start">
|
||||||
|
<div>
|
||||||
|
<div class="metric-value text-success">1</div>
|
||||||
|
<div class="metric-label text-success">Sekolah</div>
|
||||||
|
</div>
|
||||||
|
<i class="fa-solid fa-landmark opacity-25 fa-2x"></i>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 small fw-bold text-success">Usulan Adiwiyata Provinsi</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-soft-yellow">
|
||||||
|
<div class="d-flex justify-content-between align-items-start">
|
||||||
|
<div>
|
||||||
|
<div class="metric-value text-warning">0</div>
|
||||||
|
<div class="metric-label text-warning">Sekolah</div>
|
||||||
|
</div>
|
||||||
|
<i class="fa-solid fa-map opacity-25 fa-2x"></i>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 small fw-bold text-warning">Usulan Adiwiyata Nasional</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-soft-purple">
|
||||||
|
<div class="d-flex justify-content-between align-items-start">
|
||||||
|
<div>
|
||||||
|
<div class="metric-value text-purple" style="color: var(--accent-purple);">0</div>
|
||||||
|
<div class="metric-label text-purple" style="color: var(--accent-purple);">Sekolah</div>
|
||||||
|
</div>
|
||||||
|
<i class="fa-solid fa-award opacity-25 fa-2x"></i>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 small fw-bold text-purple" style="color: var(--accent-purple);">Usulan Adiwiyata Mandiri</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Group 2: Sekolah Adiwiyata (Referencing Screenshot 10.04.15 Row 2) -->
|
||||||
|
<div class="section-header">Sekolah Adiwiyata (Total)</div>
|
||||||
|
<div class="row g-3 mb-4">
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-solid-blue">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
|
<div class="icon-circle"><i class="fa-solid fa-trophy"></i></div>
|
||||||
|
<div class="metric-value">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-label">Sekolah Adiwiyata Kota</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-solid-green">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
|
<div class="icon-circle"><i class="fa-solid fa-trophy"></i></div>
|
||||||
|
<div class="metric-value">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-label">Sekolah Adiwiyata Provinsi</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-solid-yellow">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
|
<div class="icon-circle"><i class="fa-solid fa-trophy"></i></div>
|
||||||
|
<div class="metric-value">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-label">Sekolah Adiwiyata Nasional</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="card p-3 card-custom card-solid-purple">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
|
<div class="icon-circle"><i class="fa-solid fa-trophy"></i></div>
|
||||||
|
<div class="metric-value">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-label">Sekolah Adiwiyata Mandiri</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-4">
|
||||||
|
<!-- Group 3: Summary Sampah Terkelola -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="section-header">Summary Sampah Terkelola</div>
|
||||||
|
<div class="row g-2">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Sampah Organik</p>
|
||||||
|
<h4 class="fw-bold mb-0">219 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Sampah Anorganik</p>
|
||||||
|
<h4 class="fw-bold mb-0">201 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Sampah B3</p>
|
||||||
|
<h4 class="fw-bold mb-0">201 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Minyak Jelantah</p>
|
||||||
|
<h4 class="fw-bold mb-0">222 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Group 4: Summary Timbulan Sampah -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="section-header">Summary Timbulan Sampah</div>
|
||||||
|
<div class="row g-2">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Sampah Organik</p>
|
||||||
|
<h4 class="fw-bold mb-0">0 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Sampah Anorganik</p>
|
||||||
|
<h4 class="fw-bold mb-0">0 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Sampah B3</p>
|
||||||
|
<h4 class="fw-bold mb-0">0 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card p-3 border shadow-sm rounded-4">
|
||||||
|
<p class="text-muted small mb-1">Total Sampah Residu</p>
|
||||||
|
<h4 class="fw-bold mb-0">0 <small class="text-muted fs-6">Kg</small></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row g-4 mb-4">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="table-container">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<h5 class="fw-bold mb-0">Grafik Pengolahan Sampah 2026</h5>
|
||||||
|
<div class="badge bg-light text-dark">Data Bulanan</div>
|
||||||
|
</div>
|
||||||
|
<div id="wasteChart" style="height: 300px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="table-container h-100">
|
||||||
|
<h6 class="fw-bold mb-4 text-warning"><i class="fa-solid fa-ranking-star me-2"></i>Ranking Sekolah</h6>
|
||||||
|
<div class="list-group list-group-flush">
|
||||||
|
<div class="list-group-item px-0 border-0 mb-2">
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-3">
|
||||||
|
<div class="bg-light px-2 py-1 rounded fw-bold small text-primary">01</div>
|
||||||
|
<div>
|
||||||
|
<div class="fw-bold small">SDN Pejagalan 09 Pg.</div>
|
||||||
|
<div class="text-muted" style="font-size: 0.7rem;">Jakarta Utara</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="badge rounded-pill bg-soft-blue text-primary px-3">24%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-group-item px-0 border-0 mb-2">
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-3">
|
||||||
|
<div class="bg-light px-2 py-1 rounded fw-bold small text-primary">02</div>
|
||||||
|
<div>
|
||||||
|
<div class="fw-bold small">SD NEGERI RAWA BADAK</div>
|
||||||
|
<div class="text-muted" style="font-size: 0.7rem;">Jakarta Utara</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="badge rounded-pill bg-soft-blue text-primary px-3">21%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-group-item px-0 border-0">
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class="d-flex align-items-center gap-3">
|
||||||
|
<div class="bg-light px-2 py-1 rounded fw-bold small text-primary">03</div>
|
||||||
|
<div>
|
||||||
|
<div class="fw-bold small">SD CIKAL AMRI</div>
|
||||||
|
<div class="text-muted" style="font-size: 0.7rem;">Jakarta Timur</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="badge rounded-pill bg-soft-blue text-primary px-3">3%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row g-4">
|
||||||
|
<!-- Table 1 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="table-container">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<h6 class="fw-bold mb-0">Verifikasi Kuesioner Leveling</h6>
|
||||||
|
<a href="#" class="text-primary small text-decoration-none">Lihat Semua <i class="fa-solid fa-arrow-right ms-1"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-hover align-middle">
|
||||||
|
<thead class="table-light">
|
||||||
|
<tr style="font-size: 0.75rem;">
|
||||||
|
<th>#</th>
|
||||||
|
<th>Nama Sekolah</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><button class="btn btn-sm btn-primary py-0 px-2"><i class="fa-solid fa-eye" style="font-size: 0.7rem;"></i></button></td>
|
||||||
|
<td>
|
||||||
|
<div class="fw-bold small">SD NEGERI TOMANG 08 PAGI</div>
|
||||||
|
<div class="text-muted" style="font-size: 0.65rem;">Jakarta Barat</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge-status bg-dikembalikan">Dikembalikan</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><button class="btn btn-sm btn-primary py-0 px-2"><i class="fa-solid fa-eye" style="font-size: 0.7rem;"></i></button></td>
|
||||||
|
<td>
|
||||||
|
<div class="fw-bold small">SDN PEJAGALAN 09 Pg.</div>
|
||||||
|
<div class="text-muted" style="font-size: 0.65rem;">Jakarta Utara</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge-status bg-selesai">Terbit SK</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table 2 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="table-container">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<h6 class="fw-bold mb-0">Usulan Adiwiyata</h6>
|
||||||
|
<span class="badge bg-light text-dark">5 Entri</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-hover align-middle">
|
||||||
|
<thead class="table-light">
|
||||||
|
<tr style="font-size: 0.75rem;">
|
||||||
|
<th>#</th>
|
||||||
|
<th>Sekolah & Usulan</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="small">1</td>
|
||||||
|
<td>
|
||||||
|
<div class="fw-bold small">SD NEGERI TOMANG 08 PAGI</div>
|
||||||
|
<div class="text-primary" style="font-size: 0.65rem;">Adiwiyata Kab/Kota</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge-status bg-dikembalikan">Dikembalikan</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="small">2</td>
|
||||||
|
<td>
|
||||||
|
<div class="fw-bold small">SDN RAWA BADAK UTARA 07</div>
|
||||||
|
<div class="text-success" style="font-size: 0.65rem;">Adiwiyata Provinsi</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge-status bg-selesai">Terbit SK</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const options = {
|
||||||
|
series: [{
|
||||||
|
name: 'Sampah Terkelola',
|
||||||
|
data: [31, 40, 28, 51, 42, 109, 100, 120, 140, 150, 160, 175]
|
||||||
|
}, {
|
||||||
|
name: 'Timbulan Sampah',
|
||||||
|
data: [11, 32, 45, 32, 34, 52, 41, 60, 70, 75, 80, 85]
|
||||||
|
}],
|
||||||
|
chart: {
|
||||||
|
height: 300,
|
||||||
|
type: 'area',
|
||||||
|
toolbar: { show: false },
|
||||||
|
fontFamily: 'Inter, sans-serif'
|
||||||
|
},
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
stroke: { curve: 'smooth', width: 3 },
|
||||||
|
colors: ['#3b82f6', '#8b5cf6'],
|
||||||
|
fill: {
|
||||||
|
type: 'gradient',
|
||||||
|
gradient: {
|
||||||
|
shadeIntensity: 1,
|
||||||
|
opacityFrom: 0.4,
|
||||||
|
opacityTo: 0,
|
||||||
|
stops: [0, 90, 100]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"]
|
||||||
|
},
|
||||||
|
tooltip: { x: { format: 'dd/mm/yy HH:mm' } },
|
||||||
|
grid: {
|
||||||
|
borderColor: '#f1f5f9',
|
||||||
|
strokeDashArray: 3
|
||||||
|
},
|
||||||
|
legend: { position: 'top', horizontalAlign: 'right' }
|
||||||
|
};
|
||||||
|
|
||||||
|
const chart = new ApexCharts(document.querySelector("#wasteChart"), options);
|
||||||
|
chart.render();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Bootstrap Bundle with Popper -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -168,7 +168,7 @@
|
||||||
<hr>
|
<hr>
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h5 class="fw-500">Statistik Sampah Terkelola</h5>
|
<h5 class="fw-500">Summary Sampah Terkelola</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-xl-3 mb-2">
|
<div class="col-sm-6 col-xl-3 mb-2">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -219,6 +219,59 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="col-12">
|
||||||
|
<h5 class="fw-500">Summary Timbulan Sampah</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 col-xl-3 mb-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex flex-row justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
<span class="m-0 l-h-n fw-500">Total Sampah Organik</span> <br><br>
|
||||||
|
<h3 class="f20 fw-700 ">{{number_format(@$summary2->organik)}} <span class="f12 fw-300">Kg</span> </h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 col-xl-3 mb-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex flex-row justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
<span class="m-0 l-h-n fw-500">Total Sampah Anorganik</span> <br><br>
|
||||||
|
<h3 class="f20 fw-700 ">{{number_format(@$summary2->anorganik)}} <span class="f12 fw-300">Kg</span> </h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 col-xl-3 mb-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex flex-row justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
<span class="m-0 l-h-n fw-500">Total Sampah B3</span> <br><br>
|
||||||
|
<h3 class="f20 fw-700 ">{{number_format(@$summary2->b3)}} <span class="f12 fw-300">Kg</span> </h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 col-xl-3 mb-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex flex-row justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
<span class="m-0 l-h-n fw-500">Total Sampah Residu</span> <br><br>
|
||||||
|
<h3 class="f20 fw-700 ">{{number_format(@$summary2->residu)}} <span class="f12 fw-300">Kg</span> </h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
<div class="col-sm-12 col-xl-6 mb-4">
|
<div class="col-sm-12 col-xl-6 mb-4">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue