diff --git a/app/Http/Controllers/Admin/AnalysisController.php b/app/Http/Controllers/Admin/AnalysisController.php
index f576168..5d85fbc 100644
--- a/app/Http/Controllers/Admin/AnalysisController.php
+++ b/app/Http/Controllers/Admin/AnalysisController.php
@@ -3,7 +3,7 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
-use App\Services\System\DashboardService;
+use App\Services\System\AnalysisService;
 use Carbon\Carbon;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
@@ -12,7 +12,7 @@
 class AnalysisController extends Controller
 {
     public function __construct(
-        private readonly DashboardService $dashboardService,
+        private readonly AnalysisService $analysisService,
     ) {}
 
     public function index(Request $request): Response
@@ -25,18 +25,19 @@ public function index(Request $request): Response
                 'start_date' => $request->query('start_date', ''),
                 'end_date' => $request->query('end_date', ''),
             ],
-            'rawMaterialStock' => $this->dashboardService->getRawMaterialStock(),
-            'productStock' => $this->dashboardService->getProductStock(),
-            'kasbonSummary' => $this->dashboardService->getKasbonSummary($startDate, $endDate),
-            'leaveRequestSummary' => $this->dashboardService->getLeaveRequestSummary($startDate, $endDate),
-            'lowStockProducts' => $this->dashboardService->getLowStockProducts(),
-            'lowStockMaterials' => $this->dashboardService->getLowStockMaterials(),
-            'attendanceToday' => $this->dashboardService->getAttendanceToday($startDate, $endDate),
-            'cashAccounts' => $this->dashboardService->getCashAccounts(),
-            'cashSummary' => $this->dashboardService->getCashSummary($startDate, $endDate),
-            'purchaseSummary' => $this->dashboardService->getPurchaseSummary($startDate, $endDate),
-            'monthlyExpenses' => $this->dashboardService->getMonthlyExpenses($startDate, $endDate),
-            'revenueSummary' => $this->dashboardService->getRevenueSummary($startDate, $endDate),
+            'attendance' => $this->analysisService->getAttendance(),
+            'cashOverview' => $this->analysisService->getCashOverview(),
+            'rawMaterialStock' => $this->analysisService->getRawMaterialStock(),
+            'productStock' => $this->analysisService->getProductStock(),
+            'revenueSummary' => $this->analysisService->getRevenueSummary($startDate, $endDate),
+            'monthlyRevenue' => $this->analysisService->getMonthlyRevenue($startDate, $endDate),
+            'expenseSummary' => $this->analysisService->getExpenseSummary($startDate, $endDate),
+            'monthlyExpense' => $this->analysisService->getMonthlyExpense($startDate, $endDate),
+            'busyHours' => $this->analysisService->getBusyHours($startDate, $endDate),
+            'profitMetrics' => $this->analysisService->getProfitMetrics($startDate, $endDate),
+            'topSuppliers' => $this->analysisService->getTopSuppliers($startDate, $endDate),
+            'topCustomers' => $this->analysisService->getTopCustomers($startDate, $endDate),
+            'topProducts' => $this->analysisService->getTopProducts($startDate, $endDate),
         ]);
     }
 }
diff --git a/app/Http/Controllers/Admin/DashboardController.php b/app/Http/Controllers/Admin/DashboardController.php
index a99c3aa..f0901c8 100644
--- a/app/Http/Controllers/Admin/DashboardController.php
+++ b/app/Http/Controllers/Admin/DashboardController.php
@@ -21,10 +21,6 @@ public function index(): Response
             'revenueSummary' => $this->dashboardService->getRevenueSummary(),
             'expenseSummary' => $this->dashboardService->getExpenseSummary(),
 
-            'topSuppliers' => $this->dashboardService->getTopSuppliers(),
-            'topCustomers' => $this->dashboardService->getTopCustomers(),
-            'topProducts' => $this->dashboardService->getTopProducts(),
-
             'orderStats' => $this->dashboardService->getOrderStats(),
         ]);
     }
