final frontend

This commit is contained in:
Edd
2026-01-23 20:04:46 +00:00
parent 3838f3ff7a
commit e38613ca6b
6 changed files with 466 additions and 563 deletions
+10 -14
View File
@@ -202,11 +202,9 @@
<span
class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-bold border capitalize"
:class="{
'bg-purple-100 border-purple-200 text-purple-700 dark:bg-purple-900/20 dark:border-purple-800 dark:text-purple-300': user.role === 'ADMIN',
'bg-blue-100 border-blue-200 text-blue-700 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-300': user.role === 'TEACHER',
'bg-emerald-100 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300': user.role === 'RESEARCHER',
'bg-amber-100 border-amber-200 text-amber-700 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-300': user.role === 'COLLABORATOR',
'bg-slate-100 border-slate-200 text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300': user.role === 'STUDENT'
'bg-purple-100 border-purple-200 text-purple-700 dark:bg-purple-900/20 dark:border-purple-800 dark:text-purple-300': user.role === 'ADMINISTRATOR',
'bg-emerald-100 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300': user.role === 'MODERATOR',
'bg-amber-100 border-amber-200 text-amber-700 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-300': user.role === 'COLLABORATOR'
}">
{{ user.role.toLowerCase() }}
</span>
@@ -276,7 +274,7 @@
<div
class="w-1.5 h-8 bg-gradient-to-b from-blue-600 to-indigo-600 rounded-full" />
<h3 class="text-xl font-bold text-slate-900 dark:text-white">{{ isEditing ?
'Edit User Details' : 'Create New User' }}</h3>
'Edit User Details' : 'Create' }}</h3>
</div>
<button class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
@click="closeModal"><svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
@@ -313,10 +311,8 @@
<div class="relative">
<select v-model="formData.role"
class="w-full appearance-none px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-all cursor-pointer">
<option value="STUDENT">Student</option>
<option value="TEACHER">Teacher</option>
<option value="COLLABORATOR">Collaborator</option>
<option value="RESEARCHER">Researcher</option>
<option value="MODERATOR">Moderator</option>
<option value="ADMIN">Admin</option>
</select>
<svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 pointer-events-none"
@@ -372,7 +368,7 @@
<button
class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all"
@click="handleSubmit">{{
isEditing ? 'Save Changes' : 'Create Account' }}</button>
isEditing ? 'Save Changes' : 'Create' }}</button>
<button
class="px-8 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all"
@click="closeModal">Cancel</button>
@@ -462,7 +458,7 @@
class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">{{
item.action.replace('_', ' ') }}</span>
<span class="text-xs text-slate-400 font-medium">{{ item.target_type
}} #{{ item.target_id }}</span>
}} #{{ item.target_id }}</span>
</div>
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{
item.details }}</p>
@@ -558,7 +554,7 @@ const formData = reactive({
name: '',
email: '',
password: '',
role: 'STUDENT',
role: 'COLLABORATOR',
is_active: true
});
@@ -572,7 +568,7 @@ const filteredUsers = computed(() => {
});
const activeCount = computed(() => users.value.filter(u => u.is_active).length);
const adminCount = computed(() => users.value.filter(u => u.role === 'ADMIN').length);
const adminCount = computed(() => users.value.filter(u => u.role === 'ADMINISTRATOR').length);
const fetchUsers = async () => {
loading.value = true;
@@ -701,7 +697,7 @@ const resetForm = () => {
formData.name = '';
formData.email = '';
formData.password = '';
formData.role = 'STUDENT';
formData.role = 'COLLABORATOR';
formData.is_active = true;
};