TIF_NGANJUK_E41220737/resources/views/petani/dashboard.blade.php

157 lines
6.6 KiB
PHP

@extends('layouts.admin')
@section('title', 'Dashboard Petani')
@section('page-title', 'Overview Toko')
@section('content')
<section class="row">
<div class="col-12 col-lg-12">
{{-- ROW 1: Card Ringkasan --}}
<div class="row">
{{-- Card 1: Produk Saya --}}
<div class="col-6 col-lg-4 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4 d-flex justify-content-center align-items-center">
<div class="stats-icon purple"><i class="bi bi-people-fill"></i></div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Produk Saya</h6>
<h6 class="font-extrabold mb-0">{{ $totalProduk }}</h6>
</div>
</div>
</div>
</div>
</div>
{{-- Card 2: Pemesanan --}}
<div class="col-6 col-lg-4 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4 d-flex justify-content-center align-items-center">
<div class="stats-icon blue">
<i class="bi bi-receipt"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Pemesanan</h6>
<h6 class="font-extrabold mb-0">{{ $totalPemesanan }}</h6>
</div>
</div>
</div>
</div>
</div>
{{-- Card 3: Total Pendapatan --}}
<div class="col-6 col-lg-4 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4 d-flex justify-content-center align-items-center">
<div class="stats-icon green">
<i class="bi bi-cash"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Total Pendapatan</h6>
<h6 class="font-extrabold mb-0">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- ROW 2: Grafik Pendapatan --}}
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Grafik Pendapatan Tahun {{ date('Y') }}</h4>
</div>
<div class="card-body">
<canvas id="revenueChart" width="100%" height="30"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Selamat Datang, {{ Auth::guard('petani')->user()->nama_lengkap }}!</h4>
</div>
<div class="card-body">
<p>Kelola produk dan pantau pesanan Anda melalui menu di sebelah kiri.</p>
<a href="{{ route('petani.produk.create') }}" class="btn btn-primary">Tambah Produk Baru</a>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var ctx = document.getElementById("revenueChart").getContext('2d');
var revenueChart = new Chart(ctx, {
type: 'bar',
data: {
labels: {!! json_encode($labels) !!},
datasets: [{
label: 'Pendapatan (Rp)',
data: {!! json_encode($dataGrafik) !!},
backgroundColor: '#57ca22',
borderColor: '#4fac1d',
borderWidth: 1,
borderRadius: 5
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
return 'Rp ' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
} else {
return 'Rp ' + value;
}
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += 'Rp ' + context.parsed.y.toLocaleString('id-ID');
}
return label;
}
}
}
}
}
});
});
</script>
@endpush