395 lines
9.8 KiB
PHP
395 lines
9.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Admin Dashboard</title>
|
|
<style>
|
|
:root {
|
|
--purple: #673ab7;
|
|
--purple-dark: #4a148c;
|
|
--purple-light: #9c27b0;
|
|
--gray-100: #f4f4f8;
|
|
--gray-200: #e2e2ea;
|
|
--gray-300: #d1d1dd;
|
|
--gray-800: #1f2330;
|
|
--white: #ffffff;
|
|
--green: #16a34a;
|
|
--blue: #2563eb;
|
|
--danger: #dc2626;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background-color: #eef2ff;
|
|
color: #1f232e;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
|
|
.main {
|
|
padding: 30px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.header h2 {
|
|
font-size: 32px;
|
|
margin: 0;
|
|
}
|
|
|
|
.header .status {
|
|
background: var(--white);
|
|
border-radius: 16px;
|
|
padding: 18px 24px;
|
|
box-shadow: 0 20px 50px rgba(15, 23, 42, .05);
|
|
min-width: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.header .status span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header .status strong {
|
|
color: #111827;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
padding: 22px;
|
|
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.card small {
|
|
display: block;
|
|
color: #6b7280;
|
|
margin-bottom: 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.card strong {
|
|
font-size: 24px;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.card .badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
background: #d1fae5;
|
|
color: #166534;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.panel {
|
|
background: var(--white);
|
|
border-radius: 24px;
|
|
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.05);
|
|
padding: 28px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.panel-header h3 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.button-primary {
|
|
border: none;
|
|
border-radius: 14px;
|
|
padding: 10px 18px;
|
|
color: var(--white);
|
|
background: var(--blue);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 700px;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 14px 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #edf2ff;
|
|
color: #334155;
|
|
font-size: 14px;
|
|
}
|
|
|
|
th {
|
|
color: #667085;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.table-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 999px;
|
|
background: #c7d2fe;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--purple);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag-admin { background: #dcfce7; color: #166534; }
|
|
.tag-user { background: #f0f9ff; color: #0c4a6e; }
|
|
.tag-active { background: #ecfccb; color: #365314; }
|
|
.tag-inactive { background: #fee2e7; color: #9d174d; }
|
|
|
|
.summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.summary-card {
|
|
background: #f8fafc;
|
|
border-radius: 18px;
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.summary-card span {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout">
|
|
@include('admin.sidebar')
|
|
|
|
<main class="main">
|
|
<div class="header">
|
|
<div>
|
|
<p style="margin:0; color:#6b7280; font-weight:600; letter-spacing:0.15em; text-transform:uppercase;">Admin Dashboard</p>
|
|
<h2>Hai, {{ Auth::guard('admin')->check() ? Auth::guard('admin')->user()->username : 'Admin' }}</h2>
|
|
<p style="color:#475569; max-width: 640px; line-height:1.7;">Kelola pengguna, produk, kategori, dan transaksi dengan tampilan yang simpel dan mudah digunakan.</p>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<span><strong>{{ now()->format('l, j F Y') }}</strong></span>
|
|
<span>Status: <strong>Online</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<small>Total User</small>
|
|
<strong>6</strong>
|
|
<span class="badge">User Aktif</span>
|
|
</div>
|
|
<div class="card">
|
|
<small>Total Kategori</small>
|
|
<strong>4</strong>
|
|
<span class="badge">Kategori Tersedia</span>
|
|
</div>
|
|
<div class="card">
|
|
<small>Transaksi Hari Ini</small>
|
|
<strong>0</strong>
|
|
<span class="badge">Belum ada transaksi</span>
|
|
</div>
|
|
<div class="card">
|
|
<small>User Biasa</small>
|
|
<strong>4</strong>
|
|
<span class="badge">Pengguna Biasa</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="user">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h3>Manajemen User</h3>
|
|
<p style="margin:6px 0 0; color:#6b7280;">Kelola data pengguna dan peran mereka di sistem.</p>
|
|
</div>
|
|
<button class="button-primary">Tambah User</button>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Data User</th>
|
|
<th>Nama Lengkap</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="table-avatar"><span class="avatar">A</span> admin@example.com</td>
|
|
<td>Administrator</td>
|
|
<td><span class="tag tag-admin">Admin</span></td>
|
|
<td><span class="tag tag-active">Aktif</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="table-avatar"><span class="avatar">U</span> user1@example.com</td>
|
|
<td>User Satu</td>
|
|
<td><span class="tag tag-user">User</span></td>
|
|
<td><span class="tag tag-active">Aktif</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="table-avatar"><span class="avatar">Z</span> zaka@gmail.com</td>
|
|
<td>Zaka</td>
|
|
<td><span class="tag tag-user">User</span></td>
|
|
<td><span class="tag tag-active">Aktif</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="table-avatar"><span class="avatar">I</span> ifan@gmail.com</td>
|
|
<td>Ifan</td>
|
|
<td><span class="tag tag-admin">Admin</span></td>
|
|
<td><span class="tag tag-active">Aktif</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="produk">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h3>Manajemen Kategori</h3>
|
|
<p style="margin:6px 0 0; color:#6b7280;">Daftar kategori produk dan detail yang tersedia.</p>
|
|
</div>
|
|
<button class="button-primary">Tambahkan Kategori</button>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Foto</th>
|
|
<th>Nama Kategori</th>
|
|
<th>Harga</th>
|
|
<th>Tanggal</th>
|
|
<th>Deskripsi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>-</td>
|
|
<td>Sepatu Bola</td>
|
|
<td>Rp 400.000</td>
|
|
<td>12/04/2026</td>
|
|
<td>Kategori sepatu bola dengan desain modern.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>-</td>
|
|
<td>Sepatu Futsal</td>
|
|
<td>Rp 350.000</td>
|
|
<td>12/04/2026</td>
|
|
<td>Kategori sepatu futsal untuk permainan dalam ruangan.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>-</td>
|
|
<td>Sepatu Basket</td>
|
|
<td>Rp 1.000.000</td>
|
|
<td>12/04/2026</td>
|
|
<td>Kategori sepatu basket untuk performa maksimal.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>-</td>
|
|
<td>Kasur Orbital</td>
|
|
<td>Rp 650.000</td>
|
|
<td>12/04/2026</td>
|
|
<td>Kategori kasur nyaman untuk tidur berkualitas.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary">
|
|
<div class="summary-card">
|
|
<strong>4</strong>
|
|
<span>Total Kategori</span>
|
|
</div>
|
|
<div class="summary-card">
|
|
<strong>4</strong>
|
|
<span>Kategori Aktif</span>
|
|
</div>
|
|
<div class="summary-card">
|
|
<strong>0</strong>
|
|
<span>Kategori tanpa gambar</span>
|
|
</div>
|
|
<div class="summary-card">
|
|
<strong>4</strong>
|
|
<span>Kategori Tersedia</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|