diff --git a/app/Services/System/AnalysisService.php b/app/Services/System/AnalysisService.php
new file mode 100644
index 0000000..4b00618
--- /dev/null
+++ b/app/Services/System/AnalysisService.php
@@ -0,0 +1,466 @@
+<?php
+
+namespace App\Services\System;
+
+use App\Enums\OrderStatus;
+use App\Models\Attendance;
+use App\Models\CashAccount;
+use App\Models\CashTransaction;
+use App\Models\Employee;
+use App\Models\EmployeeAdvance;
+use App\Models\Expense;
+use App\Models\LeaveRequest;
+use App\Models\Order;
+use App\Models\OrderItem;
+use App\Models\ProductVariant;
+use App\Models\Purchase;
+use App\Models\RawMaterialPrice;
+use Carbon\Carbon;
+
+class AnalysisService
+{
+    public function getAttendance(): array
+    {
+        $totalEmployees = Employee::query()->count();
+        $today = Carbon::today();
+
+        $present = Attendance::query()
+            ->where('attendance_date', $today)
+            ->distinct('employee_id')
+            ->count('employee_id');
+
+        $onLeave = LeaveRequest::query()
+            ->approved()
+            ->where('start_date', '<=', $today)
+            ->where('end_date', '>=', $today)
+            ->distinct('employee_id')
+            ->count('employee_id');
+
+        $absent = max(0, $totalEmployees - $present - $onLeave);
+
+        return [
+            'total_employees' => $totalEmployees,
+            'percentage' => $totalEmployees > 0 ? round($present / $totalEmployees * 100) : 0,
+            'present' => $present,
+            'absent' => $absent,
+            'on_leave' => $onLeave,
+        ];
+    }
+
+    public function getCashOverview(): array
+    {
+        $totalBalance = CashAccount::query()->sum('balance');
+
+        $summary = CashTransaction::query()
+            ->whereDate('created_at', Carbon::today())
+            ->selectRaw("
+                COUNT(*) as total_transactions,
+                COALESCE(SUM(CASE WHEN type = 'deposit' THEN amount ELSE 0 END), 0) as total_deposit,
+                COALESCE(SUM(CASE WHEN type = 'withdrawal' THEN amount ELSE 0 END), 0) as total_withdrawal
+            ")
+            ->first();
+
+        return [
+            'total_balance' => (int) $totalBalance,
+            'total_transactions' => (int) ($summary->total_transactions ?? 0),
+            'total_deposit' => (int) ($summary->total_deposit ?? 0),
+            'total_withdrawal' => (int) ($summary->total_withdrawal ?? 0),
+        ];
+    }
+
+    public function getTopSuppliers(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        return Purchase::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('purchases.created_at', [$startDate, $endDate]))
+            ->join('suppliers', 'purchases.supplier_id', '=', 'suppliers.id')
+            ->selectRaw('suppliers.name, SUM(purchases.total) as total_amount, COUNT(purchases.id) as purchase_count')
+            ->groupBy('suppliers.id', 'suppliers.name')
+            ->orderByDesc('total_amount')
+            ->limit(5)
+            ->get()
+            ->map(fn ($item) => [
+                'name' => $item->name,
+                'total_amount' => (int) $item->total_amount,
+                'purchase_count' => (int) $item->purchase_count,
+            ])
+            ->toArray();
+    }
+
+    public function getTopCustomers(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        return Order::query()
+            ->completed()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
+            ->join('customers', 'orders.customer_id', '=', 'customers.id')
+            ->selectRaw('customers.name, SUM(orders.total_amount) as total_amount, COUNT(orders.id) as order_count')
+            ->groupBy('customers.id', 'customers.name')
+            ->orderByDesc('total_amount')
+            ->limit(5)
+            ->get()
+            ->map(fn ($item) => [
+                'name' => $item->name,
+                'total_amount' => (int) $item->total_amount,
+                'order_count' => (int) $item->order_count,
+            ])
+            ->toArray();
+    }
+
+    public function getRevenueSummary(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        $revenueSummary = Order::query()
+            ->completed()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
+            ->selectRaw('SUM(total_amount) as total_revenue, SUM(discount) as total_discount, SUM(shipping_cost) as total_shipping, COUNT(*) as total_orders, AVG(total_amount) as avg_order')
+            ->first();
+
+        $totalMarketplaceFees = Order::query()
+            ->completed()
+            ->whereNotNull('marketplace_settings_snapshot')
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
+            ->get()
+            ->sum(fn ($order) => (int) ($order->marketplace_settings_snapshot['total_fee_amount'] ?? 0));
+
+        return [
+            'total_revenue' => (int) ($revenueSummary->total_revenue ?? 0),
+            'total_discount' => (int) ($revenueSummary->total_discount ?? 0),
+            'total_marketplace_fees' => $totalMarketplaceFees,
+            'total_potongan' => (int) ($revenueSummary->total_discount ?? 0) + $totalMarketplaceFees,
+            'total_shipping' => (int) ($revenueSummary->total_shipping ?? 0),
+            'total_orders' => (int) ($revenueSummary->total_orders ?? 0),
+            'avg_order' => (int) ($revenueSummary->avg_order ?? 0),
+        ];
+    }
+
+    public function getMonthlyRevenue(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        $query = Order::query()->completed();
+        $feeQuery = Order::query()->completed()->whereNotNull('marketplace_settings_snapshot');
+
+        if ($startDate && $endDate) {
+            $query->whereBetween('orders.created_at', [$startDate, $endDate]);
+            $feeQuery->whereBetween('orders.created_at', [$startDate, $endDate]);
+        }
+
+        $monthlyData = $query
+            ->selectRaw("
+                DATE_FORMAT(orders.created_at, '%Y-%m') as month_key,
+                SUM(total_amount) as total_revenue,
+                SUM(discount) as total_discount,
+                SUM(shipping_cost) as total_shipping
+            ")
+            ->groupBy('month_key')
+            ->orderBy('month_key')
+            ->get();
+
+        $monthlyFees = $feeQuery
+            ->selectRaw("DATE_FORMAT(orders.created_at, '%Y-%m') as month_key")
+            ->get()
+            ->groupBy('month_key')
+            ->map(fn ($orders) => $orders->sum(fn ($order) => (int) ($order->marketplace_settings_snapshot['total_fee_amount'] ?? 0)));
+
+        if ($monthlyData->isEmpty()) {
+            return [];
+        }
+
+        $start = $startDate ?? Carbon::parse($monthlyData->first()->month_key.'-01');
+        $end = $endDate ?? Carbon::parse($monthlyData->last()->month_key.'-01')->endOfMonth();
+
+        $result = [];
+        $current = $start->copy()->startOfMonth();
+        while ($current->lte($end)) {
+            $key = $current->format('Y-m');
+            $monthLabel = $current->locale('id')->translatedFormat('M Y');
+
+            $revenue = $monthlyData->firstWhere('month_key', $key);
+            $fees = $monthlyFees->get($key, 0);
+            $discount = (int) ($revenue->total_discount ?? 0);
+            $potongan = $discount + $fees;
+
+            $result[] = [
+                'month' => $monthLabel,
+                'total' => (int) ($revenue->total_revenue ?? 0),
+                'net' => (int) ($revenue->total_revenue ?? 0) - $potongan,
+                'potongan' => $potongan,
+                'ongkir' => (int) ($revenue->total_shipping ?? 0),
+            ];
+
+            $current->addMonth();
+        }
+
+        return $result;
+    }
+
+    public function getExpenseSummary(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        $purchase = Purchase::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('purchases.created_at', [$startDate, $endDate]))
+            ->selectRaw('COALESCE(SUM(total), 0) as total')
+            ->first();
+
+        $expenses = Expense::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('expenses.created_at', [$startDate, $endDate]))
+            ->selectRaw('COALESCE(SUM(amount), 0) as total')
+            ->first();
+
+        $employeeAdvance = EmployeeAdvance::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('employee_advances.created_at', [$startDate, $endDate]))
+            ->selectRaw('COALESCE(SUM(amount), 0) as total')
+            ->first();
+
+        $purchaseTotal = (int) ($purchase->total ?? 0);
+        $expenseTotal = (int) ($expenses->total ?? 0);
+        $advanceTotal = (int) ($employeeAdvance->total ?? 0);
+
+        return [
+            'total' => $purchaseTotal + $expenseTotal + $advanceTotal,
+            'purchase_total' => $purchaseTotal,
+            'expense_total' => $expenseTotal,
+            'advance_total' => $advanceTotal,
+        ];
+    }
+
+    public function getMonthlyExpense(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        $purchases = Purchase::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('purchases.created_at', [$startDate, $endDate]))
+            ->selectRaw("DATE_FORMAT(purchases.created_at, '%Y-%m') as month_key, COALESCE(SUM(total), 0) as total")
+            ->groupBy('month_key')
+            ->orderBy('month_key')
+            ->get();
+
+        $expenses = Expense::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('expenses.created_at', [$startDate, $endDate]))
+            ->selectRaw("DATE_FORMAT(expenses.created_at, '%Y-%m') as month_key, COALESCE(SUM(amount), 0) as total")
+            ->groupBy('month_key')
+            ->orderBy('month_key')
+            ->get();
+
+        $advances = EmployeeAdvance::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('employee_advances.created_at', [$startDate, $endDate]))
+            ->selectRaw("DATE_FORMAT(employee_advances.created_at, '%Y-%m') as month_key, COALESCE(SUM(amount), 0) as total")
+            ->groupBy('month_key')
+            ->orderBy('month_key')
+            ->get();
+
+        $allMonths = collect()
+            ->merge($purchases->pluck('month_key'))
+            ->merge($expenses->pluck('month_key'))
+            ->merge($advances->pluck('month_key'))
+            ->unique()
+            ->sort()
+            ->values();
+
+        if ($allMonths->isEmpty()) {
+            return [];
+        }
+
+        $start = $startDate ?? Carbon::parse($allMonths->first().'-01');
+        $end = $endDate ?? Carbon::parse($allMonths->last().'-01')->endOfMonth();
+
+        $result = [];
+        $current = $start->copy()->startOfMonth();
+        while ($current->lte($end)) {
+            $key = $current->format('Y-m');
+            $monthLabel = $current->locale('id')->translatedFormat('M Y');
+
+            $purchaseAmount = (int) ($purchases->firstWhere('month_key', $key)->total ?? 0);
+            $expenseAmount = (int) ($expenses->firstWhere('month_key', $key)->total ?? 0);
+            $advanceAmount = (int) ($advances->firstWhere('month_key', $key)->total ?? 0);
+
+            $result[] = [
+                'month' => $monthLabel,
+                'total' => $purchaseAmount + $expenseAmount + $advanceAmount,
+                'belanja' => $purchaseAmount,
+                'pengeluaran' => $expenseAmount,
+                'kasbon' => $advanceAmount,
+            ];
+
+            $current->addMonth();
+        }
+
+        return $result;
+    }
+
+    public function getProfitMetrics(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        $orderQuery = Order::query()->completed();
+        if ($startDate && $endDate) {
+            $orderQuery->whereBetween('orders.created_at', [$startDate, $endDate]);
+        }
+
+        $revenueData = (clone $orderQuery)
+            ->selectRaw('
+                COUNT(*) as total_orders,
+                SUM(total_amount) as total_revenue,
+                SUM(discount) as total_discount,
+                SUM(subtotal) as total_subtotal
+            ')
+            ->first();
+
+        $totalRevenue = (int) ($revenueData->total_revenue ?? 0);
+        $totalDiscount = (int) ($revenueData->total_discount ?? 0);
+        $totalSubtotal = (int) ($revenueData->total_subtotal ?? 0);
+        $totalOrders = (int) ($revenueData->total_orders ?? 0);
+
+        $marketplaceFees = (clone $orderQuery)
+            ->whereNotNull('marketplace_settings_snapshot')
+            ->get()
+            ->sum(fn ($order) => (int) ($order->marketplace_settings_snapshot['total_fee_amount'] ?? 0));
+
+        $itemsData = OrderItem::query()
+            ->join('orders', 'order_items.order_id', '=', 'orders.id')
+            ->where('orders.status', OrderStatus::COMPLETED)
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
+            ->selectRaw('
+                SUM(order_items.quantity) as total_qty,
+                COUNT(order_items.id) as total_items
+            ')
+            ->first();
+
+        $totalQty = (int) ($itemsData->total_qty ?? 0);
+        $totalItems = (int) ($itemsData->total_items ?? 0);
+
+        // HPP from cutting_result_prices
+        $hpp = OrderItem::query()
+            ->join('orders', 'order_items.order_id', '=', 'orders.id')
+            ->leftJoin('cutting_result_prices', 'order_items.product_variant_id', '=', 'cutting_result_prices.product_variant_id')
+            ->where('orders.status', OrderStatus::COMPLETED)
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
+            ->selectRaw('COALESCE(SUM(order_items.quantity * cutting_result_prices.cost_per_unit), 0) as total_hpp')
+            ->value('total_hpp');
+
+        $totalHpp = (int) ($hpp ?? 0);
+
+        // Expenses
+        $purchaseTotal = Purchase::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('purchases.created_at', [$startDate, $endDate]))
+            ->sum('total');
+
+        $expenseTotal = Expense::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('expenses.created_at', [$startDate, $endDate]))
+            ->sum('amount');
+
+        $advanceTotal = EmployeeAdvance::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('employee_advances.created_at', [$startDate, $endDate]))
+            ->sum('amount');
+
+        $totalExpenses = (int) $purchaseTotal + (int) $expenseTotal + (int) $advanceTotal;
+
+        $labaKotor = $totalRevenue - $totalHpp - $totalDiscount - $marketplaceFees;
+        $labaBersih = $labaKotor - $totalExpenses;
+        $profitMargin = $totalRevenue > 0 ? round(($labaBersih / $totalRevenue) * 100, 1) : 0;
+        $aov = $totalOrders > 0 ? (int) round($totalRevenue / $totalOrders) : 0;
+        $itemsPerTransaction = $totalOrders > 0 ? round($totalItems / $totalOrders, 1) : 0;
+
+        return [
+            'total_orders' => $totalOrders,
+            'total_products_sold' => $totalQty,
+            'hpp' => $totalHpp,
+            'laba_kotor' => $labaKotor,
+            'laba_bersih' => $labaBersih,
+            'profit_margin' => $profitMargin,
+            'aov' => $aov,
+            'items_per_transaction' => $itemsPerTransaction,
+        ];
+    }
+
+    public function getRawMaterialStock(): array
+    {
+        $prices = RawMaterialPrice::query()
+            ->join('raw_materials', 'raw_material_prices.raw_material_id', '=', 'raw_materials.id')
+            ->selectRaw('
+                raw_materials.unit,
+                SUM(raw_material_prices.stock) as total_stock,
+                SUM(raw_material_prices.stock * raw_material_prices.price) as total_value
+            ')
+            ->groupBy('raw_materials.unit')
+            ->get()
+            ->keyBy('unit');
+
+        $totalStock = (float) $prices->sum('total_stock');
+        $totalValue = (int) $prices->sum('total_value');
+
+        return [
+            'total_stock' => round($totalStock, 2),
+            'total_value' => $totalValue,
+            'by_unit' => [
+                'yard' => round((float) ($prices->get('yard')->total_stock ?? 0), 2),
+                'meter' => round((float) ($prices->get('meter')->total_stock ?? 0), 2),
+                'kilogram' => round((float) ($prices->get('kilogram')->total_stock ?? 0), 2),
+            ],
+        ];
+    }
+
+    public function getProductStock(): array
+    {
+        $variants = ProductVariant::query()
+            ->join('products', 'product_variants.product_id', '=', 'products.id')
+            ->selectRaw('
+                SUM(product_variants.stock) as total_stock,
+                SUM(product_variants.reject_stock) as total_reject,
+                COUNT(product_variants.id) as total_variants,
+                COUNT(DISTINCT products.id) as total_products
+            ')
+            ->first();
+
+        $totalValue = \DB::table('product_prices')
+            ->join('product_variants', 'product_prices.variant_id', '=', 'product_variants.id')
+            ->selectRaw('SUM(product_variants.stock * product_prices.price) as total')
+            ->value('total');
+
+        $totalCategories = \DB::table('product_categories')
+            ->distinct('category_id')
+            ->count('category_id');
+
+        return [
+            'total_stock' => (int) ($variants->total_stock ?? 0),
+            'total_reject' => (int) ($variants->total_reject ?? 0),
+            'total_value' => (int) ($totalValue ?? 0),
+            'total_products' => (int) ($variants->total_products ?? 0),
+            'total_variants' => (int) ($variants->total_variants ?? 0),
+            'total_categories' => (int) $totalCategories,
+        ];
+    }
+
+    public function getBusyHours(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        $hourlyData = Order::query()
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
+            ->selectRaw('HOUR(orders.created_at) as hour, COUNT(*) as order_count')
+            ->groupBy('hour')
+            ->orderBy('hour')
+            ->get()
+            ->keyBy('hour');
+
+        $result = [];
+        for ($h = 0; $h < 24; $h++) {
+            $result[] = [
+                'hour' => str_pad($h, 2, '0', STR_PAD_LEFT).':00',
+                'orders' => (int) ($hourlyData->get($h)->order_count ?? 0),
+            ];
+        }
+
+        return $result;
+    }
+
+    public function getTopProducts(?Carbon $startDate = null, ?Carbon $endDate = null): array
+    {
+        return OrderItem::query()
+            ->join('orders', 'order_items.order_id', '=', 'orders.id')
+            ->join('product_variants', 'order_items.product_variant_id', '=', 'product_variants.id')
+            ->join('products', 'product_variants.product_id', '=', 'products.id')
+            ->where('orders.status', OrderStatus::COMPLETED)
+            ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
+            ->selectRaw("CONCAT(products.name, ' - ', product_variants.name) as full_name, SUM(order_items.quantity) as total_qty, SUM(order_items.subtotal) as total_revenue")
+            ->groupBy('order_items.product_variant_id', 'products.name', 'product_variants.name')
+            ->orderByDesc('total_qty')
+            ->limit(5)
+            ->get()
+            ->map(fn ($item) => [
+                'name' => $item->full_name,
+                'total_qty' => (int) $item->total_qty,
+                'total_revenue' => (int) $item->total_revenue,
+            ])
+            ->toArray();
+    }
+}
diff --git a/app/Services/System/DashboardService.php b/app/Services/System/DashboardService.php
index c41dc7e..c0999c1 100644
--- a/app/Services/System/DashboardService.php
+++ b/app/Services/System/DashboardService.php
@@ -13,7 +13,6 @@
 use App\Models\Expense;
 use App\Models\LeaveRequest;
 use App\Models\Order;
-use App\Models\OrderItem;
 use App\Models\Purchase;
 use Carbon\Carbon;
 
@@ -125,64 +124,6 @@ public function getExpenseSummary(): array
         ];
     }
 
