feat: add monthly retail revenue calculation and display in analysis component

app/Http/Controllers/AnalysisController.php

@@ -45,6 +45,7 @@ public function index(Request $request): Response
         $marketingSales = $this->service->getMarketingSales($startDate, $endDate, $user);
         $orderStats = $this->service->getOrderStats($startDate, $endDate, $user);
         $revenueTrend = $this->service->getRevenueTrend($startDate, $endDate, $user);
+        $monthlyRetailRevenue = $this->service->getMonthlyRetailRevenue($startDate, $endDate, $user);
 
         return Inertia::render('admin/analysis/index', [
             'filters' => [
@@ -72,6 +73,7 @@ public function index(Request $request): Response
             'marketingSales' => $marketingSales,
             'orderStats' => $orderStats,
             'revenueTrend' => $revenueTrend,
+            'monthlyRetailRevenue' => $monthlyRetailRevenue,
         ]);
     }
 }

app/Services/AnalysisService.php

@@ -445,6 +445,75 @@ public function getMonthlyRevenue(?string $startDate, ?string $endDate, ?User $u
         return $result;
     }
 
+    public function getMonthlyRetailRevenue(?string $startDate, ?string $endDate, ?User $user = null): array
+    {
+        $query = Order::where('orders.status', OrderStatus::COMPLETED);
+        $this->applyDateFilter($query, $startDate, $endDate, 'orders.created_at');
+
+        if ($user && $this->isMarketingUser($user)) {
+            $query->where('orders.marketing_id', $user->id);
+        }
+
+        if ($user && $this->isCashierUser($user)) {
+            $query->whereIn('orders.created_by_id', $this->getCashierUserIds());
+        }
+
+        $retailOrderIds = OrderItem::where('stock_quality', 'retail')
+            ->pluck('order_id')
+            ->unique();
+
+        $query->whereIn('orders.id', $retailOrderIds);
+
+        $monthly = (clone $query)
+            ->selectRaw("DATE_FORMAT(created_at, '%b %Y') as month")
+            ->selectRaw('COALESCE(SUM(total_amount), 0) as total')
+            ->selectRaw('COALESCE(SUM(discount), 0) as discount')
+            ->selectRaw('COALESCE(SUM(nego_price), 0) as deduction')
+            ->selectRaw('COALESCE(SUM(cogs), 0) as cogs')
+            ->groupBy(DB::raw("DATE_FORMAT(created_at, '%Y-%m')"), DB::raw("DATE_FORMAT(created_at, '%b %Y')"))
+            ->orderBy(DB::raw("DATE_FORMAT(created_at, '%Y-%m')"))
+            ->get()
+            ->keyBy('month');
+
+        $summary = (clone $query)
+            ->selectRaw('COALESCE(SUM(total_amount), 0) as total')
+            ->selectRaw('COALESCE(SUM(discount), 0) as discount')
+            ->selectRaw('COALESCE(SUM(nego_price), 0) as deduction')
+            ->selectRaw('COALESCE(SUM(cogs), 0) as cogs')
+            ->first();
+
+        $gross = (int) $summary->total - (int) $summary->cogs;
+
+        $result = [];
+        foreach ($monthly as $month => $row) {
+            $total = (int) $row->total;
+            $discount = (int) $row->discount;
+            $deduction = (int) $row->deduction;
+            $cogs = (int) $row->cogs;
+            $itemGross = $total - $cogs;
+
+            $result[] = [
+                'month' => $month,
+                'total' => $total,
+                'gross' => $itemGross,
+                'discount' => $discount,
+                'deduction' => $deduction,
+                'cogs' => $cogs,
+            ];
+        }
+
+        return [
+            'monthly' => $result,
+            'summary' => [
+                'total' => (int) $summary->total,
+                'discount' => (int) $summary->discount,
+                'deduction' => (int) $summary->deduction,
+                'cogs' => (int) $summary->cogs,
+                'gross' => $gross,
+            ],
+        ];
+    }
+
     public function getMonthlyRevenueByChannel(?string $startDate, ?string $endDate, ?User $user = null): array
     {
         $query = Order::where('orders.status', OrderStatus::COMPLETED);

resources/js/pages/admin/analysis/index.tsx

@@ -203,6 +203,23 @@ type AnalysisProps = {
         date: string;
         qty: number;
     }>;
+    monthlyRetailRevenue: {
+        monthly: Array<{
+            month: string;
+            total: number;
+            gross: number;
+            discount: number;
+            deduction: number;
+            cogs: number;
+        }>;
+        summary: {
+            total: number;
+            discount: number;
+            deduction: number;
+            cogs: number;
+            gross: number;
+        };
+    };
 };
 
 const revenueChartConfig = (() => {
@@ -219,6 +236,19 @@ const revenueChartConfig = (() => {
 
 const revenueKeys = ['total', 'deduction', 'discount', 'cogs', 'gross', 'net'] as const;
 
+const retailRevenueChartConfig = (() => {
+    const colors = generateRandomColors(5);
+    return {
+        total: { label: 'Total', color: colors[0] },
+        gross: { label: 'Keuntungan Kotor', color: colors[1] },
+        deduction: { label: 'Potongan Nego', color: colors[2] },
+        discount: { label: 'Diskon', color: colors[3] },
+        cogs: { label: 'HPP', color: colors[4] },
+    } satisfies ChartConfig;
+})();
+
+const retailRevenueKeys = ['total', 'deduction', 'discount', 'cogs', 'gross'] as const;
+
 const expenseChartConfig = (() => {
     const colors = generateRandomColors(4);
     return {
@@ -450,12 +480,14 @@ export default function Analysis({
     marketingSales,
     orderStats,
     revenueTrend,
+    monthlyRetailRevenue,
 }: AnalysisProps) {
     const { can, hasAnyRole, hasRole } = useCan();
     const [startDate, setStartDate] = useState(initialFilters.start_date ?? '');
     const [endDate, setEndDate] = useState(initialFilters.end_date ?? '');
     const [selectedPreset, setSelectedPreset] = useState('');
     const [activeRevenueKey, setActiveRevenueKey] = useState<keyof typeof revenueChartConfig>('total');
+    const [activeRetailRevenueKey, setActiveRetailRevenueKey] = useState<keyof typeof retailRevenueChartConfig>('total');
     const [activeExpenseKey, setActiveExpenseKey] = useState<keyof typeof expenseChartConfig>('total');
     const [activeStockKey, setActiveStockKey] = useState<'good' | 'reject' | 'retail'>('good');
 
@@ -878,6 +910,70 @@ export default function Analysis({
                     </div>
                 )}
 
+                {can('analysis.revenue') && (
+                    <Card className="py-0" style={{ order: (sectionOrder.revenueByChannel ?? 99) + 0.5 }}>
+                        <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
+                            <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
+                                <CardTitle>Pendapatan Penjualan Ecer</CardTitle>
+                            </div>
+                            <div className="flex flex-col sm:flex-row">
+                                {retailRevenueKeys.map((key) => {
+                                    const value = key === 'total' ? monthlyRetailRevenue.summary.total : key === 'discount' ? monthlyRetailRevenue.summary.discount : key === 'gross' ? monthlyRetailRevenue.summary.gross : key === 'cogs' ? monthlyRetailRevenue.summary.cogs : monthlyRetailRevenue.summary.deduction;
+                                    return (
+                                        <button
+                                            key={key}
+                                            data-active={activeRetailRevenueKey === key}
+                                            className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-2 text-left even:border-l data-[active=true]:bg-muted/30 sm:border-t-0 sm:border-l sm:px-5 sm:py-3"
+                                            onClick={() => setActiveRetailRevenueKey(key)}
+                                        >
+                                            <span className="text-[10px] text-muted-foreground">
+                                                {retailRevenueChartConfig[key].label}
+                                            </span>
+                                            <span className="text-xs leading-none font-semibold sm:text-sm">
+                                                Rp{formatRupiah(value)}
+                                            </span>
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        </CardHeader>
+                        <CardContent className="px-2 sm:p-6">
+                            {monthlyRetailRevenue.monthly.length > 0 ? (
+                                <ChartContainer config={retailRevenueChartConfig} className="aspect-auto h-[250px] w-full">
+                                    <BarChart data={monthlyRetailRevenue.monthly} margin={{ left: 12, right: 12 }}>
+                                        <CartesianGrid vertical={false} />
+                                        <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+                                        <ChartTooltip
+                                            cursor={false}
+                                            content={
+                                                <ChartTooltipContent
+                                                    className="w-[150px]"
+                                                    nameKey="views"
+                                                    formatter={(value, name, item, index) => (
+                                                        <>
+                                                            <div
+                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
+                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
+                                                            />
+                                                            <span className="text-muted-foreground">{retailRevenueChartConfig[activeRetailRevenueKey]?.label ?? name}</span>
+                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
+                                                                Rp{Number(value).toLocaleString('id-ID')}
+                                                            </span>
+                                                        </>
+                                                    )}
+                                                />
+                                            }
+                                        />
+                                        <Bar dataKey={activeRetailRevenueKey} fill={`var(--color-${activeRetailRevenueKey})`} radius={[4, 4, 0, 0]} />
+                                    </BarChart>
+                                </ChartContainer>
+                            ) : (
+                                <div className="flex h-[300px] items-center justify-center text-muted-foreground">Belum ada data pendapatan ecer</div>
+                            )}
+                        </CardContent>
+                    </Card>
+                )}
+
                 {can('analysis.revenue') && (
                     <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4" style={{ order: sectionOrder.orderPie ?? 99 }}>
                         <DashboardPieChart