fix views sidebar collapsible trigger

- Update styles and colors for dark mode

cmd/messages.go

@@ -173,6 +173,5 @@ func handleSendMessage(r *fastglue.Request) error {
 		// Evaluate automation rules.
 		app.automation.EvaluateConversationUpdateRules(cuuid, models.EventConversationMessageOutgoing)
 	}
-
 	return r.SendEnvelope(true)
 }

cmd/sla.go

@@ -29,7 +29,7 @@ func handleGetSLA(r *fastglue.Request) error {
 	)
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	sla, err := app.sla.Get(id)
@@ -54,7 +54,7 @@ func handleCreateSLA(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := app.sla.Create(sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.Notifications); err != nil {
+	if err := app.sla.Create(sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.NextResponseTime, sla.Notifications); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
@@ -70,7 +70,7 @@ func handleUpdateSLA(r *fastglue.Request) error {
 
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	if err := r.Decode(&sla, "json"); err != nil {
@@ -81,11 +81,11 @@ func handleUpdateSLA(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	if err := app.sla.Update(id, sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.Notifications); err != nil {
+	if err := app.sla.Update(id, sla.Name, sla.Description, sla.FirstResponseTime, sla.ResolutionTime, sla.NextResponseTime, sla.Notifications); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	return r.SendEnvelope("SLA updated successfully.")
+	return r.SendEnvelope(true)
 }
 
 // handleDeleteSLA deletes the SLA with the given ID.
@@ -95,7 +95,7 @@ func handleDeleteSLA(r *fastglue.Request) error {
 	)
 	id, err := strconv.Atoi(r.RequestCtx.UserValue("id").(string))
 	if err != nil || id == 0 {
-		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "SLA `id`"), nil, envelope.InputError)
+		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.Ts("globals.messages.invalid", "name", "`id`"), nil, envelope.InputError)
 	}
 
 	if err = app.sla.Delete(id); err != nil {
@@ -108,51 +108,79 @@ func handleDeleteSLA(r *fastglue.Request) error {
 // validateSLA validates the SLA policy and returns an envelope.Error if any validation fails.
 func validateSLA(app *App, sla *smodels.SLAPolicy) error {
 	if sla.Name == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `name`"), nil)
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`name`"), nil)
 	}
-	if sla.FirstResponseTime == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `first_response_time`"), nil)
-	}
-	if sla.ResolutionTime == "" {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA `resolution_time`"), nil)
+	if sla.FirstResponseTime.String == "" && sla.NextResponseTime.String == "" && sla.ResolutionTime.String == "" {
+		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "At least one of `first_response_time`, `next_response_time`, or `resolution_time` must be provided."), nil)
 	}
 
-	// Validate notifications if any
+	// Validate notifications if any.
 	for _, n := range sla.Notifications {
 		if n.Type == "" {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `type`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`type`"), nil)
 		}
 		if n.TimeDelayType == "" {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `time_delay_type`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`time_delay_type`"), nil)
+		}
+		if n.Metric == "" {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`metric`"), nil)
 		}
 		if n.TimeDelayType != "immediately" {
 			if n.TimeDelay == "" {
-				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `time_delay`"), nil)
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`time_delay`"), nil)
+			}
+			// Validate time delay duration.
+			td, err := time.ParseDuration(n.TimeDelay)
+			if err != nil {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`time_delay`"), nil)
+			}
+			if td.Minutes() < 1 {
+				return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`time_delay`"), nil)
 			}
 		}
 		if len(n.Recipients) == 0 {
-			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "SLA notification `recipients`"), nil)
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.empty", "name", "`recipients`"), nil)
 		}
 	}
 
-	// Validate time duration strings
-	frt, err := time.ParseDuration(sla.FirstResponseTime)
-	if err != nil {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
-	}
-	if frt.Minutes() < 1 {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+	// Validate first response time duration string if not empty.
+	if sla.FirstResponseTime.String != "" {
+		frt, err := time.ParseDuration(sla.FirstResponseTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+		}
+		if frt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`first_response_time`"), nil)
+		}
 	}
 
-	rt, err := time.ParseDuration(sla.ResolutionTime)
-	if err != nil {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+	// Validate resolution time duration string if not empty.
+	if sla.ResolutionTime.String != "" {
+		rt, err := time.ParseDuration(sla.ResolutionTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+		}
+		if rt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
+		}
+		// Compare with first response time if both are present.
+		if sla.FirstResponseTime.String != "" {
+			frt, _ := time.ParseDuration(sla.FirstResponseTime.String)
+			if frt > rt {
+				return envelope.NewError(envelope.InputError, app.i18n.T("sla.firstResponseTimeAfterResolution"), nil)
+			}
+		}
 	}
-	if rt.Minutes() < 1 {
-		return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`resolution_time`"), nil)
-	}
-	if frt > rt {
-		return envelope.NewError(envelope.InputError, app.i18n.T("sla.firstResponseTimeAfterResolution"), nil)
+
+	// Validate next response time duration string if not empty.
+	if sla.NextResponseTime.String != "" {
+		nrt, err := time.ParseDuration(sla.NextResponseTime.String)
+		if err != nil {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`next_response_time`"), nil)
+		}
+		if nrt.Minutes() < 1 {
+			return envelope.NewError(envelope.InputError, app.i18n.Ts("globals.messages.invalid", "name", "`next_response_time`"), nil)
+		}
 	}
 
 	return nil

cmd/users.go

@@ -72,15 +72,26 @@ func handleUpdateAgentAvailability(r *fastglue.Request) error {
 		status = string(r.RequestCtx.PostArgs().Peek("status"))
 		ip     = realip.FromRequest(r.RequestCtx)
 	)
+	agent, err := app.user.GetAgent(auser.ID, "")
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+
+	// Same status?
+	if agent.AvailabilityStatus == status {
+		return r.SendEnvelope(true)
+	}
 
 	// Update availability status.
 	if err := app.user.UpdateAvailability(auser.ID, status); err != nil {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// Create activity log.
-	if err := app.activityLog.UserAvailability(auser.ID, auser.Email, status, ip, "", 0); err != nil {
-		app.lo.Error("error creating activity log", "error", err)
+	// Skip activity log if agent returns online from away (to avoid spam).
+	if !(agent.AvailabilityStatus == models.Away && status == models.Online) {
+		if err := app.activityLog.UserAvailability(auser.ID, auser.Email, status, ip, "", 0); err != nil {
+			app.lo.Error("error creating activity log", "error", err)
+		}
 	}
 
 	return r.SendEnvelope(true)

frontend/index.html

@@ -6,8 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
     rel="stylesheet">
 </head>
 

frontend/package.json

@@ -33,7 +33,7 @@
     "@tiptap/vue-3": "^2.4.0",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
+    "@vee-validate/zod": "^4.15.0",
     "@vueuse/core": "^12.4.0",
     "axios": "^1.8.2",
     "class-variance-authority": "^0.7.0",
@@ -47,7 +47,7 @@
     "radix-vue": "^1.9.17",
     "reka-ui": "^2.2.0",
     "tailwind-merge": "^2.3.0",
-    "vee-validate": "^4.13.2",
+    "vee-validate": "^4.15.0",
     "vue": "^3.4.37",
     "vue-dompurify-html": "^5.2.0",
     "vue-i18n": "9",
@@ -57,7 +57,7 @@
     "vue-sonner": "^1.3.0",
     "vue3-emoji-picker": "^1.1.8",
     "vuedraggable": "^4.1.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

frontend/pnpm-lock.yaml

@@ -60,7 +60,7 @@ importers:
         specifier: ^1.4.4
         version: 1.5.0(@unovis/ts@1.5.0)(vue@3.5.13(typescript@5.7.3))
       '@vee-validate/zod':
-        specifier: ^4.13.2
+        specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.7.3))(zod@3.24.1)
       '@vueuse/core':
         specifier: ^12.4.0
@@ -102,7 +102,7 @@ importers:
         specifier: ^2.3.0
         version: 2.6.0
       vee-validate:
-        specifier: ^4.13.2
+        specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.7.3))
       vue:
         specifier: ^3.4.37
@@ -132,7 +132,7 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.13(typescript@5.7.3))
       zod:
-        specifier: ^3.23.8
+        specifier: ^3.24.1
         version: 3.24.1
     devDependencies:
       '@rushstack/eslint-patch':

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full h-screen">
+  <div class="flex w-full h-screen text-foreground">
     <!-- Icon sidebar always visible -->
     <SidebarProvider style="--sidebar-width: 3rem" class="w-auto z-50">
       <ShadcnSidebar collapsible="none" class="border-r">

frontend/src/Root.vue

@@ -1,9 +1,7 @@
 <template>
   <TooltipProvider :delay-duration="150">
-    <div class="!font-jakarta">
-      <Toaster class="pointer-events-auto" position="top-center" richColors />
-      <RouterView />
-    </div>
+    <Toaster class="pointer-events-auto" position="top-center" richColors />
+    <RouterView />
   </TooltipProvider>
 </template>
 

frontend/src/assets/styles/main.scss

@@ -61,10 +61,39 @@
       }
     }
   }
-}
+  :root {
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 5.9% 10%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  :root {
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+    --vis-primary-color: var(--primary);
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
+  }
 
-// Theme.
-@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
@@ -97,7 +126,7 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 240 5.9% 10%;
     --foreground: 0 0% 98%;
 
     --card: 240 10% 3.9%;
@@ -127,64 +156,8 @@
   }
 }
 
