Neuaufbau des Repositories
This commit is contained in:
@@ -1,6 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
|
||||||
import { Plus, Edit2, Trash2 } from 'lucide-vue-next';
|
import { Plus, Edit2, Trash2 } from 'lucide-vue-next';
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
@@ -26,78 +25,76 @@ const deleteUser = (id: number) => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Head title="Users" />
|
<Head title="Users" />
|
||||||
<AdminLayout>
|
<div class="max-w-6xl mx-auto space-y-6">
|
||||||
<div class="max-w-6xl mx-auto space-y-6">
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
<div>
|
||||||
<div>
|
<h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">User Management</h1>
|
||||||
<h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">User Management</h1>
|
<p class="text-gray-400 text-sm">Manage admin and moderator accounts</p>
|
||||||
<p class="text-gray-400 text-sm">Manage admin and moderator accounts</p>
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
href="/admin/users/create"
|
|
||||||
class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300"
|
|
||||||
>
|
|
||||||
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
|
||||||
<Plus class="w-5 h-5 relative z-10" />
|
|
||||||
<span class="relative z-10">Add User</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/admin/users/create"
|
||||||
|
class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300"
|
||||||
|
>
|
||||||
|
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
||||||
|
<Plus class="w-5 h-5 relative z-10" />
|
||||||
|
<span class="relative z-10">Add User</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bg-[#0f172a] rounded-2xl border border-white/5 overflow-hidden shadow-xl">
|
<div class="bg-[#0f172a] rounded-2xl border border-white/5 overflow-hidden shadow-xl">
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full text-left border-collapse">
|
<table class="w-full text-left border-collapse">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="bg-black/20 border-b border-white/5 text-gray-400 text-xs uppercase tracking-wider">
|
<tr class="bg-black/20 border-b border-white/5 text-gray-400 text-xs uppercase tracking-wider">
|
||||||
<th class="p-4 font-bold">ID</th>
|
<th class="p-4 font-bold">ID</th>
|
||||||
<th class="p-4 font-bold">Name</th>
|
<th class="p-4 font-bold">Name</th>
|
||||||
<th class="p-4 font-bold">Email</th>
|
<th class="p-4 font-bold">Email</th>
|
||||||
<th class="p-4 font-bold">Role</th>
|
<th class="p-4 font-bold">Role</th>
|
||||||
<th class="p-4 font-bold text-right">Actions</th>
|
<th class="p-4 font-bold text-right">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-white/5">
|
<tbody class="divide-y divide-white/5">
|
||||||
<tr v-for="user in users" :key="user.id" class="hover:bg-white/[0.02] transition-colors">
|
<tr v-for="user in users" :key="user.id" class="hover:bg-white/[0.02] transition-colors">
|
||||||
<td class="p-4 text-gray-500 font-mono text-sm">#{{ user.id }}</td>
|
<td class="p-4 text-gray-500 font-mono text-sm">#{{ user.id }}</td>
|
||||||
<td class="p-4 font-bold text-white">{{ user.name }}</td>
|
<td class="p-4 font-bold text-white">{{ user.name }}</td>
|
||||||
<td class="p-4 text-gray-400">{{ user.email }}</td>
|
<td class="p-4 text-gray-400">{{ user.email }}</td>
|
||||||
<td class="p-4">
|
<td class="p-4">
|
||||||
<span
|
<span
|
||||||
:class="[
|
:class="[
|
||||||
'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider',
|
'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider',
|
||||||
user.role === 'admin' ? 'bg-red-500/20 text-red-400 border border-red-500/20' :
|
user.role === 'admin' ? 'bg-red-500/20 text-red-400 border border-red-500/20' :
|
||||||
user.role === 'mod' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/20' :
|
user.role === 'mod' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/20' :
|
||||||
'bg-gray-500/20 text-gray-400 border border-gray-500/20'
|
'bg-gray-500/20 text-gray-400 border border-gray-500/20'
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
{{ user.role }}
|
{{ user.role }}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="p-4 text-right space-x-2">
|
<td class="p-4 text-right space-x-2">
|
||||||
<Link
|
<Link
|
||||||
:href="`/admin/users/${user.id}/edit`"
|
:href="`/admin/users/${user.id}/edit`"
|
||||||
class="inline-flex p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
|
class="inline-flex p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
|
||||||
title="Edit"
|
title="Edit"
|
||||||
>
|
>
|
||||||
<Edit2 class="w-4 h-4" />
|
<Edit2 class="w-4 h-4" />
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
<button
|
||||||
@click="deleteUser(user.id)"
|
@click="deleteUser(user.id)"
|
||||||
class="inline-flex p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
class="inline-flex p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||||
title="Delete"
|
title="Delete"
|
||||||
>
|
>
|
||||||
<Trash2 class="w-4 h-4" />
|
<Trash2 class="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-if="users.length === 0">
|
<tr v-if="users.length === 0">
|
||||||
<td colspan="5" class="p-8 text-center text-gray-500">
|
<td colspan="5" class="p-8 text-center text-gray-500">
|
||||||
No users found.
|
No users found.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AdminLayout>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user