Added auth functionality, initial work with views and field types

frontend/app.vue

@@ -1,5 +1,10 @@
+<script setup lang="ts">
+import { Toaster } from 'vue-sonner'
+</script>
+
 <template>
   <div>
+    <Toaster position="top-right" :duration="4000" richColors />
     <NuxtPage />
   </div>
 </template>

frontend/assets/css/main.css

@@ -22,6 +22,8 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --radius: 0.5rem;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
@@ -50,6 +52,8 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;

frontend/components/AIChatBar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {
+  InputGroup,
+  InputGroupTextarea,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+} from '@/components/ui/input-group'
+import { Separator } from '@/components/ui/separator'
+import { ArrowUp } from 'lucide-vue-next'
+
+const chatInput = ref('')
+
+const handleSend = () => {
+  if (!chatInput.value.trim()) return
+  
+  // TODO: Implement AI chat send functionality
+  console.log('Sending message:', chatInput.value)
+  chatInput.value = ''
+}
+</script>
+
+<template>
+  <div class="ai-chat-area sticky bottom-0 z-20 bg-background border-t border-border p-4 bg-neutral-50">
+    <InputGroup>
+      <InputGroupTextarea 
+        v-model="chatInput"
+        placeholder="Ask, Search or Chat..." 
+        class="min-h-[60px] rounded-lg"
+        @keydown.enter.exact.prevent="handleSend"
+      />
+      <InputGroupAddon>
+        <InputGroupText class="ml-auto">
+          52% used
+        </InputGroupText>
+        <Separator orientation="vertical" class="!h-4" />
+        <InputGroupButton
+          variant="default"
+          class="rounded-full"
+          :disabled="!chatInput.trim()"
+          @click="handleSend"
+        >
+          <ArrowUp class="size-4" />
+          <span class="sr-only">Send</span>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+</template>
+
+<style scoped>
+.ai-chat-area {
+  height: calc(100vh / 6);
+  min-height: 140px;
+  max-height: 200px;
+}
+</style>

frontend/components/AppSidebar.vue

@@ -16,7 +16,13 @@ import {
   SidebarRail,
 } from '@/components/ui/sidebar'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
