273 lines
12 KiB
PHP
273 lines
12 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Dashboard Admin')
|
|
@section('page-title', 'Overview Sistem')
|
|
|
|
@section('content')
|
|
<section class="row">
|
|
<div class="col-12">
|
|
|
|
{{-- STATISTIK ATAS --}}
|
|
<div class="row">
|
|
<div class="col-6 col-lg-4 col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 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">Total Petani</h6>
|
|
<h6 class="font-extrabold mb-0">{{ $totalPetani }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-lg-4 col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 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-basket-fill"></i></div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h6 class="text-muted font-semibold">Total Produk</h6>
|
|
<h6 class="font-extrabold mb-0">{{ $totalProduk }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-4 col-md-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 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">Total Transaksi</h6>
|
|
<h6 class="font-extrabold mb-0">{{ $totalTransaksi }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- AREA GRAFIK BERSEBELAHAN --}}
|
|
<div class="row mb-4">
|
|
{{-- Kiri: Grafik Produk Terlaris --}}
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="card-title mb-0"><i class="bi bi-bar-chart-fill text-primary me-2"></i>Produk Terlaris</h5>
|
|
</div>
|
|
<div class="card-body mt-3">
|
|
<canvas id="chartTerlaris" style="max-height: 300px;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Kanan: Grafik Kestabilan Harga --}}
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="card-title mb-0"><i class="bi bi-graph-up text-success me-2"></i>Kestabilan Harga Jual Petani</h5>
|
|
</div>
|
|
<div class="card-body mt-3">
|
|
<canvas id="chartHarga" style="max-height: 300px;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TABEL TRANSAKSI TERBARU (SAMA SEPERTI SEBELUMNYA) --}}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-white border-bottom">
|
|
<h5 class="mb-0">Transaksi Terbaru di Platform</h5>
|
|
</div>
|
|
<div class="card-body mt-3">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Invoice</th>
|
|
<th>Petani / Usaha</th>
|
|
<th>Pembeli</th>
|
|
<th>Total</th>
|
|
<th>Status</th>
|
|
<th>Tanggal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($transaksiTerbaru as $trx)
|
|
<tr>
|
|
<td class="fw-bold text-primary">#{{ $trx->kode_invoice }}</td>
|
|
<td>
|
|
<div class="d-flex flex-column">
|
|
<span class="fw-bold text-dark">{{ $trx->petani->nama_lengkap ?? 'Petani Tidak Ditemukan' }}</span>
|
|
<small class="text-muted"><i class="bi bi-shop me-1"></i>{{ $trx->petani->nama_usaha ?? '-' }}</small>
|
|
</div>
|
|
</td>
|
|
<td>{{ $trx->pembeli->nama_lengkap ?? 'Guest' }}</td>
|
|
<td class="fw-bold">Rp {{ number_format($trx->total_harga, 0, ',', '.') }}</td>
|
|
<td>
|
|
@php
|
|
$badgeClass = match ($trx->status) {
|
|
'selesai' => 'bg-success',
|
|
'batal' => 'bg-danger',
|
|
'dikirim' => 'bg-primary',
|
|
'diproses' => 'bg-info',
|
|
'menunggu konfirmasi' => 'bg-warning text-dark',
|
|
default => 'bg-secondary',
|
|
};
|
|
@endphp
|
|
<span class="badge {{ $badgeClass }} rounded-pill px-3">{{ ucwords($trx->status) }}</span>
|
|
</td>
|
|
<td class="text-muted small">{{ $trx->created_at->format('d M Y') }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr><td colspan="6" class="text-center py-4 text-muted">Belum ada transaksi baru.</td></tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="text-center mt-3">
|
|
<a href="{{ route('admin.monitoring') }}" class="btn btn-sm btn-primary">Lihat Semua Data</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@section('js')
|
|
{{-- Load library Chart.js --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const labelTerlarisAsli = {!! json_encode($labelTerlaris) !!};
|
|
const dataTerlaris = {!! json_encode($dataTerlaris) !!};
|
|
|
|
const labelMultiline = labelTerlarisAsli.map(function(label) {
|
|
const words = label.split(' ');
|
|
const lines = [];
|
|
let currentLine = '';
|
|
|
|
words.forEach(word => {
|
|
if ((currentLine + word).length > 15 && currentLine !== '') {
|
|
lines.push(currentLine.trim());
|
|
currentLine = word + ' ';
|
|
} else {
|
|
currentLine += word + ' ';
|
|
}
|
|
});
|
|
lines.push(currentLine.trim());
|
|
return lines;
|
|
});
|
|
|
|
// --- GRAFIK PRODUK TERLARIS ---
|
|
const ctxTerlaris = document.getElementById('chartTerlaris').getContext('2d');
|
|
new Chart(ctxTerlaris, {
|
|
type: 'bar',
|
|
|
|
data: {
|
|
labels: labelMultiline,
|
|
datasets: [{
|
|
label: 'Total Terjual',
|
|
data: dataTerlaris,
|
|
backgroundColor: 'rgba(129, 196, 8, 0.8)',
|
|
borderColor: '#81c408',
|
|
borderWidth: 1,
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
callbacks: {
|
|
title: function(context) {
|
|
return labelTerlarisAsli[context[0].dataIndex];
|
|
},
|
|
label: function(context) {
|
|
return context.raw + ' Kg';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
maxRotation: 0,
|
|
autoSkip: false,
|
|
font: { size: 12 }
|
|
},
|
|
grid: { display: false }
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { stepSize: 1 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// --- GRAFIK KESTABILAN HARGA ---
|
|
const ctxHarga = document.getElementById('chartHarga').getContext('2d');
|
|
new Chart(ctxHarga, {
|
|
type: 'line',
|
|
data: {
|
|
labels: {!! json_encode($labelHarga) !!},
|
|
datasets: [{
|
|
label: 'Rata-rata Harga',
|
|
data: {!! json_encode($dataHarga) !!},
|
|
backgroundColor: 'rgba(54, 162, 235, 0.1)',
|
|
borderColor: '#36A2EB',
|
|
borderWidth: 2,
|
|
pointBackgroundColor: '#fff',
|
|
pointBorderColor: '#36A2EB',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 4,
|
|
tension: 0.4,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return 'Rp ' + context.raw.toLocaleString('id-ID');
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: { display: false }
|
|
},
|
|
y: {
|
|
beginAtZero: false,
|
|
ticks: {
|
|
callback: function(value) { return 'Rp ' + value.toLocaleString('id-ID'); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection |