diff --git a/app/Http/Controllers/Admin/DashboardController.php b/app/Http/Controllers/Admin/DashboardController.php
index 3bb774d..f1aa753 100644
--- a/app/Http/Controllers/Admin/DashboardController.php
+++ b/app/Http/Controllers/Admin/DashboardController.php
@@ -2,7 +2,31 @@
 
 namespace App\Http\Controllers\Admin;
 
+use App\Enums\CashTransactionType;
+use App\Enums\EmployeeAdvanceStatus;
+use App\Enums\LeaveRequestStatus;
+use App\Enums\OrderChannel;
+use App\Enums\OrderStatus;
+use App\Enums\PaymentType;
+use App\Enums\PayrollStatus;
 use App\Http\Controllers\Controller;
+use App\Models\CashAccount;
+use App\Models\CashTransaction;
+use App\Models\Cutting;
+use App\Models\CuttingResult;
+use App\Models\Customer;
+use App\Models\EmployeeAdvance;
+use App\Models\LeaveRequest;
+use App\Models\Order;
+use App\Models\Payroll;
+use App\Models\PayrollPeriod;
+use App\Models\ProductVariant;
+use App\Models\Purchase;
+use App\Models\RawMaterialPrice;
+use App\Models\Supplier;
+use App\Models\User;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -10,6 +34,306 @@ class DashboardController extends Controller
 {
     public function index(): Response
     {
-        return Inertia::render('admin/Dashboard');
+        $now = Carbon::now();
+        $startOfMonth = $now->copy()->startOfMonth();
+        $endOfMonth = $now->copy()->endOfMonth();
+
+        return Inertia::render('admin/Dashboard', [
+            'rawMaterialStock' => $this->getRawMaterialStock(),
+            'productStock' => $this->getProductStock(),
+            'topSuppliers' => $this->getTopSuppliers(),
+            'topCustomers' => $this->getTopCustomers(),
+            'purchaseSummary' => $this->getPurchaseSummary(),
+            'cuttingSummary' => $this->getCuttingSummary(),
+            'orderStats' => $this->getOrderStats(),
+            'revenueSummary' => $this->getRevenueSummary(),
+            'cashAccounts' => $this->getCashAccounts(),
+            'kasbonSummary' => $this->getKasbonSummary(),
+            'payrollSummary' => $this->getPayrollSummary($startOfMonth, $endOfMonth),
+            'leaveRequestSummary' => $this->getLeaveRequestSummary($startOfMonth, $endOfMonth),
+        ]);
+    }
+
+    private function getRawMaterialStock(): array
+    {
+        $data = RawMaterialPrice::query()
+            ->selectRaw('SUM(stock) as total_stock, SUM(stock * price) as total_value')
+            ->first();
+
+        return [
+            'total_stock' => (float) ($data->total_stock ?? 0),
+            'total_value' => (int) ($data->total_value ?? 0),
+        ];
+    }
+
+    private function getProductStock(): array
+    {
+        $data = ProductVariant::query()
+            ->selectRaw('SUM(stock) as total_stock, SUM(reject_stock) as total_reject')
+            ->first();
+
+        $totalStock = (int) ($data->total_stock ?? 0);
+
+        $totalValue = Cutting::query()
+            ->whereNotNull('cost_per_unit')
+            ->join('cutting_results', 'cuttings.id', '=', 'cutting_results.cutting_id')
+            ->selectRaw('SUM(cutting_results.warehouse_stock * cuttings.cost_per_unit) as total_value')
+            ->value('total_value');
+
+        return [
+            'total_stock' => $totalStock,
+            'total_reject' => (int) ($data->total_reject ?? 0),
+            'total_value' => (int) ($totalValue ?? 0),
+        ];
+    }
+
+    private function getTopSuppliers(): array
+    {
+        return Purchase::query()
+            ->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();
+    }
+
+    private function getTopCustomers(): array
+    {
+        return Order::query()
+            ->where('status', OrderStatus::COMPLETED)
+            ->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();
+    }
+
+    private function getPurchaseSummary(): array
+    {
+        $data = Purchase::query()
+            ->selectRaw('COUNT(*) as total_purchases, SUM(total) as total_spent, SUM(discount) as total_discount')
+            ->first();
+
+        return [
+            'total_purchases' => (int) ($data->total_purchases ?? 0),
+            'total_spent' => (int) ($data->total_spent ?? 0),
+            'total_discount' => (int) ($data->total_discount ?? 0),
+        ];
+    }
+
+    private function getCuttingSummary(): array
+    {
+        $totalCost = Cutting::query()
+            ->selectRaw('COALESCE(SUM(total_material_cost), 0) + COALESCE(SUM(sewing_cost), 0) + COALESCE(SUM(other_cost), 0) as total_cost')
+            ->value('total_cost');
+
+        $totalResults = CuttingResult::query()
+            ->selectRaw('SUM(cutting_result) as total_cutting, SUM(warehouse_stock) as total_warehouse, SUM(cutting_reject) as total_reject')
+            ->first();
+
+        return [
+            'total_cost' => (int) ($totalCost ?? 0),
+            'total_cutting' => (int) ($totalResults->total_cutting ?? 0),
+            'total_warehouse' => (int) ($totalResults->total_warehouse ?? 0),
+            'total_reject' => (int) ($totalResults->total_reject ?? 0),
+        ];
+    }
+
+    private function getOrderStats(): array
+    {
+        $byChannel = Order::query()
+            ->selectRaw('channel, COUNT(*) as count, SUM(total_amount) as total')
+            ->groupBy('channel')
+            ->get()
+            ->map(fn ($item) => [
+                'channel' => $item->channel instanceof OrderChannel ? $item->channel->value : $item->channel,
+                'label' => $item->channel instanceof OrderChannel ? $item->channel->label() : OrderChannel::from($item->channel)->label(),
+                'count' => (int) $item->count,
+                'total' => (int) $item->total,
+            ]);
+
+        $byPaymentType = Order::query()
+            ->selectRaw('payment_type, COUNT(*) as count, SUM(total_amount) as total')
+            ->groupBy('payment_type')
+            ->get()
+            ->map(fn ($item) => [
+                'payment_type' => $item->payment_type instanceof PaymentType ? $item->payment_type->value : $item->payment_type,
+                'label' => $item->payment_type instanceof PaymentType ? $item->payment_type->label() : PaymentType::from($item->payment_type)->label(),
+                'count' => (int) $item->count,
+                'total' => (int) $item->total,
+            ]);
+
+        $byMarketing = Order::query()
+            ->whereNotNull('marketing_id')
+            ->join('users', 'orders.marketing_id', '=', 'users.id')
+            ->leftJoin('user_profiles', 'users.id', '=', 'user_profiles.user_id')
+            ->selectRaw("COALESCE(user_profiles.full_name, users.username) as name, COUNT(*) as count, SUM(orders.total_amount) as total")
+            ->groupBy('orders.marketing_id', 'users.username', 'user_profiles.full_name')
+            ->orderByDesc('total')
+            ->limit(5)
+            ->get()
+            ->map(fn ($item) => [
+                'name' => $item->name,
+                'count' => (int) $item->count,
+                'total' => (int) $item->total,
+            ]);
+
+        $byStatus = Order::query()
+            ->selectRaw('status, COUNT(*) as count')
+            ->groupBy('status')
+            ->get()
+            ->map(fn ($item) => [
+                'status' => $item->status instanceof OrderStatus ? $item->status->value : $item->status,
+                'label' => $item->status instanceof OrderStatus ? $item->status->label() : OrderStatus::from($item->status)->label(),
+                'count' => (int) $item->count,
+            ]);
+
+        return [
+            'by_channel' => $byChannel->toArray(),
+            'by_payment_type' => $byPaymentType->toArray(),
+            'by_marketing' => $byMarketing->toArray(),
+            'by_status' => $byStatus->toArray(),
+        ];
+    }
+
+    private function getRevenueSummary(): array
+    {
+        $data = Order::query()
+            ->where('status', OrderStatus::COMPLETED)
+            ->selectRaw('SUM(total_amount) as total_revenue, SUM(discount) as total_discount, SUM(shipping_cost) as total_shipping, COUNT(*) as total_orders')
+            ->first();
+
+        return [
+            'total_revenue' => (int) ($data->total_revenue ?? 0),
+            'total_discount' => (int) ($data->total_discount ?? 0),
+            'total_shipping' => (int) ($data->total_shipping ?? 0),
+            'total_orders' => (int) ($data->total_orders ?? 0),
+        ];
+    }
+
+    private function getCashAccounts(): array
+    {
+        return CashAccount::query()
+            ->selectRaw('name, balance')
+            ->get()
+            ->map(fn ($item) => [
+                'name' => $item->name,
+                'balance' => (int) $item->balance,
+            ])
+            ->toArray();
+    }
+
+    private function getKasbonSummary(): array
+    {
+        $pending = EmployeeAdvance::query()
+            ->where('status', EmployeeAdvanceStatus::PENDING)
+            ->selectRaw('COUNT(*) as count, COALESCE(SUM(amount), 0) as total')
+            ->first();
+
+        $approved = EmployeeAdvance::query()
+            ->where('status', EmployeeAdvanceStatus::APPROVED)
+            ->selectRaw('COUNT(*) as count, COALESCE(SUM(amount), 0) as total')
+            ->first();
+
+        $paid = EmployeeAdvance::query()
+            ->where('status', EmployeeAdvanceStatus::PAID)
+            ->selectRaw('COUNT(*) as count, COALESCE(SUM(amount), 0) as total')
+            ->first();
+
+        return [
+            'pending' => [
+                'count' => (int) ($pending->count ?? 0),
+                'total' => (int) ($pending->total ?? 0),
+            ],
+            'approved' => [
+                'count' => (int) ($approved->count ?? 0),
+                'total' => (int) ($approved->total ?? 0),
+            ],
+            'paid' => [
+                'count' => (int) ($paid->count ?? 0),
+                'total' => (int) ($paid->total ?? 0),
+            ],
+            'total' => (int) ($pending->total ?? 0) + (int) ($approved->total ?? 0) + (int) ($paid->total ?? 0),
+        ];
+    }
+
+    private function getPayrollSummary(Carbon $startOfMonth, Carbon $endOfMonth): array
+    {
+        $period = PayrollPeriod::query()
+            ->where('year', $startOfMonth->year)
+            ->where('month', $startOfMonth->month)
+            ->first();
+
+        if (! $period) {
+            return [
+                'has_period' => false,
+                'total_employees' => 0,
+                'total_amount' => 0,
+                'paid_amount' => 0,
+                'unpaid_amount' => 0,
+                'paid_count' => 0,
+                'unpaid_count' => 0,
+            ];
+        }
+
+        $payrolls = Payroll::query()
+            ->where('payroll_period_id', $period->id)
+            ->selectRaw("
+                COUNT(*) as total_employees,
+                COALESCE(SUM(total_amount), 0) as total_amount,
+                COALESCE(SUM(CASE WHEN status = 'paid' THEN total_amount ELSE 0 END), 0) as paid_amount,
+                COALESCE(SUM(CASE WHEN status = 'unpaid' THEN total_amount ELSE 0 END), 0) as unpaid_amount,
+                SUM(CASE WHEN status = 'paid' THEN 1 ELSE 0 END) as paid_count,
+                SUM(CASE WHEN status = 'unpaid' THEN 1 ELSE 0 END) as unpaid_count
+            ")
+            ->first();
+
+        return [
+            'has_period' => true,
+            'period_status' => $period->status->value,
+            'total_employees' => (int) ($payrolls->total_employees ?? 0),
+            'total_amount' => (int) ($payrolls->total_amount ?? 0),
+            'paid_amount' => (int) ($payrolls->paid_amount ?? 0),
+            'unpaid_amount' => (int) ($payrolls->unpaid_amount ?? 0),
+            'paid_count' => (int) ($payrolls->paid_count ?? 0),
+            'unpaid_count' => (int) ($payrolls->unpaid_count ?? 0),
+        ];
+    }
+
+    private function getLeaveRequestSummary(Carbon $startOfMonth, Carbon $endOfMonth): array
+    {
+        $data = LeaveRequest::query()
+            ->where(function ($q) use ($startOfMonth, $endOfMonth) {
+                $q->whereBetween('start_date', [$startOfMonth, $endOfMonth])
+                    ->orWhereBetween('end_date', [$startOfMonth, $endOfMonth]);
+            })
+            ->selectRaw("
+                COUNT(*) as total,
+                SUM(CASE WHEN status = 'pending' THEN 1 ELSE 0 END) as pending_count,
+                SUM(CASE WHEN status = 'approved' THEN 1 ELSE 0 END) as approved_count,
+                SUM(CASE WHEN status = 'rejected' THEN 1 ELSE 0 END) as rejected_count
+            ")
+            ->first();
+
+        return [
+            'total' => (int) ($data->total ?? 0),
+            'pending' => (int) ($data->pending_count ?? 0),
+            'approved' => (int) ($data->approved_count ?? 0),
+            'rejected' => (int) ($data->rejected_count ?? 0),
+        ];
     }
 }
diff --git a/package-lock.json b/package-lock.json
index 9366f87..805c2a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,8 @@
                 "@point-of-sale/webserial-receipt-printer": "^2.0.0",
                 "@tailwindcss/vite": "^4.1.11",
                 "@tanstack/vue-table": "^8.21.3",
+                "@unovis/ts": "^1.6.6",
+                "@unovis/vue": "^1.6.6",
                 "@vitejs/plugin-vue": "^6.0.0",
                 "@vueuse/core": "^14.3.0",
                 "class-variance-authority": "^0.7.1",
@@ -61,7 +63,6 @@
             "version": "7.29.7",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
             "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.29.7",
@@ -140,7 +141,6 @@
             "version": "7.29.7",
             "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
             "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.29.7",
@@ -296,7 +296,6 @@
             "version": "7.29.7",
             "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
             "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -320,7 +319,6 @@
             "version": "7.29.7",
             "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
             "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/traverse": "^7.29.7",
@@ -1627,7 +1625,6 @@
             "version": "7.29.7",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
             "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -1637,7 +1634,6 @@
             "version": "7.29.7",
             "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
             "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/code-frame": "^7.29.7",
@@ -1652,7 +1648,6 @@
             "version": "7.29.7",
             "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
             "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/code-frame": "^7.29.7",
@@ -1717,6 +1712,115 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@emotion/babel-plugin": {
+            "version": "11.13.5",
+            "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+            "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.16.7",
+                "@babel/runtime": "^7.18.3",
+                "@emotion/hash": "^0.9.2",
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/serialize": "^1.3.3",
+                "babel-plugin-macros": "^3.1.0",
+                "convert-source-map": "^1.5.0",
+                "escape-string-regexp": "^4.0.0",
+                "find-root": "^1.1.0",
+                "source-map": "^0.5.7",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+            "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/@emotion/cache": {
+            "version": "11.14.0",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+            "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/sheet": "^1.4.0",
+                "@emotion/utils": "^1.4.2",
+                "@emotion/weak-memoize": "^0.4.0",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/css": {
+            "version": "11.13.5",
+            "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.13.5.tgz",
+            "integrity": "sha512-wQdD0Xhkn3Qy2VNcIzbLP9MR8TafI0MJb7BEAXKp+w4+XqErksWR4OXomuDzPsN4InLdGhVe6EYcn2ZIUCpB8w==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/babel-plugin": "^11.13.5",
+                "@emotion/cache": "^11.13.5",
+                "@emotion/serialize": "^1.3.3",
+                "@emotion/sheet": "^1.4.0",
+                "@emotion/utils": "^1.4.2"
+            }
+        },
+        "node_modules/@emotion/hash": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+            "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/memoize": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+            "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/serialize": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+            "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/hash": "^0.9.2",
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/unitless": "^0.10.0",
+                "@emotion/utils": "^1.4.2",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@emotion/sheet": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+            "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/unitless": {
+            "version": "0.10.0",
+            "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+            "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/utils": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+            "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/weak-memoize": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+            "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+            "license": "MIT"
+        },
         "node_modules/@eslint-community/eslint-utils": {
             "version": "4.9.1",
             "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -2610,6 +2714,12 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@juggle/resize-observer": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+            "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+            "license": "Apache-2.0"
+        },
         "node_modules/@laravel/vite-plugin-wayfinder": {
             "version": "0.1.7",
             "resolved": "https://registry.npmjs.org/@laravel/vite-plugin-wayfinder/-/vite-plugin-wayfinder-0.1.7.tgz",
@@ -2626,6 +2736,69 @@
                 "vue": ">=3.0.1"
             }
         },
