ilham
/
sekolah_adiwiyata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
Ilham Wara Nugroho 2026-05-13 10:49:18 +07:00
parent 6927037892
commit b87a13839d
4 changed files with 670 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/Http/Controllers/HomeController.php
View File

@ -12,6 +12,7 @@ use App\Models\Penilaian;
use App\Models\SK;
use App\Models\Usulan;
use App\Models\SampahTerkelola;
use App\Models\SampahBelumTerkelola;
class HomeController extends Controller
{
@ -126,6 +127,31 @@ class HomeController extends Controller
$data['total_sekolah_mandiri'] = Kuesioner::whereHas('sekolah',function($query){
$query->where('ms_kabupaten_id',session('kabupaten_id'));
})->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{
$data['usulan'] = Kuesioner::where('tahun',date('Y'))->get();
$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
')->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')
->join('ms_sekolah as ms', 'ms.MsSekolahId', '=', 'p.ms_sekolah_id')
->select(

BIN
resources/views/.DS_Store vendored
View File

Binary file not shown.

583
resources/views/layouts/testdashboard.html 100644
View File

@ -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>

55
resources/views/modules/dashboard/admin.blade.php
View File

@ -168,7 +168,7 @@
<hr>
<div class="row mb-4">
<div class="col-12">
<h5 class="fw-500">Statistik Sampah Terkelola</h5>
<h5 class="fw-500">Summary Sampah Terkelola</h5>
</div>
<div class="col-sm-6 col-xl-3 mb-2">
<div class="card">
@ -219,6 +219,59 @@
</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="col-sm-12 col-xl-6 mb-4">