-    public function getTopSuppliers(): array
-    {
-        return Purchase::query()
-            ->whereDate('purchases.created_at', Carbon::today())
-            ->join('suppliers', 'purchases.supplier_id', '=', 'suppliers.id')
-            ->selectRaw('suppliers.name, SUM(purchases.total) as total_amount, COUNT(purchases.id) as purchase_count')
-            ->groupBy('suppliers.id', 'suppliers.name')
-            ->orderByDesc('total_amount')
-            ->limit(5)
-            ->get()
-            ->map(fn ($item) => [
-                'name' => $item->name,
-                'total_amount' => (int) $item->total_amount,
-                'purchase_count' => (int) $item->purchase_count,
-            ])
-            ->toArray();
-    }
-
-    public function getTopCustomers(): array
-    {
-        return Order::query()
-            ->completed()
-            ->whereDate('orders.created_at', Carbon::today())
-            ->join('customers', 'orders.customer_id', '=', 'customers.id')
-            ->selectRaw('customers.name, SUM(orders.total_amount) as total_amount, COUNT(orders.id) as order_count')
-            ->groupBy('customers.id', 'customers.name')
-            ->orderByDesc('total_amount')
-            ->limit(5)
-            ->get()
-            ->map(fn ($item) => [
-                'name' => $item->name,
-                'total_amount' => (int) $item->total_amount,
-                'order_count' => (int) $item->order_count,
-            ])
-            ->toArray();
-    }
-
-    public function getTopProducts(): array
-    {
-        return OrderItem::query()
-            ->join('orders', 'order_items.order_id', '=', 'orders.id')
-            ->join('product_variants', 'order_items.product_variant_id', '=', 'product_variants.id')
-            ->join('products', 'product_variants.product_id', '=', 'products.id')
-            ->where('orders.status', OrderStatus::COMPLETED)
-            ->whereDate('orders.created_at', Carbon::today())
-            ->selectRaw("CONCAT(products.name, ' - ', product_variants.name) as full_name, SUM(order_items.quantity) as total_qty, SUM(order_items.subtotal) as total_revenue")
-            ->groupBy('order_items.product_variant_id', 'products.name', 'product_variants.name')
-            ->orderByDesc('total_qty')
-            ->limit(5)
-            ->get()
-            ->map(fn ($item) => [
-                'name' => $item->full_name,
-                'total_qty' => (int) $item->total_qty,
-                'total_revenue' => (int) $item->total_revenue,
-            ])
-            ->toArray();
-    }
-
     public function getOrderStats(): array
     {
         $byChannel = Order::query()
diff --git a/resources/js/pages/admin/Analysis.vue b/resources/js/pages/admin/Analysis.vue
index f3bbb87..5680ffd 100644
--- a/resources/js/pages/admin/Analysis.vue
+++ b/resources/js/pages/admin/Analysis.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import LowStockCard from '@/components/card/LowStockCard.vue';
+import { Head, router } from '@inertiajs/vue3';
+import { Banknote, DollarSign, Package, Percent, ShoppingCart, TrendingDown, TrendingUp, UserCheck } from '@lucide/vue';
+import { VisAxis, VisGroupedBar, VisXYContainer } from '@unovis/vue';
+import { computed, ref, watch } from 'vue';
 import StatCard from '@/components/card/StatCard.vue';
-import { DatePicker } from '@/components/ui/date-picker';
 import { Button } from '@/components/ui/button';
 import {
     Card,
@@ -10,56 +12,48 @@ import {
     CardTitle,
     CardDescription,
 } from '@/components/ui/card';
+import type { ChartConfig } from '@/components/ui/chart';
+import { ChartContainer } from '@/components/ui/chart';
+import { DatePicker } from '@/components/ui/date-picker';
 import AdminLayout from '@/layouts/AdminLayout.vue';
-import { Head, router } from '@inertiajs/vue3';
-import { computed, ref, watch } from 'vue';
+import { formatRupiah } from '@/lib/rupiah';
 import admin from '@/routes/admin';
-import {
-    AlertTriangle,
-    Banknote,
-    Clock,
-    CreditCard,
-    FileText,
-    Package,
-    ShoppingCart,
-    TrendingDown,
-    TrendingUp,
-    UserCheck,
-    Calendar,
-} from '@lucide/vue';
 
 const props = defineProps<{
     filters: {
         start_date?: string;
         end_date?: string;
     };
+    attendance: {
+        total_employees: number;
+        percentage: number;
+        present: number;
+        absent: number;
+        on_leave: number;
+    };
+    cashOverview: {
+        total_balance: number;
+        total_transactions: number;
+        total_deposit: number;
+        total_withdrawal: number;
+    };
     rawMaterialStock: {
         total_stock: number;
         total_value: number;
-        by_unit: Record<string, number>;
+        by_unit: {
+            yard: number;
+            meter: number;
+            kilogram: number;
+        };
     };
     productStock: {
         total_stock: number;
         total_reject: number;
         total_value: number;
-        total_variants: number;
         total_products: number;
+        total_variants: number;
         total_categories: number;
     };
-    lowStockProducts: Array<{
-        name: string;
-        stock: number;
-    }>;
-    lowStockMaterials: Array<{
-        name: string;
-        stock: number;
-        unit: string;
-    }>;
-    purchaseSummary: {
-        total_purchases: number;
-        total_spent: number;
-        total_discount: number;
-    };
     revenueSummary: {
         total_revenue: number;
         total_discount: number;
@@ -69,38 +63,55 @@ const props = defineProps<{
         total_orders: number;
         avg_order: number;
     };
-    cashAccounts: Array<{
-        name: string;
-        balance: number;
+    monthlyRevenue: Array<{
+        month: string;
+        total: number;
+        net: number;
+        potongan: number;
+        ongkir: number;
     }>;
-    cashSummary: {
-        total_transactions: number;
-        total_deposit: number;
-        total_withdrawal: number;
-    };
-    monthlyExpenses: {
+    expenseSummary: {
         total: number;
-        count: number;
+        purchase_total: number;
+        expense_total: number;
+        advance_total: number;
     };
-    kasbonSummary: {
-        pending: { count: number; total: number };
-        approved: { count: number; total: number };
-        paid: { count: number; total: number };
+    monthlyExpense: Array<{
+        month: string;
         total: number;
-        total_employees: number;
-    };
-    leaveRequestSummary: {
-        total: number;
-        pending: number;
-        approved: number;
-        rejected: number;
-    };
-    attendanceToday: {
-        total_employees: number;
-        present: number;
-        absent: number;
-        on_leave: number;
+        belanja: number;
+        pengeluaran: number;
+        kasbon: number;
+    }>;
+    busyHours: Array<{
+        hour: string;
+        orders: number;
+    }>;
+    profitMetrics: {
+        total_orders: number;
+        total_products_sold: number;
+        hpp: number;
+        laba_kotor: number;
+        laba_bersih: number;
+        profit_margin: number;
+        aov: number;
+        items_per_transaction: number;
     };
+    topSuppliers: Array<{
+        name: string;
+        total_amount: number;
+        purchase_count: number;
+    }>;
+    topCustomers: Array<{
+        name: string;
+        total_amount: number;
+        order_count: number;
+    }>;
+    topProducts: Array<{
+        name: string;
+        total_qty: number;
+        total_revenue: number;
+    }>;
 }>();
 
 const startDate = ref(props.filters.start_date ?? '');
@@ -108,12 +119,131 @@ const endDate = ref(props.filters.end_date ?? '');
 
 const hasActiveFilters = computed(() => !!startDate.value || !!endDate.value);
 
-function formatRupiah(value: number): string {
-    return 'Rp ' + value.toLocaleString('id-ID');
-}
+// Revenue Chart
+type MonthlyRevenueData = { month: string; total: number; net: number; potongan: number; ongkir: number };
 
-const totalCashBalance = computed(() => {
-    return props.cashAccounts.reduce((sum, acc) => sum + acc.balance, 0);
+const revenueChartConfig = {
+    total: {
+        label: 'Total',
+        color: 'var(--chart-1)',
+    },
+    net: {
+        label: 'Bersih',
+        color: 'var(--chart-2)',
+    },
+    potongan: {
+        label: 'Potongan',
+        color: 'var(--chart-3)',
+    },
+    ongkir: {
+        label: 'Ongkir',
+        color: 'var(--chart-4)',
+    },
+} satisfies ChartConfig;
+
+const activeRevenueChart = ref<'total' | 'net' | 'potongan' | 'ongkir'>('total');
+
+const revenueTotals = computed(() => ({
+    total: props.revenueSummary.total_revenue,
+    net: props.revenueSummary.total_revenue - props.revenueSummary.total_potongan,
+    potongan: props.revenueSummary.total_potongan,
+    ongkir: props.revenueSummary.total_shipping,
+}));
+
+// Expense Chart
+type MonthlyExpenseData = { month: string; total: number; belanja: number; pengeluaran: number; kasbon: number };
+
+const expenseChartConfig = {
+    total: {
+        label: 'Total',
+        color: 'var(--chart-1)',
+    },
+    belanja: {
+        label: 'Belanja',
+        color: 'var(--chart-2)',
+    },
+    pengeluaran: {
+        label: 'Pengeluaran',
+        color: 'var(--chart-3)',
+    },
+    kasbon: {
+        label: 'Kasbon',
+        color: 'var(--chart-4)',
+    },
+} satisfies ChartConfig;
+
+const activeExpenseChart = ref<'total' | 'belanja' | 'pengeluaran' | 'kasbon'>('total');
+
+const expenseTotals = computed(() => ({
+    total: props.expenseSummary.total,
+    belanja: props.expenseSummary.purchase_total,
+    pengeluaran: props.expenseSummary.expense_total,
+    kasbon: props.expenseSummary.advance_total,
+}));
+
+// Busy Hours Chart
+type BusyHourData = { hour: string; orders: number };
+
+const busyHoursChartConfig = {
+    orders: {
+        label: 'Pesanan',
+        color: 'var(--chart-1)',
+    },
+} satisfies ChartConfig;
+
+const peakHour = computed(() => {
+    if (props.busyHours.length === 0) {
+        return { hour: '-', orders: 0 };
+    }
+
+    return props.busyHours.reduce((max, item) => item.orders > max.orders ? item : max, props.busyHours[0]);
+});
+
+// Top 5 Chart configs
+type SupplierData = { name: string; amount: number };
+type CustomerData = { name: string; amount: number };
+type ProductData = { name: string; qty: number };
+
+const supplierChartConfig = {
+    amount: {
+        label: 'Total Pembelian',
+        color: 'var(--chart-1)',
+    },
+} satisfies ChartConfig;
+
+const customerChartConfig = {
+    amount: {
+        label: 'Total Pesanan',
+        color: 'var(--chart-2)',
+    },
+} satisfies ChartConfig;
+
+const productChartConfig = {
+    qty: {
+        label: 'Jumlah Terjual',
+        color: 'var(--chart-3)',
+    },
+} satisfies ChartConfig;
+
+const supplierBarData = computed<SupplierData[]>(() => {
+    return props.topSuppliers.map((s) => ({
+        name: s.name.length > 15 ? s.name.substring(0, 15) + '...' : s.name,
+        amount: s.total_amount,
+    }));
+});
+
+const customerBarData = computed<CustomerData[]>(() => {
+    return props.topCustomers.map((c) => ({
+        name: c.name.length > 15 ? c.name.substring(0, 15) + '...' : c.name,
+        amount: c.total_amount,
+    }));
+});
+
+const productBarData = computed<ProductData[]>(() => {
+    return props.topProducts.map((p) => ({
+        name: p.name.length > 20 ? p.name.substring(0, 20) + '...' : p.name,
+        qty: p.total_qty,
+    }));
 });
 
 function applyFilters() {
@@ -142,301 +272,353 @@ watch([startDate, endDate], () => {
 </script>
 
 <template>
+
     <Head title="Analisa" />
 
     <AdminLayout>
         <div class="flex flex-col gap-6">
             <!-- Header & Filter -->
             <div
-                class="flex flex-col gap-4 rounded-lg border bg-card p-6 shadow-xs md:flex-row md:items-center md:justify-between"
-            >
+                class="flex flex-col gap-4 rounded-lg border bg-card p-6 shadow-xs md:flex-row md:items-center md:justify-between">
                 <div class="space-y-1">
                     <h2 class="text-2xl font-bold tracking-tight">Analisa</h2>
                     <p class="text-sm text-muted-foreground">
-                        Halaman analisa data, performa toko, dan inventori.
+                        Halaman analisa data dan performa toko.
                     </p>
                 </div>
                 <!-- Date Filters -->
                 <div class="flex flex-wrap items-center gap-3">
                     <div class="flex items-center gap-2">
-                        <span
-                            class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"
-                            >Mulai:</span
-                        >
-                        <DatePicker
-                            v-model="startDate"
-                            class="w-[170px]"
-                            placeholder="Pilih tanggal"
-                        />
+                        <span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Mulai:</span>
+                        <DatePicker v-model="startDate" class="w-[170px]" placeholder="Pilih tanggal" />
                     </div>
                     <div class="flex items-center gap-2">
                         <span
-                            class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"
-                            >Sampai:</span
-                        >
-                        <DatePicker
-                            v-model="endDate"
-                            class="w-[170px]"
-                            placeholder="Pilih tanggal"
-                        />
+                            class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Sampai:</span>
+                        <DatePicker v-model="endDate" class="w-[170px]" placeholder="Pilih tanggal" />
                     </div>
-                    <Button
-                        v-if="hasActiveFilters"
-                        variant="ghost"
-                        size="sm"
-                        @click="clearFilters"
-                        class="h-9 px-3"
-                    >
+                    <Button v-if="hasActiveFilters" variant="ghost" size="sm" @click="clearFilters" class="h-9 px-3">
                         Reset Filter
                     </Button>
                 </div>
             </div>
 
-            <!-- Row 1: KPI Statistic Cards -->
+            <!-- Kehadiran & Kas Toko -->
             <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-                <!-- 1. Total Pendapatan -->
-                <StatCard
-                    title="Total Pendapatan"
-                    :icon="TrendingUp"
-                    main-label="Total"
-                    :main-value="formatRupiah(revenueSummary.total_revenue)"
-                    :sub-label="
-                        revenueSummary.total_orders +
-                        ' transaksi selesai' +
-                        (hasActiveFilters ? ' (filter)' : ' (keseluruhan)')
-                    "
-                    :items="[
-                        {
-                            label: 'Bersih',
-                            value: formatRupiah(
-                                revenueSummary.total_revenue -
-                                    revenueSummary.total_potongan,
-                            ),
-                        },
-                        {
-                            label: 'Potongan',
-                            value: formatRupiah(revenueSummary.total_potongan),
-                        },
-                        {
-                            label: 'Diskon',
-                            value: formatRupiah(revenueSummary.total_discount),
-                        },
-                    ]"
-                />
-
-                <!-- 2. Total Pengeluaran -->
-                <StatCard
-                    title="Total Pengeluaran"
-                    :icon="TrendingDown"
-                    main-label="Total"
-                    :main-value="
-                        formatRupiah(
-                            purchaseSummary.total_spent +
-                                monthlyExpenses.total +
-                                kasbonSummary.total,
-                        )
-                    "
-                    :items="[
-                        {
-                            label: 'Belanja',
-                            value: formatRupiah(purchaseSummary.total_spent),
-                        },
-                        {
-                            label: 'Pengeluaran',
-                            value: formatRupiah(monthlyExpenses.total),
-                        },
-                        {
-                            label: 'Kasbon',
-                            value: formatRupiah(kasbonSummary.total),
-                        },
-                    ]"
-                />
-
-                <!-- 3. Kas Toko -->
-                <StatCard
-                    title="Kas Toko"
-                    :icon="Banknote"
-                    main-label="Total Saldo"
-                    :main-value="formatRupiah(totalCashBalance)"
-                    :sub-label="
-                        cashSummary.total_transactions +
-                        ' transaksi' +
-                        (hasActiveFilters ? ' (filter)' : ' (keseluruhan)')
-                    "
-                    :items="[
-                        {
-                            label: 'Deposit',
-                            value: formatRupiah(cashSummary.total_deposit),
-                        },
-                        {
-                            label: 'Withdrawal',
-                            value: formatRupiah(cashSummary.total_withdrawal),
-                        },
-                    ]"
-                    :cols="2"
-                />
-
-                <!-- 4. Kehadiran -->
-                <StatCard
-                    title="Kehadiran"
-                    :icon="UserCheck"
-                    main-label="Slot Kehadiran"
-                    :main-value="attendanceToday.total_employees"
-                    :sub-label="
-                        (attendanceToday.total_employees > 0
-                            ? Math.round(
-                                  (attendanceToday.present /
-                                      attendanceToday.total_employees) *
-                                      100,
-                              )
-                            : 0) + '% hadir'
-                    "
-                    :items="[
+                <StatCard title="Kehadiran" :icon="UserCheck" main-label="Total Karyawan"
+                    :main-value="attendance.total_employees" :sub-label="attendance.percentage + '% hadir'" :items="[
                         {
                             label: 'Hadir',
-                            value: attendanceToday.present,
+                            value: attendance.present,
                         },
                         {
                             label: 'Tidak Hadir',
-                            value: attendanceToday.absent,
+                            value: attendance.absent,
                         },
                         {
                             label: 'Cuti',
-                            value: attendanceToday.on_leave ?? 0,
+                            value: attendance.on_leave,
                         },
-                    ]"
-                />
+                    ]" />
 
-                <!-- 5. Bahan Baku -->
-                <StatCard
-                    title="Bahan Baku"
-                    :icon="Package"
-                    main-label="Total Stok"
-                    :main-value="
-                        rawMaterialStock.total_stock.toLocaleString('id-ID')
-                    "
-                    :sub-label="formatRupiah(rawMaterialStock.total_value)"
-                    :items="[
+                <StatCard title="Kas Toko" :icon="Banknote" main-label="Total Saldo"
+                    :main-value="'Rp' + formatRupiah(cashOverview.total_balance)" :sub-label="cashOverview.total_transactions + ' transaksi'
+                        " :items="[
+                            {
+                                label: 'Deposit',
+                                value: 'Rp' + formatRupiah(cashOverview.total_deposit),
+                            },
+                            {
+                                label: 'Withdrawal',
+                                value: 'Rp' + formatRupiah(cashOverview.total_withdrawal),
+                            },
+                        ]" :cols="2" />
+
+                <StatCard title="Bahan Baku" :icon="Package" main-label="Total Stok"
+                    :main-value="rawMaterialStock.total_stock.toLocaleString('id-ID')"
+                    :sub-label="'Rp' + formatRupiah(rawMaterialStock.total_value)" :items="[
                         {
                             label: 'Yard',
-                            value: (
-                                rawMaterialStock.by_unit?.yard ?? 0
-                            ).toLocaleString('id-ID'),
+                            value: rawMaterialStock.by_unit?.yard?.toLocaleString('id-ID') ?? '0',
                         },
                         {
                             label: 'Meter',
-                            value: (
-                                rawMaterialStock.by_unit?.meter ?? 0
-                            ).toLocaleString('id-ID'),
+                            value: rawMaterialStock.by_unit?.meter?.toLocaleString('id-ID') ?? '0',
                         },
                         {
                             label: 'Kg',
-                            value: (
-                                rawMaterialStock.by_unit?.kilogram ?? 0
-                            ).toLocaleString('id-ID'),
+                            value: rawMaterialStock.by_unit?.kilogram?.toLocaleString('id-ID') ?? '0',
                         },
-                    ]"
-                />
+                    ]" />
 
-                <!-- 6. Stok Produk -->
-                <StatCard
-                    title="Stok Produk"
-                    :icon="ShoppingCart"
-                    main-label="Total Stok"
-                    :main-value="
-                        productStock.total_stock.toLocaleString('id-ID')
-                    "
-                    :sub-label="
-                        formatRupiah(productStock.total_value) +
-                        (productStock.total_reject > 0
-                            ? ` (${productStock.total_reject} reject)`
-                            : '')
-                    "
+                <StatCard title="Stok Produk" :icon="ShoppingCart" main-label="Total Stok"
+                    :main-value="productStock.total_stock.toLocaleString('id-ID')"
+                    :sub-label="'Rp' + formatRupiah(productStock.total_value) + (productStock.total_reject > 0 ? ' (' + productStock.total_reject + ' reject)' : '')"
                     :items="[
                         {
                             label: 'Produk',
-                            value: productStock.total_products.toLocaleString(
-                                'id-ID',
-                            ),
+                            value: productStock.total_products.toLocaleString('id-ID'),
                         },
                         {
                             label: 'Varian',
-                            value: productStock.total_variants.toLocaleString(
-                                'id-ID',
-                            ),
+                            value: productStock.total_variants.toLocaleString('id-ID'),
                         },
                         {
                             label: 'Kategori',
-                            value: productStock.total_categories.toLocaleString(
-                                'id-ID',
-                            ),
+                            value: productStock.total_categories.toLocaleString('id-ID'),
                         },
-                    ]"
-                />
-
-                <!-- 7. Kasbon Karyawan -->
-                <StatCard
-                    title="Kasbon Karyawan"
-                    :icon="CreditCard"
-                    main-label="Total Kasbon"
-                    :main-value="formatRupiah(kasbonSummary.total)"
-                    :sub-label="kasbonSummary.total_employees + ' karyawan'"
-                    :items="[
-                        {
-                            label: 'Menunggu',
-                            value: formatRupiah(kasbonSummary.pending.total),
-                        },
-                        {
-                            label: 'Disetujui',
-                            value: formatRupiah(kasbonSummary.approved.total),
-                        },
-                        {
-                            label: 'Dibayar',
-                            value: formatRupiah(kasbonSummary.paid.total),
-                        },
-                    ]"
-                />
-
-                <!-- 8. Pengajuan Cuti -->
-                <StatCard
-                    title="Pengajuan Cuti"
-                    :icon="FileText"
-                    main-label="Total Pengajuan"
-                    :main-value="leaveRequestSummary.total"
-                    :items="[
-                        {
-                            label: 'Menunggu',
-                            value: leaveRequestSummary.pending,
-                        },
-                        {
-                            label: 'Disetujui',
-                            value: leaveRequestSummary.approved,
-                        },
-                        {
-                            label: 'Ditolak',
-                            value: leaveRequestSummary.rejected,
-                        },
-                    ]"
-                />
+                    ]" />
             </div>
 