+        "node_modules/@mapbox/geojson-rewind": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+            "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+            "license": "ISC",
+            "dependencies": {
+                "get-stream": "^6.0.1",
+                "minimist": "^1.2.6"
+            },
+            "bin": {
+                "geojson-rewind": "geojson-rewind"
+            }
+        },
+        "node_modules/@mapbox/jsonlint-lines-primitives": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+            "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/@mapbox/mapbox-gl-supported": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+            "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/@mapbox/point-geometry": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+            "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==",
+            "license": "ISC"
+        },
+        "node_modules/@mapbox/tiny-sdf": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.2.0.tgz",
+            "integrity": "sha512-LVL4wgI9YAum5V+LNVQO6QgFBPw7/MIIY4XJPNsPDMrjEwcE+JfKk1LuIl8GnF197ejVdC9QdPaxrx5gfgdGXg==",
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/@mapbox/unitbezier": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+            "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/@mapbox/vector-tile": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+            "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@mapbox/point-geometry": "~0.1.0"
+            }
+        },
+        "node_modules/@mapbox/whoots-js": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+            "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/@napi-rs/wasm-runtime": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -3865,6 +4038,295 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@types/d3": {
+            "version": "7.4.3",
+            "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+            "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-array": "*",
+                "@types/d3-axis": "*",
+                "@types/d3-brush": "*",
+                "@types/d3-chord": "*",
+                "@types/d3-color": "*",
+                "@types/d3-contour": "*",
+                "@types/d3-delaunay": "*",
+                "@types/d3-dispatch": "*",
+                "@types/d3-drag": "*",
+                "@types/d3-dsv": "*",
+                "@types/d3-ease": "*",
+                "@types/d3-fetch": "*",
+                "@types/d3-force": "*",
+                "@types/d3-format": "*",
+                "@types/d3-geo": "*",
+                "@types/d3-hierarchy": "*",
+                "@types/d3-interpolate": "*",
+                "@types/d3-path": "*",
+                "@types/d3-polygon": "*",
+                "@types/d3-quadtree": "*",
+                "@types/d3-random": "*",
+                "@types/d3-scale": "*",
+                "@types/d3-scale-chromatic": "*",
+                "@types/d3-selection": "*",
+                "@types/d3-shape": "*",
+                "@types/d3-time": "*",
+                "@types/d3-time-format": "*",
+                "@types/d3-timer": "*",
+                "@types/d3-transition": "*",
+                "@types/d3-zoom": "*"
+            }
+        },
+        "node_modules/@types/d3-array": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+            "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-axis": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+            "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "node_modules/@types/d3-brush": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+            "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "node_modules/@types/d3-chord": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+            "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-collection": {
+            "version": "1.0.13",
+            "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.13.tgz",
+            "integrity": "sha512-v0Rgw3IZebRyamcwVmtTDCZ8OmQcj4siaYjNc7wGMZT7PmdSHawGsCOQMxyLvZ7lWjfohYLK0oXtilMOMgfY8A==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-color": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+            "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-contour": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+            "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-array": "*",
+                "@types/geojson": "*"
+            }
+        },
+        "node_modules/@types/d3-delaunay": {
+            "version": "6.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+            "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-dispatch": {
+            "version": "3.0.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+            "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-drag": {
+            "version": "3.0.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+            "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "node_modules/@types/d3-dsv": {
+            "version": "3.0.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+            "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-ease": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+            "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-fetch": {
+            "version": "3.0.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+            "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-dsv": "*"
+            }
+        },
+        "node_modules/@types/d3-force": {
+            "version": "3.0.10",
+            "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+            "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-format": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+            "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-geo": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+            "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*"
+            }
+        },
+        "node_modules/@types/d3-hierarchy": {
+            "version": "3.1.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+            "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-interpolate": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+            "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-color": "*"
+            }
+        },
+        "node_modules/@types/d3-path": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+            "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-polygon": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+            "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-quadtree": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+            "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-random": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+            "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-sankey": {
+            "version": "0.12.5",
+            "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.12.5.tgz",
+            "integrity": "sha512-/3RZSew0cLAtzGQ+C89hq/Rp3H20QJuVRSqFy6RKLe7E0B8kd2iOS1oBsodrgds4PcNVpqWhdUEng/SHvBcJ6Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-shape": "^1"
+            }
+        },
+        "node_modules/@types/d3-sankey/node_modules/@types/d3-path": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+            "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-sankey/node_modules/@types/d3-shape": {
+            "version": "1.3.12",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+            "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-path": "^1"
+            }
+        },
+        "node_modules/@types/d3-scale": {
+            "version": "4.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+            "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-time": "*"
+            }
+        },
+        "node_modules/@types/d3-scale-chromatic": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+            "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-selection": {
+            "version": "3.0.11",
+            "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+            "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-shape": {
+            "version": "3.1.8",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+            "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-path": "*"
+            }
+        },
+        "node_modules/@types/d3-time": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+            "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-time-format": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+            "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-timer": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+            "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-transition": {
+            "version": "3.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+            "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "node_modules/@types/d3-zoom": {
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+            "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-interpolate": "*",
+                "@types/d3-selection": "*"
+            }
+        },
+        "node_modules/@types/dagre": {
+            "version": "0.7.54",
+            "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.54.tgz",
+            "integrity": "sha512-QjcRY+adGbYvBFS7cwv5txhVIwX1XXIUswWl+kSQTbI6NjgZydrZkEKX/etzVd7i+bCsCb40Z/xlBY5eoFuvWQ==",
+            "license": "MIT"
+        },
         "node_modules/@types/estree": {
             "version": "1.0.9",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -3872,6 +4334,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/geojson": {
+            "version": "7946.0.16",
+            "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+            "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+            "license": "MIT"
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3886,6 +4354,32 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/leaflet": {
+            "version": "1.7.6",
+            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.6.tgz",
+            "integrity": "sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*"
+            }
+        },
+        "node_modules/@types/mapbox__point-geometry": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
+            "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/mapbox__vector-tile": {
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
+            "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*",
+                "@types/mapbox__point-geometry": "*",
+                "@types/pbf": "*"
+            }
+        },
         "node_modules/@types/node": {
             "version": "22.19.20",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.20.tgz",
@@ -3896,6 +4390,18 @@
                 "undici-types": "~6.21.0"
             }
         },
