534 lines
14 KiB
PHP
534 lines
14 KiB
PHP
@extends('admin.layout')
|
|
|
|
@section('title', 'Admin Dashboard')
|
|
|
|
@section('content')
|
|
@php
|
|
$availableCars = $categories->where('status', 'available')->count();
|
|
$soldCars = $categories->where('status', 'sold')->count();
|
|
$pendingTransactions = $transactions->where('payment_status', 'pending')->count();
|
|
$paidTransactions = $transactions->where('payment_status', 'paid')->count();
|
|
$todayTransactions = $transactions->where('created_at', '>=', today())->count();
|
|
$totalSales = $transactions->where('payment_status', 'paid')->sum('total_amount');
|
|
@endphp
|
|
|
|
<style>
|
|
.dashboard-hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
margin-bottom: 22px;
|
|
padding: 30px;
|
|
border-radius: 24px;
|
|
background: #0f172a;
|
|
color: #ffffff;
|
|
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
|
|
}
|
|
|
|
.dashboard-hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -80px;
|
|
top: -90px;
|
|
width: 280px;
|
|
height: 280px;
|
|
border-radius: 50%;
|
|
background: rgba(34, 197, 94, 0.18);
|
|
}
|
|
|
|
.dashboard-hero > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dashboard-hero .eyebrow {
|
|
margin: 0 0 8px;
|
|
color: #93c5fd;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dashboard-hero h2 {
|
|
margin: 0;
|
|
color: #ffffff;
|
|
font-size: 34px;
|
|
}
|
|
|
|
.dashboard-hero p {
|
|
margin: 8px 0 0;
|
|
color: #cbd5e1;
|
|
max-width: 660px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.dashboard-hero .badge {
|
|
background: rgba(34, 197, 94, 0.16);
|
|
color: #bbf7d0;
|
|
border: 1px solid rgba(187, 247, 208, 0.24);
|
|
height: fit-content;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.quick-actions a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 42px;
|
|
padding: 10px 16px;
|
|
border-radius: 14px;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.quick-actions a:first-child {
|
|
background: #2563eb;
|
|
border-color: #2563eb;
|
|
}
|
|
|
|
.dashboard-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
padding: 6px;
|
|
background: #ffffff;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 18px;
|
|
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.dashboard-tab {
|
|
padding: 11px 16px;
|
|
border: none;
|
|
border-radius: 13px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 0.92rem;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-tab.active {
|
|
color: #ffffff;
|
|
background: #2563eb;
|
|
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(5px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.metric-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 148px;
|
|
padding: 20px;
|
|
border-radius: 22px;
|
|
background: #ffffff;
|
|
border: 1px solid #e5e7eb;
|
|
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.metric-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 18px;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 14px;
|
|
background: #eff6ff;
|
|
}
|
|
|
|
.metric-card small {
|
|
display: block;
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.metric-card strong {
|
|
display: block;
|
|
color: #0f172a;
|
|
font-size: 30px;
|
|
line-height: 1;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.metric-card span {
|
|
display: inline-flex;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
background: #f8fafc;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.metric-card.is-warning::after {
|
|
background: #fef3c7;
|
|
}
|
|
|
|
.metric-card.is-success::after {
|
|
background: #dcfce7;
|
|
}
|
|
|
|
.metric-card.is-dark {
|
|
background: #111827;
|
|
border-color: #111827;
|
|
}
|
|
|
|
.metric-card.is-dark small,
|
|
.metric-card.is-dark span {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.metric-card.is-dark strong {
|
|
color: #ffffff;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.metric-card.is-dark span {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.inventory-bars {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.inventory-row {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.inventory-row header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #334155;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.bar-track {
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: #e2e8f0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bar-fill {
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: #2563eb;
|
|
}
|
|
|
|
.bar-fill.sold {
|
|
background: #16a34a;
|
|
}
|
|
|
|
.activity-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.activity-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
background: #f8fafc;
|
|
border: 1px solid #eef2f7;
|
|
}
|
|
|
|
.activity-item strong {
|
|
display: block;
|
|
color: #0f172a;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.activity-item small {
|
|
color: #64748b;
|
|
}
|
|
|
|
.activity-price {
|
|
white-space: nowrap;
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.metric-grid,
|
|
.dashboard-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.dashboard-hero {
|
|
flex-direction: column;
|
|
padding: 22px;
|
|
}
|
|
|
|
.metric-grid,
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="dashboard-hero">
|
|
<div>
|
|
<p class="eyebrow">Admin Dashboard</p>
|
|
<h2>Hai, {{ Auth::guard('admin')->check() ? Auth::guard('admin')->user()->username : 'Admin' }}</h2>
|
|
<p>Pantau transaksi masuk, status mobil, dan data pengguna dari satu tempat yang lebih rapi.</p>
|
|
<div class="quick-actions">
|
|
<a href="{{ route('riwayat') }}">Cek Transaksi</a>
|
|
<a href="{{ route('kategori') }}">Kelola Mobil</a>
|
|
<a href="{{ route('input') }}">Input Manual</a>
|
|
</div>
|
|
</div>
|
|
<div class="badge">Online</div>
|
|
</div>
|
|
|
|
<div class="dashboard-tabs">
|
|
<button class="dashboard-tab active" data-tab="overview">Overview</button>
|
|
<button class="dashboard-tab" data-tab="users">User Management</button>
|
|
<button class="dashboard-tab" data-tab="categories">Mobil & Kategori</button>
|
|
</div>
|
|
|
|
<div id="overview" class="tab-content active">
|
|
<div class="metric-grid">
|
|
<div class="metric-card">
|
|
<small>Mobil Tersedia</small>
|
|
<strong>{{ $availableCars }}</strong>
|
|
<span>{{ $categories->count() }} total mobil</span>
|
|
</div>
|
|
<div class="metric-card is-success">
|
|
<small>Mobil Terjual</small>
|
|
<strong>{{ $soldCars }}</strong>
|
|
<span>{{ $paidTransactions }} transaksi lunas</span>
|
|
</div>
|
|
<div class="metric-card is-warning">
|
|
<small>Menunggu Konfirmasi</small>
|
|
<strong>{{ $pendingTransactions }}</strong>
|
|
<span>{{ $todayTransactions }} transaksi hari ini</span>
|
|
</div>
|
|
<div class="metric-card is-dark">
|
|
<small>Total Penjualan</small>
|
|
<strong>Rp {{ number_format($totalSales, 0, ',', '.') }}</strong>
|
|
<span>Dari transaksi lunas</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-grid">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h3>Ringkasan Stok Mobil</h3>
|
|
<p class="text-muted">Perbandingan mobil yang masih dijual dan yang sudah terjual.</p>
|
|
</div>
|
|
<a href="{{ route('kategori') }}" class="button-secondary" style="text-decoration:none;">Detail</a>
|
|
</div>
|
|
<div class="inventory-bars">
|
|
<div class="inventory-row">
|
|
<header>
|
|
<span>Tersedia</span>
|
|
<span>{{ $availableCars }}</span>
|
|
</header>
|
|
<div class="bar-track">
|
|
<div class="bar-fill" style="width: {{ $categories->count() ? ($availableCars / $categories->count()) * 100 : 0 }}%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-row">
|
|
<header>
|
|
<span>Terjual</span>
|
|
<span>{{ $soldCars }}</span>
|
|
</header>
|
|
<div class="bar-track">
|
|
<div class="bar-fill sold" style="width: {{ $categories->count() ? ($soldCars / $categories->count()) * 100 : 0 }}%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h3>Transaksi Terbaru</h3>
|
|
<p class="text-muted">Bukti transfer terbaru yang perlu dipantau admin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="activity-list">
|
|
@forelse($transactions->take(5) as $transaction)
|
|
<div class="activity-item">
|
|
<div>
|
|
<strong>{{ $transaction->customer_name }}</strong>
|
|
<small>{{ $transaction->category->name ?? 'Produk dihapus' }} - {{ $transaction->payment_status_label }}</small>
|
|
</div>
|
|
<div class="activity-price">Rp {{ number_format($transaction->total_amount, 0, ',', '.') }}</div>
|
|
</div>
|
|
@empty
|
|
<div class="activity-item">
|
|
<div>
|
|
<strong>Belum ada transaksi</strong>
|
|
<small>Transaksi baru akan muncul di sini.</small>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="users" class="tab-content">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h3>Manajemen User</h3>
|
|
<p class="text-muted">Kelola data pengguna dan peran mereka di sistem.</p>
|
|
</div>
|
|
<span class="badge">{{ $users->count() }} user</span>
|
|
</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>
|
|
@forelse($users as $user)
|
|
<tr>
|
|
<td class="table-avatar"><span class="avatar">{{ strtoupper(substr($user->username, 0, 1)) }}</span> {{ $user->email }}</td>
|
|
<td>{{ $user->username }}</td>
|
|
<td><span class="tag {{ $user->role === 'admin' ? 'tag-admin' : 'tag-user' }}">{{ ucfirst($user->role) }}</span></td>
|
|
<td><span class="tag tag-active">Aktif</span></td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" style="padding:18px 12px; text-align:center; color:#64748b;">Belum ada data user.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="categories" class="tab-content">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h3>Manajemen Kategori</h3>
|
|
<p class="text-muted">Daftar mobil yang tersedia dan status penjualannya.</p>
|
|
</div>
|
|
<a href="{{ route('kategori') }}" class="button-primary" style="text-decoration:none;">Tambah Kategori</a>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Foto</th>
|
|
<th>Nama Kategori</th>
|
|
<th>Harga</th>
|
|
<th>Status</th>
|
|
<th>Tanggal</th>
|
|
<th>Deskripsi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($categories->take(20) as $category)
|
|
<tr>
|
|
<td style="padding:8px;">
|
|
@if($category->image)
|
|
<img src="{{ $category->image_url }}" alt="{{ $category->name }}" style="width:80px; height:56px; border-radius:12px; object-fit:cover;" />
|
|
@else
|
|
<img src="{{ $category->image_url }}" alt="Gambar default {{ $category->name }}" style="width:80px; height:56px; border-radius:12px; object-fit:cover;" />
|
|
@endif
|
|
</td>
|
|
<td>{{ $category->name }}</td>
|
|
<td>Rp {{ number_format($category->price, 0, ',', '.') }}</td>
|
|
<td>
|
|
@if($category->status === 'sold')
|
|
<span class="tag tag-inactive">{{ $category->status_label }}</span>
|
|
@else
|
|
<span class="tag tag-active">{{ $category->status_label }}</span>
|
|
@endif
|
|
</td>
|
|
<td>{{ $category->created_at ? $category->created_at->format('d/m/Y') : '-' }}</td>
|
|
<td>{{ \Illuminate\Support\Str::limit($category->description, 50) }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" style="padding:18px 12px; text-align:center; color:#64748b;">Belum ada kategori.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p style="text-align:center; color:#64748b; margin-top:16px; font-size:0.9rem;">Menampilkan 20 kategori terakhir dari {{ $categories->count() }} total</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.dashboard-tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const tabName = this.getAttribute('data-tab');
|
|
|
|
document.querySelectorAll('.dashboard-tab').forEach(item => item.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
|
|
|
this.classList.add('active');
|
|
document.getElementById(tabName).classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|