Implement admin and user management foundation
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { BookOpen, FolderGit2, LayoutGrid } from 'lucide-vue-next';
|
||||
import { Link, usePage } from '@inertiajs/vue3';
|
||||
import { BookOpen, FolderGit2, LayoutGrid, Shield } from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import AppLogo from '@/components/AppLogo.vue';
|
||||
import NavFooter from '@/components/NavFooter.vue';
|
||||
import NavMain from '@/components/NavMain.vue';
|
||||
@@ -14,16 +15,31 @@ import {
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from '@/components/ui/sidebar';
|
||||
import { index as adminUsers } from '@/routes/admin/users';
|
||||
import { dashboard } from '@/routes';
|
||||
import type { NavItem } from '@/types';
|
||||
|
||||
const mainNavItems: NavItem[] = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
href: dashboard(),
|
||||
icon: LayoutGrid,
|
||||
},
|
||||
];
|
||||
const page = usePage();
|
||||
|
||||
const mainNavItems = computed<NavItem[]>(() => {
|
||||
const items: NavItem[] = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
href: dashboard(),
|
||||
icon: LayoutGrid,
|
||||
},
|
||||
];
|
||||
|
||||
if (page.props.auth.user.is_admin) {
|
||||
items.push({
|
||||
title: 'Users',
|
||||
href: adminUsers(),
|
||||
icon: Shield,
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const footerNavItems: NavItem[] = [
|
||||
{
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
import { Shield, Users } from 'lucide-vue-next';
|
||||
import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { index as adminUsers } from '@/routes/admin/users';
|
||||
import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
|
||||
|
||||
defineProps<AdminUsersPageProps>();
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'User management',
|
||||
href: adminUsers(),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="breadcrumbs">
|
||||
<Head title="User management" />
|
||||
|
||||
<div class="flex flex-1 flex-col gap-6 p-4">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<Heading
|
||||
title="User management"
|
||||
description="Manage application-wide admin access for existing users."
|
||||
/>
|
||||
|
||||
<Badge variant="outline" class="gap-1.5 px-3 py-1">
|
||||
<Users class="size-3.5" />
|
||||
Admin-only area
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="status"
|
||||
class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
|
||||
>
|
||||
{{ status }}
|
||||
</div>
|
||||
|
||||
<Card class="gap-0 overflow-hidden">
|
||||
<CardHeader class="border-b">
|
||||
<CardTitle>Users</CardTitle>
|
||||
<CardDescription>
|
||||
Promote trusted users to platform admins or remove admin
|
||||
access when it is no longer needed.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="p-0">
|
||||
<div
|
||||
v-if="users.length === 0"
|
||||
class="p-6 text-sm text-muted-foreground"
|
||||
>
|
||||
No users exist yet.
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table
|
||||
class="min-w-full divide-y divide-border text-sm"
|
||||
>
|
||||
<thead
|
||||
class="bg-muted/40 text-left text-muted-foreground"
|
||||
>
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium">User</th>
|
||||
<th class="px-4 py-3 font-medium">Email</th>
|
||||
<th class="px-4 py-3 font-medium">Role</th>
|
||||
<th
|
||||
class="px-4 py-3 text-right font-medium"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border">
|
||||
<tr
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="bg-background"
|
||||
>
|
||||
<td class="px-4 py-4">
|
||||
<div
|
||||
class="font-medium text-foreground"
|
||||
>
|
||||
{{ user.name }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 text-muted-foreground">
|
||||
{{ user.email }}
|
||||
</td>
|
||||
<td class="px-4 py-4">
|
||||
<Badge
|
||||
:variant="
|
||||
user.is_admin
|
||||
? 'default'
|
||||
: 'secondary'
|
||||
"
|
||||
class="gap-1.5"
|
||||
>
|
||||
<Shield class="size-3.5" />
|
||||
{{
|
||||
user.is_admin ? 'Admin' : 'User'
|
||||
}}
|
||||
</Badge>
|
||||
</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex justify-end">
|
||||
<Form
|
||||
v-bind="
|
||||
UserManagementController.update.form(
|
||||
user.id,
|
||||
)
|
||||
"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="is_admin"
|
||||
:value="
|
||||
user.is_admin
|
||||
? '0'
|
||||
: '1'
|
||||
"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
:variant="
|
||||
user.is_admin
|
||||
? 'outline'
|
||||
: 'default'
|
||||
"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{
|
||||
user.is_admin
|
||||
? 'Remove admin'
|
||||
: 'Make admin'
|
||||
}}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -1,13 +1,6 @@
|
||||
export type User = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
avatar?: string;
|
||||
email_verified_at: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
[key: string]: unknown;
|
||||
};
|
||||
import type { UserModel } from '@/types/models/user-model';
|
||||
|
||||
export type User = UserModel;
|
||||
|
||||
export type Auth = {
|
||||
user: User;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from './auth';
|
||||
export * from './navigation';
|
||||
export * from './page-props';
|
||||
export * from './ui';
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
export type UserModel = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
avatar?: string;
|
||||
email_verified_at: string | null;
|
||||
is_admin: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
[key: string]: unknown;
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import type { UserModel } from '@/types/models/user-model';
|
||||
|
||||
export type AdminUsersPageProps = {
|
||||
users: UserModel[];
|
||||
status?: string | null;
|
||||
};
|
||||
Reference in New Issue
Block a user