-import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers } from 'lucide-vue-next'
+import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut } from 'lucide-vue-next'
+
+const { logout } = useAuth()
+
+const handleLogout = async () => {
+  await logout()
+}
 
 const menuItems = [
   {
@@ -95,7 +101,7 @@ const menuItems = [
               <Collapsible v-else as-child :default-open="false" class="group/collapsible">
                 <SidebarMenuItem>
                   <CollapsibleTrigger as-child>
-                    <SidebarMenuButton tooltip="{item.title}">
+                    <SidebarMenuButton :tooltip="item.title">
                       <component :is="item.icon" />
                       <span>{{ item.title }}</span>
                       <ChevronRight
@@ -125,8 +131,9 @@ const menuItems = [
     <SidebarFooter>
       <SidebarMenu>
         <SidebarMenuItem>
-          <SidebarMenuButton>
-            <span class="text-sm text-muted-foreground">Logged in as user</span>
+          <SidebarMenuButton @click="handleLogout" class="cursor-pointer hover:bg-accent">
+            <LogOut class="h-4 w-4" />
+            <span>Logout</span>
           </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>

frontend/components/LoginForm.vue

@@ -5,8 +5,34 @@ import { Label } from '@/components/ui/label'
 
 const config = useRuntimeConfig()
 const router = useRouter()
+const { toast } = useToast()
 
-const tenantId = ref('123')
+// Cookie for server-side auth check
+const tokenCookie = useCookie('token')
+
+// Extract subdomain from hostname (e.g., tenant1.localhost → tenant1)
+const getSubdomain = () => {
+  if (!import.meta.client) return null
+  const hostname = window.location.hostname
+  const parts = hostname.split('.')
+  
+  console.log('Extracting subdomain from:', hostname, 'parts:', parts)
+  
+  // For localhost development: tenant1.localhost or localhost
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return null // Use default tenant for plain localhost
+  }
+  
+  // For subdomains like tenant1.routebox.co or tenant1.localhost
+  if (parts.length >= 2 && parts[0] !== 'www') {
+    console.log('Using subdomain:', parts[0])
+    return parts[0] // Return subdomain
+  }
+  
+  return null
+}
+
+const subdomain = ref(getSubdomain())
 const email = ref('')
 const password = ref('')
 const loading = ref(false)
@@ -17,12 +43,18 @@ const handleLogin = async () => {
     loading.value = true
     error.value = ''
 
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+
+    // Only send x-tenant-id if we have a subdomain
+    if (subdomain.value) {
+      headers['x-tenant-id'] = subdomain.value
+    }
+
     const response = await fetch(`${config.public.apiBaseUrl}/api/auth/login`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-tenant-id': tenantId.value,
-      },
+      headers,
       body: JSON.stringify({
         email: email.value,
         password: password.value,
@@ -36,15 +68,23 @@ const handleLogin = async () => {
 
     const data = await response.json()
 
-    // Store credentials
-    localStorage.setItem('tenantId', tenantId.value)
+    // Store credentials in localStorage
+    // Store the tenant ID that was used for login
+    const tenantToStore = subdomain.value || data.user?.tenantId || 'tenant1'
+    localStorage.setItem('tenantId', tenantToStore)
     localStorage.setItem('token', data.access_token)
     localStorage.setItem('user', JSON.stringify(data.user))
+    
+    // Also store token in cookie for server-side auth check
+    tokenCookie.value = data.access_token
 
+    toast.success('Login successful!')
+    
     // Redirect to home
     router.push('/')
   } catch (e: any) {
     error.value = e.message || 'Login failed'
+    toast.error(e.message || 'Login failed')
   } finally {
     loading.value = false
   }
@@ -65,10 +105,6 @@ const handleLogin = async () => {
     </div>
 
     <div class="grid gap-6">
-      <div class="grid gap-2">
-        <Label for="tenantId">Tenant ID</Label>
-        <Input id="tenantId" v-model="tenantId" type="text" placeholder="123" required />
-      </div>
       <div class="grid gap-2">
         <Label for="email">Email</Label>
         <Input id="email" v-model="email" type="email" placeholder="m@example.com" required />

frontend/components/fields/FieldRenderer.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Switch } from '@/components/ui/switch'
+import { DatePicker } from '@/components/ui/date-picker'
+import { Badge } from '@/components/ui/badge'
+import { FieldConfig, FieldType, ViewMode } from '@/types/field-types'
+import { Label } from '@/components/ui/label'
+
+interface Props {
+  field: FieldConfig
+  modelValue: any
+  mode: ViewMode
+  readonly?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const isReadOnly = computed(() => props.readonly || props.field.isReadOnly || props.mode === ViewMode.DETAIL)
+const isEditMode = computed(() => props.mode === ViewMode.EDIT)
+const isListMode = computed(() => props.mode === ViewMode.LIST)
+const isDetailMode = computed(() => props.mode === ViewMode.DETAIL)
+
+const formatValue = (val: any): string => {
+  if (val === null || val === undefined) return '-'
+  
+  switch (props.field.type) {
+    case FieldType.DATE:
+      return val instanceof Date ? val.toLocaleDateString() : new Date(val).toLocaleDateString()
+    case FieldType.DATETIME:
+      return val instanceof Date ? val.toLocaleString() : new Date(val).toLocaleString()
+    case FieldType.BOOLEAN:
+      return val ? 'Yes' : 'No'
+    case FieldType.CURRENCY:
+      return `${props.field.prefix || '$'}${Number(val).toFixed(2)}${props.field.suffix || ''}`
+    case FieldType.SELECT:
+      const option = props.field.options?.find(opt => opt.value === val)
+      return option?.label || val
+    case FieldType.MULTI_SELECT:
+      if (!Array.isArray(val)) return '-'
+      return val.map(v => {
+        const opt = props.field.options?.find(o => o.value === v)
+        return opt?.label || v
+      }).join(', ')
+    default:
+      return String(val)
+  }
+}
+</script>
+
+<template>
+  <div class="field-renderer space-y-2">
+    <!-- Label (shown in edit and detail modes) -->
+    <Label v-if="!isListMode" :for="field.id" class="flex items-center gap-2">
+      {{ field.label }}
+      <span v-if="field.isRequired && isEditMode" class="text-destructive">*</span>
+    </Label>
+    
+    <!-- Help Text -->
+    <p v-if="field.helpText && !isListMode" class="text-sm text-muted-foreground">
+      {{ field.helpText }}
+    </p>
+
+    <!-- List View - Simple text display -->
+    <div v-if="isListMode" class="text-sm truncate">
+      <Badge v-if="field.type === FieldType.BOOLEAN" :variant="value ? 'default' : 'secondary'">
+        {{ formatValue(value) }}
+      </Badge>
+      <template v-else>
+        {{ formatValue(value) }}
+      </template>
+    </div>
+
+    <!-- Detail View - Formatted display -->
+    <div v-else-if="isDetailMode" class="space-y-1">
+      <div v-if="field.type === FieldType.BOOLEAN" class="flex items-center gap-2">
+        <Checkbox :checked="value" disabled />
+        <span class="text-sm">{{ formatValue(value) }}</span>
+      </div>
+      <div v-else-if="field.type === FieldType.MULTI_SELECT" class="flex flex-wrap gap-2">
+        <Badge v-for="(item, idx) in value" :key="idx" variant="secondary">
+          {{ props.field.options?.find(opt => opt.value === item)?.label || item }}
+        </Badge>
+      </div>
+      <div v-else-if="field.type === FieldType.URL && value" class="text-sm">
+        <a :href="value" target="_blank" class="text-primary hover:underline">
+          {{ value }}
+        </a>
+      </div>
+      <div v-else-if="field.type === FieldType.EMAIL && value" class="text-sm">
+        <a :href="`mailto:${value}`" class="text-primary hover:underline">
+          {{ value }}
+        </a>
+      </div>
+      <div v-else-if="field.type === FieldType.MARKDOWN && value" class="prose prose-sm">
+        <div v-html="value" />
+      </div>
+      <div v-else class="text-sm font-medium">
+        {{ formatValue(value) }}
+      </div>
+    </div>
+
+    <!-- Edit View - Input components -->
+    <div v-else-if="isEditMode && !isReadOnly">
+      <!-- Text Input -->
+      <Input
+        v-if="[FieldType.TEXT, FieldType.EMAIL, FieldType.URL, FieldType.PASSWORD].includes(field.type)"
+        :id="field.id"
+        v-model="value"
+        :type="field.type === FieldType.PASSWORD ? 'password' : field.type === FieldType.EMAIL ? 'email' : field.type === FieldType.URL ? 'url' : 'text'"
+        :placeholder="field.placeholder"
+        :required="field.isRequired"
+        :disabled="field.isReadOnly"
+      />
+
+      <!-- Textarea -->
+      <Textarea
+        v-else-if="field.type === FieldType.TEXTAREA || field.type === FieldType.MARKDOWN"
+        :id="field.id"
+        v-model="value"
+        :placeholder="field.placeholder"
+        :rows="field.rows || 4"
+        :required="field.isRequired"
+        :disabled="field.isReadOnly"
+      />
+
+      <!-- Number Input -->
+      <Input
+        v-else-if="[FieldType.NUMBER, FieldType.CURRENCY].includes(field.type)"
+        :id="field.id"
+        v-model.number="value"
+        type="number"
+        :placeholder="field.placeholder"
+        :min="field.min"
+        :max="field.max"
+        :step="field.step || (field.type === FieldType.CURRENCY ? 0.01 : 1)"
+        :required="field.isRequired"
+        :disabled="field.isReadOnly"
+      />
+
+      <!-- Select -->
+      <Select v-else-if="field.type === FieldType.SELECT" v-model="value">
+        <SelectTrigger :id="field.id">
+          <SelectValue :placeholder="field.placeholder || 'Select an option'" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem v-for="option in field.options" :key="String(option.value)" :value="String(option.value)">
+            {{ option.label }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+
+      <!-- Boolean - Checkbox -->
+      <div v-else-if="field.type === FieldType.BOOLEAN" class="flex items-center gap-2">
+        <Checkbox :id="field.id" v-model:checked="value" :disabled="field.isReadOnly" />
+        <Label :for="field.id" class="text-sm font-normal cursor-pointer">
+          {{ field.placeholder || field.label }}
+        </Label>
+      </div>
+
+      <!-- Date Picker -->
+      <DatePicker
+        v-else-if="[FieldType.DATE, FieldType.DATETIME].includes(field.type)"
+        v-model="value"
+        :placeholder="field.placeholder"
+        :disabled="field.isReadOnly"
+      />
+
+      <!-- Fallback -->
+      <Input
+        v-else
+        :id="field.id"
+        v-model="value"
+        :placeholder="field.placeholder"
+        :required="field.isRequired"
+        :disabled="field.isReadOnly"
+      />
+    </div>
+
+    <!-- Read-only Edit View -->
+    <div v-else-if="isEditMode && isReadOnly" class="text-sm text-muted-foreground">
+      {{ formatValue(value) }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.field-renderer {
+  width: 100%;
+}
+</style>

frontend/components/ui/badge/Badge.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<{
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>

frontend/components/ui/badge/index.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex gap-1 items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

frontend/components/ui/button/Button.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import type { ButtonVariants } from '.'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '.'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: "button",
 })
 </script>
 

frontend/components/ui/button/index.ts

@@ -1,36 +1,38 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
+import type { VariantProps } 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 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',
+  "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',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          "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",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        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-sm': 'size-8',
-        'icon-lg': 'size-10',
+        "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-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
-  }
+  },
 )
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>

frontend/components/ui/calendar/Calendar.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

frontend/components/ui/calendar/CalendarCell.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>

frontend/components/ui/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-8 w-8 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>

frontend/components/ui/calendar/CalendarGrid.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>

frontend/components/ui/calendar/CalendarGridBody.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui"
+import { CalendarGridBody } from "reka-ui"
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>

frontend/components/ui/calendar/CalendarGridHead.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { CalendarGridHead } from "reka-ui"
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>

frontend/components/ui/calendar/CalendarGridRow.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>

frontend/components/ui/calendar/CalendarHeadCell.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>

frontend/components/ui/calendar/CalendarHeader.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>

frontend/components/ui/calendar/CalendarHeading.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>

frontend/components/ui/calendar/CalendarNextButton.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { CalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>

frontend/components/ui/calendar/CalendarPrevButton.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { CalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>

frontend/components/ui/calendar/index.ts

@@ -0,0 +1,12 @@
+export { default as Calendar } from "./Calendar.vue"
+export { default as CalendarCell } from "./CalendarCell.vue"
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
+export { default as CalendarGrid } from "./CalendarGrid.vue"
+export { default as CalendarGridBody } from "./CalendarGridBody.vue"
+export { default as CalendarGridHead } from "./CalendarGridHead.vue"
+export { default as CalendarGridRow } from "./CalendarGridRow.vue"
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
+export { default as CalendarHeader } from "./CalendarHeader.vue"
+export { default as CalendarHeading } from "./CalendarHeading.vue"
+export { default as CalendarNextButton } from "./CalendarNextButton.vue"
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"

frontend/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="grid place-content-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

frontend/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue"

frontend/components/ui/command/Command.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
+import { reactive, ref, watch } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandContext } from "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>

frontend/components/ui/command/CommandDialog.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { useForwardPropsEmits } from "reka-ui"
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import Command from "./Command.vue"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

frontend/components/ui/command/CommandEmpty.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </Primitive>
+</template>

frontend/components/ui/command/CommandGroup.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandGroupContext, useCommand } from "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>

frontend/components/ui/command/CommandInput.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Search } from "lucide-vue-next"
+import { ListboxFilter, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>

frontend/components/ui/command/CommandItem.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useCurrentElement } from "@vueuse/core"
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand, useCommandGroup } from "."
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props?.value!.toString())
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>

frontend/components/ui/command/CommandList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxContent, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>

frontend/components/ui/command/CommandSeparator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>

frontend/components/ui/command/CommandShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

frontend/components/ui/command/index.ts

@@ -0,0 +1,25 @@
+import type { Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>("Command")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")

frontend/components/ui/date-picker/DatePicker.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Calendar } from '@/components/ui/calendar'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { CalendarIcon } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import { CalendarDate, type DateValue } from '@internationalized/date'
+
+interface Props {
+  modelValue?: Date | string | null
+  placeholder?: string
+  disabled?: boolean
+  format?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Pick a date',
+  format: 'PPP',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | null]
+}>()
+
+const placeholder = ref<DateValue>(new CalendarDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()))
+
+const value = computed<DateValue | undefined>({
+  get: () => {
+    if (!props.modelValue) return undefined
+    const date = props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
+  },
+  set: (dateValue) => {
+    if (!dateValue) {
+      emit('update:modelValue', null)
+      return
+    }
+    const jsDate = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
+    emit('update:modelValue', jsDate)
+  },
+})
+
+const formatDate = (dateValue: DateValue | undefined) => {
+  if (!dateValue) return props.placeholder
+  const date = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn(
+          'w-full justify-start text-left font-normal',
+          !value && 'text-muted-foreground'
+        )"
+        :disabled="disabled"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        {{ formatDate(value) }}
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="value" :placeholder="placeholder" />
+    </PopoverContent>
+  </Popover>
+</template>

frontend/components/ui/date-picker/index.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.vue'

frontend/components/ui/dialog/Dialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

frontend/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

frontend/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <X class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

frontend/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

frontend/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

frontend/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

frontend/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

frontend/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>

frontend/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

frontend/components/ui/dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"

frontend/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRoot,
+  type DropdownMenuRootEmits,
+  type DropdownMenuRootProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

frontend/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { DropdownMenuPortal, DropdownMenuContent, type DropdownMenuContentProps, type DropdownMenuContentEmits, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class
+      )"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

frontend/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

frontend/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

frontend/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,4 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'

frontend/components/ui/input-group/InputGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('relative flex w-full flex-col gap-2', props.class)">
+    <slot />
+  </div>
+</template>

frontend/components/ui/input-group/InputGroupAddon.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  align?: 'start' | 'end' | 'center' | 'block-end'
+  class?: HTMLAttributes['class']
+}>()
+
+const alignClasses = {
+  start: 'justify-start',
+  end: 'justify-end',
+  center: 'justify-center',
+  'block-end': 'justify-end items-end',
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-wrap items-center gap-2', alignClasses[props.align || 'start'], props.class)">
+    <slot />
+  </div>
+</template>

frontend/components/ui/input-group/InputGroupButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '../button'
+import { Button } from '../button'
+import type { HTMLAttributes } from 'vue'
+
+interface Props {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Button
+    :variant="props.variant"
+    :size="props.size"
+    :class="props.class"
+    :disabled="props.disabled"
+  >
+    <slot />
+  </Button>
+</template>

frontend/components/ui/input-group/InputGroupText.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

frontend/components/ui/input-group/InputGroupTextarea.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  placeholder?: string
+  class?: HTMLAttributes['class']
+}>()
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <textarea
+    v-model="model"
+    :placeholder="props.placeholder"
+    :class="cn(
+      'flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none',
+      props.class
+    )"
+  />
+</template>

