feat: Integrate new dashboard design and components, remove old dashboard routes, and update dependencies.

.gemini/hooks/telegram-notify.ts

@@ -1,62 +1,65 @@
 #!/usr/bin/env bun
-import { readFileSync } from "fs";
+import { readFileSync } from "node:fs";
 
 // Fungsi untuk mencari string terpanjang dalam objek (biasanya balasan AI)
 function findLongestString(obj: any): string {
-    let longest = "";
+	let longest = "";
-    const search = (item: any) => {
+	const search = (item: any) => {
-        if (typeof item === "string") {
+		if (typeof item === "string") {
-            if (item.length > longest.length) longest = item;
+			if (item.length > longest.length) longest = item;
-        } else if (Array.isArray(item)) {
+		} else if (Array.isArray(item)) {
-            item.forEach(search);
+			item.forEach(search);
-        } else if (item && typeof item === "object") {
+		} else if (item && typeof item === "object") {
-            Object.values(item).forEach(search);
+			Object.values(item).forEach(search);
-        }
+		}
-    };
+	};
-    search(obj);
+	search(obj);
-    return longest;
+	return longest;
 }
 
 async function run() {
-    try {
+	try {
-        const inputRaw = readFileSync(0, "utf-8");
+		const inputRaw = readFileSync(0, "utf-8");
-        if (!inputRaw) return;
+		if (!inputRaw) return;
-        const input = JSON.parse(inputRaw);
+		const input = JSON.parse(inputRaw);
 
-        // DEBUG: Lihat struktur asli di console terminal (stderr)
+		// DEBUG: Lihat struktur asli di console terminal (stderr)
-        console.error("DEBUG KEYS:", Object.keys(input));
+		console.error("DEBUG KEYS:", Object.keys(input));
 
-        const BOT_TOKEN = process.env.BOT_TOKEN;
+		const BOT_TOKEN = process.env.BOT_TOKEN;
-        const CHAT_ID = process.env.CHAT_ID;
+		const CHAT_ID = process.env.CHAT_ID;
 
-        const sessionId = input.session_id || "unknown";
+		const sessionId = input.session_id || "unknown";
 
-        // Cari teks secara otomatis di seluruh objek JSON
+		// Cari teks secara otomatis di seluruh objek JSON
-        let finalText = findLongestString(input.response || input);
+		let finalText = findLongestString(input.response || input);
 
-        if (!finalText || finalText.length < 5) {
+		if (!finalText || finalText.length < 5) {
-            finalText = "Teks masih gagal diekstraksi. Struktur: " + Object.keys(input).join(", ");
+			finalText =
-        }
+				"Teks masih gagal diekstraksi. Struktur: " +
+				Object.keys(input).join(", ");
+		}
 
-        const message = `✅ *Gemini Task Selesai*\n\n` +
+		const message =
-                        `🆔 Session: \`${sessionId}\` \n\n` +
+			`✅ *Gemini Task Selesai*\n\n` +
-                        `🧠 Output:\n${finalText.substring(0, 3500)}`;
+			`🆔 Session: \`${sessionId}\` \n\n` +
+			`🧠 Output:\n${finalText.substring(0, 3500)}`;
 
-        await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
+		await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
-            method: "POST",
+			method: "POST",
-            headers: { "Content-Type": "application/json" },
+			headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
+			body: JSON.stringify({
-                chat_id: CHAT_ID,
+				chat_id: CHAT_ID,
-                text: message,
+				text: message,
-                parse_mode: "Markdown",
+				parse_mode: "Markdown",
-            }),
+			}),
-        });
+		});
 
-        process.stdout.write(JSON.stringify({ status: "continue" }));
+		process.stdout.write(JSON.stringify({ status: "continue" }));
-    } catch (err) {
+	} catch (err) {
-        console.error("Hook Error:", err);
+		console.error("Hook Error:", err);
-        process.stdout.write(JSON.stringify({ status: "continue" }));
+		process.stdout.write(JSON.stringify({ status: "continue" }));
-    }
+	}
 }
 
 run();

.gemini/settings.json

@@ -1,17 +1,17 @@
 {
-  "hooks": {
+	"hooks": {
-    "AfterAgent": [
+		"AfterAgent": [
-      {
+			{
-        "matcher": "*",
+				"matcher": "*",
-        "hooks": [
+				"hooks": [
-          {
+					{
-            "name": "telegram-notify",
+						"name": "telegram-notify",
-            "type": "command",
+						"type": "command",
-            "command": "bun $GEMINI_PROJECT_DIR/.gemini/hooks/telegram-notify.ts",
+						"command": "bun $GEMINI_PROJECT_DIR/.gemini/hooks/telegram-notify.ts",
-            "timeout": 10000
+						"timeout": 10000
-          }
+					}
-        ]
+				]
-      }
+			}
-    ]
+		]
-  }
+	}
 }

DASHBOARD_DESIGN.md

@@ -0,0 +1,270 @@
+# Dashboard Design Specification
+
+Dokumen ini mendeskripsikan desain dashboard berdasarkan **Screenshot 2026-02-02 at 14.12.36.png**. Tujuannya sebagai acuan implementasi UI untuk `src/routes/noc/dashboard/route.tsx`.
+
+---
+
+## 1. Gambaran Umum
+
+Dashboard merepresentasikan **Sistem Informasi Desa (DESA+)** dengan fokus pada:
+
+* Monitoring layanan administrasi desa
+* Statistik surat & pengaduan
+* Tingkat kepuasan warga
+* Aktivitas divisi & agenda desa
+
+Gaya visual: **modern, clean, administratif**, dengan nuansa **biru pemerintah** dan kartu (card-based layout).
+
+---
+
+## 2. Struktur Layout
+
+### 2.1 Layout Global
+
+```
++--------------------------------------------------+
+| Topbar / Header                                 |
++-----------+--------------------------------------+
+| Sidebar   | Main Content (Dashboard)             |
+|           |  - KPI Cards                         |
+|           |  - Charts                            |
+|           |  - Activity & Calendar               |
++-----------+--------------------------------------+
+```
+
+* **Sidebar**: fixed / sticky di kiri
+* **Header**: fixed di atas konten utama
+* **Main Content**: scrollable
+
+---
+
+## 3. Header (Topbar)
+
+### Komponen
+
+* Nama desa: `Desa Darmasaba`
+* User info:
+
+  * Nama: `I. B. Surya Prabhawa M.`
+  * Role: `Kepala Desa`
+* Ikon:
+
+  * Notification (badge angka)
+  * Theme / setting (opsional)
+  * Avatar user (circle)
+
+### Style
+
+* Background: **Navy / Dark Blue**
+* Text: putih
+* Height: ±64px
+* Shadow tipis ke bawah
+
+---
+
+## 4. Sidebar Navigation
+
+### Elemen
+
+* Logo **DESA+** di atas
+* Search input: `cari apa saja`
+* Menu navigasi:
+
+  * Beranda (active)
+  * Kinerja Divisi
+  * Pengaduan & Layanan Publik
+  * Jenna Analytic
+  * Demografi & Kependudukan
+  * Keuangan & Anggaran
+  * Bumdes & UMKM Desa
+  * Sosial
+  * Keamanan
+  * Bantuan
+  * Pengaturan
+
+### Style
+
+* Background: putih
+* Active state:
+
+  * Background: biru muda
+  * Text: biru tua
+* Icon (opsional, outline style)
+* Spacing antar menu: ±12–16px
+
+---
+
+## 5. KPI / Summary Cards (Row 1)
+
+### Cards
+
+1. **Surat Minggu Ini**
+
+   * Value: `99`
+   * Delta: `+12%`
+2. **Pengaduan Aktif**
+
+   * Value: `28`
+   * Sub: `14 baru, 14 diproses`
+3. **Layanan Selesai**
+
+   * Value: `156`
+   * Sub: `bulan ini`
+   * Delta: `+8%`
+4. **Kepuasan Warga**
+
+   * Value: `87.2%`
+   * Circular indicator
+
+### Style
+
+* Card background: putih
+* Border radius: 12–16px
+* Shadow: soft
+* Icon di kanan atas card
+* Grid: 4 kolom (desktop)
+
+---
+
+## 6. Statistik Pengajuan Surat (Bar Chart)
+
+### Deskripsi
+
+* Judul: `Statistik Pengajuan Surat`
+* Subjudul: `Trend pengajuan surat 6 bulan terakhir`
+* X-axis: Jan – Jun
+* Y-axis: jumlah surat
+
+### Style
+
+* Bar color: navy / dark blue
+* Background card: putih
+* Axis minimal & clean
+
+### Data Expectation
+
+```ts
+{
+  month: string;
+  total: number;
+}
+```
+
+---
+
+## 7. Tingkat Kepuasan (Donut Chart)
+
+### Kategori
+
+* Sangat Puas (hijau)
+* Puas (biru)
+* Cukup (kuning)
+* Kurang (merah)
+
+### Style
+
+* Donut chart
+* Legend di bawah
+* Persentase di tengah (opsional)
+
+---
+
+## 8. Divisi Teraktif (Progress List)
+
+### Item
+
+* Kesejahteraan – 37 kegiatan
+* Pemerintahan – 26 kegiatan
+* Keuangan – 17 kegiatan
+* Sekretaris Desa – 15 kegiatan
+
+### Style
+
+* Horizontal progress bar
+* Warna bar: navy
+* Background bar: abu-abu terang
+
+---
+
+## 9. Kalender & Kegiatan Mendatang
+
+### Item
+
+* 1 Oktober 2025 – Hari Kesaktian Pancasila
+* 15 Oktober 2025 – Davest
+* 19 Oktober 2025 – Rapat Koordinasi
+
+### Style
+
+* Card list
+* Date kecil, title tebal
+
+---
+
+## 10. Warna & Tema
+
+### Color Palette (Approx)
+
+* Primary: `#1E3A5F` (navy)
+* Secondary: `#3B82F6`
+* Success: `#22C55E`
+* Warning: `#FACC15`
+* Danger: `#EF4444`
+* Background: `#F5F8FB`
+
+---
+
+## 11. Typography
+
+* Font utama: **Inter / Poppins / system-ui**
+* Heading: semi-bold
+* Body: regular
+* Angka KPI: bold, besar
+
+---
+
+## 12. Responsiveness
+
+* Desktop (>=1280px): layout penuh
+* Tablet:
+
+  * Sidebar collapsible
+  * KPI cards jadi 2 kolom
+* Mobile:
+
+  * Sidebar drawer
+  * KPI cards 1 kolom
+  * Charts stack vertical
+
+---
+
+## 13. Interaksi & Behavior
+
+* Sidebar menu: active state
+* Hover card: shadow naik
+* Chart: tooltip on hover
+* Notification: clickable
+* Data: async (API driven)
+
+---
+
+## 14. Catatan Implementasi
+
+* Cocok untuk:
+
+  * React + Vite
+  * Mantine / Shadcn / MUI
+  * ChartJS / Recharts / ECharts
+* Gunakan layout berbasis **CSS Grid / Flexbox**
+
+---
+
+## 15. Scope Selanjutnya
+
+* Dark mode
+* Export laporan (PDF/Excel)
+* Filter tanggal & divisi
+
+---
+
+> Dokumen ini menjadi acuan desain UI. Perubahan visual harus tetap konsisten dengan struktur ini.

GEMINI.md

@@ -1,11 +1,11 @@
 # GEMINI.md
 