-@layer base {
-  :root {
-    --vis-tooltip-background-color: none !important;
-    --vis-tooltip-border-color: none !important;
-    --vis-tooltip-text-color: none !important;
-    --vis-tooltip-shadow-color: none !important;
-    --vis-tooltip-backdrop-filter: none !important;
-    --vis-tooltip-padding: none !important;
-    --vis-primary-color: var(--primary);
-    --vis-secondary-color: 160 81% 40%;
-    --vis-text-color: var(--muted-foreground);
-  }
-}
-
-// Shake animation
-@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-  15% {
-    transform: translateX(-5px);
-  }
-  25% {
-    transform: translateX(5px);
-  }
-  35% {
-    transform: translateX(-5px);
-  }
-  45% {
-    transform: translateX(5px);
-  }
-  55% {
-    transform: translateX(-5px);
-  }
-  65% {
-    transform: translateX(5px);
-  }
-  75% {
-    transform: translateX(-5px);
-  }
-  85% {
-    transform: translateX(5px);
-  }
-  95% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.animate-shake {
-  animation: shake 0.5s infinite;
-}
-
 .message-bubble {
-  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded-xl;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded shadow-sm;
   table {
     width: 100% !important;
     table-layout: fixed !important;
@@ -200,7 +173,7 @@
 }
 
 .box {
-  @apply border shadow rounded-lg;
+  @apply border shadow rounded;
 }
 
 // Scrollbar start
@@ -227,84 +200,9 @@
 // End Scrollbar
 
 .code-editor {
-  @apply rounded-md border shadow h-[65vh] min-h-[250px] w-full relative;
+  @apply rounded border shadow h-[65vh] min-h-[250px] w-full relative;
 }
 
-.ql-container {
-  margin: 0 !important;
-}
-
-.ql-container .ql-editor {
-  height: 300px !important;
-  border-radius: var(--radius) !important;
-  @apply rounded-lg rounded-t-none;
-}
-
-.ql-toolbar {
-  @apply rounded-t-lg;
-}
-
-.blinking-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: red;
-  border-radius: 50%;
-  animation: blink 2s infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-// Sidebar start
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 96%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-a[data-active='true'] {
-  background-color: hsl(var(--sidebar-background)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-a[data-active='false']:hover {
-  background-color: hsl(var(--sidebar-accent)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-// Sidebar end
-
 .show-quoted-text {
   blockquote {
     @apply block;
@@ -358,3 +256,12 @@ a[data-active='false']:hover {
     @apply text-blue-500 hover:underline;
   }
 }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/src/components/datatable/DataTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <div class="rounded-md border shadow">
+    <div class="rounded border shadow">
       <Table>
         <TableHeader>
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">

frontend/src/components/layout/MenuCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col p-4 border rounded-lg shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
+    class="flex flex-col p-4 border rounded shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
     @click="handleClick">
     <div class="flex items-center mb-2">
       <component :is="icon" size="24" class="mr-2 text-primary" />

frontend/src/components/layout/PageHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="!isHidden">
     <div class="flex items-center space-x-4 h-12 px-2">
-      <SidebarTrigger class="cursor-pointer w-4 h-4" />
-      <span class="text-xl font-semibold text-gray-800">
+      <SidebarTrigger class="cursor-pointer" />
+      <span class="text-xl font-semibold">
         {{ title }}
       </span>
     </div>

frontend/src/components/sidebar/Sidebar.vue

@@ -14,7 +14,6 @@ import {
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
-  SidebarSeparator,
   SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -28,10 +27,10 @@ import {
   ChevronRight,
   EllipsisVertical,
   User,
-  UserSearch,
-  UsersRound,
   Search,
-  Plus
+  Plus,
+  CircleDashed,
+  List,
 } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -98,17 +97,14 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/contacts')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('globals.terms.contact', 2) }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.contact', 2) }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -137,17 +133,14 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/reports/overview')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.reports') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('navigation.reports') }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -171,21 +164,18 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/admin')" asChild>
-                <div class="flex items-center justify-between w-full">
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.admin') }}
-                  </span>
-                </div>
+              <div class="flex flex-col items-start justify-between w-full px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('navigation.admin') }}
+                </span>
                 <!-- App version -->
-                <div class="text-xs text-muted-foreground ml-2">
+                <div class="text-xs text-muted-foreground">
                   ({{ settingsStore.settings['app.version'] }})
                 </div>
-              </SidebarMenuButton>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -239,17 +229,14 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/account/profile')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.account') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div class="px-1">
+                <span class="font-semibold text-xl">
+                  {{ t('navigation.account') }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -276,28 +263,20 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <div class="flex items-center justify-between w-full">
-                  <div class="font-semibold text-xl">
-                    <span>{{ t('navigation.inbox') }}</span>
-                  </div>
-                  <div class="ml-auto">
-                    <div class="flex items-center space-x-2">
-                      <router-link :to="{ name: 'search' }">
-                        <button
-                          class="flex items-center bg-accent p-2 rounded-full hover:scale-110 transition-transform duration-100"
-                        >
-                          <Search size="15" stroke-width="2.5" />
-                        </button>
-                      </router-link>
-                    </div>
-                  </div>
+              <div class="flex items-center justify-between w-full px-1">
+                <div class="font-semibold text-xl">
+                  <span>{{ t('navigation.inbox') }}</span>
                 </div>
-              </SidebarMenuButton>
+                <div class="mr-1 mt-1 hover:scale-110 transition-transform">
+                  <router-link :to="{ name: 'search' }">
+                    <Search size="18" stroke-width="2.5" />
+                  </router-link>
+                </div>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
-        <SidebarSeparator />
+
         <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
@@ -327,7 +306,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               <SidebarMenuItem>
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/unassigned')">
                   <router-link :to="{ name: 'inbox', params: { type: 'unassigned' } }">
-                    <UserSearch />
+                    <CircleDashed />
                     <span>
                       {{ t('navigation.unassigned') }}
                     </span>
@@ -338,9 +317,9 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               <SidebarMenuItem>
                 <SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/all')">
                   <router-link :to="{ name: 'inbox', params: { type: 'all' } }">
-                    <UsersRound />
+                    <List />
                     <span>
-                      {{ t('navigation.all') }}
+                      {{ t('globals.messages.all') }}
                     </span>
                   </router-link>
                 </SidebarMenuButton>
@@ -388,9 +367,9 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
               <!-- Views -->
               <Collapsible class="group/collapsible" defaultOpen v-model:open="viewInboxOpen">
                 <SidebarMenuItem>
-                  <CollapsibleTrigger as-child>
+                  <CollapsibleTrigger asChild>
                     <SidebarMenuButton asChild>
-                      <router-link to="#" class="group/item">
+                      <router-link to="#" class="group/item !p-2">
                         <!-- <SlidersHorizontal /> -->
                         <span>
                           {{ t('navigation.views') }}
@@ -399,7 +378,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
                           <Plus
                             size="18"
                             @click.stop="openCreateViewDialog"
-                            class="rounded-lg cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
+                            class="rounded cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
                           />
                         </div>
                         <ChevronRight

frontend/src/components/sidebar/SidebarNavUser.vue

@@ -2,12 +2,12 @@
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <SidebarMenuButton
-        size="lg"
-        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground p-0"
+        size="md"
+        class="p-0"
       >
-        <Avatar class="h-8 w-8 rounded-lg relative overflow-visible">
-          <AvatarImage :src="userStore.avatar" alt="" class="rounded-lg" />
-          <AvatarFallback class="rounded-lg">
+        <Avatar class="h-8 w-8 rounded relative overflow-visible">
+          <AvatarImage :src="userStore.avatar" alt="U" class="rounded" />
+          <AvatarFallback class="rounded">
             {{ userStore.getInitials }}
           </AvatarFallback>
           <div
@@ -30,51 +30,65 @@
       </SidebarMenuButton>
     </DropdownMenuTrigger>
     <DropdownMenuContent
-      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56"
       side="bottom"
       :side-offset="4"
     >
-      <DropdownMenuLabel class="p-0 font-normal space-y-1">
-        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-          <Avatar class="h-8 w-8 rounded-lg">
+      <DropdownMenuLabel class="font-normal space-y-2 px-2">
+        <!-- User header -->
+        <div class="flex items-center gap-2 py-1.5 text-left text-sm">
+          <Avatar class="h-8 w-8 rounded">
             <AvatarImage :src="userStore.avatar" alt="U" />
-            <AvatarFallback class="rounded-lg">
+            <AvatarFallback class="rounded">
               {{ userStore.getInitials }}
             </AvatarFallback>
           </Avatar>
-          <div class="grid flex-1 text-left text-sm leading-tight">
+          <div class="flex-1 flex flex-col leading-tight">
             <span class="truncate font-semibold">{{ userStore.getFullName }}</span>
-            <span class="truncate text-xs">{{ userStore.email }}</span>
+            <span class="truncate text-xs text-muted-foreground">{{ userStore.email }}</span>
           </div>
         </div>
+
         <div class="space-y-2">
-          <!-- Away switch is checked with 'away_manual' or 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+          <!-- Dark-mode toggle -->
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <Moon v-if="mode === 'dark'" size="16" class="text-muted-foreground" />
+              <Sun v-else size="16" class="text-muted-foreground" />
+              <span class="text-muted-foreground">{{ t('navigation.darkMode') }}</span>
+            </div>
             <Switch
-              :checked="
-                ['away_manual', 'away_and_reassigning'].includes(userStore.user.availability_status)
-              "
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_manual' : 'online'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
+              :checked="mode === 'dark'"
+              @update:checked="(val) => (mode = val ? 'dark' : 'light')"
             />
           </div>
-          <!-- Reassign Replies Switch is checked with 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
-            <Switch
-              :checked="userStore.user.availability_status === 'away_and_reassigning'"
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_and_reassigning' : 'away_manual'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
-            />
+
+          <div class="border-t border-gray-200 dark:border-gray-700 pt-3 space-y-3">
+            <!-- Away toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+              <Switch
+                :checked="
+                  ['away_manual', 'away_and_reassigning'].includes(
+                    userStore.user.availability_status
+                  )
+                "
+                @update:checked="
+                  (val) => userStore.updateUserAvailability(val ? 'away_manual' : 'online')
+                "
+              />
+            </div>
+            <!-- Reassign toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
+              <Switch
+                :checked="userStore.user.availability_status === 'away_and_reassigning'"
+                @update:checked="
+                  (val) =>
+                    userStore.updateUserAvailability(val ? 'away_and_reassigning' : 'away_manual')
+                "
+              />
+            </div>
           </div>
         </div>
       </DropdownMenuLabel>
@@ -108,10 +122,13 @@ import {
 import { SidebarMenuButton } from '@/components/ui/sidebar'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Switch } from '@/components/ui/switch'
-import { ChevronsUpDown, CircleUserRound, LogOut } from 'lucide-vue-next'
+import { ChevronsUpDown, CircleUserRound, LogOut, Moon, Sun } from 'lucide-vue-next'
 import { useUserStore } from '@/stores/user'
 import { useRouter } from 'vue-router'
 
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode()
 const userStore = useUserStore()
 const router = useRouter()
 const { t } = useI18n()

frontend/src/components/table/SimpleTable.vue

@@ -1,24 +1,24 @@
 <template>
-  <table class="min-w-full table-fixed divide-y divide-gray-200">
-    <thead class="bg-gray-50">
+  <table class="min-w-full table-fixed divide-y divide-border">
+    <thead class="bg-muted">
       <tr>
         <th
           v-for="(header, index) in headers"
           :key="index"
           scope="col"
-          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+          class="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
         >
           {{ header }}
         </th>
         <th scope="col" class="relative px-6 py-3"></th>
       </tr>
     </thead>
-    <tbody class="bg-white divide-y divide-gray-200">
+    <tbody class="bg-background divide-y divide-border">
       <template v-if="data.length === 0">
         <tr>
           <td :colspan="headers.length + 1" class="px-6 py-12 text-center">
             <div class="flex flex-col items-center space-y-4">
-              <span class="text-md text-gray-500">
+              <span class="text-md text-muted-foreground">
                 {{
                   $t('globals.messages.noResults', {
                     name: $t('globals.terms.result', 2).toLowerCase()
@@ -30,15 +30,15 @@
         </tr>
       </template>
       <template v-else>
-        <tr v-for="(item, index) in data" :key="index">
+        <tr v-for="(item, index) in data" :key="index" class="hover:bg-accent">
           <td
             v-for="key in keys"
             :key="key"
-            class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-normal break-words"
+            class="px-6 py-4 text-sm font-medium text-foreground whitespace-normal break-words"
           >
             {{ item[key] }}
           </td>
-          <td class="px-6 py-4 text-sm text-gray-500" v-if="showDelete">
+          <td v-if="showDelete" class="px-6 py-4 text-sm text-muted-foreground">
             <Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
               <Trash2 class="h-4 w-4" />
             </Button>

frontend/src/components/ui/avatar/AvatarUpload.vue

@@ -14,7 +14,7 @@
 
     <!-- Delete Icon -->
     <X
-      class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute top-1 right-1 rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
       size="20"
       @click.stop="emit('remove')"
       v-if="src"

frontend/src/components/ui/button/Button.vue

@@ -1,9 +1,7 @@
 <script setup>
-import { Primitive } from 'radix-vue'
-import { buttonVariants } from '.'
-import { cn } from '@/lib/utils'
-import { ref, computed } from 'vue'
-import { DotLoader } from '@/components/ui/loader'
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '.';
 
 const props = defineProps({
   variant: { type: null, required: false },
@@ -11,26 +9,15 @@ const props = defineProps({
   class: { type: null, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false, default: 'button' },
-  isLoading: { type: Boolean, required: false, default: false }
-})
-
-const isDisabled = ref(false)
-
-const computedClass = computed(() => {
-  return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class, {
-    'cursor-not-allowed opacity-50': props.isLoading || isDisabled.value
-  })
-})
+});
 </script>
 
 <template>
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="computedClass"
-    :disabled="isLoading || isDisabled"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
   >
-    <DotLoader v-if="isLoading" />
-    <slot v-else />
+    <slot />
   </Primitive>
 </template>

frontend/src/components/ui/button/index.js

@@ -1,31 +1,34 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Button } from './Button.vue'
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9'
-      }
+        icon: 'h-9 w-9',
+      },
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default'
-    }
-  }
-)
+      size: 'default',
+    },
+  },
+);

frontend/src/components/ui/input/Input.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue']);
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
-  defaultValue: props.defaultValue
-})
+  defaultValue: props.defaultValue,
+});
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     :class="
       cn(
         'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class
+        props.class,
       )
     "
   />

frontend/src/components/ui/input/index.js

@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from './Input.vue';

frontend/src/components/ui/separator/Separator.vue

@@ -1,21 +1,17 @@
 <script setup>
