feat: add dynamic date filtering for analysis dashboard metrics and charts
This commit is contained in:
Yoga Pangestu
parent
e74eff77f2
commit
2098570a23
@ -10,23 +10,41 @@
|
||||
use App\Models\OrderItem;
|
||||
use App\Models\Payroll;
|
||||
use App\Models\Purchase;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Inertia\Inertia;
|
||||
|
||||
class AnalysisController extends Controller
|
||||
{
|
||||
public function __invoke()
|
||||
public function __invoke(Request $request)
|
||||
{
|
||||
$period = $request->input('period', 'all');
|
||||
$startDate = $request->input('start_date');
|
||||
$endDate = $request->input('end_date');
|
||||
|
||||
$applyFilter = function ($query, $column = 'created_at') use ($period, $startDate, $endDate) {
|
||||
if ($startDate && $endDate) {
|
||||
return $query->whereBetween($column, [$startDate.' 00:00:00', $endDate.' 23:59:59']);
|
||||
}
|
||||
|
||||
return match ($period) {
|
||||
'week' => $query->whereBetween($column, [now()->startOfWeek(), now()->endOfWeek()]),
|
||||
'month' => $query->whereMonth($column, now()->month)->whereYear($column, now()->year),
|
||||
'year' => $query->whereYear($column, now()->year),
|
||||
default => $query,
|
||||
};
|
||||
};
|
||||
|
||||
$stats = [
|
||||
'total_sales' => $this->getStats(fn () => Order::count()),
|
||||
'total_revenue' => $this->getStats(fn () => Order::sum('total')),
|
||||
'total_expenses' => $this->getStats(fn () => Expense::sum('amount')),
|
||||
'total_payrolls' => $this->getStats(fn () => Payroll::sum('total_salary')),
|
||||
'cogs' => $this->getStats(fn () => Order::sum('hpp')),
|
||||
'total_discount' => $this->getStats(fn () => Order::sum('discount')),
|
||||
'total_purchases' => $this->getStats(fn () => Purchase::sum('total')),
|
||||
'products_sold' => $this->getStats(fn () => OrderItem::sum('qty')),
|
||||
'total_customers' => $this->getStats(fn () => Order::distinct('customer_name')->count('customer_name')),
|
||||
'total_sales' => $this->getStats(fn () => $applyFilter(Order::query())->count()),
|
||||
'total_revenue' => $this->getStats(fn () => $applyFilter(Order::query())->sum('total')),
|
||||
'total_expenses' => $this->getStats(fn () => $applyFilter(Expense::query())->sum('amount')),
|
||||
'total_payrolls' => $this->getStats(fn () => $applyFilter(Payroll::query(), 'period_month')->sum('total_salary')),
|
||||
'cogs' => $this->getStats(fn () => $applyFilter(Order::query())->sum('hpp')),
|
||||
'total_discount' => $this->getStats(fn () => $applyFilter(Order::query())->sum('discount')),
|
||||
'total_purchases' => $this->getStats(fn () => $applyFilter(Purchase::query())->sum('total')),
|
||||
'products_sold' => $this->getStats(fn () => $applyFilter(OrderItem::query())->sum('qty')),
|
||||
'total_customers' => $this->getStats(fn () => $applyFilter(Order::query())->distinct('customer_name')->count('customer_name')),
|
||||
];
|
||||
|
||||
$stats['aov'] = $this->calculateAov($stats['total_revenue'], $stats['total_sales']);
|
||||
@ -38,8 +56,8 @@ public function __invoke()
|
||||
];
|
||||
$stats['profit_margin'] = $this->calculateMargin($stats['net_profit'], $stats['total_revenue']);
|
||||
|
||||
// Revenue vs Purchases per month (this year)
|
||||
$revenueByMonth = DB::table('orders')
|
||||
// Revenue vs Purchases per month
|
||||
$revenueByMonth = $applyFilter(DB::table('orders'))
|
||||
->select(
|
||||
DB::raw('MONTH(created_at) as month'),
|
||||
DB::raw('SUM(total) as total')
|
||||
@ -47,7 +65,7 @@ public function __invoke()
|
||||
->groupBy(DB::raw('MONTH(created_at)'))
|
||||
->get();
|
||||
|
||||
$purchasesByMonth = DB::table('purchases')
|
||||
$purchasesByMonth = $applyFilter(DB::table('purchases'))
|
||||
->select(
|
||||
DB::raw('MONTH(created_at) as month'),
|
||||
DB::raw('SUM(total) as total')
|
||||
@ -68,7 +86,7 @@ public function __invoke()
|
||||
];
|
||||
});
|
||||
|
||||
$paymentMethods = DB::table('orders')
|
||||
$paymentMethods = $applyFilter(DB::table('orders'))
|
||||
->select('payment_method as name', DB::raw('COUNT(*) as total'))
|
||||
->groupBy('payment_method')
|
||||
->get()
|
||||
@ -80,7 +98,7 @@ public function __invoke()
|
||||
return $item;
|
||||
});
|
||||
|
||||
$orderStatuses = DB::table('orders')
|
||||
$orderStatuses = $applyFilter(DB::table('orders'))
|
||||
->select('order_status as name', DB::raw('COUNT(*) as total'))
|
||||
->groupBy('order_status')
|
||||
->get()
|
||||
@ -92,7 +110,7 @@ public function __invoke()
|
||||
return $item;
|
||||
});
|
||||
|
||||
$orderChannels = DB::table('orders')
|
||||
$orderChannels = $applyFilter(DB::table('orders'))
|
||||
->select('order_channel as name', DB::raw('COUNT(*) as total'))
|
||||
->groupBy('order_channel')
|
||||
->get()
|
||||
@ -104,7 +122,7 @@ public function __invoke()
|
||||
return $item;
|
||||
});
|
||||
|
||||
$topProducts = DB::table('order_items')
|
||||
$topProducts = $applyFilter(DB::table('order_items'), 'order_items.created_at')
|
||||
->join('products', 'order_items.product_id', '=', 'products.id')
|
||||
->select('products.name as name', DB::raw('SUM(order_items.qty) as total'))
|
||||
->groupBy('products.name')
|
||||
@ -112,7 +130,7 @@ public function __invoke()
|
||||
->limit(5)
|
||||
->get();
|
||||
|
||||
$topCustomers = DB::table('orders')
|
||||
$topCustomers = $applyFilter(DB::table('orders'), 'orders.created_at')
|
||||
->select('customer_name as name', DB::raw('SUM(total) as total'))
|
||||
->whereNotNull('customer_name')
|
||||
->groupBy('customer_name')
|
||||
@ -120,7 +138,7 @@ public function __invoke()
|
||||
->limit(5)
|
||||
->get();
|
||||
|
||||
$salesByHourRaw = DB::table('orders')
|
||||
$salesByHourRaw = $applyFilter(DB::table('orders'))
|
||||
->select(
|
||||
DB::raw('HOUR(created_at) as hour'),
|
||||
DB::raw('COUNT(*) as total')
|
||||
@ -138,7 +156,7 @@ public function __invoke()
|
||||
});
|
||||
|
||||
// Revenue & Profit & Volume per month
|
||||
$ordersByMonth = DB::table('orders')
|
||||
$ordersByMonth = $applyFilter(DB::table('orders'))
|
||||
->select(
|
||||
DB::raw('MONTH(created_at) as month'),
|
||||
DB::raw('SUM(total) as revenue'),
|
||||
@ -148,7 +166,7 @@ public function __invoke()
|
||||
->groupBy(DB::raw('MONTH(created_at)'))
|
||||
->get();
|
||||
|
||||
$expensesByMonth = DB::table('expenses')
|
||||
$expensesByMonth = $applyFilter(DB::table('expenses'))
|
||||
->select(
|
||||
DB::raw('MONTH(created_at) as month'),
|
||||
DB::raw('SUM(amount) as total')
|
||||
@ -156,7 +174,7 @@ public function __invoke()
|
||||
->groupBy(DB::raw('MONTH(created_at)'))
|
||||
->get();
|
||||
|
||||
$payrollsByMonth = DB::table('payrolls')
|
||||
$payrollsByMonth = $applyFilter(DB::table('payrolls'), 'period_month')
|
||||
->select(
|
||||
DB::raw('MONTH(period_month) as month'),
|
||||
DB::raw('SUM(total_salary) as total')
|
||||
@ -196,7 +214,7 @@ public function __invoke()
|
||||
];
|
||||
});
|
||||
|
||||
$topCategories = DB::table('order_items')
|
||||
$topCategories = $applyFilter(DB::table('order_items'), 'order_items.created_at')
|
||||
->join('products', 'order_items.product_id', '=', 'products.id')
|
||||
->join('category_product', 'products.id', '=', 'category_product.product_id')
|
||||
->join('categories', 'category_product.category_id', '=', 'categories.id')
|
||||
@ -219,6 +237,11 @@ public function __invoke()
|
||||
'topProducts' => $topProducts,
|
||||
'topCustomers' => $topCustomers,
|
||||
'topCategories' => $topCategories,
|
||||
'filters' => [
|
||||
'period' => $period,
|
||||
'start_date' => $startDate,
|
||||
'end_date' => $endDate,
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -1,27 +1,193 @@
|
||||
import { StatCard } from '@/components/cards/stat-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Calendar } from '@/components/ui/calendar';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { analysis } from '@/routes';
|
||||
import type { AnalysisPageProps } from '@/types';
|
||||
import { Head, usePage } from '@inertiajs/react';
|
||||
import { Head, router, usePage } from '@inertiajs/react';
|
||||
import { CalendarIcon, Filter, FilterX } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { AovTrendChart } from '../components/charts/aov-trend-chart';
|
||||
import { CustomBarChart } from '../components/charts/bar-chart';
|
||||
import { CustomPieChart } from '../components/charts/pie-chart';
|
||||
import { RevenueVsProfitChart } from '../components/charts/revenue-vs-profit-chart';
|
||||
import { TransactionVolumeChart } from '../components/charts/transaction-volume-chart';
|
||||
import { AovTrendChart } from '../components/charts/aov-trend-chart';
|
||||
import { RevenueVsPurchasesChart } from '../components/charts/revenue-vs-purchases-chart';
|
||||
import { SalesByHourChart } from '../components/charts/sales-by-hour-chart';
|
||||
import { TransactionVolumeChart } from '../components/charts/transaction-volume-chart';
|
||||
|
||||
export default function Analisa() {
|
||||
const { stats, salesByMonth, revenueVsProfit, transactionVolume, salesByHour, paymentMethods, orderStatuses, orderChannels, topProducts, topCustomers, topCategories } =
|
||||
const { stats, salesByMonth, revenueVsProfit, transactionVolume, salesByHour, paymentMethods, orderStatuses, orderChannels, topProducts, topCustomers, topCategories, filters } =
|
||||
usePage<AnalysisPageProps>().props;
|
||||
|
||||
const [period, setPeriod] = useState(filters.period || 'all');
|
||||
const [startDate, setStartDate] = useState(filters.start_date || '');
|
||||
const [endDate, setEndDate] = useState(filters.end_date || '');
|
||||
const [isStartOpen, setIsStartOpen] = useState(false);
|
||||
const [isEndOpen, setIsEndOpen] = useState(false);
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return null;
|
||||
return new Intl.DateTimeFormat("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}).format(new Date(dateStr));
|
||||
};
|
||||
|
||||
const formatToYmd = (date: Date) => {
|
||||
return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, '0') + "-" + String(date.getDate()).padStart(2, '0');
|
||||
};
|
||||
|
||||
const applyFilters = (newParams: any) => {
|
||||
router.get(analysis().url, {
|
||||
...filters,
|
||||
...newParams
|
||||
}, {
|
||||
preserveState: true,
|
||||
preserveScroll: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handlePeriodChange = (value: string) => {
|
||||
setPeriod(value);
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
applyFilters({ period: value, start_date: '', end_date: '' });
|
||||
};
|
||||
|
||||
const handleCustomFilter = () => {
|
||||
if (startDate && endDate) {
|
||||
setPeriod('custom');
|
||||
applyFilters({ period: 'custom', start_date: startDate, end_date: endDate });
|
||||
}
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setPeriod('all');
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
applyFilters({ period: 'all', start_date: '', end_date: '' });
|
||||
};
|
||||
|
||||
const getFilterDescription = (baseDesc: string) => {
|
||||
if (filters.start_date && filters.end_date) {
|
||||
return `${baseDesc} (Periode: ${filters.start_date} s/d ${filters.end_date})`;
|
||||
}
|
||||
switch (filters.period) {
|
||||
case 'week': return `${baseDesc} (Pekan Ini)`;
|
||||
case 'month': return `${baseDesc} (Bulan Ini)`;
|
||||
case 'year': return `${baseDesc} (Tahun Ini)`;
|
||||
default: return `${baseDesc} (Semua Waktu)`;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Analisa" />
|
||||
|
||||
<div className="flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-6 @container/main">
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Analisa</h1>
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Analisa</h1>
|
||||
<p className="text-muted-foreground text-sm">Lihat performa bisnis Anda secara mendalam.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Select value={period} onValueChange={handlePeriodChange}>
|
||||
<SelectTrigger className="w-[140px] bg-card">
|
||||
<SelectValue placeholder="Pilih Periode" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Semua Waktu</SelectItem>
|
||||
<SelectItem value="week">Pekan Ini</SelectItem>
|
||||
<SelectItem value="month">Bulan Ini</SelectItem>
|
||||
<SelectItem value="year">Tahun Ini</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-md border bg-card p-1">
|
||||
<Popover open={isStartOpen} onOpenChange={setIsStartOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-[140px] justify-start px-2 font-normal"
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-3 w-3 text-muted-foreground" />
|
||||
<span className="truncate">
|
||||
{startDate ? formatDate(startDate) : "Mulai"}
|
||||
</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={startDate ? new Date(startDate) : undefined}
|
||||
onSelect={(date) => {
|
||||
setStartDate(date ? formatToYmd(date) : '');
|
||||
setIsStartOpen(false);
|
||||
}}
|
||||
captionLayout="dropdown"
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<span className="text-muted-foreground text-xs">s/d</span>
|
||||
|
||||
<Popover open={isEndOpen} onOpenChange={setIsEndOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-[140px] justify-start px-2 font-normal"
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-3 w-3 text-muted-foreground" />
|
||||
<span className="truncate">
|
||||
{endDate ? formatDate(endDate) : "Selesai"}
|
||||
</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={endDate ? new Date(endDate) : undefined}
|
||||
onSelect={(date) => {
|
||||
setEndDate(date ? formatToYmd(date) : '');
|
||||
setIsEndOpen(false);
|
||||
}}
|
||||
captionLayout="dropdown"
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
className="h-8 px-3"
|
||||
onClick={handleCustomFilter}
|
||||
disabled={!startDate || !endDate}
|
||||
>
|
||||
<Filter className="mr-2 h-4 w-4" />
|
||||
Terapkan
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{(period !== 'all' || (startDate && endDate)) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={clearFilters}
|
||||
className="h-9"
|
||||
>
|
||||
<FilterX className="mr-2 h-4 w-4" />
|
||||
Reset
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
@ -56,36 +222,36 @@ export default function Analisa() {
|
||||
|
||||
{/* Main Trends Grid */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<RevenueVsProfitChart
|
||||
data={revenueVsProfit}
|
||||
<RevenueVsProfitChart
|
||||
data={revenueVsProfit}
|
||||
title="Pendapatan vs Laba"
|
||||
description="Analisis pendapatan kotor dibandingkan dengan laba bersih."
|
||||
description={getFilterDescription("Analisis pendapatan kotor dibandingkan dengan laba bersih.")}
|
||||
/>
|
||||
<RevenueVsPurchasesChart
|
||||
data={salesByMonth}
|
||||
<RevenueVsPurchasesChart
|
||||
data={salesByMonth}
|
||||
title="Penjualan vs Belanja"
|
||||
description="Perbandingan total nilai penjualan dan belanja stok barang."
|
||||
description={getFilterDescription("Perbandingan total nilai penjualan dan belanja stok barang.")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Activity & Volume Grid */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<TransactionVolumeChart
|
||||
data={transactionVolume}
|
||||
<TransactionVolumeChart
|
||||
data={transactionVolume}
|
||||
title="Volume Transaksi"
|
||||
description="Total jumlah pesanan yang diproses per bulan."
|
||||
description={getFilterDescription("Total jumlah pesanan yang diproses per bulan.")}
|
||||
/>
|
||||
<AovTrendChart
|
||||
data={transactionVolume}
|
||||
<AovTrendChart
|
||||
data={transactionVolume}
|
||||
title="Tren AOV"
|
||||
description="Rata-rata nilai belanja per pesanan pelanggan setiap bulannya."
|
||||
description={getFilterDescription("Rata-rata nilai belanja per pesanan pelanggan setiap bulannya.")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SalesByHourChart
|
||||
data={salesByHour}
|
||||
title="Jam Sibuk"
|
||||
description="Grafik aktivitas transaksi berdasarkan waktu (jam) dalam sehari."
|
||||
description={getFilterDescription("Grafik aktivitas transaksi berdasarkan waktu (jam) dalam sehari.")}
|
||||
config={{
|
||||
total: {
|
||||
label: "Total Penjualan",
|
||||
@ -97,25 +263,25 @@ export default function Analisa() {
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2 @4xl/main:grid-cols-4">
|
||||
<CustomPieChart
|
||||
title="Metode Pembayaran"
|
||||
description="Distribusi transaksi berdasarkan metode pembayaran yang digunakan."
|
||||
description={getFilterDescription("Distribusi transaksi berdasarkan metode pembayaran yang digunakan.")}
|
||||
data={paymentMethods}
|
||||
colorOffset={0}
|
||||
/>
|
||||
<CustomPieChart
|
||||
title="Status Pesanan"
|
||||
description="Status terkini dari seluruh pesanan yang masuk."
|
||||
description={getFilterDescription("Status terkini dari seluruh pesanan yang masuk.")}
|
||||
data={orderStatuses}
|
||||
colorOffset={120}
|
||||
/>
|
||||
<CustomPieChart
|
||||
title="Channel Pesanan"
|
||||
description="Sumber pesanan berdasarkan platform atau saluran penjualan."
|
||||
description={getFilterDescription("Sumber pesanan berdasarkan platform atau saluran penjualan.")}
|
||||
data={orderChannels}
|
||||
colorOffset={240}
|
||||
/>
|
||||
<CustomPieChart
|
||||
title="Top 5 Kategori"
|
||||
description="Kategori produk yang paling banyak menyumbang penjualan."
|
||||
description={getFilterDescription("Kategori produk yang paling banyak menyumbang penjualan.")}
|
||||
data={topCategories}
|
||||
colorOffset={60}
|
||||
/>
|
||||
@ -124,13 +290,13 @@ export default function Analisa() {
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<CustomBarChart
|
||||
title="Top 5 Produk"
|
||||
description="Daftar produk dengan volume penjualan tertinggi."
|
||||
description={getFilterDescription("Daftar produk dengan volume penjualan tertinggi.")}
|
||||
data={topProducts}
|
||||
colorOffset={45}
|
||||
/>
|
||||
<CustomBarChart
|
||||
title="Top 5 Pelanggan"
|
||||
description="Pelanggan dengan total nominal belanja tertinggi (setia)."
|
||||
description={getFilterDescription("Pelanggan dengan total nominal belanja tertinggi (setia).")}
|
||||
data={topCustomers}
|
||||
colorOffset={180}
|
||||
isCurrency={true}
|
||||
|
||||
@ -41,5 +41,10 @@ export interface AnalysisPageProps {
|
||||
topProducts: any[];
|
||||
topCustomers: any[];
|
||||
topCategories: any[];
|
||||
filters: {
|
||||
period: string;
|
||||
start_date: string | null;
|
||||
end_date: string | null;
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user