feat: add repeat order percentage analysis using new KnobChart component

app/Http/Controllers/AnalysisController.php

@@ -44,7 +44,14 @@ public function __invoke(Request $request)
             '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')),
+            'total_customers' => $this->getStats(fn () => $applyFilter(Order::query())->whereNotNull('customer_name')->distinct('customer_name')->count('customer_name')),
+            'repeat_customers' => $this->getStats(fn () => $applyFilter(DB::table('orders'))
+                ->whereNotNull('customer_name')
+                ->select('customer_name')
+                ->groupBy('customer_name')
+                ->havingRaw('COUNT(*) > 1')
+                ->get()
+                ->count()),
         ];
 
         $stats['aov'] = $this->calculateAov($stats['total_revenue'], $stats['total_sales']);
@@ -56,6 +63,14 @@ public function __invoke(Request $request)
         ];
         $stats['profit_margin'] = $this->calculateMargin($stats['net_profit'], $stats['total_revenue']);
 
+        $totalCustomers = $stats['total_customers']['value'];
+        $repeatCustomers = $stats['repeat_customers']['value'];
+        $stats['repeat_order_percentage'] = [
+            'value' => $totalCustomers > 0 ? round(($repeatCustomers / $totalCustomers) * 100, 2) : 0,
+            'yesterday' => null,
+            'change' => null,
+        ];
+
         $isSqlite = DB::getDriverName() === 'sqlite';
         $monthSelect = $isSqlite ? "CAST(strftime('%m', created_at) AS INTEGER)" : 'MONTH(created_at)';
 

resources/js/components/charts/knob-chart.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import React, { useMemo } from "react"
+import {
+    Label,
+    PolarGrid,
+    PolarRadiusAxis,
+    RadialBar,
+    RadialBarChart,
+} from "recharts"
+
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card"
+import { ChartConfig, ChartContainer } from "@/components/ui/chart"
+
+export const KnobChart = React.memo(function KnobChart({
+    title,
+    description,
+    percentage,
+    label,
+    footerText
+}: {
+    title: string
+    description: string
+    percentage: number
+    label?: string
+    footerText?: string
+}) {
+    const { chartData, chartConfig } = useMemo(() => {
+        return {
+            chartData: [
+                {
+                    name: "value",
+                    value: percentage,
+                    fill: "hsl(var(--primary))",
+                },
+            ],
+            chartConfig: {
+                value: {
+                    label: label || "Value",
+                },
+            } satisfies ChartConfig,
+        }
+    }, [percentage, label])
+
+    return (
+        <Card className="flex flex-col">
+            <CardHeader className="items-center pb-0">
+                <CardTitle>{title}</CardTitle>
+                <CardDescription>{description}</CardDescription>
+            </CardHeader>
+            <CardContent className="flex-1 pb-0">
+                <ChartContainer
+                    config={chartConfig}
+                    className="mx-auto aspect-square max-h-[250px]"
+                >
+                    <RadialBarChart
+                        data={chartData}
+                        startAngle={90}
+                        endAngle={90 - (360 * (percentage / 100))}
+                        innerRadius={80}
+                        outerRadius={110}
+                    >
+                        <PolarGrid
+                            gridType="circle"
+                            radialLines={false}
+                            stroke="none"
+                            className="first:fill-muted last:fill-background"
+                            polarRadius={[86, 74]}
+                        />
+                        <RadialBar
+                            dataKey="value"
+                            background
+                            cornerRadius={10}
+                        />
+                        <PolarRadiusAxis
+                            tick={false}
+                            tickLine={false}
+                            axisLine={false}
+                        >
+                            <Label
+                                content={({ viewBox }) => {
+                                    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                        return (
+                                            <text
+                                                x={viewBox.cx}
+                                                y={viewBox.cy}
+                                                textAnchor="middle"
+                                                dominantBaseline="middle"
+                                            >
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={viewBox.cy}
+                                                    className="fill-foreground text-4xl font-bold"
+                                                >
+                                                    {percentage.toFixed(1)}%
+                                                </tspan>
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={(viewBox.cy || 0) + 24}
+                                                    className="fill-muted-foreground"
+                                                >
+                                                    {label || "Percentage"}
+                                                </tspan>
+                                            </text>
+                                        )
+                                    }
+                                }}
+                            />
+                        </PolarRadiusAxis>
+                    </RadialBarChart>
+                </ChartContainer>
+            </CardContent>
+            {footerText && (
+                <CardFooter className="flex-col gap-2 text-sm">
+                    <div className="leading-none text-muted-foreground">
+                        {footerText}
+                    </div>
+                </CardFooter>
+            )}
+        </Card>
+    )
+})

resources/js/pages/analysis.tsx

@@ -16,6 +16,7 @@ import { RevenueVsProfitChart } from '../components/charts/revenue-vs-profit-cha
 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 } =
@@ -228,7 +229,7 @@ export default function Analisa() {
                 </div>
 
                 {/* Activity & Volume Grid */}
-                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
                     <TransactionVolumeChart
                         data={transactionVolume}
                         title="Volume Transaksi"
@@ -239,6 +240,13 @@ export default function Analisa() {
                         title="Tren AOV"
                         description={getFilterDescription("Rata-rata nilai belanja per pesanan pelanggan setiap bulannya.")}
                     />
+                    <KnobChart
+                        title="Repeat Order"
+                        description={getFilterDescription("Persentase pelanggan yang kembali berbelanja.")}
+                        percentage={stats.repeat_order_percentage.value}
+                        label="Repeat Order"
+                        footerText={`${stats.repeat_customers.value} dari ${stats.total_customers.value} pelanggan melakukan repeat order.`}
+                    />
                 </div>
 
                 <SalesByHourChart

resources/js/types/dashboard.ts

@@ -20,6 +20,8 @@ export interface DashboardStats {
     total_purchases: StatItem;
     products_sold: StatItem;
     total_customers: StatItem;
+    repeat_customers: StatItem;
+    repeat_order_percentage: StatItem;
 }
 
 export interface DashboardPageProps {