-            <!-- Row 2: Low Stock Alerts -->
-            <div class="grid gap-4 md:grid-cols-2">
-                <!-- Stok Produk Menipis -->
-                <LowStockCard
-                    title="Stok Produk Menipis"
-                    :icon="AlertTriangle"
-                    :items="lowStockProducts"
-                    empty-text="Semua stok produk aman"
-                />
+            <!-- Revenue Chart -->
+            <Card class="py-4 sm:py-0">
+                <CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
+                    <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+                        <CardTitle>Pendapatan</CardTitle>
+                    </div>
+                    <div class="flex">
+                        <button v-for="chart in ['total', 'net', 'potongan', 'ongkir'] as const" :key="chart"
+                            :data-active="activeRevenueChart === chart"
+                            class="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                            @click="activeRevenueChart = chart">
+                            <span class="text-muted-foreground text-xs">
+                                {{ revenueChartConfig[chart].label }}
+                            </span>
+                            <span class="text-sm">
+                                Rp{{ formatRupiah(revenueTotals[chart]) }}
+                            </span>
+                        </button>
+                    </div>
+                </CardHeader>
+                <CardContent class="px-2 sm:p-6">
+                    <ChartContainer v-if="monthlyRevenue.length > 0" :config="revenueChartConfig"
+                        class="aspect-auto h-[300px] w-full">
+                        <VisXYContainer :data="monthlyRevenue" :y-domain="[0, undefined]">
+                            <VisGroupedBar :x="(_d: MonthlyRevenueData, i: number) => i"
+                                :y="(d: MonthlyRevenueData) => d[activeRevenueChart]"
+                                :color="revenueChartConfig[activeRevenueChart].color" :bar-padding="0.1"
+                                :rounded-corners="4" />
+                            <VisAxis type="x" :x="(_d: MonthlyRevenueData, i: number) => i" :tick-line="false"
+                                :domain-line="false" :grid-line="false"
+                                :tick-format="(d: number) => monthlyRevenue[d]?.month ?? ''"
+                                :tick-values="monthlyRevenue.map((_, i) => i)" />
+                            <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false"
+                                :tick-format="(d: number) => 'Rp' + formatRupiah(d)" />
+                        </VisXYContainer>
+                    </ChartContainer>
+                    <div v-else class="flex h-[300px] items-center justify-center text-muted-foreground">
+                        Belum ada data pendapatan
+                    </div>
+                </CardContent>
+            </Card>
 