+        "node_modules/@types/parse-json": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+            "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/pbf": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
+            "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==",
+            "license": "MIT"
+        },
         "node_modules/@types/resolve": {
             "version": "1.20.2",
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -3903,6 +4409,79 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/supercluster": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz",
+            "integrity": "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*"
+            }
+        },
+        "node_modules/@types/three": {
+            "version": "0.135.0",
+            "resolved": "https://registry.npmjs.org/@types/three/-/three-0.135.0.tgz",
+            "integrity": "sha512-l7WLhIHjhHMtlpyTSltPPAKLpiMwgMD1hXHj59AVUpYRoZP7Fd9NNOSRSvZBCPLpTHPYojgQvSJCoza9zoL7bg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/throttle-debounce": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+            "integrity": "sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==",
+            "license": "MIT"
+        },
+        "node_modules/@types/topojson": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/@types/topojson/-/topojson-3.2.6.tgz",
+            "integrity": "sha512-ppfdlxjxofWJ66XdLgIlER/85RvpGyfOf8jrWf+3kVIjEatFxEZYD/Ea83jO672Xu1HRzd/ghwlbcZIUNHTskw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*",
+                "@types/topojson-client": "*",
+                "@types/topojson-server": "*",
+                "@types/topojson-simplify": "*",
+                "@types/topojson-specification": "*"
+            }
+        },
+        "node_modules/@types/topojson-client": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@types/topojson-client/-/topojson-client-3.1.5.tgz",
+            "integrity": "sha512-C79rySTyPxnQNNguTZNI1Ct4D7IXgvyAs3p9HPecnl6mNrJ5+UhvGNYcZfpROYV2lMHI48kJPxwR+F9C6c7nmw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*",
+                "@types/topojson-specification": "*"
+            }
+        },
+        "node_modules/@types/topojson-server": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/topojson-server/-/topojson-server-3.0.4.tgz",
+            "integrity": "sha512-5+ieK8ePfP+K2VH6Vgs1VCt+fO1U8XZHj0UsF+NktaF0DavAo1q3IvCBXgokk/xmtvoPltSUs6vxuR/zMdOE1g==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*",
+                "@types/topojson-specification": "*"
+            }
+        },
+        "node_modules/@types/topojson-simplify": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/topojson-simplify/-/topojson-simplify-3.0.3.tgz",
+            "integrity": "sha512-sBO5UZ0O2dB0bNwo0vut2yLHhj3neUGi9uL7/ROdm8Gs6dtt4jcB9OGDKr+M2isZwQM2RuzVmifnMZpxj4IGNw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*",
+                "@types/topojson-specification": "*"
+            }
+        },
+        "node_modules/@types/topojson-specification": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.5.tgz",
+            "integrity": "sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*"
+            }
+        },
         "node_modules/@types/trusted-types": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -4159,6 +4738,110 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/@unovis/dagre-layout": {
+            "version": "0.8.8-2",
+            "resolved": "https://registry.npmjs.org/@unovis/dagre-layout/-/dagre-layout-0.8.8-2.tgz",
+            "integrity": "sha512-ZfDvfcYtzzhZhgKZty8XDi+zQIotfRqfNVF5M3dFQ9d9C5MTaRdbeBnPUkNrmlLJGgQ42HMOE2ajZLfm2VlRhg==",
+            "license": "MIT",
+            "dependencies": {
+                "@unovis/graphlibrary": "^2.2.0-2",
+                "lodash-es": "^4.17.21"
+            }
+        },
+        "node_modules/@unovis/graphlibrary": {
+            "version": "2.2.0-2",
+            "resolved": "https://registry.npmjs.org/@unovis/graphlibrary/-/graphlibrary-2.2.0-2.tgz",
+            "integrity": "sha512-HeEzpd/vDyWiIJt0rnh+2ICXUIuF2N0+Z9OJJiKg0DB+eFUcD+bk+9QPhYHwkFwfxdjDA9fHi1DZ/O/bbV58Nw==",
+            "license": "MIT",
+            "dependencies": {
+                "lodash-es": "^4.17.21"
+            }
+        },
+        "node_modules/@unovis/ts": {
+            "version": "1.6.6",
+            "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.6.6.tgz",
+            "integrity": "sha512-i9VJpURi1sycMrTO6MfVRAThVH1Ugmu1olhkStlBGoCzbWvQW016K105AnvpQ3qGzpYkUAaW101ohdatt8yBrw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@emotion/css": "^11.7.1",
+                "@juggle/resize-observer": "^3.3.1",
+                "@types/d3": "^7.4.0",
+                "@types/d3-array": "~3.2.2",
+                "@types/d3-axis": "~3.0.6",
+                "@types/d3-brush": "~3.0.6",
+                "@types/d3-chord": "~3.0.6",
+                "@types/d3-collection": "^1.0.10",
+                "@types/d3-color": "~3.1.3",
+                "@types/d3-drag": "~3.0.7",
+                "@types/d3-ease": "~3.0.2",
+                "@types/d3-force": "~3.0.10",
+                "@types/d3-geo": "~3.1.0",
+                "@types/d3-hierarchy": "~3.1.7",
+                "@types/d3-interpolate": "~3.0.4",
+                "@types/d3-path": "~3.1.1",
+                "@types/d3-sankey": "^0.12.4",
+                "@types/d3-scale": "~4.0.9",
+                "@types/d3-selection": "~3.0.0",
+                "@types/d3-shape": "~3.1.7",
+                "@types/d3-timer": "~3.0.2",
+                "@types/d3-transition": "~3.0.9",
+                "@types/d3-zoom": "~3.0.8",
+                "@types/dagre": "^0.7.50",
+                "@types/geojson": "^7946.0.8",
+                "@types/leaflet": "1.7.6",
+                "@types/supercluster": "^5.0.2",
+                "@types/three": "^0.135.0",
+                "@types/throttle-debounce": "^5.0.0",
+                "@types/topojson": "^3.2.3",
+                "@types/topojson-client": "^3.0.0",
+                "@types/topojson-specification": "^1.0.2",
+                "@unovis/dagre-layout": "0.8.8-2",
+                "@unovis/graphlibrary": "2.2.0-2",
+                "d3": "^7.2.1",
+                "d3-array": "~3",
+                "d3-axis": "~3",
+                "d3-brush": "~3",
+                "d3-chord": "~3",
+                "d3-collection": "^1.0.7",
+                "d3-color": "~3",
+                "d3-drag": "~3",
+                "d3-ease": "~3",
+                "d3-force": "~3",
+                "d3-geo": "~3",
+                "d3-geo-projection": "^4.0.0",
+                "d3-hierarchy": "~3",
+                "d3-interpolate": "~3",
+                "d3-interpolate-path": "^2.2.3",
+                "d3-path": "~3",
+                "d3-sankey": "^0.12.3",
+                "d3-scale": "~4",
+                "d3-selection": "~3",
+                "d3-shape": "~3",
+                "d3-timer": "~3",
+                "d3-transition": "~3",
+                "d3-zoom": "~3",
+                "elkjs": "^0.10.0",
+                "geojson": "^0.5.0",
+                "leaflet": "1.7.1",
+                "maplibre-gl": "^2.1.9",
+                "striptags": "^3.2.0",
+                "supercluster": "^7.1.5",
+                "three": "^0.135.0",
+                "throttle-debounce": "^5.0.0",
+                "topojson-client": "^3.1.0",
+                "tslib": "^2.3.1"
+            }
+        },
+        "node_modules/@unovis/vue": {
+            "version": "1.6.6",
+            "resolved": "https://registry.npmjs.org/@unovis/vue/-/vue-1.6.6.tgz",
+            "integrity": "sha512-2WmSy2JWuoNE6jtV12TMGF4BcXsGF4gkJe1mx2sClVZ6M6s6ByHNmXH2XjLSkKzHitYsHoduPiDFtcb3OBR3iw==",
+            "license": "Apache-2.0",
+            "peerDependencies": {
+                "@unovis/ts": "1.6.6",
+                "vue": "^3"
+            }
+        },
         "node_modules/@unrs/resolver-binding-android-arm-eabi": {
             "version": "1.12.2",
             "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz",
@@ -5029,6 +5712,42 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/babel-plugin-macros": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+            "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "cosmiconfig": "^7.0.0",
+                "resolve": "^1.19.0"
+            },
+            "engines": {
+                "node": ">=10",
+                "npm": ">=6"
+            }
+        },
+        "node_modules/babel-plugin-macros/node_modules/resolve": {
+            "version": "1.22.12",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+            "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "is-core-module": "^2.16.1",
+                "path-parse": "^1.0.7",
+                "supports-preserve-symlinks-flag": "^1.0.0"
+            },
+            "bin": {
+                "resolve": "bin/resolve"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/babel-plugin-polyfill-corejs2": {
             "version": "0.4.17",
             "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.17.tgz",
@@ -5242,7 +5961,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6"
@@ -5398,7 +6116,6 @@
             "version": "2.20.3",
             "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
             "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/common-tags": {
@@ -5473,6 +6190,31 @@
                 "url": "https://opencollective.com/core-js"
             }
         },
