diff --git a/.gitignore b/.gitignore
index afa306b..94d3f3a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ yarn-error.log
 /.idea
 /.vscode
 /.zed
+/shadcn-vue
\ No newline at end of file
diff --git a/app/Http/Controllers/ClientController.php b/app/Http/Controllers/ClientController.php
index 6917bd2..51cccb6 100644
--- a/app/Http/Controllers/ClientController.php
+++ b/app/Http/Controllers/ClientController.php
@@ -15,7 +15,7 @@ public function __construct(protected ReferenceDataCache $referenceCache) {}
     public function index(Client $client, Request $request)
     {
         $search = $request->input('search');
-        
+
         $query = $client::query()
             ->select('clients.*')
             ->when($search, function ($que) use ($search) {
@@ -128,10 +128,9 @@ public function contracts(Client $client, Request $request)
                             ->orWhere('person.full_name', 'ilike', '%'.$search.'%');
                     });
             })
-            ->when($segmentId, function ($q) use ($segmentId) {
-                $q->join('contract_segment', function ($join) use ($segmentId) {
-                    $join->on('contract_segment.contract_id', '=', 'contracts.id')
-                        ->where('contract_segment.segment_id', $segmentId)
+            ->when($segmentIds, function ($q) use ($segmentIds) {
+                $q->whereHas('segments', function ($s) use ($segmentIds) {
+                    $s->whereIn('segments.id', $segmentIds)
                         ->where('contract_segment.active', true);
                 });
             })
@@ -152,9 +151,15 @@ public function contracts(Client $client, Request $request)
             'phone_types' => $this->referenceCache->getPhoneTypes(),
         ];
 
+        // Support custom pagination parameter names used by DataTableNew2
+        $perPage = $request->integer('contracts_per_page', $request->integer('per_page', 15));
+        $pageNumber = $request->integer('contracts_page', $request->integer('page', 1));
+
         return Inertia::render('Client/Contracts', [
             'client' => $data,
-            'contracts' => $contractsQuery->paginate($request->integer('per_page', 20))->withQueryString(),
+            'contracts' => $contractsQuery
+                ->paginate($perPage, ['*'], 'contracts_page', $pageNumber)
+                ->withQueryString(),
             'filters' => $request->only(['from', 'to', 'search', 'segment']),
             'segments' => $segments,
             'types' => $types,
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index efab421..ec9d766 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -2,15 +2,17 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Account;
 use App\Models\Activity;
 use App\Models\Client;
 use App\Models\Contract;
-use App\Models\Document; // assuming model name Import
+// assuming model name Import
 use App\Models\FieldJob; // if this model exists
 use App\Models\Import;
 use App\Models\SmsLog;
 use App\Models\SmsProfile;
 use App\Services\Sms\SmsService;
+use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Schema;
 use Inertia\Inertia;
@@ -21,256 +23,188 @@ class DashboardController extends Controller
     public function __invoke(SmsService $sms): Response
     {
         $today = now()->startOfDay();
-        $yesterday = now()->subDay()->startOfDay();
-        $staleThreshold = now()->subDays(7); // assumption: stale if no activity in last 7 days
+        $cacheMinutes = 5;
 
-        $clientsTotal = Client::count();
-        $clientsNew7d = Client::where('created_at', '>=', now()->subDays(7))->count();
-        // FieldJob table does not have a scheduled_at column (schema shows: assigned_at, completed_at, cancelled_at)
-        // Temporary logic: if scheduled_at ever added we'll use it; otherwise fall back to assigned_at then created_at.
-        if (Schema::hasColumn('field_jobs', 'scheduled_at')) {
-            $fieldJobsToday = FieldJob::whereDate('scheduled_at', $today)->count();
-        } else {
-            // Prefer assigned_at when present, otherwise created_at
-            $fieldJobsToday = FieldJob::whereDate(DB::raw('COALESCE(assigned_at, created_at)'), $today)->count();
-        }
-        $documentsToday = Document::whereDate('created_at', $today)->count();
-        $activeImports = Import::whereIn('status', ['queued', 'processing'])->count();
-        $activeContracts = Contract::where('active', 1)->count();
+        // Active clients count - cached
+        $activeClientsCount = Cache::remember('dashboard:active_clients:'.now()->format('Y-m-d'), $cacheMinutes * 60, function () {
+            return Client::where('active', true)->count();
+        });
 
-        // Basic activities deferred list (limit 10)
-        $activities = Activity::query()
-            ->with(['clientCase:id,uuid'])
-            ->latest()
-            ->limit(10)
-            ->get(['id', 'note', 'created_at', 'client_case_id', 'contract_id', 'action_id', 'decision_id'])
-            ->map(fn ($a) => [
-                'id' => $a->id,
-                'note' => $a->note,
-                'created_at' => $a->created_at,
-                'client_case_id' => $a->client_case_id,
-                'client_case_uuid' => $a->clientCase?->uuid,
-                'contract_id' => $a->contract_id,
-                'action_id' => $a->action_id,
-                'decision_id' => $a->decision_id,
-            ]);
+        // Active contracts count - cached
+        $activeContractsCount = Cache::remember('dashboard:active_contracts:'.now()->format('Y-m-d'), $cacheMinutes * 60, function () {
+            return Contract::whereNull('deleted_at')->count();
+        });
 
-        // 7-day trends (including today)
-        $start = now()->subDays(6)->startOfDay();
-        $end = now()->endOfDay();
+        // Sum of active contracts' account balance - cached
+        $totalBalance = Cache::remember('dashboard:total_balance:'.now()->format('Y-m-d'), $cacheMinutes * 60, function () {
+            return Account::whereHas('contract', function ($q) {
+                $q->whereNull('deleted_at');
+            })->sum('balance_amount') ?? 0;
+        });
 
-        $dateKeys = collect(range(0, 6))
-            ->map(fn ($i) => now()->subDays(6 - $i)->format('Y-m-d'));
-
-        $clientTrendRaw = Client::whereBetween('created_at', [$start, $end])
-            ->selectRaw('DATE(created_at) as d, COUNT(*) as c')
-            ->groupBy('d')
-            ->pluck('c', 'd');
-        $documentTrendRaw = Document::whereBetween('created_at', [$start, $end])
-            ->selectRaw('DATE(created_at) as d, COUNT(*) as c')
-            ->groupBy('d')
-            ->pluck('c', 'd');
-        $fieldJobTrendRaw = FieldJob::whereBetween(DB::raw('COALESCE(assigned_at, created_at)'), [$start, $end])
-            ->selectRaw('DATE(COALESCE(assigned_at, created_at)) as d, COUNT(*) as c')
-            ->groupBy('d')
-            ->pluck('c', 'd');
-        $importTrendRaw = Import::whereBetween('created_at', [$start, $end])
-            ->selectRaw('DATE(created_at) as d, COUNT(*) as c')
-            ->groupBy('d')
-            ->pluck('c', 'd');
-
-        // Completed field jobs last 7 days
-        $fieldJobCompletedRaw = FieldJob::whereNotNull('completed_at')
-            ->whereBetween('completed_at', [$start, $end])
-            ->selectRaw('DATE(completed_at) as d, COUNT(*) as c')
-            ->groupBy('d')
-            ->pluck('c', 'd');
-
-        $trends = [
-            'clients_new' => $dateKeys->map(fn ($d) => (int) ($clientTrendRaw[$d] ?? 0))->values(),
-            'documents_new' => $dateKeys->map(fn ($d) => (int) ($documentTrendRaw[$d] ?? 0))->values(),
-            'field_jobs' => $dateKeys->map(fn ($d) => (int) ($fieldJobTrendRaw[$d] ?? 0))->values(),
-            'imports_new' => $dateKeys->map(fn ($d) => (int) ($importTrendRaw[$d] ?? 0))->values(),
-            'field_jobs_completed' => $dateKeys->map(fn ($d) => (int) ($fieldJobCompletedRaw[$d] ?? 0))->values(),
-            'labels' => $dateKeys,
-        ];
-
-        // Stale client cases (no activity in last 7 days)
-        $staleCases = \App\Models\ClientCase::query()
-            ->leftJoin('activities', function ($join) {
-                $join->on('activities.client_case_id', '=', 'client_cases.id')
-                    ->whereNull('activities.deleted_at');
+        // Active promises count (not expired or expires today) - cached
+        $activePromisesCount = Cache::remember('dashboard:active_promises:'.now()->format('Y-m-d'), $cacheMinutes * 60, function () use ($today) {
+            return Account::whereHas('contract', function ($q) {
+                $q->whereNull('deleted_at');
             })
-            ->selectRaw('client_cases.id, client_cases.uuid, client_cases.client_ref, MAX(activities.created_at) as last_activity_at, client_cases.created_at')
-            ->groupBy('client_cases.id', 'client_cases.uuid', 'client_cases.client_ref', 'client_cases.created_at')
-            ->havingRaw('(MAX(activities.created_at) IS NULL OR MAX(activities.created_at) < ?) AND client_cases.created_at < ?', [$staleThreshold, $staleThreshold])
-            ->orderByRaw('last_activity_at NULLS FIRST, client_cases.created_at ASC')
-            ->limit(10)
-            ->get()
-            ->map(function ($c) {
-                // Reference point: last activity if exists, else creation.
-                $reference = $c->last_activity_at ? \Illuminate\Support\Carbon::parse($c->last_activity_at) : $c->created_at;
-                // Use minute precision to avoid jumping to 1 too early (e.g. created just before midnight).
-                $minutes = $reference ? max(0, $reference->diffInMinutes(now())) : 0;
-                $daysFraction = $minutes / 1440; // 60 * 24
-                // Provide both fractional and integer versions (integer preserved for backwards compatibility if needed)
-                $daysInteger = (int) floor($daysFraction);
+            ->whereNotNull('promise_date')
+            ->whereDate('promise_date', '>=', $today)
+            ->count();
+        });
 
-                return [
-                    'id' => $c->id,
-                    'uuid' => $c->uuid,
-                    'client_ref' => $c->client_ref,
-                    'last_activity_at' => $c->last_activity_at,
-                    'created_at' => $c->created_at,
-                    'days_without_activity' => round($daysFraction, 4), // fractional for finer UI decision (<1 day)
-                    'days_stale' => $daysInteger, // legacy key (integer)
-                    'has_activity' => (bool) $c->last_activity_at,
-                ];
-            });
+        // Activities (limit 10) - cached
+        $activities = Cache::remember('dashboard:activities', $cacheMinutes * 60, function () {
+            return Activity::query()
+                ->with(['clientCase:id,uuid'])
+                ->latest()
+                ->limit(10)
+                ->get(['id', 'note', 'created_at', 'client_case_id', 'contract_id', 'action_id', 'decision_id'])
+                ->map(fn ($a) => [
+                    'id' => $a->id,
+                    'note' => $a->note,
+                    'created_at' => $a->created_at,
+                    'client_case_id' => $a->client_case_id,
+                    'client_case_uuid' => $a->clientCase?->uuid,
+                    'contract_id' => $a->contract_id,
+                    'action_id' => $a->action_id,
+                    'decision_id' => $a->decision_id,
+                ]);
+        });
 
-        // Field jobs assigned today
-        $fieldJobsAssignedToday = FieldJob::query()
-            ->whereDate(DB::raw('COALESCE(assigned_at, created_at)'), $today)
-            ->select(['id', 'assigned_user_id', 'priority', 'assigned_at', 'created_at', 'contract_id'])
-            ->with(['contract' => function ($q) {
-                $q->select('id', 'uuid', 'reference', 'client_case_id')
-                    ->with(['clientCase:id,uuid,person_id', 'clientCase.person:id,full_name', 'segments:id,name']);
-            }])
-            ->latest(DB::raw('COALESCE(assigned_at, created_at)'))
-            ->limit(15)
-            ->get()
-            ->map(function ($fj) {
-                $contract = $fj->contract;
-                $segmentId = null;
-                if ($contract && method_exists($contract, 'segments')) {
-                    // Determine active segment via pivot active flag if present
-                    $activeSeg = $contract->segments->first();
-                    if ($activeSeg && isset($activeSeg->pivot) && ($activeSeg->pivot->active ?? true)) {
-                        $segmentId = $activeSeg->id;
+        // 7-day trends for field jobs - cached
+        $trends = Cache::remember('dashboard:field_jobs_trends:'.now()->format('Y-m-d'), $cacheMinutes * 60, function () {
+            $start = now()->subDays(6)->startOfDay();
+            $end = now()->endOfDay();
+
+            $dateKeys = collect(range(0, 6))
+                ->map(fn ($i) => now()->subDays(6 - $i)->format('Y-m-d'));
+
+            $fieldJobTrendRaw = FieldJob::whereBetween(DB::raw('COALESCE(assigned_at, created_at)'), [$start, $end])
+                ->selectRaw('DATE(COALESCE(assigned_at, created_at)) as d, COUNT(*) as c')
+                ->groupBy('d')
+                ->pluck('c', 'd');
+
+            // Completed field jobs last 7 days
+            $fieldJobCompletedRaw = FieldJob::whereNotNull('completed_at')
+                ->whereBetween('completed_at', [$start, $end])
+                ->selectRaw('DATE(completed_at) as d, COUNT(*) as c')
+                ->groupBy('d')
+                ->pluck('c', 'd');
+
+            return [
+                'field_jobs' => $dateKeys->map(fn ($d) => (int) ($fieldJobTrendRaw[$d] ?? 0))->values(),
+                'field_jobs_completed' => $dateKeys->map(fn ($d) => (int) ($fieldJobCompletedRaw[$d] ?? 0))->values(),
+                'labels' => $dateKeys,
+            ];
+        });
+
+        // Field jobs assigned today - cached
+        $fieldJobsAssignedToday = Cache::remember('dashboard:field_jobs_assigned_today:'.now()->format('Y-m-d'), $cacheMinutes * 60, function () use ($today) {
+            return FieldJob::query()
+                ->whereDate(DB::raw('COALESCE(assigned_at, created_at)'), $today)
+                ->select(['id', 'assigned_user_id', 'priority', 'assigned_at', 'created_at', 'contract_id'])
+                ->with(['contract' => function ($q) {
+                    $q->select('id', 'uuid', 'reference', 'client_case_id')
+                        ->with(['clientCase:id,uuid,person_id', 'clientCase.person:id,full_name', 'segments:id,name']);
+                }])
+                ->latest(DB::raw('COALESCE(assigned_at, created_at)'))
+                ->limit(15)
+                ->get()
+                ->map(function ($fj) {
+                    $contract = $fj->contract;
+                    $segmentId = null;
+                    if ($contract && method_exists($contract, 'segments')) {
+                        $activeSeg = $contract->segments->first();
+                        if ($activeSeg && isset($activeSeg->pivot) && ($activeSeg->pivot->active ?? true)) {
+                            $segmentId = $activeSeg->id;
+                        }
                     }
-                }
 
-                return [
-                    'id' => $fj->id,
-                    'priority' => $fj->priority,
-                    // Normalize to ISO8601 strings so FE retains timezone & time component
-                    'assigned_at' => $fj->assigned_at?->toIso8601String(),
-                    'created_at' => $fj->created_at?->toIso8601String(),
-                    'contract' => $contract ? [
-                        'uuid' => $contract->uuid,
-                        'reference' => $contract->reference,
-                        'client_case_uuid' => optional($contract->clientCase)->uuid,
-                        'person_full_name' => optional(optional($contract->clientCase)->person)->full_name,
-                        'segment_id' => $segmentId,
-                    ] : null,
-                ];
-            });
+                    return [
+                        'id' => $fj->id,
+                        'priority' => $fj->priority,
+                        'assigned_at' => $fj->assigned_at?->toIso8601String(),
+                        'created_at' => $fj->created_at?->toIso8601String(),
+                        'contract' => $contract ? [
+                            'uuid' => $contract->uuid,
+                            'reference' => $contract->reference,
+                            'client_case_uuid' => optional($contract->clientCase)->uuid,
+                            'person_full_name' => optional(optional($contract->clientCase)->person)->full_name,
+                            'segment_id' => $segmentId,
+                        ] : null,
+                    ];
+                });
+        });
 
-        // Imports in progress (queued / processing)
-        $importsInProgress = Import::query()
-            ->whereIn('status', ['queued', 'processing'])
-            ->latest('created_at')
-            ->limit(10)
-            ->get(['id', 'uuid', 'file_name', 'status', 'total_rows', 'imported_rows', 'valid_rows', 'invalid_rows', 'started_at'])
-            ->map(fn ($i) => [
-                'id' => $i->id,
-                'uuid' => $i->uuid,
-                'file_name' => $i->file_name,
-                'status' => $i->status,
-                'total_rows' => $i->total_rows,
-                'imported_rows' => $i->imported_rows,
-                'valid_rows' => $i->valid_rows,
-                'invalid_rows' => $i->invalid_rows,
-                'progress_pct' => $i->total_rows ? round(($i->imported_rows / max(1, $i->total_rows)) * 100, 1) : null,
-                'started_at' => $i->started_at,
-            ]);
-
-        // Active document templates summary (active versions)
-        $activeTemplates = \App\Models\DocumentTemplate::query()
-            ->where('active', true)
-            ->latest('updated_at')
-            ->limit(10)
-            ->get(['id', 'name', 'slug', 'version', 'updated_at']);
-
-        // System health (deferred)
-        $queueBacklog = Schema::hasTable('jobs') ? DB::table('jobs')->count() : null;
-        $failedJobs = Schema::hasTable('failed_jobs') ? DB::table('failed_jobs')->count() : null;
+        // System health for timestamp
         $recentActivity = Activity::query()->latest('created_at')->value('created_at');
         $lastActivityMinutes = null;
         if ($recentActivity) {
-            // diffInMinutes is absolute (non-negative) but guard anyway & cast to int
             $lastActivityMinutes = (int) max(0, now()->diffInMinutes($recentActivity));
         }
         $systemHealth = [
-            'queue_backlog' => $queueBacklog,
-            'failed_jobs' => $failedJobs,
             'last_activity_minutes' => $lastActivityMinutes,
             'last_activity_iso' => $recentActivity?->toIso8601String(),
             'generated_at' => now()->toIso8601String(),
         ];
 
-        return Inertia::render('Dashboard', [
+        return Inertia::render('Dashboard/Index', [
             'kpis' => [
-                'clients_total' => $clientsTotal,
-                'clients_new_7d' => $clientsNew7d,
-                'field_jobs_today' => $fieldJobsToday,
-                'documents_today' => $documentsToday,
-                'active_imports' => $activeImports,
-                'active_contracts' => $activeContracts,
+                'active_clients' => $activeClientsCount,
+                'active_contracts' => $activeContractsCount,
+                'total_balance' => $totalBalance,
+                'active_promises' => $activePromisesCount,
             ],
             'trends' => $trends,
-        ])->with([ // deferred props (Inertia v2 style)
+        ])->with([
             'activities' => fn () => $activities,
             'systemHealth' => fn () => $systemHealth,
-            'staleCases' => fn () => $staleCases,
             'fieldJobsAssignedToday' => fn () => $fieldJobsAssignedToday,
-            'importsInProgress' => fn () => $importsInProgress,
-            'activeTemplates' => fn () => $activeTemplates,
-            'smsStats' => function () use ($sms, $today) {
-                // Aggregate counts per profile for today
-                $counts = SmsLog::query()
-                    ->whereDate('created_at', $today)
-                    ->selectRaw('profile_id, status, COUNT(*) as c')
-                    ->groupBy('profile_id', 'status')
-                    ->get()
-                    ->groupBy('profile_id')
-                    ->map(function ($rows) {
-                        $map = [
-                            'queued' => 0,
-                            'sent' => 0,
-                            'delivered' => 0,
-                            'failed' => 0,
-                        ];
-                        foreach ($rows as $r) {
-                            $map[$r->status] = (int) $r->c;
+            'smsStats' => function () use ($sms, $today, $cacheMinutes) {
+                // SMS stats - cached
+                return Cache::remember('dashboard:sms_stats:'.now()->format('Y-m-d'), $cacheMinutes * 60, function () use ($sms, $today) {
+                    $counts = SmsLog::query()
+                        ->whereDate('created_at', $today)
+                        ->selectRaw('profile_id, status, COUNT(*) as c')
+                        ->groupBy('profile_id', 'status')
+                        ->get()
+                        ->groupBy('profile_id')
+                        ->map(function ($rows) {
+                            $map = [
+                                'queued' => 0,
+                                'sent' => 0,
+                                'delivered' => 0,
+                                'failed' => 0,
+                            ];
+                            foreach ($rows as $r) {
+                                $map[$r->status] = (int) $r->c;
+                            }
+                            $map['total'] = array_sum($map);
+
+                            return $map;
+                        });
+
+                    $profiles = SmsProfile::query()
+                        ->orderBy('name')
+                        ->get(['id', 'name', 'active', 'api_username', 'encrypted_api_password']);
+
+                    return $profiles->map(function (SmsProfile $p) use ($sms, $counts) {
+                        try {
+                            $balance = $sms->getCreditBalance($p);
+                        } catch (\Throwable $e) {
+                            $balance = '—';
                         }
-                        $map['total'] = array_sum($map);
+                        $c = $counts->get($p->id) ?? ['queued' => 0, 'sent' => 0, 'delivered' => 0, 'failed' => 0, 'total' => 0];
 
-                        return $map;
-                    });
-
-                // Important: include credential fields so provider calls have proper credentials
-                $profiles = SmsProfile::query()
-                    ->orderBy('name')
-                    ->get(['id', 'name', 'active', 'api_username', 'encrypted_api_password']);
-
-                return $profiles->map(function (SmsProfile $p) use ($sms, $counts) {
-                    // Provider balance may fail; guard and present a placeholder.
-                    try {
-                        $balance = $sms->getCreditBalance($p);
-                    } catch (\Throwable $e) {
-                        $balance = '—';
-                    }
-                    $c = $counts->get($p->id) ?? ['queued' => 0, 'sent' => 0, 'delivered' => 0, 'failed' => 0, 'total' => 0];
-
-                    return [
-                        'id' => $p->id,
-                        'name' => $p->name,
-                        'active' => (bool) $p->active,
-                        'balance' => $balance,
-                        'today' => $c,
-                    ];
-                })->values();
+                        return [
+                            'id' => $p->id,
+                            'name' => $p->name,
+                            'active' => (bool) $p->active,
+                            'balance' => $balance,
+                            'today' => $c,
+                        ];
+                    })->values();
+                });
             },
         ]);
     }
diff --git a/components.json b/components.json
index 51dcdc6..16e49a0 100644
--- a/components.json
+++ b/components.json
@@ -11,9 +11,9 @@
   },
   "iconLibrary": "lucide",
   "aliases": {
-    "components": "@/components",
+    "components": "@/Components",
     "utils": "@/lib/utils",
-    "ui": "@/components/ui",
+    "ui": "@/Components/ui",
     "lib": "@/lib",
     "composables": "@/composables"
   },
diff --git a/package-lock.json b/package-lock.json
index 2f91a7d..c1296ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
                 "@heroicons/vue": "^2.1.5",
                 "@internationalized/date": "^3.9.0",
                 "@tanstack/vue-table": "^8.21.3",
+                "@unovis/ts": "^1.6.2",
+                "@unovis/vue": "^1.6.2",
                 "@vee-validate/zod": "^4.15.1",
                 "@vuepic/vue-datepicker": "^11.0.2",
                 "@vueuse/core": "^14.0.0",
@@ -69,6 +71,58 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@babel/code-frame": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+            "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.27.1",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.1.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/generator": {
+            "version": "7.28.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+            "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.28.5",
+                "@babel/types": "^7.28.5",
+                "@jridgewell/gen-mapping": "^0.3.12",
+                "@jridgewell/trace-mapping": "^0.3.28",
+                "jsesc": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-globals": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+            "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-module-imports": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+            "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/traverse": "^7.27.1",
+                "@babel/types": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/helper-string-parser": {
             "version": "7.27.1",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -79,21 +133,21 @@
             }
         },
         "node_modules/@babel/helper-validator-identifier": {
-            "version": "7.27.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-            "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+            "version": "7.28.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+            "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.28.4",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
-            "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+            "version": "7.28.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+            "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
             "license": "MIT",
             "dependencies": {
-                "@babel/types": "^7.28.4"
+                "@babel/types": "^7.28.5"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -111,19 +165,145 @@
                 "node": ">=6.9.0"
             }
         },
-        "node_modules/@babel/types": {
-            "version": "7.28.4",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
-            "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+        "node_modules/@babel/template": {
+            "version": "7.27.2",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+            "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
             "license": "MIT",
             "dependencies": {
-                "@babel/helper-string-parser": "^7.27.1",
-                "@babel/helper-validator-identifier": "^7.27.1"
+                "@babel/code-frame": "^7.27.1",
+                "@babel/parser": "^7.27.2",
+                "@babel/types": "^7.27.1"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@babel/traverse": {
+            "version": "7.28.5",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+            "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.27.1",
+                "@babel/generator": "^7.28.5",
+                "@babel/helper-globals": "^7.28.0",
+                "@babel/parser": "^7.28.5",
+                "@babel/template": "^7.27.2",
+                "@babel/types": "^7.28.5",
+                "debug": "^4.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/types": {
+            "version": "7.28.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+            "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.27.1",
+                "@babel/helper-validator-identifier": "^7.28.5"
+            },
+            "engines": {
+                "node": ">=6.9.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/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/@esbuild/aix-ppc64": {
             "version": "0.25.10",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
@@ -767,7 +947,6 @@
             "version": "0.3.13",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
             "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -789,7 +968,6 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
             "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.0.0"
@@ -805,13 +983,81 @@
             "version": "0.3.31",
             "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
             "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/resolve-uri": "^3.1.0",
                 "@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/@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.0.7",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.7.tgz",
+            "integrity": "sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==",
+            "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/@mdi/js": {
             "version": "7.4.47",
             "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -1634,6 +1880,295 @@
                 "vue": "^2.7.0 || ^3.0.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.11.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
+            "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
+            "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.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+            "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+            "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.53",
+            "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.53.tgz",
+            "integrity": "sha512-f4gkWqzPZvYmKhOsDnhq/R8mO4UMcKdxZo+i5SCkOU1wvGeHJeUXGIHeE9pnwGyPMDof1Vx5ZQo4nxpeg2TTVQ==",
+            "license": "MIT"
+        },
         "node_modules/@types/estree": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1641,24 +2176,210 @@
             "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/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/lodash": {
             "version": "4.17.20",
             "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
             "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
             "license": "MIT"
         },
+        "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/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/resize-observer-browser": {
             "version": "0.1.11",
             "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
             "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==",
             "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/web-bluetooth": {
             "version": "0.0.21",
             "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
             "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
             "license": "MIT"
         },
+        "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.2",
+            "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.6.2.tgz",
+            "integrity": "sha512-kSOWRiZsU4Kk1yuJSSaJs+zJCKNg3+2A0/6/7/y1Cu5uHggwGPeE3CzKaNOal/Hpc46bnZw2VLI23mY+gDFbeQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@emotion/css": "^11.7.1",
+                "@juggle/resize-observer": "^3.3.1",
+                "@types/d3": "^7.4.0",
+                "@types/d3-collection": "^1.0.10",
+                "@types/d3-sankey": "^0.11.2",
+                "@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-collection": "^1.0.7",
+                "d3-geo-projection": "^4.0.0",
+                "d3-interpolate-path": "^2.2.3",
+                "d3-sankey": "^0.12.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",
+                "to-px": "^1.1.0",
+                "topojson-client": "^3.1.0",
+                "tslib": "^2.3.1"
+            }
+        },
+        "node_modules/@unovis/vue": {
+            "version": "1.6.2",
+            "resolved": "https://registry.npmjs.org/@unovis/vue/-/vue-1.6.2.tgz",
+            "integrity": "sha512-vFglLeiTnNk8VaCEjctAMQXi8Vi+dc217JLkbiIkOLNLXzOClv1ZLv7QjKplRHG+eq/DKC17WSBKINsjXuYbtQ==",
+            "license": "Apache-2.0",
+            "peerDependencies": {
+                "@unovis/ts": "1.6.2",
+                "vue": "^3"
+            }
+        },
         "node_modules/@vee-validate/zod": {
             "version": "4.15.1",
             "resolved": "https://registry.npmjs.org/@vee-validate/zod/-/zod-4.15.1.tgz",
@@ -1964,6 +2685,21 @@
                 "proxy-from-env": "^1.1.0"
             }
         },
+        "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/baseline-browser-mapping": {
             "version": "2.8.10",
             "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
@@ -2064,6 +2800,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/callsites": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+            "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/caniuse-lite": {
             "version": "1.0.30001746",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001746.tgz",
@@ -2128,6 +2873,21 @@
                 "node": ">= 0.8"
             }
         },
+        "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/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/copy-anything": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
@@ -2143,6 +2903,37 @@
                 "url": "https://github.com/sponsors/mesqueeb"
             }
         },
+        "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.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "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",
@@ -2162,6 +2953,480 @@
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
             "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-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.0",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+            "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+            "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-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/date-fns": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
@@ -2172,6 +3437,23 @@
                 "url": "https://github.com/sponsors/kossnocorp"
             }
         },
+        "node_modules/debug": {
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+            "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/deep-equal": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
@@ -2232,6 +3514,15 @@
             "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
             "license": "MIT"
         },
+        "node_modules/delaunator": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+            "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+            "license": "ISC",
+            "dependencies": {
+                "robust-predicates": "^3.0.2"
+            }
+        },
         "node_modules/delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2266,6 +3557,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/electron-to-chromium": {
             "version": "1.5.228",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.228.tgz",
@@ -2273,6 +3570,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/enhanced-resolve": {
             "version": "5.18.3",
             "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -2299,6 +3602,15 @@
                 "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/es-define-property": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2408,6 +3720,18 @@
                 "node": ">=6"
             }
         },
+        "node_modules/escape-string-regexp": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+            "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/estree-walker": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -2444,6 +3768,12 @@
                 }
             }
         },
+        "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/follow-redirects": {
             "version": "1.15.11",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -2529,6 +3859,21 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "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-intrinsic": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -2566,6 +3911,38 @@
                 "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/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/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/gopd": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -2642,6 +4019,69 @@
             "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
             "license": "MIT"
         },
+        "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/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/import-fresh": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+            "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+            "license": "MIT",
+            "dependencies": {
+                "parent-module": "^1.0.0",
+                "resolve-from": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "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/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-arguments": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
@@ -2658,6 +4098,27 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "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/is-core-module": {
+            "version": "2.16.1",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+            "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+            "license": "MIT",
+            "dependencies": {
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/is-date-object": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
@@ -2704,6 +4165,12 @@
                 "url": "https://github.com/sponsors/mesqueeb"
             }
         },
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "license": "ISC"
+        },
         "node_modules/jiti": {
             "version": "1.21.7",
             "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -2716,6 +4183,45 @@
                 "jiti": "bin/jiti.js"
             }
         },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "license": "MIT"
+        },
+        "node_modules/jsesc": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+            "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+            "license": "MIT",
+            "bin": {
+                "jsesc": "bin/jsesc"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "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/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/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-vite-plugin": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-2.0.1.tgz",
@@ -2736,6 +4242,12 @@
                 "vite": "^7.0.0"
             }
         },
