131 lines
5.8 KiB
Svelte
131 lines
5.8 KiB
Svelte
<script lang="ts">
|
|
import AppLayout from '@/layouts/AppLayout.svelte';
|
|
import { type BreadcrumbItem, type Permission } from '@/types';
|
|
import SettingsLayout from '@/layouts/settings/Layout.svelte';
|
|
|
|
import { Users, Database, Settings, FileText, Shield, Search, Filter } from 'lucide-svelte';
|
|
import Button from '@/components/ui/button/button.svelte';
|
|
import Card from '@/components/ui/card/card.svelte';
|
|
import CardContent from '@/components/ui/card/card-content.svelte';
|
|
import Input from '@/components/ui/input/input.svelte';
|
|
import CardHeader from '@/components/ui/card/card-header.svelte';
|
|
import CardTitle from '@/components/ui/card/card-title.svelte';
|
|
import CardDescription from '@/components/ui/card/card-description.svelte';
|
|
import Table from '@/components/ui/table/table.svelte';
|
|
import TableHeader from '@/components/ui/table/table-header.svelte';
|
|
import TableRow from '@/components/ui/table/table-row.svelte';
|
|
import TableHead from '@/components/ui/table/table-head.svelte';
|
|
import TableBody from '@/components/ui/table/table-body.svelte';
|
|
import TableCell from '@/components/ui/table/table-cell.svelte';
|
|
import Badge from '@/components/ui/badge/badge.svelte';
|
|
|
|
let { permissions }: { permissions: Permission[] } = $props();
|
|
|
|
let searchQuery = $state('');
|
|
|
|
const getLevelColor = (level: 'read' | 'write' | 'delete' | 'admin' | string) => {
|
|
switch (level) {
|
|
case 'read':
|
|
return 'bg-blue-100 text-blue-800 border-blue-200';
|
|
case 'write':
|
|
return 'bg-green-100 text-green-800 border-green-200';
|
|
case 'delete':
|
|
return 'bg-red-100 text-red-800 border-red-200';
|
|
case 'admin':
|
|
return 'bg-purple-100 text-purple-800 border-purple-200';
|
|
default:
|
|
return 'bg-gray-100 text-gray-800 border-gray-200';
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (granted: boolean) => {
|
|
return granted ? 'bg-green-100 text-green-800 border-green-200' : 'bg-red-100 text-red-800 border-red-200';
|
|
};
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Permissions settings',
|
|
href: '/settings/permissions',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Permissions Settings</title>
|
|
</svelte:head>
|
|
|
|
<AppLayout {breadcrumbs}>
|
|
<SettingsLayout>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold tracking-tight">Permissions</h1>
|
|
<p class="text-muted-foreground">View and manage your current permissions across different system areas.</p>
|
|
</div>
|
|
<Button variant="outline">
|
|
<Shield class="mr-2 h-4 w-4" />
|
|
Request Access
|
|
</Button>
|
|
</div>
|
|
|
|
{permissions}
|
|
<!-- Search and Filter -->
|
|
<Card>
|
|
<CardContent class="p-4">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative flex-1">
|
|
<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input bind:value={searchQuery} placeholder="Search permissions..." class="pl-10" />
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<Filter class="mr-2 h-4 w-4" />
|
|
Filter
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Detailed Permissions -->
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>All Permissions</CardTitle>
|
|
<CardDescription>Complete list of all permissions</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Permission Id</TableHead>
|
|
<TableHead>Permission</TableHead>
|
|
<TableHead>Description</TableHead>
|
|
<TableHead>Level</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{#each permissions as permission, index (index)}
|
|
<TableRow>
|
|
<TableCell>
|
|
<span class="text-sm">{permission.display_name}</span>
|
|
</TableCell>
|
|
<TableCell class="font-medium">{permission.name}</TableCell>
|
|
<TableCell class="text-muted-foreground">{permission.description}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" class={getLevelColor(permission.level)}>
|
|
{permission.level}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" class={getStatusColor(permission.granted)}>
|
|
{permission.granted ? 'Granted' : 'Denied'}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
{/each}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</SettingsLayout>
|
|
</AppLayout>
|