-                <!-- Stok Bahan Baku Menipis -->
-                <LowStockCard
-                    title="Stok Bahan Baku Menipis"
-                    :icon="AlertTriangle"
-                    :items="lowStockMaterials"
-                    empty-text="Semua stok bahan baku aman"
-                />
+            <!-- Expense Chart -->
+            <Card class="py-4 sm:py-0">
+                <CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
+                    <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+                        <CardTitle>Pengeluaran</CardTitle>
+                    </div>
+                    <div class="flex">
+                        <button v-for="chart in ['total', 'belanja', 'pengeluaran', 'kasbon'] as const" :key="chart"
+                            :data-active="activeExpenseChart === chart"
+                            class="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                            @click="activeExpenseChart = chart">
+                            <span class="text-muted-foreground text-xs">
+                                {{ expenseChartConfig[chart].label }}
+                            </span>
+                            <span class="text-sm">
+                                Rp{{ formatRupiah(expenseTotals[chart]) }}
+                            </span>
+                        </button>
+                    </div>
+                </CardHeader>
+                <CardContent class="px-2 sm:p-6">
+                    <ChartContainer v-if="monthlyExpense.length > 0" :config="expenseChartConfig"
+                        class="aspect-auto h-[300px] w-full">
+                        <VisXYContainer :data="monthlyExpense" :y-domain="[0, undefined]">
+                            <VisGroupedBar :x="(_d: MonthlyExpenseData, i: number) => i"
+                                :y="(d: MonthlyExpenseData) => d[activeExpenseChart]"
+                                :color="expenseChartConfig[activeExpenseChart].color" :bar-padding="0.1"
+                                :rounded-corners="4" />
+                            <VisAxis type="x" :x="(_d: MonthlyExpenseData, i: number) => i" :tick-line="false"
+                                :domain-line="false" :grid-line="false"
+                                :tick-format="(d: number) => monthlyExpense[d]?.month ?? ''"
+                                :tick-values="monthlyExpense.map((_, i) => i)" />
+                            <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false"
+                                :tick-format="(d: number) => 'Rp' + formatRupiah(d)" />
+                        </VisXYContainer>
+                    </ChartContainer>
+                    <div v-else class="flex h-[300px] items-center justify-center text-muted-foreground">
+                        Belum ada data pengeluaran
+                    </div>
+                </CardContent>
+            </Card>
+
+            <!-- Busy Hours Chart -->
+            <Card>
+                <CardHeader>
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <CardTitle>Jam Sibuk Toko</CardTitle>
+                            <CardDescription>Distribusi pesanan berdasarkan jam dalam sehari</CardDescription>
+                        </div>
+                        <div class="text-right">
+                            <p class="text-sm text-muted-foreground">Jam Tersibuk</p>
+                            <p class="text-2xl font-bold text-primary">{{ peakHour.hour }}</p>
+                            <p class="text-xs text-muted-foreground">{{ peakHour.orders }} pesanan</p>
+                        </div>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <ChartContainer v-if="busyHours.length > 0" :config="busyHoursChartConfig"
+                        class="aspect-auto h-[250px] w-full">
+                        <VisXYContainer :data="busyHours" :y-domain="[0, undefined]">
+                            <VisGroupedBar :x="(_d: BusyHourData, i: number) => i" :y="(d: BusyHourData) => d.orders"
+                                :color="busyHoursChartConfig.orders.color" :bar-padding="0.1" :rounded-corners="4" />
+                            <VisAxis type="x" :x="(_d: BusyHourData, i: number) => i" :tick-line="false"
+                                :domain-line="false" :grid-line="false"
+                                :tick-format="(d: number) => busyHours[d]?.hour ?? ''"
+                                :tick-values="busyHours.map((_, i) => i)" />
+                            <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false"
+                                :tick-format="(d: number) => Math.round(d).toString()" />
+                        </VisXYContainer>
+                    </ChartContainer>
+                    <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
+                        Belum ada data pesanan
+                    </div>
+                </CardContent>
+            </Card>
+
+            <!-- Profit Metrics Cards -->
+            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                <StatCard title="Total Order" :icon="ShoppingCart" main-label="Pesanan Selesai"
+                    :main-value="profitMetrics.total_orders.toLocaleString('id-ID')" :sub-label="'AOV: Rp' + formatRupiah(profitMetrics.aov)" :items="[
+                        {
+                            label: 'Produk Terjual',
+                            value: profitMetrics.total_products_sold.toLocaleString('id-ID'),
+                        },
+                        {
+                            label: 'Item/Transaksi',
+                            value: profitMetrics.items_per_transaction,
+                        },
+                    ]" />
+
+                <StatCard title="HPP" :icon="TrendingDown" main-label="Harga Pokok"
+                    :main-value="'Rp' + formatRupiah(profitMetrics.hpp)" sub-label="Total biaya produksi" :items="[
+                        {
+                            label: 'Laba Kotor',
+                            value: 'Rp' + formatRupiah(profitMetrics.laba_kotor),
+                        },
+                        {
+                            label: 'Laba Bersih',
+                            value: 'Rp' + formatRupiah(profitMetrics.laba_bersih),
+                        },
+                    ]" />
+
+                <StatCard title="Laba Kotor" :icon="TrendingUp" main-label="Gross Profit"
+                    :main-value="'Rp' + formatRupiah(profitMetrics.laba_kotor)"
+                    :sub-label="profitMetrics.laba_kotor >= 0 ? 'Positif' : 'Negatif'" :items="[
+                        {
+                            label: 'Revenue',
+                            value: 'Rp' + formatRupiah(revenueSummary.total_revenue),
+                        },
+                        {
+                            label: 'HPP',
+                            value: 'Rp' + formatRupiah(profitMetrics.hpp),
+                        },
+                    ]" />
+
+                <StatCard title="Profit Margin" :icon="Percent" main-label="Margin"
+                    :main-value="profitMetrics.profit_margin + '%'"
+                    :sub-label="'Laba Bersih: Rp' + formatRupiah(profitMetrics.laba_bersih)" :items="[
+                        {
+                            label: 'Laba Kotor',
+                            value: 'Rp' + formatRupiah(profitMetrics.laba_kotor),
+                        },
+                        {
+                            label: 'Total Pengeluaran',
+                            value: 'Rp' + formatRupiah(expenseSummary.total),
+                        },
+                    ]" />
+            </div>
+
+            <!-- Top 5 Charts -->
+            <div class="grid gap-4 md:grid-cols-3">
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Top 5 Supplier</CardTitle>
+                        <CardDescription>Berdasarkan total harga pembelian</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <ChartContainer v-if="supplierBarData.length > 0" :config="supplierChartConfig"
+                            class="min-h-[250px] w-full">
+                            <VisXYContainer :data="supplierBarData" :y-domain="[0, undefined]">
+                                <VisGroupedBar :x="(_d: SupplierData, i: number) => i"
+                                    :y="(d: SupplierData) => d.amount" :color="supplierChartConfig.amount.color"
+                                    :rounded-corners="4" bar-padding="0.1" />
+                                <VisAxis type="x" :x="(_d: SupplierData, i: number) => i" :tick-line="false"
+                                    :domain-line="false" :grid-line="false"
+                                    :tick-format="(d: number) => supplierBarData[d]?.name ?? ''"
+                                    :tick-values="supplierBarData.map((_, i) => i)" />
+                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false"
+                                    :tick-format="(d: number) => 'Rp' + formatRupiah(d)" />
+                            </VisXYContainer>
+                        </ChartContainer>
+                        <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
+                            Belum ada data supplier
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Top 5 Pelanggan</CardTitle>
+                        <CardDescription>Berdasarkan total nilai pesanan</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <ChartContainer v-if="customerBarData.length > 0" :config="customerChartConfig"
+                            class="min-h-[250px] w-full">
+                            <VisXYContainer :data="customerBarData" :y-domain="[0, undefined]">
+                                <VisGroupedBar :x="(_d: CustomerData, i: number) => i"
+                                    :y="(d: CustomerData) => d.amount" :color="customerChartConfig.amount.color"
+                                    :rounded-corners="4" bar-padding="0.1" />
+                                <VisAxis type="x" :x="(_d: CustomerData, i: number) => i" :tick-line="false"
+                                    :domain-line="false" :grid-line="false"
+                                    :tick-format="(d: number) => customerBarData[d]?.name ?? ''"
+                                    :tick-values="customerBarData.map((_, i) => i)" />
+                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false"
+                                    :tick-format="(d: number) => 'Rp' + formatRupiah(d)" />
+                            </VisXYContainer>
+                        </ChartContainer>
+                        <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
+                            Belum ada data pelanggan
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Top 5 Produk</CardTitle>
+                        <CardDescription>Berdasarkan jumlah terjual</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <ChartContainer v-if="productBarData.length > 0" :config="productChartConfig"
+                            class="min-h-[250px] w-full">
+                            <VisXYContainer :data="productBarData" :y-domain="[0, undefined]">
+                                <VisGroupedBar :x="(_d: ProductData, i: number) => i" :y="(d: ProductData) => d.qty"
+                                    :color="productChartConfig.qty.color" :rounded-corners="4" bar-padding="0.1" />
+                                <VisAxis type="x" :x="(_d: ProductData, i: number) => i" :tick-line="false"
+                                    :domain-line="false" :grid-line="false"
+                                    :tick-format="(d: number) => productBarData[d]?.name ?? ''"
+                                    :tick-values="productBarData.map((_, i) => i)" />
+                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false" />
+                            </VisXYContainer>
+                        </ChartContainer>
+                        <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
+                            Belum ada data produk
+                        </div>
+                    </CardContent>
+                </Card>
             </div>
         </div>
     </AdminLayout>
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index 8356b7d..6485faf 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -55,22 +55,6 @@ interface DashboardProps {
         advance_total: number;
     };
 
