neo/frontend/pages/setup/roles/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">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>
              <Button variant="ghost" size="icon" @click="navigateTo(`/setup/roles/${role.id}`)">
                <Eye class="h-4 w-4" />
              </Button>
            </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>
      </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 } 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 newRole = ref({
  name: '',
  description: '',
  guardName: 'tenant',
});

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 formatDate = (date: string) => {
  if (!date) return 'N/A';
  return new Date(date).toLocaleDateString();
};

onMounted(() => {
  loadRoles();
});
</script>