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 { formatDate } from '@/lib/formatters'; import { analysis } from '@/routes'; import type { AnalysisPageProps } from '@/types'; 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 { KnobChart } from '../components/charts/knob-chart'; import { CustomPieChart } from '../components/charts/pie-chart'; import { RevenueVsProfitChart } from '../components/charts/revenue-vs-profit-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, filters, } = usePage().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 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}`; case 'month': return `${baseDesc}`; case 'year': return `${baseDesc}`; default: return `${baseDesc}`; } }; return ( <>

Analisa

Lihat performa bisnis Anda secara mendalam.

{ setStartDate( date ? formatToYmd(date) : '', ); setIsStartOpen(false); }} captionLayout="dropdown" initialFocus /> s/d { setEndDate( date ? formatToYmd(date) : '', ); setIsEndOpen(false); }} captionLayout="dropdown" initialFocus />

{(period !== 'all' || (startDate && endDate)) && ( )}

{/* Stats Grid */}

{[ { title: 'Total Penjualan', stat: stats.total_sales, isCurrency: false, }, { title: 'Total Pendapatan', stat: stats.total_revenue, }, { title: 'Total Pengeluaran', stat: stats.total_expenses, }, { title: 'HPP (Modal)', stat: stats.cogs }, { title: 'AOV (Avg Order Value)', stat: stats.aov }, { title: 'Profit Margin', stat: stats.profit_margin, isPercentage: true, }, { title: 'Total Diskon', stat: stats.total_discount }, { title: 'Laba Kotor', stat: stats.gross_profit }, { title: 'Laba Bersih', stat: stats.net_profit }, { title: 'Total Gaji', stat: stats.total_payrolls }, { title: 'Total Pembelian', stat: stats.total_purchases, }, { title: 'Produk Terjual', stat: stats.products_sold, isCurrency: false, }, { title: 'Total Pelanggan', stat: stats.total_customers, isCurrency: false, }, ].map((item, index) => (

))}

{/* Main Trends Grid */}

{/* Activity & Volume Grid */}

); } Analisa.layout = { breadcrumbs: [ { title: 'Analisa', href: analysis().url, }, ], };