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, router, usePage } from '@inertiajs/react'; import { CalendarIcon, Filter, FilterX } from 'lucide-react'; import { useState } from 'react'; import { formatDate } from '@/lib/formatters'; 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 { 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'; import { KnobChart } from '../components/charts/knob-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, }, ], };