318 lines
16 KiB
PHP
318 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>Ellia Cellular</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="{{ asset('assets/img/logo_ellia_cellular.jpeg') }}" rel="icon">
|
|
<link href="{{ asset('assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
|
|
rel="stylesheet">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ======= Header ======= -->
|
|
@include('header')
|
|
<!-- ======= Sidebar ======= -->
|
|
@include('sidebar')
|
|
|
|
<main id="main" class="main">
|
|
|
|
<!-- Page Title & Filter -->
|
|
<div class="pagetitle d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1>Dashboard</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
|
|
<li class="breadcrumb-item active">Dashboard</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<form method="GET" action="{{ route('dashboard') }}">
|
|
<div class="d-flex gap-2 justify-content-end mb-3">
|
|
<!-- Filter Bulan -->
|
|
<select class="form-select w-auto bg-white" name="bulan" onchange="this.form.submit()">
|
|
@php
|
|
$bulanSekarang = request('bulan', date('n'));
|
|
@endphp
|
|
<option disabled {{ is_null(request('bulan')) ? 'selected' : '' }}>Pilih Bulan</option>
|
|
@foreach ([
|
|
1 => 'Januari',
|
|
2 => 'Februari',
|
|
3 => 'Maret',
|
|
4 => 'April',
|
|
5 => 'Mei',
|
|
6 => 'Juni',
|
|
7 => 'Juli',
|
|
8 => 'Agustus',
|
|
9 => 'September',
|
|
10 => 'Oktober',
|
|
11 => 'November',
|
|
12 => 'Desember',
|
|
] as $num => $name)
|
|
<option value="{{ $num }}" {{ $bulanSekarang == $num ? 'selected' : '' }}>
|
|
{{ $name }}</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<!-- Filter Tahun -->
|
|
<select class="form-select w-auto bg-white" name="tahun" onchange="this.form.submit()">
|
|
@php
|
|
$tahunSekarang = request('tahun', date('Y'));
|
|
@endphp
|
|
<option disabled {{ is_null(request('tahun')) ? 'selected' : '' }}>Pilih Tahun</option>
|
|
@for ($y = 2024; $y <= now()->year; $y++)
|
|
<option value="{{ $y }}" {{ $tahunSekarang == $y ? 'selected' : '' }}>
|
|
{{ $y }}</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div><!-- End Page Title -->
|
|
|
|
|
|
<section class="section dashboard">
|
|
<div class="row">
|
|
|
|
<!-- 3 Card Statistik -->
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<!-- Total Pendapatan -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card info-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Pendapatan</h5>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-currency-dollar"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6>Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</h6>
|
|
<span class="text-success small pt-1 fw-bold">Rp
|
|
{{ number_format($rataRataPerHari, 0, ',', '.') }} Rata-Rata
|
|
Perhari</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Transaksi -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card info-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Transaksi</h5>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-receipt"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6>{{ $totalTransaksi }} Transaksi</h6>
|
|
<span class="text-success small pt-1 fw-bold">
|
|
{{ number_format($transaksiRataRataPerHari, 0, ',', '.') }} Rata-Rata
|
|
Per Hari
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Jumlah Produk -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card info-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Jumlah Produk</h5>
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
|
<i class="bi bi-box-seam"></i>
|
|
</div>
|
|
<div class="ps-3">
|
|
<h6>{{ $totalProduk }} Produk</h6>
|
|
<span class="text-success small pt-1 fw-bold">
|
|
{{ $produkBaru }} Produk Baru
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafik Penjualan & Penjualan Tertinggi -->
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<!-- Grafik Penjualan -->
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Grafik Penjualan</h5>
|
|
<div id="salesChart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const salesData = @json($pendapatanPerBulan); // Ambil dari controller
|
|
|
|
new ApexCharts(document.querySelector("#salesChart"), {
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Penjualan',
|
|
data: salesData
|
|
}],
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt',
|
|
'Nov', 'Des'
|
|
],
|
|
labels: {
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 400000000,
|
|
labels: {
|
|
formatter: function(value) {
|
|
if (value >= 1000000) return (value / 1000000) + ' jt';
|
|
if (value >= 1000) return (value / 1000) + ' rb';
|
|
return value;
|
|
},
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 4,
|
|
columnWidth: '40%',
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
fill: {
|
|
opacity: 0.7,
|
|
colors: ['#cbd5e1']
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function(val) {
|
|
return "Rp " + val.toLocaleString("id-ID");
|
|
}
|
|
}
|
|
}
|
|
}).render();
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Penjualan Tertinggi -->
|
|
<div class="col-lg-4">
|
|
<div class="card top-selling">
|
|
<div class="card-body pb-0">
|
|
<!-- Header: Judul + Filter -->
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="card-title mb-0">Penjualan Tertinggi</h5>
|
|
</div>
|
|
|
|
<!-- Tabel Produk -->
|
|
<table class="table table-borderless">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Produk</th>
|
|
<th scope="col">Jumlah</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($penjualanTertinggi as $item)
|
|
<tr>
|
|
<td><a class="text-black">{{ $item->nama_produk }}</a></td>
|
|
<td>{{ $item->total_terjual }} Terjual</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="2">Tidak ada data.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
</main><!-- End #main -->
|
|
|
|
<!-- ======= Footer ======= -->
|
|
@include('footer')
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
|
|
class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/echarts/echarts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/quill/quill.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="{{ asset('assets/js/main.js') }}"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|