+        "node_modules/cosmiconfig": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+            "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/parse-json": "^4.0.0",
+                "import-fresh": "^3.2.1",
+                "parse-json": "^5.0.0",
+                "path-type": "^4.0.0",
+                "yaml": "^1.10.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/cosmiconfig/node_modules/yaml": {
+            "version": "1.10.3",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+            "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5498,6 +6240,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/csscolorparser": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+            "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
+            "license": "MIT"
+        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5517,6 +6265,498 @@
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
             "license": "MIT"
         },
+        "node_modules/d3": {
+            "version": "7.9.0",
+            "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+            "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "3",
+                "d3-axis": "3",
+                "d3-brush": "3",
+                "d3-chord": "3",
+                "d3-color": "3",
+                "d3-contour": "4",
+                "d3-delaunay": "6",
+                "d3-dispatch": "3",
+                "d3-drag": "3",
+                "d3-dsv": "3",
+                "d3-ease": "3",
+                "d3-fetch": "3",
+                "d3-force": "3",
+                "d3-format": "3",
+                "d3-geo": "3",
+                "d3-hierarchy": "3",
+                "d3-interpolate": "3",
+                "d3-path": "3",
+                "d3-polygon": "3",
+                "d3-quadtree": "3",
+                "d3-random": "3",
+                "d3-scale": "4",
+                "d3-scale-chromatic": "3",
+                "d3-selection": "3",
+                "d3-shape": "3",
+                "d3-time": "3",
+                "d3-time-format": "4",
+                "d3-timer": "3",
+                "d3-transition": "3",
+                "d3-zoom": "3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-array": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+            "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+            "license": "ISC",
+            "dependencies": {
+                "internmap": "1 - 2"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-axis": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+            "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-brush": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+            "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-dispatch": "1 - 3",
+                "d3-drag": "2 - 3",
+                "d3-interpolate": "1 - 3",
+                "d3-selection": "3",
+                "d3-transition": "3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-chord": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+            "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-path": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-collection": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+            "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/d3-color": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+            "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-contour": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+            "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "^3.2.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-delaunay": {
+            "version": "6.0.4",
+            "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+            "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+            "license": "ISC",
+            "dependencies": {
+                "delaunator": "5"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-dispatch": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+            "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-drag": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+            "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-dispatch": "1 - 3",
+                "d3-selection": "3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-dsv": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+            "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+            "license": "ISC",
+            "dependencies": {
+                "commander": "7",
+                "iconv-lite": "0.6",
+                "rw": "1"
+            },
+            "bin": {
+                "csv2json": "bin/dsv2json.js",
+                "csv2tsv": "bin/dsv2dsv.js",
+                "dsv2dsv": "bin/dsv2dsv.js",
+                "dsv2json": "bin/dsv2json.js",
+                "json2csv": "bin/json2dsv.js",
+                "json2dsv": "bin/json2dsv.js",
+                "json2tsv": "bin/json2dsv.js",
+                "tsv2csv": "bin/dsv2dsv.js",
+                "tsv2json": "bin/dsv2json.js"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-dsv/node_modules/commander": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/d3-ease": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+            "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-fetch": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+            "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-dsv": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-force": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+            "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-dispatch": "1 - 3",
+                "d3-quadtree": "1 - 3",
+                "d3-timer": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-format": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+            "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-geo": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+            "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2.5.0 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-geo-projection": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
+            "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+            "license": "ISC",
+            "dependencies": {
+                "commander": "7",
+                "d3-array": "1 - 3",
+                "d3-geo": "1.12.0 - 3"
+            },
+            "bin": {
+                "geo2svg": "bin/geo2svg.js",
+                "geograticule": "bin/geograticule.js",
+                "geoproject": "bin/geoproject.js",
+                "geoquantize": "bin/geoquantize.js",
+                "geostitch": "bin/geostitch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-geo-projection/node_modules/commander": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/d3-hierarchy": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+            "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-color": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-interpolate-path": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.3.0.tgz",
+            "integrity": "sha512-tZYtGXxBmbgHsIc9Wms6LS5u4w6KbP8C09a4/ZYc4KLMYYqub57rRBUgpUr2CIarIrJEpdAWWxWQvofgaMpbKQ==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/d3-path": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+            "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-polygon": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+            "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-quadtree": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+            "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-random": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+            "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-sankey": {
+            "version": "0.12.3",
+            "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+            "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "d3-array": "1 - 2",
+                "d3-shape": "^1.2.0"
+            }
+        },
+        "node_modules/d3-sankey/node_modules/d3-array": {
+            "version": "2.12.1",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+            "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "internmap": "^1.0.0"
+            }
+        },
+        "node_modules/d3-sankey/node_modules/d3-path": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+            "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/d3-sankey/node_modules/d3-shape": {
+            "version": "1.3.7",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+            "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "d3-path": "1"
+            }
+        },
+        "node_modules/d3-sankey/node_modules/internmap": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+            "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+            "license": "ISC"
+        },
+        "node_modules/d3-scale": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+            "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2.10.0 - 3",
+                "d3-format": "1 - 3",
+                "d3-interpolate": "1.2.0 - 3",
+                "d3-time": "2.1.1 - 3",
+                "d3-time-format": "2 - 4"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale-chromatic": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+            "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-color": "1 - 3",
+                "d3-interpolate": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-selection": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+            "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-shape": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+            "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-path": "^3.1.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+            "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time-format": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+            "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-time": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-timer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+            "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-transition": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+            "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-color": "1 - 3",
+                "d3-dispatch": "1 - 3",
+                "d3-ease": "1 - 3",
+                "d3-interpolate": "1 - 3",
+                "d3-timer": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "d3-selection": "2 - 3"
+            }
+        },
+        "node_modules/d3-zoom": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+            "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-dispatch": "1 - 3",
+                "d3-drag": "2 - 3",
+                "d3-interpolate": "1 - 3",
+                "d3-selection": "2 - 3",
+                "d3-transition": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/data-view-buffer": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -5582,7 +6822,6 @@
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
             "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.3"
@@ -5684,6 +6923,15 @@
             "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
             "license": "MIT"
         },
+        "node_modules/delaunator": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
+            "integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
+            "license": "ISC",
+            "dependencies": {
+                "robust-predicates": "^3.0.2"
+            }
+        },
         "node_modules/detect-libc": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -5721,6 +6969,12 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/earcut": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+            "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+            "license": "ISC"
