WIP - more admin users and roles

frontend/pages/setup/roles/index.vue

@@ -49,9 +49,17 @@
             </TableCell>
             <TableCell>{{ formatDate(role.createdAt) }}</TableCell>
             <TableCell class="text-right" @click.stop>
-              <Button variant="ghost" size="icon" @click="navigateTo(`/setup/roles/${role.id}`)">
-                <Eye class="h-4 w-4" />
-              </Button>
+              <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>
@@ -97,6 +105,64 @@
         </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>
@@ -111,7 +177,7 @@ 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 } from 'lucide-vue-next';
+import { Plus, Eye, Edit, Trash2 } from 'lucide-vue-next';
 
 definePageMeta({
   layout: 'default',
@@ -123,11 +189,20 @@ 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 {
@@ -155,6 +230,50 @@ const createRole = async () => {
   }
 };
 
+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();

frontend/pages/setup/users/index.vue

@@ -52,9 +52,17 @@
                     </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>
+                        <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>
@@ -96,6 +104,60 @@
                 </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>
@@ -109,7 +171,7 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 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';
+import { UserPlus, Eye, Edit, Trash2 } from 'lucide-vue-next';
 
 
 const { api } = useApi();
@@ -118,12 +180,22 @@ 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 {
@@ -151,6 +223,55 @@ const createUser = async () => {
   }
 };
 
+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(' ');