neo/frontend/pages/setup/users/index.vue

<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>