From ab86f68638cbffe3f623f78ca26afc43baf107d6 Mon Sep 17 00:00:00 2001
From: Twyco <twyco@icloud.com>
Date: Thu, 16 Apr 2026 01:48:14 +0200
Subject: [PATCH] first ui rework commit

---
 package-lock.json                             |  74 +++++++--
 package.json                                  |   6 +-
 resources/css/app.css                         | 113 +++++++-------
 resources/js/components/AppHeader.vue         | 140 ++++++------------
 resources/js/components/UserMenuContent.vue   |  35 ++++-
 .../js/components/ui/popover/Popover.vue      |  19 +++
 .../components/ui/popover/PopoverAnchor.vue   |  15 ++
 .../components/ui/popover/PopoverContent.vue  |  45 ++++++
 .../components/ui/popover/PopoverTrigger.vue  |  15 ++
 resources/js/components/ui/popover/index.ts   |   4 +
 .../js/components/ui/progress/Progress.vue    |  38 +++++
 resources/js/components/ui/progress/index.ts  |   1 +
 .../components/ui/radio-group/RadioGroup.vue  |  25 ++++
 .../ui/radio-group/RadioGroupItem.vue         |  40 +++++
 .../js/components/ui/radio-group/index.ts     |   2 +
 .../components/ui/scroll-area/ScrollArea.vue  |  33 +++++
 .../components/ui/scroll-area/ScrollBar.vue   |  32 ++++
 .../js/components/ui/scroll-area/index.ts     |   2 +
 resources/js/components/ui/sonner/Sonner.vue  |  42 ++++++
 resources/js/components/ui/sonner/index.ts    |   1 +
 resources/js/components/ui/switch/Switch.vue  |  38 +++++
 resources/js/components/ui/switch/index.ts    |   1 +
 resources/js/components/ui/table/Table.vue    |  16 ++
 .../js/components/ui/table/TableBody.vue      |  17 +++
 .../js/components/ui/table/TableCaption.vue   |  17 +++
 .../js/components/ui/table/TableCell.vue      |  22 +++
 .../js/components/ui/table/TableEmpty.vue     |  34 +++++
 .../js/components/ui/table/TableFooter.vue    |  17 +++
 .../js/components/ui/table/TableHead.vue      |  17 +++
 .../js/components/ui/table/TableHeader.vue    |  17 +++
 resources/js/components/ui/table/TableRow.vue |  17 +++
 resources/js/components/ui/table/index.ts     |   9 ++
 resources/js/components/ui/table/utils.ts     |  10 ++
 resources/js/components/ui/tabs/Tabs.vue      |  24 +++
 .../js/components/ui/tabs/TabsContent.vue     |  21 +++
 resources/js/components/ui/tabs/TabsList.vue  |  24 +++
 .../js/components/ui/tabs/TabsTrigger.vue     |  26 ++++
 resources/js/components/ui/tabs/index.ts      |   4 +
 .../js/components/ui/textarea/Textarea.vue    |  28 ++++
 resources/js/components/ui/textarea/index.ts  |   1 +
 .../ui/toggle-group/ToggleGroup.vue           |  49 ++++++
 .../ui/toggle-group/ToggleGroupItem.vue       |  46 ++++++
 .../js/components/ui/toggle-group/index.ts    |   2 +
 resources/js/components/ui/toggle/Toggle.vue  |  35 +++++
 resources/js/components/ui/toggle/index.ts    |  28 ++++
 resources/js/layouts/AppLayout.vue            |   2 +-
 resources/views/app.blade.php                 |   6 +-
 47 files changed, 1045 insertions(+), 165 deletions(-)
 create mode 100644 resources/js/components/ui/popover/Popover.vue
 create mode 100644 resources/js/components/ui/popover/PopoverAnchor.vue
 create mode 100644 resources/js/components/ui/popover/PopoverContent.vue
 create mode 100644 resources/js/components/ui/popover/PopoverTrigger.vue
 create mode 100644 resources/js/components/ui/popover/index.ts
 create mode 100644 resources/js/components/ui/progress/Progress.vue
 create mode 100644 resources/js/components/ui/progress/index.ts
 create mode 100644 resources/js/components/ui/radio-group/RadioGroup.vue
 create mode 100644 resources/js/components/ui/radio-group/RadioGroupItem.vue
 create mode 100644 resources/js/components/ui/radio-group/index.ts
 create mode 100644 resources/js/components/ui/scroll-area/ScrollArea.vue
 create mode 100644 resources/js/components/ui/scroll-area/ScrollBar.vue
 create mode 100644 resources/js/components/ui/scroll-area/index.ts
 create mode 100644 resources/js/components/ui/sonner/Sonner.vue
 create mode 100644 resources/js/components/ui/sonner/index.ts
 create mode 100644 resources/js/components/ui/switch/Switch.vue
 create mode 100644 resources/js/components/ui/switch/index.ts
 create mode 100644 resources/js/components/ui/table/Table.vue
 create mode 100644 resources/js/components/ui/table/TableBody.vue
 create mode 100644 resources/js/components/ui/table/TableCaption.vue
 create mode 100644 resources/js/components/ui/table/TableCell.vue
 create mode 100644 resources/js/components/ui/table/TableEmpty.vue
 create mode 100644 resources/js/components/ui/table/TableFooter.vue
 create mode 100644 resources/js/components/ui/table/TableHead.vue
 create mode 100644 resources/js/components/ui/table/TableHeader.vue
 create mode 100644 resources/js/components/ui/table/TableRow.vue
 create mode 100644 resources/js/components/ui/table/index.ts
 create mode 100644 resources/js/components/ui/table/utils.ts
 create mode 100644 resources/js/components/ui/tabs/Tabs.vue
 create mode 100644 resources/js/components/ui/tabs/TabsContent.vue
 create mode 100644 resources/js/components/ui/tabs/TabsList.vue
 create mode 100644 resources/js/components/ui/tabs/TabsTrigger.vue
 create mode 100644 resources/js/components/ui/tabs/index.ts
 create mode 100644 resources/js/components/ui/textarea/Textarea.vue
 create mode 100644 resources/js/components/ui/textarea/index.ts
 create mode 100644 resources/js/components/ui/toggle-group/ToggleGroup.vue
 create mode 100644 resources/js/components/ui/toggle-group/ToggleGroupItem.vue
 create mode 100644 resources/js/components/ui/toggle-group/index.ts
 create mode 100644 resources/js/components/ui/toggle/Toggle.vue
 create mode 100644 resources/js/components/ui/toggle/index.ts