+        "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/lightningcss": {
             "version": "1.30.2",
             "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -2997,12 +4509,24 @@
                 "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/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "license": "MIT"
         },
+        "node_modules/lodash-es": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+            "license": "MIT"
+        },
         "node_modules/lucide-vue-next": {
             "version": "0.552.0",
             "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.552.0.tgz",
@@ -3021,6 +4545,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/material-design-icons-iconfont": {
             "version": "6.7.0",
             "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz",
@@ -3069,12 +4626,33 @@
                 "mini-svg-data-uri": "cli.js"
             }
         },
+        "node_modules/minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/mitt": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
             "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
             "license": "MIT"
         },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "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/node-releases": {
             "version": "2.0.21",
             "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
@@ -3142,6 +4720,70 @@
             "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
             "license": "BSD-3-Clause"
         },
+        "node_modules/parent-module": {
+            "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==",
+            "license": "MIT",
+            "dependencies": {
+                "callsites": "^3.0.0"
+            },
+            "engines": {
+                "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/parse-unit": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz",
+            "integrity": "sha512-hrqldJHokR3Qj88EIlV/kAyAi/G5R2+R56TBANxNMy0uPlYcttx0jnMW6Yx5KsKPSbC3KddM/7qQm3+0wEXKxg==",
+            "license": "MIT"
+        },
+        "node_modules/path-parse": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+            "license": "MIT"
+        },
+        "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/perfect-debounce": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -3234,6 +4876,12 @@
                 "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
             }
         },
+        "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/preline": {
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/preline/-/preline-2.7.0.tgz",
@@ -3243,6 +4891,12 @@
                 "@popperjs/core": "^2.11.2"
             }
         },
+        "node_modules/protocol-buffers-schema": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+            "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+            "license": "MIT"
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3266,6 +4920,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "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/quill": {
             "version": "1.3.7",
             "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
@@ -3387,12 +5047,56 @@
                 "url": "https://github.com/sponsors/antfu"
             }
         },
+        "node_modules/resolve": {
+            "version": "1.22.11",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+            "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+            "license": "MIT",
+            "dependencies": {
+                "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/resolve-from": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "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/rfdc": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
             "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
             "license": "MIT"
         },
+        "node_modules/robust-predicates": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+            "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+            "license": "Unlicense"
+        },
         "node_modules/rollup": {
             "version": "4.52.3",
             "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.3.tgz",
@@ -3435,6 +5139,18 @@
                 "fsevents": "~2.3.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/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/set-function-length": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -3549,6 +5265,15 @@
             "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
             "license": "MIT"
         },
+        "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/source-map-js": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3567,6 +5292,27 @@
                 "node": ">=0.10.0"
             }
         },
+        "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/superjson": {
             "version": "2.2.5",
             "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.5.tgz",
@@ -3579,6 +5325,18 @@
                 "node": ">=16"
             }
         },
+        "node_modules/supports-preserve-symlinks-flag": {
+            "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==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/tailwind-merge": {
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -3631,6 +5389,21 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
+        "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.15",
             "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3648,6 +5421,41 @@
                 "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-px": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/to-px/-/to-px-1.1.0.tgz",
+            "integrity": "sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==",
+            "license": "MIT",
+            "dependencies": {
+                "parse-unit": "^1.0.1"
+            }
+        },
+        "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/topojson-client/node_modules/commander": {
+            "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==",
+            "license": "MIT"
+        },
         "node_modules/tslib": {
             "version": "2.8.1",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -3859,6 +5667,17 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "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.22",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
@@ -3958,6 +5777,33 @@
                 "vue": "^3.0.1"
             }
         },
