292 lines
10 KiB
PHP
292 lines
10 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<style>
|
|
.admin-header {
|
|
background: linear-gradient(90deg, #9c27b0 0%, #e91e63 50%, #f44336 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-top: 20px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
.admin-header h1 {
|
|
font-weight: 700;
|
|
font-size: 2.2rem;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.admin-header h1 i {
|
|
font-size: 1.8rem;
|
|
margin-right: 15px;
|
|
}
|
|
.admin-header p {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 5px;
|
|
}
|
|
.admin-header .date-text {
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Metric Cards */
|
|
.metric-card {
|
|
border-radius: 15px;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
padding: 20px;
|
|
height: 100%;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.metric-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.metric-card .card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 20px;
|
|
}
|
|
.metric-card .card-label {
|
|
color: #616161;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
.metric-card .card-icon {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.metric-card .card-value {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
margin-bottom: 5px;
|
|
}
|
|
.metric-card .card-subtext {
|
|
font-size: 0.85rem;
|
|
color: #757575;
|
|
}
|
|
|
|
/* Theme variations */
|
|
.metric-purple { background-color: #fdf5ff; border-left: 5px solid #9c27b0; }
|
|
.metric-purple .card-icon { background-color: #f3e5f5; color: #9c27b0; }
|
|
.metric-purple .card-value { color: #7b1fa2; }
|
|
|
|
.metric-green { background-color: #f5fdf7; border-left: 5px solid #4caf50; }
|
|
.metric-green .card-icon { background-color: #e8f5e9; color: #4caf50; }
|
|
.metric-green .card-value { color: #2e7d32; }
|
|
|
|
.metric-blue { background-color: #f5faff; border-left: 5px solid #2196f3; }
|
|
.metric-blue .card-icon { background-color: #e3f2fd; color: #2196f3; }
|
|
.metric-blue .card-value { color: #1565c0; }
|
|
|
|
.metric-orange { background-color: #fffaf5; border-left: 5px solid #ff9800; }
|
|
.metric-orange .card-icon { background-color: #fff3e0; color: #ff9800; }
|
|
.metric-orange .card-value { color: #ef6c00; }
|
|
|
|
/* Chart Cards */
|
|
.chart-card {
|
|
border-radius: 15px;
|
|
border: none;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
margin-bottom: 30px;
|
|
}
|
|
.chart-card .card-header {
|
|
background: transparent;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 20px;
|
|
}
|
|
.chart-card .card-title {
|
|
font-weight: 700;
|
|
color: #4a4a4a;
|
|
font-size: 1.1rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid px-4">
|
|
<!-- Header Admin -->
|
|
<div class="admin-header shadow">
|
|
<h1><i class="fas fa-chart-bar"></i> Dashboard Admin</h1>
|
|
<p>Monitoring seluruh cabang Warkop Cak Imin</p>
|
|
<div class="date-text">{{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}</div>
|
|
</div>
|
|
|
|
<!-- Metrics Section -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
|
|
<div class="metric-card metric-purple bg-white shadow-sm">
|
|
<div class="card-top">
|
|
<span class="card-label">Total Omzet Semua Cabang</span>
|
|
<div class="card-icon"><i class="fas fa-dollar-sign"></i></div>
|
|
</div>
|
|
<div class="card-value">Rp {{ number_format($totalOmzetAll, 0, ',', '.') }}</div>
|
|
<div class="card-subtext">Hari ini</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
|
|
<div class="metric-card metric-green bg-white shadow-sm">
|
|
<div class="card-top">
|
|
<span class="card-label">Total Laba Bersih</span>
|
|
<div class="card-icon"><i class="fas fa-bolt"></i></div>
|
|
</div>
|
|
<div class="card-value">Rp {{ number_format($netProfit, 0, ',', '.') }}</div>
|
|
<div class="card-subtext">Hari ini</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
|
|
<div class="metric-card metric-blue bg-white shadow-sm">
|
|
<div class="card-top">
|
|
<span class="card-label">Jumlah Cabang</span>
|
|
<div class="card-icon"><i class="fas fa-warehouse"></i></div>
|
|
</div>
|
|
<div class="card-value">{{ $branchCount }}</div>
|
|
<div class="card-subtext">Cabang aktif</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
|
|
<div class="metric-card metric-orange bg-white shadow-sm">
|
|
<div class="card-top">
|
|
<span class="card-label">Rata-rata per Cabang</span>
|
|
<div class="card-icon"><i class="fas fa-chart-line"></i></div>
|
|
</div>
|
|
<div class="card-value">Rp {{ number_format($averageSales, 0, ',', '.') }}</div>
|
|
<div class="card-subtext">Hari ini</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="row">
|
|
<!-- Weekly Sales Line Chart -->
|
|
<div class="col-lg-7 mb-4">
|
|
<div class="card chart-card bg-white">
|
|
<div class="card-header border-0">
|
|
<h3 class="card-title">Grafik Penjualan Mingguan</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart">
|
|
<canvas id="weeklySalesChart" style="min-height: 350px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profit per Branch Bar Chart -->
|
|
<div class="col-lg-5 mb-4">
|
|
<div class="card chart-card bg-white">
|
|
<div class="card-header border-0">
|
|
<h3 class="card-title">Omzet per Cabang</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart">
|
|
<canvas id="branchProfitChart" style="min-height: 350px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Access Section (Matching standard admin style) -->
|
|
<div class="card shadow-sm border-0 mb-4" style="border-radius: 15px;">
|
|
<div class="card-header bg-white py-3 border-0">
|
|
<h5 class="mb-0 font-weight-bold">Akses Cepat Monitoring</h5>
|
|
</div>
|
|
<div class="card-body pt-0 px-4 pb-4">
|
|
<div class="d-flex flex-wrap">
|
|
|
|
<a href="/laporan/pembelian" class="btn btn-outline-info m-1 px-4 py-2" style="border-radius: 10px;"><i class="fas fa-shopping-cart mr-2"></i> Laporan Pembelian</a>
|
|
<a href="/laporan/penjualan" class="btn btn-outline-success m-1 px-4 py-2" style="border-radius: 10px;"><i class="fas fa-cash-register mr-2"></i> Laporan Penjualan</a>
|
|
<!-- Tombol Manajemen Akun dihapus -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Line Chart: Weekly Sales
|
|
var lineCtx = document.getElementById('weeklySalesChart').getContext('2d');
|
|
var lineChart = new Chart(lineCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: @json($weeklyLabels),
|
|
datasets: [
|
|
{
|
|
label: 'Cabang 1',
|
|
borderColor: '#9c27b0',
|
|
pointBackgroundColor: '#9c27b0',
|
|
fill: false,
|
|
data: @json($branch1Data),
|
|
borderWidth: 3,
|
|
tension: 0.2
|
|
},
|
|
{
|
|
label: 'Cabang 2',
|
|
borderColor: '#e91e63',
|
|
pointBackgroundColor: '#e91e63',
|
|
fill: false,
|
|
data: @json($branch2Data),
|
|
borderWidth: 3,
|
|
tension: 0.2
|
|
},
|
|
{
|
|
label: 'Cabang 3',
|
|
borderColor: '#ff9800',
|
|
pointBackgroundColor: '#ff9800',
|
|
fill: false,
|
|
data: @json($branch3Data),
|
|
borderWidth: 3,
|
|
tension: 0.2
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } },
|
|
scales: {
|
|
yAxes: [{ gridLines: { color: "#f3f3f3", borderDash: [2, 5] }, ticks: { beginAtZero: true } }],
|
|
xAxes: [{ gridLines: { display: false } }]
|
|
}
|
|
}
|
|
});
|
|
|
|
// Bar Chart: Omzet per Branch
|
|
var barCtx = document.getElementById('branchProfitChart').getContext('2d');
|
|
var barChart = new Chart(barCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Cabang 1', 'Cabang 2', 'Cabang 3'],
|
|
datasets: [
|
|
{
|
|
label: 'omzet',
|
|
backgroundColor: '#e91e63',
|
|
data: @json($branchOmzet)
|
|
},
|
|
{
|
|
label: 'laba',
|
|
backgroundColor: '#10b981',
|
|
data: @json($branchProfit)
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } },
|
|
scales: {
|
|
yAxes: [{ gridLines: { color: "#f3f3f3", borderDash: [2, 5] }, ticks: { beginAtZero: true } }],
|
|
xAxes: [{ gridLines: { display: false } }]
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|