282 lines
15 KiB
PHP
282 lines
15 KiB
PHP
{{-- resources/views/admin/layouts/app.blade.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', 'Admin') — RedGuard</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { font-family: 'Poppins', sans-serif !important; }
|
|
</style>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--red: #C0392B;
|
|
--red-dark: #A93226;
|
|
--red-dim: #FDEDEC;
|
|
--red-bdr: #FADBD8;
|
|
--green: #27AE60;
|
|
--green-dim: #EAFAF1;
|
|
--yellow-dim: #FEF9E7;
|
|
--yellow-txt: #B7770D;
|
|
--yellow-bdr: #F9E79F;
|
|
--bg: #F0F4F0;
|
|
--white: #FFFFFF;
|
|
--surface: #F8F9FA;
|
|
--border: #E8ECF0;
|
|
--sidebar-bg: #DCEDC8;
|
|
--sidebar-txt: #33691E;
|
|
--sidebar-txt2:#558B2F;
|
|
--sidebar-lbl: #7CB342;
|
|
--sidebar-act: #33691E;
|
|
--sidebar-act-bg: rgba(51,105,30,0.12);
|
|
--sidebar-hover: rgba(51,105,30,0.07);
|
|
--dark: #1A1A2E;
|
|
--text: #2C3038;
|
|
--text-2: #6B7280;
|
|
--text-3: #9CA3AF;
|
|
--shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
|
|
--shadow-md: 0 4px 16px rgba(0,0,0,0.10);
|
|
--shadow-card: 0 2px 12px rgba(0,0,0,0.08);
|
|
--sidebar-w: 220px;
|
|
--topbar-h: 56px;
|
|
}
|
|
html, body { height: 100%; font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--text); }
|
|
|
|
/* TOPBAR */
|
|
.topbar {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
height: var(--topbar-h);
|
|
background: var(--white);
|
|
border-bottom: 1px solid var(--border);
|
|
box-shadow: var(--shadow-sm);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 1.5rem;
|
|
}
|
|
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
|
|
.brand-icon {
|
|
width: 32px; height: 32px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.3rem;
|
|
/* No background — just the chili emoji */
|
|
}
|
|
.brand-name { font-size: 1rem; font-weight: 700; color: var(--dark); }
|
|
.brand-name span { color: var(--red); }
|
|
.brand-badge { font-size: 0.6rem; background: var(--red-dim); color: var(--red); border: 1px solid var(--red-bdr); padding: 2px 8px; border-radius: 100px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
|
|
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
|
.admin-name { font-size: 0.82rem; color: var(--text-2); }
|
|
.avatar { width: 32px; height: 32px; background: var(--red); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.78rem; font-weight: 700; box-shadow: var(--shadow-sm); }
|
|
.btn-logout { font-size: 0.78rem; padding: 5px 14px; border-radius: 100px; border: 1px solid var(--border); background: var(--white); color: var(--text-2); cursor: pointer; font-family: 'Poppins', sans-serif; text-decoration: none; transition: all 0.15s; }
|
|
.btn-logout:hover { background: var(--red-dim); color: var(--red); border-color: var(--red-bdr); }
|
|
|
|
/* SIDEBAR */
|
|
.sidebar {
|
|
position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
|
|
width: var(--sidebar-w);
|
|
background: var(--sidebar-bg);
|
|
padding: 1.5rem 0;
|
|
overflow-y: auto;
|
|
box-shadow: 2px 0 12px rgba(0,0,0,0.08);
|
|
border-right: 1px solid #C5E1A5;
|
|
}
|
|
.nav-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sidebar-lbl); padding: 0 1.25rem; margin-bottom: 0.4rem; }
|
|
.nav-section { margin-bottom: 1.5rem; }
|
|
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 1rem; margin: 2px 10px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; color: var(--sidebar-txt2); font-weight: 500; text-decoration: none; transition: all 0.15s; }
|
|
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-act); }
|
|
.nav-item.active { background: var(--sidebar-act-bg); color: var(--sidebar-act); font-weight: 600; box-shadow: 0 1px 4px rgba(51,105,30,0.1); }
|
|
.nav-item svg { opacity: 0.7; flex-shrink: 0; }
|
|
.nav-item.active svg { opacity: 1; }
|
|
|
|
/* MAIN */
|
|
.main { margin-left: var(--sidebar-w); margin-top: var(--topbar-h); padding: 1.75rem; min-height: calc(100vh - var(--topbar-h)); }
|
|
|
|
/* PAGE HEADER */
|
|
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }
|
|
.page-header-left h1 { font-size: 1.2rem; font-weight: 700; color: var(--dark); letter-spacing: -0.02em; }
|
|
.page-header-left p { font-size: 0.82rem; color: var(--text-2); margin-top: 2px; }
|
|
.breadcrumb { font-size: 0.72rem; color: var(--text-3); margin-bottom: 4px; }
|
|
.breadcrumb a { color: var(--red); text-decoration: none; }
|
|
|
|
/* CARDS */
|
|
.card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 1.25rem; box-shadow: var(--shadow-card); }
|
|
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
|
|
.card-title { font-size: 0.9rem; font-weight: 600; color: var(--dark); }
|
|
.card-body { padding: 1.25rem; }
|
|
|
|
/* STATS */
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
|
|
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow-card); transition: box-shadow 0.2s, transform 0.2s; }
|
|
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
|
|
.stat-label { font-size: 0.75rem; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
|
|
.stat-val { font-size: 1.8rem; font-weight: 700; color: var(--dark); line-height: 1; }
|
|
.stat-val.red { color: var(--red); }
|
|
.stat-val.green { color: var(--green); }
|
|
.stat-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; }
|
|
|
|
/* TABLE */
|
|
.table-wrap { overflow-x: auto; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
|
|
thead th { padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); background: var(--surface); border-bottom: 1px solid var(--border); }
|
|
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
|
tbody tr:last-child td { border-bottom: none; }
|
|
tbody tr:hover td { background: #FAFBFC; }
|
|
|
|
/* BADGES */
|
|
.badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
|
|
.badge-hama { background: var(--yellow-dim); color: var(--yellow-txt); border: 1px solid var(--yellow-bdr); }
|
|
.badge-penyakit { background: var(--red-dim); color: var(--red); border: 1px solid var(--red-bdr); }
|
|
.badge-success { background: var(--green-dim); color: var(--green); border: 1px solid #A9DFBF; }
|
|
.badge-warning { background: var(--yellow-dim); color: var(--yellow-txt); border: 1px solid var(--yellow-bdr); }
|
|
.badge-mono { font-family: monospace; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); font-size: 0.72rem; }
|
|
|
|
/* BUTTONS */
|
|
.btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 500; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); color: var(--text); cursor: pointer; text-decoration: none; transition: all 0.15s; box-shadow: var(--shadow-sm); }
|
|
.btn:hover { background: var(--surface); box-shadow: var(--shadow-md); }
|
|
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
|
|
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
|
|
.btn-sm { font-size: 0.75rem; padding: 5px 11px; }
|
|
.btn-danger { color: var(--red); border-color: var(--red-bdr); background: var(--red-dim); }
|
|
.btn-danger:hover { background: var(--red); color: #fff; }
|
|
|
|
/* FORMS */
|
|
.form-group { margin-bottom: 1rem; }
|
|
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
|
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
|
|
.form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
|
|
input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 0.85rem; color: var(--dark); background: var(--white); outline: none; transition: border-color 0.15s; }
|
|
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,57,43,0.08); }
|
|
.form-hint { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; }
|
|
.form-error { font-size: 0.75rem; color: var(--red); margin-top: 4px; }
|
|
|
|
/* ALERTS */
|
|
.alert { padding: 10px 14px; border-radius: 8px; font-size: 0.83rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); }
|
|
.alert-success { background: var(--green-dim); color: #1E8449; border: 1px solid #A9DFBF; }
|
|
.alert-danger { background: var(--red-dim); color: var(--red); border: 1px solid var(--red-bdr); }
|
|
|
|
/* CF BAR */
|
|
.cf-bar-wrap { display: flex; align-items: center; gap: 8px; }
|
|
.cf-bar-bg { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; max-width: 80px; }
|
|
.cf-bar-fill { height: 100%; background: var(--red); border-radius: 3px; }
|
|
|
|
/* SEARCH BOX */
|
|
.search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); padding: 0 12px; box-shadow: var(--shadow-sm); }
|
|
.search-box input { border: none; background: none; box-shadow: none; width: 200px; font-size: 0.82rem; padding: 7px 0; }
|
|
.search-box input:focus { box-shadow: none; border: none; }
|
|
|
|
/* PAGINATION */
|
|
.pagination-wrap { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
|
|
.pagination-info { font-size: 0.78rem; color: var(--text-2); }
|
|
|
|
/* PAGINATION LINKS - Laravel default override */
|
|
nav[aria-label="Pagination Navigation"] { display: flex; align-items: center; }
|
|
nav[aria-label="Pagination Navigation"] span,
|
|
nav[aria-label="Pagination Navigation"] a {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
min-width: 32px; height: 32px; padding: 0 8px;
|
|
margin: 0 2px;
|
|
border-radius: 6px;
|
|
font-size: 0.78rem; font-weight: 500;
|
|
font-family: 'Poppins', sans-serif;
|
|
text-decoration: none;
|
|
border: 1px solid var(--border);
|
|
background: var(--white);
|
|
color: var(--text-2);
|
|
transition: all 0.15s;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
|
}
|
|
nav[aria-label="Pagination Navigation"] a:hover {
|
|
background: var(--red-dim);
|
|
color: var(--red);
|
|
border-color: var(--red-bdr);
|
|
}
|
|
nav[aria-label="Pagination Navigation"] span[aria-current="page"] > span {
|
|
background: var(--red);
|
|
color: #fff;
|
|
border-color: var(--red);
|
|
box-shadow: 0 2px 6px rgba(192,57,43,0.25);
|
|
}
|
|
nav[aria-label="Pagination Navigation"] span.cursor-default {
|
|
color: var(--text-3);
|
|
background: var(--surface);
|
|
}
|
|
</style>
|
|
@stack('styles')
|
|
</head>
|
|
<body>
|
|
|
|
{{-- TOPBAR --}}
|
|
<header class="topbar">
|
|
<a class="brand" href="{{ route('admin.dashboard') }}">
|
|
<div class="brand-icon">🌶️</div>
|
|
<div class="brand-name"><span>Red</span>Guard</div>
|
|
<span class="brand-badge">Admin</span>
|
|
</a>
|
|
<div class="topbar-right">
|
|
<span class="admin-name">{{ auth()->user()->name }}</span>
|
|
<div class="avatar">{{ strtoupper(substr(auth()->user()->name, 0, 2)) }}</div>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="btn-logout">Keluar</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
{{-- SIDEBAR --}}
|
|
<aside class="sidebar">
|
|
<div class="nav-section">
|
|
<div class="nav-label">Utama</div>
|
|
<a href="{{ route('admin.dashboard') }}" class="nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
|
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M1 1h6v6H1zm8 0h6v6H9zM1 9h6v6H1zm8 0h6v6H9z"/></svg>
|
|
Dashboard
|
|
</a>
|
|
</div>
|
|
<div class="nav-section">
|
|
<div class="nav-label">Knowledge Base</div>
|
|
<a href="{{ route('admin.penyakit.index') }}" class="nav-item {{ request()->routeIs('admin.penyakit.*') ? 'active' : '' }}">
|
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill-opacity="0.25"/><circle cx="8" cy="8" r="3"/></svg>
|
|
Data Penyakit
|
|
</a>
|
|
<a href="{{ route('admin.gejala.index') }}" class="nav-item {{ request()->routeIs('admin.gejala.*') ? 'active' : '' }}">
|
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2 3h12v2H2zm0 4h12v2H2zm0 4h8v2H2z"/></svg>
|
|
Data Gejala
|
|
</a>
|
|
<a href="{{ route('admin.rule.index') }}" class="nav-item {{ request()->routeIs('admin.rule.*') ? 'active' : '' }}">
|
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M1 2h14v3H1zm2 4.5h10v2H3zm2 3.5h6v2H5z"/></svg>
|
|
Rule & Nilai CF
|
|
</a>
|
|
</div>
|
|
<div class="nav-section">
|
|
<div class="nav-label">Data</div>
|
|
<a href="{{ route('admin.konsultasi.index') }}" class="nav-item {{ request()->routeIs('admin.konsultasi.*') ? 'active' : '' }}">
|
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2 1h12a1 1 0 011 1v9a1 1 0 01-1 1H5l-3 2V2a1 1 0 011-1z"/></svg>
|
|
Riwayat Konsultasi
|
|
</a>
|
|
</div>
|
|
<div class="nav-section">
|
|
<div class="nav-label">Lainnya</div>
|
|
<a href="{{ route('konsultasi.index') }}" class="nav-item" target="_blank">
|
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm1 10H7V7h2zm0-5H7V4h2z"/></svg>
|
|
Halaman User
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
{{-- MAIN --}}
|
|
<main class="main">
|
|
@if(session('success'))
|
|
<div class="alert alert-success">✅ {{ session('success') }}</div>
|
|
@endif
|
|
@if(session('error'))
|
|
<div class="alert alert-danger">⚠️ {{ session('error') }}</div>
|
|
@endif
|
|
|
|
@yield('content')
|
|
</main>
|
|
|
|
@stack('scripts')
|
|
</body>
|
|
</html>
|