Add record access strategy

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

@@ -260,6 +260,7 @@ onMounted(async () => {
         :config="listConfig"
         :data="records"
         :loading="dataLoading"
+        :base-url="`/runtime/objects`"
         selectable
         @row-click="handleRowClick"
         @create="handleCreate"
@@ -274,6 +275,7 @@ onMounted(async () => {
         :data="currentRecord"
         :loading="dataLoading"
         :object-id="objectDefinition?.id"
+        :base-url="`/runtime/objects`"
         @edit="handleEdit"
         @delete="() => handleDelete([currentRecord])"
         @back="handleBack"
@@ -287,6 +289,7 @@ onMounted(async () => {
         :loading="dataLoading"
         :saving="saving"
         :object-id="objectDefinition?.id"
+        :base-url="`/runtime/objects`"
         @save="handleSaveRecord"
         @cancel="handleCancel"
         @back="handleBack"

frontend/pages/central/domains/[[recordId]]/[[view]].vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useApi } from '@/composables/useApi'
+import { useViewState } from '@/composables/useFieldViews'
+import {
+  domainListConfig,
+  domainDetailConfig,
+  domainEditConfig,
+} from '@/composables/useCentralEntities'
+import ListView from '@/components/views/ListView.vue'
+import DetailView from '@/components/views/DetailViewEnhanced.vue'
+import EditView from '@/components/views/EditViewEnhanced.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { api } = useApi()
+
+const recordId = computed(() => route.params.recordId as string)
+const view = computed(() => {
+  if (route.params.recordId === 'new' && !route.params.view) {
+    return 'edit'
+  }
+  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
+})
+
+// Use view state composable
+const {
+  records,
+  currentRecord,
+  loading: dataLoading,
+  saving,
+  fetchRecords,
+  fetchRecord,
+  deleteRecords,
+  handleSave,
+} = useViewState('/central/domains')
+
+// Navigation handlers
+const handleRowClick = (row: any) => {
+  router.push(`/central/domains/${row.id}/detail`)
+}
+
+const handleCreate = () => {
+  router.push(`/central/domains/new`)
+}
+
+const handleEdit = (row?: any) => {
+  const id = row?.id || recordId.value
+  router.push(`/central/domains/${id}/edit`)
+}
+
+const handleBack = () => {
+  if (view.value === 'detail') {
+    router.push('/central/domains')
+  } else if (view.value === 'edit') {
+    if (recordId.value && recordId.value !== 'new') {
+      router.push(`/central/domains/${recordId.value}/detail`)
+    } else {
+      router.push('/central/domains')
+    }
+  }
+}
+
+const handleCancel = () => {
+  handleBack()
+}
+
+const handleDelete = async (rows: any[]) => {
+  if (confirm(`Delete ${rows.length} domain(s)? This action cannot be undone.`)) {
+    try {
+      const ids = rows.map(r => r.id)
+      await deleteRecords(ids)
+      if (view.value !== 'list') {
+        await router.push('/central/domains')
+      }
+    } catch (e: any) {
+      console.error('Failed to delete domains:', e)
+    }
+  }
+}
+
+const handleSaveRecord = async (data: any) => {
+  try {
+    const savedRecord = await handleSave(data)
+    if (savedRecord?.id) {
+      router.push(`/central/domains/${savedRecord.id}/detail`)
+    } else {
+      router.push('/central/domains')
+    }
+  } catch (e: any) {
+    console.error('Failed to save domain:', e)
+  }
+}
+
+// Initialize
+onMounted(async () => {
+  if (view.value === 'list') {
+    await fetchRecords()
+  } else if (recordId.value && recordId.value !== 'new') {
+    await fetchRecord(recordId.value)
+  }
+})
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="object-view-container">
+      <!-- Page Header -->
+      <div v-if="view === 'list'" class="mb-6">
+        <h1 class="text-3xl font-bold">Domains</h1>
+        <p class="text-muted-foreground mt-2">
+          Manage tenant domains and subdomain mappings
+        </p>
+      </div>
+
+      <!-- List View -->
+      <ListView
+        v-if="view === 'list'"
+        :config="domainListConfig"
+        :data="records"
+        :loading="dataLoading"
+        selectable
+        @row-click="handleRowClick"
+        @create="handleCreate"
+        @edit="handleEdit"
+        @delete="handleDelete"
+      />
+
+      <!-- Detail View -->
+      <DetailView
+        v-else-if="view === 'detail' && currentRecord"
+        :config="domainDetailConfig"
+        :data="currentRecord"
+        :loading="dataLoading"
+        @edit="handleEdit"
+        @delete="() => handleDelete([currentRecord])"
+        @back="handleBack"
+      />
+
+      <!-- Edit View -->
+      <EditView
+        v-else-if="(view === 'edit' || recordId === 'new')"
+        :config="domainEditConfig"
+        :data="currentRecord || {}"
+        :loading="dataLoading"
+        :saving="saving"
+        @save="handleSaveRecord"
+        @cancel="handleCancel"
+        @back="handleBack"
+      />
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.object-view-container {
+  min-height: 100vh;
+  padding: 2rem;
+}
+</style>

frontend/pages/central/tenants/[[recordId]]/[[view]].vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useApi } from '@/composables/useApi'
+import { useViewState } from '@/composables/useFieldViews'
+import {
+  tenantFields,
+  tenantListConfig,
+  tenantDetailConfig,
+  tenantEditConfig,
+} from '@/composables/useCentralEntities'
+import ListView from '@/components/views/ListView.vue'
+import DetailView from '@/components/views/DetailViewEnhanced.vue'
+import EditView from '@/components/views/EditViewEnhanced.vue'
+import TenantUserDialog from '@/components/TenantUserDialog.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { api } = useApi()
+
+// Tenant user dialog state
+const showTenantUserDialog = ref(false)
+const tenantUserDialogTenantId = ref('')
+
+const recordId = computed(() => route.params.recordId as string)
+const view = computed(() => {
+  if (route.params.recordId === 'new' && !route.params.view) {
+    return 'edit'
+  }
+  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
+})
+
+// Use view state composable
+const {
+  records,
+  currentRecord,
+  loading: dataLoading,
+  saving,
+  fetchRecords,
+  fetchRecord,
+  deleteRecords,
+  handleSave,
+} = useViewState('/central/tenants')
+
+// Navigation handlers
+const handleRowClick = (row: any) => {
+  router.push(`/central/tenants/${row.id}/detail`)
+}
+
+const handleCreate = () => {
+  router.push(`/central/tenants/new`)
+}
+
+const handleEdit = (row?: any) => {
+  const id = row?.id || recordId.value
+  router.push(`/central/tenants/${id}/edit`)
+}
+
+const handleBack = () => {
+  if (view.value === 'detail') {
+    router.push('/central/tenants')
+  } else if (view.value === 'edit') {
+    if (recordId.value && recordId.value !== 'new') {
+      router.push(`/central/tenants/${recordId.value}/detail`)
+    } else {
+      router.push('/central/tenants')
+    }
+  }
+}
+
+const handleCancel = () => {
+  handleBack()
+}
+
+const handleDelete = async (rows: any[]) => {
+  if (confirm(`Delete ${rows.length} tenant(s)? This action cannot be undone.`)) {
+    try {
+      const ids = rows.map(r => r.id)
+      await deleteRecords(ids)
+      if (view.value !== 'list') {
+        await router.push('/central/tenants')
+      }
+    } catch (e: any) {
+      console.error('Failed to delete tenants:', e)
+    }
+  }
+}
+
+// Handle navigation to related records
+const handleNavigate = (objectApiName: string, recordId: string) => {
+  router.push(`/central/${objectApiName}/${recordId}/detail`)
+}
+
+// Handle creating related records
+const handleCreateRelated = (objectApiName: string, parentId: string) => {
+  // Special handling for tenant users
+  if (objectApiName.includes('tenants/:parentId/users')) {
+    tenantUserDialogTenantId.value = parentId
+    showTenantUserDialog.value = true
+    return
+  }
+  
+  // Navigate to create page with parent context
+  router.push({
+    path: `/central/${objectApiName}/new`,
+    query: { tenantId: parentId }
+  })
+}
+
+// Handle tenant user created
+const handleTenantUserCreated = async () => {
+  // Refresh the current record to update related lists
+  if (recordId.value && recordId.value !== 'new') {
+    await fetchRecord(recordId.value)
+  }
+}
+
+const handleSaveRecord = async (data: any) => {
+  try {
+    const savedRecord = await handleSave(data)
+    if (savedRecord?.id) {
+      router.push(`/central/tenants/${savedRecord.id}/detail`)
+    } else {
+      router.push('/central/tenants')
+    }
+  } catch (e: any) {
+    console.error('Failed to save tenant:', e)
+  }
+}
+
+// Initialize
+onMounted(async () => {
+  if (view.value === 'list') {
+    await fetchRecords()
+  } else if (recordId.value && recordId.value !== 'new') {
+    await fetchRecord(recordId.value)
+  }
+})
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="object-view-container">
+      <!-- Page Header -->
+      <div v-if="view === 'list'" class="mb-6">
+        <h1 class="text-3xl font-bold">Tenants</h1>
+        <p class="text-muted-foreground mt-2">
+          Manage tenant organizations and their database configurations
+        </p>
+      </div>
+
+      <!-- List View -->
+      <ListView
+        v-if="view === 'list'"
+        :config="tenantListConfig"
+        :data="records"
+        :loading="dataLoading"
+        selectable
+        @row-click="handleRowClick"
+        @create="handleCreate"
+        @edit="handleEdit"
+        @delete="handleDelete"
+      />
+
+      <!-- Detail View -->
+      <DetailView
+        v-else-if="view === 'detail' && currentRecord"
+        :config="tenantDetailConfig"
+        :data="currentRecord"
+        :loading="dataLoading"
+        @edit="handleEdit"
+        @delete="() => handleDelete([currentRecord])"
+        @back="handleBack"
+        @navigate="handleNavigate"
+        @create-related="handleCreateRelated"
+      />
+
+      <!-- Edit View -->
+      <EditView
+        v-else-if="(view === 'edit' || recordId === 'new') && tenantEditConfig"
+        :config="tenantEditConfig"
+        :data="currentRecord || {}"
+        :loading="dataLoading"
+        :saving="saving"
+        @save="handleSaveRecord"
+        @cancel="handleCancel"
+        @back="handleBack"
+      />
+    </div>
+
+    <!-- Tenant User Creation Dialog -->
+    <TenantUserDialog
+      v-model:open="showTenantUserDialog"
+      :tenant-id="tenantUserDialogTenantId"
+      :tenant-name="(currentRecord as any)?.name"
+      @created="handleTenantUserCreated"
+    />
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.object-view-container {
+  min-height: 100vh;
+  padding: 2rem;
+}
+</style>

frontend/pages/central/users/[[recordId]]/[[view]].vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useApi } from '@/composables/useApi'
+import { useViewState } from '@/composables/useFieldViews'
+import {
+  centralUserListConfig,
+  centralUserDetailConfig,
+  centralUserEditConfig,
+} from '@/composables/useCentralEntities'
+import ListView from '@/components/views/ListView.vue'
+import DetailView from '@/components/views/DetailViewEnhanced.vue'
+import EditView from '@/components/views/EditViewEnhanced.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { api } = useApi()
+
+const recordId = computed(() => route.params.recordId as string)
+const view = computed(() => {
+  if (route.params.recordId === 'new' && !route.params.view) {
+    return 'edit'
+  }
+  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
+})
+
+// Use view state composable
+const {
+  records,
+  currentRecord,
+  loading: dataLoading,
+  saving,
+  fetchRecords,
+  fetchRecord,
+  deleteRecords,
+  handleSave,
+} = useViewState('/central/users')
+
+// Navigation handlers
+const handleRowClick = (row: any) => {
+  router.push(`/central/users/${row.id}/detail`)
+}
+
+const handleCreate = () => {
+  router.push(`/central/users/new`)
+}
+
+const handleEdit = (row?: any) => {
+  const id = row?.id || recordId.value
+  router.push(`/central/users/${id}/edit`)
+}
+
+const handleBack = () => {
+  if (view.value === 'detail') {
+    router.push('/central/users')
+  } else if (view.value === 'edit') {
+    if (recordId.value && recordId.value !== 'new') {
+      router.push(`/central/users/${recordId.value}/detail`)
+    } else {
+      router.push('/central/users')
+    }
+  }
+}
+
+const handleCancel = () => {
+  handleBack()
+}
+
+const handleDelete = async (rows: any[]) => {
+  if (confirm(`Delete ${rows.length} user(s)? This action cannot be undone.`)) {
+    try {
+      const ids = rows.map(r => r.id)
+      await deleteRecords(ids)
+      if (view.value !== 'list') {
+        await router.push('/central/users')
+      }
+    } catch (e: any) {
+      console.error('Failed to delete users:', e)
+    }
+  }
+}
+
+const handleSaveRecord = async (data: any) => {
+  try {
+    // Remove password if empty (to keep existing password)
+    if (data.password === '' || data.password === null) {
+      delete data.password
+    }
+    
+    const savedRecord = await handleSave(data)
+    if (savedRecord?.id) {
+      router.push(`/central/users/${savedRecord.id}/detail`)
+    } else {
+      router.push('/central/users')
+    }
+  } catch (e: any) {
+    console.error('Failed to save user:', e)
+  }
+}
+
+// Initialize
+onMounted(async () => {
+  if (view.value === 'list') {
+    await fetchRecords()
+  } else if (recordId.value && recordId.value !== 'new') {
+    await fetchRecord(recordId.value)
+  }
+})
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="object-view-container">
+      <!-- Page Header -->
+      <div v-if="view === 'list'" class="mb-6">
+        <h1 class="text-3xl font-bold">Admin Users</h1>
+        <p class="text-muted-foreground mt-2">
+          Manage central administrator accounts
+        </p>
+      </div>
+
+      <!-- List View -->
+      <ListView
+        v-if="view === 'list'"
+        :config="centralUserListConfig"
+        :data="records"
+        :loading="dataLoading"
+        selectable
+        @row-click="handleRowClick"
+        @create="handleCreate"
+        @edit="handleEdit"
+        @delete="handleDelete"
+      />
+
+      <!-- Detail View -->
+      <DetailView
+        v-else-if="view === 'detail' && currentRecord"
+        :config="centralUserDetailConfig"
+        :data="currentRecord"
+        :loading="dataLoading"
+        @edit="handleEdit"
+        @delete="() => handleDelete([currentRecord])"
+        @back="handleBack"
+      />
+
+      <!-- Edit View -->
+      <EditView
+        v-else-if="(view === 'edit' || recordId === 'new')"
+        :config="centralUserEditConfig"
+        :data="currentRecord || {}"
+        :loading="dataLoading"
+        :saving="saving"
+        @save="handleSaveRecord"
+        @cancel="handleCancel"
+        @back="handleBack"
+      />
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.object-view-container {
+  min-height: 100vh;
+  padding: 2rem;
+}
+</style>

frontend/pages/setup/objects/[apiName].vue

@@ -16,8 +16,9 @@
           <!-- Tabs -->
           <div class="mb-8">
             <Tabs v-model="activeTab" default-value="fields" class="w-full">
-              <TabsList class="grid w-full grid-cols-2 max-w-md">
+              <TabsList class="grid w-full grid-cols-3 max-w-2xl">
                 <TabsTrigger value="fields">Fields</TabsTrigger>
+                <TabsTrigger value="access">Access</TabsTrigger>
                 <TabsTrigger value="layouts">Page Layouts</TabsTrigger>
               </TabsList>
 
@@ -55,6 +56,17 @@
                 </div>
               </TabsContent>
 
+              <!-- Access Tab -->
+              <TabsContent value="access" class="mt-6">
+                <ObjectAccessSettings
+                  :object-api-name="object.apiName"
+                  :object-id="object.id"
+                  :org-wide-default="object.orgWideDefault"
+                  :fields="object.fields"
+                  @update="handleAccessUpdate"
+                />
+              </TabsContent>
+
               <!-- Page Layouts Tab -->
               <TabsContent value="layouts" class="mt-6">
                 <div v-if="!selectedLayout" class="space-y-4">
@@ -138,6 +150,7 @@ import { Plus, Trash2, ArrowLeft } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import PageLayoutEditor from '@/components/PageLayoutEditor.vue'
+import ObjectAccessSettings from '@/components/ObjectAccessSettings.vue'
 import type { PageLayout, FieldLayoutItem } from '~/types/page-layout'
 
 const route = useRoute()
@@ -247,7 +260,11 @@ watch(activeTab, (newTab) => {
     fetchLayouts()
   }
 })
-
+const handleAccessUpdate = (orgWideDefault: string) => {
+  if (object.value) {
+    object.value.orgWideDefault = orgWideDefault
+  }
+}
 onMounted(async () => {
   await fetchObject()
   // If we start on layouts tab, load them

frontend/pages/setup/roles/[id].vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="min-h-screen bg-background">
+    <NuxtLayout name="default">
+      <main class="container mx-auto px-4 py-8">
+        <div class="flex items-center justify-between">
+          <div>
+            <Button variant="ghost" size="sm" @click="navigateTo('/setup/roles')" class="mb-2">
+              ← Back to Roles
+            </Button>
+        <h1 class="text-3xl font-bold">{{ role?.name || 'Role' }}</h1>
+        <p class="text-muted-foreground">{{ role?.description || 'No description' }}</p>
+      </div>
+    </div>
+
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+    </div>
+
+    <Tabs v-else default-value="details" class="w-full">
+      <TabsList>
+        <TabsTrigger value="details">Details</TabsTrigger>
+        <TabsTrigger value="users">Users</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="details" class="mt-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Role Information</CardTitle>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <Label class="text-muted-foreground">Name</Label>
+                <p class="font-medium">{{ role?.name }}</p>
+              </div>
+              <div>
+                <Label class="text-muted-foreground">Guard</Label>
+                <Badge variant="outline">{{ role?.guardName || 'tenant' }}</Badge>
+              </div>
+              <div class="col-span-2">
+                <Label class="text-muted-foreground">Description</Label>
+                <p class="font-medium">{{ role?.description || 'No description' }}</p>
+              </div>
+              <div>
+                <Label class="text-muted-foreground">Created At</Label>
+                <p class="font-medium">{{ formatDate(role?.createdAt) }}</p>
+              </div>
+              <div>
+                <Label class="text-muted-foreground">Updated At</Label>
+                <p class="font-medium">{{ formatDate(role?.updatedAt) }}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+
+      <TabsContent value="users" class="mt-6">
+        <Card>
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div>
+                <CardTitle>Assigned Users</CardTitle>
+                <CardDescription>Manage user assignments for this role</CardDescription>
+              </div>
+              <Button @click="showAddUserDialog = true" size="sm">
+                <Plus class="mr-2 h-4 w-4" />
+                Add User
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div v-if="roleUsers.length === 0" class="text-center py-8 text-muted-foreground">
+              No users assigned. Add users to grant them this role.
+            </div>
+            <div v-else class="space-y-2">
+              <div 
+                v-for="user in roleUsers" 
+                :key="user.id"
+                class="flex items-center justify-between p-3 border rounded-lg"
+              >
+                <div>
+                  <p class="font-medium">{{ getUserName(user) }}</p>
+                  <p class="text-sm text-muted-foreground">{{ user.email }}</p>
+                </div>
+                <Button variant="ghost" size="sm" @click="removeUser(user.id)">
+                  <X class="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+
+    <!-- Add User Dialog -->
+    <Dialog v-model:open="showAddUserDialog">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add User</DialogTitle>
+          <DialogDescription>
+            Select a user to assign this role
+          </DialogDescription>
+        </DialogHeader>
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <Label>Available Users</Label>
+            <Select v-model="selectedUserId" @update:model-value="(value) => selectedUserId = value">
+              <SelectTrigger>
+                <SelectValue placeholder="Choose a user" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="user in availableUsers" :key="user.id" :value="user.id">
+                  {{ getUserName(user) }} ({{ user.email }})
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="showAddUserDialog = false">Cancel</Button>
+          <Button @click="addUser" :disabled="!selectedUserId">
+            Add User
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+      </main>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
+import { Button } from '~/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '~/components/ui/dialog';
+import { Label } from '~/components/ui/label';
+import { Badge } from '~/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select';
+import { Plus, X } from 'lucide-vue-next';
+
+definePageMeta({
+  layout: 'default',
+});
+
+const route = useRoute();
+const { api } = useApi();
+const { toast } = useToast();
+
+const loading = ref(true);
+const role = ref<any>(null);
+const roleUsers = ref<any[]>([]);
+const allUsers = ref<any[]>([]);
+const showAddUserDialog = ref(false);
+const selectedUserId = ref('');
+
+const availableUsers = computed(() => {
+  const assignedIds = new Set(roleUsers.value.map(u => u.id));
+  return allUsers.value.filter(u => !assignedIds.has(u.id));
+});
+
+const loadRole = async () => {
+  try {
+    loading.value = true;
+    const roleId = route.params.id;
+    const response = await api.get(`/setup/roles/${roleId}`);
+    role.value = response;
+    roleUsers.value = response.users || [];
+  } catch (error: any) {
+    console.error('Failed to load role:', error);
+    toast.error('Failed to load role');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadAllUsers = async () => {
+  try {
+    const response = await api.get('/setup/users');
+    allUsers.value = response || [];
+  } catch (error: any) {
+    console.error('Failed to load users:', error);
+  }
+};
+
+const addUser = async () => {
+  if (!selectedUserId.value) return;
+  
+  try {
+    await api.post(`/setup/roles/${route.params.id}/users`, {
+      userId: selectedUserId.value,
+    });
+    toast.success('User added successfully');
+    showAddUserDialog.value = false;
+    selectedUserId.value = '';
+    await loadRole();
+  } catch (error: any) {
+    console.error('Failed to add user:', error);
+    toast.error(error.message || 'Failed to add user');
+  }
+};
+
+const removeUser = async (userId: string) => {
+  try {
+    await api.delete(`/setup/roles/${route.params.id}/users/${userId}`);
+    toast.success('User removed successfully');
+    await loadRole();
+  } catch (error: any) {
+    console.error('Failed to remove user:', error);
+    toast.error(error.message || 'Failed to remove user');
+  }
+};
+
+const getUserName = (user: any) => {
+  if (!user) return 'Unknown';
+  if (user.firstName || user.lastName) {
+    return [user.firstName, user.lastName].filter(Boolean).join(' ');
+  }
+  return user.email || 'Unknown';
+};
+
+const formatDate = (date: string) => {
+  if (!date) return 'N/A';
+  return new Date(date).toLocaleDateString();
+};
+
+onMounted(async () => {
+  await Promise.all([loadRole(), loadAllUsers()]);
+});
+</script>

frontend/pages/setup/roles/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="min-h-screen bg-background">
+    <NuxtLayout name="default">
+      <main class="container mx-auto px-4 py-8">
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-3xl font-bold">Roles</h1>
+            <p class="text-muted-foreground">Manage roles and permissions</p>
+          </div>
+      <Button @click="showCreateDialog = true">
+        <Plus class="mr-2 h-4 w-4" />
+        New Role
+      </Button>
+    </div>
+
+    <div class="border rounded-lg">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Description</TableHead>
+            <TableHead>Guard</TableHead>
+            <TableHead>Users</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead class="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-if="loading">
+            <TableCell :colspan="6" 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="roles.length === 0">
+            <TableCell :colspan="6" class="text-center py-8 text-muted-foreground">
+              No roles found. Create your first role to get started.
+            </TableCell>
+          </TableRow>
+          <TableRow v-else v-for="role in roles" :key="role.id" class="cursor-pointer hover:bg-muted/50" @click="navigateTo(`/setup/roles/${role.id}`)">
+            <TableCell class="font-medium">{{ role.name }}</TableCell>
+            <TableCell>{{ role.description || 'No description' }}</TableCell>
+            <TableCell>
+              <Badge variant="outline">{{ role.guardName || 'tenant' }}</Badge>
+            </TableCell>
+            <TableCell>
+              {{ role.userCount || 0 }} users
+            </TableCell>
+            <TableCell>{{ formatDate(role.createdAt) }}</TableCell>
+            <TableCell class="text-right" @click.stop>
+              <div class="flex items-center justify-end gap-1">
+                <Button variant="ghost" size="icon" @click="navigateTo(`/setup/roles/${role.id}`)">
+                  <Eye class="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="icon" @click="openEditDialog(role)">
+                  <Edit class="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="icon" @click="openDeleteDialog(role)">
+                  <Trash2 class="h-4 w-4" />
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <!-- Create Role Dialog -->
+    <Dialog v-model:open="showCreateDialog">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Role</DialogTitle>
+          <DialogDescription>
+            Add a new role to the system
+          </DialogDescription>
+        </DialogHeader>
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <Label for="name">Name</Label>
+            <Input id="name" v-model="newRole.name" placeholder="Sales Manager" />
+          </div>
+          <div class="space-y-2">
+            <Label for="description">Description (Optional)</Label>
+            <Input id="description" v-model="newRole.description" placeholder="Manages sales team and deals" />
+          </div>
+          <div class="space-y-2">
+            <Label for="guardName">Guard Name</Label>
+            <Select v-model="newRole.guardName" @update:model-value="(value) => newRole.guardName = value">
+              <SelectTrigger>
+                <SelectValue placeholder="Select guard" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="tenant">Tenant</SelectItem>
+                <SelectItem value="central">Central</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="showCreateDialog = false">Cancel</Button>
+          <Button @click="createRole" :disabled="!newRole.name">
+            Create Role
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <!-- Edit Role Dialog -->
+    <Dialog v-model:open="showEditDialog">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Role</DialogTitle>
+          <DialogDescription>
+            Update role information
+          </DialogDescription>
+        </DialogHeader>
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <Label for="edit-name">Name</Label>
+            <Input id="edit-name" v-model="editRole.name" placeholder="Role name" />
+          </div>
+          <div class="space-y-2">
+            <Label for="edit-description">Description</Label>
+            <Input id="edit-description" v-model="editRole.description" placeholder="Role description" />
+          </div>
+          <div class="space-y-2">
+            <Label for="edit-guardName">Guard Name</Label>
+            <Select v-model="editRole.guardName" @update:model-value="(value) => editRole.guardName = value">
+              <SelectTrigger>
+                <SelectValue placeholder="Select guard" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="tenant">Tenant</SelectItem>
+                <SelectItem value="central">Central</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="showEditDialog = false">Cancel</Button>
+          <Button @click="updateRole" :disabled="!editRole.name">
+            Update Role
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <!-- Delete Confirmation Dialog -->
+    <Dialog v-model:open="showDeleteDialog">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Role</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this role? This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" @click="showDeleteDialog = false">Cancel</Button>
+          <Button variant="destructive" @click="deleteRole">
+            Delete Role
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+      </main>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Button } from '~/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/ui/table';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '~/components/ui/dialog';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+import { Badge } from '~/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select';
+import { Plus, Eye, Edit, Trash2 } from 'lucide-vue-next';
+
+definePageMeta({
+  layout: 'default',
+});
+
+const { api } = useApi();
+const { toast } = useToast();
+
+const loading = ref(true);
+const roles = ref<any[]>([]);
+const showCreateDialog = ref(false);
+const showEditDialog = ref(false);
+const showDeleteDialog = ref(false);
+const newRole = ref({
+  name: '',
+  description: '',
+  guardName: 'tenant',
+});
+const editRole = ref({
+  id: '',
+  name: '',
+  description: '',
+  guardName: 'tenant',
+});
+const roleToDelete = ref<any>(null);
+
+const loadRoles = async () => {
+  try {
+    loading.value = true;
+    const response = await api.get('/setup/roles');
+    roles.value = response || [];
+  } catch (error: any) {
+    console.error('Failed to load roles:', error);
+    toast.error('Failed to load roles');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const createRole = async () => {
+  try {
+    await api.post('/setup/roles', newRole.value);
+    toast.success('Role created successfully');
+    showCreateDialog.value = false;
+    newRole.value = { name: '', description: '', guardName: 'tenant' };
+    await loadRoles();
+  } catch (error: any) {
+    console.error('Failed to create role:', error);
+    toast.error(error.message || 'Failed to create role');
+  }
+};
+
+const openEditDialog = (role: any) => {
+  editRole.value = {
+    id: role.id,
+    name: role.name,
+    description: role.description || '',
+    guardName: role.guardName || 'tenant',
+  };
+  showEditDialog.value = true;
+};
+
+const updateRole = async () => {
+  try {
+    await api.patch(`/setup/roles/${editRole.value.id}`, {
+      name: editRole.value.name,
+      description: editRole.value.description,
+      guardName: editRole.value.guardName,
+    });
+    toast.success('Role updated successfully');
+    showEditDialog.value = false;
+    await loadRoles();
+  } catch (error: any) {
+    console.error('Failed to update role:', error);
+    toast.error(error.message || 'Failed to update role');
+  }
+};
+
+const openDeleteDialog = (role: any) => {
+  roleToDelete.value = role;
+  showDeleteDialog.value = true;
+};
+
+const deleteRole = async () => {
+  try {
+    await api.delete(`/setup/roles/${roleToDelete.value.id}`);
+    toast.success('Role deleted successfully');
+    showDeleteDialog.value = false;
+    roleToDelete.value = null;
+    await loadRoles();
+  } catch (error: any) {
+    console.error('Failed to delete role:', error);
+    toast.error(error.message || 'Failed to delete role');
+  }
+};
+
+const formatDate = (date: string) => {
+  if (!date) return 'N/A';
+  return new Date(date).toLocaleDateString();
+};
+
+onMounted(() => {
+  loadRoles();
+});
+</script>

frontend/pages/setup/users/[id].vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="min-h-screen bg-background">
+    <NuxtLayout name="default">
+        <main class="container mx-auto px-4 py-8">
+    <div class="flex items-center justify-between">
+      <div>
+        <Button variant="ghost" size="sm" @click="navigateTo('/setup/users')" class="mb-2">
+          ← Back to Users
+        </Button>
+        <h1 class="text-3xl font-bold">{{ getUserName(user) }}</h1>
+        <p class="text-muted-foreground">{{ user?.email }}</p>
+      </div>
+    </div>
+
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+    </div>
+
+    <Tabs v-else default-value="details" class="w-full">
+      <TabsList>
+        <TabsTrigger value="details">Details</TabsTrigger>
+        <TabsTrigger value="roles">Roles</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="details" class="mt-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>User Information</CardTitle>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <Label class="text-muted-foreground">Email</Label>
+                <p class="font-medium">{{ user?.email }}</p>
+              </div>
+              <div>
+                <Label class="text-muted-foreground">First Name</Label>
+                <p class="font-medium">{{ user?.firstName || 'N/A' }}</p>
+              </div>
+              <div>
+                <Label class="text-muted-foreground">Last Name</Label>
+                <p class="font-medium">{{ user?.lastName || 'N/A' }}</p>
+              </div>
+              <div>
+                <Label class="text-muted-foreground">Created At</Label>
+                <p class="font-medium">{{ formatDate(user?.createdAt) }}</p>
+              </div>
+              <div>
+                <Label class="text-muted-foreground">Updated At</Label>
+                <p class="font-medium">{{ formatDate(user?.updatedAt) }}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+
+      <TabsContent value="roles" class="mt-6">
+        <Card>
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div>
+                <CardTitle>Assigned Roles</CardTitle>
+                <CardDescription>Manage role assignments for this user</CardDescription>
+              </div>
+              <Button @click="showAddRoleDialog = true" size="sm">
+                <Plus class="mr-2 h-4 w-4" />
+                Add Role
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div v-if="userRoles.length === 0" class="text-center py-8 text-muted-foreground">
+              No roles assigned. Add roles to grant permissions.
+            </div>
+            <div v-else class="space-y-2">
+              <div 
+                v-for="role in userRoles" 
+                :key="role.id"
+                class="flex items-center justify-between p-3 border rounded-lg"
+              >
+                <div>
+                  <p class="font-medium">{{ role.name }}</p>
+                  <p class="text-sm text-muted-foreground">{{ role.description || 'No description' }}</p>
+                </div>
+                <Button variant="ghost" size="sm" @click="removeRole(role.id)">
+                  <X class="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+
+    <!-- Add Role Dialog -->
+    <Dialog v-model:open="showAddRoleDialog">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add Role</DialogTitle>
+          <DialogDescription>
+            Select a role to assign to this user
+          </DialogDescription>
+        </DialogHeader>
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <Label>Available Roles</Label>
+            <Select v-model="selectedRoleId" @update:model-value="(value) => selectedRoleId = value">
+              <SelectTrigger>
+                <SelectValue placeholder="Choose a role" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="role in availableRoles" :key="role.id" :value="role.id">
+                  {{ role.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="showAddRoleDialog = false">Cancel</Button>
+          <Button @click="addRole" :disabled="!selectedRoleId">
+            Add Role
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </main>
+    </NuxtLayout>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
+import { Button } from '~/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '~/components/ui/dialog';
+import { Label } from '~/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select';
+import { Plus, X } from 'lucide-vue-next';
+
+
+const route = useRoute();
+const { api } = useApi();
+const { toast } = useToast();
+
+const loading = ref(true);
+const user = ref<any>(null);
+const userRoles = ref<any[]>([]);
+const allRoles = ref<any[]>([]);
+const showAddRoleDialog = ref(false);
+const selectedRoleId = ref('');
+
+const availableRoles = computed(() => {
+  const assignedIds = new Set(userRoles.value.map(r => r.id));
+  return allRoles.value.filter(r => !assignedIds.has(r.id));
+});
+
+const loadUser = async () => {
+  try {
+    loading.value = true;
+    const userId = route.params.id;
+    const response = await api.get(`/setup/users/${userId}`);
+    user.value = response;
+    userRoles.value = response.roles || [];
+  } catch (error: any) {
+    console.error('Failed to load user:', error);
+    toast.error('Failed to load user');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadAllRoles = async () => {
+  try {
+    const response = await api.get('/setup/roles');
+    allRoles.value = response || [];
+  } catch (error: any) {
+    console.error('Failed to load roles:', error);
+  }
+};
+
+const addRole = async () => {
+  if (!selectedRoleId.value) return;
+  
+  try {
+    await api.post(`/setup/users/${route.params.id}/roles`, {
+      roleId: selectedRoleId.value,
+    });
+    toast.success('Role added successfully');
+    showAddRoleDialog.value = false;
+    selectedRoleId.value = '';
+    await loadUser();
+  } catch (error: any) {
+    console.error('Failed to add role:', error);
+    toast.error(error.message || 'Failed to add role');
+  }
+};
+
+const removeRole = async (roleId: string) => {
+  try {
+    await api.delete(`/setup/users/${route.params.id}/roles/${roleId}`);
+    toast.success('Role removed successfully');
+    await loadUser();
+  } catch (error: any) {
+    console.error('Failed to remove role:', error);
+    toast.error(error.message || 'Failed to remove role');
+  }
+};
+
+const getUserName = (user: any) => {
+  if (!user) return 'User';
+  if (user.firstName || user.lastName) {
+    return [user.firstName, user.lastName].filter(Boolean).join(' ');
+  }
+  return user.email || 'User';
+};
+
+const formatDate = (date: string) => {
+  if (!date) return 'N/A';
+  return new Date(date).toLocaleDateString();
+};
+
+onMounted(async () => {
+  await Promise.all([loadUser(), loadAllRoles()]);
+});
+</script>

frontend/pages/setup/users/index.vue

@@ -0,0 +1,290 @@
+<template>
+    <div class="min-h-screen bg-background">
+    <NuxtLayout name="default">
+        <main class="container mx-auto px-4 py-8">
+            <div class="flex items-center justify-between">
+            <div>
+                <h1 class="text-3xl font-bold">Users</h1>
+                <p class="text-muted-foreground">Manage user accounts and access</p>
+            </div>
+            <Button @click="showCreateDialog = true">
+                <UserPlus class="mr-2 h-4 w-4" />
+                New User
+            </Button>
+            </div>
+
+            <div class="border rounded-lg">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Email</TableHead>
+                    <TableHead>Roles</TableHead>
+                    <TableHead>Created</TableHead>
+                    <TableHead class="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow v-if="loading">
+                    <TableCell :colspan="5" 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="users.length === 0">
+                    <TableCell :colspan="5" class="text-center py-8 text-muted-foreground">
+                      No users found. Create your first user to get started.
+                    </TableCell>
+                  </TableRow>
+                  <TableRow v-else v-for="user in users" :key="user.id" class="cursor-pointer hover:bg-muted/50" @click="navigateTo(`/setup/users/${user.id}`)">
+                    <TableCell class="font-medium">{{ getUserName(user) }}</TableCell>
+                    <TableCell>{{ user.email }}</TableCell>
+                    <TableCell>
+                        <div class="flex gap-1 flex-wrap">
+                        <Badge v-for="role in user.roles" :key="role.id" variant="secondary">
+                            {{ role.name }}
+                        </Badge>
+                        <span v-if="!user.roles || user.roles.length === 0" class="text-muted-foreground text-sm">
+                            No roles
+                        </span>
+                        </div>
+                    </TableCell>
+                    <TableCell>{{ formatDate(user.createdAt) }}</TableCell>
+                    <TableCell class="text-right" @click.stop>
+                        <div class="flex items-center justify-end gap-1">
+                          <Button variant="ghost" size="icon" @click="navigateTo(`/setup/users/${user.id}`)">
+                            <Eye class="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon" @click="openEditDialog(user)">
+                            <Edit class="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon" @click="openDeleteDialog(user)">
+                            <Trash2 class="h-4 w-4" />
+                          </Button>
+                        </div>
+                    </TableCell>
+                    </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+
+            <!-- Create User Dialog -->
+            <Dialog v-model:open="showCreateDialog">
+            <DialogContent>
+                <DialogHeader>
+                <DialogTitle>Create New User</DialogTitle>
+                <DialogDescription>
+                    Add a new user to the system
+                </DialogDescription>
+                </DialogHeader>
+                <div class="space-y-4">
+                <div class="space-y-2">
+                    <Label for="email">Email</Label>
+                    <Input id="email" v-model="newUser.email" type="email" placeholder="user@example.com" />
+                </div>
+                <div class="space-y-2">
+                    <Label for="password">Password</Label>
+                    <Input id="password" v-model="newUser.password" type="password" placeholder="••••••••" />
+                </div>
+                <div class="space-y-2">
+                    <Label for="firstName">First Name (Optional)</Label>
+                    <Input id="firstName" v-model="newUser.firstName" placeholder="John" />
+                </div>
+                <div class="space-y-2">
+                    <Label for="lastName">Last Name (Optional)</Label>
+                    <Input id="lastName" v-model="newUser.lastName" placeholder="Doe" />
+                </div>
+                </div>
+                <DialogFooter>
+                <Button variant="outline" @click="showCreateDialog = false">Cancel</Button>
+                <Button @click="createUser" :disabled="!newUser.email || !newUser.password">
+                    Create User
+                </Button>
+                </DialogFooter>
+            </DialogContent>
+            </Dialog>
+
+            <!-- Edit User Dialog -->
+            <Dialog v-model:open="showEditDialog">
+            <DialogContent>
+                <DialogHeader>
+                <DialogTitle>Edit User</DialogTitle>
+                <DialogDescription>
+                    Update user information
+                </DialogDescription>
+                </DialogHeader>
+                <div class="space-y-4">
+                <div class="space-y-2">
+                    <Label for="edit-email">Email</Label>
+                    <Input id="edit-email" v-model="editUser.email" type="email" placeholder="user@example.com" />
+                </div>
+                <div class="space-y-2">
+                    <Label for="edit-password">Password (leave blank to keep current)</Label>
+                    <Input id="edit-password" v-model="editUser.password" type="password" placeholder="••••••••" />
+                </div>
+                <div class="space-y-2">
+                    <Label for="edit-firstName">First Name</Label>
+                    <Input id="edit-firstName" v-model="editUser.firstName" placeholder="John" />
+                </div>
+                <div class="space-y-2">
+                    <Label for="edit-lastName">Last Name</Label>
+                    <Input id="edit-lastName" v-model="editUser.lastName" placeholder="Doe" />
+                </div>
+                </div>
+                <DialogFooter>
+                <Button variant="outline" @click="showEditDialog = false">Cancel</Button>
+                <Button @click="updateUser" :disabled="!editUser.email">
+                    Update User
+                </Button>
+                </DialogFooter>
+            </DialogContent>
+            </Dialog>
+
+            <!-- Delete Confirmation Dialog -->
+            <Dialog v-model:open="showDeleteDialog">
+            <DialogContent>
+                <DialogHeader>
+                <DialogTitle>Delete User</DialogTitle>
+                <DialogDescription>
+                    Are you sure you want to delete this user? This action cannot be undone.
+                </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                <Button variant="outline" @click="showDeleteDialog = false">Cancel</Button>
+                <Button variant="destructive" @click="deleteUser">
+                    Delete User
+                </Button>
+                </DialogFooter>
+            </DialogContent>
+            </Dialog>
+        </main>
+    </NuxtLayout>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Button } from '~/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/ui/table';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '~/components/ui/dialog';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+import { Badge } from '~/components/ui/badge';
+import { UserPlus, Eye, Edit, Trash2 } from 'lucide-vue-next';
+
+
+const { api } = useApi();
+const { toast } = useToast();
+
+const loading = ref(true);
+const users = ref<any[]>([]);
+const showCreateDialog = ref(false);
+const showEditDialog = ref(false);
+const showDeleteDialog = ref(false);
+const newUser = ref({
+  email: '',
+  password: '',
+  firstName: '',
+  lastName: '',
+});
+const editUser = ref({
+  id: '',
+  email: '',
+  password: '',
+  firstName: '',
+  lastName: '',
+});
+const userToDelete = ref<any>(null);
+
+const loadUsers = async () => {
+  try {
+    loading.value = true;
+    const response = await api.get('/setup/users');
+    users.value = response || [];
+  } catch (error: any) {
+    console.error('Failed to load users:', error);
+    toast.error('Failed to load users');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const createUser = async () => {
+  try {
+    await api.post('/setup/users', newUser.value);
+    toast.success('User created successfully');
+    showCreateDialog.value = false;
+    newUser.value = { email: '', password: '', firstName: '', lastName: '' };
+    await loadUsers();
+  } catch (error: any) {
+    console.error('Failed to create user:', error);
+    toast.error(error.message || 'Failed to create user');
+  }
+};
+
+const openEditDialog = (user: any) => {
+  editUser.value = {
+    id: user.id,
+    email: user.email,
+    password: '',
+    firstName: user.firstName || '',
+    lastName: user.lastName || '',
+  };
+  showEditDialog.value = true;
+};
+
+const updateUser = async () => {
+  try {
+    const payload: any = {
+      email: editUser.value.email,
+      firstName: editUser.value.firstName,
+      lastName: editUser.value.lastName,
+    };
+    if (editUser.value.password) {
+      payload.password = editUser.value.password;
+    }
+    await api.patch(`/setup/users/${editUser.value.id}`, payload);
+    toast.success('User updated successfully');
+    showEditDialog.value = false;
+    await loadUsers();
+  } catch (error: any) {
+    console.error('Failed to update user:', error);
+    toast.error(error.message || 'Failed to update user');
+  }
+};
+
+const openDeleteDialog = (user: any) => {
+  userToDelete.value = user;
+  showDeleteDialog.value = true;
+};
+
+const deleteUser = async () => {
+  try {
+    await api.delete(`/setup/users/${userToDelete.value.id}`);
+    toast.success('User deleted successfully');
+    showDeleteDialog.value = false;
+    userToDelete.value = null;
+    await loadUsers();
+  } catch (error: any) {
+    console.error('Failed to delete user:', error);
+    toast.error(error.message || 'Failed to delete user');
+  }
+};
+
+const getUserName = (user: any) => {
+  if (user.firstName || user.lastName) {
+    return [user.firstName, user.lastName].filter(Boolean).join(' ');
+  }
+  return user.email;
+};
+
+const formatDate = (date: string) => {
+  if (!date) return 'N/A';
+  return new Date(date).toLocaleDateString();
+};
+
+onMounted(() => {
+  loadUsers();
+});
+</script>