frontend/components/ui/input-group/index.ts

@@ -0,0 +1,5 @@
+export { default as InputGroup } from './InputGroup.vue'
+export { default as InputGroupTextarea } from './InputGroupTextarea.vue'
+export { default as InputGroupAddon } from './InputGroupAddon.vue'
+export { default as InputGroupButton } from './InputGroupButton.vue'
+export { default as InputGroupText } from './InputGroupText.vue'

frontend/components/ui/popover/Popover.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

frontend/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverContent
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </PopoverContent>
+</template>

frontend/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>

frontend/components/ui/popover/index.ts

@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
+export { PopoverAnchor } from "reka-ui"

frontend/components/ui/switch/Switch.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SwitchRoot,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

frontend/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue"

frontend/components/ui/table/Table.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>

frontend/components/ui/table/TableBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>

frontend/components/ui/table/TableCaption.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>

frontend/components/ui/table/TableCell.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>

frontend/components/ui/table/TableEmpty.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

frontend/components/ui/table/TableFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>

frontend/components/ui/table/TableHead.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
+    <slot />
+  </th>
+</template>

frontend/components/ui/table/TableHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>

frontend/components/ui/table/TableRow.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>

frontend/components/ui/table/index.ts

@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"

frontend/components/ui/tabs/Tabs.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { TabsRoot, type TabsRootProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <TabsRoot v-bind="delegatedProps" :class="cn('', props.class)">
+    <slot />
+  </TabsRoot>
+</template>

frontend/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsContent>
+</template>

frontend/components/ui/tabs/TabsList.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

frontend/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>

frontend/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

frontend/components/ui/textarea/Textarea.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm 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)" />
+</template>

frontend/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"

frontend/components/views/DetailView.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import FieldRenderer from '@/components/fields/FieldRenderer.vue'
+import { DetailViewConfig, ViewMode, FieldSection } from '@/types/field-types'
+import { Edit, Trash2, ArrowLeft } from 'lucide-vue-next'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+
+interface Props {
+  config: DetailViewConfig
+  data: any
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'edit': []
+  'delete': []
+  'back': []
+  'action': [actionId: string]
+}>()
+
+// Organize fields into sections
+const sections = computed<FieldSection[]>(() => {
+  if (props.config.sections && props.config.sections.length > 0) {
+    return props.config.sections
+  }
+  
+  // Default section with all visible fields
+  return [{
+    title: 'Details',
+    fields: props.config.fields
+      .filter(f => f.showOnDetail !== false)
+      .map(f => f.apiName),
+  }]
+})
+
+const getFieldsBySection = (section: FieldSection) => {
+  return section.fields
+    .map(apiName => props.config.fields.find(f => f.apiName === apiName))
+    .filter(Boolean)
+}
+</script>
+
+<template>
+  <div class="detail-view space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <Button variant="ghost" size="sm" @click="emit('back')">
+          <ArrowLeft class="h-4 w-4 mr-2" />
+          Back
+        </Button>
+        <div>
+          <h2 class="text-2xl font-bold tracking-tight">
+            {{ data?.name || data?.title || config.objectApiName }}
+          </h2>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <!-- Custom Actions -->
+        <Button
+          v-for="action in config.actions"
+          :key="action.id"
+          :variant="action.variant || 'outline'"
+          size="sm"
+          @click="emit('action', action.id)"
+        >
+          {{ action.label }}
+        </Button>
+
+        <!-- Default Actions -->
+        <Button variant="outline" size="sm" @click="emit('edit')">
+          <Edit class="h-4 w-4 mr-2" />
+          Edit
+        </Button>
+        <Button variant="destructive" size="sm" @click="emit('delete')">
+          <Trash2 class="h-4 w-4 mr-2" />
+          Delete
+        </Button>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+    </div>
+
+    <!-- Content Sections -->
+    <div v-else class="space-y-6">
+      <Card v-for="(section, idx) in sections" :key="idx">
+        <Collapsible
+          v-if="section.collapsible"
+          :default-open="!section.defaultCollapsed"
+        >
+          <CardHeader>
+            <CollapsibleTrigger class="flex items-center justify-between w-full hover:bg-muted/50 -m-2 p-2 rounded">
+              <div>
+                <CardTitle v-if="section.title">{{ section.title }}</CardTitle>
+                <CardDescription v-if="section.description">
+                  {{ section.description }}
+                </CardDescription>
+              </div>
+            </CollapsibleTrigger>
+          </CardHeader>
+          <CollapsibleContent>
+            <CardContent>
+              <div class="grid gap-6 md:grid-cols-2">
+                <FieldRenderer
+                  v-for="field in getFieldsBySection(section)"
+                  :key="field.id"
+                  :field="field"
+                  :model-value="data[field.apiName]"
+                  :mode="ViewMode.DETAIL"
+                />
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <template v-else>
+          <CardHeader v-if="section.title || section.description">
+            <CardTitle v-if="section.title">{{ section.title }}</CardTitle>
+            <CardDescription v-if="section.description">
+              {{ section.description }}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div class="grid gap-6 md:grid-cols-2">
+              <FieldRenderer
+                v-for="field in getFieldsBySection(section)"
+                :key="field?.id"
+                :field="field"
+                :model-value="data[field.apiName]"
+                :mode="ViewMode.DETAIL"
+              />
+            </div>
+          </CardContent>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.detail-view {
+  width: 100%;
+}
+</style>

frontend/components/views/EditView.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import FieldRenderer from '@/components/fields/FieldRenderer.vue'
+import { EditViewConfig, ViewMode, FieldSection, FieldValidationRule } from '@/types/field-types'
+import { Save, X, ArrowLeft } from 'lucide-vue-next'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+
+interface Props {
+  config: EditViewConfig
+  data?: any
+  loading?: boolean
+  saving?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({}),
+  loading: false,
+  saving: false,
+})
+
+const emit = defineEmits<{
+  'save': [data: any]
+  'cancel': []
+  'back': []
+}>()
+
+// Form data
+const formData = ref<Record<string, any>>({ ...props.data })
+const errors = ref<Record<string, string>>({})
+
+// Watch for data changes (useful for edit mode)
+watch(() => props.data, (newData) => {
+  formData.value = { ...newData }
+}, { deep: true })
+
+// Organize fields into sections
+const sections = computed<FieldSection[]>(() => {
+  if (props.config.sections && props.config.sections.length > 0) {
+    return props.config.sections
+  }
+  
+  // Default section with all visible fields
+  return [{
+    title: 'Details',
+    fields: props.config.fields
+      .filter(f => f.showOnEdit !== false)
+      .map(f => f.apiName),
+  }]
+})
+
+const getFieldsBySection = (section: FieldSection) => {
+  return section.fields
+    .map(apiName => props.config.fields.find(f => f.apiName === apiName))
+    .filter(Boolean)
+}
+
+const validateField = (field: any): string | null => {
+  const value = formData.value[field.apiName]
+  
+  // Required validation
+  if (field.isRequired && (value === null || value === undefined || value === '')) {
+    return `${field.label} is required`
+  }
+  
+  // Custom validation rules
+  if (field.validationRules) {
+    for (const rule of field.validationRules) {
+      switch (rule.type) {
+        case 'required':
+          if (value === null || value === undefined || value === '') {
+            return rule.message || `${field.label} is required`
+          }
+          break
+        case 'min':
+          if (typeof value === 'number' && value < rule.value) {
+            return rule.message || `${field.label} must be at least ${rule.value}`
+          }
+          if (typeof value === 'string' && value.length < rule.value) {
+            return rule.message || `${field.label} must be at least ${rule.value} characters`
+          }
+          break
+        case 'max':
+          if (typeof value === 'number' && value > rule.value) {
+            return rule.message || `${field.label} must be at most ${rule.value}`
+          }
+          if (typeof value === 'string' && value.length > rule.value) {
+            return rule.message || `${field.label} must be at most ${rule.value} characters`
+          }
+          break
+        case 'email':
+          if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            return rule.message || `${field.label} must be a valid email`
+          }
+          break
+        case 'url':
+          if (value && !/^https?:\/\/.+/.test(value)) {
+            return rule.message || `${field.label} must be a valid URL`
+          }
+          break
+        case 'pattern':
+          if (value && !new RegExp(rule.value).test(value)) {
+            return rule.message || `${field.label} has invalid format`
+          }
+          break
+      }
+    }
+  }
+  
+  return null
+}
+
+const validateForm = (): boolean => {
+  errors.value = {}
+  let isValid = true
+  
+  for (const field of props.config.fields) {
+    const error = validateField(field)
+    if (error) {
+      errors.value[field.apiName] = error
+      isValid = false
+    }
+  }
+  
+  return isValid
+}
+
+const handleSave = () => {
+  if (validateForm()) {
+    emit('save', { ...formData.value })
+  }
+}
+
+const handleCancel = () => {
+  formData.value = { ...props.data }
+  errors.value = {}
+  emit('cancel')
+}
+
+const updateFieldValue = (apiName: string, value: any) => {
+  formData.value[apiName] = value
+  // Clear error for this field when user starts editing
+  if (errors.value[apiName]) {
+    delete errors.value[apiName]
+  }
+}
+</script>
+
+<template>
+  <div class="edit-view space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <Button variant="ghost" size="sm" @click="emit('back')">
+          <ArrowLeft class="h-4 w-4 mr-2" />
+          Back
+        </Button>
+        <div>
+          <h2 class="text-2xl font-bold tracking-tight">
+            {{ data?.id ? 'Edit' : 'Create' }} {{ config.objectApiName }}
+          </h2>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <Button variant="outline" @click="handleCancel" :disabled="saving">
+          <X class="h-4 w-4 mr-2" />
+          {{ config.cancelLabel || 'Cancel' }}
+        </Button>
+        <Button @click="handleSave" :disabled="saving">
+          <Save class="h-4 w-4 mr-2" />
+          {{ config.submitLabel || 'Save' }}
+        </Button>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+    </div>
+
+    <!-- Form Sections -->
+    <form v-else @submit.prevent="handleSave" class="space-y-6">
+      <Card v-for="(section, idx) in sections" :key="idx">
+        <Collapsible
+          v-if="section.collapsible"
+          :default-open="!section.defaultCollapsed"
+        >
+          <CardHeader>
+            <CollapsibleTrigger class="flex items-center justify-between w-full hover:bg-muted/50 -m-2 p-2 rounded">
+              <div>
+                <CardTitle v-if="section.title">{{ section.title }}</CardTitle>
+                <CardDescription v-if="section.description">
+                  {{ section.description }}
+                </CardDescription>
+              </div>
+            </CollapsibleTrigger>
+          </CardHeader>
+          <CollapsibleContent>
+            <CardContent>
+              <div class="grid gap-6 md:grid-cols-2">
+                <div
+                  v-for="field in getFieldsBySection(section)"
+                  :key="field.id"
+                  class="space-y-1"
+                >
+                  <FieldRenderer
+                    :field="field"
+                    :model-value="formData[field.apiName]"
+                    :mode="ViewMode.EDIT"
+                    @update:model-value="updateFieldValue(field.apiName, $event)"
+                  />
+                  <p v-if="errors[field.apiName]" class="text-sm text-destructive">
+                    {{ errors[field.apiName] }}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <template v-else>
+          <CardHeader v-if="section.title || section.description">
+            <CardTitle v-if="section.title">{{ section.title }}</CardTitle>
+            <CardDescription v-if="section.description">
+              {{ section.description }}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div class="grid gap-6 md:grid-cols-2">
+              <div
+                v-for="field in getFieldsBySection(section)"
+                :key="field.id"
+                class="space-y-1"
+              >
+                <FieldRenderer
+                  :field="field"
+                  :model-value="formData[field.apiName]"
+                  :mode="ViewMode.EDIT"
+                  @update:model-value="updateFieldValue(field.apiName, $event)"
+                />
+                <p v-if="errors[field.apiName]" class="text-sm text-destructive">
+                  {{ errors[field.apiName] }}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </template>
+      </Card>
+
+      <!-- Hidden submit button for form submission -->
+      <button type="submit" class="hidden" />
+    </form>
+
+    <!-- Save indicator -->
+    <div v-if="saving" class="fixed bottom-4 right-4 bg-primary text-primary-foreground px-4 py-2 rounded-lg shadow-lg flex items-center gap-2">
+      <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-foreground"></div>
+      <span>Saving...</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.edit-view {
+  width: 100%;
+}
+</style>

