MIF_E31231754/resources/views/admin/layouts/app.blade.php

427 lines
13 KiB
PHP

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Dashboard') SPK BLT-DD Desa Pungging</title>
<link rel="icon" type="image/png" href="/images/logo-kab.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--sidebar-bg: #12302080;
--sidebar-solid: #12302099;
--green-primary: #2d7a4f;
--green-dark: #1a5c38;
--sidebar-width: 252px;
--topbar-h: 62px;
}
body {
background: #eef3f0;
font-family: 'Segoe UI', sans-serif;
margin: 0;
}
/* SIDEBAR */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
background: #1a3c2e;
z-index: 300;
display: flex;
flex-direction: column;
overflow-y: auto;
box-shadow: 3px 0 12px rgba(0, 0, 0, 0.15);
}
.sidebar-brand {
padding: 18px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 10px;
background: rgba(0, 0, 0, 0.15);
}
.sidebar-brand img {
width: 38px;
height: 38px;
object-fit: contain;
flex-shrink: 0;
}
.sidebar-brand .brand-text {
color: #fff;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.3;
}
.sidebar-brand .brand-sub {
color: #9dc9b2;
font-size: 0.72rem;
}
.sidebar nav {
padding: 10px 10px;
flex: 1;
}
.nav-section-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 1.2px;
color: rgba(255, 255, 255, 0.3);
font-weight: 600;
padding: 10px 10px 4px;
}
.nav-link-item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
border-radius: 8px;
color: #b8d4c4;
text-decoration: none;
font-size: 0.85rem;
margin-bottom: 2px;
transition: all 0.18s;
}
.nav-link-item i {
font-size: 1rem;
width: 18px;
text-align: center;
flex-shrink: 0;
}
.nav-link-item:hover {
background: #2d5c42;
color: #fff;
}
.nav-link-item.active {
background: #2d7a4f;
color: #fff;
font-weight: 600;
}
.sidebar hr {
border-color: rgba(255, 255, 255, 0.1);
margin: 6px 14px;
}
.sidebar-footer {
padding: 12px 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
}
.sidebar-user {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin-bottom: 6px;
}
.sidebar-user .avatar {
width: 32px;
height: 32px;
background: #2d7a4f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 0.8rem;
flex-shrink: 0;
}
.sidebar-user .uname {
color: #fff;
font-size: 0.8rem;
font-weight: 600;
}
.sidebar-user .urole {
color: #9dc9b2;
font-size: 0.7rem;
}
.btn-logout {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.06);
border: none;
border-radius: 8px;
color: #f87171;
font-size: 0.82rem;
cursor: pointer;
transition: background 0.18s;
text-decoration: none;
}
.btn-logout:hover {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}
/* TOPBAR */
.topbar {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--topbar-h);
background: #fff;
border-bottom: 1px solid #dce8e1;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.topbar .page-title {
font-weight: 700;
font-size: 1rem;
color: #1a3c2e;
}
.topbar .topbar-right {
display: flex;
align-items: center;
gap: 12px;
}
.badge-admin {
background: #e0f2e9;
color: #2d7a4f;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
/* MAIN */
.main-wrapper {
margin-left: var(--sidebar-width);
padding-top: var(--topbar-h);
min-height: 100vh;
}
.main-content {
padding: 22px 24px;
}
/* GLOBAL STYLES */
.card {
border: none;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.card-header {
background: #fff;
border-bottom: 1px solid #e5ede8;
border-radius: 12px 12px 0 0 !important;
padding: 14px 20px;
font-weight: 600;
color: #1a3c2e;
}
.btn-primary {
background: #2d7a4f !important;
border-color: #2d7a4f !important;
}
.btn-primary:hover {
background: #1a5c38 !important;
border-color: #1a5c38 !important;
}
.btn-outline-primary {
color: #2d7a4f !important;
border-color: #2d7a4f !important;
}
.btn-outline-primary:hover {
background: #2d7a4f !important;
color: #fff !important;
}
.table thead th {
background: #f0f7f3;
color: #1a3c2e;
font-weight: 600;
font-size: 0.82rem;
border: none;
padding: 10px 14px;
}
.table td {
font-size: 0.85rem;
vertical-align: middle;
padding: 10px 14px;
}
.table tbody tr:hover {
background: #f7fbf8;
}
/* ALERT */
.alert {
border-radius: 10px;
font-size: 0.875rem;
}
</style>
@stack('styles')
</head>
<body>
{{-- SIDEBAR --}}
<div class="sidebar">
<div class="sidebar-brand">
<img src="/images/logo-kab.png" alt="Logo">
<div>
<div class="brand-text">SPK BLT-DD</div>
<div class="brand-sub">Desa Pungging, Kab. Mojokerto</div>
</div>
</div>
<nav>
<div class="nav-section-label">Menu Utama</div>
<a href="{{ route('admin.dashboard') }}" class="nav-link-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
<i class="bi bi-speedometer2"></i> Dashboard
</a>
@if(auth()->user()->hasRole('superadmin') || auth()->user()->hasRole('admin'))
<a href="{{ route('admin.periode.index') }}" class="nav-link-item {{ request()->routeIs('admin.periode.*') ? 'active' : '' }}">
<i class="bi bi-calendar3"></i> Periode Seleksi
</a>
<a href="{{ route('admin.warga.index') }}" class="nav-link-item {{ request()->routeIs('admin.warga.*') ? 'active' : '' }}">
<i class="bi bi-people-fill"></i> Data Warga
</a>
<a href="{{ route('admin.kriteria.index') }}" class="nav-link-item {{ request()->routeIs('admin.kriteria.*') ? 'active' : '' }}">
<i class="bi bi-sliders"></i> Kriteria & Bobot
</a>
<a href="{{ route('admin.penilaian.index') }}" class="nav-link-item {{ request()->routeIs('admin.penilaian.*') ? 'active' : '' }}">
<i class="bi bi-clipboard-data-fill"></i> Penilaian Warga
</a>
@endif
@if(auth()->user()->hasRole('superadmin'))
<a href="{{ route('admin.users.index') }}" class="nav-link-item {{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
<i class="bi bi-person-fill-gear"></i> Manajemen Pengguna
</a>
@endif
<hr>
<div class="nav-section-label">Proses & Hasil</div>
@if(auth()->user()->hasRole('superadmin') || auth()->user()->hasRole('admin'))
<a href="{{ isset($periodeAktif) && $periodeAktif ? route('admin.saw.index', $periodeAktif) : route('admin.periode.index') }}" class="nav-link-item {{ request()->routeIs('admin.saw.index') ? 'active' : '' }}">
<i class="bi bi-calculator-fill"></i> Proses SAW
</a>
@endif
<a href="{{ isset($periodeAktif) && $periodeAktif ? route('admin.saw.hasil', $periodeAktif) : '#' }}" class="nav-link-item {{ request()->routeIs('admin.saw.hasil') ? 'active' : '' }}">
<i class="bi bi-trophy-fill"></i> Hasil & Ranking
</a>
<a href="{{ route('admin.gis.index') }}" class="nav-link-item {{ request()->routeIs('admin.gis.*') ? 'active' : '' }}">
<i class="bi bi-geo-alt-fill"></i> GIS Penerima
</a>
<hr>
<div class="nav-section-label">Laporan</div>
<a href="{{ isset($periodeAktif) && $periodeAktif ? route('admin.saw.exportPdf', $periodeAktif) : '#' }}" class="nav-link-item">
<i class="bi bi-file-earmark-pdf-fill"></i> Export PDF
</a>
</nav>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="avatar">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
<div>
<div class="uname">{{ auth()->user()->name }}</div>
<div class="urole">
@if(auth()->user()->hasRole('superadmin'))
Superadmin
@elseif(auth()->user()->hasRole('admin'))
Admin Desa
@else
User (Viewer)
@endif
</div>
</div>
</div>
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="btn-logout">
<i class="bi bi-box-arrow-left"></i> Logout
</button>
</form>
</div>
</div>
{{-- TOPBAR --}}
<div class="topbar">
<div class="page-title">
<i class="bi bi-house-heart-fill me-2" style="color:#2d7a4f;"></i>
@yield('title', 'Dashboard')
</div>
<div class="topbar-right">
<span class="text-muted" style="font-size:0.8rem;">
<i class="bi bi-calendar3 me-1"></i>{{ \Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y') }}
</span>
<span class="badge-admin"><i class="bi bi-person-fill me-1"></i>{{ auth()->user()->name }}</span>
</div>
</div>
{{-- MAIN --}}
<div class="main-wrapper">
<div class="main-content">
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2">
<i class="bi bi-check-circle-fill"></i>
{{ session('success') }}
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2">
<i class="bi bi-exclamation-circle-fill"></i>
{{ session('error') }}
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('warning'))
<div class="alert alert-warning alert-dismissible fade show d-flex align-items-center gap-2">
<i class="bi bi-exclamation-triangle-fill"></i>
{{ session('warning') }}
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@yield('content')
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@stack('scripts')
</body>
</html>