diff --git a/package-lock.json b/package-lock.json
index a81d29e..079c0ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,17 +6,19 @@
         "": {
             "dependencies": {
                 "@inertiajs/vue3": "^2.3.7",
+                "@tanstack/vue-table": "^8.21.3",
                 "@vueuse/core": "^12.8.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "laravel-vite-plugin": "^3.0.0",
                 "lucide-vue-next": "^0.468.0",
-                "reka-ui": "^2.6.1",
+                "reka-ui": "^2.9.6",
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
                 "tw-animate-css": "^1.2.5",
                 "vue": "^3.5.13",
-                "vue-input-otp": "^0.3.2"
+                "vue-input-otp": "^0.3.2",
+                "vue-sonner": "^2.0.9"
             },
             "devDependencies": {
                 "@eslint/js": "^9.39.4",
@@ -1236,6 +1238,19 @@
                 "vite": "^5.2.0 || ^6 || ^7 || ^8"
             }
         },
+        "node_modules/@tanstack/table-core": {
+            "version": "8.21.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+            "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
         "node_modules/@tanstack/virtual-core": {
             "version": "3.13.23",
             "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.23.tgz",
@@ -1246,6 +1261,25 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
+        "node_modules/@tanstack/vue-table": {
+            "version": "8.21.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-table/-/vue-table-8.21.3.tgz",
+            "integrity": "sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/table-core": "8.21.3"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2"
+            }
+        },
         "node_modules/@tanstack/vue-virtual": {
             "version": "3.13.23",
             "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.23.tgz",
@@ -2758,9 +2792,9 @@
             }
         },
         "node_modules/defu": {
-            "version": "6.1.4",
-            "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-            "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+            "version": "6.1.7",
+            "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+            "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
             "license": "MIT"
         },
         "node_modules/delayed-stream": {
@@ -5649,9 +5683,9 @@
             }
         },
         "node_modules/reka-ui": {
-            "version": "2.9.2",
-            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.9.2.tgz",
-            "integrity": "sha512-/t4e6y1hcG+uDuRfpg6tbMz3uUEvRzNco6NeYTufoJeUghy5Iosxos5YL/p+ieAsid84sdMX9OrgDqpEuCJhBw==",
+            "version": "2.9.6",
+            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.9.6.tgz",
+            "integrity": "sha512-K6bL457owpvWONc7hsjFxo3HDC9s6IzhRqShW0w9JSKelPGfRbkHD558UQTn/NH1cvrXVHygKyC7fExFmRketg==",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.6.13",
@@ -5662,7 +5696,7 @@
                 "@vueuse/core": "^14.1.0",
                 "@vueuse/shared": "^14.1.0",
                 "aria-hidden": "^1.2.4",
-                "defu": "^6.1.4",
+                "defu": "^6.1.5",
                 "ohash": "^2.0.11"
             },
             "funding": {
@@ -6753,6 +6787,28 @@
                 "vue": "^3.2.0"
             }
         },