frontend/components/views/ListView.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import FieldRenderer from '@/components/fields/FieldRenderer.vue'
+import { ListViewConfig, ViewMode, FieldType } from '@/types/field-types'
+import { ChevronDown, ChevronUp, Search, Plus, Download, Trash2, Edit } from 'lucide-vue-next'
+
+interface Props {
+  config: ListViewConfig
+  data?: any[]
+  loading?: boolean
+  selectable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => [],
+  loading: false,
+  selectable: false,
+})
+
+const emit = defineEmits<{
+  'row-click': [row: any]
+  'row-select': [rows: any[]]
+  'create': []
+  'edit': [row: any]
+  'delete': [rows: any[]]
+  'action': [actionId: string, rows: any[]]
+  'sort': [field: string, direction: 'asc' | 'desc']
+  'search': [query: string]
+  'refresh': []
+}>()
+
+// State
+const selectedRows = ref<Set<string>>(new Set())
+const searchQuery = ref('')
+const sortField = ref<string>('')
+const sortDirection = ref<'asc' | 'desc'>('asc')
+
+// Computed
+const visibleFields = computed(() => 
+  props.config.fields.filter(f => f.showOnList !== false)
+)
+
+const allSelected = computed({
+  get: () => props.data.length > 0 && selectedRows.value.size === props.data.length,
+  set: (val: boolean) => {
+    if (val) {
+      selectedRows.value = new Set(props.data.map(row => row.id))
+    } else {
+      selectedRows.value.clear()
+    }
+    emit('row-select', getSelectedRows())
+  },
+})
+
+const getSelectedRows = () => {
+  return props.data.filter(row => selectedRows.value.has(row.id))
+}
+
+const toggleRowSelection = (rowId: string) => {
+  if (selectedRows.value.has(rowId)) {
+    selectedRows.value.delete(rowId)
+  } else {
+    selectedRows.value.add(rowId)
+  }
+  emit('row-select', getSelectedRows())
+}
+
+const handleSort = (field: string) => {
+  if (sortField.value === field) {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortField.value = field
+    sortDirection.value = 'asc'
+  }
+  emit('sort', field, sortDirection.value)
+}
+
+const handleSearch = () => {
+  emit('search', searchQuery.value)
+}
+
+const handleAction = (actionId: string) => {
+  emit('action', actionId, getSelectedRows())
+}
+</script>
+
+<template>
+  <div class="list-view space-y-4">
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between gap-4">
+      <!-- Search -->
+      <div v-if="config.searchable !== false" class="flex-1 max-w-sm">
+        <div class="relative">
+          <Search class="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            v-model="searchQuery"
+            placeholder="Search..."
+            class="pl-8"
+            @keyup.enter="handleSearch"
+          />
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <!-- Bulk Actions -->
+        <template v-if="selectedRows.size > 0">
+          <Badge variant="secondary" class="px-3 py-1">
+            {{ selectedRows.size }} selected
+          </Badge>
+          <Button variant="outline" size="sm" @click="emit('delete', getSelectedRows())">
+            <Trash2 class="h-4 w-4 mr-2" />
+            Delete
+          </Button>
+        </template>
+
+        <!-- Custom Actions -->
+        <Button
+          v-for="action in config.actions"
+          :key="action.id"
+          :variant="action.variant || 'outline'"
+          size="sm"
+          @click="handleAction(action.id)"
+        >
+          {{ action.label }}
+        </Button>
+
+        <!-- Export -->
+        <Button v-if="config.exportable" variant="outline" size="sm">
+          <Download class="h-4 w-4 mr-2" />
+          Export
+        </Button>
+
+        <!-- Create -->
+        <Button size="sm" @click="emit('create')">
+          <Plus class="h-4 w-4 mr-2" />
+          New
+        </Button>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div class="border rounded-lg">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead v-if="selectable" class="w-12">
+              <Checkbox v-model:checked="allSelected" />
+            </TableHead>
+            <TableHead
+              v-for="field in visibleFields"
+              :key="field.id"
+              :class="{ 'cursor-pointer hover:bg-muted/50': field.sortable !== false }"
+              @click="field.sortable !== false && handleSort(field.apiName)"
+            >
+              <div class="flex items-center gap-2">
+                {{ field.label }}
+                <template v-if="field.sortable !== false && sortField === field.apiName">
+                  <ChevronUp v-if="sortDirection === 'asc'" class="h-4 w-4" />
+                  <ChevronDown v-else class="h-4 w-4" />
+                </template>
+              </div>
+            </TableHead>
+            <TableHead class="w-20">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-if="loading">
+            <TableCell :colspan="visibleFields.length + (selectable ? 2 : 1)" class="text-center py-8">
+              <div class="flex items-center justify-center">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              </div>
+            </TableCell>
+          </TableRow>
+          <TableRow v-else-if="data.length === 0">
+            <TableCell :colspan="visibleFields.length + (selectable ? 2 : 1)" class="text-center py-8 text-muted-foreground">
+              No records found
+            </TableCell>
+          </TableRow>
+          <TableRow
+            v-else
+            v-for="row in data"
+            :key="row.id"
+            class="cursor-pointer hover:bg-muted/50"
+            @click="emit('row-click', row)"
+          >
+            <TableCell v-if="selectable" @click.stop>
+              <Checkbox
+                :checked="selectedRows.has(row.id)"
+                @update:checked="toggleRowSelection(row.id)"
+              />
+            </TableCell>
+            <TableCell v-for="field in visibleFields" :key="field.id">
+              <FieldRenderer
+                :field="field"
+                :model-value="row[field.apiName]"
+                :mode="ViewMode.LIST"
+              />
+            </TableCell>
+            <TableCell @click.stop>
+              <div class="flex items-center gap-1">
+                <Button variant="ghost" size="sm" @click="emit('edit', row)">
+                  <Edit class="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="sm" @click="emit('delete', [row])">
+                  <Trash2 class="h-4 w-4" />
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <!-- Pagination would go here -->
+  </div>
+</template>
+
+<style scoped>
+.list-view {
+  width: 100%;
+}
+</style>

frontend/composables/useApi.ts