-This project is **makuro-base-template**, a high-performance, full-stack React development template leveraging the Bun runtime. It is designed for a seamless developer experience with a unified "single-port" architecture and a Contract-First API design.
+This project is **darmasaba-dashboard-noc**, a high-performance, full-stack React development template leveraging the Bun runtime. It is designed for a seamless developer experience with a unified "single-port" architecture and a Contract-First API design.
 
 ## Project Overview
 
 *   **Runtime**: [Bun](https://bun.sh/)
-*   **Architecture**: "Single Port" (default: 3000). [ElysiaJS](https://elysiajs.com/) serves as the main HTTP server, integrating [Vite](https://vitejs.dev/) in **middleware mode** during development to provide HMR and React Dev Inspector support.
+*   **Architecture**: "Single Port" (default: 3000). [ElysiaJS](https://elysiajs.com/) serves as the main HTTP server. During development, it integrates [Vite](https://vitejs.dev/) in **middleware mode** for HMR and React Dev Inspector support. In production, `@elysiajs/static` is used to efficiently serve pre-built frontend assets.
 *   **API Design**: **Contract-First (OpenAPI)**. The frontend uses `openapi-fetch` with types generated from the backend's OpenAPI schema, ensuring a decoupled but type-safe connection.
 *   **Mobile Readiness**: **PWA (Progressive Web App)** & **TWA (Trusted Web Activity)**. Built-in support for offline caching and Android app packaging.
 *   **Frontend**: React 19 with [TanStack React Router](https://tanstack.com/router/latest) for type-safe, file-based routing.
@@ -60,7 +60,7 @@ The project uses two main categories for testing, consolidated in the `__tests__
 *   **Manifest**: Metadata is located in `src/manifest.json`.
 *   **Service Worker**: Offline logic is in `src/sw.js`. It uses a "Cache First" strategy.
 *   **TWA Verification**: The Android ownership file is at `src/.well-known/assetlinks.json`.
-*   **Server Logic**: Elysia is configured to remove `Vary: *` headers for these static assets to ensure Cache Storage API compatibility.
+*   **Server Logic**: In production, `@elysiajs/static` handles serving static assets, including PWA/TWA files, ensuring proper caching headers.
 
 ### Backend/API
 *   **Prefix**: All backend API routes are prefixed with `/api`.

README.md

@@ -1,11 +1,11 @@
-# Makuro Base Template 🚀
+# Darmasaba Dashboard Noc 🚀
 
 [![Bun](https://img.shields.io/badge/Bun-%23000000.svg?style=for-the-badge&logo=bun&logoColor=white)](https://bun.sh/)
 [![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://react.dev/)
 [![Mantine](https://img.shields.io/badge/Mantine-blue?style=for-the-badge&logo=mantine&logoColor=white)](https://mantine.dev/)
 [![Biome](https://img.shields.io/badge/Biome-60a5fa?style=for-the-badge&logo=biome&logoColor=white)](https://biomejs.dev/)
 
-**Makuro Base Template** is a high-performance, full-stack React development template leveraging the **Bun** runtime. It offers a unique "Single Port" architecture, combining a Bun/Elysia backend with a React frontend for an incredibly smooth developer experience.
+**Darmasaba Dashboard Noc** is a high-performance, full-stack React development template leveraging the **Bun** runtime. It offers a unique "Single Port" architecture, combining a Bun/Elysia backend with a React frontend for an incredibly smooth developer experience.
 
 ## ✨ Key Features
 

__tests__/api/features.test.ts

@@ -10,7 +10,7 @@ describe("Feature Utilities", () => {
 
 		it("should return value from process.env if available", () => {
 			// Mock process.env
-			const originalEnv = { ...process.env };
+			const _originalEnv = { ...process.env };
 			process.env.TEST_ENV_KEY = "test-value";
 
 			const val = getEnv("TEST_ENV_KEY");

bun.lock

@@ -47,15 +47,28 @@
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-router": "^1.158.1",
         "better-auth": "^1.4.18",
+        "class-variance-authority": "^0.7.1",
+        "cmdk": "^1.0.1",
         "dayjs": "^1.11.19",
         "elysia": "^1.4.22",
+        "embla-carousel-react": "^8.1.1",
+        "input-otp": "^1.2.1",
+        "lucide-react": "^0.563.0",
+        "next-themes": "^0.4.6",
         "openapi-fetch": "^0.15.0",
         "pino": "^10.3.0",
         "pino-pretty": "^13.1.3",
         "react": "^19",
+        "react-day-picker": "^8.10.1",
         "react-dom": "^19",
-        "tailwindcss": "^4.1.18",
+        "react-hook-form": "^7.52.1",
+        "react-resizable-panels": "^2.0.22",
+        "recharts": "^3.7.0",
+        "sonner": "^1.5.0",
+        "tailwind-merge": "^2.4.0",
+        "ulid": "^3.0.2",
         "valtio": "^2.3.0",
+        "vaul": "^0.9.1",
       },
       "devDependencies": {
         "@babel/core": "^7.29.0",
@@ -63,12 +76,14 @@
         "@biomejs/biome": "2.3.14",
         "@playwright/test": "^1.58.2",
         "@react-dev-inspector/vite-plugin": "^2.0.1",
+        "@tailwindcss/postcss": "^4.1.18",
         "@tanstack/react-router-devtools": "^1.158.1",
         "@tanstack/router-vite-plugin": "^1.158.1",
         "@types/bun": "latest",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@vitejs/plugin-react": "^5.1.3",
+        "autoprefixer": "^10.4.24",
         "openapi-typescript": "^7.10.1",
         "postcss": "^8.5.6",
         "postcss-preset-mantine": "^1.18.0",
@@ -82,6 +97,8 @@
   "packages": {
     "@acemir/cssom": ["@acemir/cssom@0.9.31", "", {}, "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA=="],
 
+    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
+
     "@asamuzakjp/css-color": ["@asamuzakjp/css-color@4.1.2", "", { "dependencies": { "@csstools/css-calc": "^3.0.0", "@csstools/css-color-parser": "^4.0.1", "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0", "lru-cache": "^11.2.5" } }, "sha512-NfBUvBaYgKIuq6E/RBLY1m0IohzNHAYyaJGuTK79Z23uNwmz2jl1mPsC5ZxCCxylinKhT1Amn5oNTlx1wN8cQg=="],
 
     "@asamuzakjp/dom-selector": ["@asamuzakjp/dom-selector@6.7.8", "", { "dependencies": { "@asamuzakjp/nwsapi": "^2.3.9", "bidi-js": "^1.0.3", "css-tree": "^3.1.0", "is-potential-custom-element-name": "^1.0.1", "lru-cache": "^11.2.5" } }, "sha512-stisC1nULNc9oH5lakAj8MH88ZxeGxzyWNDfbdCxvJSJIvDsHNZqYvscGTgy/ysgXWLJPt6K/4t0/GjvtKcFJQ=="],
@@ -468,6 +485,8 @@
 
     "@redocly/openapi-core": ["@redocly/openapi-core@1.34.6", "", { "dependencies": { "@redocly/ajv": "^8.11.2", "@redocly/config": "^0.22.0", "colorette": "^1.2.0", "https-proxy-agent": "^7.0.5", "js-levenshtein": "^1.1.6", "js-yaml": "^4.1.0", "minimatch": "^5.0.1", "pluralize": "^8.0.0", "yaml-ast-parser": "0.0.43" } }, "sha512-2+O+riuIUgVSuLl3Lyh5AplWZyVMNuG2F98/o6NrutKJfW4/GTZdPpZlIphS0HGgcOHgmWcCSHj+dWFlZaGSHw=="],
 
+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
+
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.2", "", {}, "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw=="],
 
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.57.1", "", { "os": "android", "cpu": "arm" }, "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg=="],
@@ -530,6 +549,8 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
 
+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
+
     "@tabler/icons": ["@tabler/icons@3.36.1", "", {}, "sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw=="],
 
     "@tabler/icons-react": ["@tabler/icons-react@3.36.1", "", { "dependencies": { "@tabler/icons": "" }, "peerDependencies": { "react": ">= 16" } }, "sha512-/8nOXeNeMoze9xY/QyEKG65wuvRhkT3q9aytaur6Gj8bYU2A98YVJyLc9MRmc5nVvpy+bRlrrwK/Ykr8WGyUWg=="],
@@ -562,6 +583,8 @@
 
     "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.18", "", { "os": "win32", "cpu": "x64" }, "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q=="],
 
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.18", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "postcss": "^8.4.41", "tailwindcss": "4.1.18" } }, "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g=="],
+
     "@tailwindcss/vite": ["@tailwindcss/vite@4.1.18", "", { "dependencies": { "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "tailwindcss": "4.1.18" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA=="],
 
     "@tanstack/history": ["@tanstack/history@1.154.14", "", {}, "sha512-xyIfof8eHBuub1CkBnbKNKQXeRZC4dClhmzePHVOEel4G7lk/dW+TQ16da7CFdeNLv6u6Owf5VoBQxoo6DFTSA=="],
@@ -604,6 +627,24 @@
 
     "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
 
+    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
+
+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
+
+    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
+
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
+
+    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
+
+    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
+
+    "@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],
+
+    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
+
+    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
+
     "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],
 
     "@types/eslint": ["@types/eslint@9.6.1", "", { "dependencies": { "@types/estree": "*", "@types/json-schema": "*" } }, "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag=="],
@@ -626,6 +667,8 @@
 
     "@types/react-reconciler": ["@types/react-reconciler@0.33.0", "", { "peerDependencies": { "@types/react": "*" } }, "sha512-HZOXsKT0tGI9LlUw2LuedXsVeB88wFa536vVL0M6vE8zN63nI+sSr1ByxmPToP5K5bukaVscyeCJcF9guVNJ1g=="],
 
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
+
     "@unhead/schema": ["@unhead/schema@1.11.20", "", { "dependencies": { "hookable": "^5.5.3", "zhead": "^2.2.4" } }, "sha512-0zWykKAaJdm+/Y7yi/Yds20PrUK7XabLe9c3IRcjnwYmSWY6z0Cr19VIs3ozCj8P+GhR+/TI2mwtGlueCEYouA=="],
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@5.1.3", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.2", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-NVUnA6gQCl8jfoYqKqQU5Clv0aPw14KkZYCsX6T9Lfu9slI0LOU10OTwFHS/WmptsMMpshNd/1tuWsHQ2Uk+cg=="],
@@ -718,6 +761,8 @@
 
     "atomic-sleep": ["atomic-sleep@1.0.0", "", {}, "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ=="],
 
+    "autoprefixer": ["autoprefixer@10.4.24", "", { "dependencies": { "browserslist": "^4.28.1", "caniuse-lite": "^1.0.30001766", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw=="],
+
     "babel-dead-code-elimination": ["babel-dead-code-elimination@1.0.12", "", { "dependencies": { "@babel/core": "^7.23.7", "@babel/parser": "^7.23.6", "@babel/traverse": "^7.23.7", "@babel/types": "^7.23.6" } }, "sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig=="],
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
@@ -778,8 +823,12 @@
 
     "citty": ["citty@0.1.6", "", { "dependencies": { "consola": "^3.2.3" } }, "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ=="],
 
+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
+
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "cmdk": ["cmdk@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg=="],
+
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
@@ -812,8 +861,32 @@
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
+
+    "d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
+
+    "d3-scale": ["d3-scale@4.0.2", "", { "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" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
+
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
+
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
+
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
     "data-urls": ["data-urls@7.0.0", "", { "dependencies": { "whatwg-mimetype": "^5.0.0", "whatwg-url": "^16.0.0" } }, "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA=="],
 
+    "date-fns": ["date-fns@3.6.0", "", {}, "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="],
+
     "dateformat": ["dateformat@4.6.3", "", {}, "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA=="],
 
     "dayjs": ["dayjs@1.11.19", "", {}, "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="],
@@ -822,6 +895,8 @@
 
     "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
 
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
 
     "deep-extend": ["deep-extend@0.6.0", "", {}, "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="],
@@ -862,6 +937,12 @@
 
     "elysia": ["elysia@1.4.22", "", { "dependencies": { "cookie": "^1.1.1", "exact-mirror": "^0.2.6", "fast-decode-uri-component": "^1.0.1", "memoirist": "^0.4.0" }, "peerDependencies": { "@sinclair/typebox": ">= 0.34.0 < 1", "@types/bun": ">= 1.2.0", "file-type": ">= 20.0.0", "openapi-types": ">= 12.0.0", "typescript": ">= 5.0.0" }, "optionalPeers": ["@types/bun", "typescript"] }, "sha512-Q90VCb1RVFxnFaRV0FDoSylESQQLWgLHFmWciQJdX9h3b2cSasji9KWEUvaJuy/L9ciAGg4RAhUVfsXHg5K2RQ=="],
 
+    "embla-carousel": ["embla-carousel@8.6.0", "", {}, "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="],
+
+    "embla-carousel-react": ["embla-carousel-react@8.6.0", "", { "dependencies": { "embla-carousel": "8.6.0", "embla-carousel-reactive-utils": "8.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA=="],
+
+    "embla-carousel-reactive-utils": ["embla-carousel-reactive-utils@8.6.0", "", { "peerDependencies": { "embla-carousel": "8.6.0" } }, "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A=="],
+
     "empathic": ["empathic@2.0.0", "", {}, "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA=="],
 
     "end-of-stream": ["end-of-stream@1.4.5", "", { "dependencies": { "once": "^1.4.0" } }, "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg=="],
@@ -874,6 +955,8 @@
 
     "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
 
+    "es-toolkit": ["es-toolkit@1.44.0", "", {}, "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg=="],
+
     "esbuild": ["esbuild@0.27.3", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.3", "@esbuild/android-arm": "0.27.3", "@esbuild/android-arm64": "0.27.3", "@esbuild/android-x64": "0.27.3", "@esbuild/darwin-arm64": "0.27.3", "@esbuild/darwin-x64": "0.27.3", "@esbuild/freebsd-arm64": "0.27.3", "@esbuild/freebsd-x64": "0.27.3", "@esbuild/linux-arm": "0.27.3", "@esbuild/linux-arm64": "0.27.3", "@esbuild/linux-ia32": "0.27.3", "@esbuild/linux-loong64": "0.27.3", "@esbuild/linux-mips64el": "0.27.3", "@esbuild/linux-ppc64": "0.27.3", "@esbuild/linux-riscv64": "0.27.3", "@esbuild/linux-s390x": "0.27.3", "@esbuild/linux-x64": "0.27.3", "@esbuild/netbsd-arm64": "0.27.3", "@esbuild/netbsd-x64": "0.27.3", "@esbuild/openbsd-arm64": "0.27.3", "@esbuild/openbsd-x64": "0.27.3", "@esbuild/openharmony-arm64": "0.27.3", "@esbuild/sunos-x64": "0.27.3", "@esbuild/win32-arm64": "0.27.3", "@esbuild/win32-ia32": "0.27.3", "@esbuild/win32-x64": "0.27.3" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg=="],
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
@@ -890,6 +973,8 @@
 
     "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
+    "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
+
     "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
 
     "exact-mirror": ["exact-mirror@0.2.6", "", { "peerDependencies": { "@sinclair/typebox": "^0.34.15" }, "optionalPeers": ["@sinclair/typebox"] }, "sha512-7s059UIx9/tnOKSySzUk5cPGkoILhTE4p6ncf6uIPaQ+9aRBQzQjc9+q85l51+oZ+P6aBxh084pD0CzBQPcFUA=="],
@@ -936,6 +1021,8 @@
 
     "fork-ts-checker-webpack-plugin": ["fork-ts-checker-webpack-plugin@6.5.3", "", { "dependencies": { "@babel/code-frame": "^7.8.3", "@types/json-schema": "^7.0.5", "chalk": "^4.1.0", "chokidar": "^3.4.2", "cosmiconfig": "^6.0.0", "deepmerge": "^4.2.2", "fs-extra": "^9.0.0", "glob": "^7.1.6", "memfs": "^3.1.2", "minimatch": "^3.0.4", "schema-utils": "2.7.0", "semver": "^7.3.2", "tapable": "^1.0.0" }, "peerDependencies": { "eslint": ">= 6", "typescript": ">= 2.7", "vue-template-compiler": "*", "webpack": ">= 4" }, "optionalPeers": ["eslint", "vue-template-compiler"] }, "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ=="],
 
+    "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
+
     "fs-constants": ["fs-constants@1.0.0", "", {}, "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="],
 
     "fs-extra": ["fs-extra@9.1.0", "", { "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ=="],
@@ -992,7 +1079,7 @@
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
-    "immer": ["immer@9.0.21", "", {}, "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="],
+    "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
 
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
 
@@ -1004,6 +1091,10 @@
 
     "ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
 
+    "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
+
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
+
     "is-arrayish": ["is-arrayish@0.2.1", "", {}, "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="],
 
     "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
@@ -1100,6 +1191,8 @@
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
+    "lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "mdn-data": ["mdn-data@2.12.2", "", {}, "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="],
@@ -1138,6 +1231,8 @@
 
     "neo-async": ["neo-async@2.6.2", "", {}, "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "node-abi": ["node-abi@3.87.0", "", { "dependencies": { "semver": "^7.3.5" } }, "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ=="],
 
     "node-fetch-native": ["node-fetch-native@1.6.7", "", {}, "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="],
@@ -1242,6 +1337,8 @@
 
     "postcss-simple-vars": ["postcss-simple-vars@7.0.1", "", { "peerDependencies": { "postcss": "^8.2.1" } }, "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A=="],
 
+    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
+
     "postgres-array": ["postgres-array@3.0.4", "", {}, "sha512-nAUSGfSDGOaOAEGwqsRY27GPOea7CNipJPOA7lPbdEpx5Kg3qzdP0AaWC5MlhTWV9s4hFX39nomVZ+C4tnGOJQ=="],
 
     "postgres-bytea": ["postgres-bytea@1.0.1", "", {}, "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ=="],
@@ -1280,6 +1377,8 @@
 
     "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
 
+    "react-day-picker": ["react-day-picker@8.10.1", "", { "peerDependencies": { "date-fns": "^2.28.0 || ^3.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA=="],
+
     "react-dev-inspector": ["react-dev-inspector@2.0.1", "", { "dependencies": { "@react-dev-inspector/babel-plugin": "2.0.1", "@react-dev-inspector/middleware": "2.0.1", "@react-dev-inspector/umi3-plugin": "2.0.1", "@react-dev-inspector/umi4-plugin": "2.0.1", "@react-dev-inspector/vite-plugin": "2.0.1", "@types/react-reconciler": ">=0.26.6", "hotkeys-js": "^3.8.1", "picocolors": "1.0.0", "react-dev-utils": "12.0.1" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-b8PAmbwGFrWcxeaX8wYveqO+VTwTXGJaz/yl9RO31LK1zeLKJVlkkbeLExLnJ6IvhXY1TwL8Q4+gR2GKJ8BI6Q=="],
 
     "react-dev-utils": ["react-dev-utils@12.0.1", "", { "dependencies": { "@babel/code-frame": "^7.16.0", "address": "^1.1.2", "browserslist": "^4.18.1", "chalk": "^4.1.2", "cross-spawn": "^7.0.3", "detect-port-alt": "^1.1.6", "escape-string-regexp": "^4.0.0", "filesize": "^8.0.6", "find-up": "^5.0.0", "fork-ts-checker-webpack-plugin": "^6.5.0", "global-modules": "^2.0.0", "globby": "^11.0.4", "gzip-size": "^6.0.0", "immer": "^9.0.7", "is-root": "^2.1.0", "loader-utils": "^3.2.0", "open": "^8.4.0", "pkg-up": "^3.1.0", "prompts": "^2.4.2", "react-error-overlay": "^6.0.11", "recursive-readdir": "^2.2.2", "shell-quote": "^1.7.3", "strip-ansi": "^6.0.1", "text-table": "^0.2.0" } }, "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ=="],
@@ -1288,14 +1387,22 @@
 
     "react-error-overlay": ["react-error-overlay@6.1.0", "", {}, "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ=="],
 
+    "react-hook-form": ["react-hook-form@7.71.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w=="],
+
+    "react-is": ["react-is@19.2.4", "", {}, "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA=="],
+
     "react-number-format": ["react-number-format@5.4.4", "", { "peerDependencies": { "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA=="],
 
+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
+
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
+    "react-resizable-panels": ["react-resizable-panels@2.1.9", "", { "peerDependencies": { "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ=="],
+
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
     "react-textarea-autosize": ["react-textarea-autosize@8.5.9", "", { "dependencies": { "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", "use-latest": "^1.2.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A=="],
@@ -1308,12 +1415,20 @@
 
     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
 
+    "recharts": ["recharts@3.7.0", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew=="],
+
     "recursive-readdir": ["recursive-readdir@2.2.3", "", { "dependencies": { "minimatch": "^3.0.5" } }, "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA=="],
 
+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
+
+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
+
     "regexp-to-ast": ["regexp-to-ast@0.5.0", "", {}, "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw=="],
 
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
+    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
+
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
@@ -1370,6 +1485,8 @@
 
     "sonic-boom": ["sonic-boom@4.2.0", "", { "dependencies": { "atomic-sleep": "^1.0.0" } }, "sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww=="],
 
+    "sonner": ["sonner@1.7.4", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw=="],
+
     "source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@@ -1398,6 +1515,8 @@
 
     "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
 
+    "tailwind-merge": ["tailwind-merge@2.6.1", "", {}, "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ=="],
+
     "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
 
     "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
@@ -1454,6 +1573,8 @@
 
     "uint8array-extras": ["uint8array-extras@1.5.0", "", {}, "sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A=="],
 
+    "ulid": ["ulid@3.0.2", "", { "bin": { "ulid": "dist/cli.js" } }, "sha512-yu26mwteFYzBAot7KVMqFGCVpsF6g8wXfJzQUHvu1no3+rRRSFcSV2nKeYvNPLD2J4b08jYBDhHUjeH0ygIl9w=="],
+
     "undici": ["undici@7.21.0", "", {}, "sha512-Hn2tCQpoDt1wv23a68Ctc8Cr/BHpUSfaPYrkajTXOS9IKpxVRx/X5m1K2YkbK2ipgZgxXSgsUinl3x+2YdSSfg=="],
 
     "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
@@ -1482,6 +1603,10 @@
 
     "valtio": ["valtio@2.3.0", "", { "dependencies": { "proxy-compare": "^3.0.1" }, "peerDependencies": { "@types/react": ">=18.0.0", "react": ">=18.0.0" }, "optionalPeers": ["@types/react", "react"] }, "sha512-1MfKNcmOIdBSatiJsYgw420n6jnD+jeoI0V+RkOQbCB0ElLh6GKUfPr0hc9uq/KBGeghivDEarRsKFFdSQQnKw=="],
 
+    "vaul": ["vaul@0.9.9", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ=="],
+
+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
+
     "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
 
     "vitest": ["vitest@4.0.18", "", { "dependencies": { "@vitest/expect": "4.0.18", "@vitest/mocker": "4.0.18", "@vitest/pretty-format": "4.0.18", "@vitest/runner": "4.0.18", "@vitest/snapshot": "4.0.18", "@vitest/spy": "4.0.18", "@vitest/utils": "4.0.18", "es-module-lexer": "^1.7.0", "expect-type": "^1.2.2", "magic-string": "^0.30.21", "obug": "^2.1.1", "pathe": "^2.0.3", "picomatch": "^4.0.3", "std-env": "^3.10.0", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "tinyrainbow": "^3.0.3", "vite": "^6.0.0 || ^7.0.0", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@vitest/browser-playwright": "4.0.18", "@vitest/browser-preview": "4.0.18", "@vitest/browser-webdriverio": "4.0.18", "@vitest/ui": "4.0.18", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@opentelemetry/api", "@types/node", "@vitest/browser-playwright", "@vitest/browser-preview", "@vitest/browser-webdriverio", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ=="],
@@ -1582,6 +1707,8 @@
 
     "@redocly/openapi-core/colorette": ["colorette@1.4.0", "", {}, "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="],
 
+    "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
+
     "@scalar/themes/@scalar/types": ["@scalar/types@0.1.7", "", { "dependencies": { "@scalar/openapi-types": "0.2.0", "@unhead/schema": "^1.11.11", "nanoid": "^5.1.5", "type-fest": "^4.20.0", "zod": "^3.23.8" } }, "sha512-irIDYzTQG2KLvFbuTI8k2Pz/R4JR+zUUSykVTbEMatkzMmVFnn1VzNSMlODbadycwZunbnL2tA27AXed9URVjw=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
@@ -1614,6 +1741,8 @@
 
     "c12/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
 
+    "cmdk/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+
     "cosmiconfig/parse-json": ["parse-json@5.2.0", "", { "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" } }, "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg=="],
 
     "cssstyle/lru-cache": ["lru-cache@11.2.5", "", {}, "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw=="],
@@ -1664,6 +1793,8 @@
 
     "react-dev-utils/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "react-dev-utils/immer": ["immer@9.0.21", "", {}, "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="],
+
     "react-dev-utils/open": ["open@8.4.2", "", { "dependencies": { "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", "is-wsl": "^2.2.0" } }, "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ=="],
 
     "readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "makuro-base-template",
+	"name": "darmasaba-dashboard-noc",
 	"version": "0.1.0-pre.2",
 	"private": true,
 	"type": "module",
@@ -13,7 +13,8 @@
 		"test:ui": "bun test --ui __tests__/api",
 		"test:e2e": "bun run build && playwright test",
 		"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='VITE_*'",
-		"start": "NODE_ENV=production bun src/index.ts"
+		"start": "NODE_ENV=production bun src/index.ts",
+		"seed": "bun prisma/seed.ts"
 	},
 	"dependencies": {
 		"@better-auth/cli": "^1.4.18",
@@ -58,15 +59,28 @@
 		"@tailwindcss/vite": "^4.1.18",
 		"@tanstack/react-router": "^1.158.1",
 		"better-auth": "^1.4.18",
+		"class-variance-authority": "^0.7.1",
+		"cmdk": "^1.0.1",
 		"dayjs": "^1.11.19",
 		"elysia": "^1.4.22",
+		"embla-carousel-react": "^8.1.1",
+		"input-otp": "^1.2.1",
+		"lucide-react": "^0.563.0",
+		"next-themes": "^0.4.6",
 		"openapi-fetch": "^0.15.0",
 		"pino": "^10.3.0",
 		"pino-pretty": "^13.1.3",
 		"react": "^19",
+		"react-day-picker": "^8.10.1",
 		"react-dom": "^19",
-		"tailwindcss": "^4.1.18",
+		"react-hook-form": "^7.52.1",
-		"valtio": "^2.3.0"
+		"react-resizable-panels": "^2.0.22",
+		"recharts": "^3.7.0",
+		"sonner": "^1.5.0",
+		"tailwind-merge": "^2.4.0",
+		"ulid": "^3.0.2",
+		"valtio": "^2.3.0",
+		"vaul": "^0.9.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.29.0",
@@ -74,12 +88,14 @@
 		"@biomejs/biome": "2.3.14",
 		"@playwright/test": "^1.58.2",
 		"@react-dev-inspector/vite-plugin": "^2.0.1",
+		"@tailwindcss/postcss": "^4.1.18",
 		"@tanstack/react-router-devtools": "^1.158.1",
 		"@tanstack/router-vite-plugin": "^1.158.1",
 		"@types/bun": "latest",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
 		"@vitejs/plugin-react": "^5.1.3",
+		"autoprefixer": "^10.4.24",
 		"openapi-typescript": "^7.10.1",
 		"postcss": "^8.5.6",
 		"postcss-preset-mantine": "^1.18.0",

postcss.config.cjs

@@ -1,5 +1,7 @@
 module.exports = {
 	plugins: {
+		"@tailwindcss/postcss": {},
+		autoprefixer: {},
 		"postcss-preset-mantine": {},
 		"postcss-simple-vars": {
 			variables: {

prisma/seed.ts

@@ -1,3 +1,4 @@
+import "dotenv/config";
 import { prisma } from "@/utils/db";
 
 async function seedAdminUser() {

src/components/ColorSchemeToggle.tsx

@@ -1,34 +1,10 @@
-import {
+import React from "react";
-	ActionIcon,
-	Group,
-	rem,
-	useComputedColorScheme,
-	useMantineColorScheme,
-} from "@mantine/core";
-import { IconMoon, IconSun } from "@tabler/icons-react";
 
 export function ColorSchemeToggle() {
-	const { setColorScheme } = useMantineColorScheme();
+  return (
-	const computedColorScheme = useComputedColorScheme("light", {
+    <div>
-		getInitialValueInEffect: true,
+      {/* Placeholder for Color Scheme Toggle */}
-	});
+      Color Scheme Toggle
-
+    </div>
-	return (
+  );
-		<Group justify="center">
-			<ActionIcon
-				onClick={() =>
-					setColorScheme(computedColorScheme === "light" ? "dark" : "light")
-				}
-				variant="default"
-				size="lg"
-				aria-label="Toggle color scheme"
-			>
-				{computedColorScheme === "light" ? (
-					<IconMoon style={{ width: rem(22), height: rem(22) }} stroke={1.5} />
-				) : (
-					<IconSun style={{ width: rem(22), height: rem(22) }} stroke={1.5} />
-				)}
-			</ActionIcon>
-		</Group>
-	);
 }

src/components/DashboardHeader.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface DashboardHeaderProps {
+  toggleSidebar: () => void;
+  sidebarOpened: boolean;
+}
+
+export function DashboardHeader({ toggleSidebar, sidebarOpened }: DashboardHeaderProps) {
+  return (
+    <div>
+      {/* Placeholder for Dashboard Header content */}
+      Dashboard Header
+    </div>
+  );
+}

src/components/DashboardSidebar.tsx

@@ -0,0 +1,84 @@
+import { Link, useLocation } from "@tanstack/react-router";
+import { Search } from "lucide-react";
+import { cn } from "./ui/utils";
+
+interface SidebarProps {
+	className?: string;
+  sidebarOpened: boolean;
+  closeSidebar: () => void;
+}
+
+export function DashboardSidebar({ className, sidebarOpened, closeSidebar }: SidebarProps) {
+	const location = useLocation();
+
+	// Define menu items with their paths
+	const menuItems = [
+		{ name: "Beranda", path: "/" },
+		{ name: "Kinerja Divisi", path: "/kinerja-divisi" },
+		{ name: "Pengaduan & Layanan Publik", path: "/pengaduan" },
+		{ name: "Jenna Analytic", path: "/analytic" },
+		{ name: "Demografi & Kependudukan", path: "/demografi" },
+		{ name: "Keuangan & Anggaran", path: "/keuangan" },
+		{ name: "Bumdes & UMKM Desa", path: "/bumdes" },
+		{ name: "Sosial", path: "/sosial" },
+		{ name: "Keamanan", path: "/keamanan" },
+		{ name: "Bantuan", path: "/bantuan" },
+		{ name: "Pengaturan", path: "/pengaturan" },
+	];
+
+	return (
+		<div
+			className={cn(
+				"w-[300px] bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col",
+				className,
+			)}
+		>
+			{/* Logo */}
+			<div className="p-6 border-b border-gray-200 dark:border-gray-700">
+				<div className="flex items-center gap-2">
+					<div className="bg-slate-800 dark:bg-slate-900 text-white px-3 py-2 rounded font-bold text-2xl">
+						DESA
+					</div>
+					<div className="w-6 h-6 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
+						+
+					</div>
+				</div>
+				<p className="text-xs text-gray-600 dark:text-gray-400 mt-2">
+					Digitalisasi Desa Transparansi Kerja
+				</p>
+			</div>
+
+			{/* Search */}
+			<div className="px-6 py-4">
+				<div className="relative">
+					<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
+					<input
+						type="text"
+						placeholder="cari apa saja"
+						className="w-full pl-10 pr-4 py-2 bg-gray-100 dark:bg-gray-700 dark:text-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 dark:focus:ring-slate-200"
+					/>
+				</div>
+			</div>
+
+			{/* Menu Items */}
+			<nav className="flex-1 px-4 overflow-y-auto">
+				<div className="space-y-1">
+					{menuItems.map((item, _index) => (
+						<Link
+							key={item.name}
+							to={item.path}
+							className={cn(
+								"w-full text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors block",
+								location.pathname === item.path
+									? "bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white"
+									: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700",
+							)}
+						>
+							{item.name}
+						</Link>
+					))}
+				</div>
+			</nav>
+		</div>
+	);
+}

src/components/RadixSample.tsx

@@ -1,48 +0,0 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { IconChevronRight, IconUser, IconSettings, IconLogout } from '@tabler/icons-react';
-
-export function RadixSample() {
-  return (
-    <div className="p-8 flex justify-center">
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild>
-          <button
-           type='button'
-            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 transition-colors"
-            aria-label="Custom options"
-          >
-            Radix Dropdown
-          </button>
-        </DropdownMenu.Trigger>
-
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content
-            className="min-w-[220px] rounded-lg bg-white p-1 shadow-xl ring-1 ring-black/5 animate-in fade-in zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-zinc-900 dark:ring-white/10"
-            sideOffset={5}
-          >
-            <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-2 text-sm text-zinc-700 outline-none hover:bg-blue-600 hover:text-white dark:text-zinc-300">
-              <IconUser className="mr-2 h-4 w-4" />
-              <span>Profil Saya</span>
-              <div className="ml-auto pl-5 text-xs text-zinc-400 group-hover:text-white">⌘P</div>
-            </DropdownMenu.Item>
-
-            <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-2 text-sm text-zinc-700 outline-none hover:bg-blue-600 hover:text-white dark:text-zinc-300">
-              <IconSettings className="mr-2 h-4 w-4" />
-              <span>Pengaturan</span>
-              <div className="ml-auto pl-5 text-xs text-zinc-400 group-hover:text-white">⌘S</div>
-            </DropdownMenu.Item>
-
-            <DropdownMenu.Separator className="my-1 h-px bg-zinc-200 dark:bg-zinc-800" />
-
-            <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-2 text-sm text-red-600 outline-none hover:bg-red-600 hover:text-white">
-              <IconLogout className="mr-2 h-4 w-4" />
-              <span>Keluar</span>
-            </DropdownMenu.Item>
-
-            <DropdownMenu.Arrow className="fill-white dark:fill-zinc-900" />
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
-    </div>
-  );
-}

src/components/dashboard-card.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { Card } from "./ui/card";
+
+interface DashboardCardProps {
+	title: string;
+	value: string | number;
+	subtitle?: string;
+	change?: string;
+	icon: ReactNode;
+	badge?: string;
+}
+
+export function DashboardCard({
+	title,
+	value,
+	subtitle,
+	change,
+	icon,
+	badge,
+}: DashboardCardProps) {
+	return (
+		<Card className="p-6 bg-gray-50 border-none relative">
+			<div className="flex items-start justify-between">
+				<div className="flex-1">
+					<p className="text-sm text-gray-600 mb-2">{title}</p>
+					<div className="flex items-baseline gap-2">
+						<h3 className="text-4xl font-bold text-gray-900">{value}</h3>
+						{badge && (
+							<div className="flex items-center justify-center w-12 h-12 rounded-full bg-slate-200 text-sm font-semibold">
+								{badge}
+							</div>
+						)}
+					</div>
+					{subtitle && <p className="text-sm text-gray-600 mt-2">{subtitle}</p>}
+					{change && <p className="text-sm text-red-500 mt-1">↗ {change}</p>}
+				</div>
+				<div className="flex items-center justify-center w-14 h-14 rounded-full bg-slate-800 text-white">
+					{icon}
+				</div>
+			</div>
+		</Card>
+	);
+}

src/components/dashboard-content.tsx

@@ -0,0 +1,286 @@
+import {
+	Calendar,
+	CheckCircle,
+	FileText,
+	MessageCircle,
+	Users,
+} from "lucide-react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	Pie,
+	PieChart,
+	ResponsiveContainer,
+	XAxis,
+	YAxis,
+} from "recharts";
+import { ulid } from "ulid"; // Import ulid
+import { DashboardCard } from "./dashboard-card";
+import { Card } from "./ui/card";
+
+const barChartData = [
+	{ id: ulid(), month: "Jan", value: 145 },
+	{ id: ulid(), month: "Feb", value: 165 },
+	{ id: ulid(), month: "Mar", value: 195 },
+	{ id: ulid(), month: "Apr", value: 155 },
+	{ id: ulid(), month: "Mei", value: 205 },
+	{ id: ulid(), month: "Jun", value: 185 },
+];
+
+const pieChartData = [
+	{ id: ulid(), name: "Puas", value: 25 },
+	{ id: ulid(), name: "Cukup", value: 25 },
+	{ id: ulid(), name: "Kurang", value: 25 },
+	{ id: ulid(), name: "Sangat puas", value: 25 },
+];
+
+const COLORS = ["#4E5BA6", "#F4C542", "#8CC63F", "#E57373"];
+
+const divisiData = [
+	{ id: ulid(), name: "Kesejahteraan", value: 37 },
+	{ id: ulid(), name: "Pemerintahan", value: 26 },
+	{ id: ulid(), name: "Keuangan", value: 17 },
+	{ id: ulid(), name: "Sekretaris Desa", value: 15 },
+];
+
+const eventData = [
+	{ id: ulid(), date: "1 Oktober 2025", title: "Hari Kesaktian Pancasila" },
+	{ id: ulid(), date: "15 Oktober 2025", title: "Davest" },
+	{ id: ulid(), date: "19 Oktober 2025", title: "Rapat Koordinasi" },
+];
+
+export function DashboardContent() {
+	return (
+		<div className="space-y-6">
+			{/* Stats Cards */}
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+				<DashboardCard
+					title="Surat Minggu Ini"
+					value="99"
+					subtitle="14 baru, 14 diproses"
+					change="12% dari minggu lalu ↗ +12%"
+					icon={<FileText className="w-6 h-6" />}
+				/>
+				<DashboardCard
+					title="Pengaduan Aktif"
+					value="28"
+					subtitle="14 baru, 14 diproses"
+					icon={<MessageCircle className="w-6 h-6" />}
+				/>
+				<DashboardCard
+					title="Layanan Selesai"
+					value="156"
+					subtitle="bulan ini"
+					change="+8%"
+					icon={<CheckCircle className="w-6 h-6" />}
+				/>
+				<DashboardCard
+					title="Kepuasan Warga"
+					value="87.2%"
+					subtitle="dari 482 responden"
+					icon={<Users className="w-6 h-6" />}
+					badge="87%"
+				/>
+			</div>
+
+			{/* Charts Section */}
+			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				{/* Bar Chart */}
+				<Card className="p-6 border-none bg-gray-50">
+					<div className="flex items-center justify-between mb-4">
+						<div>
+							<h3 className="text-lg font-semibold mb-1">
+								Statistik Pengajuan Surat
+							</h3>
+							<p className="text-sm text-gray-600">
+								Trend pengajuan surat 6 bulan terakhir
+							</p>
+						</div>
+						<button type="button" className="p-2 hover:bg-gray-200 rounded-lg">
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 20 20"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+								role="img"
+								aria-labelledby="barChartToggle"
+							>
+								<title id="barChartToggle">Toggle Bar Chart</title>
+								<path
+									d="M8 5L13 10L8 15"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								/>
+							</svg>
+						</button>
+					</div>
+					<ResponsiveContainer width="100%" height={300}>
+						<BarChart data={barChartData}>
+							<CartesianGrid
+								strokeDasharray="3 3"
+								vertical={false}
+								stroke="#E5E7EB"
+							/>
+							<XAxis dataKey="month" axisLine={false} tickLine={false} />
+							<YAxis
+								axisLine={false}
+								tickLine={false}
+								ticks={[0, 55, 110, 165, 220]}
+							/>
+							<Bar dataKey="value" fill="#334155" radius={[4, 4, 0, 0]} />
+						</BarChart>
+					</ResponsiveContainer>
+				</Card>
+
+				{/* Pie Chart */}
+				<Card className="p-6 border-none bg-gray-50">
+					<h3 className="text-lg font-semibold mb-1">Tingkat Kepuasan</h3>
+					<p className="text-sm text-gray-600 mb-4">Tingkat kepuasan layanan</p>
+					<ResponsiveContainer width="100%" height={300}>
+						<PieChart>
+							<Pie
+								data={pieChartData}
+								cx="50%"
+								cy="50%"
+								innerRadius={80}
+								outerRadius={120}
+								paddingAngle={2}
+								dataKey="value"
+							>
+								{pieChartData.map((_entry, index) => (
+									<Cell key={_entry.id} fill={COLORS[index]} />
+								))}
+							</Pie>
+						</PieChart>
+					</ResponsiveContainer>
+					<div className="flex flex-wrap justify-center gap-4 mt-4">
+						<div className="flex items-center gap-2">
+							<div className="w-3 h-3 rounded-full bg-[#8CC63F]"></div>
+							<span className="text-sm">Sangat puas (0%)</span>
+						</div>
+						<div className="flex items-center gap-2">
+							<div className="w-3 h-3 rounded-full bg-[#4E5BA6]"></div>
+							<span className="text-sm">Puas (0%)</span>
+						</div>
+						<div className="flex items-center gap-2">
+							<div className="w-3 h-3 rounded-full bg-[#F4C542]"></div>
+							<span className="text-sm">Cukup (0%)</span>
+						</div>
+						<div className="flex items-center gap-2">
+							<div className="w-3 h-3 rounded-full bg-[#E57373]"></div>
+							<span className="text-sm">Kurang (0%)</span>
+						</div>
+					</div>
+				</Card>
+			</div>
+
+			{/* Bottom Section */}
+			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				{/* Divisi Teraktif */}
+				<Card className="p-6 border-none bg-gray-50">
+					<div className="flex items-center gap-2 mb-6">
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							role="img"
+							aria-labelledby="divisiTeraktifIcon"
+						>
+							<title id="divisiTeraktifIcon">Divisi Teraktif Icon</title>
+							<rect
+								x="3"
+								y="3"
+								width="7"
+								height="7"
+								rx="1"
+								fill="currentColor"
+							/>
+							<rect
+								x="3"
+								y="14"
+								width="7"
+								height="7"
+								rx="1"
+								fill="currentColor"
+							/>
+							<rect
+								x="14"
+								y="3"
+								width="7"
+								height="7"
+								rx="1"
+								fill="currentColor"
+							/>
+							<rect
+								x="14"
+								y="14"
+								width="7"
+								height="7"
+								rx="1"
+								fill="currentColor"
+							/>
+						</svg>
+						<h3 className="text-lg font-semibold">Divisi Teraktif</h3>
+					</div>
+					<div className="space-y-4">
+						{divisiData.map((divisi) => (
+							<div key={divisi.id}>
+								<div className="flex justify-between mb-2">
+									<span className="text-sm font-medium">{divisi.name}</span>
+									<span className="text-sm font-semibold">
+										{divisi.value} Kegiatan
+									</span>
+								</div>
+								<div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+									<div
+										className="bg-slate-800 h-full rounded-full transition-all"
+										style={{ width: `${(divisi.value / 37) * 100}%` }}
+									/>
+								</div>
+							</div>
+						))}
+					</div>
+				</Card>
+
+				{/* Kalender */}
+				<Card className="p-6 border-none bg-gray-50">
+					<div className="flex items-center gap-2 mb-6">
+						<Calendar className="w-5 h-5" />
+						<h3 className="text-lg font-semibold">
+							Kalender & Kegiatan Mendatang
+						</h3>
+					</div>
+					<div className="space-y-4">
+						{eventData.map((event) => (
+							<div
+								key={event.id}
+								className="border-l-4 border-slate-800 pl-4 py-2"
+							>
+								<p className="text-sm text-gray-600">{event.date}</p>
+								<p className="font-medium">{event.title}</p>
+							</div>
+						))}
+					</div>
+				</Card>
+			</div>
+
+			{/* APBDes Chart */}
+			<Card className="p-6 border-none bg-gray-50">
+				<h3 className="text-lg font-semibold mb-6">Grafik APBDes</h3>
+				<div className="space-y-2">
+					<div className="flex items-center gap-4">
+						<span className="text-sm font-medium w-20">Belanja</span>
+						<div className="flex-1 bg-slate-800 h-8 rounded-full"></div>
+					</div>
+				</div>
+			</Card>
+		</div>
+	);
+}

src/components/figma/ImageWithFallback.tsx

@@ -0,0 +1,42 @@
+import type React from "react";
+import { useState } from "react";
+
+const ERROR_IMG_SRC =
+	"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==";
+
+export function ImageWithFallback(
+	props: React.ImgHTMLAttributes<HTMLImageElement>,
+) {
+	const [didError, setDidError] = useState(false);
+
+	const handleError = () => {
+		setDidError(true);
+	};
+
+	const { src, alt, style, className, ...rest } = props;
+
+	return didError ? (
+		<div
+			className={`inline-block bg-gray-100 text-center align-middle ${className ?? ""}`}
+			style={style}
+		>
+			<div className="flex items-center justify-center w-full h-full">
+				<img
+					src={ERROR_IMG_SRC}
+					alt="Failed to load"
+					{...rest}
+					data-original-url={src}
+				/>
+			</div>
+		</div>
+	) : (
+		<img
+			src={src}
+			alt={alt}
+			className={className}
+			style={style}
+			{...rest}
+			onError={handleError}
+		/>
+	);
+}

src/components/kinerja-divisi.tsx

@@ -0,0 +1,279 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button"; // Correct import for Button
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+
+const KinerjaDivisi = () => {
+	// Sample data for division performance
+	const divisions = [
+		{
+			id: 1,
+			name: "Divisi Teknologi",
+			target: 95,
+			achievement: 87,
+			status: "On Track",
+			projects: 12,
+			budget: "Rp 2.5M",
+			lastUpdate: "2 days ago",
+		},
+		{
+			id: 2,
+			name: "Divisi Keuangan",
+			target: 90,
+			achievement: 92,
+			status: "Above Target",
+			projects: 8,
+			budget: "Rp 1.8M",
+			lastUpdate: "1 day ago",
+		},
+		{
+			id: 3,
+			name: "Divisi SDM",
+			target: 85,
+			achievement: 78,
+			status: "Needs Attention",
+			projects: 6,
+			budget: "Rp 1.2M",
+			lastUpdate: "3 days ago",
+		},
+		{
+			id: 4,
+			name: "Divisi Operasional",
+			target: 92,
+			achievement: 89,
+			status: "On Track",
+			projects: 15,
+			budget: "Rp 3.2M",
+			lastUpdate: "5 hours ago",
+		},
+		{
+			id: 5,
+			name: "Divisi Pemasaran",
+			target: 88,
+			achievement: 91,
+			status: "Above Target",
+			projects: 10,
+			budget: "Rp 2.1M",
+			lastUpdate: "1 day ago",
+		},
+	];
+
+	return (
+		<div className="space-y-6">
+			<div className="flex justify-between items-center">
+				<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+					Kinerja Divisi
+				</h1>
+				<div className="flex space-x-4">
+					<Button variant="default">Export Data</Button>
+					<Button variant="outline">Filter</Button>
+				</div>
+			</div>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+				<Card>
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+						<CardTitle className="text-sm font-medium">Total Divisi</CardTitle>
+						<div className="h-6 w-6 text-muted-foreground">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								className="h-6 w-6"
+								role="img"
+								aria-labelledby="totalDivisiTitle"
+							>
+								<title id="totalDivisiTitle">Total Divisi Icon</title>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+								/>
+							</svg>
+						</div>
+					</CardHeader>
+					<CardContent>
+						<div className="text-2xl font-bold">5</div>
+						<p className="text-xs text-muted-foreground">Jumlah divisi aktif</p>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+						<CardTitle className="text-sm font-medium">
+							Rata-rata Pencapaian
+						</CardTitle>
+						<div className="h-6 w-6 text-muted-foreground">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								className="h-6 w-6"
+								role="img"
+								aria-labelledby="rataRataPencapaianTitle"
+							>
+								<title id="rataRataPencapaianTitle">
+									Rata-rata Pencapaian Icon
+								</title>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+								/>
+							</svg>
+						</div>
+					</CardHeader>
+					<CardContent>
+						<div className="text-2xl font-bold">87.4%</div>
+						<p className="text-xs text-muted-foreground">Target tercapai</p>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+						<CardTitle className="text-sm font-medium">
+							Divisi Melebihi Target
+						</CardTitle>
+						<div className="h-6 w-6 text-muted-foreground">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								className="h-6 w-6"
+								role="img"
+								aria-labelledby="divisiMelebihiTargetTitle"
+							>
+								<title id="divisiMelebihiTargetTitle">
+									Divisi Melebihi Target Icon
+								</title>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+								/>
+							</svg>
+						</div>
+					</CardHeader>
+					<CardContent>
+						<div className="text-2xl font-bold">2</div>
+						<p className="text-xs text-muted-foreground">Dari total 5 divisi</p>
+					</CardContent>
+				</Card>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Detail Kinerja Divisi</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Nama Divisi</TableHead>
+								<TableHead>Target (%)</TableHead>
+								<TableHead>Pencapaian (%)</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead>Proyek Aktif</TableHead>
+								<TableHead>Anggaran</TableHead>
+								<TableHead>Terakhir Diperbarui</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{divisions.map((division) => (
+								<TableRow key={division.id}>
+									<TableCell className="font-medium dark:text-white">
+										{division.name}
+									</TableCell>
+									<TableCell className="dark:text-white">
+										{division.target}%
+									</TableCell>
+									<TableCell className="dark:text-white">
+										{division.achievement}%
+									</TableCell>
+									<TableCell>
+										<div className="flex items-center">
+											<Progress
+												value={division.achievement}
+												max={100}
+												className="w-24 mr-2"
+											/>
+											<Badge
+												variant={
+													division.status === "Above Target"
+														? "success"
+														: division.status === "On Track"
+															? "secondary"
+															: "destructive"
+												}
+											>
+												{division.status}
+											</Badge>
+										</div>
+									</TableCell>
+									<TableCell className="dark:text-white">
+										{division.projects}
+									</TableCell>
+									<TableCell className="dark:text-white">
+										{division.budget}
+									</TableCell>
+									<TableCell className="dark:text-white">
+										{division.lastUpdate}
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+
+			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				<Card>
+					<CardHeader>
+						<CardTitle>Grafik Pencapaian Divisi</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="h-80 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg">
+							<p className="text-gray-500 dark:text-gray-300">
+								Grafik pencapaian akan ditampilkan di sini
+							</p>
+						</div>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Distribusi Anggaran Divisi</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="h-80 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg">
+							<p className="text-gray-500 dark:text-gray-300">
+								Diagram distribusi anggaran akan ditampilkan di sini
+							</p>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+};
+
+export default KinerjaDivisi;

src/components/pengaduan-layanan-publik.tsx

@@ -0,0 +1,412 @@
+import type React from "react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+
+const PengaduanLayananPublik = () => {
+	const [activeTab, setActiveTab] = useState<"complaints" | "services">(
+		"complaints",
+	);
+	const [newComplaint, setNewComplaint] = useState({
+		title: "",
+		category: "",
+		description: "",
+	});
+
+	// Sample data for complaints
+	const complaints = [
+		{
+			id: 1,
+			title: "Jalan Rusak di Jalan Raya",
+			category: "Infrastruktur",
+			status: "Pending",
+			priority: "High",
+			date: "2024-02-01",
+			reporter: "Bapak Ahmad",
+		},
+		{
+			id: 2,
+			title: "Pemadaman Listrik Berkelanjutan",
+			category: "Utilitas",
+			status: "In Progress",
+			priority: "Medium",
+			date: "2024-02-03",
+			reporter: "Ibu Sari",
+		},
+		{
+			id: 3,
+			title: "Pelayanan Administrasi Lambat",
+			category: "Administrasi",
+			status: "Resolved",
+			priority: "Low",
+			date: "2024-01-28",
+			reporter: "Pak Joko",
+		},
+		{
+			id: 4,
+			title: "Kebersihan Lingkungan",
+			category: "Sanitasi",
+			status: "Pending",
+			priority: "Medium",
+			date: "2024-02-05",
+			reporter: "Bu Dewi",
+		},
+	];
+
+	// Sample data for public services
+	const services = [
+		{
+			id: 1,
+			name: "Pembuatan KTP",
+			description:
+				"Pelayanan pembuatan Kartu Tanda Penduduk baru atau perpanjangan",
+			status: "Available",
+			category: "Administrasi",
+			lastUpdated: "2024-02-01",
+		},
+		{
+			id: 2,
+			name: "Pembuatan Surat Keterangan Usaha",
+			description: "Surat keterangan untuk keperluan usaha atau perizinan",
+			status: "Available",
+			category: "Administrasi",
+			lastUpdated: "2024-02-02",
+		},
+		{
+			id: 3,
+			name: "Pelayanan Kesehatan",
+			description: "Pelayanan kesehatan dasar di puskesmas desa",
+			status: "Available",
+			category: "Kesehatan",
+			lastUpdated: "2024-01-30",
+		},
+		{
+			id: 4,
+			name: "Program Bantuan Sosial",
+			description:
+				"Informasi dan pendaftaran program bantuan sosial dari pemerintah",
+			status: "Limited",
+			category: "Sosial",
+			lastUpdated: "2024-02-04",
+		},
+	];
+
+	const handleInputChange = (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		const { name, value } = e.target;
+		setNewComplaint((prev) => ({
+			...prev,
+			[name]: value,
+		}));
+	};
+
+	const handleSelectChange = (value: string | null) => {
+		setNewComplaint((prev) => ({
+			...prev,
+			category: value ?? "", // Handle null case, assign empty string if null
+		}));
+	};
+
+	const handleSubmitComplaint = (e: React.FormEvent) => {
+		e.preventDefault();
+		console.log("Submitting complaint:", newComplaint);
+		// Here you would typically send the complaint to your backend
+		alert("Pengaduan berhasil dikirim!");
+		setNewComplaint({ title: "", category: "", description: "" });
+	};
+
+	return (
+		<div className="space-y-6">
+			<div className="flex justify-between items-center">
+				<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+					Pengaduan & Layanan Publik
+				</h1>
+				<div className="flex space-x-4">
+					<Button
+						variant={activeTab === "complaints" ? "default" : "outline"}
+						onClick={() => setActiveTab("complaints")}
+						className="dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white"
+					>
+						Pengaduan
+					</Button>
+					<Button
+						variant={activeTab === "services" ? "default" : "outline"}
+						onClick={() => setActiveTab("services")}
+						className="dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white"
+					>
+						Layanan Publik
+					</Button>
+				</div>
+			</div>
+
+			{activeTab === "complaints" ? (
+				<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+					{/* Complaint Submission Form */}
+					<div className="lg:col-span-1">
+						<Card className="dark:bg-gray-800 dark:border-gray-700">
+							<CardHeader>
+								<CardTitle className="dark:text-white">
+									Ajukan Pengaduan
+								</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<form onSubmit={handleSubmitComplaint} className="space-y-4">
+									<div>
+										<label
+											htmlFor="title"
+											className="block text-sm font-medium mb-1 dark:text-gray-300"
+										>
+											Judul Pengaduan
+										</label>
+										<Input
+											id="title"
+											name="title"
+											value={newComplaint.title}
+											onChange={handleInputChange}
+											placeholder="Masukkan judul pengaduan"
+											className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+											required
+										/>
+									</div>
+
+									<div>
+										<label
+											htmlFor="category"
+											className="block text-sm font-medium mb-1 dark:text-gray-300"
+										>
+											Kategori
+										</label>
+										<Select
+											id="category"
+											name="category"
+											value={newComplaint.category}
+											onChange={handleSelectChange}
+											placeholder="Pilih kategori"
+											data={[
+												{ value: "infrastruktur", label: "Infrastruktur" },
+												{ value: "administrasi", label: "Administrasi" },
+												{ value: "utilitas", label: "Utilitas" },
+												{ value: "sanitasi", label: "Sanitasi" },
+												{ value: "kesehatan", label: "Kesehatan" },
+												{ value: "pendidikan", label: "Pendidikan" },
+											]}
+											className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+											clearable
+										/>
+									</div>
+
+									<div>
+										<label
+											htmlFor="description"
+											className="block text-sm font-medium mb-1 dark:text-gray-300"
+										>
+											Deskripsi
+										</label>
+										<Textarea
+											id="description"
+											name="description"
+											value={newComplaint.description}
+											onChange={handleInputChange}
+											placeholder="Jelaskan pengaduan Anda secara detail..."
+											rows={4}
+											className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+											required
+										/>
+									</div>
+
+									<Button
+										type="submit"
+										className="w-full dark:bg-blue-600 dark:hover:bg-blue-700"
+									>
+										Kirim Pengaduan
+									</Button>
+								</form>
+							</CardContent>
+						</Card>
+					</div>
+
+					{/* Complaints List */}
+					<div className="lg:col-span-2">
+						<Card className="dark:bg-gray-800 dark:border-gray-700">
+							<CardHeader>
+								<CardTitle className="dark:text-white">
+									Daftar Pengaduan
+								</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<Table>
+									<TableHeader>
+										<TableRow>
+											<TableHead className="dark:text-gray-300">
+												Judul
+											</TableHead>
+											<TableHead className="dark:text-gray-300">
+												Kategori
+											</TableHead>
+											<TableHead className="dark:text-gray-300">
+												Status
+											</TableHead>
+											<TableHead className="dark:text-gray-300">
+												Prioritas
+											</TableHead>
+											<TableHead className="dark:text-gray-300">
+												Tanggal
+											</TableHead>
+										</TableRow>
+									</TableHeader>
+									<TableBody>
+										{complaints.map((complaint) => (
+											<TableRow key={complaint.id}>
+												<TableCell className="font-medium dark:text-white">
+													{complaint.title}
+												</TableCell>
+												<TableCell className="dark:text-gray-300">
+													{complaint.category}
+												</TableCell>
+												<TableCell>
+													<Badge
+														variant={
+															complaint.status === "Resolved"
+																? "success"
+																: complaint.status === "In Progress"
+																	? "secondary"
+																	: "destructive"
+														}
+													>
+														{complaint.status}
+													</Badge>
+												</TableCell>
+												<TableCell>
+													<Badge
+														variant={
+															complaint.priority === "High"
+																? "destructive"
+																: complaint.priority === "Medium"
+																	? "secondary"
+																	: "default"
+														}
+													>
+														{complaint.priority}
+													</Badge>
+												</TableCell>
+												<TableCell className="dark:text-gray-300">
+													{complaint.date}
+												</TableCell>
+											</TableRow>
+										))}
+									</TableBody>
+								</Table>
+							</CardContent>
+						</Card>
+					</div>
+				</div>
+			) : (
+				<div>
+					<Card className="dark:bg-gray-800 dark:border-gray-700">
+						<CardHeader>
+							<CardTitle className="dark:text-white">
+								Layanan Publik Tersedia
+							</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+								{services.map((service) => (
+									<Card
+										key={service.id}
+										className="dark:bg-gray-700 dark:border-gray-600"
+									>
+										<CardHeader>
+											<CardTitle className="text-lg dark:text-white">
+												{service.name}
+											</CardTitle>
+										</CardHeader>
+										<CardContent>
+											<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+												{service.description}
+											</p>
+											<div className="flex justify-between items-center">
+												<Badge
+													variant={
+														service.status === "Available"
+															? "success"
+															: service.status === "Limited"
+																? "secondary"
+																: "destructive"
+													}
+												>
+													{service.status}
+												</Badge>
+												<span className="text-xs text-gray-500 dark:text-gray-400">
+													{service.category}
+												</span>
+											</div>
+											<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+												Terakhir diperbarui: {service.lastUpdated}
+											</p>
+										</CardContent>
+									</Card>
+								))}
+							</div>
+						</CardContent>
+					</Card>
+
+					<Card className="mt-6 dark:bg-gray-800 dark:border-gray-700">
+						<CardHeader>
+							<CardTitle className="dark:text-white">
+								Statistik Layanan
+							</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+								<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+									<h3 className="text-lg font-semibold dark:text-white">
+										Jumlah Layanan Tersedia
+									</h3>
+									<p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
+										12
+									</p>
+								</div>
+								<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+									<h3 className="text-lg font-semibold dark:text-white">
+										Layanan Terpopuler
+									</h3>
+									<p className="text-3xl font-bold text-green-600 dark:text-green-400">
+										4
+									</p>
+								</div>
+								<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+									<h3 className="text-lg font-semibold dark:text-white">
+										Permintaan Baru
+									</h3>
+									<p className="text-3xl font-bold text-purple-600 dark:text-purple-400">
+										23
+									</p>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default PengaduanLayananPublik;

src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Accordion({
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+	return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+	className,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+	return (
+		<AccordionPrimitive.Item
+			data-slot="accordion-item"
+			className={cn("border-b last:border-b-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function AccordionTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+	return (
+		<AccordionPrimitive.Header className="flex">
+			<AccordionPrimitive.Trigger
+				data-slot="accordion-trigger"
+				className={cn(
+					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
+	);
+}
+
+function AccordionContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+	return (
+		<AccordionPrimitive.Content
+			data-slot="accordion-content"
+			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+			{...props}
+		>
+			<div className={cn("pt-0 pb-4", className)}>{children}</div>
+		</AccordionPrimitive.Content>
+	);
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+import { Button } from "./button";
+import { cn } from "./utils";
+
+function AlertDialog({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+	return (
+		<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+	);
+}
+
+function AlertDialogPortal({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+	return (
+		<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+	);
+}
+
+function AlertDialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+	return (
+		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogContent({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
+}
+
+function AlertDialogHeader({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogFooter({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn("text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogAction({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+	return (
+		<AlertDialogPrimitive.Action asChild>
+			<Button className={cn(className)} {...props} />
+		</AlertDialogPrimitive.Action>
+	);
+}
+
+function AlertDialogCancel({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+	return (
+		<AlertDialogPrimitive.Cancel asChild>
+			<Button variant="outline" className={cn(className)} {...props} />
+		</AlertDialogPrimitive.Cancel>
+	);
+}
+
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+};

src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };

src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+	...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+	return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Avatar({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			className={cn(
+				"relative flex size-10 shrink-0 overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarImage({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn("aspect-square size-full", className)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn(
+				"bg-muted flex size-full items-center justify-center rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/badge.tsx

@@ -0,0 +1,51 @@
+import {
+	Badge as MantineBadge,
+	type BadgeProps as MantineBadgeProps,
+} from "@mantine/core";
+import { cn } from "./utils";
+
+interface BadgeProps extends MantineBadgeProps {
+	variant?: "default" | "secondary" | "destructive" | "success";
+}
+
+const Badge = ({
+	className,
+	variant = "default",
+	children,
+	...props
+}: BadgeProps) => {
+	let mantineVariant: MantineBadgeProps["variant"];
+	let mantineColor: MantineBadgeProps["color"];
+
+	switch (variant) {
+		case "secondary":
+			mantineVariant = "light";
+			mantineColor = "gray";
+			break;
+		case "destructive":
+			mantineVariant = "filled";
+			mantineColor = "red";
+			break;
+		case "success":
+			mantineVariant = "filled";
+			mantineColor = "green";
+			break;
+		default:
+			mantineVariant = "filled";
+			mantineColor = "blue"; // Placeholder, should align with primary color
+			break;
+	}
+
+	return (
+		<MantineBadge
+			variant={mantineVariant}
+			color={mantineColor}
+			className={cn(className)}
+			{...props}
+		>
+			{children}
+		</MantineBadge>
+	);
+};
+
+export { Badge };

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,107 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-item"
+			className={cn("inline-flex items-center gap-1.5", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			data-slot="breadcrumb-link"
+			className={cn("hover:text-foreground transition-colors", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			aria-current="page"
+			className={cn("text-foreground font-normal", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("[&>svg]:size-3.5", className)}
+			{...props}
+		>
+			{children ?? <ChevronRight />}
+		</li>
+	);
+}
+
+function BreadcrumbEllipsis({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("flex size-9 items-center justify-center", className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
+}
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};

src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import {
+	Button as MantineButton,
+	type ButtonProps as MantineButtonProps,
+} from "@mantine/core";
+import { cn } from "./utils";
+
+interface ButtonProps extends MantineButtonProps {
+	variant?:
+		| "default"
+		| "destructive"
+		| "outline"
+		| "secondary"
+		| "ghost"
+		| "link";
+	className?: string;
+	onClick?: React.MouseEventHandler<HTMLButtonElement>;
+	type?: "button" | "submit" | "reset";
+}
+
+const Button = ({ children, className, variant, ...props }: ButtonProps) => {
+	let mantineVariant: MantineButtonProps["variant"];
+	let mantineColor: MantineButtonProps["color"];
+
+	switch (variant) {
+		case "destructive":
+			mantineVariant = "filled";
+			mantineColor = "red";
+			break;
+		case "outline":
+			mantineVariant = "outline";
+			break;
+		case "secondary":
+			mantineVariant = "default";
+			break;
+		case "ghost":
+			mantineVariant = "subtle";
+			break;
+		case "link":
+			mantineVariant = "transparent";
+			mantineColor = "blue"; // Assuming primary maps to blue in Mantine for now
+			break;
+		default:
+			mantineVariant = "filled";
+			mantineColor = "blue"; // Assuming primary maps to blue in Mantine for now
+			break;
+	}
+
+	return (
+		<MantineButton
+			variant={mantineVariant}
+			color={mantineColor}
+			className={cn(className)}
+			{...props}
+		>
+			{children}
+		</MantineButton>
+	);
+};
+
+export { Button };

src/components/ui/calendar.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import type * as React from "react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "./utils";
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
+}: React.ComponentProps<typeof DayPicker>) {
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row gap-2",
+				month: "flex flex-col gap-4",
+				caption: "flex justify-center pt-1 relative items-center w-full",
+				caption_label: "text-sm font-medium",
+				nav: "flex items-center gap-1",
+				nav_button: cn(
+					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+					"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-x-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+					props.mode === "range"
+						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+						: "[&:has([aria-selected])]:rounded-md",
+				),
+				day: cn(
+					"hover:bg-accent hover:text-accent-foreground",
+					"size-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_start:
+					"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+				day_range_end:
+					"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground aria-selected:text-muted-foreground",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ className, ...props }) => (
+					<ChevronLeft className={cn("size-4", className)} {...props} />
+				),
+				IconRight: ({ className, ...props }) => (
+					<ChevronRight className={cn("size-4", className)} {...props} />
+				),
+			}}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar };

src/components/ui/card.tsx

@@ -0,0 +1,55 @@
+import {
+	Box,
+	Card as MantineCard,
+	type CardProps as MantineCardProps,
+	Title,
+} from "@mantine/core";
+import type React from "react";
+import { cn } from "./utils";
+
+interface CardComponentProps extends MantineCardProps {
+	// Add any specific props you had in your custom Card component
+}
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Card = ({ className, children, ...props }: CardComponentProps) => (
+	<MantineCard
+		className={cn(
+			"rounded-xl border bg-white dark:bg-gray-800 p-6 shadow",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+	</MantineCard>
+);
+
+const CardHeader = ({ className, children, ...props }: CardHeaderProps) => (
+	<Box className={cn("flex flex-col space-y-1.5", className)} {...props}>
+		{children}
+	</Box>
+);
+
+const CardTitle = ({ className, children, ...props }: CardTitleProps) => (
+	<Title
+		order={3}
+		className={cn(
+			"font-semibold leading-none tracking-tight text-gray-900 dark:text-white",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+	</Title>
+);
+
+const CardContent = ({ className, children, ...props }: CardContentProps) => (
+	<Box className={cn("p-6 pt-0", className)} {...props}>
+		{children}
+	</Box>
+);
+
+export { Card, CardHeader, CardTitle, CardContent };

src/components/ui/carousel.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import useEmblaCarousel, {
+	type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button";
+import { cn } from "./utils";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: "horizontal" | "vertical";
+	setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
+
+	return context;
+}
+
+function Carousel({
+	orientation = "horizontal",
+	opts,
+	setApi,
+	plugins,
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+	const [carouselRef, api] = useEmblaCarousel(
+		{
+			...opts,
+			axis: orientation === "horizontal" ? "x" : "y",
+		},
+		plugins,
+	);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+	const onSelect = React.useCallback((api: CarouselApi) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+
+	const handleKeyDown = React.useCallback(
+		(event: React.KeyboardEvent<HTMLDivElement>) => {
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				scrollPrev();
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				scrollNext();
+			}
+		},
+		[scrollPrev, scrollNext],
+	);
+
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+
+	return (
+		<CarouselContext.Provider
+			value={{
+				carouselRef,
+				api: api,
+				opts,
+				orientation:
+					orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+				scrollPrev,
+				scrollNext,
+				canScrollPrev,
+				canScrollNext,
+			}}
+		>
+			<section
+				onKeyDownCapture={handleKeyDown}
+				className={cn("relative", className)}
+				data-slot="carousel"
+				{...props}
+			>
+				{children}
+			</section>
+		</CarouselContext.Provider>
+	);
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+	const { carouselRef, orientation } = useCarousel();
+
+	return (
+		<div
+			ref={carouselRef}
+			className="overflow-hidden"
+			data-slot="carousel-content"
+		>
+			<div
+				className={cn(
+					"flex",
+					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+	const { orientation } = useCarousel();
+
+	return (
+		<div
+			aria-roledescription="slide"
+			data-slot="carousel-item"
+			className={cn(
+				"min-w-0 shrink-0 grow-0 basis-full",
+				orientation === "horizontal" ? "pl-4" : "pt-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CarouselPrevious({
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-previous"
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute size-8 rounded-full",
+				orientation === "horizontal"
+					? "top-1/2 -left-12 -translate-y-1/2"
+					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeft />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
+}
+
+function CarouselNext({
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-next"
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute size-8 rounded-full",
+				orientation === "horizontal"
+					? "top-1/2 -right-12 -translate-y-1/2"
+					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRight />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
+}
+
+export {
+	type CarouselApi,
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselPrevious,
+	CarouselNext,
+};

src/components/ui/chart.tsx

@@ -0,0 +1,363 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "./utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: React.ReactNode;
+		icon?: React.ComponentType;
+	} & (
+		| { color?: string; theme?: never }
+		| { color?: never; theme: Record<keyof typeof THEMES, string> }
+	);
+};
+
+type ChartContextProps = {
+	config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+	const context = React.useContext(ChartContext);
+
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
+
+	return context;
+}
+
+function ChartContainer({
+	id,
+	className,
+	children,
+	config,
+	...props
+}: React.ComponentProps<"div"> & {
+	config: ChartConfig;
+	children: React.ComponentProps<
+		typeof RechartsPrimitive.ResponsiveContainer
+	>["children"];
+}) {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-slot="chart"
+				data-chart={chartId}
+				className={cn(
+					"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer>
+					{children}
+				</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	);
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+	const colorConfig = Object.entries(config).filter(
+		([, config]) => config.theme || config.color,
+	);
+
+	if (!colorConfig.length) {
+		return null;
+	}
+
+	return (
+		<style
+			// biome-ignore lint/security/noDangerouslySetInnerHtml: This is used for dynamic theming of charts.
+			dangerouslySetInnerHTML={{
+				__html: Object.entries(THEMES)
+					.map(
+						([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+	.map(([key, itemConfig]) => {
+		const color =
+			itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+			itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
+}
+`,
+					)
+					.join("\n"),
+			}}
+		/>
+	);
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+interface RechartsTooltipCustomProps extends React.ComponentProps<typeof RechartsPrimitive.Tooltip> {
+  payload?: any[];
+  label?: string | number;
+}
+
+function ChartTooltipContent({
+	active,
+	payload,
+	className,
+	indicator = "dot",
+	hideLabel = false,
+	hideIndicator = false,
+	label,
+	labelFormatter,
+	labelClassName,
+	formatter,
+	color,
+	nameKey,
+	labelKey,
+}: RechartsTooltipCustomProps &
+	React.ComponentProps<"div"> & {
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+	}) {
+	const { config } = useChart();
+
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) {
+			return null;
+		}
+
+		const [item] = payload;
+		const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value =
+			!labelKey && typeof label === "string"
+				? config[label as keyof typeof config]?.label || label
+				: itemConfig?.label;
+
+		if (labelFormatter) {
+			return (
+				<div className={cn("font-medium", labelClassName)}>
+					{labelFormatter(value, payload)}
+				</div>
+			);
+		}
+
+		if (!value) {
+			return null;
+		}
+
+		return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey,
+	]);
+
+	if (!active || !payload?.length) {
+		return null;
+	}
+
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+
+	return (
+		<div
+			className={cn(
+				"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+				className,
+			)}
+		>
+			{!nestLabel ? tooltipLabel : null}
+			<div className="grid gap-1.5">
+				{payload.map((item: any, index: number) => {
+					const key = `${nameKey || item.name || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
+					const indicatorColor = color || item.payload.fill || item.color;
+
+					return (
+						<div
+							key={item.dataKey}
+							className={cn(
+								"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+								indicator === "dot" && "items-center",
+							)}
+						>
+							{formatter && item?.value !== undefined && item.name ? (
+								formatter(item.value, item.name, item, index, item.payload)
+							) : (
+								<>
+									{itemConfig?.icon ? (
+										<itemConfig.icon />
+									) : (
+										!hideIndicator && (
+											<div
+												className={cn(
+													"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+													{
+														"h-2.5 w-2.5": indicator === "dot",
+														"w-1": indicator === "line",
+														"w-0 border-[1.5px] border-dashed bg-transparent":
+															indicator === "dashed",
+														"my-0.5": nestLabel && indicator === "dashed",
+													},
+												)}
+												style={
+													{
+														"--color-bg": indicatorColor,
+														"--color-border": indicatorColor,
+													} as React.CSSProperties
+												}
+											/>
+										)
+									)}
+									<div
+										className={cn(
+											"flex flex-1 justify-between leading-none",
+											nestLabel ? "items-end" : "items-center",
+										)}
+									>
+										<div className="grid gap-1.5">
+											{nestLabel ? tooltipLabel : null}
+											<span className="text-muted-foreground">
+												{itemConfig?.label || item.name}
+											</span>
+										</div>
+										{item.value && (
+											<span className="text-foreground font-mono font-medium tabular-nums">
+												{item.value.toLocaleString()}
+											</span>
+										)}
+									</div>
+								</>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+interface RechartsLegendCustomProps extends Pick<RechartsPrimitive.LegendProps, "verticalAlign"> {
+  payload?: any[];
+}
+
+function ChartLegendContent({
+	className,
+	hideIcon = false,
+	payload,
+	verticalAlign = "bottom",
+	nameKey,
+}: React.ComponentProps<"div"> &
+	RechartsLegendCustomProps & {
+		hideIcon?: boolean;
+		nameKey?: string;
+	}) {
+	const { config } = useChart();
+
+	if (!payload?.length) {
+		return null;
+	}
+
+	return (
+		<div
+			className={cn(
+				"flex items-center justify-center gap-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className,
+			)}
+		>
+			{payload.map((item: any) => {
+				const key = `${nameKey || item.dataKey || "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+				return (
+					<div
+						key={item.value}
+						className={cn(
+							"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+						)}
+					>
+						{itemConfig?.icon && !hideIcon ? (
+							<itemConfig.icon />
+						) : (
+							<div
+								className="h-2 w-2 shrink-0 rounded-[2px]"
+								style={{
+									backgroundColor: item.color,
+								}}
+							/>
+						)}
+						{itemConfig?.label}
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+	config: ChartConfig,
+	payload: unknown,
+	key: string,
+) {
+	if (typeof payload !== "object" || payload === null) {
+		return undefined;
+	}
+
+	const payloadPayload =
+		"payload" in payload &&
+		typeof payload.payload === "object" &&
+		payload.payload !== null
+			? payload.payload
+			: undefined;
+
+	let configLabelKey: string = key;
+
+	if (
+		key in payload &&
+		typeof payload[key as keyof typeof payload] === "string"
+	) {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[
+			key as keyof typeof payloadPayload
+		] as string;
+	}
+
+	return configLabelKey in config
+		? config[configLabelKey]
+		: config[key as keyof typeof config];
+}
+
+export {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	ChartStyle,
+};

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Checkbox({
+	className,
+	...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			className={cn(
+				"peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				data-slot="checkbox-indicator"
+				className="flex items-center justify-center text-current transition-none"
+			>
+				<CheckIcon className="size-3.5" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
+}
+
+export { Checkbox };

src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleTrigger
+			data-slot="collapsible-trigger"
+			{...props}
+		/>
+	);
+}
+
+function CollapsibleContent({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			data-slot="collapsible-content"
+			{...props}
+		/>
+	);
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/components/ui/command.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "./dialog";
+import { cn } from "./utils";
+
+function Command({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+}) {
+	return (
+		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent className="overflow-hidden p-0">
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex h-9 items-center gap-2 border-b px-3"
+		>
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CommandList({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn(
+				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandEmpty({
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className="py-6 text-center text-sm"
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};

src/components/ui/context-menu.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function ContextMenu({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+	return (
+		<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+	);
+}
+
+function ContextMenuGroup({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+	return (
+		<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+	);
+}
+
+function ContextMenuPortal({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+	return (
+		<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+	);
+}
+
+function ContextMenuSub({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+	return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+	return (
+		<ContextMenuPrimitive.RadioGroup
+			data-slot="context-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.SubTrigger
+			data-slot="context-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto" />
+		</ContextMenuPrimitive.SubTrigger>
+	);
+}
+
+function ContextMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+	return (
+		<ContextMenuPrimitive.SubContent
+			data-slot="context-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuContent({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+	return (
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Content
+				data-slot="context-menu-content"
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</ContextMenuPrimitive.Portal>
+	);
+}
+
+function ContextMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<ContextMenuPrimitive.Item
+			data-slot="context-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+	return (
+		<ContextMenuPrimitive.CheckboxItem
+			data-slot="context-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<ContextMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.CheckboxItem>
+	);
+}
+
+function ContextMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+	return (
+		<ContextMenuPrimitive.RadioItem
+			data-slot="context-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<ContextMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.RadioItem>
+	);
+}
+
+function ContextMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.Label
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn(
+				"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+	return (
+		<ContextMenuPrimitive.Separator
+			data-slot="context-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="context-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuGroup,
+	ContextMenuPortal,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuRadioGroup,
+};

src/components/ui/dialog.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Dialog({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+					<XIcon />
+					<span className="sr-only">Close</span>
+				</DialogPrimitive.Close>
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

src/components/ui/drawer.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import type * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "./utils";
+
+function Drawer({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+	return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+	return (
+		<DrawerPrimitive.Overlay
+			data-slot="drawer-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+	return (
+		<DrawerPortal data-slot="drawer-portal">
+			<DrawerOverlay />
+			<DrawerPrimitive.Content
+				data-slot="drawer-content"
+				className={cn(
+					"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+					"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+					"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+					"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+					"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+					className,
+				)}
+				{...props}
+			>
+				<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				{children}
+			</DrawerPrimitive.Content>
+		</DrawerPortal>
+	);
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn("flex flex-col gap-1.5 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+	return (
+		<DrawerPrimitive.Title
+			data-slot="drawer-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+	return (
+		<DrawerPrimitive.Description
+			data-slot="drawer-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
+};

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function DropdownMenu({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+};

src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+	useFormContext,
+	useFormState,
+} from "react-hook-form";
+import { Label } from "./label";
+import { cn } from "./utils";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+	name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+	{} as FormFieldContextValue,
+);
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};
+
+type FormItemContextValue = {
+	id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+	{} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+	const id = React.useId();
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div
+				data-slot="form-item"
+				className={cn("grid gap-2", className)}
+				{...props}
+			/>
+		</FormItemContext.Provider>
+	);
+}
+
+function FormLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	const { error, formItemId } = useFormField();
+
+	return (
+		<Label
+			data-slot="form-label"
+			data-error={!!error}
+			className={cn("data-[error=true]:text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
+
+	return (
+		<Slot
+			data-slot="form-control"
+			id={formItemId}
+			aria-describedby={
+				!error
+					? `${formDescriptionId}`
+					: `${formDescriptionId} ${formMessageId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+	const { formDescriptionId } = useFormField();
+
+	return (
+		<p
+			data-slot="form-description"
+			id={formDescriptionId}
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : props.children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p
+			data-slot="form-message"
+			id={formMessageId}
+			className={cn("text-destructive text-sm", className)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
+}
+
+export {
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
+};

src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function HoverCard({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+	return (
+		<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+	);
+}
+
+function HoverCardContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				data-slot="hover-card-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className,
+				)}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	);
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

src/components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function InputOTP({
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput> & {
+	containerClassName?: string;
+}) {
+	return (
+		<OTPInput
+			data-slot="input-otp"
+			containerClassName={cn(
+				"flex items-center gap-2 has-disabled:opacity-50",
+				containerClassName,
+			)}
+			className={cn("disabled:cursor-not-allowed", className)}
+			{...props}
+		/>
+	);
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="input-otp-group"
+			className={cn("flex items-center gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function InputOTPSlot({
+	index,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	index: number;
+}) {
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+	return (
+		<div
+			data-slot="input-otp-slot"
+			data-active={isActive}
+			className={cn(
+				"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+				</div>
+			)}
+		</div>
+	);
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="input-otp-separator" aria-hidden="true" {...props}>
+			<MinusIcon />
+		</div>
+	);
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import { TextInput, type TextInputProps } from "@mantine/core";
+import React from "react";
+import { cn } from "./utils"; // Assuming cn is still useful for merging classNames
+
+interface InputProps extends TextInputProps {
+	// Add any specific props you had in your custom Input component
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, type, ...props }, ref) => {
+		return (
+			<TextInput
+				ref={ref}
+				type={type}
+				className={cn(className)} // Apply custom classNames if any
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Label({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

src/components/ui/menubar.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Menubar({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+	return (
+		<MenubarPrimitive.Root
+			data-slot="menubar"
+			className={cn(
+				"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarMenu({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+	return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+	return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+	return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+	return (
+		<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+	);
+}
+
+function MenubarTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+	return (
+		<MenubarPrimitive.Trigger
+			data-slot="menubar-trigger"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarContent({
+	className,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+	return (
+		<MenubarPortal>
+			<MenubarPrimitive.Content
+				data-slot="menubar-content"
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPortal>
+	);
+}
+
+function MenubarItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<MenubarPrimitive.Item
+			data-slot="menubar-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+	return (
+		<MenubarPrimitive.CheckboxItem
+			data-slot="menubar-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.CheckboxItem>
+	);
+}
+
+function MenubarRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+	return (
+		<MenubarPrimitive.RadioItem
+			data-slot="menubar-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.RadioItem>
+	);
+}
+
+function MenubarLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<MenubarPrimitive.Label
+			data-slot="menubar-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+	return (
+		<MenubarPrimitive.Separator
+			data-slot="menubar-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="menubar-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSub({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+	return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<MenubarPrimitive.SubTrigger
+			data-slot="menubar-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto h-4 w-4" />
+		</MenubarPrimitive.SubTrigger>
+	);
+}
+
+function MenubarSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+	return (
+		<MenubarPrimitive.SubContent
+			data-slot="menubar-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Menubar,
+	MenubarPortal,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarGroup,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarItem,
+	MenubarShortcut,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSub,
+	MenubarSubTrigger,
+	MenubarSubContent,
+};

src/components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function NavigationMenu({
+	className,
+	children,
+	viewport = true,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+	viewport?: boolean;
+}) {
+	return (
+		<NavigationMenuPrimitive.Root
+			data-slot="navigation-menu"
+			data-viewport={viewport}
+			className={cn(
+				"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{viewport && <NavigationMenuViewport />}
+		</NavigationMenuPrimitive.Root>
+	);
+}
+
+function NavigationMenuList({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+	return (
+		<NavigationMenuPrimitive.List
+			data-slot="navigation-menu-list"
+			className={cn(
+				"group flex flex-1 list-none items-center justify-center gap-1",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuItem({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+	return (
+		<NavigationMenuPrimitive.Item
+			data-slot="navigation-menu-item"
+			className={cn("relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const navigationMenuTriggerStyle = cva(
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
+
+function NavigationMenuTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+	return (
+		<NavigationMenuPrimitive.Trigger
+			data-slot="navigation-menu-trigger"
+			className={cn(navigationMenuTriggerStyle(), "group", className)}
+			{...props}
+		>
+			{children}{" "}
+			<ChevronDownIcon
+				className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+				aria-hidden="true"
+			/>
+		</NavigationMenuPrimitive.Trigger>
+	);
+}
+
+function NavigationMenuContent({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+	return (
+		<NavigationMenuPrimitive.Content
+			data-slot="navigation-menu-content"
+			className={cn(
+				"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+				"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuViewport({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+	return (
+		<div
+			className={cn(
+				"absolute top-full left-0 isolate z-50 flex justify-center",
+			)}
+		>
+			<NavigationMenuPrimitive.Viewport
+				data-slot="navigation-menu-viewport"
+				className={cn(
+					"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function NavigationMenuLink({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+	return (
+		<NavigationMenuPrimitive.Link
+			data-slot="navigation-menu-link"
+			className={cn(
+				"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuIndicator({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+	return (
+		<NavigationMenuPrimitive.Indicator
+			data-slot="navigation-menu-indicator"
+			className={cn(
+				"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+				className,
+			)}
+			{...props}
+		>
+			<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+		</NavigationMenuPrimitive.Indicator>
+	);
+}
+
+export {
+	NavigationMenu,
+	NavigationMenuList,
+	NavigationMenuItem,
+	NavigationMenuContent,
+	NavigationMenuTrigger,
+	NavigationMenuLink,
+	NavigationMenuIndicator,
+	NavigationMenuViewport,
+	navigationMenuTriggerStyle,
+};

src/components/ui/pagination.tsx

@@ -0,0 +1,121 @@
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	MoreHorizontalIcon,
+} from "lucide-react";
+import type * as React from "react";
+import { Button } from "./button";
+import { cn } from "./utils";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+	return (
+		<nav
+			aria-label="pagination"
+			data-slot="pagination"
+			className={cn("mx-auto flex w-full justify-center", className)}
+			{...props}
+		/>
+	);
+}
+
+function PaginationContent({
+	className,
+	...props
+}: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="pagination-content"
+			className={cn("flex flex-row items-center gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+	return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size" | "variant"> &
+	React.ComponentProps<typeof Button>;
+
+function PaginationLink({
+	className,
+	isActive,
+	size = "icon",
+	...props
+}: PaginationLinkProps) {
+	return (
+		<Button
+			aria-current={isActive ? "page" : undefined}
+			data-slot="pagination-link"
+			data-active={isActive}
+			variant={isActive ? "outline" : "ghost"}
+			size={size}
+			className={cn(className)}
+			{...props}
+		/>
+	);
+}
+
+function PaginationPrevious({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) {
+	return (
+		<PaginationLink
+			aria-label="Go to previous page"
+			size="default"
+			className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+			{...props}
+		>
+			<ChevronLeftIcon />
+			<span className="hidden sm:block">Previous</span>
+		</PaginationLink>
+	);
+}
+
+function PaginationNext({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) {
+	return (
+		<PaginationLink
+			aria-label="Go to next page"
+			size="default"
+			className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+			{...props}
+		>
+			<span className="hidden sm:block">Next</span>
+			<ChevronRightIcon />
+		</PaginationLink>
+	);
+}
+
+function PaginationEllipsis({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			aria-hidden
+			data-slot="pagination-ellipsis"
+			className={cn("flex size-9 items-center justify-center", className)}
+			{...props}
+		>
+			<MoreHorizontalIcon className="size-4" />
+			<span className="sr-only">More pages</span>
+		</span>
+	);
+}
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationLink,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+};

src/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Popover({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+function PopoverAnchor({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/components/ui/progress.tsx

@@ -0,0 +1,23 @@
+import {
+	Progress as MantineProgress,
+	type ProgressProps as MantineProgressProps,
+} from "@mantine/core";
+import { cn } from "./utils";
+
+interface ProgressProps extends MantineProgressProps {
+	max?: number;
+}
+
+const Progress = ({ className, value, max, ...props }: ProgressProps) => {
+	return (
+		<MantineProgress
+			value={value}
+			max={max as any}
+			className={cn(className)}
+			color="blue" // Placeholder, should align with primary color
+			{...props}
+		/>
+	);
+};
+
+export { Progress };

src/components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function RadioGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+	return (
+		<RadioGroupPrimitive.Root
+			data-slot="radio-group"
+			className={cn("grid gap-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function RadioGroupItem({
+	className,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+	return (
+		<RadioGroupPrimitive.Item
+			data-slot="radio-group-item"
+			className={cn(
+				"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator
+				data-slot="radio-group-indicator"
+				className="relative flex items-center justify-center"
+			>
+				<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+}
+
+export { RadioGroup, RadioGroupItem };

src/components/ui/resizable.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import type * as React from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "./utils";
+
+function ResizablePanelGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+	return (
+		<ResizablePrimitive.PanelGroup
+			data-slot="resizable-panel-group"
+			className={cn(
+				"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ResizablePanel({
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+	return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+	withHandle,
+	className,
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+	withHandle?: boolean;
+}) {
+	return (
+		<ResizablePrimitive.PanelResizeHandle
+			data-slot="resizable-handle"
+			className={cn(
+				"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+				className,
+			)}
+			{...props}
+		>
+			{withHandle && (
+				<div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+					<GripVerticalIcon className="size-2.5" />
+				</div>
+			)}
+		</ResizablePrimitive.PanelResizeHandle>
+	);
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

src/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function ScrollArea({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+	return (
+		<ScrollAreaPrimitive.Root
+			data-slot="scroll-area"
+			className={cn("relative", className)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
+}
+
+function ScrollBar({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+	return (
+		<ScrollAreaPrimitive.ScrollAreaScrollbar
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			className={cn(
+				"flex touch-none p-px transition-colors select-none",
+				orientation === "vertical" &&
+					"h-full w-2.5 border-l border-l-transparent",
+				orientation === "horizontal" &&
+					"h-2.5 flex-col border-t border-t-transparent",
+				className,
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="bg-border relative flex-1 rounded-full"
+			/>
+		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+	);
+}
+
+export { ScrollArea, ScrollBar };

src/components/ui/select.tsx

@@ -0,0 +1,138 @@
+import {
+	Select as MantineSelect,
+	type SelectProps as MantineSelectProps,
+} from "@mantine/core";
+import React from "react";
+import { cn } from "./utils";
+
+interface SelectProps extends MantineSelectProps {
+	// Mantine's Select handles its own data prop, so we don't need `children` here
+	// You might want to extend with custom props if your original Select had them
+}
+
+const Select = React.forwardRef<HTMLInputElement, SelectProps>(
+	({ className, placeholder, ...props }, ref) => {
+		return (
+			<MantineSelect
+				ref={ref}
+				placeholder={placeholder}
+				className={cn(className)}
+				{...props}
+			/>
+		);
+	},
+);
+Select.displayName = "Select";
+
+// Export the Mantine Select as the default, hiding the internal complexities
+export { Select };
+
+// The following components are no longer needed as Mantine's Select is a single component
+// If you had specific styling or logic within them that needs to be preserved,
+// you would apply it to the MantineSelect directly or via props.
+/*
+interface SelectTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+interface SelectItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  value: string;
+  children: React.ReactNode;
+}
+
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+  placeholder?: string;
+}
+
+const SelectContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+}>({
+  value: '',
+  onValueChange: () => {},
+});
+
+const SelectTrigger = ({ children, className, ...props }: SelectTriggerProps) => {
+  return (
+    <div 
+      className={`flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ''}`} 
+      {...props}
+    >
+      {children}
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4 opacity-50"
+      >
+        <path
+          d="M3.13523 6.15803C3.3241 5.95651 3.64052 5.94639 3.84197 6.13529L7.5 9.56391L11.158 6.13529C11.3595 5.94639 11.6759 5.95651 11.8648 6.15803C12.0537 6.35955 12.0435 6.67597 11.842 6.86487L7.84197 10.6149C7.64964 10.7962 7.35036 10.7962 7.15803 10.6149L3.15803 6.86487C2.95651 6.67597 2.94639 6.35955 3.13523 6.15803Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </div>
+  );
+};
+
+const SelectContent = ({ children, className, ...props }: SelectContentProps) => {
+  return (
+    <div 
+      className={`absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 mt-1 w-full ${className || ''}`} 
+      {...props}
+    >
+      <div className="p-1">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const SelectItem = ({ children, value, className, ...props }: SelectItemProps) => {
+  const { onValueChange } = React.useContext(SelectContext);
+  
+  return (
+    <li
+      className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className || ''}`}
+      onClick={() => onValueChange(value)}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          width="15"
+          height="15"
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4"
+        >
+          <path
+            d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.7953 9.87316L10.602 4.00999C10.7909 3.72109 11.1782 3.64004 11.4669 3.72684Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </span>
+      {children}
+    </li>
+  );
+};
+
+const SelectValue = ({ placeholder, className, ...props }: SelectValueProps) => {
+  const { value } = React.useContext(SelectContext);
+  
+  return (
+    <span className={className} {...props}>
+      {value || placeholder}
+    </span>
+  );
+};
+*/

src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator-root"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };

src/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left";
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	);
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sheet-header"
+			className={cn("flex flex-col gap-1.5 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sheet-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sheet,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription,
+};

src/components/ui/sidebar.tsx

@@ -0,0 +1,725 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+} from "./sheet";
+import { Skeleton } from "./skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "./tooltip";
+import { useIsMobile } from "./use-mobile";
+import { cn } from "./utils";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+function SidebarProvider({
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+		[setOpenProp, open],
+	);
+
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen, setOpenMobile]);
+
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<SidebarContextProps>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+		}),
+		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+	);
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div
+					data-slot="sidebar-wrapper"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH,
+							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+							...style,
+						} as React.CSSProperties
+					}
+					className={cn(
+						"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+				</div>
+			</TooltipProvider>
+		</SidebarContext.Provider>
+	);
+}
+
+function Sidebar({
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
+}) {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+	if (collapsible === "none") {
+		return (
+			<div
+				data-slot="sidebar"
+				className={cn(
+					"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-slot="sidebar"
+					data-mobile="true"
+					className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div
+			className="group peer text-sidebar-foreground hidden md:block"
+			data-state={state}
+			data-collapsible={state === "collapsed" ? collapsible : ""}
+			data-variant={variant}
+			data-side={side}
+			data-slot="sidebar"
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				data-slot="sidebar-gap"
+				className={cn(
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+				)}
+			/>
+			<div
+				data-slot="sidebar-container"
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+					side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className,
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					data-slot="sidebar-inner"
+					className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function SidebarTrigger({
+	className,
+	onClick,
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("size-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			data-sidebar="rail"
+			data-slot="sidebar-rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn(
+				"bg-background relative flex w-full flex-1 flex-col",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInput({
+	className,
+	...props
+}: React.ComponentProps<typeof Input>) {
+	return (
+		<Input
+			data-slot="sidebar-input"
+			data-sidebar="input"
+			className={cn("bg-background h-8 w-full shadow-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-header"
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-footer"
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="sidebar-separator"
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-content"
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group"
+			data-sidebar="group"
+			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupLabel({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-label"
+			data-sidebar="group-label"
+			className={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupAction({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-action"
+			data-sidebar="group-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupContent({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group-content"
+			data-sidebar="group-content"
+			className={cn("w-full text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu"
+			data-sidebar="menu"
+			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-item"
+			data-sidebar="menu-item"
+			className={cn("group/menu-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function SidebarMenuButton({
+	asChild = false,
+	isActive = false,
+	variant = "default",
+	size = "default",
+	tooltip,
+	className,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	isActive?: boolean;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+
+	const button = (
+		<Comp
+			data-slot="sidebar-menu-button"
+			data-sidebar="menu-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={state !== "collapsed" || isMobile}
+				{...tooltip}
+			/>
+		</Tooltip>
+	);
+}
+
+function SidebarMenuAction({
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	showOnHover?: boolean;
+}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-action"
+			data-sidebar="menu-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuBadge({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			className={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSkeleton({
+	className,
+	showIcon = false,
+	...props
+}: React.ComponentProps<"div"> & {
+	showIcon?: boolean;
+}) {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div
+			data-slot="sidebar-menu-skeleton"
+			data-sidebar="menu-skeleton"
+			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			{...props}
+		>
+			{showIcon && (
+				<Skeleton
+					className="size-4 rounded-md"
+					data-sidebar="menu-skeleton-icon"
+				/>
+			)}
+			<Skeleton
+				className="h-4 max-w-(--skeleton-width) flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu-sub"
+			data-sidebar="menu-sub"
+			className={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubItem({
+	className,
+	...props
+}: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-sub-item"
+			data-sidebar="menu-sub-item"
+			className={cn("group/menu-sub-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubButton({
+	asChild = false,
+	size = "md",
+	isActive = false,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+	size?: "sm" | "md";
+	isActive?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-sub-button"
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};

src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "./utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn("bg-accent animate-pulse rounded-md", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };

src/components/ui/slider.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { ulid } from "ulid";
+
+import { cn } from "./utils"; // Assuming cn is used and imported from ./utils
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(
+	(
+		{ className, children, value, defaultValue, min = 0, max = 100, ...props },
+		ref,
+	) => {
+		const _values = React.useMemo(
+			() =>
+				Array.isArray(value)
+					? value
+					: Array.isArray(defaultValue)
+						? defaultValue
+						: [min, max],
+			[value, defaultValue, min, max],
+		);
+
+		return (
+			<SliderPrimitive.Root
+				ref={ref}
+				defaultValue={defaultValue}
+				value={value}
+				min={min}
+				max={max}
+				className={cn(
+					"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50",
+					"data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:py-2",
+					"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4 data-[orientation=vertical]:px-2 data-[orientation=vertical]:flex-col",
+					className,
+				)}
+				{...props}
+			>
+				<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted">
+					<SliderPrimitive.Range className="absolute h-full bg-primary" />
+				</SliderPrimitive.Track>
+				{_values.map((_val, _index) => (
+					<SliderPrimitive.Thumb
+						key={ulid()} // Using ulid for unique keys
+						className="block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+					/>
+				))}
+				{children}
+			</SliderPrimitive.Root>
+		);
+	},
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

src/components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = "system" } = useTheme();
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			style={
+				{
+					"--normal-bg": "var(--popover)",
+					"--normal-text": "var(--popover-foreground)",
+					"--normal-border": "var(--border)",
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Switch({
+	className,
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					"bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export { Switch };

src/components/ui/table.tsx

@@ -0,0 +1,81 @@
+import {
+	Table as MantineTable,
+	type TableProps as MantineTableProps,
+} from "@mantine/core";
+import type React from "react";
+import { cn } from "./utils";
+
+interface TableComponentProps extends MantineTableProps {
+	// Add any specific props you had in your custom Table component
+}
+
+interface TableHeaderProps
+	extends React.HTMLAttributes<HTMLTableSectionElement> {}
+interface TableBodyProps
+	extends React.HTMLAttributes<HTMLTableSectionElement> {}
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
+interface TableHeadProps
+	extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {}
+interface TableCellProps
+	extends React.TdHTMLAttributes<HTMLTableDataCellElement> {}
+
+const Table = ({ className, children, ...props }: TableComponentProps) => (
+	<div className="relative w-full overflow-auto">
+		<MantineTable
+			className={cn("w-full caption-bottom text-sm", className)}
+			{...props}
+		>
+			{children}
+		</MantineTable>
+	</div>
+);
+
+const TableHeader = ({ className, children, ...props }: TableHeaderProps) => (
+	<thead className={cn("[&_tr]:border-b", className)} {...props}>
+		{children}
+	</thead>
+);
+
+const TableBody = ({ className, children, ...props }: TableBodyProps) => (
+	<tbody className={cn("[&_tr:last-child]:border-0", className)} {...props}>
+		{children}
+	</tbody>
+);
+
+const TableRow = ({ className, children, ...props }: TableRowProps) => (
+	<tr
+		className={cn(
+			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted dark:border-gray-700 dark:hover:bg-gray-800",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+	</tr>
+);
+
+const TableHead = ({ className, children, ...props }: TableHeadProps) => (
+	<th
+		className={cn(
+			"h-10 px-2 text-left align-middle font-medium text-muted-foreground dark:text-gray-400 [&:has([role=checkbox])]:pr-0",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+	</th>
+);
+
+const TableCell = ({ className, children, ...props }: TableCellProps) => (
+	<td
+		className={cn(
+			"p-2 align-middle [&:has([role=checkbox])]:pr-0 text-gray-900 dark:text-gray-300",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+	</td>
+);
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };

src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Tabs({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			className={cn("flex flex-col gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function TabsList({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			className={cn(
+				"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"data-[state=active]:bg-card dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsContent({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn("flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/components/ui/textarea.tsx

@@ -0,0 +1,25 @@
+import {
+	Textarea as MantineTextarea,
+	type TextareaProps as MantineTextareaProps,
+} from "@mantine/core";
+import React from "react";
+import { cn } from "./utils";
+
+interface TextareaProps extends MantineTextareaProps {
+	// Add any specific props you had in your custom Textarea component
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<MantineTextarea
+				ref={ref}
+				className={cn(className)} // Apply custom classNames if any
+				{...props}
+			/>
+		);
+	},
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

src/components/ui/toggle-group.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { toggleVariants } from "./toggle";
+import { cn } from "./utils";
+
+const ToggleGroupContext = React.createContext<
+	VariantProps<typeof toggleVariants>
+>({
+	size: "default",
+	variant: "default",
+});
+
+function ToggleGroup({
+	className,
+	variant,
+	size,
+	children,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
+		<ToggleGroupPrimitive.Root
+			data-slot="toggle-group"
+			data-variant={variant}
+			data-size={size}
+			className={cn(
+				"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+				className,
+			)}
+			{...props}
+		>
+			<ToggleGroupContext.Provider value={{ variant, size }}>
+				{children}
+			</ToggleGroupContext.Provider>
+		</ToggleGroupPrimitive.Root>
+	);
+}
+
+function ToggleGroupItem({
+	className,
+	children,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+	VariantProps<typeof toggleVariants>) {
+	const context = React.useContext(ToggleGroupContext);
+
+	return (
+		<ToggleGroupPrimitive.Item
+			data-slot="toggle-group-item"
+			data-variant={context.variant || variant}
+			data-size={context.size || size}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
+}
+
+export { ToggleGroup, ToggleGroupItem };

src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+const toggleVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-2 min-w-9",
+				sm: "h-8 px-1.5 min-w-8",
+				lg: "h-10 px-2.5 min-w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Toggle({
+	className,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
+		<TogglePrimitive.Root
+			data-slot="toggle"
+			className={cn(toggleVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Toggle, toggleVariants };

src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
+}
+
+function Tooltip({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/components/ui/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+		undefined,
+	);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}

src/components/ui/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

src/frontend.tsx

@@ -30,7 +30,74 @@ declare module "@tanstack/react-router" {
 }
 
 const theme = createTheme({
-	/** Theme customization here */
+	fontFamily: "Inter, Poppins, system-ui, sans-serif",
+	headings: {
+		fontFamily: "Inter, Poppins, system-ui, sans-serif",
+	},
+	colors: {
+		// Defined shades from 0-9 (lightest to darkest)
+		"darmasaba-navy": [
+			"#E1E4F2",
+			"#B9C2DD",
+			"#91A0C9",
+			"#697EBA",
+			"#4C6CAE",
+			"#3B5B97",
+			"#2C497F",
+			"#1E3766",
+			"#12264D",
+			"#071833",
+		],
+		"darmasaba-blue": [
+			"#E3F0FF",
+			"#B6D9FF",
+			"#89C2FF",
+			"#5CA9FF",
+			"#3B8FFF",
+			"#237AE0",
+			"#1C6BBF",
+			"#155BA0",
+			"#0E4980",
+			"#073260",
+		],
+		"darmasaba-success": [
+			"#E3F9E7",
+			"#BFEEC7",
+			"#9BD8A7",
+			"#77C387",
+			"#5DB572",
+			"#499A5D",
+			"#3C7F4A",
+			"#2F6438",
+			"#234926",
+			"#17301B",
+		],
+		"darmasaba-warning": [
+			"#FFF8E1",
+			"#FEE7B3",
+			"#FDD785",
+			"#FDC757",
+			"#FBBF3B",
+			"#E1AC23",
+			"#C2981D",
+			"#A38418",
+			"#856F12",
+			"#675A0D",
+		],
+		"darmasaba-danger": [
+			"#FFE3E3",
+			"#FFBABA",
+			"#FF9191",
+			"#FF6868",
+			"#FA4B4B",
+			"#E03333",
+			"#C22A2A",
+			"#A32020",
+			"#851616",
+			"#670C0C",
+		],
+	},
+	primaryColor: "darmasaba-blue",
 });
 
 const InspectorWrapper = IS_DEV
@@ -56,7 +123,7 @@ const app = (
 			});
 		}}
 	>
-		<MantineProvider theme={theme} defaultColorScheme="dark">
+		<MantineProvider theme={theme} defaultColorScheme="auto">
 			<ModalsProvider>
 				<RouterProvider router={router} />
 			</ModalsProvider>

src/index.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-/* :root {
+:root {
 	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 	line-height: 1.5;
 	font-weight: 400;
@@ -21,4 +21,4 @@ body {
 	place-items: center;
 	min-width: 320px;
 	min-height: 100vh;
-} */
+}

src/manifest.json

@@ -1,6 +1,6 @@
 {
-	"name": "Makuro Base Template",
+	"name": "Darmasaba Dashboard Noc",
-	"short_name": "Makuro",
+	"short_name": "Darmasaba",
 	"description": "A high-performance full-stack React template",
 	"start_url": "/",
 	"display": "standalone",

src/routeTree.gen.ts

@@ -11,16 +11,16 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SignupRouteImport } from './routes/signup'
 import { Route as SigninRouteImport } from './routes/signin'
-import { Route as DashboardRouteRouteImport } from './routes/dashboard/route'
+import { Route as AdminRouteRouteImport } from './routes/admin/route'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as UsersIndexRouteImport } from './routes/users/index'
 import { Route as ProfileIndexRouteImport } from './routes/profile/index'
-import { Route as DashboardIndexRouteImport } from './routes/dashboard/index'
+import { Route as AdminIndexRouteImport } from './routes/admin/index'
 import { Route as UsersIdRouteImport } from './routes/users/$id'
 import { Route as ProfileEditRouteImport } from './routes/profile/edit'
-import { Route as DashboardUsersRouteImport } from './routes/dashboard/users'
+import { Route as AdminUsersRouteImport } from './routes/admin/users'
-import { Route as DashboardSettingsRouteImport } from './routes/dashboard/settings'
+import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
-import { Route as DashboardApikeyRouteImport } from './routes/dashboard/apikey'
+import { Route as AdminApikeyRouteImport } from './routes/admin/apikey'
 
 const SignupRoute = SignupRouteImport.update({
   id: '/signup',
@@ -32,9 +32,9 @@ const SigninRoute = SigninRouteImport.update({
   path: '/signin',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardRouteRoute = DashboardRouteRouteImport.update({
+const AdminRouteRoute = AdminRouteRouteImport.update({
-  id: '/dashboard',
+  id: '/admin',
-  path: '/dashboard',
+  path: '/admin',
   getParentRoute: () => rootRouteImport,
 } as any)
 const IndexRoute = IndexRouteImport.update({
@@ -52,10 +52,10 @@ const ProfileIndexRoute = ProfileIndexRouteImport.update({
   path: '/profile/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardIndexRoute = DashboardIndexRouteImport.update({
+const AdminIndexRoute = AdminIndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => DashboardRouteRoute,
+  getParentRoute: () => AdminRouteRoute,
 } as any)
 const UsersIdRoute = UsersIdRouteImport.update({
   id: '/users/$id',
@@ -67,33 +67,33 @@ const ProfileEditRoute = ProfileEditRouteImport.update({
   path: '/profile/edit',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardUsersRoute = DashboardUsersRouteImport.update({
+const AdminUsersRoute = AdminUsersRouteImport.update({
   id: '/users',
   path: '/users',
-  getParentRoute: () => DashboardRouteRoute,
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const DashboardSettingsRoute = DashboardSettingsRouteImport.update({
+const AdminSettingsRoute = AdminSettingsRouteImport.update({
   id: '/settings',
   path: '/settings',
-  getParentRoute: () => DashboardRouteRoute,
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const DashboardApikeyRoute = DashboardApikeyRouteImport.update({
+const AdminApikeyRoute = AdminApikeyRouteImport.update({
   id: '/apikey',
   path: '/apikey',
-  getParentRoute: () => DashboardRouteRoute,
+  getParentRoute: () => AdminRouteRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/dashboard': typeof DashboardRouteRouteWithChildren
+  '/admin': typeof AdminRouteRouteWithChildren
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/dashboard/apikey': typeof DashboardApikeyRoute
+  '/admin/apikey': typeof AdminApikeyRoute
-  '/dashboard/settings': typeof DashboardSettingsRoute
+  '/admin/settings': typeof AdminSettingsRoute
-  '/dashboard/users': typeof DashboardUsersRoute
+  '/admin/users': typeof AdminUsersRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
-  '/dashboard/': typeof DashboardIndexRoute
+  '/admin/': typeof AdminIndexRoute
   '/profile/': typeof ProfileIndexRoute
   '/users/': typeof UsersIndexRoute
 }
@@ -101,27 +101,27 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/dashboard/apikey': typeof DashboardApikeyRoute
+  '/admin/apikey': typeof AdminApikeyRoute
-  '/dashboard/settings': typeof DashboardSettingsRoute
+  '/admin/settings': typeof AdminSettingsRoute
-  '/dashboard/users': typeof DashboardUsersRoute
+  '/admin/users': typeof AdminUsersRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
-  '/dashboard': typeof DashboardIndexRoute
+  '/admin': typeof AdminIndexRoute
   '/profile': typeof ProfileIndexRoute
   '/users': typeof UsersIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/dashboard': typeof DashboardRouteRouteWithChildren
+  '/admin': typeof AdminRouteRouteWithChildren
   '/signin': typeof SigninRoute
   '/signup': typeof SignupRoute
-  '/dashboard/apikey': typeof DashboardApikeyRoute
+  '/admin/apikey': typeof AdminApikeyRoute
-  '/dashboard/settings': typeof DashboardSettingsRoute
+  '/admin/settings': typeof AdminSettingsRoute
-  '/dashboard/users': typeof DashboardUsersRoute
+  '/admin/users': typeof AdminUsersRoute
   '/profile/edit': typeof ProfileEditRoute
   '/users/$id': typeof UsersIdRoute
-  '/dashboard/': typeof DashboardIndexRoute
+  '/admin/': typeof AdminIndexRoute
   '/profile/': typeof ProfileIndexRoute
   '/users/': typeof UsersIndexRoute
 }
@@ -129,15 +129,15 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
-    | '/dashboard'
+    | '/admin'
     | '/signin'
     | '/signup'
-    | '/dashboard/apikey'
+    | '/admin/apikey'
-    | '/dashboard/settings'
+    | '/admin/settings'
-    | '/dashboard/users'
+    | '/admin/users'
     | '/profile/edit'
     | '/users/$id'
-    | '/dashboard/'
+    | '/admin/'
     | '/profile/'
     | '/users/'
   fileRoutesByTo: FileRoutesByTo
@@ -145,33 +145,33 @@ export interface FileRouteTypes {
     | '/'
     | '/signin'
     | '/signup'
-    | '/dashboard/apikey'
+    | '/admin/apikey'
-    | '/dashboard/settings'
+    | '/admin/settings'
-    | '/dashboard/users'
+    | '/admin/users'
     | '/profile/edit'
     | '/users/$id'
-    | '/dashboard'
+    | '/admin'
     | '/profile'
     | '/users'
   id:
     | '__root__'
     | '/'
-    | '/dashboard'
+    | '/admin'
     | '/signin'
     | '/signup'
-    | '/dashboard/apikey'
+    | '/admin/apikey'
-    | '/dashboard/settings'
+    | '/admin/settings'
-    | '/dashboard/users'
+    | '/admin/users'
     | '/profile/edit'
     | '/users/$id'
-    | '/dashboard/'
+    | '/admin/'
     | '/profile/'
     | '/users/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  DashboardRouteRoute: typeof DashboardRouteRouteWithChildren
+  AdminRouteRoute: typeof AdminRouteRouteWithChildren
   SigninRoute: typeof SigninRoute
   SignupRoute: typeof SignupRoute
   ProfileEditRoute: typeof ProfileEditRoute
@@ -196,11 +196,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SigninRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dashboard': {
+    '/admin': {
-      id: '/dashboard'
+      id: '/admin'
-      path: '/dashboard'
+      path: '/admin'
-      fullPath: '/dashboard'
+      fullPath: '/admin'
-      preLoaderRoute: typeof DashboardRouteRouteImport
+      preLoaderRoute: typeof AdminRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/': {
@@ -224,12 +224,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProfileIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dashboard/': {
+    '/admin/': {
-      id: '/dashboard/'
+      id: '/admin/'
       path: '/'
-      fullPath: '/dashboard/'
+      fullPath: '/admin/'
-      preLoaderRoute: typeof DashboardIndexRouteImport
+      preLoaderRoute: typeof AdminIndexRouteImport
-      parentRoute: typeof DashboardRouteRoute
+      parentRoute: typeof AdminRouteRoute
     }
     '/users/$id': {
       id: '/users/$id'
@@ -245,51 +245,51 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProfileEditRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dashboard/users': {
+    '/admin/users': {
-      id: '/dashboard/users'
+      id: '/admin/users'
       path: '/users'
-      fullPath: '/dashboard/users'
+      fullPath: '/admin/users'
-      preLoaderRoute: typeof DashboardUsersRouteImport
+      preLoaderRoute: typeof AdminUsersRouteImport
-      parentRoute: typeof DashboardRouteRoute
+      parentRoute: typeof AdminRouteRoute
     }
-    '/dashboard/settings': {
+    '/admin/settings': {
-      id: '/dashboard/settings'
+      id: '/admin/settings'
       path: '/settings'
-      fullPath: '/dashboard/settings'
+      fullPath: '/admin/settings'
-      preLoaderRoute: typeof DashboardSettingsRouteImport
+      preLoaderRoute: typeof AdminSettingsRouteImport
-      parentRoute: typeof DashboardRouteRoute
+      parentRoute: typeof AdminRouteRoute
     }
-    '/dashboard/apikey': {
+    '/admin/apikey': {
-      id: '/dashboard/apikey'
+      id: '/admin/apikey'
       path: '/apikey'
-      fullPath: '/dashboard/apikey'
+      fullPath: '/admin/apikey'
-      preLoaderRoute: typeof DashboardApikeyRouteImport
+      preLoaderRoute: typeof AdminApikeyRouteImport
-      parentRoute: typeof DashboardRouteRoute
+      parentRoute: typeof AdminRouteRoute
     }
   }
 }
 
-interface DashboardRouteRouteChildren {
+interface AdminRouteRouteChildren {
-  DashboardApikeyRoute: typeof DashboardApikeyRoute
+  AdminApikeyRoute: typeof AdminApikeyRoute
-  DashboardSettingsRoute: typeof DashboardSettingsRoute
+  AdminSettingsRoute: typeof AdminSettingsRoute
-  DashboardUsersRoute: typeof DashboardUsersRoute
+  AdminUsersRoute: typeof AdminUsersRoute
-  DashboardIndexRoute: typeof DashboardIndexRoute
+  AdminIndexRoute: typeof AdminIndexRoute
 }
 
-const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
+const AdminRouteRouteChildren: AdminRouteRouteChildren = {
-  DashboardApikeyRoute: DashboardApikeyRoute,
+  AdminApikeyRoute: AdminApikeyRoute,
-  DashboardSettingsRoute: DashboardSettingsRoute,
+  AdminSettingsRoute: AdminSettingsRoute,
-  DashboardUsersRoute: DashboardUsersRoute,
+  AdminUsersRoute: AdminUsersRoute,
-  DashboardIndexRoute: DashboardIndexRoute,
+  AdminIndexRoute: AdminIndexRoute,
 }
 
-const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(
+const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
-  DashboardRouteRouteChildren,
+  AdminRouteRouteChildren,
 )
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  DashboardRouteRoute: DashboardRouteRouteWithChildren,
+  AdminRouteRoute: AdminRouteRouteWithChildren,
   SigninRoute: SigninRoute,
   SignupRoute: SignupRoute,
   ProfileEditRoute: ProfileEditRoute,

src/routes/admin/apikey.tsx

@@ -38,7 +38,7 @@ import { useCallback, useEffect, useState } from "react";
 import { protectedRouteMiddleware } from "../../middleware/authMiddleware";
 import { apiClient } from "../../utils/api-client";
 
-export const Route = createFileRoute("/dashboard/apikey")({
+export const Route = createFileRoute("/admin/apikey")({
 	beforeLoad: protectedRouteMiddleware,
 	component: DashboardApikeyComponent,
 });

src/routes/admin/index.tsx

@@ -1,4 +1,3 @@
-import { authClient } from "@/utils/auth-client";
 import {
 	Avatar,
 	Badge,
@@ -23,9 +22,10 @@ import {
 } from "@tabler/icons-react";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useSnapshot } from "valtio";
+import { authClient } from "@/utils/auth-client";
 import { authStore } from "../../store/auth";
 
-export const Route = createFileRoute("/dashboard/")({
+export const Route = createFileRoute("/admin/")({
 	component: DashboardComponent,
 });
 

src/routes/admin/route.tsx

@@ -35,7 +35,7 @@ import { protectedRouteMiddleware } from "@/middleware/authMiddleware";
 import { authClient } from "@/utils/auth-client";
 import { authStore } from "../../store/auth";
 
-export const Route = createFileRoute("/dashboard")({
+export const Route = createFileRoute("/admin")({
 	component: DashboardLayout,
 	beforeLoad: protectedRouteMiddleware,
 	onEnter({ context }) {
@@ -55,25 +55,25 @@ function DashboardLayout() {
 		{
 			icon: IconHome,
 			label: "Beranda",
-			to: "/dashboard",
+			to: "/admin",
 			description: "Ringkasan sistem & statistik",
 		},
 		{
 			icon: IconUsers,
 			label: "Pengguna",
-			to: "/dashboard/users",
+			to: "/admin/users",
 			description: "Kelola akun & hak akses",
 		},
 		{
 			icon: IconKey,
 			label: "API Key",
-			to: "/dashboard/apikey",
+			to: "/admin/apikey",
 			description: "Manajemen kunci akses API",
 		},
 		{
 			icon: IconSettings,
 			label: "Pengaturan",
-			to: "/dashboard/settings",
+			to: "/admin/settings",
 			description: "Konfigurasi sistem",
 		},
 	];
@@ -98,8 +98,8 @@ function DashboardLayout() {
 
 	const isActive = (path: string) => {
 		const current = location.pathname;
-		if (path === "/dashboard")
+		if (path === "/admin")
-			return current === "/dashboard" || current === "/dashboard/";
+			return current === "/admin" || current === "/admin/";
 		return current.startsWith(path);
 	};
 
@@ -213,7 +213,7 @@ function DashboardLayout() {
 									leftSection={
 										<IconSettings style={{ width: rem(14), height: rem(14) }} />
 									}
-									onClick={() => navigate({ to: "/dashboard/settings" })}
+									onClick={() => navigate({ to: "/admin/settings" })}
 								>
 									Pengaturan
 								</Menu.Item>

src/routes/admin/settings.tsx

@@ -1,11 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { protectedRouteMiddleware } from "../../middleware/authMiddleware";
 
-export const Route = createFileRoute("/dashboard/settings")({
+export const Route = createFileRoute("/admin/settings")({
 	beforeLoad: protectedRouteMiddleware,
 	component: DashboardSettingsComponent,
 });
 
 function DashboardSettingsComponent() {
-	return <div>Hello from /dashboard/settings!</div>;
+	return <div>Hello from /admin/settings!</div>;
 }

src/routes/admin/users.tsx

@@ -1,11 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { protectedRouteMiddleware } from "../../middleware/authMiddleware";
 
-export const Route = createFileRoute("/dashboard/users")({
+export const Route = createFileRoute("/admin/users")({
 	beforeLoad: protectedRouteMiddleware,
 	component: DashboardUsersComponent,
 });
 
 function DashboardUsersComponent() {
-	return <div>Hello from /dashboard/users!</div>;
+	return <div>Hello from /admin/users!</div>;
 }

src/routes/index.tsx

@@ -255,7 +255,7 @@ function HeroSection() {
 									<Group gap="md">
 										<Button
 											component={Link}
-											to="/dashboard"
+											to="/admin"
 											size="lg"
 											variant="filled"
 											rightSection={<IconRocket size="1.25rem" />}

src/routes/profile/index.tsx

@@ -157,7 +157,7 @@ function Profile() {
 								variant="light"
 								color="orange"
 								leftSection={<IconDashboard size={18} />}
-								onClick={() => navigate({ to: "/dashboard" })}
+								onClick={() => navigate({ to: "/admin" })}
 							>
 								Admin Panel
 							</Button>

src/routes/signup.tsx

@@ -39,7 +39,7 @@ function SignupComponent() {
 			if (error) {
 				setError(error.message || "Failed to sign up");
 			} else {
-				navigate({ to: "/dashboard" });
+				navigate({ to: "/admin" });
 			}
 		} catch {
 			setError("An unexpected error occurred");

src/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "makuro-v1";
+const CACHE_NAME = "darmasaba-v1";
 const ASSETS = ["/", "/index.html", "/logo.svg"];
 
 self.addEventListener("install", (event) => {

tailwind.config.js

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+	theme: {
+		extend: {
+			colors: {
+				"darmasaba-navy": {
+					DEFAULT: "#1E3A5F", // Primary navy color
+					50: "#E1E4F2",
+					100: "#B9C2DD",
+					200: "#91A0C9",
+					300: "#697EBA",
+					400: "#4C6CAE",
+					500: "#3B5B97",
+					600: "#2C497F",
+					700: "#1E3766",
+					800: "#12264D",
+					900: "#071833",
+				},
+				"darmasaba-blue": {
+					DEFAULT: "#3B82F6", // Primary blue color
+					50: "#E3F0FF",
+					100: "#B6D9FF",
+					200: "#89C2FF",
+					300: "#5CA9FF",
+					400: "#3B8FFF",
+					500: "#237AE0",
+					600: "#1C6BBF",
+					700: "#155BA0",
+					800: "#0E4980",
+					900: "#073260",
+				},
+				"darmasaba-success": {
+					DEFAULT: "#22C55E",
+					50: "#E3F9E7",
+					100: "#BFEEC7",
+					200: "#9BD8A7",
+					300: "#77C387",
+					400: "#5DB572",
+					500: "#499A5D",
+					600: "#3C7F4A",
+					700: "#2F6438",
+					800: "#234926",
+					900: "#17301B",
+				},
+				"darmasaba-warning": {
+					DEFAULT: "#FACC15",
+					50: "#FFF8E1",
+					100: "#FEE7B3",
+					200: "#FDD785",
+					300: "#FDC757",
+					400: "#FBBF3B",
+					500: "#E1AC23",
+					600: "#C2981D",
+					700: "#A38418",
+					800: "#856F12",
+					900: "#675A0D",
+				},
+				"darmasaba-danger": {
+					DEFAULT: "#EF4444",
+					50: "#FFE3E3",
+					100: "#FFBABA",
+					200: "#FF9191",
+					300: "#FF6868",
+					400: "#FA4B4B",
+					500: "#E03333",
+					600: "#C22A2A",
+					700: "#A32020",
+					800: "#851616",
+					900: "#670C0C",
+				},
+				"darmasaba-background": "#F5F8FB",
+			},
+		},
+	},
+	plugins: [],
+};