+        "node_modules/vue-sonner": {
+            "version": "2.0.9",
+            "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.9.tgz",
+            "integrity": "sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@nuxt/kit": "^4.0.3",
+                "@nuxt/schema": "^4.0.3",
+                "nuxt": "^4.0.3"
+            },
+            "peerDependenciesMeta": {
+                "@nuxt/kit": {
+                    "optional": true
+                },
+                "@nuxt/schema": {
+                    "optional": true
+                },
+                "nuxt": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/vue-tsc": {
             "version": "2.2.12",
             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.12.tgz",
diff --git a/package.json b/package.json
index e221a50..dac3650 100644
--- a/package.json
+++ b/package.json
@@ -40,17 +40,19 @@
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.3.7",
+        "@tanstack/vue-table": "^8.21.3",
         "@vueuse/core": "^12.8.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "laravel-vite-plugin": "^3.0.0",
         "lucide-vue-next": "^0.468.0",
-        "reka-ui": "^2.6.1",
+        "reka-ui": "^2.9.6",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
         "tw-animate-css": "^1.2.5",
         "vue": "^3.5.13",
-        "vue-input-otp": "^0.3.2"
+        "vue-input-otp": "^0.3.2",
+        "vue-sonner": "^2.0.9"
     },
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "4.9.5",
diff --git a/resources/css/app.css b/resources/css/app.css
index 6f9d1f5..4b67ee7 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -9,10 +9,13 @@
 
 @theme inline {
     --font-sans:
-        Instrument Sans, ui-sans-serif, system-ui, sans-serif,
+        Inter, ui-sans-serif, system-ui, sans-serif,
         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
         'Noto Color Emoji';
 
+    --font-display:
+        Manrope, ui-sans-serif, system-ui, sans-serif;
+
     --radius-lg: var(--radius);
     --radius-md: calc(var(--radius) - 2px);
     --radius-sm: calc(var(--radius) - 4px);
@@ -83,83 +86,83 @@
     body,
     html {
         --font-sans:
-            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
+            'Inter', ui-sans-serif, system-ui, sans-serif,
             'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
             'Noto Color Emoji';
     }
 }
 
 :root {
-    --background: hsl(0 0% 100%);
-    --foreground: hsl(0 0% 3.9%);
+    --background: hsl(120 10% 98%);
+    --foreground: hsl(120 5% 12%);
     --card: hsl(0 0% 100%);
-    --card-foreground: hsl(0 0% 3.9%);
+    --card-foreground: hsl(120 5% 12%);
     --popover: hsl(0 0% 100%);
-    --popover-foreground: hsl(0 0% 3.9%);
-    --primary: hsl(0 0% 9%);
-    --primary-foreground: hsl(0 0% 98%);
-    --secondary: hsl(0 0% 92.1%);
-    --secondary-foreground: hsl(0 0% 9%);
-    --muted: hsl(0 0% 96.1%);
-    --muted-foreground: hsl(0 0% 45.1%);
-    --accent: hsl(0 0% 96.1%);
-    --accent-foreground: hsl(0 0% 9%);
+    --popover-foreground: hsl(120 5% 12%);
+    --primary: hsl(107 80% 24%);
+    --primary-foreground: hsl(107 30% 97%);
+    --secondary: hsl(107 8% 91%);
+    --secondary-foreground: hsl(107 10% 18%);
+    --muted: hsl(107 8% 95%);
+    --muted-foreground: hsl(107 5% 42%);
+    --accent: hsl(107 10% 93%);
+    --accent-foreground: hsl(107 10% 18%);
     --destructive: hsl(0 84.2% 60.2%);
     --destructive-foreground: hsl(0 0% 98%);
-    --border: hsl(0 0% 92.8%);
-    --input: hsl(0 0% 89.8%);
-    --ring: hsl(0 0% 3.9%);
-    --chart-1: hsl(12 76% 61%);
+    --border: hsl(107 8% 90%);
+    --input: hsl(107 8% 87%);
+    --ring: hsl(107 80% 24%);
+    --chart-1: hsl(107 80% 30%);
     --chart-2: hsl(173 58% 39%);
     --chart-3: hsl(197 37% 24%);
     --chart-4: hsl(43 74% 66%);
     --chart-5: hsl(27 87% 67%);
-    --radius: 0.5rem;
-    --sidebar-background: hsl(0 0% 98%);
-    --sidebar-foreground: hsl(240 5.3% 26.1%);
-    --sidebar-primary: hsl(0 0% 10%);
-    --sidebar-primary-foreground: hsl(0 0% 98%);
-    --sidebar-accent: hsl(0 0% 94%);
-    --sidebar-accent-foreground: hsl(0 0% 30%);
-    --sidebar-border: hsl(0 0% 91%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
-    --sidebar: hsl(0 0% 98%);
+    --radius: 0.625rem;
+    --sidebar-background: hsl(120 10% 97%);
+    --sidebar-foreground: hsl(120 5% 26%);
+    --sidebar-primary: hsl(107 80% 24%);
+    --sidebar-primary-foreground: hsl(107 30% 97%);
+    --sidebar-accent: hsl(107 10% 93%);
+    --sidebar-accent-foreground: hsl(107 10% 25%);
+    --sidebar-border: hsl(107 8% 90%);
+    --sidebar-ring: hsl(107 80% 24%);
+    --sidebar: hsl(120 10% 97%);
 }
 
 .dark {
-    --background: hsl(0 0% 3.9%);
-    --foreground: hsl(0 0% 98%);
-    --card: hsl(0 0% 3.9%);
-    --card-foreground: hsl(0 0% 98%);
-    --popover: hsl(0 0% 3.9%);
-    --popover-foreground: hsl(0 0% 98%);
-    --primary: hsl(0 0% 98%);
-    --primary-foreground: hsl(0 0% 9%);
-    --secondary: hsl(0 0% 14.9%);
-    --secondary-foreground: hsl(0 0% 98%);
-    --muted: hsl(0 0% 16.08%);
-    --muted-foreground: hsl(0 0% 63.9%);
-    --accent: hsl(0 0% 14.9%);
-    --accent-foreground: hsl(0 0% 98%);
+    --background: hsl(120 5% 6%);
+    --foreground: hsl(120 5% 95%);
+    --card: hsl(120 5% 8%);
+    --card-foreground: hsl(120 5% 95%);
+    --popover: hsl(120 5% 8%);
+    --popover-foreground: hsl(120 5% 95%);
+    --primary: hsl(107 70% 55%);
+    --primary-foreground: hsl(107 80% 8%);
+    --secondary: hsl(107 5% 16%);
+    --secondary-foreground: hsl(107 5% 90%);
+    --muted: hsl(107 5% 14%);
+    --muted-foreground: hsl(107 5% 60%);
+    --accent: hsl(107 8% 16%);
+    --accent-foreground: hsl(107 5% 90%);
     --destructive: hsl(0 84% 60%);
     --destructive-foreground: hsl(0 0% 98%);
-    --border: hsl(0 0% 14.9%);
-    --input: hsl(0 0% 14.9%);
-    --ring: hsl(0 0% 83.1%);
-    --chart-1: hsl(220 70% 50%);
+    --border: hsl(107 5% 16%);
+    --input: hsl(107 5% 16%);
+    --ring: hsl(107 70% 55%);
+    --chart-1: hsl(107 60% 45%);
     --chart-2: hsl(160 60% 45%);
     --chart-3: hsl(30 80% 55%);
     --chart-4: hsl(280 65% 60%);
     --chart-5: hsl(340 75% 55%);
-    --sidebar-background: hsl(0 0% 7%);
-    --sidebar-foreground: hsl(0 0% 95.9%);
-    --sidebar-primary: hsl(360, 100%, 100%);
-    --sidebar-primary-foreground: hsl(0 0% 100%);
-    --sidebar-accent: hsl(0 0% 15.9%);
-    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-border: hsl(0 0% 15.9%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
-    --sidebar: hsl(240 5.9% 10%);
+    --sidebar-background: hsl(120 5% 7%);
+    --sidebar-foreground: hsl(120 5% 92%);
+    --sidebar-primary: hsl(107 70% 55%);
+    --sidebar-primary-foreground: hsl(107 80% 8%);
+    --sidebar-accent: hsl(107 8% 16%);
+    --sidebar-accent-foreground: hsl(107 5% 88%);
+    --sidebar-border: hsl(107 5% 16%);
+    --sidebar-ring: hsl(107 70% 55%);
+    --sidebar: hsl(120 5% 7%);
 }
 
 @layer base {
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index ca3cb1c..0e1551f 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
+import { Folder, LayoutGrid, Menu, Search, Shield, Users } from 'lucide-vue-next';
 import { computed } from 'vue';
 import AppLogo from '@/components/AppLogo.vue';
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
@@ -25,17 +25,13 @@ import {
     SheetTitle,
     SheetTrigger,
 } from '@/components/ui/sheet';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
 import { getInitials } from '@/composables/useInitials';
-import { toUrl } from '@/lib/utils';
 import { dashboard } from '@/routes/index';
+import { index as projectsIndex } from '@/routes/projects';
+import { index as adminUsers } from '@/routes/admin/users';
+import { index as teamsIndex } from '@/routes/teams';
 import type { BreadcrumbItem, NavItem } from '@/types';
 
 type Props = {
@@ -53,31 +49,43 @@ const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();
 const activeItemStyles =
     'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
 
-const mainNavItems: NavItem[] = [
-    {
-        title: 'Dashboard',
-        href: dashboard(),
-        icon: LayoutGrid,
-    },
-];
+const mainNavItems = computed<NavItem[]>(() => {
+    const items: NavItem[] = [
+        {
+            title: 'Dashboard',
+            href: dashboard(),
+            icon: LayoutGrid,
+        },
+        {
+            title: 'Projects',
+            href: projectsIndex(),
+            icon: Folder,
+        },
+    ];
 
-const rightNavItems: NavItem[] = [
-    {
-        title: 'Repository',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: Folder,
-    },
-    {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits#vue',
-        icon: BookOpen,
-    },
-];
+    if (page.props.auth.permissions.globalAdmin) {
+        items.push({
+            title: 'Users',
+            href: adminUsers(),
+            icon: Shield,
+        });
+    }
+
+    if (page.props.auth.permissions.canManageTeams) {
+        items.push({
+            title: 'Teams',
+            href: teamsIndex(),
+            icon: Users,
+        });
+    }
+
+    return items;
+});
 </script>
 
 <template>
     <div>
-        <div class="border-sidebar-border/80 border-b">
+        <div class="sticky top-0 z-50 bg-background/80 backdrop-blur-md">
             <div class="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
                 <!-- Mobile Menu -->
                 <div class="lg:hidden">
@@ -101,7 +109,7 @@ const rightNavItems: NavItem[] = [
                                 />
                             </SheetHeader>
                             <div
-                                class="flex h-full flex-1 flex-col justify-between space-y-4 py-6"
+                                class="flex h-full flex-1 flex-col space-y-4 py-6"
                             >
                                 <nav class="-mx-3 space-y-1">
                                     <Link
@@ -124,23 +132,6 @@ const rightNavItems: NavItem[] = [
                                         {{ item.title }}
                                     </Link>
                                 </nav>
-                                <div class="flex flex-col space-y-4">
-                                    <a
-                                        v-for="item in rightNavItems"
-                                        :key="item.title"
-                                        :href="toUrl(item.href)"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="flex items-center space-x-2 text-sm font-medium"
-                                    >
-                                        <component
-                                            v-if="item.icon"
-                                            :is="item.icon"
-                                            class="h-5 w-5"
-                                        />
-                                        <span>{{ item.title }}</span>
-                                    </a>
-                                </div>
                             </div>
                         </SheetContent>
                     </Sheet>
@@ -189,54 +180,15 @@ const rightNavItems: NavItem[] = [
                 </div>
 
                 <div class="ml-auto flex items-center space-x-2">
-                    <div class="relative flex items-center space-x-1">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            class="group h-9 w-9 cursor-pointer"
-                        >
-                            <Search
-                                class="size-5 opacity-80 group-hover:opacity-100"
-                            />
-                        </Button>
-
-                        <div class="hidden space-x-1 lg:flex">
-                            <template
-                                v-for="item in rightNavItems"
-                                :key="item.title"
-                            >
-                                <TooltipProvider :delay-duration="0">
-                                    <Tooltip>
-                                        <TooltipTrigger>
-                                            <Button
-                                                variant="ghost"
-                                                size="icon"
-                                                as-child
-                                                class="group h-9 w-9 cursor-pointer"
-                                            >
-                                                <a
-                                                    :href="toUrl(item.href)"
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                >
-                                                    <span class="sr-only">{{
-                                                        item.title
-                                                    }}</span>
-                                                    <component
-                                                        :is="item.icon"
-                                                        class="size-5 opacity-80 group-hover:opacity-100"
-                                                    />
-                                                </a>
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            <p>{{ item.title }}</p>
-                                        </TooltipContent>
-                                    </Tooltip>
-                                </TooltipProvider>
-                            </template>
-                        </div>
-                    </div>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        class="group h-9 w-9 cursor-pointer"
+                    >
+                        <Search
+                            class="size-5 opacity-80 group-hover:opacity-100"
+                        />
+                    </Button>
 
                     <DropdownMenu>
                         <DropdownMenuTrigger :as-child="true">
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
index a7e6e81..f1491e0 100644
--- a/resources/js/components/UserMenuContent.vue
+++ b/resources/js/components/UserMenuContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
-import { LogOut, Settings } from 'lucide-vue-next';
+import { LogOut, Monitor, Moon, Settings, Sun } from 'lucide-vue-next';
 import {
     DropdownMenuGroup,
     DropdownMenuItem,
@@ -8,6 +8,7 @@ import {
     DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
 import UserInfo from '@/components/UserInfo.vue';
+import { useAppearance } from '@/composables/useAppearance';
 import { logout } from '@/routes/index';
 import { edit } from '@/routes/profile/index';
 import type { User } from '@/types';
@@ -21,6 +22,8 @@ const handleLogout = () => {
 };
 
 defineProps<Props>();
+
+const { appearance, updateAppearance } = useAppearance();
 </script>
 
 <template>
@@ -39,6 +42,36 @@ defineProps<Props>();
         </DropdownMenuItem>
     </DropdownMenuGroup>
     <DropdownMenuSeparator />
+    <DropdownMenuGroup>
+        <DropdownMenuLabel class="text-xs font-medium text-muted-foreground">
+            Appearance
+        </DropdownMenuLabel>
+        <DropdownMenuItem
+            class="cursor-pointer"
+            :class="{ 'bg-accent': appearance === 'light' }"
+            @click="updateAppearance('light')"
+        >
+            <Sun class="mr-2 h-4 w-4" />
+            Light
+        </DropdownMenuItem>
+        <DropdownMenuItem
+            class="cursor-pointer"
+            :class="{ 'bg-accent': appearance === 'dark' }"
+            @click="updateAppearance('dark')"
+        >
+            <Moon class="mr-2 h-4 w-4" />
+            Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem
+            class="cursor-pointer"
+            :class="{ 'bg-accent': appearance === 'system' }"
+            @click="updateAppearance('system')"
+        >
+            <Monitor class="mr-2 h-4 w-4" />
+            System
+        </DropdownMenuItem>
+    </DropdownMenuGroup>
+    <DropdownMenuSeparator />
     <DropdownMenuItem :as-child="true">
         <Link
             class="block w-full cursor-pointer"
diff --git a/resources/js/components/ui/popover/Popover.vue b/resources/js/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..4efdb98
--- /dev/null
+++ b/resources/js/components/ui/popover/Popover.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>
diff --git a/resources/js/components/ui/popover/PopoverAnchor.vue b/resources/js/components/ui/popover/PopoverAnchor.vue
new file mode 100644
index 0000000..49e01db
--- /dev/null
+++ b/resources/js/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>
diff --git a/resources/js/components/ui/popover/PopoverContent.vue b/resources/js/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..cf1e55c
--- /dev/null
+++ b/resources/js/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        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 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/resources/js/components/ui/popover/PopoverTrigger.vue b/resources/js/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..fd3b497
--- /dev/null
+++ b/resources/js/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/resources/js/components/ui/popover/index.ts b/resources/js/components/ui/popover/index.ts
new file mode 100644
index 0000000..66edf89
--- /dev/null
+++ b/resources/js/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
diff --git a/resources/js/components/ui/progress/Progress.vue b/resources/js/components/ui/progress/Progress.vue
new file mode 100644
index 0000000..5532af7
--- /dev/null
+++ b/resources/js/components/ui/progress/Progress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/resources/js/components/ui/progress/index.ts b/resources/js/components/ui/progress/index.ts
new file mode 100644
index 0000000..8598b96
--- /dev/null
+++ b/resources/js/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"
diff --git a/resources/js/components/ui/radio-group/RadioGroup.vue b/resources/js/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 0000000..54045c4
--- /dev/null
+++ b/resources/js/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-slot="slotProps"
+    data-slot="radio-group"
+    :class="cn('grid gap-3', props.class)"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </RadioGroupRoot>
+</template>
diff --git a/resources/js/components/ui/radio-group/RadioGroupItem.vue b/resources/js/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..2488c9d
--- /dev/null
+++ b/resources/js/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CircleIcon } from "lucide-vue-next"
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      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',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <slot>
+        <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/resources/js/components/ui/radio-group/index.ts b/resources/js/components/ui/radio-group/index.ts
new file mode 100644
index 0000000..7cb0e3b
--- /dev/null
+++ b/resources/js/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.vue"
+export { default as RadioGroupItem } from "./RadioGroupItem.vue"
diff --git a/resources/js/components/ui/scroll-area/ScrollArea.vue b/resources/js/components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000..6112caa
--- /dev/null
+++ b/resources/js/components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import ScrollBar from "./ScrollBar.vue"
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/resources/js/components/ui/scroll-area/ScrollBar.vue b/resources/js/components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000..a0b6f9b
--- /dev/null
+++ b/resources/js/components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      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',
+         props.class)"
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/resources/js/components/ui/scroll-area/index.ts b/resources/js/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..c416759
--- /dev/null
+++ b/resources/js/components/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue"
+export { default as ScrollBar } from "./ScrollBar.vue"
diff --git a/resources/js/components/ui/sonner/Sonner.vue b/resources/js/components/ui/sonner/Sonner.vue
new file mode 100644
index 0000000..6830896
--- /dev/null
+++ b/resources/js/components/ui/sonner/Sonner.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
+import { Toaster as Sonner } from "vue-sonner"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    }"
+    v-bind="props"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>
diff --git a/resources/js/components/ui/sonner/index.ts b/resources/js/components/ui/sonner/index.ts
new file mode 100644
index 0000000..6673112
--- /dev/null
+++ b/resources/js/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue"
diff --git a/resources/js/components/ui/switch/Switch.vue b/resources/js/components/ui/switch/Switch.vue
new file mode 100644
index 0000000..2e725ed
--- /dev/null
+++ b/resources/js/components/ui/switch/Switch.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SwitchRoot,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-slot="slotProps"
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="cn(
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input 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 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="cn('bg-background dark:data-[state=unchecked]:bg-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')"
+    >
+      <slot name="thumb" v-bind="slotProps" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>
diff --git a/resources/js/components/ui/switch/index.ts b/resources/js/components/ui/switch/index.ts
new file mode 100644
index 0000000..cc081f3
--- /dev/null
+++ b/resources/js/components/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue"
diff --git a/resources/js/components/ui/table/Table.vue b/resources/js/components/ui/table/Table.vue
new file mode 100644
index 0000000..0d0cd9b
--- /dev/null
+++ b/resources/js/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-auto">
+    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/resources/js/components/ui/table/TableBody.vue b/resources/js/components/ui/table/TableBody.vue
new file mode 100644
index 0000000..d14a2d3
--- /dev/null
+++ b/resources/js/components/ui/table/TableBody.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tbody
+    data-slot="table-body"
+    :class="cn('[&_tr:last-child]:border-0', props.class)"
+  >
+    <slot />
+  </tbody>
+</template>
diff --git a/resources/js/components/ui/table/TableCaption.vue b/resources/js/components/ui/table/TableCaption.vue
new file mode 100644
index 0000000..3630084
--- /dev/null
+++ b/resources/js/components/ui/table/TableCaption.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>
diff --git a/resources/js/components/ui/table/TableCell.vue b/resources/js/components/ui/table/TableCell.vue
new file mode 100644
index 0000000..d6e9ed2
--- /dev/null
+++ b/resources/js/components/ui/table/TableCell.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/resources/js/components/ui/table/TableEmpty.vue b/resources/js/components/ui/table/TableEmpty.vue
new file mode 100644
index 0000000..9519328
--- /dev/null
+++ b/resources/js/components/ui/table/TableEmpty.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/resources/js/components/ui/table/TableFooter.vue b/resources/js/components/ui/table/TableFooter.vue
new file mode 100644
index 0000000..29e0ce9
--- /dev/null
+++ b/resources/js/components/ui/table/TableFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>
diff --git a/resources/js/components/ui/table/TableHead.vue b/resources/js/components/ui/table/TableHead.vue
new file mode 100644
index 0000000..f83efe5
--- /dev/null
+++ b/resources/js/components/ui/table/TableHead.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
+  >
+    <slot />
+  </th>
+</template>
diff --git a/resources/js/components/ui/table/TableHeader.vue b/resources/js/components/ui/table/TableHeader.vue
new file mode 100644
index 0000000..b4ab5cf
--- /dev/null
+++ b/resources/js/components/ui/table/TableHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <thead
+    data-slot="table-header"
+    :class="cn('[&_tr]:border-b', props.class)"
+  >
+    <slot />
+  </thead>
+</template>
diff --git a/resources/js/components/ui/table/TableRow.vue b/resources/js/components/ui/table/TableRow.vue
new file mode 100644
index 0000000..8f1d172
--- /dev/null
+++ b/resources/js/components/ui/table/TableRow.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
+  >
+    <slot />
+  </tr>
+</template>
diff --git a/resources/js/components/ui/table/index.ts b/resources/js/components/ui/table/index.ts
new file mode 100644
index 0000000..3be308b
--- /dev/null
+++ b/resources/js/components/ui/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"
diff --git a/resources/js/components/ui/table/utils.ts b/resources/js/components/ui/table/utils.ts
new file mode 100644
index 0000000..3d4fd12
--- /dev/null
+++ b/resources/js/components/ui/table/utils.ts
@@ -0,0 +1,10 @@
+import type { Updater } from "@tanstack/vue-table"
+
+import type { Ref } from "vue"
+import { isFunction } from "@tanstack/vue-table"
+
+export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
+  ref.value = isFunction(updaterOrValue)
+    ? updaterOrValue(ref.value)
+    : updaterOrValue
+}
diff --git a/resources/js/components/ui/tabs/Tabs.vue b/resources/js/components/ui/tabs/Tabs.vue
new file mode 100644
index 0000000..d260a15
--- /dev/null
+++ b/resources/js/components/ui/tabs/Tabs.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TabsRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col gap-2', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TabsRoot>
+</template>
diff --git a/resources/js/components/ui/tabs/TabsContent.vue b/resources/js/components/ui/tabs/TabsContent.vue
new file mode 100644
index 0000000..3186ee8
--- /dev/null
+++ b/resources/js/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/resources/js/components/ui/tabs/TabsList.vue b/resources/js/components/ui/tabs/TabsList.vue
new file mode 100644
index 0000000..a64a2da
--- /dev/null
+++ b/resources/js/components/ui/tabs/TabsList.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/resources/js/components/ui/tabs/TabsTrigger.vue b/resources/js/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..45e424f
--- /dev/null
+++ b/resources/js/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'data-[state=active]:bg-background 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-md 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 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
diff --git a/resources/js/components/ui/tabs/index.ts b/resources/js/components/ui/tabs/index.ts
new file mode 100644
index 0000000..7f99b7f
--- /dev/null
+++ b/resources/js/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"
diff --git a/resources/js/components/ui/textarea/Textarea.vue b/resources/js/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..790f10c
--- /dev/null
+++ b/resources/js/components/ui/textarea/Textarea.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground 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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>
diff --git a/resources/js/components/ui/textarea/index.ts b/resources/js/components/ui/textarea/index.ts
new file mode 100644
index 0000000..8ce91e9
--- /dev/null
+++ b/resources/js/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"
diff --git a/resources/js/components/ui/toggle-group/ToggleGroup.vue b/resources/js/components/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 0000000..876051f
--- /dev/null
+++ b/resources/js/components/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { toggleVariants } from '@/components/ui/toggle'
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = withDefaults(defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+  spacing?: number
+}>(), {
+  spacing: 0,
+})
+
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide("toggleGroup", {
+  variant: props.variant,
+  size: props.size,
+  spacing: props.spacing,
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    data-slot="toggle-group"
+    :data-size="size"
+    :data-variant="variant"
+    :data-spacing="spacing"
+    :style="{
+      '--gap': spacing,
+    }"
+    v-bind="forwarded"
+    :class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>
diff --git a/resources/js/components/ui/toggle-group/ToggleGroupItem.vue b/resources/js/components/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..c042abf
--- /dev/null
+++ b/resources/js/components/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupItem, useForwardProps } from "reka-ui"
+import { inject } from "vue"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from '@/components/ui/toggle'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
+  spacing?: number
+}
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+}>()
+
+const context = inject<ToggleGroupVariants>("toggleGroup")
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    data-slot="toggle-group-item"
+    :data-variant="context?.variant || variant"
+    :data-size="context?.size || size"
+    :data-spacing="context?.spacing"
+    v-bind="forwardedProps"
+    :class="cn(
+      toggleVariants({
+        variant: context?.variant || variant,
+        size: context?.size || size,
+      }),
+      'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+      'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>
diff --git a/resources/js/components/ui/toggle-group/index.ts b/resources/js/components/ui/toggle-group/index.ts
new file mode 100644
index 0000000..c6ce2fc
--- /dev/null
+++ b/resources/js/components/ui/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.vue"
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue"
diff --git a/resources/js/components/ui/toggle/Toggle.vue b/resources/js/components/ui/toggle/Toggle.vue
new file mode 100644
index 0000000..aea8e17
--- /dev/null
+++ b/resources/js/components/ui/toggle/Toggle.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ToggleVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Toggle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "."
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleVariants["variant"]
+  size?: ToggleVariants["size"]
+}>(), {
+  variant: "default",
+  size: "default",
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-slot="slotProps"
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </Toggle>
+</template>
diff --git a/resources/js/components/ui/toggle/index.ts b/resources/js/components/ui/toggle/index.ts
new file mode 100644
index 0000000..d873390
--- /dev/null
+++ b/resources/js/components/ui/toggle/index.ts
@@ -0,0 +1,28 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Toggle } from "./Toggle.vue"
+
+export 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 shadow-xs 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",
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index b4423a0..b99ca31 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
 import type { BreadcrumbItem } from '@/types';
 
 type Props = {
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 3ef8e7a..4422e0d 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -22,11 +22,11 @@
         {{-- Inline style to set the HTML background color based on our theme in app.css --}}
         <style>
             html {
-                background-color: oklch(1 0 0);
+                background-color: hsl(120 10% 98%);
             }
 
             html.dark {
-                background-color: oklch(0.145 0 0);
+                background-color: hsl(120 5% 6%);
             }
         </style>
 
@@ -37,7 +37,7 @@
         <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
         <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+        <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700|manrope:500,600,700,800" rel="stylesheet" />
 
         @vite(['resources/js/app.ts', "resources/js/pages/{$page['component']}.vue"])
         @inertiaHead