@@ -1,6 +1,20 @@
 export const useApi = () => {
   const config = useRuntimeConfig()
-  const apiBaseUrl = config.public.apiBaseUrl
+  const router = useRouter()
+  const { toast } = useToast()
+  const { isLoggedIn, logout } = useAuth()
+
+  // Use current domain for API calls (same subdomain routing)
+  const getApiBaseUrl = () => {
+    if (import.meta.client) {
+      // In browser, use current hostname but with port 3000 for API
+      const currentHost = window.location.hostname
+      const protocol = window.location.protocol
+      return `${protocol}//${currentHost}:3000`
+    }
+    // Fallback for SSR
+    return config.public.apiBaseUrl
+  }
 
   const getHeaders = () => {
     const headers: Record<string, string> = {
@@ -23,42 +37,70 @@ export const useApi = () => {
     return headers
   }
 
+  const handleResponse = async (response: Response) => {
+    if (response.status === 401) {
+      // Unauthorized - not authenticated
+      if (import.meta.client) {
+        logout()
+        toast.error('Your session has expired. Please login again.')
+        router.push('/login')
+      }
+      throw new Error('Unauthorized')
+    }
+
+    if (response.status === 403) {
+      // Forbidden - not authorized
+      if (import.meta.client) {
+        toast.error('You do not have permission to perform this action.')
+        // Redirect to home if logged in, otherwise to login
+        if (isLoggedIn()) {
+          router.push('/')
+        } else {
+          router.push('/login')
+        }
+      }
+      throw new Error('Forbidden')
+    }
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    return response.json()
+  }
+
   const api = {
     async get(path: string) {
-      const response = await fetch(`${apiBaseUrl}/api${path}`, {
+      const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
         headers: getHeaders(),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
 
     async post(path: string, data: any) {
-      const response = await fetch(`${apiBaseUrl}/api${path}`, {
+      const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
         method: 'POST',
         headers: getHeaders(),
         body: JSON.stringify(data),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
 
     async put(path: string, data: any) {
-      const response = await fetch(`${apiBaseUrl}/api${path}`, {
+      const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
         method: 'PUT',
         headers: getHeaders(),
         body: JSON.stringify(data),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
 
     async delete(path: string) {
-      const response = await fetch(`${apiBaseUrl}/api${path}`, {
+      const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
         method: 'DELETE',
         headers: getHeaders(),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
   }
 

frontend/composables/useAuth.ts

@@ -0,0 +1,61 @@
+export const useAuth = () => {
+  const tokenCookie = useCookie('token')
+  const authMessageCookie = useCookie('authMessage')
+  const router = useRouter()
+  const config = useRuntimeConfig()
+  
+  const isLoggedIn = () => {
+    if (!import.meta.client) return false
+    const token = localStorage.getItem('token')
+    const tenantId = localStorage.getItem('tenantId')
+    return !!(token && tenantId)
+  }
+
+  const logout = async () => {
+    if (import.meta.client) {
+      // Call backend logout endpoint
+      try {
+        const token = localStorage.getItem('token')
+        const tenantId = localStorage.getItem('tenantId')
+        
+        if (token) {
+          await fetch(`${config.public.apiBaseUrl}/api/auth/logout`, {
+            method: 'POST',
+            headers: {
+              'Authorization': `Bearer ${token}`,
+              ...(tenantId && { 'x-tenant-id': tenantId }),
+            },
+          })
+        }
+      } catch (error) {
+        console.error('Logout error:', error)
+      }
+      
+      // Clear local storage
+      localStorage.removeItem('token')
+      localStorage.removeItem('tenantId')
+      localStorage.removeItem('user')
+      
+      // Clear cookie for server-side check
+      tokenCookie.value = null
+      
+      // Set flash message for login page
+      authMessageCookie.value = 'Logged out successfully'
+      
+      // Redirect to login page
+      router.push('/login')
+    }
+  }
+
+  const getUser = () => {
+    if (!import.meta.client) return null
+    const userStr = localStorage.getItem('user')
+    return userStr ? JSON.parse(userStr) : null
+  }
+
+  return {
+    isLoggedIn,
+    logout,
+    getUser,
+  }
+}

frontend/composables/useFieldViews.ts

@@ -0,0 +1,326 @@
+import { computed, ref } from 'vue'
+import type { FieldConfig, ListViewConfig, DetailViewConfig, EditViewConfig, ViewMode } from '@/types/field-types'
+
+/**
+ * Composable for working with dynamic fields and views
+ * Helps convert backend field definitions to frontend field configs
+ */
+export const useFields = () => {
+  /**
+   * Convert backend field definition to frontend FieldConfig
+   */
+  const mapFieldDefinitionToConfig = (fieldDef: any): FieldConfig => {
+    return {
+      id: fieldDef.id,
+      apiName: fieldDef.apiName,
+      label: fieldDef.label,
+      type: fieldDef.type,
+      
+      // Default values
+      placeholder: fieldDef.uiMetadata?.placeholder || fieldDef.description,
+      helpText: fieldDef.uiMetadata?.helpText || fieldDef.description,
+      defaultValue: fieldDef.defaultValue,
+      
+      // Validation
+      isRequired: fieldDef.isRequired,
+      isReadOnly: fieldDef.isSystem || fieldDef.uiMetadata?.isReadOnly,
+      validationRules: fieldDef.uiMetadata?.validationRules || [],
+      
+      // View options
+      showOnList: fieldDef.uiMetadata?.showOnList ?? true,
+      showOnDetail: fieldDef.uiMetadata?.showOnDetail ?? true,
+      showOnEdit: fieldDef.uiMetadata?.showOnEdit ?? !fieldDef.isSystem,
+      sortable: fieldDef.uiMetadata?.sortable ?? true,
+      
+      // Field type specific
+      options: fieldDef.uiMetadata?.options,
+      rows: fieldDef.uiMetadata?.rows,
+      min: fieldDef.uiMetadata?.min,
+      max: fieldDef.uiMetadata?.max,
+      step: fieldDef.uiMetadata?.step,
+      accept: fieldDef.uiMetadata?.accept,
+      relationObject: fieldDef.referenceObject,
+      relationDisplayField: fieldDef.uiMetadata?.relationDisplayField,
+      
+      // Formatting
+      format: fieldDef.uiMetadata?.format,
+      prefix: fieldDef.uiMetadata?.prefix,
+      suffix: fieldDef.uiMetadata?.suffix,
+      
+      // Advanced
+      dependsOn: fieldDef.uiMetadata?.dependsOn,
+      computedValue: fieldDef.uiMetadata?.computedValue,
+    }
+  }
+
+  /**
+   * Build a ListView configuration from object definition
+   */
+  const buildListViewConfig = (
+    objectDef: any,
+    customConfig?: Partial<ListViewConfig>
+  ): ListViewConfig => {
+    const fields = objectDef.fields?.map(mapFieldDefinitionToConfig) || []
+    
+    return {
+      objectApiName: objectDef.apiName,
+      mode: 'list' as ViewMode,
+      fields,
+      pageSize: 25,
+      searchable: true,
+      filterable: true,
+      exportable: true,
+      ...customConfig,
+    }
+  }
+
+  /**
+   * Build a DetailView configuration from object definition
+   */
+  const buildDetailViewConfig = (
+    objectDef: any,
+    customConfig?: Partial<DetailViewConfig>
+  ): DetailViewConfig => {
+    const fields = objectDef.fields?.map(mapFieldDefinitionToConfig) || []
+    
+    return {
+      objectApiName: objectDef.apiName,
+      mode: 'detail' as ViewMode,
+      fields,
+      ...customConfig,
+    }
+  }
+
+  /**
+   * Build an EditView configuration from object definition
+   */
+  const buildEditViewConfig = (
+    objectDef: any,
+    customConfig?: Partial<EditViewConfig>
+  ): EditViewConfig => {
+    const fields = objectDef.fields?.map(mapFieldDefinitionToConfig) || []
+    
+    return {
+      objectApiName: objectDef.apiName,
+      mode: 'edit' as ViewMode,
+      fields,
+      submitLabel: 'Save',
+      cancelLabel: 'Cancel',
+      ...customConfig,
+    }
+  }
+
+  /**
+   * Auto-generate sections based on field types or custom logic
+   */
+  const generateSections = (fields: FieldConfig[]) => {
+    // Group fields by some logic - this is a simple example
+    const basicFields = fields.filter(f => 
+      ['text', 'email', 'password', 'number'].includes(f.type)
+    )
+    const relationFields = fields.filter(f => 
+      ['belongsTo', 'hasMany', 'manyToMany'].includes(f.type)
+    )
+    const otherFields = fields.filter(f => 
+      !basicFields.includes(f) && !relationFields.includes(f)
+    )
+
+    const sections = []
+    
+    if (basicFields.length > 0) {
+      sections.push({
+        title: 'Basic Information',
+        fields: basicFields.map(f => f.apiName),
+      })
+    }
+    
+    if (relationFields.length > 0) {
+      sections.push({
+        title: 'Related Records',
+        fields: relationFields.map(f => f.apiName),
+        collapsible: true,
+      })
+    }
+    
+    if (otherFields.length > 0) {
+      sections.push({
+        title: 'Additional Information',
+        fields: otherFields.map(f => f.apiName),
+        collapsible: true,
+        defaultCollapsed: true,
+      })
+    }
+
+    return sections
+  }
+
+  return {
+    mapFieldDefinitionToConfig,
+    buildListViewConfig,
+    buildDetailViewConfig,
+    buildEditViewConfig,
+    generateSections,
+  }
+}
+
+/**
+ * Composable for managing view state (CRUD operations)
+ */
+export const useViewState = <T extends { id?: string }>(
+  apiEndpoint: string
+) => {
+  const records = ref<T[]>([])
+  const currentRecord = ref<T | null>(null)
+  const currentView = ref<'list' | 'detail' | 'edit'>('list')
+  const loading = ref(false)
+  const saving = ref(false)
+  const error = ref<string | null>(null)
+
+  const api = useApi()
+
+  const fetchRecords = async (params?: Record<string, any>) => {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await api.get(apiEndpoint, { params })
+      records.value = response.data
+    } catch (e: any) {
+      error.value = e.message
+      console.error('Failed to fetch records:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchRecord = async (id: string) => {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await api.get(`${apiEndpoint}/${id}`)
+      currentRecord.value = response.data
+    } catch (e: any) {
+      error.value = e.message
+      console.error('Failed to fetch record:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createRecord = async (data: Partial<T>) => {
+    saving.value = true
+    error.value = null
+    try {
+      const response = await api.post(apiEndpoint, data)
+      records.value.push(response.data)
+      currentRecord.value = response.data
+      return response.data
+    } catch (e: any) {
+      error.value = e.message
+      console.error('Failed to create record:', e)
+      throw e
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const updateRecord = async (id: string, data: Partial<T>) => {
+    saving.value = true
+    error.value = null
+    try {
+      const response = await api.put(`${apiEndpoint}/${id}`, data)
+      const idx = records.value.findIndex(r => r.id === id)
+      if (idx !== -1) {
+        records.value[idx] = response.data
+      }
+      currentRecord.value = response.data
+      return response.data
+    } catch (e: any) {
+      error.value = e.message
+      console.error('Failed to update record:', e)
+      throw e
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const deleteRecord = async (id: string) => {
+    loading.value = true
+    error.value = null
+    try {
+      await api.delete(`${apiEndpoint}/${id}`)
+      records.value = records.value.filter(r => r.id !== id)
+      if (currentRecord.value?.id === id) {
+        currentRecord.value = null
+      }
+    } catch (e: any) {
+      error.value = e.message
+      console.error('Failed to delete record:', e)
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteRecords = async (ids: string[]) => {
+    loading.value = true
+    error.value = null
+    try {
+      await Promise.all(ids.map(id => api.delete(`${apiEndpoint}/${id}`)))
+      records.value = records.value.filter(r => !ids.includes(r.id!))
+    } catch (e: any) {
+      error.value = e.message
+      console.error('Failed to delete records:', e)
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const showList = () => {
+    currentView.value = 'list'
+    currentRecord.value = null
+  }
+
+  const showDetail = (record: T) => {
+    currentRecord.value = record
+    currentView.value = 'detail'
+  }
+
+  const showEdit = (record?: T) => {
+    currentRecord.value = record || ({} as T)
+    currentView.value = 'edit'
+  }
+
+  const handleSave = async (data: T) => {
+    if (data.id) {
+      await updateRecord(data.id, data)
+    } else {
+      await createRecord(data)
+    }
+    showDetail(currentRecord.value!)
+  }
+
+  return {
+    // State
+    records,
+    currentRecord,
+    currentView,
+    loading,
+    saving,
+    error,
+    
+    // Methods
+    fetchRecords,
+    fetchRecord,
+    createRecord,
+    updateRecord,
+    deleteRecord,
+    deleteRecords,
+    
+    // Navigation
+    showList,
+    showDetail,
+    showEdit,
+    handleSave,
+  }
+}

frontend/composables/useToast.ts

@@ -0,0 +1,20 @@
+import { toast as sonnerToast } from 'vue-sonner'
+
+export const useToast = () => {
+  const toast = {
+    success: (message: string) => {
+      sonnerToast.success(message)
+    },
+    error: (message: string) => {
+      sonnerToast.error(message)
+    },
+    info: (message: string) => {
+      sonnerToast.info(message)
+    },
+    warning: (message: string) => {
+      sonnerToast.warning(message)
+    },
+  }
+
+  return { toast }
+}

frontend/layouts/default.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AppSidebar from '@/components/AppSidebar.vue'
+import AIChatBar from '@/components/AIChatBar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -26,9 +27,9 @@ const breadcrumbs = computed(() => {
 <template>
   <SidebarProvider>
     <AppSidebar />
-    <SidebarInset>
+    <SidebarInset class="flex flex-col">
       <header
-        class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b"
+        class="relative z-10 flex h-16 shrink-0 items-center gap-2 bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b shadow-md"
       >
         <div class="flex items-center gap-2 px-4">
           <SidebarTrigger class="-ml-1" />
@@ -58,9 +59,60 @@ const breadcrumbs = computed(() => {
           </Breadcrumb>
         </div>
       </header>
-      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+      
+      <!-- Main scrollable content -->
+      <div class="layout-slot-container flex flex-1 flex-col gap-4 p-4 pt-0 overflow-y-auto">
         <slot />
       </div>
+
+      <!-- AI Chat Bar Component -->
+      <AIChatBar />
     </SidebarInset>
   </SidebarProvider>
 </template>
+
+<style scoped>
+.layout-slot-container {
+  position: relative;
+  background-color: #ffffff;
+  background-image: linear-gradient(to bottom, #DFDBE5 0%, rgba(223, 219, 229, 0) 100%);
+  background-size: 100% 150px;
+  background-repeat: no-repeat;
+}
+
+.layout-slot-container::before,
+.layout-slot-container::after {
+  content: '';
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  height: 150px;
+  pointer-events: none;
+  background-image: linear-gradient(to bottom, rgba(156, 146, 172, 0.55) 0%, rgba(156, 146, 172, 0) 100%);
+  -webkit-mask-image: url("~/assets/images/pattern.svg");
+  -webkit-mask-repeat: repeat;
+  -webkit-mask-size: 600px 600px;
+  mask-image: url("~/assets/images/pattern.svg");
+  mask-repeat: repeat;
+  mask-size: 600px 600px;
+  z-index: 0;
+}
+
+/* Crisp pattern that fades out */
+.layout-slot-container::before {
+  opacity: 1;
+}
+
+/* Slightly shifted, blurred layer to create a “blur into white” effect */
+.layout-slot-container::after {
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+  -webkit-mask-image: none;
+  mask-image: none;
+  opacity: 1;
+}
+
+.layout-slot-container > * {
+  position: relative;
+  z-index: 1;
+}
+</style>

frontend/middleware/auth.global.ts

@@ -0,0 +1,38 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  // Allow pages to opt-out of auth with definePageMeta({ auth: false })
+  if (to.meta.auth === false) {
+    return
+  }
+
+  // Public routes that don't require authentication
+  const publicRoutes = ['/login', '/register']
+  
+  if (publicRoutes.includes(to.path)) {
+    return
+  }
+
+  const token = useCookie('token')
+  const authMessage = useCookie('authMessage')
+  
+  // Routes that don't need a toast message (user knows they need to login)
+  const silentRoutes = ['/']
+  
+  // Check token cookie (works on both server and client)
+  if (!token.value) {
+    if (!silentRoutes.includes(to.path)) {
+      authMessage.value = 'Please login to access this page'
+    }
+    return navigateTo('/login')
+  }
+  
+  // On client side, also verify localStorage is in sync
+  if (import.meta.client) {
+    const { isLoggedIn } = useAuth()
+    if (!isLoggedIn()) {
+      if (!silentRoutes.includes(to.path)) {
+        authMessage.value = 'Please login to access this page'
+      }
+      return navigateTo('/login')
+    }
+  }
+})

frontend/nuxt.config.ts

@@ -41,6 +41,11 @@ export default defineNuxtConfig({
 
   typescript: {
     strict: true,
+    tsConfig: {
+      compilerOptions: {
+        verbatimModuleSyntax: false,
+      },
+    },
   },
 
   features: {
@@ -48,11 +53,14 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    optimizeDeps: {
+      include: ['@internationalized/date'],
+    },
     server: {
       hmr: {
         clientPort: 3001,
       },
-      allowedHosts: ['jupiter.routebox.co', 'localhost', '127.0.0.1'],
+      allowedHosts: ['.routebox.co', 'localhost', '127.0.0.1'],
     },
   },
 

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "hasInstallScript": true,
       "dependencies": {
+        "@internationalized/date": "^3.10.1",
         "@nuxtjs/tailwindcss": "^6.11.4",
         "@vueuse/core": "^10.11.1",
         "class-variance-authority": "^0.7.0",
@@ -16,11 +17,12 @@
         "lucide-vue-next": "^0.309.0",
         "nuxt": "^3.10.0",
         "radix-vue": "^1.4.1",
-        "reka-ui": "^2.6.0",
+        "reka-ui": "^2.6.1",
         "shadcn-nuxt": "^2.3.3",
         "tailwind-merge": "^2.2.1",
         "vue": "^3.4.15",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue-sonner": "^1.3.2"
       },
       "devDependencies": {
         "@nuxtjs/color-mode": "^3.3.2",
@@ -1258,9 +1260,9 @@
       "peer": true
     },
     "node_modules/@internationalized/date": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
-      "integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
+      "integrity": "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/helpers": "^0.5.0"
@@ -12790,9 +12792,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.0.tgz",
-      "integrity": "sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.1.tgz",
+      "integrity": "sha512-XK7cJDQoNuGXfCNzBBo/81Yg/OgjPwvbabnlzXG2VsdSgNsT6iIkuPBPr+C0Shs+3bb0x0lbPvgQAhMSCKm5Ww==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
@@ -16035,6 +16037,12 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/vue-sonner": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-1.3.2.tgz",
+      "integrity": "sha512-UbZ48E9VIya3ToiRHAZUbodKute/z/M1iT8/3fU8zEbwBRE11AKuHikssv18LMk2gTTr6eMQT4qf6JoLHWuj/A==",
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

frontend/package.json

@@ -15,6 +15,7 @@
     "format": "prettier --write \"**/*.{js,ts,vue,json,css,scss,md}\""
   },
   "dependencies": {
+    "@internationalized/date": "^3.10.1",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@vueuse/core": "^10.11.1",
     "class-variance-authority": "^0.7.0",
@@ -22,11 +23,12 @@
     "lucide-vue-next": "^0.309.0",
     "nuxt": "^3.10.0",
     "radix-vue": "^1.4.1",
-    "reka-ui": "^2.6.0",
+    "reka-ui": "^2.6.1",
     "shadcn-nuxt": "^2.3.3",
     "tailwind-merge": "^2.2.1",
     "vue": "^3.4.15",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-sonner": "^1.3.2"
   },
   "devDependencies": {
     "@nuxtjs/color-mode": "^3.3.2",

frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useApi } from '@/composables/useApi'
+import { useFields, useViewState } from '@/composables/useFieldViews'
+import ListView from '@/components/views/ListView.vue'
+import DetailView from '@/components/views/DetailView.vue'
+import EditView from '@/components/views/EditView.vue'
+
+const route = useRoute()
+const router = useRouter()
+const api = useApi()
+const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
+
+// Get object API name from route
+const objectApiName = computed(() => route.params.objectName as string)
+const recordId = computed(() => route.params.recordId as string)
+const view = computed(() => route.params.view as 'list' | 'detail' | 'edit' || 'list')
+
+// State
+const objectDefinition = ref<any>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+// Use view state composable
+const {
+  records,
+  currentRecord,
+  loading: dataLoading,
+  saving,
+  fetchRecords,
+  fetchRecord,
+  deleteRecord,
+  deleteRecords,
+  handleSave,
+} = useViewState(`/api/runtime/objects/${objectApiName.value}`)
+
+// View configs
+const listConfig = computed(() => {
+  if (!objectDefinition.value) return null
+  return buildListViewConfig(objectDefinition.value, {
+    searchable: true,
+    exportable: true,
+    filterable: true,
+  })
+})
+
+const detailConfig = computed(() => {
+  if (!objectDefinition.value) return null
+  return buildDetailViewConfig(objectDefinition.value)
+})
+
+const editConfig = computed(() => {
+  if (!objectDefinition.value) return null
+  return buildEditViewConfig(objectDefinition.value)
+})
+
+// Fetch object definition
+const fetchObjectDefinition = async () => {
+  try {
+    loading.value = true
+    error.value = null
+    const response = await api.get(`/api/runtime/objects/${objectApiName.value}/definition`)
+    objectDefinition.value = response.data
+  } catch (e: any) {
+    error.value = e.message || 'Failed to load object definition'
+    console.error('Error fetching object definition:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Navigation handlers
+const handleRowClick = (row: any) => {
+  router.push(`/app/objects/${objectApiName.value}/${row.id}`)
+}
+
+const handleCreate = () => {
+  router.push(`/app/objects/${objectApiName.value}/new`)
+}
+
+const handleEdit = (row?: any) => {
+  const id = row?.id || recordId.value
+  router.push(`/app/objects/${objectApiName.value}/${id}/edit`)
+}
+
+const handleBack = () => {
+  router.push(`/app/objects/${objectApiName.value}`)
+}
+
+const handleDelete = async (rows: any[]) => {
+  if (confirm(`Delete ${rows.length} record(s)? This action cannot be undone.`)) {
+    try {
+      const ids = rows.map(r => r.id)
+      await deleteRecords(ids)
+      if (view.value !== 'list') {
+        await router.push(`/app/objects/${objectApiName.value}`)
+      }
+    } catch (e: any) {
+      error.value = e.message || 'Failed to delete records'
+    }
+  }
+}
+
+const handleSaveRecord = async (data: any) => {
+  try {
+    await handleSave(data)
+    router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}`)
+  } catch (e: any) {
+    error.value = e.message || 'Failed to save record'
+  }
+}
+
+const handleCancel = () => {
+  if (recordId.value) {
+    router.push(`/app/objects/${objectApiName.value}/${recordId.value}`)
+  } else {
+    router.push(`/app/objects/${objectApiName.value}`)
+  }
+}
+
+// Initialize
+onMounted(async () => {
+  await fetchObjectDefinition()
+  
+  if (view.value === 'list') {
+    await fetchRecords()
+  } else if (recordId.value && recordId.value !== 'new') {
+    await fetchRecord(recordId.value)
+  }
+})
+</script>
+
+<template>
+  <div class="object-view-container">
+    <!-- Loading State -->
+    <div v-if="loading" class="flex items-center justify-center min-h-screen">
+      <div class="text-center space-y-4">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+        <p class="text-muted-foreground">Loading {{ objectApiName }}...</p>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="flex items-center justify-center min-h-screen">
+      <div class="text-center space-y-4 max-w-md">
+        <div class="text-destructive text-5xl">⚠️</div>
+        <h2 class="text-2xl font-bold">Error</h2>
+        <p class="text-muted-foreground">{{ error }}</p>
+        <Button @click="router.back()">Go Back</Button>
+      </div>
+    </div>
+
+    <!-- List View -->
+    <ListView
+      v-else-if="view === 'list' && listConfig"
+      :config="listConfig"
+      :data="records"
+      :loading="dataLoading"
+      selectable
+      @row-click="handleRowClick"
+      @create="handleCreate"
+      @edit="handleEdit"
+      @delete="handleDelete"
+    />
+
+    <!-- Detail View -->
+    <DetailView
+      v-else-if="view === 'detail' && detailConfig && currentRecord"
+      :config="detailConfig"
+      :data="currentRecord"
+      :loading="dataLoading"
+      @edit="handleEdit"
+      @delete="() => handleDelete([currentRecord])"
+      @back="handleBack"
+    />
+
+    <!-- Edit View -->
+    <EditView
+      v-else-if="(view === 'edit' || recordId === 'new') && editConfig"
+      :config="editConfig"
+      :data="currentRecord || {}"
+      :loading="dataLoading"
+      :saving="saving"
+      @save="handleSaveRecord"
+      @cancel="handleCancel"
+      @back="handleBack"
+    />
+  </div>
+</template>
+
+<style scoped>
+.object-view-container {
+  min-height: 100vh;
+  padding: 2rem;
+}
+</style>

frontend/pages/demo/field-views.vue

@@ -0,0 +1,429 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import ListView from '@/components/views/ListView.vue'
+import DetailView from '@/components/views/DetailView.vue'
+import EditView from '@/components/views/EditView.vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { 
+  FieldType, 
+  ViewMode
+} from '@/types/field-types'
+import type { 
+  ListViewConfig, 
+  DetailViewConfig, 
+  EditViewConfig,
+  FieldConfig 
+} from '@/types/field-types'
+
+// Example: Contact Object
+const contactFields: FieldConfig[] = [
+  {
+    id: '1',
+    apiName: 'firstName',
+    label: 'First Name',
+    type: FieldType.TEXT,
+    isRequired: true,
+    placeholder: 'Enter first name',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    sortable: true,
+  },
+  {
+    id: '2',
+    apiName: 'lastName',
+    label: 'Last Name',
+    type: FieldType.TEXT,
+    isRequired: true,
+    placeholder: 'Enter last name',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    sortable: true,
+  },
+  {
+    id: '3',
+    apiName: 'email',
+    label: 'Email',
+    type: FieldType.EMAIL,
+    isRequired: true,
+    placeholder: 'email@example.com',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    validationRules: [
+      { type: 'email', message: 'Please enter a valid email address' }
+    ],
+  },
+  {
+    id: '4',
+    apiName: 'phone',
+    label: 'Phone',
+    type: FieldType.TEXT,
+    placeholder: '+1 (555) 000-0000',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '5',
+    apiName: 'company',
+    label: 'Company',
+    type: FieldType.TEXT,
+    placeholder: 'Company name',
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '6',
+    apiName: 'status',
+    label: 'Status',
+    type: FieldType.SELECT,
+    isRequired: true,
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+    options: [
+      { label: 'Active', value: 'active' },
+      { label: 'Inactive', value: 'inactive' },
+      { label: 'Pending', value: 'pending' },
+    ],
+  },
+  {
+    id: '7',
+    apiName: 'isVip',
+    label: 'VIP Customer',
+    type: FieldType.BOOLEAN,
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '8',
+    apiName: 'birthDate',
+    label: 'Birth Date',
+    type: FieldType.DATE,
+    showOnList: false,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '9',
+    apiName: 'notes',
+    label: 'Notes',
+    type: FieldType.TEXTAREA,
+    placeholder: 'Additional notes...',
+    rows: 4,
+    showOnList: false,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  {
+    id: '10',
+    apiName: 'website',
+    label: 'Website',
+    type: FieldType.URL,
+    placeholder: 'https://example.com',
+    showOnList: false,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+]
+
+// Sample data
+const sampleContacts = ref([
+  {
+    id: '1',
+    firstName: 'John',
+    lastName: 'Doe',
+    email: 'john.doe@example.com',
+    phone: '+1 (555) 123-4567',
+    company: 'Acme Corp',
+    status: 'active',
+    isVip: true,
+    birthDate: new Date('1985-03-15'),
+    notes: 'Preferred customer, always pays on time.',
+    website: 'https://acmecorp.com',
+  },
+  {
+    id: '2',
+    firstName: 'Jane',
+    lastName: 'Smith',
+    email: 'jane.smith@example.com',
+    phone: '+1 (555) 987-6543',
+    company: 'Tech Solutions',
+    status: 'active',
+    isVip: false,
+    birthDate: new Date('1990-07-22'),
+    notes: 'Interested in enterprise plan.',
+    website: 'https://techsolutions.com',
+  },
+  {
+    id: '3',
+    firstName: 'Bob',
+    lastName: 'Johnson',
+    email: 'bob.johnson@example.com',
+    phone: '+1 (555) 456-7890',
+    company: 'StartupXYZ',
+    status: 'pending',
+    isVip: false,
+    birthDate: new Date('1988-11-30'),
+    notes: 'New lead from conference.',
+    website: 'https://startupxyz.com',
+  },
+])
+
+// View configurations
+const listConfig: ListViewConfig = {
+  objectApiName: 'Contact',
+  mode: ViewMode.LIST,
+  fields: contactFields,
+  pageSize: 10,
+  searchable: true,
+  filterable: true,
+  exportable: true,
+  actions: [
+    {
+      id: 'bulk-email',
+      label: 'Send Email',
+      variant: 'outline',
+    },
+  ],
+}
+
+const detailConfig: DetailViewConfig = {
+  objectApiName: 'Contact',
+  mode: ViewMode.DETAIL,
+  fields: contactFields,
+  sections: [
+    {
+      title: 'Contact Information',
+      description: 'Basic contact details',
+      fields: ['firstName', 'lastName', 'email', 'phone'],
+    },
+    {
+      title: 'Company Information',
+      description: 'Company and business details',
+      fields: ['company', 'website', 'status', 'isVip'],
+    },
+    {
+      title: 'Additional Information',
+      fields: ['birthDate', 'notes'],
+      collapsible: true,
+    },
+  ],
+  actions: [
+    {
+      id: 'send-email',
+      label: 'Send Email',
+      variant: 'outline',
+    },
+  ],
+}
+
+const editConfig: EditViewConfig = {
+  objectApiName: 'Contact',
+  mode: ViewMode.EDIT,
+  fields: contactFields,
+  sections: [
+    {
+      title: 'Contact Information',
+      description: 'Basic contact details',
+      fields: ['firstName', 'lastName', 'email', 'phone'],
+    },
+    {
+      title: 'Company Information',
+      fields: ['company', 'website', 'status', 'isVip'],
+    },
+    {
+      title: 'Additional Information',
+      fields: ['birthDate', 'notes'],
+      collapsible: true,
+      defaultCollapsed: true,
+    },
+  ],
+  submitLabel: 'Save Contact',
+  cancelLabel: 'Cancel',
+}
+
+// State management
+const currentView = ref<'list' | 'detail' | 'edit'>('list')
+const selectedContact = ref<any>(null)
+const isLoading = ref(false)
+const isSaving = ref(false)
+
+// Event handlers
+const handleRowClick = (row: any) => {
+  selectedContact.value = row
+  currentView.value = 'detail'
+}
+
+const handleCreate = () => {
+  selectedContact.value = {}
+  currentView.value = 'edit'
+}
+
+const handleEdit = (row?: any) => {
+  selectedContact.value = row || selectedContact.value
+  currentView.value = 'edit'
+}
+
+const handleDelete = (rows: any[]) => {
+  if (confirm(`Delete ${rows.length} contact(s)?`)) {
+    rows.forEach(row => {
+      const idx = sampleContacts.value.findIndex(c => c.id === row.id)
+      if (idx !== -1) {
+        sampleContacts.value.splice(idx, 1)
+      }
+    })
+    if (selectedContact.value && rows.some(r => r.id === selectedContact.value.id)) {
+      currentView.value = 'list'
+      selectedContact.value = null
+    }
+  }
+}
+
+const handleSave = async (data: any) => {
+  isSaving.value = true
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  
+  if (data.id) {
+    // Update existing
+    const idx = sampleContacts.value.findIndex(c => c.id === data.id)
+    if (idx !== -1) {
+      sampleContacts.value[idx] = data
+    }
+  } else {
+    // Create new
+    data.id = String(Date.now())
+    sampleContacts.value.push(data)
+  }
+  
+  isSaving.value = false
+  selectedContact.value = data
+  currentView.value = 'detail'
+}
+
+const handleCancel = () => {
+  if (selectedContact.value?.id) {
+    currentView.value = 'detail'
+  } else {
+    currentView.value = 'list'
+    selectedContact.value = null
+  }
+}
+
+const handleBack = () => {
+  currentView.value = 'list'
+  selectedContact.value = null
+}
+</script>
+
+<template>
+  <div class="container mx-auto py-8">
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold tracking-tight">Field Types & Views Demo</h1>
+      <p class="text-muted-foreground mt-2">
+        Laravel Nova-inspired list, detail, and edit views with shadcn-vue components
+      </p>
+    </div>
+
+    <Tabs default-value="demo" class="space-y-4">
+      <TabsList>
+        <TabsTrigger value="demo">Interactive Demo</TabsTrigger>
+        <TabsTrigger value="examples">View Examples</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="demo" class="space-y-4">
+        <!-- List View -->
+        <ListView
+          v-if="currentView === 'list'"
+          :config="listConfig"
+          :data="sampleContacts"
+          :loading="isLoading"
+          selectable
+          @row-click="handleRowClick"
+          @create="handleCreate"
+          @edit="handleEdit"
+          @delete="handleDelete"
+        />
+
+        <!-- Detail View -->
+        <DetailView
+          v-else-if="currentView === 'detail'"
+          :config="detailConfig"
+          :data="selectedContact"
+          :loading="isLoading"
+          @edit="handleEdit"
+          @delete="() => handleDelete([selectedContact])"
+          @back="handleBack"
+        />
+
+        <!-- Edit View -->
+        <EditView
+          v-else-if="currentView === 'edit'"
+          :config="editConfig"
+          :data="selectedContact"
+          :loading="isLoading"
+          :saving="isSaving"
+          @save="handleSave"
+          @cancel="handleCancel"
+          @back="handleBack"
+        />
+      </TabsContent>
+
+      <TabsContent value="examples" class="space-y-6">
+        <div class="grid gap-6">
+          <div class="border rounded-lg p-6 space-y-4">
+            <h3 class="text-xl font-semibold">Available Field Types</h3>
+            <ul class="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
+              <li v-for="(value, key) in FieldType" :key="key" class="flex items-center gap-2">
+                <span class="w-2 h-2 bg-primary rounded-full"></span>
+                {{ key }}
+              </li>
+            </ul>
+          </div>
+
+          <div class="border rounded-lg p-6 space-y-4">
+            <h3 class="text-xl font-semibold">Usage Example</h3>
+            <pre class="bg-muted p-4 rounded-lg overflow-x-auto text-sm"><code>import { ListView, DetailView, EditView } from '@/components/views'
+import { FieldType, ViewMode } from '@/types/field-types'
+
+// Define your fields
+const fields = [
+  {
+    id: '1',
+    apiName: 'name',
+    label: 'Name',
+    type: FieldType.TEXT,
+    isRequired: true,
+    showOnList: true,
+    showOnDetail: true,
+    showOnEdit: true,
+  },
+  // ... more fields
+]
+
+// Create view configs
+const listConfig = {
+  objectApiName: 'MyObject',
+  mode: ViewMode.LIST,
+  fields,
+  searchable: true,
+}
+
+// Use in template
+&lt;ListView 
+  :config="listConfig" 
+  :data="records"
+  @row-click="handleRowClick"
+/&gt;</code></pre>
+          </div>
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>

frontend/pages/index.vue

@@ -1,3 +1,6 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <NuxtLayout name="default">
     <div class="text-center space-y-6">

frontend/pages/login.vue

@@ -1,6 +1,33 @@
 <script setup lang="ts">
 import { LayoutGrid } from 'lucide-vue-next'
 import LoginForm from '@/components/LoginForm.vue'
+
+// Skip auth middleware for login page
+definePageMeta({
+  auth: false
+})
+
+const { toast } = useToast()
+
+// Check for auth message from cookie
+const authMessage = useCookie('authMessage')
+
+onMounted(() => {
+  if (authMessage.value) {
+    console.log('Displaying auth message: ' + authMessage.value)
+    const message = authMessage.value
+    
+    // Show success toast for logout, error for auth failures
+    if (message.toLowerCase().includes('logged out')) {
+      toast.success(message)
+    } else {
+      toast.error(message)
+    }
+    
+    // Clear the message after displaying
+    authMessage.value = null
+  }
+})
 </script>
 
 <template>

frontend/pages/register.vue

@@ -17,11 +17,6 @@
         </div>
 
         <form @submit.prevent="handleRegister" class="space-y-4">
-          <div class="space-y-2">
-            <Label for="tenantId">Tenant ID</Label>
-            <Input id="tenantId" v-model="tenantId" type="text" required placeholder="123" />
-          </div>
-
           <div class="space-y-2">
             <Label for="email">Email</Label>
             <Input
@@ -74,10 +69,29 @@
 </template>
 
 <script setup lang="ts">
+// Skip auth middleware for register page
+definePageMeta({
+  auth: false
+})
+
 const config = useRuntimeConfig()
 const router = useRouter()
 
-const tenantId = ref('123')
+// Extract subdomain from hostname
+const getSubdomain = () => {
+  if (!import.meta.client) return null
+  const hostname = window.location.hostname
+  const parts = hostname.split('.')
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return null
+  }
+  if (parts.length > 1 && parts[0] !== 'www') {
+    return parts[0]
+  }
+  return null
+}
+
+const subdomain = ref(getSubdomain())
 const email = ref('')
 const password = ref('')
 const firstName = ref('')
@@ -92,12 +106,17 @@ const handleRegister = async () => {
     error.value = ''
     success.value = false
 
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+
+    if (subdomain.value) {
+      headers['x-tenant-id'] = subdomain.value
+    }
+
     const response = await fetch(`${config.public.apiBaseUrl}/api/auth/register`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-tenant-id': tenantId.value,
-      },
+      headers,
       body: JSON.stringify({
         email: email.value,
         password: password.value,

frontend/pages/setup/apps/index.vue

@@ -69,7 +69,7 @@
               v-for="app in apps"
               :key="app.id"
               :to="`/setup/apps/${app.slug}`"
-              class="p-6 border rounded-lg hover:border-primary transition-colors bg-card"
+              class="p-6 border rounded-lg hover:border-primary transition-colors bg-card bg-background shadow-md"
             >
               <h3 class="text-xl font-semibold mb-2">{{ app.label }}</h3>
               <p class="text-sm text-muted-foreground mb-4">