WIP - admin users and roles

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,169 @@
+<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>
+                        <Button variant="ghost" size="icon" @click="navigateTo(`/setup/users/${user.id}`)">
+                          <Eye class="h-4 w-4" />
+                        </Button>
+                    </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>
+        </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 } from 'lucide-vue-next';
+
+
+const { api } = useApi();
+const { toast } = useToast();
+
+const loading = ref(true);
+const users = ref<any[]>([]);
+const showCreateDialog = ref(false);
+const newUser = ref({
+  email: '',
+  password: '',
+  firstName: '',
+  lastName: '',
+});
+
+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 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>