+        },
         "node_modules/ejs": {
             "version": "3.1.10",
             "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -5744,6 +6998,12 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/elkjs": {
+            "version": "0.10.2",
+            "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.10.2.tgz",
+            "integrity": "sha512-Yx3ORtbAFrXelYkAy2g0eYyVY8QG0XEmGdQXmy0eithKKjbWRfl3Xe884lfkszfBF6UKyIy4LwfcZ3AZc8oxFw==",
+            "license": "EPL-2.0"
+        },
         "node_modules/emoji-regex": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5775,6 +7035,21 @@
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
+        "node_modules/error-ex": {
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+            "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+            "license": "MIT",
+            "dependencies": {
+                "is-arrayish": "^0.2.1"
+            }
+        },
+        "node_modules/error-ex/node_modules/is-arrayish": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+            "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+            "license": "MIT"
+        },
         "node_modules/es-abstract": {
             "version": "1.24.2",
             "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
@@ -5858,7 +7133,6 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
             "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -5947,7 +7221,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=10"
@@ -6644,6 +7917,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/find-root": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+            "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+            "license": "MIT"
+        },
         "node_modules/find-up": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6749,7 +8028,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
             "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-            "dev": true,
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -6806,6 +8084,21 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/geojson": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
+            "integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/geojson-vt": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+            "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
+            "license": "ISC"
+        },
         "node_modules/get-caller-file": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6861,6 +8154,18 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/get-stream": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+            "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/get-symbol-description": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -6892,6 +8197,12 @@
                 "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
             }
         },
+        "node_modules/gl-matrix": {
+            "version": "3.4.4",
+            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+            "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+            "license": "MIT"
+        },
         "node_modules/glob": {
             "version": "11.1.0",
             "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
@@ -6930,6 +8241,32 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/global-prefix": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+            "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+            "license": "MIT",
+            "dependencies": {
+                "ini": "^1.3.5",
+                "kind-of": "^6.0.2",
+                "which": "^1.3.1"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/global-prefix/node_modules/which": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+            "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "which": "bin/which"
+            }
+        },
         "node_modules/globals": {
             "version": "14.0.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -7063,7 +8400,6 @@
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
             "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "function-bind": "^1.1.2"
@@ -7089,6 +8425,18 @@
             "dev": true,
             "license": "MPL-2.0"
         },
+        "node_modules/iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "license": "MIT",
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/idb": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
@@ -7096,6 +8444,26 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/ieee754": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "BSD-3-Clause"
+        },
         "node_modules/ignore": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -7110,7 +8478,6 @@
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
             "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "parent-module": "^1.0.0",
@@ -7133,6 +8500,12 @@
                 "node": ">=0.8.19"
             }
         },
+        "node_modules/ini": {
+            "version": "1.3.8",
+            "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+            "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+            "license": "ISC"
+        },
         "node_modules/internal-slot": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -7148,6 +8521,15 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/internmap": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+            "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/is-array-buffer": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -7253,7 +8635,6 @@
             "version": "2.16.2",
             "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
             "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "hasown": "^2.0.3"
@@ -7617,7 +8998,6 @@
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/jackspeak": {
@@ -7667,7 +9047,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
             "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/js-yaml": {
@@ -7697,7 +9076,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
             "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-            "dev": true,
             "license": "MIT",
             "bin": {
                 "jsesc": "bin/jsesc"
@@ -7713,6 +9091,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/json-parse-even-better-errors": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+            "license": "MIT"
+        },
         "node_modules/json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -7763,6 +9147,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/kdbush": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+            "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==",
+            "license": "ISC"
+        },
         "node_modules/keyv": {
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -7773,6 +9163,15 @@
                 "json-buffer": "3.0.1"
             }
         },
+        "node_modules/kind-of": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+            "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/laravel-precognition": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/laravel-precognition/-/laravel-precognition-2.0.0.tgz",
@@ -7816,6 +9215,12 @@
                 }
             }
         },
+        "node_modules/leaflet": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+            "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+            "license": "BSD-2-Clause"
+        },
         "node_modules/leven": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -8089,6 +9494,12 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/lines-and-columns": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+            "license": "MIT"
+        },
         "node_modules/locate-path": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -8112,6 +9523,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/lodash-es": {
+            "version": "4.18.1",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+            "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+            "license": "MIT"
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8152,6 +9569,39 @@
                 "@jridgewell/sourcemap-codec": "^1.5.5"
             }
         },
+        "node_modules/maplibre-gl": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.4.0.tgz",
+            "integrity": "sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==",
+            "hasInstallScript": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@mapbox/geojson-rewind": "^0.5.2",
+                "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+                "@mapbox/mapbox-gl-supported": "^2.0.1",
+                "@mapbox/point-geometry": "^0.1.0",
+                "@mapbox/tiny-sdf": "^2.0.5",
+                "@mapbox/unitbezier": "^0.0.1",
+                "@mapbox/vector-tile": "^1.3.1",
+                "@mapbox/whoots-js": "^3.1.0",
+                "@types/geojson": "^7946.0.10",
+                "@types/mapbox__point-geometry": "^0.1.2",
+                "@types/mapbox__vector-tile": "^1.3.0",
+                "@types/pbf": "^3.0.2",
+                "csscolorparser": "~1.0.3",
+                "earcut": "^2.2.4",
+                "geojson-vt": "^3.2.1",
+                "gl-matrix": "^3.4.3",
+                "global-prefix": "^3.0.0",
+                "murmurhash-js": "^1.0.0",
+                "pbf": "^3.2.1",
+                "potpack": "^1.0.2",
+                "quickselect": "^2.0.0",
+                "supercluster": "^7.1.5",
+                "tinyqueue": "^2.0.3",
+                "vt-pbf": "^3.1.3"
+            }
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -8219,7 +9669,6 @@
             "version": "1.2.8",
             "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
             "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-            "dev": true,
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -8239,7 +9688,6 @@
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/muggle-string": {
@@ -8249,6 +9697,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/murmurhash-js": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+            "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
+            "license": "MIT"
+        },
         "node_modules/nanoid": {
             "version": "3.3.12",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -8540,7 +9994,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "callsites": "^3.0.0"
@@ -8549,6 +10002,24 @@
                 "node": ">=6"
             }
         },
+        "node_modules/parse-json": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.0.0",
+                "error-ex": "^1.3.1",
+                "json-parse-even-better-errors": "^2.3.0",
+                "lines-and-columns": "^1.1.6"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/path-browserify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -8580,7 +10051,6 @@
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
             "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/path-scurry": {
@@ -8610,6 +10080,28 @@
                 "node": "20 || >=22"
             }
         },
+        "node_modules/path-type": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/pbf": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+            "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "ieee754": "^1.1.12",
+                "resolve-protobuf-schema": "^2.1.0"
+            },
+            "bin": {
+                "pbf": "bin/pbf"
+            }
+        },
         "node_modules/picocolors": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8680,6 +10172,12 @@
                 "node": ">=4"
             }
         },
+        "node_modules/potpack": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+            "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+            "license": "ISC"
+        },
         "node_modules/preact": {
             "version": "10.12.1",
             "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
@@ -8816,6 +10314,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/protocol-buffers-schema": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
+            "integrity": "sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ==",
+            "license": "MIT"
+        },
         "node_modules/punycode": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -8864,6 +10368,12 @@
             ],
             "license": "MIT"
         },
+        "node_modules/quickselect": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+            "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+            "license": "ISC"
+        },
         "node_modules/reflect.getprototypeof": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -9050,7 +10560,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=4"
@@ -9066,6 +10575,15 @@
                 "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
             }
         },
+        "node_modules/resolve-protobuf-schema": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+            "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+            "license": "MIT",
+            "dependencies": {
+                "protocol-buffers-schema": "^3.3.1"
+            }
+        },
         "node_modules/reusify": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -9077,6 +10595,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/robust-predicates": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
+            "integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
+            "license": "Unlicense"
+        },
         "node_modules/rolldown": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
@@ -9193,6 +10717,12 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "node_modules/rw": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+            "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+            "license": "BSD-3-Clause"
+        },
         "node_modules/rxjs": {
             "version": "7.8.2",
             "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -9257,6 +10787,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+            "license": "MIT"
+        },
         "node_modules/semver": {
             "version": "7.8.3",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.3.tgz",
@@ -9755,6 +11291,27 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/striptags": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+            "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==",
+            "license": "MIT"
+        },
+        "node_modules/stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+            "license": "MIT"
+        },
+        "node_modules/supercluster": {
+            "version": "7.1.5",
+            "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
+            "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
+            "license": "ISC",
+            "dependencies": {
+                "kdbush": "^3.0.0"
+            }
+        },
         "node_modules/supports-color": {
             "version": "8.1.1",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -9774,7 +11331,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
             "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -9873,6 +11429,21 @@
                 "node": ">=10"
             }
         },
+        "node_modules/three": {
+            "version": "0.135.0",
+            "resolved": "https://registry.npmjs.org/three/-/three-0.135.0.tgz",
+            "integrity": "sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ==",
+            "license": "MIT"
+        },
+        "node_modules/throttle-debounce": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+            "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.22"
+            }
+        },
         "node_modules/tinyglobby": {
             "version": "0.2.17",
             "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -9889,6 +11460,12 @@
                 "url": "https://github.com/sponsors/SuperchupuDev"
             }
         },
+        "node_modules/tinyqueue": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+            "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+            "license": "ISC"
+        },
         "node_modules/to-data-view": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/to-data-view/-/to-data-view-1.1.0.tgz",
@@ -9909,6 +11486,20 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/topojson-client": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+            "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+            "license": "ISC",
+            "dependencies": {
+                "commander": "2"
+            },
+            "bin": {
+                "topo2geo": "bin/topo2geo",
+                "topomerge": "bin/topomerge",
+                "topoquantize": "bin/topoquantize"
+            }
+        },
         "node_modules/tr46": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -10469,6 +12060,17 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/vt-pbf": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+            "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+            "license": "MIT",