-    topSuppliers: Array<{
-        name: string;
-        total_amount: number;
-        purchase_count: number;
-    }>;
-    topCustomers: Array<{
-        name: string;
-        total_amount: number;
-        order_count: number;
-    }>;
-    topProducts: Array<{
-        name: string;
-        total_qty: number;
-        total_revenue: number;
-    }>;
-
     orderStats: {
         by_channel: Array<{
             channel: string;
@@ -149,27 +133,6 @@ const greeting = computed(() => {
 });
 
 // Chart configs
-const supplierChartConfig = {
-    amount: {
-        label: 'Total Pembelian',
-        color: 'var(--chart-1)',
-    },
-} satisfies ChartConfig;
-
-const customerChartConfig = {
-    amount: {
-        label: 'Total Pesanan',
-        color: 'var(--chart-2)',
-    },
-} satisfies ChartConfig;
-
-const productChartConfig = {
-    qty: {
-        label: 'Jumlah Terjual',
-        color: 'var(--chart-3)',
-    },
-} satisfies ChartConfig;
-
 const channelColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'];
 const channelChartConfig = computed(() => {
     const config: ChartConfig = {};
@@ -217,31 +180,6 @@ const marketingChartConfig = computed(() => {
     });
     return config;
 });
-
-type SupplierData = { name: string; amount: number };
-type CustomerData = { name: string; amount: number };
-type ProductData = { name: string; qty: number };
-
-const supplierBarData = computed<SupplierData[]>(() => {
-    return props.topSuppliers.map((s) => ({
-        name: s.name.length > 15 ? s.name.substring(0, 15) + '...' : s.name,
-        amount: s.total_amount,
-    }));
-});
-
-const customerBarData = computed<CustomerData[]>(() => {
-    return props.topCustomers.map((c) => ({
-        name: c.name.length > 15 ? c.name.substring(0, 15) + '...' : c.name,
-        amount: c.total_amount,
-    }));
-});
-
-const productBarData = computed<ProductData[]>(() => {
-    return props.topProducts.map((p) => ({
-        name: p.name.length > 20 ? p.name.substring(0, 20) + '...' : p.name,
-        qty: p.total_qty,
-    }));
-});
 </script>
 
 <template>
@@ -348,84 +286,6 @@ const productBarData = computed<ProductData[]>(() => {
                     ]" />
             </div>
 
-            <div class="grid gap-4 md:grid-cols-3">
-                <Card>
-                    <CardHeader>
-                        <CardTitle class="text-base">Top 5 Supplier</CardTitle>
-                        <CardDescription>Berdasarkan total harga pembelian</CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        <ChartContainer v-if="supplierBarData.length > 0" :config="supplierChartConfig"
-                            class="min-h-[250px] w-full">
-                            <VisXYContainer :data="supplierBarData" :y-domain="[0, undefined]">
-                                <VisGroupedBar :x="(_d: SupplierData, i: number) => i"
-                                    :y="(d: SupplierData) => d.amount" :color="supplierChartConfig.amount.color"
-                                    :rounded-corners="4" bar-padding="0.1" />
-                                <VisAxis type="x" :x="(_d: SupplierData, i: number) => i" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => supplierBarData[d]?.name ?? ''"
-                                    :tick-values="supplierBarData.map((_, i) => i)" />
-                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false"
-                                    :tick-format="(d: number) => 'Rp' + formatRupiah(d)" />
-                            </VisXYContainer>
-                        </ChartContainer>
-                        <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
-                            Belum ada data supplier
-                        </div>
-                    </CardContent>
-                </Card>
-
-                <Card>
-                    <CardHeader>
-                        <CardTitle class="text-base">Top 5 Pelanggan</CardTitle>
-                        <CardDescription>Berdasarkan total nilai pesanan</CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        <ChartContainer v-if="customerBarData.length > 0" :config="customerChartConfig"
-                            class="min-h-[250px] w-full">
-                            <VisXYContainer :data="customerBarData" :y-domain="[0, undefined]">
-                                <VisGroupedBar :x="(_d: CustomerData, i: number) => i"
-                                    :y="(d: CustomerData) => d.amount" :color="customerChartConfig.amount.color"
-                                    :rounded-corners="4" bar-padding="0.1" />
-                                <VisAxis type="x" :x="(_d: CustomerData, i: number) => i" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => customerBarData[d]?.name ?? ''"
-                                    :tick-values="customerBarData.map((_, i) => i)" />
-                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false"
-                                    :tick-format="(d: number) => 'Rp' + formatRupiah(d)" />
-                            </VisXYContainer>
-                        </ChartContainer>
-                        <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
-                            Belum ada data pelanggan
-                        </div>
-                    </CardContent>
-                </Card>
-
-                <Card>
-                    <CardHeader>
-                        <CardTitle class="text-base">Top 5 Produk</CardTitle>
-                        <CardDescription>Berdasarkan jumlah terjual</CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        <ChartContainer v-if="productBarData.length > 0" :config="productChartConfig"
-                            class="min-h-[250px] w-full">
-                            <VisXYContainer :data="productBarData" :y-domain="[0, undefined]">
-                                <VisGroupedBar :x="(_d: ProductData, i: number) => i" :y="(d: ProductData) => d.qty"
-                                    :color="productChartConfig.qty.color" :rounded-corners="4" bar-padding="0.1" />
-                                <VisAxis type="x" :x="(_d: ProductData, i: number) => i" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => productBarData[d]?.name ?? ''"
-                                    :tick-values="productBarData.map((_, i) => i)" />
-                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false" />
-                            </VisXYContainer>
-                        </ChartContainer>
-                        <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
-                            Belum ada data produk
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
-
             <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                 <Card>
                     <CardHeader>
diff --git a/resources/js/pages/admin/TestChart.vue b/resources/js/pages/admin/TestChart.vue
new file mode 100644
index 0000000..a6eb699
--- /dev/null
+++ b/resources/js/pages/admin/TestChart.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type {
+  ChartConfig,
+} from "@/components/ui/chart"
+import { TrendingUp } from "@lucide/vue"
+
+import { CurveType } from "@unovis/ts"
+import { VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltip,
+  ChartTooltipContent,
+  componentToString,
+} from "@/components/ui/chart"
+
+const description = "A line chart"
+
+const chartData = [
+  { date: new Date("2024-01-01"), desktop: 186 },
+  { date: new Date("2024-02-01"), desktop: 305 },
+  { date: new Date("2024-03-01"), desktop: 237 },
+  { date: new Date("2024-04-01"), desktop: 73 },
+  { date: new Date("2024-05-01"), desktop: 209 },
+  { date: new Date("2024-06-01"), desktop: 214 },
+]
+
+type Data = typeof chartData[number]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Line Chart - Linear</CardTitle>
+      <CardDescription>January - June 2024</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <ChartContainer :config="chartConfig">
+        <VisXYContainer
+          :data="chartData"
+          :margin="{ left: -24 }"
+          :y-domain="[0, undefined]"
+        >
+          <VisLine
+            :x="(d: Data) => d.date"
+            :y="(d: Data) => d.desktop"
+            :color="chartConfig.desktop.color"
+            :curve-type="CurveType.Linear"
+          />
+          <VisAxis
+            type="x"
+            :x="(d: Data) => d.date"
+            :tick-line="false"
+            :domain-line="false"
+            :grid-line="false"
+            :num-ticks="6"
+            :tick-format="(d: number) => {
+              const date = new Date(d)
+              return date.toLocaleDateString('en-US', {
+                month: 'short',
+              })
+            }"
+            :tick-values="chartData.map(d => d.date)"
+          />
+          <VisAxis
+            type="y"
+            :num-ticks="3"
+            :tick-line="false"
+            :domain-line="false"
+          />
+          <ChartTooltip />
+          <ChartCrosshair
+            :template="componentToString(chartConfig, ChartTooltipContent, { hideLabel: true })"
+            :color="chartConfig.desktop.color"
+          />
+        </VisXYContainer>
+      </ChartContainer>
+    </CardContent>
+    <CardFooter class="flex-col items-start gap-2 text-sm">
+      <div class="flex gap-2 font-medium leading-none">
+        Trending up by 5.2% this month <TrendingUp class="h-4 w-4" />
+      </div>
+      <div class="leading-none text-muted-foreground">
+        Showing total visitors for the last 6 months
+      </div>
+    </CardFooter>
+  </Card>
+</template>