yadiparfum/parfum
yadiparfum/parfum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add tooltips and hover effects to dashboard cards and stats for improved user experience, and include a description for the outlet statistic.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-02-12 15:11:48 +07:00
parent 6477684540
commit 3b289588f2
4 changed files with 498 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
app/Livewire/Studio/Dashboard/Analysis.php
View File

@ -83,11 +83,15 @@ class Analysis extends Component
public function mount(): void
{
$this->outlets = auth()->user()->outlets()->get()->pluck('name', 'id')->toArray();
/** @var \App\Models\User $user */
$user = auth()->user();
$this->outlets = $user->outlets()->get()->pluck('name', 'id')->toArray();
}
public function render(): View
{
/** @var \App\Models\User $user */
$user = auth()->user();
$outletIds = $this->selectedOutletIds;
$period = $this->period;
$range = $this->range;
@ -119,79 +123,90 @@ public function render(): View
[
'title' => 'Outlet',
'value' => Outlet::when($dateQuery || ($startDate && $endDate), $filterDate)->count(),
'description' => 'Total jumlah outlet atau cabang toko yang terdaftar.',
],
[
'title' => 'Pegawai',
'value' => User::whereHas('employee')
->when(! empty($outletIds), fn ($q) => $q->whereHas('outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when(! empty($outletIds), fn($q) => $q->whereHas('outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->withoutDeveloper()
->count(),
'description' => 'Jumlah karyawan aktif yang terdaftar di outlet terpilih.',
],
[
'title' => 'Tier',
'value' => Tier::when($dateQuery || ($startDate && $endDate), $filterDate)->count(),
'description' => 'Jumlah tingkatan loyalitas member (seperti Bronze, Silver, Gold).',
],
[
'title' => 'Voucher Aktif',
'value' => Voucher::when(! empty($outletIds), fn ($q) => $q->whereHas('outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
'value' => Voucher::when(! empty($outletIds), fn($q) => $q->whereHas('outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->active()
->count(),
'description' => 'Jumlah kode promo atau voucher yang masih berlaku saat ini.',
],
[
'title' => 'Member',
'value' => User::whereHas('customer')
->when(! empty($outletIds), fn ($q) => $q->whereHas('outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when(! empty($outletIds), fn($q) => $q->whereHas('outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->count(),
'description' => 'Total pelanggan yang sudah mendaftar sebagai member resmi.',
],
[
'title' => 'Customer',
'value' => Customer::whereDoesntHave('user')
->when($dateQuery || ($startDate && $endDate), $filterDate)
->count(),
'description' => 'Jumlah pelanggan umum (guest) yang pernah melakukan transaksi.',
],
[
'title' => 'Kategori',
'value' => Category::when($dateQuery || ($startDate && $endDate), $filterDate)->count(),
'description' => 'Jumlah kategori barang (seperti Parfum, Sabun, dll).',
],
[
'title' => 'Merek',
'value' => Brand::when($dateQuery || ($startDate && $endDate), $filterDate)->count(),
'description' => 'Jumlah merek parfum yang terdaftar di sistem.',
],
[
'title' => 'Parfum',
'value' => Perfume::when(! empty($outletIds), fn ($q) => $q->whereHas('outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
'value' => Perfume::when(! empty($outletIds), fn($q) => $q->whereHas('outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->count(),
'description' => 'Jumlah varian bibit parfum yang tersedia dalam katalog.',
],
[
'title' => 'Produk',
'value' => Product::when(! empty($outletIds), fn ($q) => $q->whereHas('outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
'value' => Product::when(! empty($outletIds), fn($q) => $q->whereHas('outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->count(),
'description' => 'Jumlah item produk jadi (seperti aksesoris) yang terdaftar.',
],
[
'title' => 'Botol',
'value' => Bottle::when(! empty($outletIds), fn ($q) => $q->whereHas('outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
'value' => Bottle::when(! empty($outletIds), fn($q) => $q->whereHas('outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->count(),
'description' => 'Jumlah jenis botol parfum yang tersedia.',
],
];
$orderQuery = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$orderQuery = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
$totalIncome = (clone $orderQuery)->sum('total');
$totalCogs = (clone $orderQuery)->sum('cogs');
$totalDiscount = (clone $orderQuery)->sum(DB::raw('discount + COALESCE(voucher_discount, 0)'));
$expenseQuery = Expense::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$expenseQuery = Expense::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
$totalExpense = $expenseQuery->sum('amount');
$payrollQuery = Payroll::when(! empty($outletIds), fn ($q) => $q->whereHas('user.outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
$payrollQuery = Payroll::when(! empty($outletIds), fn($q) => $q->whereHas('user.outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->paid();
$totalPayroll = $payrollQuery->sum('total_salary');
@ -200,7 +215,7 @@ public function render(): View
$netProfit = $grossProfit - $totalExpense - $totalPayroll;
$totalOrdersCount = (clone $orderQuery)->count();
$totalItemsCount = OrderItem::whereHas('order', fn ($q) => $q->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))->sum('quantity');
$totalItemsCount = OrderItem::whereHas('order', fn($q) => $q->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))->sum('quantity');
$aov = $totalOrdersCount > 0 ? $totalIncome / $totalOrdersCount : 0;
$profitMargin = $totalIncome > 0 ? ($netProfit / $totalIncome) * 100 : 0;
@ -210,7 +225,7 @@ public function render(): View
->whereNotNull('customer_id')
->groupBy('customer_id')
->get();
$repeatCustomers = $customerOrders->filter(fn ($c) => $c->count > 1)->count();
$repeatCustomers = $customerOrders->filter(fn($c) => $c->count > 1)->count();
$totalCustomers = $customerOrders->count();
$loyaltyRate = $totalCustomers > 0 ? ($repeatCustomers / $totalCustomers) * 100 : 0;
@ -218,76 +233,90 @@ public function render(): View
[
'title' => 'Average Order Value (AOV)',
'value' => formatCurrencyNumber($aov, 'Rp'),
'description' => 'Rata-rata nilai belanja pelanggan dalam satu kali checkout.',
],
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Profit Margin',
'value' => round($profitMargin, 1).'%',
'value' => round($profitMargin, 1) . '%',
'description' => 'Persentase keuntungan bersih dibandingkan dengan total pendapatan.',
] : null,
[
'title' => 'Loyalty Rate',
'value' => round($loyaltyRate, 1).'%',
'value' => round($loyaltyRate, 1) . '%',
'description' => 'Persentase pelanggan yang melakukan pembelian lebih dari satu kali.',
],
[
'title' => 'Item per Transaksi',
'value' => round($itemsPerOrder, 1),
'description' => 'Rata-rata jumlah barang yang dibeli dalam satu transaksi.',
],
[
'title' => 'Total Order',
'value' => formatCurrencyNumber($totalOrdersCount),
'description' => 'Total frekuensi transaksi atau pesanan yang masuk selama periode ini.',
],
[
'title' => 'Pendapatan',
'value' => formatCurrencyNumber($totalIncome, 'Rp'),
'description' => 'Total nominal uang yang masuk dari penjualan (Omzet).',
],
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'HPP',
'value' => formatCurrencyNumber($totalCogs, 'Rp'),
'description' => 'Total modal barang atau Harga Pokok Penjualan (HPP).',
] : null,
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Laba Kotor',
'value' => formatCurrencyNumber($grossProfit, 'Rp'),
'description' => 'Pendapatan dikurangi dengan HPP dan Diskon.',
] : null,
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Laba Bersih',
'value' => formatCurrencyNumber($netProfit, 'Rp'),
'description' => 'Laba kotor dikurangi dengan beban operasional dan gaji.',
] : null,
[
'title' => 'Diskon',
'value' => formatCurrencyNumber($totalDiscount, 'Rp'),
'description' => 'Total nilai potongan harga (diskon) yang diberikan kepada pelanggan.',
],
[
'title' => 'Voucher Terpakai',
'value' => formatCurrencyNumber(
(clone $orderQuery)->whereNotNull('voucher_id')->count()
),
'description' => 'Jumlah transaksi yang menggunakan voucher diskon selama periode ini.',
],
[
'title' => 'Parfum Terjual',
'value' => formatCurrencyNumber(
OrderItem::where('orderable_type', Perfume::class)
->whereHas('order', fn ($q) => $q->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))
->whereHas('order', fn($q) => $q->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))
->sum('quantity')
).' ml',
) . ' ml',
'description' => 'Total volume cairan parfum yang terjual dalam satuan mililiter (ml).',
],
[
'title' => 'Produk Terjual',
'value' => formatCurrencyNumber(
OrderItem::where('orderable_type', Product::class)
->whereHas('order', fn ($q) => $q->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))
->whereHas('order', fn($q) => $q->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))
->sum('quantity')
).' pcs',
) . ' pcs',
'description' => 'Total jumlah unit produk yang terjual dalam satuan pcs.',
],
[
'title' => 'Botol Terjual',
'value' => formatCurrencyNumber(
OrderItem::where('orderable_type', Bottle::class)
->whereHas('order', fn ($q) => $q->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))
->whereHas('order', fn($q) => $q->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))->when($dateQuery || ($startDate && $endDate), $filterDate))
->sum('quantity')
).' pcs',
) . ' pcs',
'description' => 'Total jumlah unit botol yang terjual dalam satuan pcs.',
],
]);
@ -295,37 +324,40 @@ public function render(): View
[
'title' => 'Beban Toko',
'value' => formatCurrencyNumber(
Expense::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
Expense::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->sum('amount'),
'Rp'
),
'description' => 'Total biaya operasional atau pengeluaran toko yang tercatat selama periode ini.',
],
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Belanja Barang',
'value' => formatCurrencyNumber(
Purchase::when($dateQuery || ($startDate && $endDate), $filterDate)
->sum('total'),
'Rp'
),
'description' => 'Total pengeluaran untuk pembelian stok barang atau inventaris selama periode ini.',
] : null,
[
'title' => 'Penggajian',
'value' => formatCurrencyNumber(
Payroll::when(! empty($outletIds), fn ($q) => $q->whereHas('user.outlets', fn ($q2) => $q2->whereIn('outlets.id', $outletIds)))
Payroll::when(! empty($outletIds), fn($q) => $q->whereHas('user.outlets', fn($q2) => $q2->whereIn('outlets.id', $outletIds)))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->paid()
->sum('total_salary'),
'Rp'
),
'description' => 'Total pengeluaran untuk gaji karyawan.',
],
]);
$topPerfumes = OrderItem::where('orderable_type', Perfume::class)
->whereHas('order', function ($q) use ($outletIds, $dateQuery, $startDate, $endDate, $filterDate) {
$q->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$q->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
})
->with('orderable')
@ -334,7 +366,7 @@ public function render(): View
->orderByDesc('total_sales_value')
->take(5)
->get()
->map(fn ($item) => [
->map(fn($item) => [
'name' => $item->orderable?->name ?? 'Unknown',
'sale_price' => formatCurrencyNumber($item->orderable?->sale_price ?? 0, 'Rp'),
'total_sold' => formatCurrencyNumber($item->total_sold),
@ -344,7 +376,7 @@ public function render(): View
$topProducts = OrderItem::where('orderable_type', Product::class)
->whereHas('order', function ($q) use ($outletIds, $dateQuery, $startDate, $endDate, $filterDate) {
$q->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$q->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
})
->with('orderable')
@ -353,7 +385,7 @@ public function render(): View
->orderByDesc('total_sales_value')
->take(5)
->get()
->map(fn ($item) => [
->map(fn($item) => [
'name' => $item->orderable?->name ?? 'Unknown',
'sale_price' => formatCurrencyNumber($item->orderable?->sale_price ?? 0, 'Rp'),
'total_sold' => formatCurrencyNumber($item->total_sold),
@ -363,7 +395,7 @@ public function render(): View
$topBottles = OrderItem::where('orderable_type', Bottle::class)
->whereHas('order', function ($q) use ($outletIds, $dateQuery, $startDate, $endDate, $filterDate) {
$q->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$q->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
})
->with('orderable')
@ -372,7 +404,7 @@ public function render(): View
->orderByDesc('total_sales_value')
->take(5)
->get()
->map(fn ($item) => [
->map(fn($item) => [
'name' => $item->orderable?->name ?? 'Unknown',
'sale_price' => formatCurrencyNumber($item->orderable?->sale_price ?? 0, 'Rp'),
'total_sold' => formatCurrencyNumber($item->total_sold),
@ -383,9 +415,9 @@ public function render(): View
// --- Chart Data Logic ---
// 1. Revenue & Profit Trend
$trendDates = collect(range(29, 0))->map(fn ($i) => now()->subDays($i)->format('Y-m-d'));
$trendDates = collect(range(29, 0))->map(fn($i) => now()->subDays($i)->format('Y-m-d'));
$ordersTrend = Order::query()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->where('created_at', '>=', now()->subDays(30)->startOfDay())
->select(DB::raw('DATE(created_at) as date'), DB::raw('SUM(total) as revenue'), DB::raw('SUM(total) - SUM(cogs) - SUM(discount) - SUM(COALESCE(voucher_discount,0)) as gross_profit'), DB::raw('count(*) as count'))
->groupBy('date')
@ -393,7 +425,7 @@ public function render(): View
->keyBy('date');
$expensesTrend = Expense::query()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->where('created_at', '>=', now()->subDays(30)->startOfDay())
->select(DB::raw('DATE(created_at) as date'), DB::raw('SUM(amount) as total_expense'))
->groupBy('date')
@ -401,9 +433,9 @@ public function render(): View
->keyBy('date');
$this->revenueTrendChart = [
'labels' => $trendDates->map(fn ($d) => Carbon::parse($d)->format('d M'))->toArray(),
'revenue' => $trendDates->map(fn ($d) => (int) ($ordersTrend->get($d)?->revenue ?? 0))->toArray(),
'profit' => $trendDates->map(fn ($d) => (int) (($ordersTrend->get($d)?->gross_profit ?? 0) - ($expensesTrend->get($d)?->total_expense ?? 0)))->toArray(),
'labels' => $trendDates->map(fn($d) => Carbon::parse($d)->format('d M'))->toArray(),
'revenue' => $trendDates->map(fn($d) => (int) ($ordersTrend->get($d)?->revenue ?? 0))->toArray(),
'profit' => $trendDates->map(fn($d) => (int) (($ordersTrend->get($d)?->gross_profit ?? 0) - ($expensesTrend->get($d)?->total_expense ?? 0)))->toArray(),
];
// 2. busiest hour
@ -416,26 +448,26 @@ public function render(): View
->keyBy('hour');
$this->hourlySalesChart = [
'labels' => collect(range(0, 23))->map(fn ($h) => str_pad($h, 2, '0', STR_PAD_LEFT).':00')->toArray(),
'data' => collect(range(0, 23))->map(fn ($h) => $hourlySales->get($h)?->count ?? 0)->toArray(),
'labels' => collect(range(0, 23))->map(fn($h) => str_pad($h, 2, '0', STR_PAD_LEFT) . ':00')->toArray(),
'data' => collect(range(0, 23))->map(fn($h) => $hourlySales->get($h)?->count ?? 0)->toArray(),
];
// 3. Product Category Distribution
$perfumeSales = OrderItem::where('orderable_type', Perfume::class)
->whereHas('order', function ($q) use ($outletIds, $dateQuery, $startDate, $endDate, $filterDate) {
$q->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$q->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
})->sum(DB::raw('unit_price * quantity'));
$productSales = OrderItem::where('orderable_type', Product::class)
->whereHas('order', function ($q) use ($outletIds, $dateQuery, $startDate, $endDate, $filterDate) {
$q->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$q->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
})->sum(DB::raw('unit_price * quantity'));
$bottleSales = OrderItem::where('orderable_type', Bottle::class)
->whereHas('order', function ($q) use ($outletIds, $dateQuery, $startDate, $endDate, $filterDate) {
$q->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$q->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
})->sum(DB::raw('unit_price * quantity'));
@ -446,7 +478,7 @@ public function render(): View
// 4. Payment Method
$paymentMethods = Payment::whereHas('order', function ($q) use ($outletIds, $dateQuery, $startDate, $endDate, $filterDate) {
$q->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$q->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate);
})
->select('method', DB::raw('SUM(amount) as total'))
@ -454,13 +486,13 @@ public function render(): View
->get();
$this->paymentMethodChart = [
'labels' => $paymentMethods->map(fn ($pm) => $pm->method?->label() ?? 'Unknown')->toArray(),
'labels' => $paymentMethods->map(fn($pm) => $pm->method?->label() ?? 'Unknown')->toArray(),
'data' => $paymentMethods->pluck('total')->toArray(),
];
// 5. Outlet Performance
$outletPerformance = Order::query()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->when($dateQuery || ($startDate && $endDate), $filterDate)
->select('outlet_id', DB::raw('SUM(total) as revenue'))
->groupBy('outlet_id')
@ -468,7 +500,7 @@ public function render(): View
->get();
$this->outletPerformanceChart = [
'labels' => $outletPerformance->map(fn ($op) => $op->outlet?->name ?? 'Outlet #'.$op->outlet_id)->toArray(),
'labels' => $outletPerformance->map(fn($op) => $op->outlet?->name ?? 'Outlet #' . $op->outlet_id)->toArray(),
'data' => $outletPerformance->pluck('revenue')->toArray(),
];
@ -514,7 +546,7 @@ public function render(): View
$this->dayOfWeekSalesChart = [
'labels' => array_values($days),
'data' => collect(range(1, 7))->map(fn ($d) => (int) ($dayOfWeekSales->get($d)?->revenue ?? 0))->toArray(),
'data' => collect(range(1, 7))->map(fn($d) => (int) ($dayOfWeekSales->get($d)?->revenue ?? 0))->toArray(),
];
// 8. Customer Type (Member vs Guest)
@ -528,13 +560,13 @@ public function render(): View
// 9. Transaction Trend (Daily Count)
$this->transactionTrendChart = [
'labels' => $trendDates->map(fn ($d) => Carbon::parse($d)->format('d M'))->toArray(),
'data' => $trendDates->map(fn ($d) => (int) ($ordersTrend->get($d)?->count ?? 0))->toArray(),
'labels' => $trendDates->map(fn($d) => Carbon::parse($d)->format('d M'))->toArray(),
'data' => $trendDates->map(fn($d) => (int) ($ordersTrend->get($d)?->count ?? 0))->toArray(),
];
// 10. AOV Trend (Daily Revenue / Daily Count)
$this->aovTrendChart = [
'labels' => $trendDates->map(fn ($d) => Carbon::parse($d)->format('d M'))->toArray(),
'labels' => $trendDates->map(fn($d) => Carbon::parse($d)->format('d M'))->toArray(),
'data' => $trendDates->map(function ($d) use ($ordersTrend) {
$rev = $ordersTrend->get($d)?->revenue ?? 0;
$count = $ordersTrend->get($d)?->count ?? 0;
@ -563,7 +595,7 @@ public function render(): View
// 14. Voucher Usage Trend
$vouchersTrend = Order::query()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->where('created_at', '>=', now()->subDays(30)->startOfDay())
->whereNotNull('voucher_id')
->select(DB::raw('DATE(created_at) as date'), DB::raw('count(*) as count'))
@ -572,8 +604,8 @@ public function render(): View
->keyBy('date');
$this->voucherUsageTrendChart = [
'labels' => $trendDates->map(fn ($d) => Carbon::parse($d)->format('d M'))->toArray(),
'data' => $trendDates->map(fn ($d) => (int) ($vouchersTrend->get($d)?->count ?? 0))->toArray(),
'labels' => $trendDates->map(fn($d) => Carbon::parse($d)->format('d M'))->toArray(),
'data' => $trendDates->map(fn($d) => (int) ($vouchersTrend->get($d)?->count ?? 0))->toArray(),
];
$this->countingData = $countingData;

146
app/Livewire/Studio/Dashboard/Overview.php
View File

@ -44,64 +44,68 @@ class Overview extends Component
public function mount(): void
{
$this->outlets = auth()->user()->outlets()->get()->pluck('name', 'id')->toArray();
/** @var \App\Models\User $user */
$user = auth()->user();
$this->outlets = $user->outlets()->get()->pluck('name', 'id')->toArray();
}
public function render(): View
{
/** @var \App\Models\User $user */
$user = auth()->user();
$outletIds = $this->selectedOutletIds;
if (count($this->outlets) === 1) {
$outletIds = auth()->user()->outlets()->pluck('outlets.id')->toArray();
$outletIds = $user->outlets()->pluck('outlets.id')->toArray();
}
$todayOrder = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$todayOrder = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->today()
->count();
$yesterdayOrder = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$yesterdayOrder = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->yesterday()
->count();
$todayIncome = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$todayIncome = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->today()
->sum('total');
$yesterdayIncome = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$yesterdayIncome = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->yesterday()
->sum('total');
$todayCogs = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$todayCogs = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->today()
->sum('cogs');
$yesterdayCogs = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$yesterdayCogs = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->yesterday()
->sum('cogs');
$todayDiscount = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$todayDiscount = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->today()
->sum(DB::raw('discount + COALESCE(voucher_discount, 0)'));
$yesterdayDiscount = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$yesterdayDiscount = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->yesterday()
->sum(DB::raw('discount + COALESCE(voucher_discount, 0)'));
$todayVoucher = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$todayVoucher = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->today()
->whereNotNull('voucher_id')
->count();
$yesterdayVoucher = Order::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$yesterdayVoucher = Order::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->yesterday()
->whereNotNull('voucher_id')
->count();
$todayExpense = Expense::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$todayExpense = Expense::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->today()
->sum('amount');
$yesterdayExpense = Expense::when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
$yesterdayExpense = Expense::when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->yesterday()
->sum('amount');
@ -118,21 +122,21 @@ public function render(): View
$todaySoldPerfume = OrderItem::where('orderable_type', Perfume::class)
->whereHas(
'order',
fn ($q) => $q->today()->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))
fn($q) => $q->today()->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))
)
->sum('quantity');
$yesterdaySoldPerfume = OrderItem::where('orderable_type', Perfume::class)
->whereHas(
'order',
fn ($q) => $q->yesterday()->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))
fn($q) => $q->yesterday()->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))
)
->sum('quantity');
$todayTopPerfume = OrderItem::where('orderable_type', Perfume::class)
->whereHas(
'order',
fn ($q) => $q->today()->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))
fn($q) => $q->today()->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))
)
->select('orderable_id', 'orderable_type', DB::raw('SUM(quantity) as total_sold'))
->groupBy('orderable_id', 'orderable_type')
@ -143,7 +147,7 @@ public function render(): View
$yesterdayTopPerfume = OrderItem::where('orderable_type', Perfume::class)
->whereHas(
'order',
fn ($q) => $q->yesterday()->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds))
fn($q) => $q->yesterday()->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds))
)
->select('orderable_id', 'orderable_type', DB::raw('SUM(quantity) as total_sold'))
->groupBy('orderable_id', 'orderable_type')
@ -168,26 +172,26 @@ public function render(): View
$hourFunc = DB::getDriverName() === 'sqlite' ? "CAST(strftime('%H', created_at) AS INTEGER)" : 'HOUR(created_at)';
$todayHourly = Order::whereDate('created_at', now())
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->select(DB::raw("$hourFunc as hour"), DB::raw('count(*) as count'))
->groupBy('hour')
->get()->keyBy('hour');
$yesterdayHourly = Order::whereDate('created_at', now()->yesterday())
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->select(DB::raw("$hourFunc as hour"), DB::raw('count(*) as count'))
->groupBy('hour')
->get()->keyBy('hour');
$this->hourlyComparisonChart = [
'labels' => collect(range(0, 23))->map(fn ($h) => str_pad($h, 2, '0', STR_PAD_LEFT).':00')->toArray(),
'today' => collect(range(0, 23))->map(fn ($h) => $todayHourly->get($h)?->count ?? 0)->toArray(),
'yesterday' => collect(range(0, 23))->map(fn ($h) => $yesterdayHourly->get($h)?->count ?? 0)->toArray(),
'labels' => collect(range(0, 23))->map(fn($h) => str_pad($h, 2, '0', STR_PAD_LEFT) . ':00')->toArray(),
'today' => collect(range(0, 23))->map(fn($h) => $todayHourly->get($h)?->count ?? 0)->toArray(),
'yesterday' => collect(range(0, 23))->map(fn($h) => $yesterdayHourly->get($h)?->count ?? 0)->toArray(),
];
// 2. Today's Distribution (Category)
$categorySales = OrderItem::whereHas('order', function ($q) use ($outletIds) {
$q->today()->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds));
$q->today()->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds));
})
->select('orderable_type', DB::raw('SUM(unit_price * quantity) as total'))
->groupBy('orderable_type')
@ -204,25 +208,25 @@ public function render(): View
// 3. Today's Payment Methods
$paymentMethods = Payment::whereHas('order', function ($q) use ($outletIds) {
$q->today()->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds));
$q->today()->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds));
})
->select('method', DB::raw('SUM(amount) as total'))
->groupBy('method')
->get();
$this->todayPaymentChart = [
'labels' => $paymentMethods->map(fn ($pm) => $pm->method?->label() ?? 'Unknown')->toArray(),
'labels' => $paymentMethods->map(fn($pm) => $pm->method?->label() ?? 'Unknown')->toArray(),
'data' => $paymentMethods->pluck('total')->toArray(),
];
// 4. Today's Customer Type
$todayMemberOrders = Order::query()
->today()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->whereNotNull('customer_id')->count();
$todayGuestOrders = Order::query()
->today()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->whereNull('customer_id')->count();
$this->todayCustomerTypeChart = [
@ -232,7 +236,7 @@ public function render(): View
// 5. Today's Top 5 Selling Items
$todayTopItems = OrderItem::whereHas('order', function ($q) use ($outletIds) {
$q->today()->when(! empty($outletIds), fn ($q2) => $q2->whereIn('outlet_id', $outletIds));
$q->today()->when(! empty($outletIds), fn($q2) => $q2->whereIn('outlet_id', $outletIds));
})
->with('orderable')
->select('orderable_id', 'orderable_type', DB::raw('SUM(quantity) as total_sold'))
@ -242,14 +246,14 @@ public function render(): View
->get();
$this->todayTopSellingChart = [
'labels' => $todayTopItems->map(fn ($item) => $item->orderable?->name ?? 'Unknown')->toArray(),
'data' => $todayTopItems->pluck('total_sold')->map(fn ($val) => (int) $val)->toArray(),
'labels' => $todayTopItems->map(fn($item) => $item->orderable?->name ?? 'Unknown')->toArray(),
'data' => $todayTopItems->pluck('total_sold')->map(fn($val) => (int) $val)->toArray(),
];
// 6. Today's Top 5 Customers
$todayTopCustomers = Order::query()
->today()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->whereNotNull('customer_id')
->select('customer_id', DB::raw('SUM(total) as total_spent'))
->groupBy('customer_id')
@ -259,18 +263,18 @@ public function render(): View
->get();
$this->todayTopCustomersChart = [
'labels' => $todayTopCustomers->map(fn ($o) => $o->customer?->user?->employee?->full_name ?? $o->customer?->user?->name ?? 'Customer #'.$o->customer_id)->toArray(),
'data' => $todayTopCustomers->pluck('total_spent')->map(fn ($val) => (int) $val)->toArray(),
'labels' => $todayTopCustomers->map(fn($o) => $o->customer?->user?->employee?->full_name ?? $o->customer?->user?->name ?? 'Customer #' . $o->customer_id)->toArray(),
'data' => $todayTopCustomers->pluck('total_spent')->map(fn($val) => (int) $val)->toArray(),
];
// 7. Today's Discount Distribution (With Discount vs Regular)
$withDiscount = Order::query()
->today()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->where('discount', '>', 0)->count();
$noDiscount = Order::query()
->today()
->when(! empty($outletIds), fn ($q) => $q->whereIn('outlet_id', $outletIds))
->when(! empty($outletIds), fn($q) => $q->whereIn('outlet_id', $outletIds))
->where('discount', '<=', 0)->count();
$this->todayDiscountChart = [
@ -279,24 +283,26 @@ public function render(): View
];
$this->stats = array_values(array_filter([
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Average Order Value (AOV)',
'value' => formatCurrencyNumber($todayAov, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayAov, 'Rp'),
'trend' => $yesterdayAov > 0
? round((($todayAov - $yesterdayAov) / $yesterdayAov) * 100, 1).'%'
? round((($todayAov - $yesterdayAov) / $yesterdayAov) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayAov > $yesterdayAov,
'description' => 'Rata-rata nilai belanja pelanggan dalam satu kali checkout.',
] : null,
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Profit Margin',
'value' => round($todayProfitMargin, 1).'%',
'previous' => round($yesterdayProfitMargin, 1).'%',
'value' => round($todayProfitMargin, 1) . '%',
'previous' => round($yesterdayProfitMargin, 1) . '%',
'trend' => $yesterdayProfitMargin > 0
? round($todayProfitMargin - $yesterdayProfitMargin, 1).'%'
? round($todayProfitMargin - $yesterdayProfitMargin, 1) . '%'
: '∞%',
'trendUp' => $todayProfitMargin > $yesterdayProfitMargin,
'description' => 'Persentase keuntungan bersih dibandingkan dengan total pendapatan.',
] : null,
[
@ -304,9 +310,10 @@ public function render(): View
'value' => $todayOrder,
'previous' => $yesterdayOrder,
'trend' => $yesterdayOrder > 0
? round((($todayOrder - $yesterdayOrder) / $yesterdayOrder) * 100, 1).'%'
? round((($todayOrder - $yesterdayOrder) / $yesterdayOrder) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayOrder > $yesterdayOrder,
'description' => 'Total frekuensi transaksi atau pesanan yang masuk selama periode ini.',
],
[
@ -314,31 +321,34 @@ public function render(): View
'value' => formatCurrencyNumber($todayIncome, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayIncome, 'Rp'),
'trend' => $yesterdayIncome > 0
? round((($todayIncome - $yesterdayIncome) / $yesterdayIncome) * 100, 1).'%'
? round((($todayIncome - $yesterdayIncome) / $yesterdayIncome) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayIncome > $yesterdayIncome,
'formatted' => formatCurrencyNumber($todayIncome, 'Rp'),
'description' => 'Total nominal uang yang masuk dari penjualan (Omzet).',
],
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'HPP',
'value' => formatCurrencyNumber($todayCogs, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayCogs, 'Rp'),
'trend' => $yesterdayCogs > 0
? round((($todayCogs - $yesterdayCogs) / $yesterdayCogs) * 100, 1).'%'
? round((($todayCogs - $yesterdayCogs) / $yesterdayCogs) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayCogs > $yesterdayCogs,
'formatted' => formatCurrencyNumber($todayCogs, 'Rp'),
'description' => 'Harga Pokok Penjualan, yaitu total modal dari barang-barang yang terjual.',
] : null,
[
'title' => 'Member Baru',
'value' => $todayNewMembers.' Orang',
'previous' => $yesterdayNewMembers.' Orang',
'value' => $todayNewMembers . ' Orang',
'previous' => $yesterdayNewMembers . ' Orang',
'trend' => $yesterdayNewMembers > 0
? round((($todayNewMembers - $yesterdayNewMembers) / $yesterdayNewMembers) * 100, 1).'%'
? round((($todayNewMembers - $yesterdayNewMembers) / $yesterdayNewMembers) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayNewMembers > $yesterdayNewMembers,
'description' => 'Jumlah pelanggan baru yang mendaftar menjadi member selama periode ini.',
],
[
@ -346,10 +356,11 @@ public function render(): View
'value' => formatCurrencyNumber($todayDiscount, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayDiscount, 'Rp'),
'trend' => $yesterdayDiscount > 0
? round((($todayDiscount - $yesterdayDiscount) / $yesterdayDiscount) * 100, 1).'%'
? round((($todayDiscount - $yesterdayDiscount) / $yesterdayDiscount) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayDiscount > $yesterdayDiscount,
'formatted' => formatCurrencyNumber($todayDiscount, 'Rp'),
'description' => 'Total nilai potongan harga (diskon) yang diberikan kepada pelanggan.',
],
[
@ -357,9 +368,10 @@ public function render(): View
'value' => $todayVoucher,
'previous' => $yesterdayVoucher,
'trend' => $yesterdayVoucher > 0
? round((($todayVoucher - $yesterdayVoucher) / $yesterdayVoucher) * 100, 1).'%'
? round((($todayVoucher - $yesterdayVoucher) / $yesterdayVoucher) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayVoucher > $yesterdayVoucher,
'description' => 'Jumlah transaksi yang menggunakan voucher diskon selama periode ini.',
],
[
@ -367,59 +379,65 @@ public function render(): View
'value' => formatCurrencyNumber($todayExpense, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayExpense, 'Rp'),
'trend' => $yesterdayExpense > 0
? round((($todayExpense - $yesterdayExpense) / $yesterdayExpense) * 100, 1).'%'
? round((($todayExpense - $yesterdayExpense) / $yesterdayExpense) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayExpense > $yesterdayExpense,
'description' => 'Total biaya operasional atau pengeluaran toko yang tercatat selama periode ini.',
],
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Belanja Barang',
'value' => formatCurrencyNumber($todayPurchase, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayPurchase, 'Rp'),
'trend' => $yesterdayPurchase > 0
? round((($todayPurchase - $yesterdayPurchase) / $yesterdayPurchase) * 100, 1).'%'
? round((($todayPurchase - $yesterdayPurchase) / $yesterdayPurchase) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayPurchase > $yesterdayPurchase,
'description' => 'Total pengeluaran untuk pembelian stok barang atau inventaris selama periode ini.',
] : null,
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Laba Kotor',
'value' => formatCurrencyNumber($todayGrossProfit, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayGrossProfit, 'Rp'),
'trend' => $yesterdayGrossProfit > 0
? round((($todayGrossProfit - $yesterdayGrossProfit) / $yesterdayGrossProfit) * 100, 1).'%'
? round((($todayGrossProfit - $yesterdayGrossProfit) / $yesterdayGrossProfit) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayGrossProfit > $yesterdayGrossProfit,
'description' => 'Pendapatan dikurangi dengan HPP dan Diskon.',
] : null,
auth()->user()->hasRole(['Developer', 'Owner']) ? [
$user->hasRole(['Developer', 'Owner']) ? [
'title' => 'Laba Bersih',
'value' => formatCurrencyNumber($todayNetProfit, 'Rp'),
'previous' => formatCurrencyNumber($yesterdayNetProfit, 'Rp'),
'trend' => $yesterdayNetProfit > 0
? round((($todayNetProfit - $yesterdayNetProfit) / $yesterdayNetProfit) * 100, 1).'%'
? round((($todayNetProfit - $yesterdayNetProfit) / $yesterdayNetProfit) * 100, 1) . '%'
: '∞%',
'trendUp' => $todayNetProfit > $yesterdayNetProfit,
'description' => 'Laba kotor dikurangi dengan beban operasional dan gaji.',
] : null,
[
'title' => 'Parfum Terjual',
'value' => $todaySoldPerfume.' ml',
'previous' => $yesterdaySoldPerfume.' ml',
'value' => $todaySoldPerfume . ' ml',
'previous' => $yesterdaySoldPerfume . ' ml',
'trend' => $yesterdaySoldPerfume > 0
? round((($todaySoldPerfume - $yesterdaySoldPerfume) / $yesterdaySoldPerfume) * 100, 1).'%'
? round((($todaySoldPerfume - $yesterdaySoldPerfume) / $yesterdaySoldPerfume) * 100, 1) . '%'
: '∞%',
'trendUp' => $todaySoldPerfume > $yesterdaySoldPerfume,
'description' => 'Total volume cairan parfum yang terjual dalam satuan mililiter (ml).',
],
[
'title' => 'Top Parfum',
'value' => optional($todayTopPerfume?->orderable)->name.' ('.$todayTopPerfume?->total_sold.'ml)' ?? '-',
'previous' => optional($yesterdayTopPerfume?->orderable)->name.'('.$yesterdayTopPerfume?->total_sold.'ml)' ?? '-',
'value' => optional($todayTopPerfume?->orderable)->name . ' (' . $todayTopPerfume?->total_sold . 'ml)' ?? '-',
'previous' => optional($yesterdayTopPerfume?->orderable)->name . '(' . $yesterdayTopPerfume?->total_sold . 'ml)' ?? '-',
'trend' => ($yesterdayTopPerfume && $yesterdayTopPerfume->total_sold > 0)
? round((($todayTopPerfume?->total_sold - $yesterdayTopPerfume?->total_sold) / $yesterdayTopPerfume?->total_sold) * 100, 1).'%'
? round((($todayTopPerfume?->total_sold - $yesterdayTopPerfume?->total_sold) / $yesterdayTopPerfume?->total_sold) * 100, 1) . '%'
: '∞%',
'trendUp' => ($todayTopPerfume?->total_sold ?? 0) > ($yesterdayTopPerfume?->total_sold ?? 0),
'description' => 'Nama varian parfum yang paling banyak terjual hari ini.',
],
]));

306
resources/views/livewire/studio/dashboard/analysis.blade.php
View File

@ -45,8 +45,20 @@
<flux:heading>Counting Data</flux:heading>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3 mb-6 mt-2">
@foreach ($countingData as $item)
<div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
<flux:subheading>{{ $item['title'] }}</flux:subheading>
<div
class="relative rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg dark:hover:shadow-zinc-900/50">
<div class="flex items-start justify-between">
<flux:subheading>{{ $item['title'] }}</flux:subheading>
@if (isset($item['description']))
<div class="absolute top-2 right-2">
<flux:tooltip toggleable content="{{ $item['description'] }}">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent hover:bg-zinc-300 dark:hover:bg-zinc-600" />
</flux:tooltip>
</div>
@endif
</div>
<flux:heading size="xl" class="mb-2">{{ $item['value'] }}</flux:heading>
</div>
@endforeach
@ -55,8 +67,20 @@
<flux:heading>Order</flux:heading>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mb-6 mt-2">
@foreach ($orders as $order)
<div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
<flux:subheading>{{ $order['title'] }}</flux:subheading>
<div
class="relative rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg dark:hover:shadow-zinc-900/50">
<div class="flex items-start justify-between">
<flux:subheading>{{ $order['title'] }}</flux:subheading>
@if (isset($order['description']))
<div class="absolute top-2 right-2">
<flux:tooltip toggleable content="{{ $order['description'] }}">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent hover:bg-zinc-300 dark:hover:bg-zinc-600" />
</flux:tooltip>
</div>
@endif
</div>
<flux:heading size="xl" class="mb-2">{{ $order['value'] }}</flux:heading>
</div>
@endforeach
@ -65,8 +89,20 @@
<flux:heading>Pengeluaran</flux:heading>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 mt-2">
@foreach ($expenses as $expense)
<div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
<flux:subheading>{{ $expense['title'] }}</flux:subheading>
<div
class="relative rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg dark:hover:shadow-zinc-900/50">
<div class="flex items-start justify-between">
<flux:subheading>{{ $expense['title'] }}</flux:subheading>
@if (isset($expense['description']))
<div class="absolute top-2 right-2">
<flux:tooltip toggleable content="{{ $expense['description'] }}">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent hover:bg-zinc-300 dark:hover:bg-zinc-600" />
</flux:tooltip>
</div>
@endif
</div>
<flux:heading size="xl" class="mb-2">{{ $expense['value'] }}</flux:heading>
</div>
@endforeach
@ -74,31 +110,75 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8" x-data="analysisCharts">
<!-- 1. Revenue & Profit Trend -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Trend perbandingan pendapatan dan laba bersih perusahaan selama 30 hari terakhir.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Trend Pendapatan & Laba (30 Hari Terakhir)</flux:heading>
<div class="h-80"><canvas id="revenueTrendChart"></canvas></div>
</flux:card>
<!-- 6. Member Growth (Area Chart) - Cumulative -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable content="Grafik akumulasi pertumbuhan jumlah member dari waktu ke waktu.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Pertumbuhan Member (Akumulasi)</flux:heading>
<div class="h-80"><canvas id="memberGrowthChart"></canvas></div>
</flux:card>
<!-- 2. busiest hour -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Identifikasi jam-jam dengan volume transaksi tertinggi berdasarkan waktu pemesanan.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Jam Sibuk (Total Order per Jam)</flux:heading>
<div class="h-80"><canvas id="hourlySalesChart"></canvas></div>
</flux:card>
<!-- 5. Outlet Performance -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Perbandingan total pendapatan antar outlet yang terdaftar di sistem.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Performa Outlet (Pendapatan)</flux:heading>
<div class="h-80"><canvas id="outletPerformanceChart"></canvas></div>
</flux:card>
<!-- 3. Product Category Distribution -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Pembagian pendapatan berdasarkan kategori produk (Parfum, Produk, Botol).">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Distribusi Penjualan</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="categoryDistributionChart"></canvas>
@ -106,7 +186,16 @@
</flux:card>
<!-- 4. Payment Method -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Persentase penggunaan berbagai metode pembayaran oleh pelanggan.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Metode Pembayaran</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="paymentMethodChart"></canvas>
@ -114,13 +203,31 @@
</flux:card>
<!-- 7. Day of Week Sales -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Analisa hari dalam seminggu saat volume penjualan paling tinggi.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Performa Penjualan per Hari</flux:heading>
<div class="h-80"><canvas id="dayOfWeekSalesChart"></canvas></div>
</flux:card>
<!-- 8. Customer Type Distribution -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Perbandingan jumlah transaksi antara pelanggan terdaftar (Member) dan pelanggan umum (Guest).">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Segmentasi Pelanggan (Member vs Guest)</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="customerTypeChart"></canvas>
@ -128,19 +235,44 @@
</flux:card>
<!-- 9. Transaction Trend -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable content="Trend jumlah transaksi harian dalam sebulan terakhir.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Trend Volume Transaksi (30 Hari)</flux:heading>
<div class="h-80"><canvas id="transactionTrendChart"></canvas></div>
</flux:card>
<!-- 10. AOV Trend -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable content="Trend rata-rata nilai transaksi (Average Order Value).">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Trend Rata-rata Belanja (AOV)</flux:heading>
<div class="h-80"><canvas id="aovTrendChart"></canvas></div>
</flux:card>
<!-- 11. Expense Breakdown -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Perbandingan antara biaya operasional toko dengan biaya gaji karyawan.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Komposisi Biaya Operasional</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="expenseBreakdownChart"></canvas>
@ -148,7 +280,16 @@
</flux:card>
<!-- 12. Revenue vs Cost -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Perbandingan antara pendapatan (omzet) dengan total seluruh pengeluaran.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Omzet vs Total Biaya</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="revenueVsCostChart"></canvas>
@ -156,7 +297,16 @@
</flux:card>
<!-- 13. Customer Retention -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Analisa persentase pelanggan setia (repeat order) dibandingkan pelanggan baru.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Analisa Pelanggan (Baru vs Lama)</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="customerRetentionChart"></canvas>
@ -164,7 +314,16 @@
</flux:card>
<!-- 14. Voucher Activity -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Grafik efektivitas penggunaan voucher diskon dari waktu ke waktu.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Efektivitas Voucher</flux:heading>
<div class="h-80"><canvas id="voucherUsageTrendChart"></canvas></div>
</flux:card>
@ -173,7 +332,8 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 mt-2">
<div>
<flux:heading>Top 5 Parfum</flux:heading>
<flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
<flux:card
class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700 transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50">
<flux:table>
<flux:table.columns>
<flux:table.column>No</flux:table.column>
@ -201,7 +361,8 @@
<div>
<flux:heading>Top 5 Produk</flux:heading>
<flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
<flux:card
class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700 transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50">
<flux:table>
<flux:table.columns>
<flux:table.column>No</flux:table.column>
@ -229,7 +390,8 @@
<div>
<flux:heading>Top 5 Botol</flux:heading>
<flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
<flux:card
class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700 transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50">
<flux:table>
<flux:table.columns>
<flux:table.column>No</flux:table.column>
@ -246,7 +408,8 @@
<flux:table.cell>{{ $topBottle['name'] }}</flux:table.cell>
<flux:table.cell>{{ $topBottle['sale_price'] }}</flux:table.cell>
<flux:table.cell>{{ $topBottle['total_sold'] }}</flux:table.cell>
<flux:table.cell variant="strong">{{ $topBottle['total_sales'] }}</flux:table.cell>
<flux:table.cell variant="strong">{{ $topBottle['total_sales'] }}
</flux:table.cell>
</flux:table.row>
@endforeach
</flux:table.rows>
@ -273,8 +436,11 @@
try {
return JSON.parse(JSON.stringify(data));
} catch (e) {
// Fallback for safety
return { labels: [], datasets: [] };
// Fallback for safety
return {
labels: [],
datasets: []
};
}
},
@ -291,19 +457,31 @@
// Watchers
this.$watch('$wire.revenueTrendChart', () => this.updateChart('revenue', this.getRevenueData));
this.$watch('$wire.memberGrowthChart', () => this.updateChart('memberGrowth', this.getMemberGrowthData));
this.$watch('$wire.hourlySalesChart', () => this.updateChart('hourlySales', this.getHourlySalesData));
this.$watch('$wire.outletPerformanceChart', () => this.updateChart('outletPerformance', this.getOutletPerformanceData));
this.$watch('$wire.categoryDistributionChart', () => this.updateChart('categoryDist', this.getCategoryDistributionData));
this.$watch('$wire.paymentMethodChart', () => this.updateChart('paymentMethod', this.getPaymentMethodData));
this.$watch('$wire.dayOfWeekSalesChart', () => this.updateChart('dayOfWeekSales', this.getDayOfWeekData));
this.$watch('$wire.customerTypeChart', () => this.updateChart('customerType', this.getCustomerTypeData));
this.$watch('$wire.transactionTrendChart', () => this.updateChart('transactionTrend', this.getTransactionTrendData));
this.$watch('$wire.memberGrowthChart', () => this.updateChart('memberGrowth', this
.getMemberGrowthData));
this.$watch('$wire.hourlySalesChart', () => this.updateChart('hourlySales', this
.getHourlySalesData));
this.$watch('$wire.outletPerformanceChart', () => this.updateChart('outletPerformance', this
.getOutletPerformanceData));
this.$watch('$wire.categoryDistributionChart', () => this.updateChart('categoryDist', this
.getCategoryDistributionData));
this.$watch('$wire.paymentMethodChart', () => this.updateChart('paymentMethod', this
.getPaymentMethodData));
this.$watch('$wire.dayOfWeekSalesChart', () => this.updateChart('dayOfWeekSales', this
.getDayOfWeekData));
this.$watch('$wire.customerTypeChart', () => this.updateChart('customerType', this
.getCustomerTypeData));
this.$watch('$wire.transactionTrendChart', () => this.updateChart('transactionTrend', this
.getTransactionTrendData));
this.$watch('$wire.aovTrendChart', () => this.updateChart('aovTrend', this.getAovTrendData));
this.$watch('$wire.expenseBreakdownChart', () => this.updateChart('expenseBreakdown', this.getExpenseBreakdownData));
this.$watch('$wire.revenueVsCostChart', () => this.updateChart('revenueVsCost', this.getRevenueVsCostData));
this.$watch('$wire.customerRetentionChart', () => this.updateChart('customerRetention', this.getCustomerRetentionData));
this.$watch('$wire.voucherUsageTrendChart', () => this.updateChart('voucherUsage', this.getVoucherUsageData));
this.$watch('$wire.expenseBreakdownChart', () => this.updateChart('expenseBreakdown', this
.getExpenseBreakdownData));
this.$watch('$wire.revenueVsCostChart', () => this.updateChart('revenueVsCost', this
.getRevenueVsCostData));
this.$watch('$wire.customerRetentionChart', () => this.updateChart('customerRetention', this
.getCustomerRetentionData));
this.$watch('$wire.voucherUsageTrendChart', () => this.updateChart('voucherUsage', this
.getVoucherUsageData));
},
updateChart(key, getDataFn) {
@ -311,7 +489,7 @@
try {
charts[key].data = getDataFn.call(this);
charts[key].update();
} catch(e) {
} catch (e) {
console.error(`Error updating chart ${key}`, e);
}
} else {
@ -332,10 +510,10 @@
'customerRetention': 'initCustomerRetention',
'voucherUsage': 'initVoucherUsage',
};
const fnName = initMap[key];
if (fnName && typeof this[fnName] === 'function') {
this[fnName]();
}
const fnName = initMap[key];
if (fnName && typeof this[fnName] === 'function') {
this[fnName]();
}
}
},
@ -360,16 +538,23 @@
initRevenueTrend() {
this.createChart('revenueTrendChart', 'revenue', 'line', this.getRevenueData(), {
plugins: { legend: { position: 'top' } },
scales: { y: { beginAtZero: true } }
plugins: {
legend: {
position: 'top'
}
},
scales: {
y: {
beginAtZero: true
}
}
});
},
getRevenueData() {
const data = this.unwrap($wire.revenueTrendChart);
return {
labels: data.labels || [],
datasets: [
{
datasets: [{
label: 'Pendapatan',
data: data.revenue || [],
borderColor: '#10b981',
@ -391,7 +576,11 @@
initMemberGrowth() {
this.createChart('memberGrowthChart', 'memberGrowth', 'line', this.getMemberGrowthData(), {
scales: { y: { beginAtZero: true } }
scales: {
y: {
beginAtZero: true
}
}
});
},
getMemberGrowthData() {
@ -425,9 +614,10 @@
},
initOutletPerformance() {
this.createChart('outletPerformanceChart', 'outletPerformance', 'bar', this.getOutletPerformanceData(), {
indexAxis: 'y'
});
this.createChart('outletPerformanceChart', 'outletPerformance', 'bar', this
.getOutletPerformanceData(), {
indexAxis: 'y'
});
},
getOutletPerformanceData() {
const data = this.unwrap($wire.outletPerformanceChart);
@ -442,7 +632,8 @@
},
initCategoryDistribution() {
this.createChart('categoryDistributionChart', 'categoryDist', 'doughnut', this.getCategoryDistributionData());
this.createChart('categoryDistributionChart', 'categoryDist', 'doughnut', this
.getCategoryDistributionData());
},
getCategoryDistributionData() {
const data = this.unwrap($wire.categoryDistributionChart);
@ -499,7 +690,8 @@
},
initTransactionTrend() {
this.createChart('transactionTrendChart', 'transactionTrend', 'line', this.getTransactionTrendData());
this.createChart('transactionTrendChart', 'transactionTrend', 'line', this
.getTransactionTrendData());
},
getTransactionTrendData() {
const data = this.unwrap($wire.transactionTrendChart);
@ -535,7 +727,8 @@
},
initExpenseBreakdown() {
this.createChart('expenseBreakdownChart', 'expenseBreakdown', 'doughnut', this.getExpenseBreakdownData());
this.createChart('expenseBreakdownChart', 'expenseBreakdown', 'doughnut', this
.getExpenseBreakdownData());
},
getExpenseBreakdownData() {
const data = this.unwrap($wire.expenseBreakdownChart);
@ -564,7 +757,8 @@
},
initCustomerRetention() {
this.createChart('customerRetentionChart', 'customerRetention', 'bar', this.getCustomerRetentionData());
this.createChart('customerRetentionChart', 'customerRetention', 'bar', this
.getCustomerRetentionData());
},
getCustomerRetentionData() {
const data = this.unwrap($wire.customerRetentionChart);
@ -599,7 +793,7 @@
// Helper to create chart efficiently
createChart(elementId, chartKey, type, data, extraOptions = {}) {
if (!data || !data.labels) return;
const ctx = document.getElementById(elementId);
if (!ctx) return;

91
resources/views/livewire/studio/dashboard/overview.blade.php
View File

@ -18,9 +18,20 @@
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mb-6 mt-2">
@foreach ($stats as $stat)
<div
class="@if ($stat['title'] === 'Top Parfum') md:col-span-2 xl:col-span-2 @endif rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
<flux:subheading>{{ $stat['title'] }}</flux:subheading>
<div class="flex items-center justify-between">
class="relative @if ($stat['title'] === 'Top Parfum') md:col-span-2 xl:col-span-2 @endif rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg dark:hover:shadow-zinc-900/50">
<div class="flex items-start justify-between">
<flux:subheading>{{ $stat['title'] }}</flux:subheading>
@if (isset($stat['description']))
<div class="absolute top-2 right-2">
<flux:tooltip toggleable content="{{ $stat['description'] }}">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!px-1 border-none bg-transparent hover:bg-zinc-300 dark:hover:bg-zinc-600" />
</flux:tooltip>
</div>
@endif
</div>
<div class="flex items-center justify-between mt-1">
<flux:heading size="xl">{{ $stat['value'] }}</flux:heading>
<flux:subheading size="xs">{{ $stat['previous'] }}</flux:subheading>
</div>
@ -35,7 +46,16 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mt-8">
<!-- 1. Today vs Yesterday Hourly Comparison -->
<flux:card class="md:col-span-2 xl:col-span-2" wire:ignore>
<flux:card
class="relative md:col-span-2 xl:col-span-2 transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Grafik perbandingan jumlah transaksi tiap jam antara hari ini dan kemarin.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Perbandingan Order per Jam (Hari Ini vs Kemarin)</flux:heading>
<div class="h-80">
<canvas id="hourlyComparisonChart"></canvas>
@ -43,7 +63,16 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
</flux:card>
<!-- 2. Today Category Distribution -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Pembagian pendapatan berdasarkan kategori produk (Parfum, Produk, Botol).">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Distribusi Penjualan</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="todayCategoryChart"></canvas>
@ -51,7 +80,15 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
</flux:card>
<!-- 3. Today Payment Methods -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable content="Persentase penggunaan berbagai metode pembayaran oleh pelanggan.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Metode Pembayaran</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="todayPaymentChart"></canvas>
@ -59,7 +96,16 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
</flux:card>
<!-- 4. Today Customer Type -->
<flux:card wire:ignore>
<flux:card
class="relative transition-all duration-300 hover:scale-[1.01] hover:shadow-lg dark:hover:shadow-zinc-900/50"
wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Perbandingan jumlah transaksi antara pelanggan terdaftar (Member) dan pelanggan umum (Guest).">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Member vs Guest</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="todayCustomerTypeChart"></canvas>
@ -67,7 +113,14 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
</flux:card>
<!-- 5. Today Top Selling Items -->
<flux:card wire:ignore>
<flux:card class="relative" wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Lima produk dengan jumlah unit terjual terbanyak selama periode ini.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">5 Item Terlaris</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="todayTopSellingChart"></canvas>
@ -75,7 +128,14 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
</flux:card>
<!-- 6. Today Top Customers -->
<flux:card wire:ignore>
<flux:card class="relative" wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Lima pelanggan dengan total nominal belanja tertinggi selama periode ini.">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Top 5 Pelanggan</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="todayTopCustomersChart"></canvas>
@ -83,7 +143,14 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
</flux:card>
<!-- 7. Today Discount Distribution -->
<flux:card wire:ignore>
<flux:card class="relative" wire:ignore>
<div class="absolute top-3 right-3">
<flux:tooltip toggleable
content="Perbandingan jumlah transaksi antara pelanggan terdaftar (Member) dan pelanggan umum (Guest).">
<flux:button icon="exclamation-circle" variant="subtle" size="sm"
class="!p-1 border-none bg-transparent" />
</flux:tooltip>
</div>
<flux:heading class="mb-4">Normal vs Diskon</flux:heading>
<div class="h-80 flex items-center justify-center">
<canvas id="todayDiscountChart"></canvas>
@ -130,7 +197,7 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
this.$nextTick(() => start());
this.$watch('$wire.hourlyComparisonChart', () => this.updateChart('hourly', this
.getHourlyData));
.getHourlyData));
this.$watch('$wire.todayCategoryChart', () => this.updateChart('category', this
.getCategoryData));
this.$watch('$wire.todayPaymentChart', () => this.updateChart('payment', this.getPaymentData));
@ -275,7 +342,7 @@ class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-g
initCustomerType() {
this.createChart('todayCustomerTypeChart', 'customerType', 'doughnut', this
.getCustomerTypeData());
.getCustomerTypeData());
},
getCustomerTypeData() {
const data = this.unwrap($wire.todayCustomerTypeChart);