+            "dependencies": {
+                "@mapbox/point-geometry": "0.1.0",
+                "@mapbox/vector-tile": "^1.3.1",
+                "pbf": "^3.2.1"
+            }
+        },
         "node_modules/vue": {
             "version": "3.5.35",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.35.tgz",
@@ -10991,6 +12593,23 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/yaml": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+            "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+            "license": "ISC",
+            "optional": true,
+            "peer": true,
+            "bin": {
+                "yaml": "bin.mjs"
+            },
+            "engines": {
+                "node": ">= 14.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/eemeli"
+            }
+        },
         "node_modules/yargs": {
             "version": "17.7.2",
             "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index 0c8ae49..e3854a4 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,8 @@
         "@point-of-sale/webserial-receipt-printer": "^2.0.0",
         "@tailwindcss/vite": "^4.1.11",
         "@tanstack/vue-table": "^8.21.3",
+        "@unovis/ts": "^1.6.6",
+        "@unovis/vue": "^1.6.6",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vueuse/core": "^14.3.0",
         "class-variance-authority": "^0.7.1",
diff --git a/resources/js/components/ui/chart/ChartContainer.vue b/resources/js/components/ui/chart/ChartContainer.vue
new file mode 100644
index 0000000..f77efdb
--- /dev/null
+++ b/resources/js/components/ui/chart/ChartContainer.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { provide, toRef } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChartConfigSymbol, type ChartConfig } from '.'
+
+const props = defineProps<{
+  config: ChartConfig
+  class?: HTMLAttributes['class']
+}>()
+
+provide(ChartConfigSymbol, toRef(props, 'config'))
+</script>
+
+<template>
+  <div :class="cn('flex aspect-video justify-center text-xs [&>div]:w-full', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/chart/ChartCrosshair.vue b/resources/js/components/ui/chart/ChartCrosshair.vue
new file mode 100644
index 0000000..917a260
--- /dev/null
+++ b/resources/js/components/ui/chart/ChartCrosshair.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { VisCrosshair } from '@unovis/vue'
+
+defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  template?: any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  color?: any
+}>()
+</script>
+
+<template>
+  <VisCrosshair
+    :template="template"
+    :color="color"
+    v-bind="$attrs"
+  />
+</template>
diff --git a/resources/js/components/ui/chart/ChartLegend.vue b/resources/js/components/ui/chart/ChartLegend.vue
new file mode 100644
index 0000000..e039c4f
--- /dev/null
+++ b/resources/js/components/ui/chart/ChartLegend.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/resources/js/components/ui/chart/ChartLegendContent.vue b/resources/js/components/ui/chart/ChartLegendContent.vue
new file mode 100644
index 0000000..61ec72c
--- /dev/null
+++ b/resources/js/components/ui/chart/ChartLegendContent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { ChartConfigSymbol } from '.'
+
+const props = defineProps<{
+  nameKey?: string
+}>()
+
+const config = inject(ChartConfigSymbol)
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-4">
+    <template v-for="(item, key) in config" :key="key">
+      <div class="flex items-center gap-1.5">
+        <span
+          class="size-2.5 rounded-full"
+          :style="{ backgroundColor: item.color ?? item.theme?.light }"
+        />
+        <span class="text-muted-foreground">
+          {{ item.label ?? key }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/resources/js/components/ui/chart/ChartTooltip.vue b/resources/js/components/ui/chart/ChartTooltip.vue
new file mode 100644
index 0000000..e039c4f
--- /dev/null
+++ b/resources/js/components/ui/chart/ChartTooltip.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/resources/js/components/ui/chart/ChartTooltipContent.vue b/resources/js/components/ui/chart/ChartTooltipContent.vue
new file mode 100644
index 0000000..1aba006
--- /dev/null
+++ b/resources/js/components/ui/chart/ChartTooltipContent.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { ChartConfigSymbol, type ChartConfig } from '.'
+
+const props = withDefaults(defineProps<{
+  labelKey?: string
+  nameKey?: string
+  indicator?: 'dot' | 'line' | 'dashed'
+  hideLabel?: boolean
+  hideIndicator?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload?: Array<{ name: string; value: number; color: string; dataKey: string }>
+  label?: string
+  class?: string
+}>(), {
+  indicator: 'dot',
+  hideLabel: false,
+  hideIndicator: false,
+})
+
+const config = inject(ChartConfigSymbol)
+
+function getPayloadConfig(key: string) {
+  return config?.value?.[key]
+}
+</script>
+
+<template>
+  <div class="rounded-lg border bg-background px-3 py-2 shadow-xl">
+    <template v-if="!hideLabel && label">
+      <div class="mb-1 font-medium">
+        {{ label }}
+      </div>
+    </template>
+    <div class="flex flex-col gap-0.5">
+      <template v-for="item in payload" :key="item.name">
+        <div class="flex items-center gap-2">
+          <template v-if="!hideIndicator">
+            <span
+              v-if="indicator === 'dot'"
+              class="size-2.5 rounded-full"
+              :style="{ backgroundColor: item.color }"
+            />
+            <span
+              v-else-if="indicator === 'line'"
+              class="h-0.5 w-4"
+              :style="{ backgroundColor: item.color }"
+            />
+            <span
+              v-else
+              class="h-0.5 w-4 border-t-2 border-dashed"
+              :style="{ borderColor: item.color }"
+            />
+          </template>
+          <span class="text-muted-foreground">
+            {{ getPayloadConfig(item.dataKey)?.label ?? item.name }}
+          </span>
+          <span class="ml-auto font-medium tabular-nums text-foreground">
+            {{ item.value.toLocaleString('id-ID') }}
+          </span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/components/ui/chart/index.ts b/resources/js/components/ui/chart/index.ts
new file mode 100644
index 0000000..ef755ab
--- /dev/null
+++ b/resources/js/components/ui/chart/index.ts
@@ -0,0 +1,19 @@
+import type { Component, InjectionKey, Ref } from 'vue'
+
+export const ChartConfigSymbol: InjectionKey<Ref<ChartConfig>> = Symbol('chartConfig')
+
+export type ChartConfig = {
+  [key in string]: {
+    label?: string
+    icon?: Component
+    color?: string
+    theme?: Record<string, string>
+  }
+}
+
+export { default as ChartContainer } from './ChartContainer.vue'
+export { default as ChartTooltip } from './ChartTooltip.vue'
+export { default as ChartTooltipContent } from './ChartTooltipContent.vue'
+export { default as ChartCrosshair } from './ChartCrosshair.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartLegendContent } from './ChartLegendContent.vue'
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index 969f3dd..b2c6f7f 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -1,12 +1,118 @@
 <script setup lang="ts">
-import { Head, usePage } from '@inertiajs/vue3';
-import { Clock, Sun, Sunrise, Moon } from '@lucide/vue';
+import { Head } from '@inertiajs/vue3';
+import {
+    Banknote,
+    Clock,
+    CreditCard,
+    DollarSign,
+    FileText,
+    Moon,
+    Package,
+    ShoppingCart,
+    Sun,
+    Sunrise,
+    TrendingDown,
+    TrendingUp,
+    Users,
+} from '@lucide/vue';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ChartContainer, ChartLegendContent } from '@/components/ui/chart';
+import { VisAxis, VisGroupedBar, VisXYContainer, VisDonut } from '@unovis/vue';
+import type { ChartConfig } from '@/components/ui/chart';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 
-const page = usePage();
-const user = computed(() => page.props.auth.user);
+interface DashboardProps {
+    rawMaterialStock: {
+        total_stock: number;
+        total_value: number;
+    };
+    productStock: {
+        total_stock: number;
+        total_reject: number;
+        total_value: number;
+    };
+    topSuppliers: Array<{
+        name: string;
+        total_amount: number;
+        purchase_count: number;
+    }>;
+    topCustomers: Array<{
+        name: string;
+        total_amount: number;
+        order_count: number;
+    }>;
+    purchaseSummary: {
+        total_purchases: number;
+        total_spent: number;
+        total_discount: number;
+    };
+    cuttingSummary: {
+        total_cost: number;
+        total_cutting: number;
+        total_warehouse: number;
+        total_reject: number;
+    };
+    orderStats: {
+        by_channel: Array<{
+            channel: string;
+            label: string;
+            count: number;
+            total: number;
+        }>;
+        by_payment_type: Array<{
+            payment_type: string;
+            label: string;
+            count: number;
+            total: number;
+        }>;
+        by_marketing: Array<{
+            name: string;
+            count: number;
+            total: number;
+        }>;
+        by_status: Array<{
+            status: string;
+            label: string;
+            count: number;
+        }>;
+    };
+    revenueSummary: {
+        total_revenue: number;
+        total_discount: number;
+        total_shipping: number;
+        total_orders: number;
+    };
+    cashAccounts: Array<{
+        name: string;
+        balance: number;
+    }>;
+    kasbonSummary: {
+        pending: { count: number; total: number };
+        approved: { count: number; total: number };
+        paid: { count: number; total: number };
+        total: number;
+    };
+    payrollSummary: {
+        has_period: boolean;
+        period_status?: string;
+        total_employees: number;
+        total_amount: number;
+        paid_amount: number;
+        unpaid_amount: number;
+        paid_count: number;
+        unpaid_count: number;
+    };
+    leaveRequestSummary: {
+        total: number;
+        pending: number;
+        approved: number;
+        rejected: number;
+    };
+}
+
+const props = defineProps<DashboardProps>();
 
 const currentTime = ref(new Date());
 let timer: ReturnType<typeof setInterval>;
@@ -56,14 +162,109 @@ const greeting = computed(() => {
 
     return { text: 'Selamat Malam', icon: Moon };
 });