-import { computed } from 'vue'
-import { Separator } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  orientation: { type: String, required: false },
-  decorative: { type: Boolean, required: false },
+  orientation: { type: String, required: false, default: 'horizontal' },
+  decorative: { type: Boolean, required: false, default: true },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
@@ -24,8 +20,8 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'shrink-0 bg-border',
-        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-        props.class
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        props.class,
       )
     "
   />

frontend/src/components/ui/separator/index.js

@@ -1 +1 @@
-export { default as Separator } from './Separator.vue'
+export { default as Separator } from './Separator.vue';

frontend/src/components/ui/sheet/Sheet.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps({
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false }
-})
-const emits = defineEmits(['update:open'])
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(['update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetClose.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { DialogClose } from 'radix-vue'
+import { DialogClose } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetContent.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from 'vue'
+import { reactiveOmit } from '@vueuse/core';
+import { Cross2Icon } from '@radix-icons/vue';
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
-import { sheetVariants } from '.'
-import { cn } from '@/lib/utils'
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sheetVariants } from '.';
 
 defineOptions({
-  inheritAttrs: false
-})
+  inheritAttrs: false,
+});
 
 const props = defineProps({
   class: { type: null, required: false },
@@ -22,8 +22,8 @@ const props = defineProps({
   trapFocus: { type: Boolean, required: false },
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 
 const emits = defineEmits([
   'escapeKeyDown',
@@ -31,16 +31,12 @@ const emits = defineEmits([
   'focusOutside',
   'interactOutside',
   'openAutoFocus',
-  'closeAutoFocus'
-])
+  'closeAutoFocus',
+]);
 
-const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
+const delegatedProps = reactiveOmit(props, 'class', 'side');
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetDescription.vue

@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogDescription } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetFooter.vue

@@ -1,13 +1,20 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
     <slot />
   </div>
 </template>

frontend/src/components/ui/sheet/SheetHeader.vue

@@ -1,13 +1,15 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
     <slot />
   </div>
 </template>

frontend/src/components/ui/sheet/SheetTitle.vue

@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogTitle } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

frontend/src/components/ui/sheet/SheetTrigger.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { DialogTrigger } from 'radix-vue'
+import { DialogTrigger } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sheet/index.js

@@ -1,13 +1,13 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Sheet } from './Sheet.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
-export { default as SheetClose } from './SheetClose.vue'
-export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
-export { default as SheetDescription } from './SheetDescription.vue'
-export { default as SheetFooter } from './SheetFooter.vue'
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';
 
 export const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -19,11 +19,11 @@ export const sheetVariants = cva(
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
         left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
-      }
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
     },
     defaultVariants: {
-      side: 'right'
-    }
-  }
-)
+      side: 'right',
+    },
+  },
+);

frontend/src/components/ui/sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
 
 defineOptions({
@@ -12,7 +12,6 @@ const props = defineProps({
   variant: { type: String, required: false, default: 'sidebar' },
   collapsible: { type: String, required: false, default: 'offcanvas' },
   class: { type: null, required: false },
-  collapseOnMobile: { type: Boolean, required: false, default: true },
 });
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -33,7 +32,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   </div>
 
   <Sheet
-    v-else-if="isMobile && collapseOnMobile"
+    v-else-if="isMobile"
     :open="openMobile"
     v-bind="$attrs"
     @update:open="setOpenMobile"
@@ -55,7 +54,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   <div
     v-else
-    :class="cn('group peer', collapseOnMobile ? 'hidden md:block' : 'block')"
+    class="group peer hidden md:block"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
@@ -77,8 +76,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     <div
       :class="
         cn(
-          'duration-200 fixed inset-y-0 z-10 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
-          collapseOnMobile ? 'hidden' : '',
+          'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] 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)]',

frontend/src/components/ui/sidebar/SidebarGroupAction.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,12 +14,14 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarGroupContent.vue

@@ -1,17 +1,13 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
+  <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
     <slot />
   </div>
 </template>

frontend/src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,10 +14,13 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
+    :class="
+      cn(
+        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarHeader.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarInput.vue

@@ -1,20 +1,21 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Input
     data-sidebar="input"
-    :class="cn(
-      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
-      props.class,
-    )"
+    :class="
+      cn(
+        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+        props.class,
+      )
+    "
   >
     <slot />
   </Input>

frontend/src/components/ui/sidebar/SidebarInset.vue

@@ -1,19 +1,20 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <main
-    :class="cn(
-      'relative flex min-h-svh flex-1 flex-col bg-background',
-      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        props.class,
+      )
+    "
   >
     <slot />
   </main>

frontend/src/components/ui/sidebar/SidebarMenu.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuAction.vue

@@ -1,30 +1,31 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'button',
-})
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  showOnHover: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Primitive
     data-sidebar="menu-action"
-    :class="cn(
-      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md: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
-        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md: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 &&
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+        props.class,
+      )
+    "
     :as="as"
     :as-child="asChild"
   >

frontend/src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -1,24 +1,25 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <div
     data-sidebar="menu-badge"
-    :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-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',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-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',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>

frontend/src/components/ui/sidebar/SidebarMenuButton.vue

@@ -1,31 +1,40 @@
-<script setup lang="ts">
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { type Component, computed } from 'vue'
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { useSidebar } from './utils'
+<script setup>
+import { computed } from 'vue';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue';
+import { useSidebar } from './utils';
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  tooltip: { type: null, required: false },
+});
 
-const { isMobile, state } = useSidebar()
+const { isMobile, state } = useSidebar();
 
 const delegatedProps = computed(() => {
-  const { tooltip, ...delegated } = props
-  return delegated
-})
+  const { tooltip, ...delegated } = props;
+  return delegated;
+});
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+  <SidebarMenuButtonChild
+    v-if="!tooltip"
+    v-bind="{ ...delegatedProps, ...$attrs }"
+  >
     <slot />
   </SidebarMenuButtonChild>
 

frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -1,21 +1,16 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sidebarMenuButtonVariants } from '.';
 
-export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants['variant']
-  size?: SidebarMenuButtonVariants['size']
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuItem.vue

@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'
-import { computed, type HTMLAttributes } from 'vue'
+<script setup>
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+import { Skeleton } from '@/components/ui/skeleton';
 