+        "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/yaml": {
+            "version": "2.8.1",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+            "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+            "dev": true,
+            "license": "ISC",
+            "optional": true,
+            "peer": true,
+            "bin": {
+                "yaml": "bin.mjs"
+            },
+            "engines": {
+                "node": ">= 14.6"
+            }
+        },
         "node_modules/zod": {
             "version": "3.25.76",
             "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
diff --git a/package.json b/package.json
index 888713a..c9c3fe8 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,8 @@
         "@heroicons/vue": "^2.1.5",
         "@internationalized/date": "^3.9.0",
         "@tanstack/vue-table": "^8.21.3",
+        "@unovis/ts": "^1.6.2",
+        "@unovis/vue": "^1.6.2",
         "@vee-validate/zod": "^4.15.1",
         "@vuepic/vue-datepicker": "^11.0.2",
         "@vueuse/core": "^14.0.0",
diff --git a/resources/css/app.css b/resources/css/app.css
index d7c4ede..8de3d29 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./themes.css";
 
 @plugin "tailwindcss-animate";
 
@@ -187,74 +188,72 @@ @theme inline {
 }
 
 :root {
-    --radius: 0.625rem;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.129 0.042 264.695);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.129 0.042 264.695);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.129 0.042 264.695);
-    --primary: oklch(0.208 0.042 265.755);
-    --primary-foreground: oklch(0.984 0.003 247.858);
-    --secondary: oklch(0.968 0.007 247.896);
-    --secondary-foreground: oklch(0.208 0.042 265.755);
-    --muted: oklch(0.968 0.007 247.896);
-    --muted-foreground: oklch(0.554 0.046 257.417);
-    --accent: oklch(0.968 0.007 247.896);
-    --accent-foreground: oklch(0.208 0.042 265.755);
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.577 0.245 27.325);
-    --border: oklch(0.929 0.013 255.508);
-    --input: oklch(0.929 0.013 255.508);
-    --ring: oklch(0.704 0.04 256.788);
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
-    --sidebar: oklch(0.984 0.003 247.858);
-    --sidebar-foreground: oklch(0.129 0.042 264.695);
-    --sidebar-primary: oklch(0.208 0.042 265.755);
-    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-    --sidebar-accent: oklch(0.968 0.007 247.896);
-    --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-    --sidebar-border: oklch(0.929 0.013 255.508);
-    --sidebar-ring: oklch(0.704 0.04 256.788);
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.648 0.2 131.684);
+  --primary-foreground: oklch(0.986 0.031 120.757);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.841 0.238 128.85);
+  --chart-1: oklch(0.871 0.15 154.449);
+  --chart-2: oklch(0.723 0.219 149.579);
+  --chart-3: oklch(0.627 0.194 149.214);
+  --chart-4: oklch(0.527 0.154 150.069);
+  --chart-5: oklch(0.448 0.119 151.328);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.648 0.2 131.684);
+  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.841 0.238 128.85);
 }
 
 .dark {
-    --background: oklch(0.129 0.042 264.695);
-    --foreground: oklch(0.984 0.003 247.858);
-    --card: oklch(0.129 0.042 264.695);
-    --card-foreground: oklch(0.984 0.003 247.858);
-    --popover: oklch(0.129 0.042 264.695);
-    --popover-foreground: oklch(0.984 0.003 247.858);
-    --primary: oklch(0.984 0.003 247.858);
-    --primary-foreground: oklch(0.208 0.042 265.755);
-    --secondary: oklch(0.279 0.041 260.031);
-    --secondary-foreground: oklch(0.984 0.003 247.858);
-    --muted: oklch(0.279 0.041 260.031);
-    --muted-foreground: oklch(0.704 0.04 256.788);
-    --accent: oklch(0.279 0.041 260.031);
-    --accent-foreground: oklch(0.984 0.003 247.858);
-    --destructive: oklch(0.396 0.141 25.723);
-    --destructive-foreground: oklch(0.637 0.237 25.331);
-    --border: oklch(0.279 0.041 260.031);
-    --input: oklch(0.279 0.041 260.031);
-    --ring: oklch(0.446 0.043 257.281);
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.208 0.042 265.755);
-    --sidebar-foreground: oklch(0.984 0.003 247.858);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-    --sidebar-accent: oklch(0.279 0.041 260.031);
-    --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-    --sidebar-border: oklch(0.279 0.041 260.031);
-    --sidebar-ring: oklch(0.446 0.043 257.281);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.648 0.2 131.684);
+  --primary-foreground: oklch(0.986 0.031 120.757);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.405 0.101 131.063);
+  --chart-1: oklch(0.871 0.15 154.449);
+  --chart-2: oklch(0.723 0.219 149.579);
+  --chart-3: oklch(0.627 0.194 149.214);
+  --chart-4: oklch(0.527 0.154 150.069);
+  --chart-5: oklch(0.448 0.119 151.328);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.768 0.233 130.85);
+  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.405 0.101 131.063);
 }
 
 @layer base {
@@ -264,4 +263,9 @@ @layer base {
   body {
     @apply bg-background text-foreground;
     }
+
+    button:not([disabled]),
+    [role="button"]:not([disabled]) {
+      cursor: pointer;
+    }
 }
diff --git a/resources/css/themes.css b/resources/css/themes.css
new file mode 100644
index 0000000..acec8d9
--- /dev/null
+++ b/resources/css/themes.css
@@ -0,0 +1,396 @@
+.theme-default .theme-container,
+.theme-default [data-reka-popper-content-wrapper] {
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+}
+
+.theme-mono .theme-container,
+.theme-mono [data-reka-popper-content-wrapper] {
+  --font-sans: var(--font-mono);
+  --primary: var(--color-stone-600);
+  --primary-foreground: var(--color-stone-50);
+  --chart-1: var(--color-stone-300);
+  --chart-2: var(--color-stone-500);
+  --chart-3: var(--color-stone-600);
+  --chart-4: var(--color-stone-700);
+  --chart-5: var(--color-stone-800);
+  --sidebar-primary: var(--color-stone-600);
+  --sidebar-primary-foreground: var(--color-stone-50);
+  --sidebar-ring: var(--color-stone-400);
+
+  @variant dark {
+    --primary: var(--color-stone-500);
+    --primary-foreground: var(--color-stone-50);
+    --sidebar-primary: var(--color-stone-500);
+    --sidebar-primary-foreground: var(--color-stone-50);
+    --sidebar-ring: var(--color-stone-900);
+  }
+
+  @media (min-width: 1024px) {
+    --font-sans: var(--font-mono);
+    --radius: 0.45em;
+    --text-lg: 1rem;
+    --text-xl: 1.1rem;
+    --text-2xl: 1.2rem;
+    --text-3xl: 1.3rem;
+    --text-4xl: 1.4rem;
+    --text-5xl: 1.5rem;
+    --text-6xl: 1.6rem;
+    --text-7xl: 1.7rem;
+    --text-8xl: 1.8rem;
+    --text-base: 0.85rem;
+    --text-sm: 0.8rem;
+    --spacing: 0.222222rem;
+  }
+
+  .rounded-xs,
+  .rounded-sm,
+  .rounded-md,
+  .rounded-lg,
+  .rounded-xl {
+    border-radius: 0;
+  }
+
+  .shadow-xs,
+  .shadow-sm,
+  .shadow-md,
+  .shadow-lg,
+  .shadow-xl {
+    box-shadow: none;
+  }
+
+  [data-slot="toggle-group"],
+  [data-slot="toggle-group-item"],
+  [data-slot="checkbox"],
+  [data-slot="radio"],
+  [data-slot="switch"],
+  [data-slot="switch-thumb"] {
+    @apply !rounded-none !shadow-none;
+  }
+}
+
+.theme-scaled .theme-container,
+.theme-scaled [data-reka-popper-content-wrapper] {
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+
+  @media (min-width: 1024px) {
+    --radius: 0.45em;
+    --text-lg: 1rem;
+    --text-xl: 1.1rem;
+    --text-2xl: 1.2rem;
+    --text-3xl: 1.3rem;
+    --text-4xl: 1.4rem;
+    --text-5xl: 1.5rem;
+    --text-6xl: 1.6rem;
+    --text-7xl: 1.7rem;
+    --text-8xl: 1.8rem;
+    --text-base: 0.85rem;
+    --text-sm: 0.8rem;
+    --spacing: 0.2rem;
+  }
+
+  [data-slot="select-trigger"],
+  [data-slot="toggle-group-item"] {
+    --spacing: 0.2rem;
+  }
+
+  [data-slot="card"] {
+    border-radius: var(--radius);
+    padding-block: calc(var(--spacing) * 4);
+    gap: calc(var(--spacing) * 2);
+  }
+
+  [data-slot="card"].pb-0 {
+    padding-bottom: 0;
+  }
+}
+
+.theme-rounded-none .theme-container,
+.theme-rounded-none [data-reka-popper-content-wrapper] {
+  --radius: 0;
+}
+
+.theme-rounded-small .theme-container,
+.theme-rounded-small [data-reka-popper-content-wrapper] {
+  --radius: 0.4rem;
+}
+
+.theme-rounded-medium .theme-container,
+.theme-rounded-medium [data-reka-popper-content-wrapper] {
+  --radius: 0.65rem;
+}
+
+.theme-rounded-large .theme-container,
+.theme-rounded-large [data-reka-popper-content-wrapper] {
+  --radius: 1rem;
+}
+
+.theme-rounded-full .theme-container,
+.theme-rounded-full [data-reka-popper-content-wrapper] {
+  --radius: 1.2rem;
+}
+
+.theme-inter .theme-container,
+.theme-inter [data-reka-popper-content-wrapper] {
+  --font-sans: var(--font-inter);
+}
+
+.theme-noto-sans .theme-container,
+.theme-noto-sans [data-reka-popper-content-wrapper] {
+  --font-sans: var(--font-noto-sans);
+}
+
+.theme-nunito-sans .theme-container,
+.theme-nunito-sans [data-reka-popper-content-wrapper] {
+  --font-sans: var(--font-nunito-sans);
+}
+
+.theme-figtree .theme-container,
+.theme-figtree [data-reka-popper-content-wrapper] {
+  --font-sans: var(--font-figtree);
+}
+
+.theme-blue .theme-container,
+.theme-blue [data-reka-popper-content-wrapper] {
+  --primary: var(--color-blue-700);
+  --primary-foreground: var(--color-blue-50);
+  /* --ring: var(--color-blue-100); */
+  --sidebar-primary: var(--color-blue-600);
+  --sidebar-primary-foreground: var(--color-blue-50);
+  /* --sidebar-ring: var(--color-blue-400); */
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+
+  @variant dark {
+    --primary: var(--color-blue-700);
+    --primary-foreground: var(--color-blue-50);
+    /* --ring: var(--color-blue-900); */
+    --sidebar-primary: var(--color-blue-500);
+    --sidebar-primary-foreground: var(--color-blue-50);
+    /* --sidebar-ring: var(--color-blue-900); */
+  }
+}
+
+.theme-green .theme-container,
+.theme-green [data-reka-popper-content-wrapper] {
+  --primary: var(--color-lime-600);
+  --primary-foreground: var(--color-lime-50);
+  --ring: var(--color-lime-400);
+  --chart-1: var(--color-green-300);
+  --chart-2: var(--color-green-500);
+  --chart-3: var(--color-green-600);
+  --chart-4: var(--color-green-700);
+  --chart-5: var(--color-green-800);
+  --sidebar-primary: var(--color-lime-600);
+  --sidebar-primary-foreground: var(--color-lime-50);
+  --sidebar-ring: var(--color-lime-400);
+
+  @variant dark {
+    --primary: var(--color-lime-600);
+    --primary-foreground: var(--color-lime-50);
+    --ring: var(--color-lime-900);
+    --sidebar-primary: var(--color-lime-500);
+    --sidebar-primary-foreground: var(--color-lime-50);
+    --sidebar-ring: var(--color-lime-900);
+  }
+}
+
+.theme-amber .theme-container,
+.theme-amber [data-reka-popper-content-wrapper] {
+  --primary: var(--color-amber-600);
+  --primary-foreground: var(--color-amber-50);
+  --ring: var(--color-amber-400);
+  --chart-1: var(--color-amber-300);
+  --chart-2: var(--color-amber-500);
+  --chart-3: var(--color-amber-600);
+  --chart-4: var(--color-amber-700);
+  --chart-5: var(--color-amber-800);
+  --sidebar-primary: var(--color-amber-600);
+  --sidebar-primary-foreground: var(--color-amber-50);
+  --sidebar-ring: var(--color-amber-400);
+
+  @variant dark {
+    --primary: var(--color-amber-500);
+    --primary-foreground: var(--color-amber-50);
+    --ring: var(--color-amber-900);
+    --sidebar-primary: var(--color-amber-500);
+    --sidebar-primary-foreground: var(--color-amber-50);
+    --sidebar-ring: var(--color-amber-900);
+  }
+}
+
+.theme-rose .theme-container,
+.theme-rose [data-reka-popper-content-wrapper] {
+  --primary: var(--color-rose-600);
+  --primary-foreground: var(--color-rose-50);
+  --ring: var(--color-rose-400);
+  --chart-1: var(--color-rose-300);
+  --chart-2: var(--color-rose-500);
+  --chart-3: var(--color-rose-600);
+  --chart-4: var(--color-rose-700);
+  --chart-5: var(--color-rose-800);
+  --sidebar-primary: var(--color-rose-600);
+  --sidebar-primary-foreground: var(--color-rose-50);
+  --sidebar-ring: var(--color-rose-400);
+
+  @variant dark {
+    --primary: var(--color-rose-500);
+    --primary-foreground: var(--color-rose-50);
+    --ring: var(--color-rose-900);
+    --sidebar-primary: var(--color-rose-500);
+    --sidebar-primary-foreground: var(--color-rose-50);
+    --sidebar-ring: var(--color-rose-900);
+  }
+}
+
+.theme-purple .theme-container,
+.theme-purple [data-reka-popper-content-wrapper] {
+  --primary: var(--color-purple-600);
+  --primary-foreground: var(--color-purple-50);
+  --ring: var(--color-purple-400);
+  --chart-1: var(--color-purple-300);
+  --chart-2: var(--color-purple-500);
+  --chart-3: var(--color-purple-600);
+  --chart-4: var(--color-purple-700);
+  --chart-5: var(--color-purple-800);
+  --sidebar-primary: var(--color-purple-600);
+  --sidebar-primary-foreground: var(--color-purple-50);
+  --sidebar-ring: var(--color-purple-400);
+
+  @variant dark {
+    --primary: var(--color-purple-500);
+    --primary-foreground: var(--color-purple-50);
+    --ring: var(--color-purple-900);
+    --sidebar-primary: var(--color-purple-500);
+    --sidebar-primary-foreground: var(--color-purple-50);
+    --sidebar-ring: var(--color-purple-900);
+  }
+}
+
+.theme-orange .theme-container,
+.theme-orange [data-reka-popper-content-wrapper] {
+  --primary: var(--color-orange-600);
+  --primary-foreground: var(--color-orange-50);
+  --ring: var(--color-orange-400);
+  --chart-1: var(--color-orange-300);
+  --chart-2: var(--color-orange-500);
+  --chart-3: var(--color-orange-600);
+  --chart-4: var(--color-orange-700);
+  --chart-5: var(--color-orange-800);
+  --sidebar-primary: var(--color-orange-600);
+  --sidebar-primary-foreground: var(--color-orange-50);
+  --sidebar-ring: var(--color-orange-400);
+
+  @variant dark {
+    --primary: var(--color-orange-500);
+    --primary-foreground: var(--color-orange-50);
+    --ring: var(--color-orange-900);
+    --sidebar-primary: var(--color-orange-500);
+    --sidebar-primary-foreground: var(--color-orange-50);
+    --sidebar-ring: var(--color-orange-900);
+  }
+}
+
+.theme-teal .theme-container,
+.theme-teal [data-reka-popper-content-wrapper] {
+  --primary: var(--color-teal-600);
+  --primary-foreground: var(--color-teal-50);
+  --chart-1: var(--color-teal-300);
+  --chart-2: var(--color-teal-500);
+  --chart-3: var(--color-teal-600);
+  --chart-4: var(--color-teal-700);
+  --chart-5: var(--color-teal-800);
+  --sidebar-primary: var(--color-teal-600);
+  --sidebar-primary-foreground: var(--color-teal-50);
+  --sidebar-ring: var(--color-teal-400);
+
+  @variant dark {
+    --primary: var(--color-teal-500);
+    --primary-foreground: var(--color-teal-50);
+    --sidebar-primary: var(--color-teal-500);
+    --sidebar-primary-foreground: var(--color-teal-50);
+    --sidebar-ring: var(--color-teal-900);
+  }
+}
+
+.theme-red .theme-container,
+.theme-red [data-reka-popper-content-wrapper] {
+  --primary: var(--color-red-600);
+  --primary-foreground: var(--color-red-50);
+  --ring: var(--color-red-400);
+  --chart-1: var(--color-red-300);
+  --chart-2: var(--color-red-500);
+  --chart-3: var(--color-red-600);
+  --chart-4: var(--color-red-700);
+  --chart-5: var(--color-red-800);
+  --sidebar-primary: var(--color-red-600);
+  --sidebar-primary-foreground: var(--color-red-50);
+  --sidebar-ring: var(--color-red-400);
+
+  @variant dark {
+    --primary: var(--color-red-500);
+    --primary-foreground: var(--color-red-50);
+    --ring: var(--color-red-900);
+    --sidebar-primary: var(--color-red-500);
+    --sidebar-primary-foreground: var(--color-red-50);
+    --sidebar-ring: var(--color-red-900);
+  }
+}
+
+.theme-yellow .theme-container,
+.theme-yellow [data-reka-popper-content-wrapper] {
+  --primary: var(--color-yellow-400);
+  --primary-foreground: var(--color-yellow-900);
+  --ring: var(--color-yellow-400);
+  --chart-1: var(--color-yellow-300);
+  --chart-2: var(--color-yellow-500);
+  --chart-3: var(--color-yellow-600);
+  --chart-4: var(--color-yellow-700);
+  --chart-5: var(--color-yellow-800);
+  --sidebar-primary: var(--color-yellow-600);
+  --sidebar-primary-foreground: var(--color-yellow-50);
+  --sidebar-ring: var(--color-yellow-400);
+
+  @variant dark {
+    --primary: var(--color-yellow-500);
+    --primary-foreground: var(--color-yellow-900);
+    --ring: var(--color-yellow-900);
+    --sidebar-primary: var(--color-yellow-500);
+    --sidebar-primary-foreground: var(--color-yellow-50);
+    --sidebar-ring: var(--color-yellow-900);
+  }
+}
+
+.theme-violet .theme-container,
+.theme-violet [data-reka-popper-content-wrapper] {
+  --primary: var(--color-violet-600);
+  --primary-foreground: var(--color-violet-50);
+  --ring: var(--color-violet-400);
+  --chart-1: var(--color-violet-300);
+  --chart-2: var(--color-violet-500);
+  --chart-3: var(--color-violet-600);
+  --chart-4: var(--color-violet-700);
+  --chart-5: var(--color-violet-800);
+  --sidebar-primary: var(--color-violet-600);
+  --sidebar-primary-foreground: var(--color-violet-50);
+  --sidebar-ring: var(--color-violet-400);
+
+  @variant dark {
+    --primary: var(--color-violet-500);
+    --primary-foreground: var(--color-violet-50);
+    --ring: var(--color-violet-900);
+    --sidebar-primary: var(--color-violet-500);
+    --sidebar-primary-foreground: var(--color-violet-50);
+    --sidebar-ring: var(--color-violet-900);
+  }
+}
diff --git a/resources/js/Components/DataTable/DataTableNew.vue b/resources/js/Components/DataTable/DataTableNew.vue
index 15eb1c9..184c463 100644
--- a/resources/js/Components/DataTable/DataTableNew.vue
+++ b/resources/js/Components/DataTable/DataTableNew.vue
@@ -690,6 +690,11 @@ function exportToXLSX(data) {
           :from="from"
           :to="to"
           :total="total"
+          :current-page="meta.current_page"
+          :last-page="meta.last_page"
+          :per-page="meta.per_page"
+          :page-param="pageParamName"
+          :per-page-param="'per_page'"<!-- legacy component may not have custom per-page name prop -->
         />
       </template>
 
diff --git a/resources/js/Components/DataTable/DataTableNew2.vue b/resources/js/Components/DataTable/DataTableNew2.vue
index ea6b063..7ace7db 100644
--- a/resources/js/Components/DataTable/DataTableNew2.vue
+++ b/resources/js/Components/DataTable/DataTableNew2.vue
@@ -275,10 +275,10 @@ const pagination = computed(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const perPageParam = props.perPageParamName || "per_page";
     const urlPerPage = urlParams.get(perPageParam);
-    const pageSize = urlPerPage 
-      ? Number(urlPerPage) 
-      : (props.meta?.per_page ?? props.pageSize);
-    
+    const pageSize = urlPerPage
+      ? Number(urlPerPage)
+      : props.meta?.per_page ?? props.pageSize;
+
     return {
       pageIndex: (props.meta?.current_page ?? 1) - 1,
       pageSize: pageSize,
@@ -470,7 +470,7 @@ function keyOf(row) {
       :per-page="pagination.pageSize"
       :page-size-options="pageSizeOptions"
       @update:per-page="(value) => table.setPageSize(value)"
-      class="px-4 py-2 border-t"
+      class="p-2 border-t"
     >
       <template #filters="slotProps">
         <slot name="toolbar-filters" v-bind="slotProps" />
@@ -492,13 +492,14 @@ function keyOf(row) {
               v-for="header in headerGroup.headers"
               :key="header.id"
               :class="[
-                'py-4',
+                'p-3',
                 header.column.columnDef.meta?.class,
                 header.column.columnDef.meta?.align === 'right'
                   ? 'text-right'
                   : header.column.columnDef.meta?.align === 'center'
                   ? 'text-center'
                   : 'text-left',
+                'bg-muted/50',
               ]"
             >
               <FlexRender
@@ -557,6 +558,7 @@ function keyOf(row) {
                     : cell.column.columnDef.meta?.align === 'center'
                     ? 'text-center'
                     : 'text-left',
+                  'p-3',
                 ]"
               >
                 <!-- Use slot if provided -->
@@ -581,7 +583,7 @@ function keyOf(row) {
     </div>
 
     <!-- Pagination -->
-    <div v-if="showPagination">
+    <div v-if="showPagination" class="border-t border-gray-200 p-4">
       <!-- Server-side pagination -->
       <template v-if="isServerSide && meta?.links">
         <Pagination
@@ -589,6 +591,11 @@ function keyOf(row) {
           :from="meta.from"
           :to="meta.to"
           :total="meta.total"
+          :current-page="meta.current_page"
+          :last-page="meta.last_page"
+          :per-page="meta.per_page"
+          :page-param="pageParamName"
+          :per-page-param="perPageParamName"
         />
       </template>
 
diff --git a/resources/js/Components/DocumentsTable/DocumentsTable.vue b/resources/js/Components/DocumentsTable/DocumentsTable.vue
index 54dfc86..97c43c4 100644
--- a/resources/js/Components/DocumentsTable/DocumentsTable.vue
+++ b/resources/js/Components/DocumentsTable/DocumentsTable.vue
@@ -45,6 +45,7 @@ const props = defineProps({
 
 // Define columns for DataTable
 const columns = [
+  { key: "key", label: "#", sortable: false, align: "center" },
   { key: "name", label: "Naziv", sortable: false },
   { key: "type", label: "Vrsta", sortable: false },
   { key: "size", label: "Velikost", align: "right", sortable: false },
@@ -292,23 +293,27 @@ function closeActions() {
       <template #toolbar-actions>
         <slot name="add" />
       </template>
+      <!-- Key column -->
+      <template #cell-key="{ row }">
+        <Badge
+          v-if="row.is_public"
+          variant="secondary"
+          class="bg-green-100 text-green-700 hover:bg-green-200 shrink-0"
+          >Public</Badge
+        >
+      </template>
       <!-- Name column -->
       <template #cell-name="{ row }">
         <div>
           <div class="flex items-center gap-2">
             <button
               type="button"
-              class="text-indigo-600 hover:underline"
+              class="text-indigo-600 hover:underline max-w-xs truncate"
+              :title="row.name"
               @click.stop="$emit('view', row)"
             >
-              {{ row.name }}
+              {{ row.name.length > 15 ? row.name.substring(0, 15) + "..." : row.name }}
             </button>
-            <Badge
-              v-if="row.is_public"
-              variant="secondary"
-              class="bg-green-100 text-green-700 hover:bg-green-200"
-              >Public</Badge
-            >
           </div>
           <!-- Expanded description -->
           <div
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
index 5a2dbb4..37c4711 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -20,7 +20,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/Components/ui/pagination";
-import { Separator } from "@/components/ui/separator";
+import { Separator } from "@/Components/ui/separator";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-vue-next";
 import { toInteger } from "lodash";
 
@@ -178,7 +178,7 @@ function handlePerPageChange(value) {
 
 <template>
   <nav
-    class="flex flex-wrap items-center justify-between gap-3 px-2 text-sm text-gray-700 sm:px-5"
+    class="flex flex-wrap items-center justify-between gap-3 px-2 text-sm text-gray-700 sm:px-1"
     aria-label="Pagination"
   >
     <!-- Mobile: Simple prev/next -->
diff --git a/resources/js/Components/PersonInfo/PersonInfoGrid.vue b/resources/js/Components/PersonInfo/PersonInfoGrid.vue
index 3b13b62..d9b17f3 100644
--- a/resources/js/Components/PersonInfo/PersonInfoGrid.vue
+++ b/resources/js/Components/PersonInfo/PersonInfoGrid.vue
@@ -4,7 +4,13 @@ import { router } from "@inertiajs/vue3";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
 import { Button } from "@/Components/ui/button";
 import { PlusIcon } from "@/Utilities/Icons";
-import { faUser, faMapMarkerAlt, faPhone, faEnvelope, faUniversity } from "@fortawesome/free-solid-svg-icons";
+import {
+  faUser,
+  faMapMarkerAlt,
+  faPhone,
+  faEnvelope,
+  faUniversity,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import PersonUpdateForm from "./PersonUpdateForm.vue";
 import AddressCreateForm from "./AddressCreateForm.vue";
@@ -24,6 +30,7 @@ import PersonInfoPhonesTab from "./PersonInfoPhonesTab.vue";
 import PersonInfoEmailsTab from "./PersonInfoEmailsTab.vue";
 import PersonInfoTrrTab from "./PersonInfoTrrTab.vue";
 import PersonInfoSmsDialog from "./PersonInfoSmsDialog.vue";
+import { Badge } from "@/Components/ui/badge";
 
 const props = defineProps({
   person: Object,
@@ -102,7 +109,7 @@ const closeDrawerAddAddress = () => {
   editAddress.value = false;
   editAddressId.value = 0;
   if (!wasEdit) {
-    switchToTab('addresses');
+    switchToTab("addresses");
   }
 };
 
@@ -122,7 +129,7 @@ const closeDrawerAddPhone = () => {
   editPhone.value = false;
   editPhoneId.value = 0;
   if (!wasEdit) {
-    switchToTab('phones');
+    switchToTab("phones");
   }
 };
 
@@ -139,7 +146,7 @@ const closeDrawerAddEmail = () => {
   editEmail.value = false;
   editEmailId.value = 0;
   if (!wasEdit) {
-    switchToTab('emails');
+    switchToTab("emails");
   }
 };
 
@@ -156,7 +163,7 @@ const closeDrawerAddTrr = () => {
   editTrr.value = false;
   editTrrId.value = 0;
   if (!wasEdit) {
-    switchToTab('trr');
+    switchToTab("trr");
   }
 };
 
@@ -181,35 +188,29 @@ const closeConfirm = () => {
 
 const onConfirmDelete = async () => {
   const { type, id } = confirm.value;
-  
+
   if (type === "email") {
-    router.delete(
-      route("person.email.delete", { person: props.person, email_id: id }),
-      {
-        preserveScroll: true,
-        onSuccess: () => {
-          closeConfirm();
-        },
-        onError: (errors) => {
-          console.error("Delete failed", errors);
-          closeConfirm();
-        },
-      }
-    );
+    router.delete(route("person.email.delete", { person: props.person, email_id: id }), {
+      preserveScroll: true,
+      onSuccess: () => {
+        closeConfirm();
+      },
+      onError: (errors) => {
+        console.error("Delete failed", errors);
+        closeConfirm();
+      },
+    });
   } else if (type === "trr") {
-    router.delete(
-      route("person.trr.delete", { person: props.person, trr_id: id }),
-      {
-        preserveScroll: true,
-        onSuccess: () => {
-          closeConfirm();
-        },
-        onError: (errors) => {
-          console.error("Delete failed", errors);
-          closeConfirm();
-        },
-      }
-    );
+    router.delete(route("person.trr.delete", { person: props.person, trr_id: id }), {
+      preserveScroll: true,
+      onSuccess: () => {
+        closeConfirm();
+      },
+      onError: (errors) => {
+        console.error("Delete failed", errors);
+        closeConfirm();
+      },
+    });
   } else if (type === "address") {
     router.delete(
       route("person.address.delete", { person: props.person, address_id: id }),
@@ -223,21 +224,18 @@ const onConfirmDelete = async () => {
           closeConfirm();
         },
       }
-      );
-  } else if (type === "phone") {
-    router.delete(
-      route("person.phone.delete", { person: props.person, phone_id: id }),
-      {
-        preserveScroll: true,
-        onSuccess: () => {
-          closeConfirm();
-        },
-        onError: (errors) => {
-          console.error("Delete failed", errors);
-          closeConfirm();
-        },
-      }
     );
+  } else if (type === "phone") {
+    router.delete(route("person.phone.delete", { person: props.person, phone_id: id }), {
+      preserveScroll: true,
+      onSuccess: () => {
+        closeConfirm();
+      },
+      onError: (errors) => {
+        console.error("Delete failed", errors);
+        closeConfirm();
+      },
+    });
   }
 };
 
@@ -278,20 +276,22 @@ const addressesCount = computed(() => (props.person?.addresses || []).length);
 const phonesCount = computed(() => (props.person?.phones || []).length);
 const emailsCount = computed(() => (props.person?.emails || []).length);
 const trrsCount = computed(() => {
-  const list = props.person?.trrs || 
-               props.person?.bank_accounts || 
-               props.person?.accounts || 
-               props.person?.bankAccounts || [];
+  const list =
+    props.person?.trrs ||
+    props.person?.bank_accounts ||
+    props.person?.accounts ||
+    props.person?.bankAccounts ||
+    [];
   return list.length;
 });
 
 // Format badge count (show 999+ if >= 999)
 const formatBadgeCount = (count) => {
-  return count >= 999 ? '999+' : String(count);
+  return count >= 999 ? "999+" : String(count);
 };
 
 // Tab switching
-const activeTab = ref('person');
+const activeTab = ref("person");
 const switchToTab = (tab) => {
   activeTab.value = tab;
 };
@@ -300,66 +300,85 @@ const switchToTab = (tab) => {
 <template>
   <Tabs v-model="activeTab" class="mt-2">
     <TabsList class="flex w-full bg-white gap-2 p-1">
-      <TabsTrigger value="person" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2">
+      <TabsTrigger
+        value="person"
+        class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2"
+      >
         <div class="flex items-center gap-2">
           <FontAwesomeIcon :icon="faUser" class="h-4 w-4" />
           <span>Oseba</span>
         </div>
       </TabsTrigger>
-      <TabsTrigger value="addresses" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+      <TabsTrigger
+        value="addresses"
+        class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3"
+      >
         <div class="flex items-center justify-between gap-2 w-full">
           <div class="flex items-center gap-2">
             <FontAwesomeIcon :icon="faMapMarkerAlt" class="h-4 w-4" />
             <span>Naslovi</span>
           </div>
-          <span
+          <Badge
+            variant="secondary"
+            class="h-5 min-w-5 flex items-center justify-center rounded-full px-1 font-mono tabular-nums text-sm bg-primary-50 text-primary-700"
             v-if="addressesCount > 0"
-            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
           >
             {{ formatBadgeCount(addressesCount) }}
-          </span>
+          </Badge>
         </div>
       </TabsTrigger>
-      <TabsTrigger value="phones" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+      <TabsTrigger
+        value="phones"
+        class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3"
+      >
         <div class="flex items-center justify-between gap-2 w-full">
           <div class="flex items-center gap-2">
             <FontAwesomeIcon :icon="faPhone" class="h-4 w-4" />
             <span>Telefonske</span>
           </div>
-          <span
+          <Badge
+            variant="secondary"
+            class="h-5 min-w-5 flex items-center justify-center rounded-full px-1 font-mono tabular-nums text-sm bg-primary-50 text-primary-700"
             v-if="phonesCount > 0"
-            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
           >
             {{ formatBadgeCount(phonesCount) }}
-          </span>
+          </Badge>
         </div>
       </TabsTrigger>
-      <TabsTrigger value="emails" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+      <TabsTrigger
+        value="emails"
+        class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3"
+      >
         <div class="flex items-center justify-between gap-2 w-full">
           <div class="flex items-center gap-2">
             <FontAwesomeIcon :icon="faEnvelope" class="h-4 w-4" />
             <span>Email</span>
           </div>
-          <span
+          <Badge
+            variant="secondary"
+            class="h-5 min-w-5 flex items-center justify-center rounded-full px-1 font-mono tabular-nums text-sm bg-primary-50 text-primary-700"
             v-if="emailsCount > 0"
-            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
           >
             {{ formatBadgeCount(emailsCount) }}
-          </span>
+          </Badge>
         </div>
       </TabsTrigger>
-      <TabsTrigger value="trr" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+      <TabsTrigger
+        value="trr"
+        class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3"
+      >
         <div class="flex items-center justify-between gap-2 w-full">
           <div class="flex items-center gap-2">
             <FontAwesomeIcon :icon="faUniversity" class="h-4 w-4" />
             <span>TRR</span>
           </div>
-          <span
+          <Badge
+            variant="secondary"
+            class="h-5 min-w-5 flex items-center justify-center rounded-full px-1 font-mono tabular-nums text-sm bg-primary-50 text-primary-700"
             v-if="trrsCount > 0"
-            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
           >
             {{ formatBadgeCount(trrsCount) }}
-          </span>
+          </Badge>
         </div>
       </TabsTrigger>
     </TabsList>
diff --git a/resources/js/Components/app/ui/AppCombobox.vue b/resources/js/Components/app/ui/AppCombobox.vue
new file mode 100644
index 0000000..537063f
--- /dev/null
+++ b/resources/js/Components/app/ui/AppCombobox.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-vue-next";
+import { computed, ref } from "vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/Components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/Components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: "Select item...",
+  },
+  searchPlaceholder: {
+    type: String,
+    default: "Search...",
+  },
+  emptyText: {
+    type: String,
+    default: "No item found.",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  buttonClass: {
+    type: String,
+    default: "w-[200px]",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const open = ref(false);
+
+const selectedItem = computed(() =>
+  props.items.find((item) => item.value === props.modelValue)
+);
+
+function selectItem(selectedValue) {
+  const newValue = selectedValue === props.modelValue ? "" : selectedValue;
+  emit("update:modelValue", newValue);
+  open.value = false;
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        :disabled="disabled"
+        :class="cn('justify-between', buttonClass)"
+      >
+        {{ selectedItem?.label || placeholder }}
+        <ChevronsUpDownIcon class="opacity-50" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="p-0" :class="buttonClass">
+      <Command>
+        <CommandInput class="h-9" :placeholder="searchPlaceholder" />
+        <CommandList>
+          <CommandEmpty>{{ emptyText }}</CommandEmpty>
+          <CommandGroup>
+            <CommandItem
+              v-for="item in items"
+              :key="item.value"
+              :value="item.value"
+              @select="selectItem"
+            >
+              {{ item.label }}
+              <CheckIcon
+                :class="
+                  cn('ml-auto', modelValue === item.value ? 'opacity-100' : 'opacity-0')
+                "
+              />
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/resources/js/Components/app/ui/AppMultiSelect.vue b/resources/js/Components/app/ui/AppMultiSelect.vue
new file mode 100644
index 0000000..06b5f75
--- /dev/null
+++ b/resources/js/Components/app/ui/AppMultiSelect.vue
@@ -0,0 +1,173 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { Popover, PopoverTrigger, PopoverContent } from "@/Components/ui/popover";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "@/Components/ui/command";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { Check, ChevronsUpDown, X } from "lucide-vue-next";
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  items: { type: Array, default: () => [] }, // [{ value, label }]
+  placeholder: { type: String, default: "Izberi..." },
+  searchPlaceholder: { type: String, default: "Išči..." },
+  emptyText: { type: String, default: "Ni zadetkov." },
+  disabled: { type: Boolean, default: false },
+  max: { type: Number, default: null },
+  clearable: { type: Boolean, default: true },
+  contentClass: { type: String, default: "p-0 w-[300px]" },
+  showSelectedChips: { type: Boolean, default: true },
+  chipVariant: { type: String, default: "secondary" },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const open = ref(false);
+const query = ref("");
+const internal = ref([...props.modelValue]);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!Array.isArray(val)) return;
+    internal.value = [...val];
+  }
+);
+
+const valueSet = computed(() => new Set(internal.value.map(String)));
+
+const filteredItems = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  if (!q) return props.items;
+  return props.items.filter((i) => i.label.toLowerCase().includes(q));
+});
+
+function toggle(value) {
+  if (props.disabled) return;
+  const v = String(value);
+  const set = new Set(internal.value.map(String));
+  if (set.has(v)) {
+    set.delete(v);
+  } else {
+    if (props.max && set.size >= props.max) return;
+    set.add(v);
+  }
+  internal.value = Array.from(set);
+  emit("update:modelValue", internal.value);
+  // Clear search so full list remains visible after selection
+  query.value = "";
+}
+
+function removeChip(value) {
+  const v = String(value);
+  internal.value = internal.value.filter((x) => String(x) !== v);
+  emit("update:modelValue", internal.value);
+}
+
+function clearAll() {
+  if (!props.clearable || props.disabled) return;
+  internal.value = [];
+  emit("update:modelValue", internal.value);
+}
+
+const summaryText = computed(() => {
+  if (internal.value.length === 0) return props.placeholder;
+  if (!props.showSelectedChips) return `${internal.value.length} izbranih`;
+  const labels = internal.value.map((v) => {
+    const found = props.items.find((i) => String(i.value) === String(v));
+    return found?.label || v;
+  });
+  if (labels.length <= 3) return labels.join(', ');
+  const firstThree = labels.slice(0, 3).join(', ');
+  const remaining = labels.length - 3;
+  return `${firstThree}, … +${remaining}`; // show ellipsis and remaining count
+});
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        role="combobox"
+        :disabled="disabled"
+        class="w-full justify-between gap-2"
+      >
+        <span
+          class="truncate"
+          :class="{ 'text-muted-foreground': internal.length === 0 }"
+        >
+          {{ summaryText }}
+        </span>
+        <ChevronsUpDown class="h-4 w-4 opacity-50" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent :class="contentClass">
+      <Command>
+        <CommandInput v-model="query" :placeholder="searchPlaceholder" />
+
+        <CommandList>
+          <CommandEmpty class="px-3 py-2 text-sm text-muted-foreground">{{
+            emptyText
+          }}</CommandEmpty>
+          <CommandGroup>
+            <CommandItem
+              v-for="item in filteredItems"
+              :key="item.value"
+              :value="String(item.value)"
+              @select="() => toggle(item.value)"
+              class="flex items-center gap-2 px-2 py-1.5 rounded-sm cursor-pointer hover:bg-accent hover:text-accent-foreground"
+            >
+              <Check
+                class="h-4 w-4"
+                :class="valueSet.has(String(item.value)) ? 'opacity-100' : 'opacity-0'"
+              />
+              <span class="flex-1">{{ item.label }}</span>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+        <div class="border-t p-2 flex items-center justify-between gap-2">
+          <Button
+            v-if="clearable"
+            variant="outline"
+            size="sm"
+            :disabled="internal.length === 0 || disabled"
+            @click="clearAll"
+            >Počisti</Button
+          >
+          <Button size="sm" :disabled="disabled" @click="open = false">Zapri</Button>
+        </div>
+        <div
+          v-if="showSelectedChips && internal.length"
+          class="border-t p-2 flex flex-wrap gap-1"
+        >
+          <Badge
+            v-for="val in internal"
+            :key="val"
+            :variant="chipVariant"
+            class="flex items-center gap-1"
+          >
+            <span class="truncate max-w-[140px]">
+              {{ items.find((i) => String(i.value) === String(val))?.label || val }}
+            </span>
+            <button
+              type="button"
+              class="hover:text-foreground/80"
+              @click.stop="removeChip(val)"
+              :title="'Odstrani'"
+            >
+              <X class="h-3 w-3" />
+            </button>
+          </Badge>
+        </div>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/resources/js/Components/app/ui/AppPopover.vue b/resources/js/Components/app/ui/AppPopover.vue
new file mode 100644
index 0000000..6b424e8
--- /dev/null
+++ b/resources/js/Components/app/ui/AppPopover.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { ref } from "vue";
+import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: undefined,
+  },
+  align: {
+    type: String,
+    default: "center",
+    validator: (value) => ["start", "center", "end"].includes(value),
+  },
+  side: {
+    type: String,
+    default: "bottom",
+    validator: (value) => ["top", "right", "bottom", "left"].includes(value),
+  },
+  sideOffset: {
+    type: Number,
+    default: 4,
+  },
+  contentClass: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:open"]);
+
+const internalOpen = ref(false);
+
+const isControlled = props.open !== undefined;
+
+function handleOpenChange(value) {
+  if (isControlled) {
+    emit("update:open", value);
+  } else {
+    internalOpen.value = value;
+  }
+}
+</script>
+
+<template>
+  <Popover :open="isControlled ? open : internalOpen" @update:open="handleOpenChange">
+    <PopoverTrigger as-child :disabled="disabled">
+      <slot name="trigger" />
+    </PopoverTrigger>
+    <PopoverContent
+      :align="align"
+      :side="side"
+      :side-offset="sideOffset"
+      :class="contentClass"
+    >
+      <slot />
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/resources/js/Components/app/ui/card/AppCard.vue b/resources/js/Components/app/ui/card/AppCard.vue
new file mode 100644
index 0000000..c620b93
--- /dev/null
+++ b/resources/js/Components/app/ui/card/AppCard.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/Components/ui/card";
+import { cn } from "@/lib/utils";
+import { computed, HTMLAttributes } from "vue";
+
+interface Props {
+  title?: string;
+  description?: string;
+  loading?: boolean;
+  padding?: "default" | "none" | "tight";
+  hover?: boolean; // subtle hover style
+  clickable?: boolean; // adds cursor + focus ring
+  disabled?: boolean;
+  class?: HTMLAttributes["class"];
+  headerClass?: HTMLAttributes["class"];
+  bodyClass?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+
+// Emit click for consumers if clickable
+const emit = defineEmits<{ (e: "click", ev: MouseEvent): void }>();
+
+const wrapperClasses = computed(() => {
+  const base = "relative transition-colors";
+  const hover = props.hover ? "hover:bg-muted/50" : "";
+  const clickable =
+    props.clickable && !props.disabled
+      ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      : "";
+  const disabled = props.disabled ? "opacity-60 pointer-events-none" : "";
+  return [base, hover, clickable, disabled].filter(Boolean).join(" ");
+});
+
+const paddingClasses = computed(() => {
+  switch (props.padding) {
+    case "none":
+      return "p-0";
+    case "tight":
+      return "p-3 sm:p-4";
+    default:
+      return "p-4 sm:p-6";
+  }
+});
+</script>
+
+<template>
+  <Card
+    :class="cn(wrapperClasses, props.class)"
+    @click="props.clickable && emit('click', $event)"
+  >
+    <!-- Header Slot / Fallback -->
+    <CardHeader
+      v-if="title || description || $slots.header"
+      :class="cn('space-y-1', headerClass)"
+    >
+      <template v-if="$slots.header">
+        <slot name="header" />
+      </template>
+      <template v-else>
+        <CardTitle v-if="title">{{ title }}</CardTitle>
+        <CardDescription v-if="description">{{ description }}</CardDescription>
+      </template>
+    </CardHeader>
+
+    <!-- Loading Skeleton -->
+    <div v-if="loading" class="animate-pulse space-y-3 px-4 py-4">
+      <div class="h-4 w-1/3 rounded bg-muted" />
+      <div class="h-3 w-1/2 rounded bg-muted" />
+      <div class="h-32 rounded bg-muted" />
+    </div>
+
+    <!-- Content Slot -->
+    <CardContent v-else :class="cn(paddingClasses, bodyClass)">
+      <slot />
+    </CardContent>
+
+    <!-- Footer Slot -->
+    <CardFooter v-if="$slots.footer" class="border-t px-4 py-3 sm:px-6">
+      <slot name="footer" />
+    </CardFooter>
+  </Card>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/app/ui/charts/AppChartContainer.vue b/resources/js/Components/app/ui/charts/AppChartContainer.vue
new file mode 100644
index 0000000..9216489
--- /dev/null
+++ b/resources/js/Components/app/ui/charts/AppChartContainer.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+</script>
+
+<template>
+  <div></div>
+</template>
+<style></style>
diff --git a/resources/js/Components/app/ui/charts/AppChartDisplay.vue b/resources/js/Components/app/ui/charts/AppChartDisplay.vue
new file mode 100644
index 0000000..581aa2b
--- /dev/null
+++ b/resources/js/Components/app/ui/charts/AppChartDisplay.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import AppChartToolbar from "./AppChartToolbar.vue";
+
+const props = defineProps<{
+  name: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'group relative flex flex-col overflow-hidden rounded-xl border transition-all duration-200 ease-in-out hover:z-30',
+        props.class
+      )
+    "
+  >
+    <AppChartToolbar
+      :name
+      class="bg-card text-card-foreground relative z-20 flex justify-end border-b px-3 py-2.5"
+    >
+      <slot />
+    </AppChartToolbar>
+    <div
+      class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style></style>
diff --git a/resources/js/Components/app/ui/charts/AppChartToolbar.vue b/resources/js/Components/app/ui/charts/AppChartToolbar.vue
new file mode 100644
index 0000000..4ab8b01
--- /dev/null
+++ b/resources/js/Components/app/ui/charts/AppChartToolbar.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { Button } from "@/Components/ui/button";
+import { Separator } from "@/Components/ui/separator";
+import TooltipProvider from "@/Components/ui/tooltip/TooltipProvider.vue";
+import { cn } from "@/lib/utils";
+import {
+  AreaChartIcon,
+  BarChartBigIcon,
+  HexagonIcon,
+  LineChartIcon,
+  MousePointer2Icon,
+  PieChartIcon,
+  RadarIcon,
+} from "lucide-vue-next";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+  name: string;
+  //code: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('flex items-center gap-2', props.class)">
+    <div
+      class="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]"
+    >
+      <template v-if="name.includes('ChartLine')">
+        <LineChartIcon /> Line Chart
+      </template>
+      <template v-else-if="name.includes('ChartBar')">
+        <BarChartBigIcon /> Bar Chart
+      </template>
+      <template v-else-if="name.includes('ChartPie')">
+        <PieChartIcon /> Pie Chart
+      </template>
+      <template v-else-if="name.includes('ChartArea')">
+        <AreaChartIcon /> Area Chart
+      </template>
+      <template v-else-if="name.includes('ChartRadar')">
+        <HexagonIcon /> Radar Chart
+      </template>
+      <template v-else-if="name.includes('ChartRadial')">
+        <RadarIcon /> Radial Chart
+      </template>
+      <template v-else-if="name.includes('ChartTooltip')">
+        <MousePointer2Icon /> Tooltip
+      </template>
+    </div>
+    <div class="ml-auto flex items-center gap-2 [&>form]:flex">
+      <Separator orientation="vertical" class="mx-0 hidden h-4! md:flex" />
+    </div>
+  </div>
+</template>
+
+<style></style>
diff --git a/resources/js/Components/ui/button-group/ButtonGroupSeparator.vue b/resources/js/Components/ui/button-group/ButtonGroupSeparator.vue
index 4fdcdc4..17759be 100644
--- a/resources/js/Components/ui/button-group/ButtonGroupSeparator.vue
+++ b/resources/js/Components/ui/button-group/ButtonGroupSeparator.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
 import { cn } from "@/lib/utils";
-import { Separator } from '@/components/ui/separator';
+import { Separator } from '@/Components/ui/separator';
 
 const props = defineProps({
   orientation: { type: String, required: false, default: "vertical" },
diff --git a/resources/js/Components/ui/button/index.js b/resources/js/Components/ui/button/index.js
index 6186f89..bbb3f1f 100644
--- a/resources/js/Components/ui/button/index.js
+++ b/resources/js/Components/ui/button/index.js
@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
diff --git a/resources/js/Components/ui/card/Card.vue b/resources/js/Components/ui/card/Card.vue
index 8a4c86b..16920e4 100644
--- a/resources/js/Components/ui/card/Card.vue
+++ b/resources/js/Components/ui/card/Card.vue
@@ -8,8 +8,12 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="card"
     :class="
-      cn('rounded-xl border bg-card text-card-foreground shadow', props.class)
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
     "
   >
     <slot />
diff --git a/resources/js/Components/ui/card/CardAction.vue b/resources/js/Components/ui/card/CardAction.vue
new file mode 100644
index 0000000..4c13362
--- /dev/null
+++ b/resources/js/Components/ui/card/CardAction.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="
+      cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/card/CardContent.vue b/resources/js/Components/ui/card/CardContent.vue
index cbbb03f..f54f541 100644
--- a/resources/js/Components/ui/card/CardContent.vue
+++ b/resources/js/Components/ui/card/CardContent.vue
@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/resources/js/Components/ui/card/CardDescription.vue b/resources/js/Components/ui/card/CardDescription.vue
index 9a9356c..199875d 100644
--- a/resources/js/Components/ui/card/CardDescription.vue
+++ b/resources/js/Components/ui/card/CardDescription.vue
@@ -7,7 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
     <slot />
   </p>
 </template>
diff --git a/resources/js/Components/ui/card/CardFooter.vue b/resources/js/Components/ui/card/CardFooter.vue
index b40e7b2..a28c159 100644
--- a/resources/js/Components/ui/card/CardFooter.vue
+++ b/resources/js/Components/ui/card/CardFooter.vue
@@ -7,7 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
     <slot />
   </div>
 </template>
diff --git a/resources/js/Components/ui/card/CardHeader.vue b/resources/js/Components/ui/card/CardHeader.vue
index 828d609..cc387d1 100644
--- a/resources/js/Components/ui/card/CardHeader.vue
+++ b/resources/js/Components/ui/card/CardHeader.vue
@@ -7,7 +7,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
+  >
     <slot />
   </div>
 </template>
diff --git a/resources/js/Components/ui/card/CardTitle.vue b/resources/js/Components/ui/card/CardTitle.vue
index 04e3462..bb88bf0 100644
--- a/resources/js/Components/ui/card/CardTitle.vue
+++ b/resources/js/Components/ui/card/CardTitle.vue
@@ -7,7 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <h3 :class="cn('font-semibold leading-none tracking-tight', props.class)">
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
     <slot />
   </h3>
 </template>
diff --git a/resources/js/Components/ui/card/index.js b/resources/js/Components/ui/card/index.js
index 313887b..409685b 100644
--- a/resources/js/Components/ui/card/index.js
+++ b/resources/js/Components/ui/card/index.js
@@ -1,4 +1,5 @@
 export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
 export { default as CardContent } from "./CardContent.vue";
 export { default as CardDescription } from "./CardDescription.vue";
 export { default as CardFooter } from "./CardFooter.vue";
diff --git a/resources/js/Components/ui/chart/ChartAutoLegend.vue b/resources/js/Components/ui/chart/ChartAutoLegend.vue
new file mode 100644
index 0000000..57b7f2d
--- /dev/null
+++ b/resources/js/Components/ui/chart/ChartAutoLegend.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useChartContext } from './interface'
+
+const props = defineProps({
+  order: { type: Array, required: false }, // explicit ordering of keys
+  modelValue: { type: Array, required: false }, // deprecated alias
+  activeKeys: { type: Array, required: false }, // v-model:activeKeys target
+  class: { type: [String, Array, Object], required: false },
+})
+
+const emit = defineEmits(['update:activeKeys'])
+
+const { config } = useChartContext()
+
+// Derive ordered keys from config
+const allKeys = computed(() => {
+  const keys = Object.keys(config)
+  if (props.order && props.order.length) {
+    return props.order.filter(k => keys.includes(k))
+  }
+  return keys
+})
+
+// Internal active state (if parent not controlling)
+const internalActive = ref(allKeys.value.reduce((acc, k) => { acc[k] = true; return acc }, {}))
+
+const activeMap = computed(() => {
+  // If parent passes controlled array use that
+  if (props.activeKeys && props.activeKeys.length) {
+    return props.activeKeys.reduce((acc, k) => { acc[k] = true; return acc }, {})
+  }
+  return internalActive.value
+})
+
+const items = computed(() => allKeys.value.map(k => {
+  const series = config[k] || {}
+  const color = series.color || (series.theme && (series.theme.light || series.theme.dark)) || 'var(--foreground)'
+  return { key: k, label: series.label || k, color, active: !!activeMap.value[k] }
+}))
+
+function toggle(key) {
+  // controlled mode
+  if (props.activeKeys) {
+    const next = items.value.filter(i => i.key === key ? !i.active : i.active).map(i => i.key)
+    // If item was active we remove it, else add it
+    const wasActive = activeMap.value[key]
+    const result = wasActive
+      ? props.activeKeys.filter(k => k !== key)
+      : [...props.activeKeys, key]
+    emit('update:activeKeys', result)
+    return
+  }
+  // uncontrolled mode
+  internalActive.value[key] = !internalActive.value[key]
+  const result = Object.entries(internalActive.value).filter(([, v]) => v).map(([k]) => k)
+  emit('update:activeKeys', result)
+}
+</script>
+
+<template>
+  <div :class="['flex items-center justify-center flex-wrap gap-4 text-xs select-none', props.class]">
+    <button
+      v-for="item in items"
+      :key="item.key"
+      type="button"
+      :class="[
+        'flex items-center gap-2 transition-colors',
+        item.active ? 'opacity-100' : 'opacity-40',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm'
+      ]"
+      @click="toggle(item.key)"
+    >
+      <span class="h-2.5 w-2.5 rounded-[3px] border border-border" :style="{ background: item.color }" />
+      <span>{{ item.label }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/ui/chart/ChartContainer.vue b/resources/js/Components/ui/chart/ChartContainer.vue
new file mode 100644
index 0000000..ac9689d
--- /dev/null
+++ b/resources/js/Components/ui/chart/ChartContainer.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { computed } from 'vue';
+import { provideChartContext } from './interface';
+
+const props = defineProps({
+  config: { type: Object, required: false, default: () => ({}) },
+  class: { type: [String, Array, Object], required: false },
+  cursor: { type: Boolean, default: true },
+  id: { type: String, required: false },
+});
+
+// Provide context (even if empty) so descendants can attempt to read series config.
+const ctx = provideChartContext(props.config, props.id);
+const chartDomId = computed(() => `chart-${ctx.id}`);
+</script>
+
+<template>
+  <div
+    data-chart-container
+    :data-chart="chartDomId"
+    :class="['relative w-full flex flex-col', props.class]"
+    :style="{
+      // Default color variables; series components can override via inline style or CSS theme logic.
+      '--vis-primary-color': 'hsl(var(--primary))',
+      '--vis-secondary-color': 'hsl(var(--secondary))',
+      '--vis-crosshair-line-stroke-width': props.cursor ? '1px' : '0px',
+      '--vis-font-family': 'var(--font-sans)',
+    }"
+  >
+    <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..c7430c0
--- /dev/null
+++ b/resources/js/Components/ui/chart/ChartCrosshair.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { omit } from "@unovis/ts";
+import { VisCrosshair, VisTooltip } from "@unovis/vue";
+import { createApp } from "vue";
+import { ChartTooltip } from ".";
+
+const props = defineProps({
+  colors: { type: Array, required: false, default: () => [] },
+  index: { type: String, required: true },
+  // items now optional when using external template factory
+  items: { type: Array, required: false, default: () => [] },
+  customTooltip: { type: null, required: false },
+  labelFormatter: { type: Function, required: false },
+  // template override (e.g., componentToString(...))
+  template: { type: Function, required: false },
+});
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap();
+function internalTemplate(d) {
+  // If we have cached markup and no custom formatter altering title, reuse.
+  if (wm.has(d) && !props.labelFormatter && !props.template) {
+    return wm.get(d);
+  }
+  // If external template provided, delegate directly
+  if (props.template) {
+    const html = props.template(d, d[props.index]);
+    wm.set(d, html);
+    return html;
+  }
+  const componentDiv = document.createElement("div");
+  const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+    const legendReference = props.items.find((i) => i.name === key);
+    return { ...legendReference, value };
+  });
+  const TooltipComponent = props.customTooltip ?? ChartTooltip;
+  createApp(TooltipComponent, {
+    title: d[props.index],
+    data: omittedData,
+    labelFormatter: props.labelFormatter,
+  }).mount(componentDiv);
+  wm.set(d, componentDiv.innerHTML);
+  return componentDiv.innerHTML;
+}
+
+function color(d, i) {
+  return props.colors[i] ?? "transparent";
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="internalTemplate" :color="color" />
+</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..3580edb
--- /dev/null
+++ b/resources/js/Components/ui/chart/ChartLegend.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { BulletLegend } from "@unovis/ts";
+import { VisBulletLegend } from "@unovis/vue";
+import { nextTick, onMounted, ref } from "vue";
+import { buttonVariants } from '@/Components/ui/button';
+
+const props = defineProps({
+  items: { type: Array, required: true, default: () => [] },
+});
+
+const emits = defineEmits(["legendItemClick", "update:items"]);
+
+const elRef = ref();
+
+function keepStyling() {
+  const selector = `.${BulletLegend.selectors.item}`;
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector);
+    const classes = buttonVariants({ variant: "ghost", size: "xs" }).split(" ");
+
+    elements?.forEach((el) =>
+      el.classList.add(...classes, "!inline-flex", "!mr-2"),
+    );
+  });
+}
+
+onMounted(() => {
+  keepStyling();
+});
+
+function onLegendItemClick(d, i) {
+  emits("legendItemClick", d, i);
+  const isBulletActive = !props.items[i].inactive;
+  const isFilterApplied = props.items.some((i) => i.inactive);
+  if (isFilterApplied && isBulletActive) {
+    // reset filter
+    emits(
+      "update:items",
+      props.items.map((item) => ({ ...item, inactive: false })),
+    );
+  } else {
+    // apply selection, set other item as inactive
+    emits(
+      "update:items",
+      props.items.map((item) =>
+        item.name === d.name
+          ? { ...d, inactive: false }
+          : { ...item, inactive: true },
+      ),
+    );
+  }
+  keepStyling();
+}
+</script>
+
+<template>
+  <div
+    ref="elRef"
+    class="w-max"
+    :style="{
+      '--vis-legend-bullet-size': '16px',
+    }"
+  >
+    <VisBulletLegend :items="items" :on-legend-item-click="onLegendItemClick" />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/chart/ChartSingleTooltip.vue b/resources/js/Components/ui/chart/ChartSingleTooltip.vue
new file mode 100644
index 0000000..ad29bc3
--- /dev/null
+++ b/resources/js/Components/ui/chart/ChartSingleTooltip.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { omit } from "@unovis/ts";
+import { VisTooltip } from "@unovis/vue";
+import { createApp } from "vue";
+import { ChartTooltip } from ".";
+
+const props = defineProps({
+  selector: { type: String, required: true },
+  index: { type: String, required: true },
+  items: { type: Array, required: false },
+  valueFormatter: { type: Function, required: false },
+  customTooltip: { type: null, required: false },
+});
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap();
+function template(d, i, elements) {
+  const valueFormatter = props.valueFormatter ?? ((tick) => `${tick}`);
+  if (props.index in d) {
+    if (wm.has(d)) {
+      return wm.get(d);
+    } else {
+      const componentDiv = document.createElement("div");
+      const omittedData = Object.entries(omit(d, [props.index])).map(
+        ([key, value]) => {
+          const legendReference = props.items?.find((i) => i.name === key);
+          return { ...legendReference, value: valueFormatter(value) };
+        },
+      );
+      const TooltipComponent = props.customTooltip ?? ChartTooltip;
+      createApp(TooltipComponent, {
+        title: d[props.index],
+        data: omittedData,
+      }).mount(componentDiv);
+      wm.set(d, componentDiv.innerHTML);
+      return componentDiv.innerHTML;
+    }
+  } else {
+    const data = d.data;
+
+    if (wm.has(data)) {
+      return wm.get(data);
+    } else {
+      const style = getComputedStyle(elements[i]);
+      const omittedData = [
+        {
+          name: data.name,
+          value: valueFormatter(data[props.index]),
+          color: style.fill,
+        },
+      ];
+      const componentDiv = document.createElement("div");
+      const TooltipComponent = props.customTooltip ?? ChartTooltip;
+      createApp(TooltipComponent, {
+        title: d[props.index],
+        data: omittedData,
+      }).mount(componentDiv);
+      wm.set(d, componentDiv.innerHTML);
+      return componentDiv.innerHTML;
+    }
+  }
+}
+</script>
+
+<template>
+  <VisTooltip
+    :horizontal-shift="20"
+    :vertical-shift="20"
+    :triggers="{
+      [selector]: template,
+    }"
+  />
+</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..ad6ae05
--- /dev/null
+++ b/resources/js/Components/ui/chart/ChartTooltip.vue
@@ -0,0 +1,41 @@
+<script setup>
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/Components/ui/card';
+
+defineProps({
+  title: { type: String, required: false },
+  data: { type: Array, required: true },
+});
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardHeader v-if="title" class="p-3 border-b">
+      <CardTitle>
+        {{ title }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-1">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+        <div class="flex items-center">
+          <span class="w-2.5 h-2.5 mr-2">
+            <svg width="100%" height="100%" viewBox="0 0 30 30">
+              <path
+                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
+                :stroke="item.color"
+                :fill="item.color"
+                stroke-width="1"
+              />
+            </svg>
+          </span>
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</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..df34eb4
--- /dev/null
+++ b/resources/js/Components/ui/chart/ChartTooltipContent.vue
@@ -0,0 +1,85 @@
+<script setup>
+// Advanced tooltip component (original implementation) inspired by external patterns.
+import { computed } from 'vue';
+const props = defineProps({
+  hideLabel: { type: Boolean, default: false },
+  hideIndicator: { type: Boolean, default: false },
+  indicator: { type: String, default: 'dot' }, // 'dot' | 'line' | 'dashed'
+  nameKey: { type: String, required: false },
+  labelKey: { type: String, required: false },
+  labelFormatter: { type: Function, required: false },
+  payload: { type: Object, required: false, default: () => ({}) },
+  config: { type: Object, required: false, default: () => ({}) },
+  class: { type: [String, Array, Object], required: false },
+  color: { type: String, required: false },
+  x: { type: [Number, Date, String], required: false },
+});
+
+// Build array of entries referencing config for label & color
+const entries = computed(() => {
+  return Object.entries(props.payload)
+    .map(([key, value]) => {
+      const seriesKey = props.nameKey || key;
+      const itemConfig = props.config[seriesKey] || props.config[key] || {};
+      const indicatorColor = itemConfig.color || props.color;
+      return { key, value, itemConfig, indicatorColor };
+    })
+    .filter(e => e.itemConfig && (e.itemConfig.label || e.value !== undefined));
+});
+
+const singleSeries = computed(() => entries.value.length === 1 && props.indicator !== 'dot');
+
+const formattedLabel = computed(() => {
+  if (props.hideLabel) return null;
+  if (props.labelFormatter && props.x !== undefined) {
+    return props.labelFormatter(props.x);
+  }
+  if (props.labelKey) {
+    const cfg = props.config[props.labelKey];
+    return cfg?.label || props.payload[props.labelKey];
+  }
+  return props.x instanceof Date ? props.x.toLocaleDateString() : props.x;
+});
+
+function formatValue(v) {
+  if (v == null) return '';
+  if (typeof v === 'number') return v.toLocaleString();
+  return v;
+}
+</script>
+
+<template>
+  <div :class="['border border-border/50 bg-background min-w-32 rounded-lg px-2.5 py-1.5 text-xs shadow-xl', props.class]">
+    <div v-if="!singleSeries && formattedLabel" class="font-medium mb-1">{{ formattedLabel }}</div>
+    <div class="grid gap-1.5">
+      <div
+        v-for="{ key, value, itemConfig, indicatorColor } in entries"
+        :key="key"
+        class="flex w-full flex-wrap items-stretch gap-2"
+        :class="indicator === 'dot' ? 'items-center' : 'items-start'"
+      >
+        <!-- Indicator -->
+        <template v-if="!hideIndicator">
+          <div
+            :class="[
+              'shrink-0 rounded-[2px] border-border',
+              indicator === 'dot' && 'h-2.5 w-2.5',
+              indicator === 'line' && 'w-1 h-4',
+              indicator === 'dashed' && 'w-0 h-4 border-[1.5px] border-dashed bg-transparent',
+              singleSeries && indicator === 'dashed' && 'my-0.5'
+            ]"
+            :style="{ '--color-bg': indicatorColor, '--color-border': indicatorColor }"
+          />
+        </template>
+
+        <div :class="['flex flex-1 justify-between leading-none', singleSeries ? 'items-end' : 'items-center']">
+          <div class="grid gap-1.5">
+            <div v-if="singleSeries && formattedLabel" class="font-medium">{{ formattedLabel }}</div>
+            <span class="text-muted-foreground">{{ itemConfig.label || formatValue(value) }}</span>
+          </div>
+          <span v-if="value !== undefined" class="font-mono font-medium tabular-nums">{{ formatValue(value) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/ui/chart/componentToString.js b/resources/js/Components/ui/chart/componentToString.js
new file mode 100644
index 0000000..c5644fe
--- /dev/null
+++ b/resources/js/Components/ui/chart/componentToString.js
@@ -0,0 +1,38 @@
+import { createApp, h } from 'vue'
+
+// Simple cache map to avoid re-rendering identical payloads.
+const _cache = new Map()
+
+function serializeKey(obj) {
+  try {
+    return JSON.stringify(obj, Object.keys(obj).sort())
+  } catch (e) {
+    return Math.random().toString(36)
+  }
+}
+
+// Factory returning template function for Unovis Crosshair.
+// config: chart series configuration
+// Component: Vue component to render
+// extraProps: static props (e.g. labelKey, labelFormatter)
+export function componentToString(config, Component, extraProps = {}) {
+  return function (_data, x) {
+    const row = _data && _data.data ? _data.data : _data
+    // Build series-only payload (exclude non-config fields like date/dateLabel)
+    const seriesPayload = {}
+    Object.keys(config).forEach(k => {
+      if (row && row[k] !== undefined) seriesPayload[k] = row[k]
+    })
+    const cacheKeyBase = { ...seriesPayload, __x: x }
+    const key = serializeKey(cacheKeyBase)
+    if (_cache.has(key)) return _cache.get(key)
+
+    const el = document.createElement('div')
+    const app = createApp(Component, { ...extraProps, payload: seriesPayload, config, x: row?.date ?? x })
+    app.mount(el)
+    const html = el.innerHTML
+    app.unmount()
+    _cache.set(key, html)
+    return html
+  }
+}
diff --git a/resources/js/Components/ui/chart/index.js b/resources/js/Components/ui/chart/index.js
new file mode 100644
index 0000000..4c1febc
--- /dev/null
+++ b/resources/js/Components/ui/chart/index.js
@@ -0,0 +1,28 @@
+export { default as ChartCrosshair } from "./ChartCrosshair.vue";
+export { default as ChartLegend } from "./ChartLegend.vue";
+export { default as ChartSingleTooltip } from "./ChartSingleTooltip.vue";
+export { default as ChartTooltip } from "./ChartTooltip.vue";
+export { default as ChartContainer } from "./ChartContainer.vue";
+export { default as ChartTooltipContent } from "./ChartTooltipContent.vue";
+export { componentToString } from "./componentToString";
+export { provideChartContext, useChartContext } from "./interface";
+export { default as ChartAutoLegend } from "./ChartAutoLegend.vue";
+
+export function defaultColors(count = 3) {
+  const quotient = Math.floor(count / 2);
+  const remainder = count % 2;
+
+  const primaryCount = quotient + remainder;
+  const secondaryCount = quotient;
+  return [
+    ...Array.from(new Array(primaryCount).keys()).map(
+      (i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`,
+    ),
+    ...Array.from(new Array(secondaryCount).keys()).map(
+      (i) =>
+        `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`,
+    ),
+  ];
+}
+
+export * from "./interface";
diff --git a/resources/js/Components/ui/chart/interface.js b/resources/js/Components/ui/chart/interface.js
new file mode 100644
index 0000000..c9ad8e5
--- /dev/null
+++ b/resources/js/Components/ui/chart/interface.js
@@ -0,0 +1,49 @@
+// Chart interface and context helpers
+// This is a fresh, original implementation inspired conceptually by patterns
+// observed in external registries. No code copied.
+
+import { inject, provide, reactive } from 'vue';
+
+/**
+ * @typedef {Object} ChartSeriesConfig
+ * @property {string|import('vue').Component} [label] Display label or component
+ * @property {import('vue').Component} [icon] Optional icon component
+ * @property {string} [color] Static CSS color value (e.g. 'var(--chart-1)')
+ * @property {Object} [theme] Optional theme map: { light: string, dark: string }
+ */
+
+/**
+ * @typedef {Object.<string, ChartSeriesConfig>} ChartConfig
+ * Keys are series identifiers. Each value declares label/icon and either a
+ * static color or a theme object with light/dark variants.
+ */
+
+const ChartContextSymbol = Symbol('ChartContext');
+let _idCounter = 0;
+
+/**
+ * Provide chart context for descendants.
+ * @param {ChartConfig} config Reactive or plain config object.
+ * @param {string} [explicitId] Optional id override.
+ * @returns {{ id: string, config: ChartConfig }}
+ */
+export function provideChartContext(config, explicitId) {
+	const id = explicitId || `c${Date.now().toString(36)}${(++_idCounter).toString(36)}`;
+	const ctx = { id, config: reactive(config) };
+	provide(ChartContextSymbol, ctx);
+	return ctx;
+}
+
+/**
+ * Inject previously provided chart context.
+ * @returns {{ id: string, config: ChartConfig }}
+ */
+export function useChartContext() {
+	const ctx = inject(ChartContextSymbol, null);
+	if (!ctx) {
+		throw new Error('useChartContext() called without a provider. Wrap in <ChartContainer>.');
+	}
+	return ctx;
+}
+
+export {}; // preserve module boundaries
diff --git a/resources/js/Components/ui/item/Item.vue b/resources/js/Components/ui/item/Item.vue
new file mode 100644
index 0000000..0a863ce
--- /dev/null
+++ b/resources/js/Components/ui/item/Item.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { itemVariants } from ".";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: "div" },
+  class: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+});
+</script>
+
+<template>
+  <Primitive
+    data-slot="item"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(itemVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/resources/js/Components/ui/item/ItemActions.vue b/resources/js/Components/ui/item/ItemActions.vue
new file mode 100644
index 0000000..42620a8
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemActions.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="item-actions"
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/item/ItemContent.vue b/resources/js/Components/ui/item/ItemContent.vue
new file mode 100644
index 0000000..385c799
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemContent.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="item-content"
+    :class="
+      cn(
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/item/ItemDescription.vue b/resources/js/Components/ui/item/ItemDescription.vue
new file mode 100644
index 0000000..91951e6
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemDescription.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <p
+    data-slot="item-description"
+    :class="
+      cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </p>
+</template>
diff --git a/resources/js/Components/ui/item/ItemFooter.vue b/resources/js/Components/ui/item/ItemFooter.vue
new file mode 100644
index 0000000..fe5a5ef
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemFooter.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="item-footer"
+    :class="
+      cn('flex basis-full items-center justify-between gap-2', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/item/ItemGroup.vue b/resources/js/Components/ui/item/ItemGroup.vue
new file mode 100644
index 0000000..4655d3c
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemGroup.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    role="list"
+    data-slot="item-group"
+    :class="cn('group/item-group flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/item/ItemHeader.vue b/resources/js/Components/ui/item/ItemHeader.vue
new file mode 100644
index 0000000..04848e3
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemHeader.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="item-header"
+    :class="
+      cn('flex basis-full items-center justify-between gap-2', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/item/ItemMedia.vue b/resources/js/Components/ui/item/ItemMedia.vue
new file mode 100644
index 0000000..36f69ff
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemMedia.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { cn } from "@/lib/utils";
+import { itemMediaVariants } from ".";
+
+const props = defineProps({
+  class: { type: null, required: false },
+  variant: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="item-media"
+    :data-variant="props.variant"
+    :class="cn(itemMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/item/ItemSeparator.vue b/resources/js/Components/ui/item/ItemSeparator.vue
new file mode 100644
index 0000000..5cb0291
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemSeparator.vue
@@ -0,0 +1,20 @@
+<script setup>
+import { cn } from "@/lib/utils";
+import { Separator } from '@/Components/ui/separator';
+
+const props = defineProps({
+  orientation: { type: String, required: false },
+  decorative: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <Separator
+    data-slot="item-separator"
+    orientation="horizontal"
+    :class="cn('my-0', props.class)"
+  />
+</template>
diff --git a/resources/js/Components/ui/item/ItemTitle.vue b/resources/js/Components/ui/item/ItemTitle.vue
new file mode 100644
index 0000000..b9c042f
--- /dev/null
+++ b/resources/js/Components/ui/item/ItemTitle.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="item-title"
+    :class="
+      cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/Components/ui/item/index.js b/resources/js/Components/ui/item/index.js
new file mode 100644
index 0000000..0a70557
--- /dev/null
+++ b/resources/js/Components/ui/item/index.js
@@ -0,0 +1,50 @@
+import { cva } from "class-variance-authority";
+
+export { default as Item } from "./Item.vue";
+export { default as ItemActions } from "./ItemActions.vue";
+export { default as ItemContent } from "./ItemContent.vue";
+export { default as ItemDescription } from "./ItemDescription.vue";
+export { default as ItemFooter } from "./ItemFooter.vue";
+export { default as ItemGroup } from "./ItemGroup.vue";
+export { default as ItemHeader } from "./ItemHeader.vue";
+export { default as ItemMedia } from "./ItemMedia.vue";
+export { default as ItemSeparator } from "./ItemSeparator.vue";
+export { default as ItemTitle } from "./ItemTitle.vue";
+
+export const itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-1",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
diff --git a/resources/js/Components/ui/scroll-area/ScrollArea.vue b/resources/js/Components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000..193427c
--- /dev/null
+++ b/resources/js/Components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
+import { cn } from "@/lib/utils";
+import ScrollBar from "./ScrollBar.vue";
+
+const props = defineProps({
+  type: { type: String, required: false },
+  dir: { type: String, required: false },
+  scrollHideDelay: { type: Number, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <ScrollAreaRoot
+    v-bind="delegatedProps"
+    :class="cn('relative overflow-hidden', props.class)"
+  >
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/resources/js/Components/ui/scroll-area/ScrollBar.vue b/resources/js/Components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000..9ff5bbe
--- /dev/null
+++ b/resources/js/Components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  orientation: { type: String, required: false, default: "vertical" },
+  forceMount: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex touch-none select-none transition-colors',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent p-px',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent p-px',
+        props.class,
+      )
+    "
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/resources/js/Components/ui/scroll-area/index.js b/resources/js/Components/ui/scroll-area/index.js
new file mode 100644
index 0000000..cd655e0
--- /dev/null
+++ b/resources/js/Components/ui/scroll-area/index.js
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";
diff --git a/resources/js/Pages/Cases/Partials/ContractTable.vue b/resources/js/Pages/Cases/Partials/ContractTable.vue
index 9713a26..d9d1cc5 100644
--- a/resources/js/Pages/Cases/Partials/ContractTable.vue
+++ b/resources/js/Pages/Cases/Partials/ContractTable.vue
@@ -471,7 +471,7 @@ const availableSegmentsCount = computed(() => {
     >
       <!-- Toolbar Actions -->
       <template #toolbar-actions v-if="edit">
-        <Button variant="outline" @click="onCreate"> Nova </Button>
+        <Button variant="outline" @click="onCreate">Nova pogodba</Button>
         <Button
           variant="outline"
           @click="onAttachSegment"
diff --git a/resources/js/Pages/Cases/Show.vue b/resources/js/Pages/Cases/Show.vue
index 83ef5f0..a691969 100644
--- a/resources/js/Pages/Cases/Show.vue
+++ b/resources/js/Pages/Cases/Show.vue
@@ -4,7 +4,7 @@ import SectionTitle from "@/Components/SectionTitle.vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { Button } from "@/Components/ui/button";
 import { Card } from "@/Components/ui/card";
-import { onBeforeMount, ref, computed } from "vue";
+import { ref, computed } from "vue";
 import ContractDrawer from "./Partials/ContractDrawer.vue";
 import ContractTable from "./Partials/ContractTable.vue";
 import ActivityDrawer from "./Partials/ActivityDrawer.vue";
@@ -15,15 +15,10 @@ import DocumentUploadDialog from "@/Components/DocumentsTable/DocumentUploadDial
 import DocumentViewerDialog from "@/Components/DocumentsTable/DocumentViewerDialog.vue";
 import { classifyDocument } from "@/Services/documents";
 import { router, useForm, usePage } from "@inertiajs/vue3";
-import { AngleDownIcon, AngleUpIcon } from "@/Utilities/Icons";
 import Pagination from "@/Components/Pagination.vue";
 import DeleteDialog from "@/Components/Dialogs/DeleteDialog.vue";
 import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
 import { hasPermission } from "@/Services/permissions";
-import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { DropdownMenu } from "@/Components/ui/dropdown-menu";
-import DropdownMenuContent from "@/Components/ui/dropdown-menu/DropdownMenuContent.vue";
 import { Badge } from "@/Components/ui/badge";
 
 const props = defineProps({
@@ -246,7 +241,7 @@ const submitAttachSegment = () => {
 <template>
   <AppLayout title="Client case">
     <template #header></template>
-    <div class="pt-12">
+    <div class="pt-6">
       <!-- Client details -->
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <!-- Current segment badge (right aligned, above the card) -->
@@ -260,8 +255,8 @@ const submitAttachSegment = () => {
             </span>
           </div>
         </div>
-        <Card class="border-l-4 border-blue-500">
-          <div class="mx-auto max-w-4x1 p-3 flex justify-between items-center">
+        <Card class="border-l-4 border-blue-400">
+          <div class="p-3 flex justify-between items-center">
             <SectionTitle>
               <template #title>
                 <a class="hover:text-blue-500" :href="route('client.show', client)">
@@ -269,16 +264,14 @@ const submitAttachSegment = () => {
                 </a>
               </template>
             </SectionTitle>
-            <Badge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
-              Naročnik
-            </Badge>
+            <Badge class="bg-blue-500 text-white"> Naročnik </Badge>
           </div>
         </Card>
       </div>
     </div>
     <div class="pt-1" :hidden="clientDetails">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <Card class="border-l-4 border-blue-400">
+        <Card>
           <div class="mx-auto max-w-4x1 p-3">
             <PersonInfoGrid
               :types="types"
@@ -316,7 +309,7 @@ const submitAttachSegment = () => {
     </div>
     <div class="pt-1">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <Card class="border-l-4 border-red-400">
+        <Card>
           <div class="mx-auto max-w-4x1 p-3">
             <PersonInfoGrid
               :types="types"
diff --git a/resources/js/Pages/Client/Contracts.vue b/resources/js/Pages/Client/Contracts.vue
index 80a9bdc..99117e8 100644
--- a/resources/js/Pages/Client/Contracts.vue
+++ b/resources/js/Pages/Client/Contracts.vue
@@ -1,21 +1,30 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import { ref } from "vue";
-import { Link, router } from "@inertiajs/vue3";
-import DataTable from "@/Components/DataTable/DataTable.vue";
+import { computed, ref } from "vue";
+import { Link, router, usePage } from "@inertiajs/vue3";
+import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/Components/ui/select";
+} from "@/Components/ui/select"; // kept in case elsewhere but segment filter replaced
+import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";
 import PersonInfoGrid from "@/Components/PersonInfo/PersonInfoGrid.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import DateRangePicker from "@/Components/DateRangePicker.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ButtonGroup } from "@/Components/ui/button-group";
+import AppPopover from "@/Components/app/ui/AppPopover.vue";
+import { Filter, LinkIcon } from "lucide-vue-next";
+import { Card } from "@/Components/ui/card";
+import { Badge } from "@/Components/ui/badge";
+import { hasPermission } from "@/Services/permissions";
+import InputLabel from "@/Components/InputLabel.vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps({
   client: Object,
@@ -25,14 +34,29 @@ const props = defineProps({
   types: Object,
 });
 
+const page = usePage();
+// Expose as a callable computed: use in templates as hasPerm('permission-slug')
+const hasPerm = computed(() => (permission) =>
+  hasPermission(page.props.auth?.user, permission)
+);
+
 const dateRange = ref({
   start: props.filters?.from || null,
   end: props.filters?.to || null,
 });
 const search = ref(props.filters?.search || "");
-const selectedSegment = ref(props.filters?.segment || null);
+// Multi-segment selection (backwards compatible if legacy single 'segment' present)
+const selectedSegments = ref(
+  Array.isArray(props.filters?.segments)
+    ? props.filters.segments.map((s) => String(s))
+    : props.filters?.segment
+    ? [String(props.filters.segment)]
+    : []
+);
+const filterPopoverOpen = ref(false);
 
 function applyDateFilter() {
+  filterPopoverOpen.value = false;
   const params = Object.fromEntries(
     new URLSearchParams(window.location.search).entries()
   );
@@ -51,32 +75,27 @@ function applyDateFilter() {
   } else {
     delete params.search;
   }
-  if (selectedSegment.value) {
-    params.segment = String(selectedSegment.value);
+  if (selectedSegments.value.length > 0) {
+    // join as comma list for backend; adjust server parsing accordingly
+    params.segments = selectedSegments.value.join(",");
   } else {
     delete params.segments;
   }
   delete params.page;
+  // remove legacy single segment param if present
+  delete params.segment;
   router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
     preserveState: true,
     replace: true,
     preserveScroll: true,
-    only: ['contracts'],
+    only: ["contracts"],
   });
 }
 
 function clearDateFilter() {
   dateRange.value = { start: null, end: null };
-  selectedSegment.value = null;
-  applyDateFilter();
-}
-
-function handleDateRangeUpdate() {
-  applyDateFilter();
-}
-
-function handleSegmentChange(value) {
-  selectedSegment.value = value;
+  selectedSegments.value = [];
+  search.value = "";
   applyDateFilter();
 }
 
@@ -111,132 +130,184 @@ function formatDate(value) {
   <AppLayout title="Pogodbe">
     <template #header></template>
     <!-- Header card (matches Client/Show header style) -->
-    <div class="pt-12">
+    <div class="pt-6">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
-        >
-          <div class="mx-auto max-w-4x1 p-3">
-            <div class="flex items-center justify-between">
-              <SectionTitle>
-                <template #title>
-                  {{ client.person.full_name }}
-                </template>
-              </SectionTitle>
-            </div>
+        <Card class="border-l-4 border-blue-400">
+          <div class="p-3 flex justify-between items-center">
+            <SectionTitle>
+              <template #title>
+                {{ client.person.full_name }}
+              </template>
+            </SectionTitle>
+            <Badge class="bg-blue-500 text-white"> Naročnik </Badge>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
-
-    <!-- Client details card (separate container) -->
     <div class="pt-1">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
-        >
-          <div class="mx-auto max-w-4x1 px-2">
-            <PersonInfoGrid :types="types" :person="client.person" />
+        <Card>
+          <div class="mx-auto max-w-4x1 p-3">
+            <PersonInfoGrid
+              :types="types"
+              :person="client.person"
+              :edit="hasPerm('client-edit')"
+            ></PersonInfoGrid>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
 
     <!-- Contracts list card -->
     <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
-          <div class="mx-auto max-w-4x1 py-3">
-            <div class="mb-4">
-              <ButtonGroup>
-                <Button
-                  as-child
-                  :variant="route().current('client.show') ? 'default' : 'ghost'"
-                >
-                  <Link :href="route('client.show', { uuid: client.uuid })">
-                    Primeri
-                  </Link>
-                </Button>
-                <Button
-                  as-child
-                  :variant="route().current('client.contracts') ? 'default' : 'ghost'"
-                >
-                  <Link :href="route('client.contracts', { uuid: client.uuid })">
-                    Pogodbe
-                  </Link>
-                </Button>
-              </ButtonGroup>
+        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+          <div class="mx-auto max-w-4x1">
+            <div class="px-3 py-4 flex flex-row items-center gap-3">
+              <Link
+                :class="
+                  cn(
+                    'border border-gray-200 py-2 px-3 rounded-md hover:bg-accent hover:text-accent-foreground ',
+                    route().current('client.show')
+                      ? 'bg-accent text-accent-foreground'
+                      : ''
+                  )
+                "
+                :href="route('client.show', { uuid: client.uuid })"
+              >
+                Primeri
+              </Link>
+
+              <Link
+                :class="
+                  cn(
+                    'border border-gray-200 py-2 px-3 rounded-md hover:bg-accent hover:text-accent-foreground ',
+                    route().current('client.contracts')
+                      ? 'bg-accent text-accent-foreground'
+                      : ''
+                  )
+                "
+                :href="route('client.contracts', { uuid: client.uuid })"
+              >
+                Pogodbe
+              </Link>
             </div>
             <DataTable
-              :show-search="true"
-              :show-page-size="true"
-              :show-filters="true"
-              :has-active-filters="!!(dateRange?.start || dateRange?.end || selectedSegment)"
               :columns="[
-                { key: 'select', label: '', sortable: false, width: '50px' },
                 { key: 'reference', label: 'Referenca', sortable: false },
                 { key: 'customer', label: 'Stranka', sortable: false },
                 { key: 'start', label: 'Začetek', sortable: false },
                 { key: 'segment', label: 'Segment', sortable: false },
                 { key: 'balance', label: 'Stanje', sortable: false, align: 'right' },
               ]"
-              :rows="contracts.data || []"
-              :meta="{ current_page: contracts.current_page, per_page: contracts.per_page, total: contracts.total, last_page: contracts.last_page, from: contracts.from, to: contracts.to, links: contracts.links }"
+              :data="contracts.data || []"
+              :meta="{
+                current_page: contracts.current_page,
+                per_page: contracts.per_page,
+                total: contracts.total,
+                last_page: contracts.last_page,
+                from: contracts.from,
+                to: contracts.to,
+                links: contracts.links,
+              }"
               route-name="client.contracts"
               :route-params="{ uuid: client.uuid }"
-              :search="search"
               row-key="uuid"
               :only-props="['contracts']"
+              :page-size-options="[10, 15, 25, 50, 100]"
+              page-param-name="contracts_page"
+              per-page-param-name="contracts_per_page"
+              :show-toolbar="true"
             >
               <template #toolbar-filters>
-                <div class="space-y-4">
-                  <div class="space-y-2">
-                    <label class="text-sm font-medium">Datumska območja</label>
-                    <DateRangePicker
-                      v-model="dateRange"
-                      format="dd.MM.yyyy"
-                      @update:model-value="handleDateRangeUpdate"
-                      placeholder="Izberi datumska območja"
-                    />
-                  </div>
-                  <div class="space-y-2">
-                    <label class="text-sm font-medium">Segment</label>
-                    <Select
-                      :model-value="selectedSegment"
-                      @update:model-value="handleSegmentChange"
-                    >
-                      <SelectTrigger class="w-full">
-                        <SelectValue placeholder="Vsi segmenti" />
-                      </SelectTrigger>
-                      <SelectContent class="w-[var(--radix-select-trigger-width)]">
-                        <SelectItem :value="null">Vsi segmenti</SelectItem>
-                        <SelectItem
-                          v-for="segment in segments"
-                          :key="segment.id"
-                          :value="String(segment.id)"
-                        >
-                          {{ segment.name }}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div class="flex justify-end pt-2 border-t">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      :disabled="!dateRange?.start && !dateRange?.end && !selectedSegment"
-                      @click="clearDateFilter"
-                    >
-                      Počisti
+                <AppPopover
+                  v-model:open="filterPopoverOpen"
+                  align="start"
+                  content-class="w-[400px]"
+                >
+                  <template #trigger>
+                    <Button variant="outline" size="sm" class="gap-2">
+                      <Filter class="h-4 w-4" />
+                      Filtri
+                      <span
+                        v-if="
+                          dateRange?.start || dateRange?.end || selectedSegments?.length
+                        "
+                        class="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"
+                      >
+                        {{
+                          [
+                            dateRange?.start || dateRange?.end ? 1 : 0,
+                            selectedSegments?.length ? 1 : 0,
+                          ].reduce((a, b) => a + b, 0)
+                        }}
+                      </span>
                     </Button>
+                  </template>
+                  <div class="space-y-4">
+                    <div class="space-y-2">
+                      <h4 class="font-medium text-sm">Filtri pogodb</h4>
+                      <p class="text-sm text-muted-foreground">
+                        Izberite filtre za prikaz pogodb
+                      </p>
+                    </div>
+                    <div class="space-y-3">
+                      <div class="space-y-1.5">
+                        <InputLabel>Iskanje</InputLabel>
+                        <Input
+                          v-model="search"
+                          type="text"
+                          placeholder="Išči po referenci, stranki..."
+                        />
+                      </div>
+                      <div class="space-y-1.5">
+                        <InputLabel>Datumska območja</InputLabel>
+                        <DateRangePicker
+                          v-model="dateRange"
+                          format="dd.MM.yyyy"
+                          placeholder="Izberi datumska območja"
+                        />
+                      </div>
+                      <div class="space-y-1.5">
+                        <InputLabel>Segmenti</InputLabel>
+                        <AppMultiSelect
+                          v-model="selectedSegments"
+                          :items="
+                            segments.map((s) => ({ value: String(s.id), label: s.name }))
+                          "
+                          placeholder="Vsi segmenti"
+                          search-placeholder="Išči segment..."
+                          empty-text="Ni segmentov"
+                          chip-variant="secondary"
+                        />
+                      </div>
+                      <div class="flex justify-end gap-2 pt-2 border-t">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          :disabled="
+                            !dateRange?.start &&
+                            !dateRange?.end &&
+                            selectedSegments.length === 0 &&
+                            search === ''
+                          "
+                          @click="clearDateFilter"
+                        >
+                          Počisti
+                        </Button>
+                        <Button type="button" size="sm" @click="applyDateFilter">
+                          Uporabi
+                        </Button>
+                      </div>
+                    </div>
                   </div>
-                </div>
+                </AppPopover>
               </template>
               <template #cell-reference="{ row }">
                 <Link
                   :href="route('clientCase.show', caseShowParams(row))"
-                  class="text-indigo-600 hover:underline"
+                  class="font-semibold hover:underline text-primary-700"
                 >
                   {{ row.reference }}
                 </Link>
diff --git a/resources/js/Pages/Client/Index.vue b/resources/js/Pages/Client/Index.vue
index 8f30d4f..3385d04 100644
--- a/resources/js/Pages/Client/Index.vue
+++ b/resources/js/Pages/Client/Index.vue
@@ -5,8 +5,6 @@ import { Link, router, usePage } from "@inertiajs/vue3";
 import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
 import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import { hasPermission } from "@/Services/permissions";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faUserGroup } from "@fortawesome/free-solid-svg-icons";
 import { Button } from "@/Components/ui/button";
 import { Card, CardHeader, CardTitle, CardContent } from "@/Components/ui/card";
 import { Input } from "@/Components/ui/input";
@@ -30,7 +28,8 @@ import { useForm } from "vee-validate";
 import { toTypedSchema } from "@vee-validate/zod";
 import * as z from "zod";
 import ActionMessage from "@/Components/ActionMessage.vue";
-import { Mail, Plug2Icon } from "lucide-vue-next";
+import { Mail, Plug2Icon, Plus } from "lucide-vue-next";
+import { Separator } from "@/Components/ui/separator";
 
 const props = defineProps({
   clients: Object,
@@ -164,13 +163,13 @@ const fmtCurrency = (v) => {
 <template>
   <AppLayout title="Client">
     <template #header> </template>
-    <div class="py-12">
+    <div class="py-6">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <Card>
-          <CardHeader>
+          <CardHeader class="p-5">
             <CardTitle>Naročniki</CardTitle>
           </CardHeader>
-          <CardContent>
+          <CardContent class="p-0">
             <DataTable
               :columns="[
                 { key: 'nu', label: 'Št.', sortable: false },
@@ -193,11 +192,16 @@ const fmtCurrency = (v) => {
               :show-toolbar="true"
               :hoverable="true"
               row-key="uuid"
+              :striped="true"
               empty-text="Ni najdenih naročnikov."
             >
-              <template #toolbar-add>
-                <Button @click="openDrawerCreateClient">
-                  <Plug2Icon class="w-4 h-4 mr-2" /> Dodaj
+              <template #toolbar-actions>
+                <Button
+                  variant="outline"
+                  v-if="hasPerm('client-edit')"
+                  @click="openDrawerCreateClient"
+                >
+                  <Plus class="w-4 h-4" /> Novi naročnik
                 </Button>
               </template>
               <template #cell-nu="{ row }">
@@ -206,7 +210,7 @@ const fmtCurrency = (v) => {
               <template #cell-name="{ row }">
                 <Link
                   :href="route('client.show', { uuid: row.uuid })"
-                  class="text-indigo-600 hover:underline"
+                  class="font-semibold hover:underline text-primary-700"
                 >
                   {{ row.person?.full_name || "-" }}
                 </Link>
@@ -249,7 +253,7 @@ const fmtCurrency = (v) => {
       <div class="space-y-4">
         <FormField v-slot="{ componentField }" name="full_name">
           <FormItem>
-            <FormLabel>Naziv</FormLabel>
+            <FormLabel>Naziv *</FormLabel>
             <FormControl>
               <Input
                 id="fullname"
@@ -262,129 +266,137 @@ const fmtCurrency = (v) => {
             <FormMessage />
           </FormItem>
         </FormField>
-
-        <FormField v-slot="{ componentField }" name="tax_number">
-          <FormItem>
-            <FormLabel>Davčna</FormLabel>
-            <FormControl>
-              <Input
-                id="taxnumber"
-                type="text"
-                autocomplete="tax-number"
-                placeholder="Davčna številka"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <FormField v-slot="{ componentField }" name="social_security_number">
-          <FormItem>
-            <FormLabel>Matična / Emšo</FormLabel>
-            <FormControl>
-              <Input
-                id="socialSecurityNumber"
-                type="text"
-                autocomplete="social-security-number"
-                placeholder="Matična / Emšo"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <FormField v-slot="{ componentField }" name="address.address">
-          <FormItem>
-            <FormLabel>Naslov</FormLabel>
-            <FormControl>
-              <Input
-                id="address"
-                type="text"
-                autocomplete="address"
-                placeholder="Naslov"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <FormField v-slot="{ componentField }" name="address.country">
-          <FormItem>
-            <FormLabel>Država</FormLabel>
-            <FormControl>
-              <Input
-                id="addressCountry"
-                type="text"
-                autocomplete="address-country"
-                placeholder="Država"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <FormField v-slot="{ value, handleChange }" name="address.type_id">
-          <FormItem>
-            <FormLabel>Vrsta naslova</FormLabel>
-            <Select :model-value="value" @update:model-value="handleChange">
+        <CardTitle class="full">Osebni podatki</CardTitle>
+        <Separator />
+        <div class="flex flex-row gap-2">
+          <FormField v-slot="{ componentField }" name="tax_number">
+            <FormItem class="flex-1">
+              <FormLabel>Davčna</FormLabel>
               <FormControl>
-                <SelectTrigger>
-                  <SelectValue placeholder="Izberi vrsto naslova" />
-                </SelectTrigger>
+                <Input
+                  id="taxnumber"
+                  type="text"
+                  autocomplete="tax-number"
+                  placeholder="Davčna številka"
+                  v-bind="componentField"
+                />
               </FormControl>
-              <SelectContent>
-                <SelectItem :value="1">Stalni</SelectItem>
-                <SelectItem :value="2">Začasni</SelectItem>
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        </FormField>
+              <FormMessage />
+            </FormItem>
+          </FormField>
 
-        <FormField v-slot="{ value, handleChange }" name="phone.country_code">
-          <FormItem>
-            <FormLabel>Koda države tel.</FormLabel>
-            <Select :model-value="value" @update:model-value="handleChange">
+          <FormField v-slot="{ componentField }" name="social_security_number">
+            <FormItem class="flex-1">
+              <FormLabel>Matična / Emšo</FormLabel>
               <FormControl>
-                <SelectTrigger>
-                  <SelectValue placeholder="Izberi kodo države" />
-                </SelectTrigger>
+                <Input
+                  id="socialSecurityNumber"
+                  type="text"
+                  autocomplete="social-security-number"
+                  placeholder="Matična / Emšo"
+                  v-bind="componentField"
+                />
               </FormControl>
-              <SelectContent>
-                <SelectItem value="00386">+386 (Slovenija)</SelectItem>
-                <SelectItem value="00385">+385 (Hrvaška)</SelectItem>
-                <SelectItem value="0039">+39 (Italija)</SelectItem>
-                <SelectItem value="0036">+36 (Madžarska)</SelectItem>
-                <SelectItem value="0043">+43 (Avstrija)</SelectItem>
-                <SelectItem value="00381">+381 (Srbija)</SelectItem>
-                <SelectItem value="00387">+387 (Bosna in Hercegovina)</SelectItem>
-                <SelectItem value="00382">+382 (Črna gora)</SelectItem>
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        </FormField>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+        <CardTitle class="full">Naslov</CardTitle>
+        <Separator />
+        <div class="grid sm:grid-cols-2 gap-2">
+          <FormField v-slot="{ componentField }" name="address.address">
+            <FormItem>
+              <FormLabel>Naslov</FormLabel>
+              <FormControl>
+                <Input
+                  id="address"
+                  type="text"
+                  autocomplete="address"
+                  placeholder="Naslov"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
 
-        <FormField v-slot="{ componentField }" name="phone.nu">
-          <FormItem>
-            <FormLabel>Telefonska št.</FormLabel>
-            <FormControl>
-              <Input
-                id="phoneNu"
-                type="text"
-                autocomplete="phone-nu"
-                placeholder="Telefonska številka"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
+          <FormField v-slot="{ componentField }" name="address.country">
+            <FormItem>
+              <FormLabel>Država</FormLabel>
+              <FormControl>
+                <Input
+                  id="addressCountry"
+                  type="text"
+                  autocomplete="address-country"
+                  placeholder="Država"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
 
+          <FormField v-slot="{ value, handleChange }" name="address.type_id">
+            <FormItem>
+              <FormLabel>Vrsta naslova</FormLabel>
+              <Select :model-value="value" @update:model-value="handleChange">
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Izberi vrsto naslova" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent align="end" position="popper">
+                  <SelectItem :value="1">Stalni</SelectItem>
+                  <SelectItem :value="2">Začasni</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+        <CardTitle class="full">Naslov</CardTitle>
+        <Separator />
+        <div class="flex flex-row gap-2">
+          <FormField v-slot="{ value, handleChange }" name="phone.country_code">
+            <FormItem class="flex-1/3">
+              <FormLabel>Koda države tel.</FormLabel>
+              <Select :model-value="value" @update:model-value="handleChange">
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Izberi kodo države" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="00386">+386 (Slovenija)</SelectItem>
+                  <SelectItem value="00385">+385 (Hrvaška)</SelectItem>
+                  <SelectItem value="0039">+39 (Italija)</SelectItem>
+                  <SelectItem value="0036">+36 (Madžarska)</SelectItem>
+                  <SelectItem value="0043">+43 (Avstrija)</SelectItem>
+                  <SelectItem value="00381">+381 (Srbija)</SelectItem>
+                  <SelectItem value="00387">+387 (Bosna in Hercegovina)</SelectItem>
+                  <SelectItem value="00382">+382 (Črna gora)</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="phone.nu">
+            <FormItem class="flex-2/3">
+              <FormLabel>Telefonska št.</FormLabel>
+              <FormControl>
+                <Input
+                  id="phoneNu"
+                  type="text"
+                  autocomplete="phone-nu"
+                  placeholder="Telefonska številka"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
         <FormField v-slot="{ componentField }" name="description">
           <FormItem>
             <FormLabel>Opis</FormLabel>
diff --git a/resources/js/Pages/Client/Show.vue b/resources/js/Pages/Client/Show.vue
index c53a00d..08f7e47 100644
--- a/resources/js/Pages/Client/Show.vue
+++ b/resources/js/Pages/Client/Show.vue
@@ -1,16 +1,19 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { computed, ref } from "vue";
-import { Link, usePage } from "@inertiajs/vue3";
+import { Link, router, usePage } from "@inertiajs/vue3";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import PersonInfoGrid from "@/Components/PersonInfo/PersonInfoGrid.vue";
 import FormCreateCase from "./Partials/FormCreateCase.vue";
-import DataTable from "@/Components/DataTable/DataTable.vue";
+import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import { hasPermission } from "@/Services/permissions";
 import { Button } from "@/Components/ui/button";
-import { ButtonGroup } from "@/Components/ui/button-group";
-import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { Card } from "@/Components/ui/card";
+import Badge from "@/Components/ui/badge/Badge.vue";
+import { cn } from "@/lib/utils";
+import { Input } from "@/Components/ui/input";
 
 const props = defineProps({
   client: Object,
@@ -34,72 +37,92 @@ const drawerCreateCase = ref(false);
 const openDrawerCreateCase = () => {
   drawerCreateCase.value = true;
 };
+
+function applySearch() {
+  const params = Object.fromEntries(
+    new URLSearchParams(window.location.search).entries()
+  );
+  const term = (search.value || "").trim();
+  if (term) {
+    params.search = term;
+  } else {
+    delete params.search;
+  }
+  delete params.page;
+  router.get(route("client.show", { uuid: props.client.uuid }), params, {
+    preserveState: true,
+    replace: true,
+    preserveScroll: true,
+    only: ["client_cases"],
+  });
+}
 </script>
 
 <template>
   <AppLayout title="Client">
     <template #header></template>
-    <div class="pt-12">
+    <div class="pt-6">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
-        >
-          <div class="mx-auto max-w-4x1 p-3">
-            <div class="flex items-center justify-between">
-              <SectionTitle>
-                <template #title>
-                  {{ client.person.full_name }}
-                </template>
-              </SectionTitle>
-            </div>
+        <Card class="border-l-4 border-blue-400">
+          <div class="p-3 flex justify-between items-center">
+            <SectionTitle>
+              <template #title>
+                {{ client.person.full_name }}
+              </template>
+            </SectionTitle>
+            <Badge class="bg-blue-500 text-white"> Naročnik </Badge>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
     <div class="pt-1">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
-        >
-          <div class="mx-auto max-w-4x1 px-2">
+        <Card>
+          <div class="mx-auto max-w-4x1 p-3">
             <PersonInfoGrid
               :types="types"
               :person="client.person"
               :edit="hasPerm('client-edit')"
             ></PersonInfoGrid>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
 
     <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
-          <div class="mx-auto max-w-4x1 py-3">
-            <div class="mb-4">
-              <ButtonGroup>
-                <Button
-                  as-child
-                  :variant="route().current('client.show') ? 'default' : 'ghost'"
-                >
-                  <Link :href="route('client.show', { uuid: client.uuid })">
-                    Primeri
-                  </Link>
-                </Button>
-                <Button
-                  as-child
-                  :variant="route().current('client.contracts') ? 'default' : 'ghost'"
-                >
-                  <Link :href="route('client.contracts', { uuid: client.uuid })">
-                    Pogodbe
-                  </Link>
-                </Button>
-              </ButtonGroup>
+        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+          <div class="mx-auto max-w-4x1">
+            <div class="px-3 py-4 flex flex-row items-center gap-3">
+              <Link
+                :class="
+                  cn(
+                    'border border-gray-200 py-2 px-3 rounded-md hover:bg-accent hover:text-accent-foreground ',
+                    route().current('client.show')
+                      ? 'bg-accent text-accent-foreground'
+                      : ''
+                  )
+                "
+                :href="route('client.show', { uuid: client.uuid })"
+              >
+                Primeri
+              </Link>
+
+              <Link
+                :class="
+                  cn(
+                    'border border-gray-200 py-2 px-3 rounded-md hover:bg-accent hover:text-accent-foreground ',
+                    route().current('client.contracts')
+                      ? 'bg-accent text-accent-foreground'
+                      : ''
+                  )
+                "
+                :href="route('client.contracts', { uuid: client.uuid })"
+              >
+                Pogodbe
+              </Link>
             </div>
             <DataTable
-              :show-search="true"
-              :show-page-size="true"
-              :show-add="true"
               :columns="[
                 { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
                 { key: 'case', label: 'Primer', sortable: false },
@@ -117,7 +140,7 @@ const openDrawerCreateCase = () => {
                   align: 'right',
                 },
               ]"
-              :rows="client_cases.data || []"
+              :data="client_cases.data || []"
               :meta="{
                 current_page: client_cases.current_page,
                 per_page: client_cases.per_page,
@@ -130,16 +153,32 @@ const openDrawerCreateCase = () => {
               route-name="client.show"
               :route-params="{ uuid: client.uuid }"
               row-key="uuid"
-              :search="search"
               :only-props="['client_cases']"
+              :page-size-options="[10, 15, 25, 50, 100]"
+              :show-toolbar="true"
             >
-              <template #toolbar-add>
-                <ActionMenuItem
+              <template #toolbar-filters>
+                <div class="flex items-center gap-2 w-full">
+                  <Input
+                    v-model="search"
+                    placeholder="Išči po primeru, davčni, osebi..."
+                    class="w-[260px]"
+                    @keydown.enter="applySearch"
+                  />
+                  <Button size="sm" variant="outline" @click="applySearch">Išči</Button>
+                </div>
+              </template>
+              <template #toolbar-actions>
+                <Button
                   v-if="hasPerm('case-edit')"
-                  label="Dodaj primer"
-                  :icon="faPlus"
+                  size="sm"
+                  variant="outline"
+                  class="gap-2"
                   @click="openDrawerCreateCase"
-                />
+                >
+                  <FontAwesomeIcon :icon="faPlus" class="h-4 w-4" />
+                  Dodaj primer
+                </Button>
               </template>
               <template #cell-nu="{ row }">
                 {{ row.person?.nu || "-" }}
@@ -147,7 +186,7 @@ const openDrawerCreateCase = () => {
               <template #cell-case="{ row }">
                 <Link
                   :href="route('clientCase.show', { client_case: row.uuid })"
-                  class="text-indigo-600 hover:underline"
+                  class="font-semibold hover:underline text-primary-700"
                 >
                   {{ row.person?.full_name || "-" }}
                 </Link>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 08a9a57..6745438 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -171,16 +171,14 @@ function safeCaseHref(uuid, segment = null) {
             >
               <FontAwesomeIcon :icon="k.icon" class="w-5 h-5" />
             </span>
-            <span
-              class="text-[11px] text-gray-400 uppercase tracking-wide"
-              >{{ k.label }}</span
-            >
+            <span class="text-[11px] text-gray-400 uppercase tracking-wide">{{
+              k.label
+            }}</span>
           </div>
           <div class="flex items-end gap-2">
-            <span
-              class="text-2xl font-semibold tracking-tight text-gray-900"
-              >{{ props.kpis?.[k.key] ?? "—" }}</span
-            >
+            <span class="text-2xl font-semibold tracking-tight text-gray-900">{{
+              props.kpis?.[k.key] ?? "—"
+            }}</span>
             <span
               class="text-[10px] text-indigo-500 opacity-0 group-hover:opacity-100 transition"
               >Odpri →</span
@@ -250,20 +248,13 @@ function safeCaseHref(uuid, segment = null) {
       <div class="grid lg:grid-cols-3 gap-8">
         <!-- Activity Feed -->
         <div class="lg:col-span-1 space-y-4">
-          <div
-            class="bg-white border rounded-xl shadow-sm p-5 flex flex-col gap-4"
-          >
+          <div class="bg-white border rounded-xl shadow-sm p-5 flex flex-col gap-4">
             <div class="flex items-center justify-between">
-              <h3
-                class="text-sm font-semibold tracking-wide text-gray-700 uppercase"
-              >
+              <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase">
                 Aktivnost
               </h3>
             </div>
-            <ul
-              class="divide-y divide-gray-100 text-sm"
-              v-if="activities"
-            >
+            <ul class="divide-y divide-gray-100 text-sm" v-if="activities">
               <li
                 v-for="a in activityItems"
                 :key="a.id"
@@ -296,11 +287,7 @@ function safeCaseHref(uuid, segment = null) {
               </li>
             </ul>
             <ul v-else class="animate-pulse space-y-2">
-              <li
-                v-for="n in 5"
-                :key="n"
-                class="h-5 bg-gray-100 rounded"
-              />
+              <li v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
             </ul>
             <div class="pt-1 flex justify-between items-center text-[11px]">
               <Link
@@ -320,19 +307,13 @@ function safeCaseHref(uuid, segment = null) {
         <!-- Right side panels -->
         <div class="lg:col-span-2 space-y-8">
           <!-- SMS Overview -->
-          <div
-            class="bg-white border rounded-xl shadow-sm p-6"
-          >
-            <h3
-              class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4"
-            >
+          <div class="bg-white border rounded-xl shadow-sm p-6">
+            <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4">
               SMS stanje
             </h3>
             <div v-if="props.smsStats?.length" class="overflow-x-auto">
               <table class="w-full text-sm">
-                <thead
-                  class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider"
-                >
+                <thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
                   <tr>
                     <th class="px-3 py-2 text-left">Profil</th>
                     <th class="px-3 py-2 text-left">Bilanca</th>
@@ -349,9 +330,7 @@ function safeCaseHref(uuid, segment = null) {
                     class="border-t last:border-b"
                   >
                     <td class="px-3 py-2">
-                      <span class="font-medium text-gray-900">{{
-                        p.name
-                      }}</span>
+                      <span class="font-medium text-gray-900">{{ p.name }}</span>
                       <span
                         class="ml-2 text-[11px]"
                         :class="p.active ? 'text-emerald-600' : 'text-gray-400'"
@@ -371,18 +350,12 @@ function safeCaseHref(uuid, segment = null) {
                 </tbody>
               </table>
             </div>
-            <div v-else class="text-sm text-gray-500">
-              Ni podatkov o SMS.
-            </div>
+            <div v-else class="text-sm text-gray-500">Ni podatkov o SMS.</div>
           </div>
 
           <!-- System Health -->
-          <div
-            class="bg-white border rounded-xl shadow-sm p-6"
-          >
-            <h3
-              class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4"
-            >
+          <div class="bg-white border rounded-xl shadow-sm p-6">
+            <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4">
               System Health
             </h3>
             <div
@@ -390,17 +363,13 @@ function safeCaseHref(uuid, segment = null) {
               class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm"
             >
               <div class="flex flex-col gap-1">
-                <span class="text-[11px] uppercase text-gray-400"
-                  >Queue backlog</span
-                >
+                <span class="text-[11px] uppercase text-gray-400">Queue backlog</span>
                 <span class="font-semibold text-gray-800">{{
                   systemHealth.queue_backlog ?? "—"
                 }}</span>
               </div>
               <div class="flex flex-col gap-1">
-                <span class="text-[11px] uppercase text-gray-400"
-                  >Failed jobs</span
-                >
+                <span class="text-[11px] uppercase text-gray-400">Failed jobs</span>
                 <span class="font-semibold text-gray-800">{{
                   systemHealth.failed_jobs ?? "—"
                 }}</span>
@@ -422,30 +391,20 @@ function safeCaseHref(uuid, segment = null) {
                 >
               </div>
               <div class="flex flex-col gap-1">
-                <span class="text-[11px] uppercase text-gray-400"
-                  >Generated</span
-                >
+                <span class="text-[11px] uppercase text-gray-400">Generated</span>
                 <span class="font-semibold text-gray-800">{{
                   new Date(systemHealth.generated_at).toLocaleTimeString()
                 }}</span>
               </div>
             </div>
             <div v-else class="grid sm:grid-cols-4 gap-4 animate-pulse">
-              <div
-                v-for="n in 4"
-                :key="n"
-                class="h-10 bg-gray-100 rounded"
-              />
+              <div v-for="n in 4" :key="n" class="h-10 bg-gray-100 rounded" />
             </div>
           </div>
 
           <!-- Completed Field Jobs Trend (7 dni) -->
-          <div
-            class="bg-white border rounded-xl shadow-sm p-6"
-          >
-            <h3
-              class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4"
-            >
+          <div class="bg-white border rounded-xl shadow-sm p-6">
+            <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4">
               Zaključena terenska dela (7 dni)
             </h3>
             <div v-if="trends" class="h-24">
@@ -479,18 +438,11 @@ function safeCaseHref(uuid, segment = null) {
           </div>
 
           <!-- Stale Cases -->
-          <div
-            class="bg-white border rounded-xl shadow-sm p-6"
-          >
-            <h3
-              class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4"
-            >
+          <div class="bg-white border rounded-xl shadow-sm p-6">
+            <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4">
               Stari primeri brez aktivnosti
             </h3>
-            <ul
-              v-if="staleCases"
-              class="divide-y divide-gray-100 text-sm"
-            >
+            <ul v-if="staleCases" class="divide-y divide-gray-100 text-sm">
               <li
                 v-for="c in staleCases"
                 :key="c.id"
@@ -511,8 +463,7 @@ function safeCaseHref(uuid, segment = null) {
                     {{ formatStaleDaysLabel(c.days_without_activity ?? c.days_stale) }}
                   </p>
                 </div>
-                <span
-                  class="text-[10px] px-2 py-0.5 rounded bg-amber-50 text-amber-600"
+                <span class="text-[10px] px-2 py-0.5 rounded bg-amber-50 text-amber-600"
                   >Stale</span
                 >
               </li>
@@ -524,27 +475,16 @@ function safeCaseHref(uuid, segment = null) {
               </li>
             </ul>
             <div v-else class="space-y-2 animate-pulse">
-              <div
-                v-for="n in 5"
-                :key="n"
-                class="h-5 bg-gray-100 rounded"
-              />
+              <div v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
             </div>
           </div>
 
           <!-- Field Jobs Assigned Today -->
-          <div
-            class="bg-white border rounded-xl shadow-sm p-6"
-          >
-            <h3
-              class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4"
-            >
+          <div class="bg-white border rounded-xl shadow-sm p-6">
+            <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4">
               Današnje dodelitve terenskih
             </h3>
-            <ul
-              v-if="fieldJobsAssignedToday"
-              class="divide-y divide-gray-100 text-sm"
-            >
+            <ul v-if="fieldJobsAssignedToday" class="divide-y divide-gray-100 text-sm">
               <li
                 v-for="f in fieldJobsAssignedToday"
                 :key="f.id"
@@ -567,10 +507,7 @@ function safeCaseHref(uuid, segment = null) {
                       <span v-else class="text-gray-700">{{
                         f.contract.reference || f.contract.uuid?.slice(0, 8)
                       }}</span>
-                      <span
-                        v-if="f.contract.person_full_name"
-                        class="text-gray-500"
-                      >
+                      <span v-if="f.contract.person_full_name" class="text-gray-500">
                         – {{ f.contract.person_full_name }}
                       </span>
                     </template>
@@ -595,27 +532,16 @@ function safeCaseHref(uuid, segment = null) {
               </li>
             </ul>
             <div v-else class="space-y-2 animate-pulse">
-              <div
-                v-for="n in 5"
-                :key="n"
-                class="h-5 bg-gray-100 rounded"
-              />
+              <div v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
             </div>
           </div>
 
           <!-- Imports In Progress -->
-          <div
-            class="bg-white border rounded-xl shadow-sm p-6"
-          >
-            <h3
-              class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4"
-            >
+          <div class="bg-white border rounded-xl shadow-sm p-6">
+            <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4">
               Uvozi v teku
             </h3>
-            <ul
-              v-if="importsInProgress"
-              class="divide-y divide-gray-100 text-sm"
-            >
+            <ul v-if="importsInProgress" class="divide-y divide-gray-100 text-sm">
               <li v-for="im in importsInProgress" :key="im.id" class="py-2 space-y-1">
                 <div class="flex items-center justify-between">
                   <p class="font-medium text-gray-700 truncate">
@@ -626,9 +552,7 @@ function safeCaseHref(uuid, segment = null) {
                     >{{ im.status }}</span
                   >
                 </div>
-                <div
-                  class="w-full h-2 bg-gray-100 rounded overflow-hidden"
-                >
+                <div class="w-full h-2 bg-gray-100 rounded overflow-hidden">
                   <div
                     class="h-full bg-indigo-500"
                     :style="{ width: (im.progress_pct || 0) + '%' }"
@@ -647,27 +571,16 @@ function safeCaseHref(uuid, segment = null) {
               </li>
             </ul>
             <div v-else class="space-y-2 animate-pulse">
-              <div
-                v-for="n in 4"
-                :key="n"
-                class="h-5 bg-gray-100 rounded"
-              />
+              <div v-for="n in 4" :key="n" class="h-5 bg-gray-100 rounded" />
             </div>
           </div>
 
           <!-- Active Document Templates -->
-          <div
-            class="bg-white border rounded-xl shadow-sm p-6"
-          >
-            <h3
-              class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4"
-            >
+          <div class="bg-white border rounded-xl shadow-sm p-6">
+            <h3 class="text-sm font-semibold tracking-wide text-gray-700 uppercase mb-4">
               Aktivne predloge dokumentov
             </h3>
-            <ul
-              v-if="activeTemplates"
-              class="divide-y divide-gray-100 text-sm"
-            >
+            <ul v-if="activeTemplates" class="divide-y divide-gray-100 text-sm">
               <li
                 v-for="t in activeTemplates"
                 :key="t.id"
@@ -695,11 +608,7 @@ function safeCaseHref(uuid, segment = null) {
               </li>
             </ul>
             <div v-else class="space-y-2 animate-pulse">
-              <div
-                v-for="n in 5"
-                :key="n"
-                class="h-5 bg-gray-100 rounded"
-              />
+              <div v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
             </div>
           </div>
 
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
new file mode 100644
index 0000000..5dbb7dc
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -0,0 +1,87 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import SimpleKpiCard from "./Partials/SimpleKpiCard.vue";
+import ActivityFeed from "./Partials/ActivityFeed.vue";
+import SmsOverview from "./Partials/SmsOverview.vue";
+import CompletedFieldJobsTrend from "./Partials/CompletedFieldJobsTrend.vue";
+import FieldJobsAssignedToday from "./Partials/FieldJobsAssignedToday.vue";
+import { Users, FileText, Banknote, CalendarCheck } from "lucide-vue-next";
+
+const props = defineProps({
+  kpis: Object,
+  activities: Array,
+  trends: Object,
+  systemHealth: Object,
+  staleCases: Array,
+  fieldJobsAssignedToday: Array,
+  importsInProgress: Array,
+  activeTemplates: Array,
+  smsStats: Array,
+});
+
+// Format balance as currency
+const formatBalance = (amount) => {
+  if (amount == null) return "—";
+  return new Intl.NumberFormat("sl-SI", {
+    style: "currency",
+    currency: "EUR",
+    minimumFractionDigits: 2,
+  }).format(amount);
+};
+</script>
+
+<template>
+  <AppLayout title="Nadzorna plošča">
+    <template #header> </template>
+
+    <div class="max-w-7xl mx-auto space-y-10 py-6">
+      <!-- KPI Cards Grid -->
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <SimpleKpiCard
+          label="Aktivni stranke"
+          :value="kpis?.active_clients"
+          :icon="Users"
+        />
+        <SimpleKpiCard
+          label="Aktivne pogodbe"
+          :value="kpis?.active_contracts"
+          :icon="FileText"
+          icon-bg="bg-chart-2/10"
+          icon-color="text-chart-2"
+        />
+        <SimpleKpiCard
+          label="Skupno stanje"
+          :value="formatBalance(kpis?.total_balance)"
+          :icon="Banknote"
+          icon-bg="bg-chart-3/10"
+          icon-color="text-chart-3"
+        />
+        <SimpleKpiCard
+          label="Aktivne obljube"
+          :value="kpis?.active_promises"
+          :icon="CalendarCheck"
+          icon-bg="bg-chart-4/10"
+          icon-color="text-chart-4"
+        />
+      </div>
+
+      <div class="grid lg:grid-cols-3 gap-8">
+        <!-- Activity Feed -->
+        <div class="lg:col-span-1 space-y-4">
+          <ActivityFeed :activities="activities" :systemHealth="systemHealth" />
+          <!-- Field Jobs Assigned Today -->
+          <FieldJobsAssignedToday :fieldJobsAssignedToday="fieldJobsAssignedToday" />
+        </div>
+
+        <!-- Right side panels -->
+        <div class="lg:col-span-2 space-y-8">
+          <!-- SMS Overview -->
+          <SmsOverview :smsStats="smsStats" />
+
+          <!-- Completed Field Jobs Trend (7 dni) -->
+          <CompletedFieldJobsTrend :trends="trends" />
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
diff --git a/resources/js/Pages/Dashboard/Partials/ActivityFeed.vue b/resources/js/Pages/Dashboard/Partials/ActivityFeed.vue
new file mode 100644
index 0000000..c14ff4e
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Partials/ActivityFeed.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
+import Badge from "@/Components/ui/badge/Badge.vue";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/Components/ui/item";
+import { BadgeCheckIcon, ChevronRightIcon, Radar, Radio, RssIcon } from "lucide-vue-next";
+import { ScrollArea } from "@/Components/ui/scroll-area";
+
+const props = defineProps({
+  activities: Array,
+  systemHealth: Object,
+});
+
+function buildRelated(a) {
+  const links = [];
+  if (a.client_case_uuid || a.client_case_id) {
+    const caseParam = a.client_case_uuid || a.client_case_id;
+    try {
+      const href = String(route("clientCase.show", { client_case: caseParam }));
+      links.push({
+        type: "client_case",
+        label: "Primer",
+        href,
+      });
+    } catch (e) {
+      links.push({
+        type: "client_case",
+        label: "Primer",
+        href: `/client-cases/${caseParam}`,
+      });
+    }
+  }
+  return links;
+}
+
+onMounted(() => {
+  console.log((props.activities || []).map((a) => ({ ...a, links: buildRelated(a) })));
+});
+
+const activityItems = computed(() =>
+  (props.activities || []).map((a) => ({ ...a, links: buildRelated(a) }))
+);
+</script>
+
+<template>
+  <AppCard
+    title=""
+    padding="none"
+    class="p-0! gap-2"
+    header-class="py-3! px-4 border-b text-muted-foreground gap-0"
+    body-class="flex flex-col gap-4"
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <Radio size="20" />
+        <CardTitle class="uppercase"> Aktivnost </CardTitle>
+      </div>
+    </template>
+    <ScrollArea class="h-96 w-full">
+      <div class="flex flex-col gap-1 px-1" v-if="activities">
+        <Item v-for="a in activityItems" :key="a.id" variant="outline" size="sm" as-child>
+          <a :href="a.links[0].href ?? ''">
+            <ItemMedia>
+              <span class="w-2 h-2 mt-2 rounded-full bg-primary" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>{{ a.note || "Dogodek" }}</ItemTitle>
+              <ItemDescription>
+                {{ new Date(a.created_at).toLocaleString() }}
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <ChevronRightIcon class="size-4" />
+            </ItemActions>
+          </a>
+        </Item>
+        <div v-if="!activities?.length" class="py-4 text-xs text-gray-500 text-center">
+          Ni zabeleženih aktivnosti.
+        </div>
+      </div>
+      <ul v-else class="animate-pulse space-y-2">
+        <li v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
+      </ul>
+    </ScrollArea>
+
+    <div class="flex justify-between items-center text-[11px] p-2">
+      <Link
+        :href="route('dashboard')"
+        class="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+        >Več kmalu <FontAwesomeIcon :icon="faArrowUpRightFromSquare" class="w-3 h-3"
+      /></Link>
+      <span v-if="systemHealth" class="text-gray-400"
+        >Posodobljeno {{ new Date(systemHealth.generated_at).toLocaleTimeString() }}</span
+      >
+    </div>
+  </AppCard>
+</template>
diff --git a/resources/js/Pages/Dashboard/Partials/CompletedFieldJobsTrend.vue b/resources/js/Pages/Dashboard/Partials/CompletedFieldJobsTrend.vue
new file mode 100644
index 0000000..55acfd7
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Partials/CompletedFieldJobsTrend.vue
@@ -0,0 +1,173 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
+import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
+import {
+  ChartAutoLegend,
+  ChartContainer,
+  ChartTooltipContent,
+  ChartCrosshair,
+  provideChartContext,
+  componentToString,
+} from "@/Components/ui/chart";
+import AppChartDisplay from "@/Components/app/ui/charts/AppChartDisplay.vue";
+
+const props = defineProps({
+  trends: Object,
+});
+
+const chartData = computed(() => {
+  if (
+    !props.trends?.labels ||
+    !props.trends?.field_jobs_completed ||
+    !props.trends?.field_jobs
+  ) {
+    return [];
+  }
+
+  return props.trends.labels.map((label, i) => ({
+    date: new Date(label),
+    dateLabel: label,
+    completed: props.trends.field_jobs_completed[i] || 0,
+    assigned: props.trends.field_jobs[i] || 0,
+  }));
+});
+
+const chartConfig = {
+  completed: {
+    label: "Zaključeni",
+    color: "var(--chart-1)",
+  },
+  assigned: {
+    label: "Dodeljeni",
+    color: "var(--chart-2)",
+  },
+};
+
+// Provide chart context at component root so legend (outside ChartContainer) can access it
+provideChartContext(chartConfig);
+
+// (No gradients needed for bar chart)
+
+// Active series keys controlled by auto legend
+const activeKeys = ref(["completed", "assigned"]);
+const activeSeries = computed(() => activeKeys.value);
+const yAccessors = computed(() => activeSeries.value.map((key) => (d) => d[key]));
+
+// Prevent all series from being disabled (Unovis crosshair needs at least one component with x accessor)
+let _lastNonEmpty = [...activeKeys.value];
+watch(activeKeys, (val, oldVal) => {
+  if (val.length === 0) {
+    // revert to previous non-empty selection
+    activeKeys.value = _lastNonEmpty.length ? _lastNonEmpty : oldVal;
+  } else {
+    _lastNonEmpty = [...val];
+  }
+});
+
+// Crosshair template using componentToString to render advanced tooltip component
+const crosshairTemplate = componentToString(chartConfig, ChartTooltipContent, {
+  labelKey: "dateLabel",
+  labelFormatter: (x) => crosshairLabelFormatter(x),
+});
+
+const totalCompleted = computed(() => {
+  return chartData.value.reduce((sum, item) => sum + item.completed, 0);
+});
+
+const totalAssigned = computed(() => {
+  return chartData.value.reduce((sum, item) => sum + item.assigned, 0);
+});
+
+// Formatter for tooltip title (date) and potential item labels
+const crosshairLabelFormatter = (value) => {
+  // Handle Date objects or parsable date strings
+  const date = value instanceof Date ? value : new Date(value);
+  if (isNaN(date)) return value?.toString?.() ?? "";
+  return date.toLocaleDateString("sl-SI", { month: "long", day: "numeric" });
+};
+</script>
+
+<template>
+  <AppChartDisplay name="ChartLine" class="md:col-span-2 lg:col-span-3">
+    <Card class="p-0">
+      <CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
+        <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>Terenska dela - Pregled</CardTitle>
+          <CardDescription>Zadnjih 7 dni</CardDescription>
+        </div>
+        <div class="flex">
+          <div
+            class="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+          >
+            <span class="text-xs text-muted-foreground">Zaključeni</span>
+            <span class="text-lg font-bold leading-none sm:text-3xl">
+              {{ totalCompleted.toLocaleString() }}
+            </span>
+          </div>
+          <div
+            class="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+          >
+            <span class="text-xs text-muted-foreground">Dodeljeni</span>
+            <span class="text-lg font-bold leading-none sm:text-3xl">
+              {{ totalAssigned.toLocaleString() }}
+            </span>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent class="px-2 sm:px-6 sm:pt-6 pb-4">
+        <div v-if="chartData.length" class="w-full aspect-auto h-[250px]">
+          <ChartContainer :config="chartConfig" class="h-full">
+            <VisXYContainer
+              :data="chartData"
+              :height="250"
+              :margin="{ left: 5, right: 5 }"
+            >
+              <VisGroupedBar
+                :x="(d) => d.date"
+                :y="yAccessors"
+                :color="(d, i) => chartConfig[activeSeries[i]].color"
+                :bar-padding="0.3"
+              />
+
+              <VisAxis
+                type="x"
+                :tick-line="false"
+                :grid-line="false"
+                :num-ticks="7"
+                :tick-format="
+                  (d) => {
+                    const date = new Date(d);
+                    return date.toLocaleDateString('sl-SI', {
+                      month: 'short',
+                      day: 'numeric',
+                    });
+                  }
+                "
+              />
+              <VisAxis type="y" :num-ticks="4" :tick-line="false" :grid-line="true" />
+              <ChartCrosshair
+                :index="'date'"
+                :template="crosshairTemplate"
+                :colors="[chartConfig.completed.color, chartConfig.assigned.color]"
+              />
+            </VisXYContainer>
+          </ChartContainer>
+        </div>
+        <div v-else class="h-[250px] animate-pulse bg-gray-100 rounded" />
+      </CardContent>
+      <div class="border-t px-6 py-2 flex justify-center">
+        <ChartAutoLegend
+          v-model:activeKeys="activeKeys"
+          :order="['completed', 'assigned']"
+        />
+      </div>
+    </Card>
+  </AppChartDisplay>
+</template>
diff --git a/resources/js/Pages/Dashboard/Partials/FieldJobsAssignedToday.vue b/resources/js/Pages/Dashboard/Partials/FieldJobsAssignedToday.vue
new file mode 100644
index 0000000..a03e765
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Partials/FieldJobsAssignedToday.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { Link } from "@inertiajs/vue3";
+import { computed } from "vue";
+import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import { ChevronRightIcon, MapIcon, UserRound } from "lucide-vue-next";
+import { ScrollArea } from "@/Components/ui/scroll-area";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/Components/ui/item";
+import { Badge } from "@/Components/ui/badge";
+
+const props = defineProps({
+  fieldJobsAssignedToday: Array,
+});
+
+// Robust time formatter to avoid fixed 02:00:00 (timezone / fallback issues)
+function formatJobTime(ts) {
+  if (!ts) return "";
+  try {
+    const d = new Date(ts);
+    if (isNaN(d.getTime())) return "";
+    const pad = (n) => n.toString().padStart(2, "0");
+    const h = pad(d.getHours());
+    const m = pad(d.getMinutes());
+    const s = d.getSeconds();
+    return s ? `${h}:${m}:${pad(s)}` : `${h}:${m}`;
+  } catch (e) {
+    return "";
+  }
+}
+
+// Safely build a client case href using Ziggy when available, with a plain fallback.
+function safeCaseHref(uuid, segment = null) {
+  if (!uuid) {
+    return "#";
+  }
+  try {
+    const params = { client_case: uuid };
+    if (segment != null) {
+      params.segment = segment;
+    }
+    return String(route("clientCase.show", params));
+  } catch (e) {
+    return segment != null
+      ? `/client-cases/${uuid}?segment=${segment}`
+      : `/client-cases/${uuid}`;
+  }
+}
+</script>
+
+<template>
+  <AppCard
+    title=""
+    padding="none"
+    class="p-0! gap-2"
+    header-class="py-3! px-4 border-b gap-0 text-muted-foreground"
+    body-class="flex flex-col gap-4"
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <MapIcon size="18" />
+        <CardTitle class="text-muted-foreground uppercase"> Današnji teren </CardTitle>
+      </div>
+    </template>
+    <ScrollArea
+      class="h-96 w-full"
+      v-if="fieldJobsAssignedToday && fieldJobsAssignedToday.length > 0"
+    >
+      <div class="flex flex-col gap-1 px-1">
+        <Item
+          v-for="f in fieldJobsAssignedToday"
+          :key="f.id"
+          variant="outline"
+          size="sm"
+          as-child
+        >
+          <a :href="safeCaseHref(f.contract.client_case_uuid, f.contract.segment_id)">
+            <ItemMedia>
+              <span class="w-2 h-2 mt-2 rounded-full bg-primary" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>
+                <span>{{ f.contract.person_full_name }}</span>
+              </ItemTitle>
+              <ItemDescription class="flex gap-1">
+                <Badge>{{ f.contract.reference }}</Badge>
+                <Badge variant="outline">{{ formatJobTime(f.created_at) }}</Badge>
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <ChevronRightIcon class="size-4" />
+            </ItemActions>
+          </a>
+        </Item>
+      </div>
+    </ScrollArea>
+    <div
+      v-if="!fieldJobsAssignedToday?.length"
+      class="py-4 text-xs text-gray-500 text-center"
+    >
+      Ni zabeleženih primerov.
+    </div>
+  </AppCard>
+</template>
diff --git a/resources/js/Pages/Dashboard/Partials/SimpleKpiCard.vue b/resources/js/Pages/Dashboard/Partials/SimpleKpiCard.vue
new file mode 100644
index 0000000..b1d8940
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Partials/SimpleKpiCard.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { Card, CardContent } from "@/Components/ui/card";
+
+const props = defineProps({
+  label: String,
+  value: [String, Number],
+  icon: Object,
+  iconBg: {
+    type: String,
+    default: "bg-primary/10",
+  },
+  iconColor: {
+    type: String,
+    default: "text-primary",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <Card class="hover:border-primary/30 hover:shadow transition">
+    <CardContent class="px-4 py-5 flex items-center gap-4">
+      <span
+        :class="[
+          'inline-flex items-center justify-center h-10 w-10 rounded-md transition',
+          iconBg,
+          iconColor,
+        ]"
+      >
+        <component :is="icon" class="w-5 h-5" />
+      </span>
+      <div class="flex-1 min-w-0">
+        <p class="text-xs text-muted-foreground uppercase tracking-wide truncate">
+          {{ label }}
+        </p>
+        <p
+          v-if="!loading"
+          class="text-2xl font-semibold tracking-tight text-foreground mt-1"
+        >
+          {{ value ?? "—" }}
+        </p>
+        <div v-else class="h-8 w-20 bg-muted animate-pulse rounded mt-1" />
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/resources/js/Pages/Dashboard/Partials/SmsOverview.vue b/resources/js/Pages/Dashboard/Partials/SmsOverview.vue
new file mode 100644
index 0000000..afe706c
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Partials/SmsOverview.vue
@@ -0,0 +1,110 @@
+<script setup>
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/Components/ui/item";
+import {
+  MessageSquare,
+  Send,
+  CheckCircle,
+  XCircle,
+  MessageCircle,
+  Smartphone,
+} from "lucide-vue-next";
+
+const props = defineProps({
+  smsStats: { type: Array, required: false },
+});
+</script>
+
+<template>
+  <AppCard
+    title=""
+    padding="none"
+    class="p-0! gap-2"
+    header-class="py-3! px-4 border-b gap-0 text-muted-foreground"
+    body-class=""
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <Smartphone size="18" />
+        <CardTitle class="uppercase">SMS stanje </CardTitle>
+      </div>
+    </template>
+
+    <div v-if="smsStats?.length">
+      <div v-for="p in smsStats" :key="p.id" class="flex flex-col rounded-lg bg-card">
+        <Item variant="outline" size="lg" class="rounded-t-none border-t-0">
+          <ItemContent class="gap-0">
+            <ItemTitle
+              class="w-full flex flex-row items-center justify-between border-b py-2 px-4"
+            >
+              <div class="flex items-center gap-2">
+                <span class="font-semibold text-base">{{ p.name }}</span>
+                <span
+                  class="px-2 py-0.5 text-xs font-medium rounded-full"
+                  :class="
+                    p.active
+                      ? 'bg-emerald-100 text-emerald-700'
+                      : 'bg-gray-100 text-gray-500'
+                  "
+                >
+                  {{ p.active ? "Aktiven" : "Neaktiven" }}
+                </span>
+              </div>
+              <div class="text-right flex-1">
+                <div class="text-xs text-muted-foreground">Bilanca</div>
+                <div class="text-xl font-bold">{{ p.balance ?? "—" }}</div>
+              </div>
+            </ItemTitle>
+            <!-- Stats grid -->
+            <ItemDescription>
+              <div class="grid grid-cols-4 divide-x">
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Skupaj</span>
+                    <span class="text-xl font-bold">{{ p.today?.total ?? 0 }}</span>
+                  </div>
+                  <MessageSquare class="h-5 w-5 text-gray-500" />
+                </div>
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Poslano</span>
+                    <span class="text-xl font-bold">{{ p.today?.sent ?? 0 }}</span>
+                  </div>
+                  <Send class="h-5 w-5 text-sky-600" />
+                </div>
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Delivered</span>
+                    <span class="text-xl font-bold">{{ p.today?.delivered ?? 0 }}</span>
+                  </div>
+                  <CheckCircle class="h-5 w-5 text-emerald-600" />
+                </div>
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Failed</span>
+                    <span class="text-xl font-bold">{{ p.today?.failed ?? 0 }}</span>
+                  </div>
+                  <XCircle class="h-5 w-5 text-rose-600" />
+                </div>
+              </div>
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+      </div>
+    </div>
+    <div v-else class="text-sm text-gray-500 p-4">Ni podatkov o SMS.</div>
+  </AppCard>
+</template>
diff --git a/tests/Feature/ClientContractsPaginationTest.php b/tests/Feature/ClientContractsPaginationTest.php
new file mode 100644
index 0000000..42fec8b
--- /dev/null
+++ b/tests/Feature/ClientContractsPaginationTest.php
@@ -0,0 +1,38 @@
+<?php
+
+use App\Models\Client;
+use App\Models\ClientCase;
+use App\Models\Contract;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+uses(RefreshDatabase::class);
+
+it('supports contracts_page and contracts_per_page parameters', function () {
+    // Create a client with a single client case and multiple contracts
+    $client = Client::factory()->create();
+    $case = ClientCase::factory()->create(['client_id' => $client->id]);
+
+    // Create 5 contracts tied to the case with deterministic references
+    foreach (range(1, 5) as $i) {
+        Contract::factory()->create([
+            'client_case_id' => $case->id,
+            'reference' => 'REF-'.$i,
+        ]);
+    }
+
+    // Request page 2 with page size 2 using custom param names
+    $response = $this->get(route('client.contracts', ['client' => $client->uuid, 'contracts_page' => 2, 'contracts_per_page' => 2]));
+    $response->assertStatus(200);
+
+    // Extract props
+    $props = $response->inertia()->toArray()['props'];
+    expect($props['contracts']['per_page'])->toBe(2)
+        ->and($props['contracts']['current_page'])->toBe(2)
+        ->and($props['contracts']['data'])->toHaveCount(2);
+
+    // Ensure links use the custom page parameter name
+    $anyLinkWithCustomParam = collect($props['contracts']['links'])->contains(function ($link) {
+        return str_contains($link['url'] ?? '', 'contracts_page=');
+    });
+    expect($anyLinkWithCustomParam)->toBeTrue();
+});