214 lines
11 KiB
PHP
214 lines
11 KiB
PHP
@extends('layouts.admin')
|
|
@section('styles')
|
|
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/vendors/flatpickr/flatpickr.min.css') }}">
|
|
@endsection
|
|
@section('app')
|
|
<div class="container-fluid">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<div class="flatpicker-calender">
|
|
<input name="start_date" class="form-control human-friendly" id="start_date" type="date"
|
|
value="{{ $startDate ?? '2024-01-01' }}">
|
|
</div>
|
|
<span class="input-group-text">To</span>
|
|
<div class="flatpicker-calender">
|
|
<input name="end_date" class="form-control human-friendly" id="end_date" type="date"
|
|
value="{{ $endDate ?? now() }}">
|
|
</div>
|
|
<button class="btn btn-primary" id="filter-button">Filter</button>
|
|
</div>
|
|
</div>
|
|
<div class="row widget-grid">
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card small-widget">
|
|
<div class="card-body primary">
|
|
<span class="f-light">Total Aset</span>
|
|
<div class="d-flex align-items-end gap-1">
|
|
<h4 id="total-asset">{{ formatToRupiah($totalAsset) }}</h4>
|
|
</div>
|
|
<div class="bg-gradient">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<ul class="user-list">
|
|
<li>
|
|
<div class="user-icon primary">
|
|
<div class="user-box">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="-3 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-user-plus font-primary">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="8.5" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1" id="total-barber">{{ $totalBarber }}</h5>
|
|
<span class="font-primary d-flex align-items-center">
|
|
<i class="icon-arrow-up icon-rotate me-1"> </i>
|
|
<span class="f-w-500">Barber</span>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="user-icon success">
|
|
<div class="user-box">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="-3 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-user-minus font-success">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="8.5" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1" id="total-user">{{ $totalUser }}</h5>
|
|
<span class="font-danger d-flex align-items-center">
|
|
<i class="icon-arrow-down icon-rotate me-1"></i>
|
|
<span class="f-w-500">Semua</span>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@if ($topBarber && $topBarber->transactions_sum_total)
|
|
<div class="card 0-hidden">
|
|
<div class="card-body balance-widget">
|
|
<span class="f-w-500 f-light">Top Barber</span>
|
|
<h4 class="mb-3 mt-1 f-w-500 mb-0 f-22">
|
|
<span class="counter"
|
|
id="top-barber-name">{{ $topBarber->biography->full_name ?? '-deleted-' }}</span>
|
|
</h4>
|
|
<span class=" btn-hover-effect f-w-500"
|
|
id="top-barber-total">{{ formatToRupiah($topBarber->transactions_sum_total ?? 0) }}</span>
|
|
<div class="mobile-right-img">
|
|
<img class="mobile-img" src="{{ asset('assets/admin/images/crown.png') }}"
|
|
alt="mobile with coin">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header card-no-border">
|
|
<h5>Grafik Keuangan</h5>
|
|
</div>
|
|
<div class="card-body pt-0">
|
|
<div class="row m-0 overall-card">
|
|
<div class="chart-right">
|
|
<div class="card-body p-0">
|
|
<p>Keuntungan : <span
|
|
id="net-income">{{ formatToRupiah($totalIncome - $totalExpense) }}</span></p>
|
|
<div class="current-sale-container">
|
|
<canvas id="incomeExpenseChart" width="400" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header card-no-border">
|
|
<h5>Top Layanan</h5>
|
|
</div>
|
|
<div class="card-body pt-0">
|
|
<div class="row m-0 overall-card">
|
|
<div class="chart-right">
|
|
<div class="card-body p-0">
|
|
<div class="current-sale-container">
|
|
<canvas id="topServiceChart" width="400" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header card-no-border">
|
|
<h5>Metode Pembayaran</h5>
|
|
</div>
|
|
<div class="card-body pt-0">
|
|
<div class="row m-0 overall-card">
|
|
<div class="chart-right">
|
|
<div class="card-body p-0">
|
|
<div class="current-sale-container">
|
|
<canvas id="paymentMethodChart" width="400" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header card-no-border">
|
|
<h5>Pendapatan By Barber</h5>
|
|
</div>
|
|
<div class="card-body pt-0">
|
|
<div class="row m-0 overall-card">
|
|
<div class="chart-right">
|
|
<div class="card-body p-0">
|
|
<div class="current-sale-container">
|
|
<canvas id="incomeByBarberChart" width="400" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header card-no-border">
|
|
<h5>Transaksi By Barber</h5>
|
|
</div>
|
|
<div class="card-body pt-0">
|
|
<div class="row m-0 overall-card">
|
|
<div class="chart-right">
|
|
<div class="card-body p-0">
|
|
<div class="current-sale-container">
|
|
<canvas id="transactionByBarberChart" width="400" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('beforeScripts')
|
|
<script src="{{ asset('assets/admin/js/flat-pickr/flatpickr.js?ver=1.0.0') }}"></script>
|
|
<script src="{{ asset('assets/admin/js/flat-pickr/custom-flatpickr.js?ver=1.0.0') }}"></script>
|
|
@endsection
|
|
@section('afterScripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js"></script>
|
|
<script>
|
|
const totalIncome = @json($totalIncome);
|
|
const totalExpense = @json($totalExpense);
|
|
const topService = @json($topService);
|
|
const paymentMethod = @json($paymentMethod);
|
|
const incomeByBarber = @json($incomeByBarber);
|
|
const transactionByBarber = @json($transactionByBarber);
|
|
</script>
|
|
<script src="{{ asset('assets/admin/js/random-color.js?ver=1.0.0') }}"></script>
|
|
<script src="{{ asset('assets/admin/js/chart/finance.js?ver=1.0.0') }}"></script>
|
|
<script src="{{ asset('assets/admin/js/chart/payment-method.js?ver=1.0.0') }}"></script>
|
|
<script src="{{ asset('assets/admin/js/chart/top-service.js?ver=1.0.0') }}"></script>
|
|
<script src="{{ asset('assets/admin/js/chart/income-by-barber.js?ver=1.0.0') }}"></script>
|
|
<script src="{{ asset('assets/admin/js/chart/transaction-by-barber.js?ver=1.0.0') }}"></script>
|
|
<script src="{{ asset('assets/admin/js/filter.js?ver=1.0.0') }}"></script>
|
|
@endsection
|