feat: Implement role-based dashboard content visibility and consolidate view permissions under 'Analisys'.
This commit is contained in:
Yoga Pangestu
parent
1eba57cb6b
commit
9619912f2f
@ -12,6 +12,7 @@
|
||||
use App\Models\Order;
|
||||
use App\Models\Payroll;
|
||||
use BackedEnum;
|
||||
use BezhanSalleh\FilamentShield\Traits\HasPageShield;
|
||||
use Carbon\Carbon;
|
||||
use Filament\Forms\Components\DatePicker;
|
||||
use Filament\Forms\Components\Select;
|
||||
@ -25,7 +26,7 @@
|
||||
|
||||
class Analisys extends Page implements HasForms
|
||||
{
|
||||
use InteractsWithForms;
|
||||
use HasPageShield, InteractsWithForms;
|
||||
|
||||
public ?array $data = [];
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Filament\Pages;
|
||||
|
||||
use App\Enums\RoleEnum;
|
||||
use App\Models\Customer;
|
||||
use App\Models\DelayedGood;
|
||||
use App\Models\EggCollectionItem;
|
||||
@ -10,6 +11,7 @@
|
||||
use App\Models\Order;
|
||||
use App\Models\Payroll;
|
||||
use Filament\Pages\Dashboard as BaseDashboard;
|
||||
use Filament\Widgets\AccountWidget;
|
||||
|
||||
class Dashboard extends BaseDashboard
|
||||
{
|
||||
@ -17,6 +19,13 @@ class Dashboard extends BaseDashboard
|
||||
|
||||
protected string $view = 'filament.pages.dashboard';
|
||||
|
||||
public function getHeaderWidgets(): array
|
||||
{
|
||||
return [
|
||||
AccountWidget::class,
|
||||
];
|
||||
}
|
||||
|
||||
public function getViewData(): array
|
||||
{
|
||||
$formatNumber = fn ($val) => number_format((float) $val, $val == floor($val) ? 0 : 2, ',', '.');
|
||||
@ -118,6 +127,7 @@ public function getViewData(): array
|
||||
->get();
|
||||
|
||||
return [
|
||||
'isAdministrator' => auth()->user()->hasRole(RoleEnum::ADMINISTRATOR->value),
|
||||
'mainStats' => $mainStats,
|
||||
'totalEggsByUnit' => $totalEggsByUnit,
|
||||
'totalDelayedByUnit' => $delayedStatsByUnit,
|
||||
|
||||
@ -22,11 +22,7 @@ public function run(): void
|
||||
"name": "Developer",
|
||||
"guard_name": "web",
|
||||
"permissions" : [
|
||||
"View:StatsOverview",
|
||||
"View:EggProductionChart",
|
||||
"View:OrderTrendChart",
|
||||
"View:RevenueExpenseChart",
|
||||
"View:TopCustomersChart",
|
||||
"View:Analisys",
|
||||
|
||||
"ViewAny:Customer",
|
||||
"View:Customer",
|
||||
@ -189,11 +185,7 @@ public function run(): void
|
||||
"name": "Pemilik",
|
||||
"guard_name": "web",
|
||||
"permissions" : [
|
||||
"View:StatsOverview",
|
||||
"View:EggProductionChart",
|
||||
"View:OrderTrendChart",
|
||||
"View:RevenueExpenseChart",
|
||||
"View:TopCustomersChart",
|
||||
"View:Analisys",
|
||||
|
||||
"ViewAny:Customer",
|
||||
"View:Customer",
|
||||
|
||||
@ -1,220 +1,242 @@
|
||||
<x-filament-panels::page>
|
||||
<div class="space-y-6 pb-12">
|
||||
{{-- Main Stats Grid --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
|
||||
@foreach ($mainStats as $stat)
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-4 transition hover:shadow-md border-b-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span
|
||||
class="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider">{{ $stat['label'] }}</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
@if ($stat['prefix'])
|
||||
<span
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500">{{ $stat['prefix'] }}</span>
|
||||
@endif
|
||||
<span class="text-xl font-bold text-gray-900 dark:text-white">{{ $stat['value'] }}</span>
|
||||
@if (!$isAdministrator)
|
||||
|
||||
<div class="space-y-6 pb-12">
|
||||
{{-- Main Stats Grid --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
|
||||
@foreach ($mainStats as $stat)
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-4 transition hover:shadow-md border-b-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span
|
||||
class="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider">{{ $stat['label'] }}</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
@if ($stat['prefix'])
|
||||
<span
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500">{{ $stat['prefix'] }}</span>
|
||||
@endif
|
||||
<span class="text-xl font-bold text-gray-900 dark:text-white">{{ $stat['value'] }}</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-[9px] text-gray-900 dark:text-gray-600 uppercase">{{ $stat['desc'] }}</span>
|
||||
</div>
|
||||
<span class="text-[9px] text-gray-900 dark:text-gray-600 uppercase">{{ $stat['desc'] }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Distribution Row --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-6 flex items-center gap-2">
|
||||
<x-heroicon-o-arrows-right-left class="w-4 h-4 text-primary-500" />
|
||||
Sumber Pemasukan
|
||||
</h3>
|
||||
<div class="h-64 flex flex-col items-center">
|
||||
<canvas id="revenueSplitChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Distribution Row --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-6 flex items-center gap-2">
|
||||
<x-heroicon-o-arrows-right-left class="w-4 h-4 text-primary-500" />
|
||||
Sumber Pemasukan
|
||||
</h3>
|
||||
<div class="h-64 flex flex-col items-center">
|
||||
<canvas id="revenueSplitChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-6 flex items-center gap-2">
|
||||
<x-heroicon-o-chart-pie class="w-4 h-4 text-primary-500" />
|
||||
Alokasi Pengeluaran
|
||||
</h3>
|
||||
<div class="h-64 flex flex-col items-center">
|
||||
<canvas id="expenseChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-6 flex items-center gap-2">
|
||||
<x-heroicon-o-shopping-bag class="w-4 h-4 text-primary-500" />
|
||||
Penjualan per Satuan
|
||||
</h3>
|
||||
<div class="h-64 flex flex-col items-center">
|
||||
<canvas id="salesUnitChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Units Breakdown --}}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{{-- Production --}}
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
|
||||
<div
|
||||
class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50 flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300">Produksi (Unit)</h3>
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Hari Ini</span>
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-6 flex items-center gap-2">
|
||||
<x-heroicon-o-chart-pie class="w-4 h-4 text-primary-500" />
|
||||
Alokasi Pengeluaran
|
||||
</h3>
|
||||
<div class="h-64 flex flex-col items-center">
|
||||
<canvas id="expenseChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
@forelse($totalEggsByUnit as $item)
|
||||
<div
|
||||
class="px-5 py-3 flex justify-between items-center transition hover:bg-gray-50 dark:hover:bg-gray-800/40">
|
||||
<span
|
||||
class="text-sm text-gray-600 dark:text-gray-400 font-medium">{{ $item['unit_name'] }}</span>
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-6 flex items-center gap-2">
|
||||
<x-heroicon-o-shopping-bag class="w-4 h-4 text-primary-500" />
|
||||
Penjualan per Satuan
|
||||
</h3>
|
||||
<div class="h-64 flex flex-col items-center">
|
||||
<canvas id="salesUnitChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Units Breakdown --}}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{{-- Production --}}
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
|
||||
<div
|
||||
class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50 flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300">Produksi (Unit)</h3>
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Hari Ini</span>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
@forelse($totalEggsByUnit as $item)
|
||||
<div
|
||||
class="px-5 py-3 flex justify-between items-center transition hover:bg-gray-50 dark:hover:bg-gray-800/40">
|
||||
<span
|
||||
class="text-sm text-gray-600 dark:text-gray-400 font-medium">{{ $item['unit_name'] }}</span>
|
||||
<div class="flex gap-4">
|
||||
<div class="text-right">
|
||||
<span class="text-[10px] text-gray-400 font-bold uppercase block">Bagus</span>
|
||||
<span
|
||||
class="text-sm font-bold text-emerald-600 dark:text-emerald-400">{{ $item['total_good'] }}</span>
|
||||
</div>
|
||||
<div class="text-right border-l border-gray-100 dark:border-gray-800 pl-4">
|
||||
<span class="text-[10px] text-gray-400 font-bold uppercase block">Pecah</span>
|
||||
<span
|
||||
class="text-sm font-bold text-rose-600 dark:text-rose-400">{{ $item['total_broken'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center text-gray-400 text-sm italic">Belum ada data produksi
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Delayed --}}
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
|
||||
<div
|
||||
class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50 flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300">Tertunda (Unit)</h3>
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Hari Ini</span>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
@forelse($totalDelayedByUnit as $item)
|
||||
<div
|
||||
class="px-5 py-3 flex justify-between items-center transition hover:bg-gray-50 dark:hover:bg-gray-800/40">
|
||||
<span
|
||||
class="text-sm text-gray-600 dark:text-gray-400 font-medium">{{ $item['unit_name'] }}</span>
|
||||
<span
|
||||
class="text-sm font-bold text-gray-900 dark:text-white">{{ $item['total'] }}</span>
|
||||
</div>
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center text-gray-400 text-sm italic">Tidak ada barang tertunda
|
||||
hari
|
||||
ini</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{{-- Top Customers Today --}}
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden flex flex-col">
|
||||
<div
|
||||
class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50 flex items-center gap-2">
|
||||
<x-heroicon-o-star class="w-4 h-4 text-amber-500" />
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300">Top Pelanggan Hari Ini</h3>
|
||||
</div>
|
||||
<div class="flex-1 divide-y divide-gray-100 dark:divide-gray-800">
|
||||
@forelse ($topCustomers as $customer)
|
||||
<div
|
||||
class="px-5 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/40 transition">
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ $customer->name }}</span>
|
||||
<span
|
||||
class="text-xs text-gray-400 tracking-tight">{{ $customer->phone_number ?? 'Telp tidak ada' }}</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[10px] text-gray-400 font-bold uppercase block">Bagus</span>
|
||||
<span
|
||||
class="text-sm font-bold text-emerald-600 dark:text-emerald-400">{{ $item['total_good'] }}</span>
|
||||
</div>
|
||||
<div class="text-right border-l border-gray-100 dark:border-gray-800 pl-4">
|
||||
<span class="text-[10px] text-gray-400 font-bold uppercase block">Pecah</span>
|
||||
<span
|
||||
class="text-sm font-bold text-rose-600 dark:text-rose-400">{{ $item['total_broken'] }}</span>
|
||||
class="text-[10px] font-semibold text-gray-400 uppercase block leading-none mb-1">Transaksi</span>
|
||||
<span class="text-sm font-black text-primary-600">Rp
|
||||
{{ $formatNumber($customer->total_spent) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center text-gray-400 text-sm italic">Belum ada data produksi</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Delayed --}}
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
|
||||
<div
|
||||
class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50 flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300">Tertunda (Unit)</h3>
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Hari Ini</span>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
@forelse($totalDelayedByUnit as $item)
|
||||
<div
|
||||
class="px-5 py-3 flex justify-between items-center transition hover:bg-gray-50 dark:hover:bg-gray-800/40">
|
||||
<span
|
||||
class="text-sm text-gray-600 dark:text-gray-400 font-medium">{{ $item['unit_name'] }}</span>
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">{{ $item['total'] }}</span>
|
||||
</div>
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center text-gray-400 text-sm italic">Tidak ada barang tertunda hari
|
||||
ini</div>
|
||||
@endforelse
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center text-gray-400 text-sm italic">Belum ada transaksi hari
|
||||
ini
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{{-- Top Customers Today --}}
|
||||
<div
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden flex flex-col">
|
||||
<div
|
||||
class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50 flex items-center gap-2">
|
||||
<x-heroicon-o-star class="w-4 h-4 text-amber-500" />
|
||||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300">Top Pelanggan Hari Ini</h3>
|
||||
</div>
|
||||
<div class="flex-1 divide-y divide-gray-100 dark:divide-gray-800">
|
||||
@forelse ($topCustomers as $customer)
|
||||
<div
|
||||
class="px-5 py-4 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/40 transition">
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ $customer->name }}</span>
|
||||
<span
|
||||
class="text-xs text-gray-400 tracking-tight">{{ $customer->phone_number ?? 'Telp tidak ada' }}</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span
|
||||
class="text-[10px] font-semibold text-gray-400 uppercase block leading-none mb-1">Transaksi</span>
|
||||
<span class="text-sm font-black text-primary-600">Rp
|
||||
{{ $formatNumber($customer->total_spent) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center text-gray-400 text-sm italic">Belum ada transaksi hari ini
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
boxWidth: 10,
|
||||
font: {
|
||||
size: 10
|
||||
@if (!$isAdministrator)
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
boxWidth: 10,
|
||||
font: {
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Revenue Split Chart
|
||||
const revenueSplitCtx = document.getElementById('revenueSplitChart');
|
||||
if (revenueSplitCtx) {
|
||||
new Chart(revenueSplitCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: {!! json_encode($revenueSplit['labels']) !!},
|
||||
datasets: [{
|
||||
data: {!! json_encode($revenueSplit['data']) !!},
|
||||
backgroundColor: ['#6366f1', '#94a3b8'],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
...chartOptions,
|
||||
cutout: '70%'
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Revenue Split Chart
|
||||
new Chart(document.getElementById('revenueSplitChart'), {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: {!! json_encode($revenueSplit['labels']) !!},
|
||||
datasets: [{
|
||||
data: {!! json_encode($revenueSplit['data']) !!},
|
||||
backgroundColor: ['#6366f1', '#94a3b8'],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
...chartOptions,
|
||||
cutout: '70%'
|
||||
// Expense Category Chart
|
||||
const expenseCtx = document.getElementById('expenseChart');
|
||||
if (expenseCtx) {
|
||||
new Chart(expenseCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: {!! json_encode($expenseDistribution['labels']) !!},
|
||||
datasets: [{
|
||||
data: {!! json_encode($expenseDistribution['data']) !!},
|
||||
backgroundColor: ['#f59e0b', '#64748b'],
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
...chartOptions,
|
||||
cutout: '70%'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Expense Category Chart
|
||||
new Chart(document.getElementById('expenseChart'), {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: {!! json_encode($expenseDistribution['labels']) !!},
|
||||
datasets: [{
|
||||
data: {!! json_encode($expenseDistribution['data']) !!},
|
||||
backgroundColor: ['#f59e0b', '#64748b'],
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
...chartOptions,
|
||||
cutout: '70%'
|
||||
// Sales by Unit Chart
|
||||
const salesUnitCtx = document.getElementById('salesUnitChart');
|
||||
if (salesUnitCtx) {
|
||||
new Chart(salesUnitCtx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: {!! json_encode($salesByUnit['labels']) !!},
|
||||
datasets: [{
|
||||
data: {!! json_encode($salesByUnit['data']) !!},
|
||||
backgroundColor: ['#3b82f6', '#06b6d4', '#8b5cf6', '#ec4899'],
|
||||
}]
|
||||
},
|
||||
options: chartOptions
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Sales by Unit Chart
|
||||
new Chart(document.getElementById('salesUnitChart'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: {!! json_encode($salesByUnit['labels']) !!},
|
||||
datasets: [{
|
||||
data: {!! json_encode($salesByUnit['data']) !!},
|
||||
backgroundColor: ['#3b82f6', '#06b6d4', '#8b5cf6', '#ec4899'],
|
||||
}]
|
||||
},
|
||||
options: chartOptions
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
@endif
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user