-const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  showIcon: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 
 const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`
-})
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarMenuSub.vue

@@ -1,20 +1,21 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <ul
     data-sidebar="menu-badge"
-    :class="cn(
-      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </ul>

frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -1,17 +1,14 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'a',
-  size: 'md',
-})
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'a' },
+  size: { type: String, required: false, default: 'md' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -21,14 +18,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
-    :class="cn(
-      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-      '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',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+        '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',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>

frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <li>

frontend/src/components/ui/sidebar/SidebarProvider.vue

@@ -1,57 +1,64 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'radix-vue'
-import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+<script setup>
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '@/lib/utils';
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils';
 
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  defaultOpen: true,
-  open: undefined,
-})
+const props = defineProps({
+  defaultOpen: { type: Boolean, required: false, default: true },
+  open: { type: Boolean, required: false, default: undefined },
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits<{
-  'update:open': [open: boolean]
-}>()
+const emits = defineEmits(['update:open']);
 
-const isMobile = useMediaQuery('(max-width: 768px)')
-const openMobile = ref(false)
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
 
 const open = useVModel(props, 'open', emits, {
   defaultValue: props.defaultOpen ?? false,
-  passive: (props.open === undefined) as false,
-}) as Ref<boolean>
+  passive: props.open === undefined,
+});
 
-function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
+function setOpen(value) {
+  open.value = value; // emits('update:open', value)
 
   // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 }
 
-function setOpenMobile(value: boolean) {
-  openMobile.value = value
+function setOpenMobile(value) {
+  openMobile.value = value;
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+  return isMobile.value
+    ? setOpenMobile(!openMobile.value)
+    : setOpen(!open.value);
 }
 
-useEventListener('keydown', (event: KeyboardEvent) => {
-  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
+useEventListener('keydown', (event) => {
+  if (
+    event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+    (event.metaKey || event.ctrlKey)
+  ) {
+    event.preventDefault();
+    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 = computed(() => open.value ? 'expanded' : 'collapsed')
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
 
 provideSidebarContext({
   state,
@@ -61,7 +68,7 @@ provideSidebarContext({
   openMobile,
   setOpenMobile,
   toggleSidebar,
-})
+});
 </script>
 
 <template>
@@ -71,7 +78,12 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      :class="
+        cn(
+          'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+          props.class,
+        )
+      "
       v-bind="$attrs"
     >
       <slot />

frontend/src/components/ui/sidebar/SidebarRail.vue

@@ -1,13 +1,12 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { useSidebar } from './utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { useSidebar } from './utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
@@ -16,15 +15,17 @@ const { toggleSidebar } = useSidebar()
     aria-label="Toggle Sidebar"
     :tabindex="-1"
     title="Toggle Sidebar"
-    :class="cn(
-      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
-      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class,
+      )
+    "
     @click="toggleSidebar"
   >
     <slot />

frontend/src/components/ui/sidebar/SidebarSeparator.vue

@@ -1,11 +1,10 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Separator } from '@/components/ui/separator'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/sidebar/SidebarTrigger.vue

@@ -1,15 +1,14 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { PanelLeft } from 'lucide-vue-next'
-import { useSidebar } from './utils'
+<script setup>
+import { ViewVerticalIcon } from '@radix-icons/vue';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { useSidebar } from './utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
@@ -20,7 +19,7 @@ const { toggleSidebar } = useSidebar()
     :class="cn('h-7 w-7', props.class)"
     @click="toggleSidebar"
   >
-    <PanelLeft />
+    <ViewVerticalIcon />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
 </template>

frontend/src/components/ui/sidebar/index.js

@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority';
+
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+
+export { useSidebar } from './utils';
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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',
+    },
+  },
+);

frontend/src/components/ui/sidebar/utils.js

@@ -0,0 +1,10 @@
+import { createContext } from 'reka-ui';
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+export const [useSidebar, provideSidebarContext] = createContext('Sidebar');

frontend/src/components/ui/skeleton/Skeleton.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/skeleton/index.js

@@ -1 +1 @@
-export { default as Skeleton } from './Skeleton.vue'
+export { default as Skeleton } from './Skeleton.vue';

frontend/src/components/ui/tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
@@ -8,11 +8,11 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false }
-})
-const emits = defineEmits(['update:open'])
+  ignoreNonKeyboardFocus: { type: Boolean, required: false },
+});
+const emits = defineEmits(['update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

frontend/src/components/ui/tooltip/TooltipContent.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { computed } from 'vue'
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 defineOptions({
-  inheritAttrs: false
-})
+  inheritAttrs: false,
+});
 
 const props = defineProps({
+  forceMount: { type: Boolean, required: false },
   ariaLabel: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
@@ -21,18 +22,16 @@ const props = defineProps({
   arrowPadding: { type: Number, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
-  class: { type: null, required: false }
-})
+  positionStrategy: { type: String, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside'])
+const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside']);
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+const delegatedProps = reactiveOmit(props, 'class');
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -42,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       :class="
         cn(
           'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs 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',
-          props.class
+          props.class,
         )
       "
     >

frontend/src/components/ui/tooltip/TooltipProvider.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipProvider } from 'radix-vue'
+import { TooltipProvider } from 'reka-ui';
 
 const props = defineProps({
   delayDuration: { type: Number, required: false },
@@ -7,8 +7,8 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false }
-})
+  ignoreNonKeyboardFocus: { type: Boolean, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/tooltip/TooltipTrigger.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { TooltipTrigger } from 'radix-vue'
+import { TooltipTrigger } from 'reka-ui';
 
 const props = defineProps({
+  reference: { type: null, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>

frontend/src/components/ui/tooltip/index.js

@@ -1,4 +1,4 @@
-export { default as Tooltip } from './Tooltip.vue'
-export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
-export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';

frontend/src/features/admin/agents/AgentForm.vue

@@ -12,7 +12,7 @@
 
         <div class="space-y-4 flex-2">
           <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-gray-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-foreground">
               {{ props.initialValues.first_name }} {{ props.initialValues.last_name }}
             </h3>
             <Badge :class="['px-2 rounded-full text-xs font-medium', availabilityStatus.color]">
@@ -25,7 +25,7 @@
               <Clock class="w-5 h-5 text-gray-400" />
               <div>
                 <p class="text-sm text-gray-500">{{ $t('form.field.lastActive') }}</p>
-                <p class="text-sm font-medium text-gray-700">
+                <p class="text-sm font-medium text-gray-700 dark:text-foreground">
                   {{
                     props.initialValues.last_active_at
                       ? format(new Date(props.initialValues.last_active_at), 'PPpp')
@@ -38,7 +38,7 @@
               <LogIn class="w-5 h-5 text-gray-400" />
               <div>
                 <p class="text-sm text-gray-500">{{ $t('form.field.lastLogin') }}</p>
-                <p class="text-sm font-medium text-gray-700">
+                <p class="text-sm font-medium text-gray-700 dark:text-foreground">
                   {{
                     props.initialValues.last_login_at
                       ? format(new Date(props.initialValues.last_login_at), 'PPpp')

frontend/src/features/admin/automation/ActionBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-5 rounded-lg" :class="{ 'box p-5': actions.length > 0 }">
+  <div class="space-y-5 rounded" :class="{ 'box p-5': actions.length > 0 }">
     <div class="space-y-5">
       <div v-for="(action, index) in actions" :key="index" class="space-y-5">
         <div v-if="index > 0">

frontend/src/features/admin/automation/RuleBox.vue

@@ -23,7 +23,7 @@
       </RadioGroup>
     </div>
 
-    <div class="space-y-5 rounded-lg" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
+    <div class="space-y-5 rounded" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
       <div class="space-y-5">
         <div v-for="(rule, index) in ruleGroup.rules" :key="rule" class="space-y-5">
           <div v-if="index > 0">

frontend/src/features/admin/macros/ActionBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-5 rounded-lg">
+  <div class="space-y-5 rounded">
     <div class="space-y-5">
       <div v-for="(action, index) in model" :key="index" class="space-y-5">
         <hr v-if="index" class="border-t-2 border-dotted border-gray-300" />

frontend/src/features/admin/roles/RoleForm.vue

@@ -30,7 +30,7 @@
         <div
           v-for="entity in permissions"
           :key="entity.name"
-          class="rounded-lg border border-border bg-card"
+          class="rounded border border-border bg-card"
         >
           <div class="border-b border-border bg-muted/30 px-5 py-3">
             <h4 class="font-medium text-card-foreground">{{ entity.name }}</h4>

frontend/src/features/admin/sla/SLAForm.vue

@@ -27,7 +27,7 @@
           <Input type="text" placeholder="6h" v-bind="componentField" />
         </FormControl>
         <FormDescription>
-          {{ t('admin.sla.firstResponseTime.description') }}
+          {{ t('globals.messages.golangDurationHoursMinutes') }}
         </FormDescription>
         <FormMessage />
       </FormItem>
@@ -39,7 +39,20 @@
         <FormControl>
           <Input type="text" placeholder="24h" v-bind="componentField" />
         </FormControl>
-        <FormDescription>{{ t('admin.sla.resolutionTime.description') }} </FormDescription>
+        <FormDescription>{{ t('globals.messages.golangDurationHoursMinutes') }} </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <FormField v-slot="{ componentField }" name="next_response_time">
+      <FormItem>
+        <FormLabel>{{ t('admin.sla.nextResponseTime') }}</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="30m" v-bind="componentField" />
+        </FormControl>
+        <FormDescription>
+          {{ t('globals.messages.golangDurationHoursMinutes') }}
+        </FormDescription>
         <FormMessage />
       </FormItem>
     </FormField>
@@ -82,7 +95,7 @@
           <div class="flex items-center justify-between mb-5">
             <div class="flex items-center gap-3">
               <span
-                class="flex items-center justify-center w-8 h-8 rounded-lg"
+                class="flex items-center justify-center w-8 h-8 rounded"
                 :class="{
                   'bg-red-100/80 text-red-600': notification.type === 'breach',
                   'bg-amber-100/80 text-amber-600': notification.type === 'warning'
@@ -93,16 +106,19 @@
               </span>
               <div>
                 <div class="font-medium text-foreground">
-                  {{ notification.type === 'warning' ? t('admin.sla.warning') : t('admin.sla.breach') }} {{ t('admin.sla.notification') }}
+                  {{
+                    notification.type === 'warning' ? t('admin.sla.warning') : t('admin.sla.breach')
+                  }}
+                  {{ t('globals.terms.alert').toLowerCase() }}
                 </div>
                 <p class="text-xs text-muted-foreground">
-                  {{ notification.type === 'warning' ? 'Pre-breach alert' : 'Post-breach action' }}
+                  {{ notification.type === 'warning' ? 'Pre-breach alert' : 'Post-breach alert' }}
                 </p>
               </div>
             </div>
             <Button
               variant="ghost"
-              size="sm"
+              size="xs"
               @click.prevent="removeNotification(index)"
               class="opacity-70 hover:opacity-100 text-muted-foreground hover:text-foreground"
             >
@@ -126,16 +142,16 @@
                       {{ t('admin.sla.triggerTiming') }}
                     </FormLabel>
                     <FormControl>
-                      <Select v-bind="componentField" class="hover:border-foreground/30">
+                      <Select v-bind="componentField">
                         <SelectTrigger class="w-full">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
                           <SelectGroup>
-                            <SelectItem value="immediately" class="focus:bg-accent">
+                            <SelectItem value="immediately">
                               {{ t('admin.sla.immediatelyOnBreach') }}
                             </SelectItem>
-                            <SelectItem value="after" class="focus:bg-accent">
+                            <SelectItem value="after">
                               {{ t('admin.sla.afterSpecificDuration') }}
                             </SelectItem>
                           </SelectGroup>
@@ -149,26 +165,23 @@
                   <FormItem v-if="shouldShowTimeDelay(index)">
                     <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
                       <Hourglass class="w-4 h-4 text-muted-foreground" />
-                      {{ notification.type === 'warning' ? t('admin.sla.advanceWarning') : t('admin.sla.followUpDelay') }}
+                      {{
+                        notification.type === 'warning'
+                          ? t('admin.sla.advanceWarning')
+                          : t('admin.sla.followUpDelay')
+                      }}
                     </FormLabel>
                     <FormControl>
-                      <Select v-bind="componentField" class="hover:border-foreground/30">
-                        <SelectTrigger class="w-full">
-                          <SelectValue :placeholder="t('admin.sla.selectDuration')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectItem
-                              v-for="duration in delayDurations"
-                              :key="duration"
-                              :value="duration"
-                              class="focus:bg-accent"
-                            >
-                              {{ duration }}
-                            </SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
+                      <Input
+                        type="text"
+                        :placeholder="
+                          t('globals.messages.enter', {
+                            name: t('globals.terms.duration').toLowerCase()
+                          })
+                        "
+                        v-bind="componentField"
+                        @keydown.enter.prevent
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -185,7 +198,7 @@
                 <FormItem>
                   <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
                     <Users class="w-4 h-4 text-muted-foreground" />
-                    {{ t('admin.sla.notificationRecipients') }}
+                    {{ t('admin.sla.alertRecipients') }}
                   </FormLabel>
                   <FormControl>
                     <SelectTag
@@ -205,6 +218,45 @@
                 </FormItem>
               </FormField>
             </div>
+
+            <FormField :name="`notifications.${index}.metric`" v-slot="{ componentField }">
+              <FormItem>
+                <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
+                  <SlidersHorizontal class="w-4 h-4 text-muted-foreground" />
+                  {{ t('globals.terms.slaMetric') }}
+                </FormLabel>
+                <FormControl>
+                  <Select v-bind="componentField">
+                    <SelectTrigger class="w-full">
+                      <SelectValue
+                        :placeholder="
+                          t('form.field.select', {
+                            name: t('globals.terms.slaMetric').toLowerCase()
+                          })
+                        "
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="all">
+                          {{ t('globals.messages.all') }}
+                        </SelectItem>
+                        <SelectItem value="first_response">
+                          {{ t('admin.sla.firstResponseTime') }}
+                        </SelectItem>
+                        <SelectItem value="next_response">
+                          {{ t('admin.sla.nextResponseTime') }}
+                        </SelectItem>
+                        <SelectItem value="resolution">
+                          {{ t('admin.sla.resolutionTime') }}
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
           </div>
         </div>
       </div>
@@ -212,10 +264,10 @@
       <!-- Empty State -->
       <div
         v-else
-        class="flex flex-col items-center justify-center p-8 space-y-3 rounded-xl bg-muted/30 border border-dashed"
+        class="flex flex-col items-center justify-center p-8 space-y-3 rounded bg-muted/30 border border-dashed"
       >
         <Bell class="w-8 h-8 text-muted-foreground" />
-        <p class="text-sm text-muted-foreground">{{ t('admin.sla.noNotificationsConfigured') }}</p>
+        <p class="text-sm text-muted-foreground">{{ t('admin.sla.noAlertsConfigured') }}</p>
       </div>
     </div>
 
@@ -231,7 +283,17 @@ import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema'
 import { Button } from '@/components/ui/button'
-import { X, Plus, Timer, CircleAlert, Users, Clock, Hourglass, Bell } from 'lucide-vue-next'
+import {
+  X,
+  Plus,
+  Timer,
+  CircleAlert,
+  Users,
+  Clock,
+  Hourglass,
+  Bell,
+  SlidersHorizontal
+} from 'lucide-vue-next'
 import { useUsersStore } from '@/stores/users'
 import {
   FormControl,
@@ -274,27 +336,11 @@ const props = defineProps({
 
 const usersStore = useUsersStore()
 const submitLabel = computed(() => {
-  return props.submitLabel || (props.initialValues.id ? t('globals.buttons.update') : t('globals.buttons.create'))
+  return (
+    props.submitLabel ||
+    (props.initialValues.id ? t('globals.buttons.update') : t('globals.buttons.create'))
+  )
 })
-const delayDurations = [
-  '5m',
-  '10m',
-  '15m',
-  '30m',
-  '45m',
-  '1h',
-  '2h',
-  '3h',
-  '4h',
-  '5h',
-  '6h',
-  '7h',
-  '8h',
-  '9h',
-  '10h',
-  '11h',
-  '12h'
-]
 
 const { t } = useI18n()
 const form = useForm({
@@ -320,7 +366,8 @@ const addNotification = (type) => {
     type: type,
     time_delay_type: type === 'warning' ? 'before' : 'immediately',
     time_delay: type === 'warning' ? '10m' : '',
-    recipients: []
+    recipients: [],
+    metric: 'all'
   })
   form.setFieldValue('notifications', notifications)
 }
@@ -341,6 +388,8 @@ watch(
 
     const transformedNotifications = (newValues.notifications || []).map((notification) => ({
       ...notification,
+      // Default value, notification applies to all metrics unless specified.
+      metric: notification.metric || 'all',
       time_delay_type:
         notification.type === 'warning'
           ? 'before'

frontend/src/features/admin/sla/formSchema.js

@@ -1,54 +1,79 @@
 import * as z from 'zod'
 import { isGoHourMinuteDuration } from '@/utils/strings'
 
-export const createFormSchema = (t) => z.object({
-    name: z
-        .string()
-        .min(1, { message: t('admin.sla.name.valid') })
-        .max(255, { message: t('admin.sla.name.valid') }),
-    description: z
-        .string()
-        .min(1, { message: t('admin.sla.description.valid') })
-        .max(255, { message: t('admin.sla.description.valid') }),
-    first_response_time: z.string().refine(isGoHourMinuteDuration, {
-        message:
-            t('globals.messages.goHourMinuteDuration'),
-    }),
-    resolution_time: z.string().refine(isGoHourMinuteDuration, {
-        message:
-            t('globals.messages.goHourMinuteDuration'),
-    }),
-    notifications: z
-        .array(
-            z
-                .object({
-                    type: z.enum(['breach', 'warning']),
-                    time_delay_type: z.enum(['immediately', 'after', 'before']),
-                    time_delay: z.string().optional(),
-                    recipients: z
-                        .array(z.string())
-                        .min(1, { message: t('globals.messages.atleastOneRecipient') })
+export const createFormSchema = (t) =>
+    z
+        .object({
+            name: z
+                .string()
+                .min(1, { message: t('admin.sla.name.valid') })
+                .max(255, { message: t('admin.sla.name.valid') }),
+            description: z
+                .string()
+                .min(1, { message: t('admin.sla.description.valid') })
+                .max(255, { message: t('admin.sla.description.valid') }),
+            first_response_time: z.string().nullable().optional().refine(val => !val || isGoHourMinuteDuration(val), {
+                message: t('globals.messages.goHourMinuteDuration'),
+            }),
+            resolution_time: z.string().nullable().optional().refine(val => !val || isGoHourMinuteDuration(val), {
+                message: t('globals.messages.goHourMinuteDuration'),
+            }),
+            next_response_time: z.string().nullable().optional().refine(val => !val || isGoHourMinuteDuration(val), {
+                message: t('globals.messages.goHourMinuteDuration'),
+            }),
+            notifications: z
+                .array(
+                    z
+                        .object({
+                            type: z.enum(['breach', 'warning']),
+                            time_delay_type: z.enum(['immediately', 'after', 'before']),
+                            time_delay: z.string().optional(),
+                            metric: z.enum(['first_response', 'resolution', 'next_response', 'all']),
+                            recipients: z
+                                .array(z.string())
+                                .min(1, { message: t('globals.messages.atleastOneRecipient') }),
+                        })
+                        .superRefine((obj, ctx) => {
+                            if (obj.time_delay_type !== 'immediately') {
+                                if (!obj.time_delay || obj.time_delay === '') {
+                                    ctx.addIssue({
+                                        code: z.ZodIssueCode.custom,
+                                        message: t('globals.messages.required'),
+                                        path: ['time_delay'],
+                                    });
+                                } else if (!isGoHourMinuteDuration(obj.time_delay)) {
+                                    ctx.addIssue({
+                                        code: z.ZodIssueCode.custom,
+                                        message: t('globals.messages.goHourMinuteDuration'),
+                                        path: ['time_delay'],
+                                    });
+                                }
+                            }
+                        })
+                )
+                .optional()
+                .default([]),
+        })
+        .superRefine((data, ctx) => {
+            const { first_response_time, resolution_time, next_response_time } = data
+            const isEmpty = !first_response_time && !resolution_time && !next_response_time
+
+            if (isEmpty) {
+                const msg = t('admin.sla.atleastOneSLATimeRequired')
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ['first_response_time'],
+                    message: msg,
                 })
-                .superRefine((obj, ctx) => {
-                    if (obj.time_delay_type !== 'immediately') {
-                        if (!obj.time_delay || obj.time_delay === '') {
-                            ctx.addIssue({
-                                code: z.ZodIssueCode.custom,
-                                message:
-                                    t('admin.sla.delay.required'),
-                                path: ['time_delay']
-                            })
-                        } else if (!isGoHourMinuteDuration(obj.time_delay)) {
-                            ctx.addIssue({
-                                code: z.ZodIssueCode.custom,
-                                message:
-                                    t('globals.messages.goHourMinuteDuration'),
-                                path: ['time_delay']
-                            })
-                        }
-                    }
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ['resolution_time'],
+                    message: msg,
                 })
-        )
-        .optional()
-        .default([])
-})
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ['next_response_time'],
+                    message: msg,
+                })
+            }
+        })

frontend/src/features/command/CommandBox.vue

@@ -2,10 +2,13 @@
   <CommandDialog
     :open="open"
     @update:open="handleOpenChange"
-    class="transform-gpu z-[51] !min-w-[50vw] !min-h-[60vh]"
+    class="transform-gpu z-[51] !min-w-[50vw]"
   >
     <CommandInput :placeholder="t('command.typeCmdOrSearch')" @keydown="onInputKeydown" />
-    <CommandList class="!min-h-[60vh] !min-w-[50vw]">
+    <CommandList
+      class="!min-h-[60vh] h-[60vh] !min-w-[50vw]"
+      :class="{ 'overflow-hidden': nestedCommand === 'apply-macro' }"
+    >
       <CommandEmpty>
         <p class="text-muted-foreground">{{ $t('command.noCommandAvailable') }}</p>
       </CommandEmpty>
@@ -52,22 +55,22 @@
       </CommandGroup>
 
       <!-- Macros -->
-      <div v-if="nestedCommand === 'apply-macro'" class="bg-background">
-        <CommandGroup heading="Apply macro" class="pb-2">
-          <div class="min-h-[400px] overflow-auto">
-            <div class="grid grid-cols-12 gap-3">
+      <div v-if="nestedCommand === 'apply-macro'">
+        <CommandGroup heading="Apply macro">
+          <div class="min-h-[400px]">
+            <div class="h-[60vh] grid grid-cols-12">
               <!-- Left Column: Macro List (30%) -->
-              <div class="col-span-4 pr-2 border-r">
+              <div class="col-span-4 pr-4 border-r overflow-y-auto h-full">
                 <CommandItem
                   v-for="(macro, index) in macroStore.macroOptions"
                   :key="macro.value"
-                  :value="macro.label"
+                  :value="macro.label + '|' + index"
                   :data-index="index"
                   @select="handleApplyMacro(macro)"
-                  class="px-3 py-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:text-primary"
+                  class="px-3 py-2 rounded cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:"
                 >
                   <div class="flex items-center gap-2">
-                    <Zap size="14" class="text-primary shrink-0" />
+                    <Zap size="14" class="shrink-0" />
                     <span class="text-sm truncate w-full break-words whitespace-normal">{{
                       macro.label
                     }}</span>
@@ -76,67 +79,63 @@
               </div>
 
               <!-- Right Column: Macro Details (70%) -->
-              <div class="col-span-8 pl-2">
+              <div class="col-span-8 px-4 overflow-y-auto h-full pb-12">
                 <div class="space-y-3 text-xs">
                   <!-- Reply Preview -->
-                  <div v-if="replyContent" class="space-y-1">
-                    <p class="text-xs font-semibold text-primary">
+                  <div v-if="replyContent" class="space-y-2">
+                    <p class="text-xs font-semibold text-foreground">
                       {{ $t('command.replyPreview') }}
                     </p>
                     <div
-                      class="w-full min-h-200 p-2 bg-muted/50 rounded-md overflow-auto shadow-sm native-html"
+                      class="w-full min-h-200 p-2 bg-muted/50 rounded overflow-auto shadow native-html"
                       v-dompurify-html="replyContent"
                     />
                   </div>
 
                   <!-- Actions -->
-                  <div v-if="otherActions.length > 0" class="space-y-1">
-                    <p class="text-xs font-semibold text-primary">
+                  <div v-if="otherActions.length > 0" class="space-y-2">
+                    <p class="text-xs font-semibold">
                       {{ $t('globals.terms.action', 2) }}
                     </p>
                     <div class="space-y-1.5 max-w-sm">
                       <div
                         v-for="action in otherActions"
                         :key="action.type"
-                        class="flex items-center gap-2 px-2 py-1.5 bg-muted/30 hover:bg-accent hover:text-accent-foreground rounded-md text-xs transition-all duration-200 group"
+                        class="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-muted/50 hover:bg-accent hover:text-accent-foreground transition duration-200 group"
                       >
                         <div
-                          class="p-1 bg-primary/10 rounded-full group-hover:bg-primary/20 transition-colors duration-200"
+                          class="p-1 rounded-full group-hover:bg-muted/20 transition duration-200"
                         >
-                          <User
-                            v-if="action.type === 'assign_user'"
-                            :size="10"
-                            class="shrink-0 text-primary"
-                          />
+                          <User v-if="action.type === 'assign_user'" :size="10" class="shrink-0" />
                           <Users
                             v-else-if="action.type === 'assign_team'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Pin
                             v-else-if="action.type === 'set_status'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Rocket
                             v-else-if="action.type === 'set_priority'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Tags
                             v-else-if="action.type === 'add_tags'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Tags
                             v-else-if="action.type === 'set_tags'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                           <Tags
                             v-else-if="action.type === 'remove_tags'"
                             :size="10"
-                            class="shrink-0 text-primary"
+                            class="shrink-0"
                           />
                         </div>
                         <span class="truncate">{{ getActionLabel(action) }}</span>

frontend/src/features/contact/ContactNotes.vue

@@ -2,7 +2,7 @@
   <div class="w-full space-y-6 pb-8 relative">
     <!-- Header -->
     <div class="flex items-center justify-between mb-4">
-      <span class="text-xl font-semibold text-gray-900">{{ $t('globals.terms.note', 2) }}</span>
+      <span class="text-xl font-semibold text-gray-900 dark:text-foreground">{{ $t('globals.terms.note', 2) }}</span>
       <Button
         variant="outline"
         size="sm"
@@ -54,7 +54,7 @@
         class="overflow-hidden border-gray-2 hover:border-gray-300 transition-all duration-200 box hover:shadow"
       >
         <!-- Header -->
-        <CardHeader class="bg-gray-50/50 border-b p-2">
+        <CardHeader class="bg-gray-50/50 dark:bg-secondary border-b p-2">
           <div class="flex items-center justify-between">
             <div class="flex items-center space-x-3">
               <Avatar class="border border-gray-200 shadow-sm">
@@ -64,7 +64,7 @@
                 </AvatarFallback>
               </Avatar>
               <div>
-                <p class="text-sm font-medium text-gray-900">{{ note.first_name }} {{ note.last_name }}</p>
+                <p class="text-sm font-medium text-gray-900 dark:text-foreground">{{ note.first_name }} {{ note.last_name }}</p>
                 <p class="text-xs text-muted-foreground flex items-center">
                   <ClockIcon class="h-3 w-3 mr-1 inline-block opacity-70" />
                   {{ formatDate(note.created_at) }}
@@ -109,13 +109,13 @@
     <!-- No notes message -->
     <div
       v-if="notes.length === 0 && !isAddingNote && !isLoading"
-      class="box border-dashed p-10 text-center bg-gray-50/50 mt-6"
+      class="box border-dashed p-10 text-center bg-gray-50/50 mt-6 dark:bg-background"
     >
       <div class="flex flex-col items-center">
-        <div class="rounded-full bg-gray-100 p-4 mb-2">
-          <MessageSquareIcon class="text-gray-400" size="25" />
+        <div class="rounded-full bg-gray-100 dark:bg-foreground p-4 mb-2">
+          <MessageSquareIcon class="text-gray-400 dark:text-background" size="25" />
         </div>
-        <h3 class="mt-2 text-base font-medium text-gray-900">{{ $t('contact.notes.empty') }}</h3>
+        <h3 class="mt-2 text-base font-medium text-gray-900 dark:text-foreground">{{ $t('contact.notes.empty') }}</h3>
         <p class="mt-1 text-sm text-muted-foreground max-w-sm mx-auto">
           {{ $t('contact.notes.help') }}
         </p>

frontend/src/features/conversation/Conversation.vue

@@ -12,7 +12,7 @@
         <DropdownMenu>
           <DropdownMenuTrigger>
             <div
-              class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded-md text-sm"
+              class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded text-sm"
               v-if="!conversationStore.conversation.loading"
             >
               <span class="text-secondary font-medium inline-block">

frontend/src/features/conversation/ConversationTextEditor.vue

@@ -4,7 +4,7 @@
       :editor="editor"
       :tippy-options="{ duration: 100 }"
       v-if="editor"
-      class="bg-white p-1 box will-change-transform"
+      class="bg-background p-1 box will-change-transform"
     >
       <div class="flex space-x-1 items-center">
         <DropdownMenu v-if="aiPrompts.length > 0">
@@ -32,7 +32,7 @@
           variant="ghost"
           @click.prevent="isBold = !isBold"
           :active="isBold"
-          :class="{ 'bg-gray-200': isBold }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': isBold }"
         >
           <Bold size="14" />
         </Button>
@@ -41,7 +41,7 @@
           variant="ghost"
           @click.prevent="isItalic = !isItalic"
           :active="isItalic"
-          :class="{ 'bg-gray-200': isItalic }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': isItalic }"
         >
           <Italic size="14" />
         </Button>
@@ -49,7 +49,7 @@
           size="sm"
           variant="ghost"
           @click.prevent="toggleBulletList"
-          :class="{ 'bg-gray-200': editor?.isActive('bulletList') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('bulletList') }"
         >
           <List size="14" />
         </Button>
@@ -58,7 +58,7 @@
           size="sm"
           variant="ghost"
           @click.prevent="toggleOrderedList"
-          :class="{ 'bg-gray-200': editor?.isActive('orderedList') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('orderedList') }"
         >
           <ListOrdered size="14" />
         </Button>
@@ -66,16 +66,16 @@
           size="sm"
           variant="ghost"
           @click.prevent="openLinkModal"
-          :class="{ 'bg-gray-200': editor?.isActive('link') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('link') }"
         >
           <LinkIcon size="14" />
         </Button>
-        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-white border rounded-lg">
-          <input
+        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-background border rounded">
+          <Input
             v-model="linkUrl"
             type="text"
             placeholder="Enter link URL"
-            class="border p-1 text-sm"
+            class="border p-1 text-sm w-[200px]"
           />
           <Button size="sm" @click="setLink">
             <Check size="14" />
@@ -111,6 +111,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import StarterKit from '@tiptap/starter-kit'

frontend/src/features/conversation/CreateConversation.vue

@@ -5,7 +5,7 @@
         <DialogTitle>
           {{
             $t('globals.messages.new', {
-              name: $t('globals.terms.conversation')
+              name: $t('globals.terms.conversation').toLowerCase()
             })
           }}
         </DialogTitle>
@@ -28,13 +28,13 @@
 
               <ul
                 v-if="searchResults.length"
-                class="border rounded p-2 max-h-60 overflow-y-auto absolute bg-white w-full z-50 shadow-lg"
+                class="border rounded p-2 max-h-60 overflow-y-auto absolute w-full z-50 shadow-lg bg-background"
               >
                 <li
                   v-for="contact in searchResults"
                   :key="contact.email"
                   @click="selectContact(contact)"
-                  class="cursor-pointer p-2 hover:bg-gray-100 rounded"
+                  class="cursor-pointer p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   {{ contact.first_name }} {{ contact.last_name }} ({{ contact.email }})
                 </li>
@@ -125,11 +125,17 @@
                   <template #selected="{ selected }">
                     <div class="flex items-center gap-3">
                       <div class="w-7 h-7 flex items-center justify-center" v-if="selected">
-                        {{ selected?.emoji }}
+                        <span v-if="selected?.emoji">{{ selected?.emoji }}</span>
+                        <div
+                          v-else
+                          class="text-primary bg-muted rounded-full w-7 h-7 flex items-center justify-center"
+                        >
+                          <Users size="14" />
+                        </div>
                       </div>
-                      <span class="text-sm">{{
-                        selected?.label || t('form.field.selectTeam')
-                      }}</span>
+                      <span class="text-sm">
+                        {{ selected?.label || t('form.field.selectTeam') }}
+                      </span>
                     </div>
                   </template>
                 </ComboBox>
@@ -167,11 +173,7 @@
                     <div class="flex items-center gap-3">
                       <Avatar class="w-7 h-7" v-if="selected">
                         <AvatarImage
-                          :src="
-                            selected?.value === 'none'
-                              ? ''
-                              : selected?.avatar_url || ''
-                          "
+                          :src="selected?.value === 'none' ? '' : selected?.avatar_url || ''"
                           :alt="selected?.value === 'none' ? 'N' : selected?.label?.slice(0, 2)"
                         />
                         <AvatarFallback>

frontend/src/features/conversation/MacroActionsPreview.vue

@@ -4,19 +4,18 @@
       <div
         v-for="action in actions"
         :key="action.type"
-        class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2 py-1"
+        class="flex items-center border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2"
       >
         <div class="flex items-center space-x-2 px-2">
           <component
             :is="getIcon(action.type)"
             size="16"
-            class="text-gray-500 text-primary group-hover:text-primary"
+            class="text-gray-500 text-primary"
           />
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
-              >
+                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-gray-100">
                 {{ getDisplayValue(action) }}
               </div>
             </TooltipTrigger>
@@ -27,7 +26,7 @@
         </div>
         <button
           @click.stop="onRemove(action)"
-          class="pr-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
+          class="p-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
           title="Remove action"
         >
           <X size="14" />

frontend/src/features/conversation/ReplyBox.vue

@@ -42,7 +42,7 @@
     <Dialog :open="isEditorFullscreen" @update:open="isEditorFullscreen = false">
       <DialogContent
         class="max-w-[60%] max-h-[75%] h-[70%] bg-card text-card-foreground p-4 flex flex-col"
-        :class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
+        :class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
         @escapeKeyDown="isEditorFullscreen = false"
         :hide-close-button="true"
       >
@@ -66,7 +66,7 @@
           v-model:emailErrors="emailErrors"
           v-model:messageType="messageType"
           v-model:showBcc="showBcc"
-          @toggleFullscreen="isEditorFullscreen = true"
+          @toggleFullscreen="isEditorFullscreen = !isEditorFullscreen"
           @send="processSend"
           @fileUpload="handleFileUpload"
           @inlineImageUpload="handleInlineImageUpload"
@@ -79,8 +79,8 @@
 
     <!-- Main Editor non-fullscreen -->
     <div
-      class="bg-card text-card-foreground box m-2 px-2 pt-2 flex flex-col"
-      :class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
+      class="bg-background text-card-foreground box m-2 px-2 pt-2 flex flex-col"
+      :class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
       v-if="!isEditorFullscreen"
     >
       <ReplyBoxContent
@@ -102,7 +102,7 @@
         v-model:emailErrors="emailErrors"
         v-model:messageType="messageType"
         v-model:showBcc="showBcc"
-        @toggleFullscreen="isEditorFullscreen = true"
+        @toggleFullscreen="isEditorFullscreen = !isEditorFullscreen"
         @send="processSend"
         @fileUpload="handleFileUpload"
         @inlineImageUpload="handleInlineImageUpload"

frontend/src/features/conversation/ReplyBoxContent.vue

@@ -6,35 +6,27 @@
       class="flex justify-between items-center"
       :class="{ 'mb-4': !isFullscreen, 'border-b border-border pb-4': isFullscreen }"
     >
-      <Tabs v-model="messageType" class="rounded-lg border">
-        <TabsList class="bg-muted p-1 rounded-lg">
+      <Tabs v-model="messageType" class="rounded border">
+        <TabsList class="bg-muted p-1 rounded">
           <TabsTrigger
             value="reply"
-            class="px-3 py-1 rounded-lg transition-colors duration-200"
+            class="px-3 py-1 rounded transition-colors duration-200"
             :class="{ 'bg-background text-foreground': messageType === 'reply' }"
           >
             {{ $t('replyBox.reply') }}
           </TabsTrigger>
           <TabsTrigger
             value="private_note"
-            class="px-3 py-1 rounded-lg transition-colors duration-200"
+            class="px-3 py-1 rounded transition-colors duration-200"
             :class="{ 'bg-background text-foreground': messageType === 'private_note' }"
           >
             {{ $t('replyBox.privateNote') }}
           </TabsTrigger>
         </TabsList>
       </Tabs>
-      <span
-        class="text-muted-foreground hover:text-foreground transition-colors duration-200 cursor-pointer"
-        variant="ghost"
-        @click="toggleFullscreen"
-      >
-        <component
-          :is="isFullscreen ? Minimize2 : Maximize2"
-          :size="isFullscreen ? '18' : '15'"
-          :class="{ 'mr-2': !isFullscreen, 'mr-1 mb-2': isFullscreen }"
-        />
-      </span>
+      <Button class="text-muted-foreground" variant="ghost" @click="toggleFullscreen">
+        <component :is="isFullscreen ? Minimize2 : Maximize2" />
+      </Button>
     </div>
 
     <!-- To, CC, and BCC fields -->
@@ -43,13 +35,13 @@
       v-if="messageType === 'reply'"
     >
       <div class="flex items-center space-x-2">
-        <label class="w-12 text-sm font-medium text-muted-foreground">To:</label>
+        <label class="w-12 text-sm font-medium text-muted-foreground">TO:</label>
         <Input
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="to"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('to')"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
+          @blur="validateEmails"
         />
       </div>
       <div class="flex items-center space-x-2">
@@ -58,8 +50,8 @@
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="cc"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('cc')"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
+          @blur="validateEmails"
         />
         <Button
           size="sm"
@@ -75,8 +67,8 @@
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="bcc"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
-          @blur="validateEmails('bcc')"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
+          @blur="validateEmails"
         />
       </div>
     </div>
@@ -221,9 +213,11 @@ const editorPlaceholder = t('replyBox.editor.placeholder')
 const toggleBcc = async () => {
   showBcc.value = !showBcc.value
   await nextTick()
-  // If hiding BCC field, clear the content
+  // If hiding BCC field, clear the content and validate email bcc so it doesn't show errors.
   if (!showBcc.value) {
     bcc.value = ''
+    await nextTick()
+    validateEmails()
   }
 }
 
@@ -255,37 +249,32 @@ const enableSend = computed(() => {
 })
 
 /**
- * Validate email addresses in the To, CC, and BCC fields
- * @param {string} field - 'to', 'cc', or 'bcc'
+ * Validates email addresses in To, CC, and BCC fields.
+ * Populates `emailErrors` with invalid emails grouped by field.
  */
-const validateEmails = (field) => {
-  const emails = field === 'to' ? to.value : field === 'cc' ? cc.value : bcc.value
-  const emailList = emails
-    .split(',')
-    .map((e) => e.trim())
-    .filter((e) => e !== '')
-
-  const invalidEmails = emailList.filter((email) => !validateEmail(email))
-
-  // Clear existing errors
+const validateEmails = async () => {
   emailErrors.value = []
+  await nextTick()
 
-  // Add new error if there are invalid emails
-  if (invalidEmails.length > 0) {
-    emailErrors.value = [
-      ...emailErrors.value,
-      `${t('replyBox.invalidEmailsIn')} '${field}': ${invalidEmails.join(', ')}`
-    ]
-  }
+  const fields = ['to', 'cc', 'bcc']
+  const values = { to: to.value, cc: cc.value, bcc: bcc.value }
+
+  fields.forEach((field) => {
+    const invalid = values[field]
+      .split(',')
+      .map((e) => e.trim())
+      .filter((e) => e && !validateEmail(e))
+
+    if (invalid.length)
+      emailErrors.value.push(`${t('replyBox.invalidEmailsIn')} '${field}': ${invalid.join(', ')}`)
+  })
 }
 
 /**
  * Send the reply or private note
  */
 const handleSend = async () => {
-  validateEmails('to')
-  validateEmails('cc')
-  validateEmails('bcc')
+  await validateEmails()
   if (emailErrors.value.length > 0) {
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
       variant: 'destructive',

frontend/src/features/conversation/list/ConversationEmptyList.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col items-center justify-center h-64 space-y-2">
     <component :is="icon" :stroke-width="1" :size="50" />
-    <h1 class="text-md font-semibold text-gray-800">
+    <h1 class="text-md font-semibold text-gray-800 dark:text-foreground">
       {{ title }}
     </h1>
-    <p class="text-gray-600 text-center text-sm">
+    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
       {{ message }}
     </p>
   </div>

frontend/src/features/conversation/list/ConversationList.vue

@@ -2,12 +2,12 @@
   <div class="h-screen flex flex-col">
     <!-- Header -->
     <div class="flex items-center space-x-4 px-2 h-12 border-b shrink-0">
-      <SidebarTrigger class="h-4 w-4" />
-      <span class="text-xl font-semibold text-gray-800">{{ title }}</span>
+      <SidebarTrigger class="cursor-pointer" />
+      <span class="text-xl font-semibold">{{ title }}</span>
     </div>
 
     <!-- Filters -->
-    <div class="bg-white p-2 flex justify-between items-center">
+    <div class="p-2 flex justify-between items-center">
       <!-- Status dropdown-menu, hidden when a view is selected as views are pre-filtered -->
       <DropdownMenu v-if="!route.params.viewID">
         <DropdownMenuTrigger asChild>
@@ -99,7 +99,7 @@
         <div
           v-if="!conversationStore.conversations.errorMessage"
           key="list"
-          class="divide-y divide-gray-200"
+          class="divide-y divide-gray-200 dark:divide-gray-700"
         >
           <ConversationListItem
             v-for="conversation in conversationStore.conversationsList"
@@ -107,7 +107,7 @@
             :conversation="conversation"
             :currentConversation="conversationStore.current"
             :contactFullName="conversationStore.getContactFullName(conversation.uuid)"
-            class="transition-colors duration-200 hover:bg-gray-50"
+            class="transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-600"
           />
         </div>
 

frontend/src/features/conversation/list/ConversationListItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="group relative p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 border-gray-200 last:border-b-0 hover:shadow-sm"
+    class="group relative px-4 p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 dark:hover:bg-accent/60"
     :class="{
-      'bg-accent/30 border-l-4': conversation.uuid === currentConversation?.uuid
+      'bg-accent/60 border-l-4': conversation.uuid === currentConversation?.uuid
     }"
     @click="navigateToConversation(conversation.uuid)"
   >
@@ -23,7 +23,7 @@
       <div class="flex-1 min-w-0 space-y-2">
         <!-- Contact name and last message time -->
         <div class="flex items-center justify-between gap-2">
-          <h3 class="text-sm font-semibold text-gray-900 truncate">
+          <h3 class="text-sm font-semibold truncate">
             {{ contactFullName }}
           </h3>
           <span class="text-xs text-gray-400 whitespace-nowrap" v-if="conversation.last_message_at">
@@ -39,7 +39,7 @@
 
         <!-- Message preview and unread count -->
         <div class="flex items-start justify-between gap-2">
-          <div class="text-sm text-gray-600 flex items-center gap-1.5 flex-1 break-all">
+          <div class="text-sm flex items-center gap-1.5 flex-1 break-all text-gray-600 dark:text-gray-300">
             <Reply
               class="text-green-600 flex-shrink-0"
               size="15"
@@ -55,21 +55,38 @@
           </div>
         </div>
 
-        <div class="flex items-center mt-2 space-x-2">
-          <SlaBadge
-            v-if="conversation.first_response_deadline_at"
-            :dueAt="conversation.first_response_deadline_at"
-            :actualAt="conversation.first_reply_at"
-            :label="'FRD'"
-            :showExtra="false"
-          />
-          <SlaBadge
-            v-if="conversation.resolution_deadline_at"
-            :dueAt="conversation.resolution_deadline_at"
-            :actualAt="conversation.resolved_at"
-            :label="'RD'"
-            :showExtra="false"
-          />
+        <!-- SLA Badges -->
+        <div class="flex items-center">
+          <div :class="getSlaClass(frdStatus)">
+            <SlaBadge
+              :dueAt="conversation.first_response_deadline_at"
+              :actualAt="conversation.first_reply_at"
+              :label="'FRD'"
+              :showExtra="false"
+              @status="frdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
+            />
+          </div>
+          <div :class="getSlaClass(rdStatus)">
+            <SlaBadge
+              :dueAt="conversation.resolution_deadline_at"
+              :actualAt="conversation.resolved_at"
+              :label="'RD'"
+              :showExtra="false"
+              @status="rdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
+            />
+          </div>
+          <div :class="getSlaClass(nrdStatus)">
+            <SlaBadge
+              :dueAt="conversation.next_response_deadline_at"
+              :actualAt="conversation.next_response_met_at"
+              :label="'NRD'"
+              :showExtra="false"
+              @status="nrdStatus = $event"
+              :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -77,7 +94,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { formatTime } from '@/utils/datetime'
 import { Mail, Reply } from 'lucide-vue-next'
@@ -86,6 +103,9 @@ import SlaBadge from '@/features/sla/SlaBadge.vue'
 
 const router = useRouter()
 const route = useRoute()
+const frdStatus = ref('')
+const rdStatus = ref('')
+const nrdStatus = ref('')
 
 const props = defineProps({
   conversation: Object,
@@ -113,4 +133,6 @@ const trimmedLastMessage = computed(() => {
   const message = props.conversation.last_message || ''
   return message.length > 100 ? message.slice(0, 100) + '...' : message
 })
+
+const getSlaClass = (status) => (['overdue', 'remaining'].includes(status) ? 'mr-2' : '')
 </script>

frontend/src/features/conversation/message/AgentMessageBubble.vue

@@ -14,10 +14,10 @@
         <div
           class="flex flex-col justify-end message-bubble relative"
           :class="{
-            '!bg-[#FEF1E1]': message.private,
-            'bg-white border border-border': !message.private,
+            'bg-[#FEF1E1] dark:bg-[#4C3A24]': message.private,
+            'border border-border': !message.private,
             'opacity-50 animate-pulse': message.status === 'pending',
-            'bg-red-50 border-red-200': message.status === 'failed'
+            'border-red-400': message.status === 'failed'
           }"
         >
           <!-- Message Envelope -->

frontend/src/features/conversation/message/ContactMessageBubble.vue

@@ -42,7 +42,7 @@
           <div
             v-if="hasQuotedContent"
             @click="toggleQuote"
-            class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded-md transition-all"
+            class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded transition-all"
           >
             {{
               showQuotedText ? t('conversation.hideQuotedText') : t('conversation.showQuotedText')

frontend/src/features/conversation/message/MessageList.vue

@@ -58,7 +58,7 @@
       <div v-show="!isAtBottom" class="absolute bottom-5 right-6 z-10">
         <button
           @click="handleScrollToBottom"
-          class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-white text-primary transition-colors duration-200 hover:bg-gray-100"
+          class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-background text-primary transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
         >
           <ChevronDown size="18" />
         </button>

frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue

@@ -4,16 +4,16 @@
       <div
         v-for="attachment in allAttachments"
         :key="attachment.uuid || attachment.tempId"
-        class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
+        class="flex items-center bg-background border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
       >
         <div class="flex items-center space-x-1 py-1">
           <DotLoader v-if="attachment.loading"/>
-          <PaperclipIcon v-else size="16" class="text-gray-500 group-hover:text-primary" />
+          <PaperclipIcon v-else size="16" />
 
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
+                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-foreground"
               >
                 {{ getAttachmentName(attachment.filename) }}
                 <span class="text-xs text-gray-500 ml-1">

frontend/src/features/conversation/sidebar/ConversationInfo.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="space-y-4">
-    <div
-      class="flex flex-col"
-      v-if="conversation.subject"
-    >
+    <div class="flex flex-col" v-if="conversation.subject">
       <p class="font-medium">{{ $t('form.field.subject') }}</p>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
       <p v-else>
@@ -34,7 +31,7 @@
           v-if="conversation.first_response_deadline_at"
           :dueAt="conversation.first_response_deadline_at"
           :actualAt="conversation.first_reply_at"
-          :key="conversation.uuid"
+          :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
         />
       </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -53,7 +50,7 @@
           v-if="conversation.resolution_deadline_at"
           :dueAt="conversation.resolution_deadline_at"
           :actualAt="conversation.resolved_at"
-          :key="conversation.uuid"
+          :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
         />
       </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -66,7 +63,15 @@
     </div>
 
     <div class="flex flex-col">
-      <p class="font-medium">{{ $t('form.field.lastReplyAt') }}</p>
+      <div class="flex justify-start items-center space-x-2">
+        <p class="font-medium">{{ $t('form.field.lastReplyAt') }}</p>
+        <SlaBadge
+          v-if="conversation.next_response_deadline_at"
+          :dueAt="conversation.next_response_deadline_at"
+          :actualAt="conversation.next_response_met_at"
+          :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
+        />
+      </div>
       <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
       <p v-if="conversation.last_reply_at">
         {{ format(conversation.last_reply_at, 'PPpp') }}

frontend/src/features/conversation/sidebar/ConversationSideBar.vue

@@ -3,7 +3,7 @@
     <ConversationSideBarContact class="p-4" />
     <Accordion type="multiple" collapsible v-model="accordionState">
       <AccordionItem value="actions" class="border-0 mb-2">
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.action', 2) }}
         </AccordionTrigger>
 
@@ -124,7 +124,7 @@
 
       <!-- Information -->
       <AccordionItem value="information" class="border-0 mb-2">
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.information') }}
         </AccordionTrigger>
         <AccordionContent class="p-4">
@@ -138,7 +138,7 @@
         class="border-0 mb-2"
         v-if="customAttributeStore.contactAttributeOptions.length > 0"
       >
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.contactAttributes') }}
         </AccordionTrigger>
         <AccordionContent class="p-4">
@@ -153,7 +153,7 @@
 
       <!-- Previous conversations -->
       <AccordionItem value="previous_conversations" class="border-0 mb-2">
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.previousConvo') }}
         </AccordionTrigger>
         <AccordionContent class="p-4">

frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue

@@ -7,11 +7,14 @@
           {{ conversation?.contact?.first_name?.toUpperCase().substring(0, 2) }}
         </AvatarFallback>
       </Avatar>
-      <PanelLeft
-        class="cursor-pointer"
+      <Button
+        variant="ghost"
+        size="icon"
+        class="h-7 w-7"
         @click="emitter.emit(EMITTER_EVENTS.CONVERSATION_SIDEBAR_TOGGLE)"
-        size="20"
-      />
+      >
+        <ViewVerticalIcon />
+      </Button>
     </div>
 
     <div class="h-6 flex items-center gap-2">
@@ -51,7 +54,8 @@
 
 <script setup>
 import { computed } from 'vue'
-import { PanelLeft } from 'lucide-vue-next'
+import { ViewVerticalIcon } from '@radix-icons/vue'
+import { Button } from '@/components/ui/button'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Mail, Phone, ExternalLink } from 'lucide-vue-next'
 import { useEmitter } from '@/composables/useEmitter'

frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue

@@ -14,7 +14,7 @@
         <button
           v-if="!conversationSidebarOpen"
           @click="toggleSidebar"
-          class="absolute right-full top-16 p-2 rounded-l-full bg-white text-primary hover:bg-opacity-90 transition-all duration-200 shadow-lg group"
+          class="absolute right-full top-16 p-2 rounded-l-full bg-background text-primary hover:bg-opacity-90 transition-all duration-200 shadow-lg group dark:border"
         >
           <ChevronLeft size="16" class="group-hover:scale-110 transition-transform" />
         </button>

frontend/src/features/conversation/sidebar/PreviousConversations.vue

@@ -19,7 +19,7 @@
           type: 'assigned'
         }
       }"
-      class="block p-2 rounded-md hover:bg-muted"
+      class="block p-2 rounded hover:bg-muted"
     >
       <div class="flex items-center justify-between">
         <div class="flex flex-col">

frontend/src/features/reports/DashboardCard.vue

@@ -1,11 +1,7 @@
 <template>
-  <div class="flex flex-1 flex-col gap-x-5 box p-5 space-y-5 bg-white">
+  <div class="flex flex-1 flex-col gap-x-5 box p-5 space-y-5">
     <div class="flex items-center space-x-2">
       <p class="text-2xl flex items-center">{{ title }}</p>
-      <div class="bg-green-100/70 flex items-center space-x-2 px-1 rounded">
-        <span class="blinking-dot"></span>
-        <p class="uppercase text-xs">{{ $t('globals.terms.live') }}</p>
-      </div>
     </div>
     <div class="flex justify-between pr-32">
       <div

frontend/src/features/search/SearchHeader.vue

@@ -1,16 +1,12 @@
 <template>
   <div>
-    <div class="flex items-center space-x-4 px-2 h-12">
-      <SidebarTrigger class="cursor-pointer w-4 h-4 text-black" />
-      <div class="flex-1 flex items-center">
-        <Search class="w-5 h-5" />
-        <Separator orientation="vertical" />
-        <Input
-          v-model="model"
-          :placeholder="t('globals.terms.search')"
-          class="w-full border-none shadow-none focus:ring-0 focus:ring-offset-0"
-        />
-      </div>
+    <div class="flex items-center px-2 h-12">
+      <SidebarTrigger class="cursor-pointer" />
+      <Input
+        v-model="model"
+        :placeholder="t('globals.terms.search')"
+        class="w-full border-none shadow-none focus:ring-0 focus:ring-offset-0"
+      />
     </div>
     <Separator />
   </div>
@@ -20,7 +16,6 @@
 import { Separator } from '@/components/ui/separator'
 import { Input } from '@/components/ui/input'
 import { SidebarTrigger } from '@/components/ui/sidebar'
-import { Search } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
 const model = defineModel({
   type: String,

frontend/src/features/search/SearchResults.vue

@@ -1,26 +1,33 @@
 <template>
-  <div class="max-w-5xl mx-auto p-6 bg-background min-h-screen">
+  <div class="max-w-5xl mx-auto p-6 min-h-screen">
     <div class="space-y-8">
       <div
         v-for="(items, type) in results"
         :key="type"
-        class="bg-card rounded-lg shadow-md overflow-hidden"
+        class="bg-card rounded shadow overflow-hidden"
       >
-        <h2 class="bg-primary text-lg font-bold text-secondary py-2 px-6 capitalize">
+        <!-- Header for each section -->
+        <h2
+          class="bg-primary dark:bg-primary text-lg font-bold text-white dark:text-primary-foreground py-2 px-6 capitalize"
+        >
           {{ type }}
         </h2>
 
-        <div v-if="items.length === 0" class="p-6 text-muted-foreground">
-          {{ $t('globals.messages.noResults', {
-            name: type
-          }) }}
+        <!-- No results message -->
+        <div v-if="items.length === 0" class="p-6 text-gray-500 dark:text-muted-foreground">
+          {{
+            $t('globals.messages.noResults', {
+              name: type
+            })
+          }}
         </div>
 
-        <div class="divide-y divide-border">
+        <!-- Results list -->
+        <div class="divide-y divide-gray-200 dark:divide-border">
           <div
             v-for="item in items"
             :key="item.id || item.uuid"
-            class="p-6 hover:bg-accent transition duration-300 ease-in-out group"
+            class="p-6 hover:bg-gray-100 dark:hover:bg-accent transition duration-300 ease-in-out group"
           >
             <router-link
               :to="{
@@ -34,8 +41,9 @@
             >
               <div class="flex justify-between items-start">
                 <div class="flex-grow">
+                  <!-- Reference number -->
                   <div
-                    class="text-sm font-semibold text-primary mb-2 group-hover:text-primary transition duration-300"
+                    class="text-sm font-semibold mb-2 group-hover:text-primary dark:group-hover:text-primary transition duration-300"
                   >
                     #{{
                       type === 'conversations'
@@ -43,14 +51,18 @@
                         : item.conversation_reference_number
                     }}
                   </div>
+
+                  <!-- Content -->
                   <div
-                    class="text-card-foreground font-medium mb-2 text-lg group-hover:text-foreground transition duration-300"
+                    class="text-gray-900 dark:text-card-foreground font-medium mb-2 text-lg group-hover:text-gray-950 dark:group-hover:text-foreground transition duration-300"
                   >
                     {{
                       truncateText(type === 'conversations' ? item.subject : item.text_content, 100)
                     }}
                   </div>
-                  <div class="text-sm text-muted-foreground flex items-center">
+
+                  <!-- Timestamp -->
+                  <div class="text-sm text-gray-500 dark:text-muted-foreground flex items-center">
                     <ClockIcon class="h-4 w-4 mr-1" />
                     {{
                       formatDate(
@@ -59,11 +71,13 @@
                     }}
                   </div>
                 </div>
+
+                <!-- Right arrow icon -->
                 <div
-                  class="bg-secondary rounded-full p-2 group-hover:bg-primary transition duration-300"
+                  class="bg-gray-200 dark:bg-secondary rounded-full p-2 group-hover:bg-primary dark:group-hover:bg-primary transition duration-300"
                 >
                   <ChevronRightIcon
-                    class="h-5 w-5 text-secondary-foreground group-hover:text-primary-foreground"
+                    class="h-5 w-5 text-gray-700 dark:text-secondary-foreground group-hover:text-white dark:group-hover:text-primary-foreground"
                     aria-hidden="true"
                   />
                 </div>
@@ -75,7 +89,6 @@
     </div>
   </div>
 </template>
-
 <script setup>
 import { ChevronRightIcon, ClockIcon } from 'lucide-vue-next'
 import { format, parseISO } from 'date-fns'

frontend/src/features/sla/SlaBadge.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="dueAt" class="flex justify-start items-center space-x-2">
     <!-- Overdue-->
-    <span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge box sla-overdue">
-      <AlertCircle size="12" class="text-red-800" />
-      <span class="sla-text text-red-800">
+    <span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge sla-overdue">
+      <AlertCircle size="14" class="shrink-0 text-red-600 dark:text-red-300" stroke-width="2" />
+      <span class="sla-text">
         <span v-if="!showExtra">{{ label }} {{ $t('sla.overdue') }}</span>
         <span v-else>{{ label }} {{ $t('sla.overdueBy') }} {{ sla.value }} </span>
       </span>
@@ -13,9 +13,9 @@
     <span
       v-else-if="sla?.status === 'hit' && showExtra"
       key="sla-hit"
-      class="sla-badge box sla-hit"
+      class="sla-badge sla-hit"
     >
-      <CheckCircle size="12" />
+      <CheckCircle size="14" class="shrink-0 text-green-600 dark:text-green-300" stroke-width="2" />
       <span class="sla-text">{{ label }} {{ $t('sla.met') }}</span>
     </span>
 
@@ -23,16 +23,16 @@
     <span
       v-else-if="sla?.status === 'remaining'"
       key="remaining"
-      class="sla-badge box sla-remaining"
+      class="sla-badge sla-remaining"
     >
-      <Clock size="12" />
+      <Clock size="14" class="shrink-0 text-amber-600 dark:text-amber-300" stroke-width="2" />
       <span class="sla-text">{{ label }} {{ sla.value }}</span>
     </span>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useSla } from '@/composables/useSla'
 import { AlertCircle, CheckCircle, Clock } from 'lucide-vue-next'
 const props = defineProps({
@@ -45,30 +45,42 @@ const props = defineProps({
   }
 })
 
-let sla = null
-if (props.dueAt) {
-  sla = useSla(ref(props.dueAt), ref(props.actualAt))
-}
+const emit = defineEmits(['status'])
+let sla = useSla(ref(props.dueAt), ref(props.actualAt))
+
+// Watch for status change and emit
+watch(
+  sla,
+  (newVal) => {
+    if (newVal?.status) emit('status', newVal.status)
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
 .sla-badge {
-  @apply inline-flex items-center justify-center p-1 text-xs space-x-1 w-full rounded-lg;
+  @apply inline-flex items-center px-2 py-1 rounded-md border transition-all
+         text-xs font-medium tracking-tight space-x-1.5
+         hover:scale-[98%] hover:shadow-sm;
 }
 
 .sla-overdue {
-  @apply bg-red-100 text-red-800;
+  @apply bg-red-50/80 border-red-100 text-red-600 
+         dark:bg-red-900/40 dark:border-red-800/20 dark:text-red-300;
 }
 
 .sla-hit {
-  @apply bg-green-100 text-green-800;
+  @apply bg-green-50/80 border-green-100 text-green-600
+         dark:bg-green-900/40 dark:border-green-800/20 dark:text-green-300;
 }
 
 .sla-remaining {
-  @apply bg-yellow-100 text-yellow-800;
+  @apply bg-amber-50/80 border-amber-100 text-amber-600
+         dark:bg-amber-900/40 dark:border-amber-800/20 dark:text-amber-300;
 }
 
 .sla-text {
-  @apply text-[0.65rem];
+  @apply whitespace-nowrap;
 }
 </style>

frontend/src/layouts/admin/AdminPageWithHelp.vue

@@ -3,7 +3,7 @@
     <div class="w-8/12">
       <slot name="content" />
     </div>
-    <div class="rounded-lg w-3/12 p-2 space-y-2 self-start">
+    <div class="rounded w-3/12 p-2 space-y-2 self-start">
       <slot name="help" />
     </div>
   </div>

frontend/src/stores/conversation.js

@@ -638,9 +638,11 @@ export const useConversationStore = defineStore('conversation', () => {
   }
 
   function updateConversationProp (update) {
+    // Update the current conversation if it matches the UUID.
     if (conversation.data?.uuid === update.uuid) {
       conversation.data[update.prop] = update.value
     }
+    // Update the conversation in the list if it exists.
     const existingConversation = conversations?.data?.find(c => c.uuid === update.uuid)
     if (existingConversation) {
       existingConversation[update.prop] = update.value

frontend/src/views/admin/automations/CreateOrEditRule.vue

@@ -122,13 +122,21 @@
           <div class="flex justify-center">
             <div class="flex items-center space-x-2">
               <Button
-                :class="[groupOperator === 'AND' ? 'bg-black' : 'bg-gray-100 text-black']"
+                :class="[
+                  groupOperator === 'AND'
+                    ? 'bg-black text-white dark:bg-white dark:text-black'
+                    : 'bg-gray-100 text-black dark:bg-secondary dark:text-white'
+                ]"
                 @click.prevent="toggleGroupOperator('AND')"
               >
                 {{ $t('admin.automation.and') }}
               </Button>
               <Button
-                :class="[groupOperator === 'OR' ? 'bg-black' : 'bg-gray-100 text-black']"
+                :class="[
+                  groupOperator === 'OR'
+                    ? 'bg-black text-white dark:bg-white dark:text-black'
+                    : 'bg-gray-100 text-black dark:bg-secondary dark:text-white'
+                ]"
                 @click.prevent="toggleGroupOperator('OR')"
               >
                 {{ $t('admin.automation.or') }}

frontend/src/views/admin/sla/SLA.vue

@@ -6,11 +6,11 @@
 
     <template #help>
       <p>
-        Configure SLA policies to set response and resolution time targets.
+        Configure SLA policies to set response, resolution and next response time targets.
       </p>
       <p>
         SLAs help track team performance and ensure conversations are handled within expected timeframes.
-        Breached SLAs trigger notifications to relevant team members.
+        Breached SLAs trigger notifications to configured team members.
       </p>
     </template>
   </AdminPageWithHelp>

frontend/src/views/auth/ResetPasswordView.vue

@@ -20,12 +20,12 @@
               :placeholder="t('auth.enterEmail')"
               v-model.trim="resetForm.email"
               :class="{ 'border-destructive': emailHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
           <Button
-            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
             :disabled="isLoading"
             type="submit"
           >
@@ -60,7 +60,7 @@
           v-if="errorMessage"
           :errorMessage="errorMessage"
           :border="true"
-          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
+          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
         />
 
         <div class="text-center">

frontend/src/views/auth/SetPasswordView.vue

@@ -25,7 +25,7 @@
               :placeholder="t('auth.enterNewPassword')"
               v-model="passwordForm.password"
               :class="{ 'border-destructive': passwordHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
@@ -40,12 +40,12 @@
               :placeholder="t('auth.confirmNewPassword')"
               v-model="passwordForm.confirmPassword"
               :class="{ 'border-destructive': confirmPasswordHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
           <Button
-            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
             :disabled="isLoading"
             type="submit"
           >
@@ -80,7 +80,7 @@
           v-if="errorMessage"
           :errorMessage="errorMessage"
           :border="true"
-          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
+          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
         />
       </CardContent>
     </Card>

frontend/src/views/auth/UserLoginView.vue

@@ -21,7 +21,7 @@
             variant="outline"
             type="button"
             @click="redirectToOIDC(oidcProvider)"
-            class="w-full bg-card hover:bg-secondary text-foreground border-border rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-card hover:bg-secondary text-foreground border-border rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
           >
             <img
               :src="oidcProvider.logo_url"
@@ -55,7 +55,7 @@
               :placeholder="t('auth.enterEmail')"
               v-model.trim="loginForm.email"
               :class="{ 'border-destructive': emailHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
@@ -70,7 +70,7 @@
               :placeholder="t('auth.enterPassword')"
               v-model="loginForm.password"
               :class="{ 'border-destructive': passwordHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
@@ -84,7 +84,7 @@
           </div>
 
           <Button
-            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
             :disabled="isLoading"
             type="submit"
           >
@@ -119,7 +119,7 @@
           v-if="errorMessage"
           :errorMessage="errorMessage"
           :border="true"
-          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
+          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
         />
       </CardContent>
     </Card>

frontend/src/views/contact/ContactDetailView.vue

@@ -17,7 +17,7 @@
             />
 
             <div>
-              <h2 class="text-2xl font-bold text-gray-900">
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-foreground">
                 {{ contact.first_name }} {{ contact.last_name }}
               </h2>
             </div>