+
+function formatRupiah(value: number): string {
+    return 'Rp ' + value.toLocaleString('id-ID');
+}
+
+// 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 channelColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)'];
+const channelChartConfig = computed(() => {
+    const config: ChartConfig = {};
+    props.orderStats.by_channel.forEach((item, index) => {
+        config[item.channel] = {
+            label: item.label,
+            color: channelColors[index % channelColors.length],
+        };
+    });
+    return config;
+});
+
+const paymentColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)'];
+const paymentChartConfig = computed(() => {
+    const config: ChartConfig = {};
+    props.orderStats.by_payment_type.forEach((item, index) => {
+        config[item.payment_type] = {
+            label: item.label,
+            color: paymentColors[index % paymentColors.length],
+        };
+    });
+    return config;
+});
+
+const statusColors = ['#facc15', 'var(--chart-1)', 'var(--chart-2)', 'var(--chart-4)'];
+const statusChartConfig = computed(() => {
+    const config: ChartConfig = {};
+    props.orderStats.by_status.forEach((item, index) => {
+        config[item.status] = {
+            label: item.label,
+            color: statusColors[index % statusColors.length],
+        };
+    });
+    return config;
+});
+
+const marketingColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'];
+const marketingChartConfig = computed(() => {
+    const config: ChartConfig = {};
+    props.orderStats.by_marketing.forEach((item, index) => {
+        config[`mkt_${index}`] = {
+            label: item.name,
+            color: marketingColors[index % marketingColors.length],
+        };
+    });
+    return config;
+});
+
+const marketingBarData = computed(() => {
+    return props.orderStats.by_marketing.map((item, index) => ({
+        name: item.name,
+        total: item.total,
+        count: item.count,
+    }));
+});
+
+type SupplierData = { name: string; amount: number };
+type CustomerData = { name: string; amount: 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 totalCashBalance = computed(() => {
+    return props.cashAccounts.reduce((sum, acc) => sum + acc.balance, 0);
+});
 </script>
 
 <template>
-
     <Head title="Dashboard" />
 
     <AdminLayout>
-        <div class="flex flex-1 flex-col gap-4">
+        <div class="flex flex-1 flex-col gap-6">
             <!-- Welcome Card -->
             <Card class="relative overflow-hidden">
                 <div class="from-primary/5 to-background absolute inset-0 bg-linear-to-br" />
@@ -74,7 +275,7 @@ const greeting = computed(() => {
                         </div>
                         <div>
                             <CardTitle class="text-2xl font-bold">
-                                {{ greeting.text }}, {{ user?.username }}!
+                                {{ greeting.text }}, {{ $page.props.auth.user?.username }}!
                             </CardTitle>
                             <CardDescription class="mt-1">
                                 Selamat datang di dasbor aplikasi.
@@ -85,7 +286,7 @@ const greeting = computed(() => {
                 <CardContent class="relative">
                     <div class="text-muted-foreground flex items-center gap-2 text-sm">
                         <span>{{ dateStr }}</span>
-                        <span>•</span>
+                        <span>-</span>
                         <span class="flex items-center gap-1">
                             <Clock class="size-3.5" />
                             {{ timeStr }}
@@ -94,11 +295,513 @@ const greeting = computed(() => {
                 </CardContent>
             </Card>
 
-            <!-- Placeholder for future content -->
-            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div class="bg-muted/50 aspect-video rounded-xl" />
-                <div class="bg-muted/50 aspect-video rounded-xl" />
-                <div class="bg-muted/50 aspect-video rounded-xl" />
+            <!-- Row 1: Stock Summary -->
+            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                <!-- 1. Raw Material Stock -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Stok Bahan Baku</CardTitle>
+                        <Package class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="text-2xl font-bold">
+                            {{ rawMaterialStock.total_stock.toLocaleString('id-ID') }}
+                        </div>
+                        <p class="text-muted-foreground text-xs">
+                            Total nilai: {{ formatRupiah(rawMaterialStock.total_value) }}
+                        </p>
+                    </CardContent>
+                </Card>
+
+                <!-- 2. Product Stock -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Stok Produk</CardTitle>
+                        <ShoppingCart class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="text-2xl font-bold">
+                            {{ productStock.total_stock.toLocaleString('id-ID') }}
+                        </div>
+                        <p class="text-muted-foreground text-xs">
+                            Total nilai: {{ formatRupiah(productStock.total_value) }}
+                            <span v-if="productStock.total_reject > 0" class="ml-1 text-red-500">
+                                ({{ productStock.total_reject }} reject)
+                            </span>
+                        </p>
+                    </CardContent>
+                </Card>
+
+                <!-- 5. Purchase Summary -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Total Pembelian</CardTitle>
+                        <TrendingDown class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="text-2xl font-bold">
+                            {{ formatRupiah(purchaseSummary.total_spent) }}
+                        </div>
+                        <p class="text-muted-foreground text-xs">
+                            {{ purchaseSummary.total_purchases }} transaksi pembelian
+                        </p>
+                    </CardContent>
+                </Card>
+
+                <!-- 8. Revenue Summary -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Total Pendapatan</CardTitle>
+                        <TrendingUp class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="text-2xl font-bold">
+                            {{ formatRupiah(revenueSummary.total_revenue) }}
+                        </div>
+                        <p class="text-muted-foreground text-xs">
+                            {{ revenueSummary.total_orders }} pesanan selesai
+                            <span v-if="revenueSummary.total_discount > 0" class="ml-1 text-orange-500">
+                                (potongan: {{ formatRupiah(revenueSummary.total_discount) }})
+                            </span>
+                        </p>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <!-- Row 2: Top 5 Charts -->
+            <div class="grid gap-4 md:grid-cols-2">
+                <!-- 3. Top 5 Suppliers Chart -->
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Top 5 Supplier</CardTitle>
+                        <CardDescription>Berdasarkan total harga pembelian</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <ChartContainer
+                            v-if="topSuppliers.length > 0"
+                            :config="supplierChartConfig"
+                            class="min-h-[250px] w-full"
+                        >
+                            <VisXYContainer :data="supplierBarData">
+                                <VisGroupedBar
+                                    :x="(d: SupplierData) => d.name"
+                                    :y="(d: SupplierData) => d.amount"
+                                    :color="supplierChartConfig.amount.color"
+                                    :rounded-corners="4"
+                                    bar-padding="0.1"
+                                />
+                                <VisAxis
+                                    type="x"
+                                    :x="(d: SupplierData) => d.name"
+                                    :tick-line="false"
+                                    :domain-line="false"
+                                    :grid-line="false"
+                                />
+                                <VisAxis
+                                    type="y"
+                                    :tick-format="(d: number) => ''"
+                                    :tick-line="false"
+                                    :domain-line="false"
+                                    :grid-line="true"
+                                />
+                            </VisXYContainer>
+                        </ChartContainer>
+                        <div v-else class="text-muted-foreground flex h-[250px] items-center justify-center">
+                            Belum ada data supplier
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 4. Top 5 Customers Chart -->
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Top 5 Pelanggan</CardTitle>
+                        <CardDescription>Berdasarkan total nilai pesanan</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <ChartContainer
+                            v-if="topCustomers.length > 0"
+                            :config="customerChartConfig"
+                            class="min-h-[250px] w-full"
+                        >
+                            <VisXYContainer :data="customerBarData">
+                                <VisGroupedBar
+                                    :x="(d: CustomerData) => d.name"
+                                    :y="(d: CustomerData) => d.amount"
+                                    :color="customerChartConfig.amount.color"
+                                    :rounded-corners="4"
+                                    bar-padding="0.1"
+                                />
+                                <VisAxis
+                                    type="x"
+                                    :x="(d: CustomerData) => d.name"
+                                    :tick-line="false"
+                                    :domain-line="false"
+                                    :grid-line="false"
+                                />
+                                <VisAxis
+                                    type="y"
+                                    :tick-format="(d: number) => ''"
+                                    :tick-line="false"
+                                    :domain-line="false"
+                                    :grid-line="true"
+                                />
+                            </VisXYContainer>
+                        </ChartContainer>
+                        <div v-else class="text-muted-foreground flex h-[250px] items-center justify-center">
+                            Belum ada data pelanggan
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <!-- Row 3: Order Stats Charts -->
+            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                <!-- 7a. Order by Channel -->
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Pesanan per Channel</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div v-if="orderStats.by_channel.length > 0">
+                            <ChartContainer :config="channelChartConfig" class="min-h-[200px] w-full">
+                                <VisXYContainer :data="orderStats.by_channel">
+                                    <VisDonut
+                                        :value="(d: typeof orderStats.by_channel[number]) => d.count"
+                                        :color="orderStats.by_channel.map((_, i) => channelColors[i % channelColors.length])"
+                                    />
+                                </VisXYContainer>
+                            </ChartContainer>
+                            <div class="mt-3 flex flex-wrap justify-center gap-3">
+                                <div
+                                    v-for="(item, index) in orderStats.by_channel"
+                                    :key="item.channel"
+                                    class="flex items-center gap-1.5"
+                                >
+                                    <span
+                                        class="size-2.5 rounded-full"
+                                        :style="{ backgroundColor: channelColors[index % channelColors.length] }"
+                                    />
+                                    <span class="text-muted-foreground text-xs">{{ item.label }}</span>
+                                    <span class="text-xs font-medium">{{ item.count }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="text-muted-foreground flex h-[200px] items-center justify-center">
+                            Belum ada data
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 7b. Order by Payment Type -->
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Pesanan per Pembayaran</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div v-if="orderStats.by_payment_type.length > 0">
+                            <ChartContainer :config="paymentChartConfig" class="min-h-[200px] w-full">
+                                <VisXYContainer :data="orderStats.by_payment_type">
+                                    <VisDonut
+                                        :value="(d: typeof orderStats.by_payment_type[number]) => d.count"
+                                        :color="orderStats.by_payment_type.map((_, i) => paymentColors[i % paymentColors.length])"
+                                    />
+                                </VisXYContainer>
+                            </ChartContainer>
+                            <div class="mt-3 flex flex-wrap justify-center gap-3">
+                                <div
+                                    v-for="(item, index) in orderStats.by_payment_type"
+                                    :key="item.payment_type"
+                                    class="flex items-center gap-1.5"
+                                >
+                                    <span
+                                        class="size-2.5 rounded-full"
+                                        :style="{ backgroundColor: paymentColors[index % paymentColors.length] }"
+                                    />
+                                    <span class="text-muted-foreground text-xs">{{ item.label }}</span>
+                                    <span class="text-xs font-medium">{{ item.count }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="text-muted-foreground flex h-[200px] items-center justify-center">
+                            Belum ada data
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 7c. Order by Marketing -->
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Pesanan per Marketing</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div v-if="orderStats.by_marketing.length > 0">
+                            <ChartContainer :config="marketingChartConfig" class="min-h-[200px] w-full">
+                                <VisXYContainer :data="orderStats.by_marketing">
+                                    <VisDonut
+                                        :value="(d: typeof orderStats.by_marketing[number]) => d.count"
+                                        :color="orderStats.by_marketing.map((_, i) => marketingColors[i % marketingColors.length])"
+                                    />
+                                </VisXYContainer>
+                            </ChartContainer>
+                            <div class="mt-3 flex flex-wrap justify-center gap-3">
+                                <div
+                                    v-for="(item, index) in orderStats.by_marketing"
+                                    :key="item.name"
+                                    class="flex items-center gap-1.5"
+                                >
+                                    <span
+                                        class="size-2.5 rounded-full"
+                                        :style="{ backgroundColor: marketingColors[index % marketingColors.length] }"
+                                    />
+                                    <span class="text-muted-foreground text-xs">{{ item.name }}</span>
+                                    <span class="text-xs font-medium">{{ item.count }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="text-muted-foreground flex h-[200px] items-center justify-center">
+                            Belum ada data
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 7d. Order by Status -->
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Pesanan per Status</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div v-if="orderStats.by_status.length > 0">
+                            <ChartContainer :config="statusChartConfig" class="min-h-[200px] w-full">
+                                <VisXYContainer :data="orderStats.by_status">
+                                    <VisDonut
+                                        :value="(d: typeof orderStats.by_status[number]) => d.count"
+                                        :color="orderStats.by_status.map((_, i) => statusColors[i % statusColors.length])"
+                                    />
+                                </VisXYContainer>
+                            </ChartContainer>
+                            <div class="mt-3 flex flex-wrap justify-center gap-3">
+                                <div
+                                    v-for="(item, index) in orderStats.by_status"
+                                    :key="item.status"
+                                    class="flex items-center gap-1.5"
+                                >
+                                    <span
+                                        class="size-2.5 rounded-full"
+                                        :style="{ backgroundColor: statusColors[index % statusColors.length] }"
+                                    />
+                                    <span class="text-muted-foreground text-xs">{{ item.label }}</span>
+                                    <span class="text-xs font-medium">{{ item.count }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="text-muted-foreground flex h-[200px] items-center justify-center">
+                            Belum ada data
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <!-- Row 4: Cutting & Finance -->
+            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                <!-- 6. Cutting Summary -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Biaya Produksi & Hasil Cutting</CardTitle>
+                        <FileText class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="space-y-3">
+                            <div>
+                                <p class="text-muted-foreground text-xs">Total Biaya Produksi</p>
+                                <p class="text-xl font-bold">{{ formatRupiah(cuttingSummary.total_cost) }}</p>
+                            </div>
+                            <div class="grid grid-cols-3 gap-2 pt-2 border-t">
+                                <div>
+                                    <p class="text-muted-foreground text-xs">Hasil Cutting</p>
+                                    <p class="text-lg font-semibold">{{ cuttingSummary.total_cutting.toLocaleString('id-ID') }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-muted-foreground text-xs">Masuk Gudang</p>
+                                    <p class="text-lg font-semibold">{{ cuttingSummary.total_warehouse.toLocaleString('id-ID') }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-muted-foreground text-xs">Reject</p>
+                                    <p class="text-lg font-semibold text-red-500">{{ cuttingSummary.total_reject.toLocaleString('id-ID') }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 8b. Revenue Detail -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Detail Pendapatan</CardTitle>
+                        <DollarSign class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="space-y-3">
+                            <div>
+                                <p class="text-muted-foreground text-xs">Total Pendapatan</p>
+                                <p class="text-xl font-bold text-green-600">{{ formatRupiah(revenueSummary.total_revenue) }}</p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-2 pt-2 border-t">
+                                <div>
+                                    <p class="text-muted-foreground text-xs">Total Potongan</p>
+                                    <p class="text-lg font-semibold text-orange-500">{{ formatRupiah(revenueSummary.total_discount) }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-muted-foreground text-xs">Total Ongkir</p>
+                                    <p class="text-lg font-semibold">{{ formatRupiah(revenueSummary.total_shipping) }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 9. Cash Accounts -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Kas Toko</CardTitle>
+                        <Banknote class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="space-y-3">
+                            <div>
+                                <p class="text-muted-foreground text-xs">Total Saldo</p>
+                                <p class="text-xl font-bold">{{ formatRupiah(totalCashBalance) }}</p>
+                            </div>
+                            <div class="space-y-2 pt-2 border-t">
+                                <div
+                                    v-for="account in cashAccounts"
+                                    :key="account.name"
+                                    class="flex items-center justify-between"
+                                >
+                                    <span class="text-muted-foreground text-sm">{{ account.name }}</span>
+                                    <span class="text-sm font-medium">{{ formatRupiah(account.balance) }}</span>
+                                </div>
+                                <div v-if="cashAccounts.length === 0" class="text-muted-foreground text-sm">
+                                    Belum ada akun kas
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <!-- Row 5: HR Summary -->
+            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                <!-- 10. Kasbon Summary -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Kasbon Karyawan</CardTitle>
+                        <CreditCard class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="space-y-3">
+                            <div>
+                                <p class="text-muted-foreground text-xs">Total Keseluruhan</p>
+                                <p class="text-xl font-bold">{{ formatRupiah(kasbonSummary.total) }}</p>
+                            </div>
+                            <div class="grid grid-cols-3 gap-2 pt-2 border-t">
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-yellow-500/10 text-yellow-600 border-yellow-500/20">
+                                        Menunggu
+                                    </Badge>
+                                    <p class="text-sm font-semibold">{{ kasbonSummary.pending.count }}</p>
+                                    <p class="text-muted-foreground text-xs">{{ formatRupiah(kasbonSummary.pending.total) }}</p>
+                                </div>
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-blue-500/10 text-blue-600 border-blue-500/20">
+                                        Disetujui
+                                    </Badge>
+                                    <p class="text-sm font-semibold">{{ kasbonSummary.approved.count }}</p>
+                                    <p class="text-muted-foreground text-xs">{{ formatRupiah(kasbonSummary.approved.total) }}</p>
+                                </div>
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-green-500/10 text-green-600 border-green-500/20">
+                                        Dibayar
+                                    </Badge>
+                                    <p class="text-sm font-semibold">{{ kasbonSummary.paid.count }}</p>
+                                    <p class="text-muted-foreground text-xs">{{ formatRupiah(kasbonSummary.paid.total) }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 11. Payroll Summary -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Penggajian Bulan Ini</CardTitle>
+                        <Users class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div v-if="payrollSummary.has_period" class="space-y-3">
+                            <div>
+                                <p class="text-muted-foreground text-xs">Total Penggajian</p>
+                                <p class="text-xl font-bold">{{ formatRupiah(payrollSummary.total_amount) }}</p>
+                                <p class="text-muted-foreground text-xs">{{ payrollSummary.total_employees }} karyawan</p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-2 pt-2 border-t">
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-green-500/10 text-green-600 border-green-500/20">
+                                        Sudah Dibayar
+                                    </Badge>
+                                    <p class="text-sm font-semibold">{{ payrollSummary.paid_count }}</p>
+                                    <p class="text-muted-foreground text-xs">{{ formatRupiah(payrollSummary.paid_amount) }}</p>
+                                </div>
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-red-500/10 text-red-600 border-red-500/20">
+                                        Belum Dibayar
+                                    </Badge>
+                                    <p class="text-sm font-semibold">{{ payrollSummary.unpaid_count }}</p>
+                                    <p class="text-muted-foreground text-xs">{{ formatRupiah(payrollSummary.unpaid_amount) }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="text-muted-foreground flex h-[120px] items-center justify-center">
+                            Belum ada periode payroll bulan ini
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <!-- 12. Leave Request Summary -->
+                <Card>
+                    <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardTitle class="text-sm font-medium">Pengajuan Cuti Bulan Ini</CardTitle>
+                        <FileText class="text-muted-foreground size-4" />
+                    </CardHeader>
+                    <CardContent>
+                        <div class="space-y-3">
+                            <div>
+                                <p class="text-muted-foreground text-xs">Total Pengajuan</p>
+                                <p class="text-xl font-bold">{{ leaveRequestSummary.total }}</p>
+                            </div>
+                            <div class="grid grid-cols-3 gap-2 pt-2 border-t">
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-yellow-500/10 text-yellow-600 border-yellow-500/20">
+                                        Menunggu
+                                    </Badge>
+                                    <p class="text-lg font-semibold">{{ leaveRequestSummary.pending }}</p>
+                                </div>
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-green-500/10 text-green-600 border-green-500/20">
+                                        Disetujui
+                                    </Badge>
+                                    <p class="text-lg font-semibold">{{ leaveRequestSummary.approved }}</p>
+                                </div>
+                                <div>
+                                    <Badge variant="outline" class="mb-1 bg-red-500/10 text-red-600 border-red-500/20">
+                                        Ditolak
+                                    </Badge>
+                                    <p class="text-lg font-semibold">{{ leaveRequestSummary.rejected }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
             </div>
         </div>
     </AdminLayout>