Samir Boulahtit
7e68b93132
- Add /admin/admin-users routes for managing admin users (super admin only) - Remove vendor role from user creation form (vendors created via company hierarchy) - Add admin-users.html and admin-user-detail.html templates - Add admin-users.js and admin-user-detail.js for frontend logic - Move database operations to admin_platform_service (list, get, create, delete, toggle status) - Update sidebar to show Admin Users section only for super admins - Add isSuperAdmin computed property to init-alpine.js - Fix /api/v1 prefix issues in JS files (apiClient already adds prefix) - Update architecture rule JS-012 to catch more variable patterns (url, endpoint, path) - Replace inline SVGs with $icon() helper in select-platform.html Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
239 lines
12 KiB
HTML
239 lines
12 KiB
HTML
{# app/templates/admin/admin-user-detail.html #}
|
|
{% extends "admin/base.html" %}
|
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
|
{% from 'shared/macros/headers.html' import detail_page_header %}
|
|
|
|
{% block title %}Admin User Details{% endblock %}
|
|
|
|
{% block alpine_data %}adminUserDetailPage(){% endblock %}
|
|
|
|
{% block content %}
|
|
{% call detail_page_header("adminUser?.full_name || adminUser?.username || 'Admin User Details'", '/admin/admin-users', subtitle_show='adminUser') %}
|
|
@<span x-text="adminUser?.username"></span>
|
|
<span class="text-gray-400 mx-2">|</span>
|
|
<span x-text="adminUser?.email"></span>
|
|
{% endcall %}
|
|
|
|
{{ loading_state('Loading admin user details...') }}
|
|
|
|
{{ error_state('Error loading admin user') }}
|
|
|
|
<!-- Admin User Details -->
|
|
<div x-show="!loading && adminUser">
|
|
<!-- Quick Actions Card -->
|
|
<div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Quick Actions
|
|
</h3>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<a
|
|
:href="`/admin/admin-users/${userId}/edit`"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
|
<span x-html="$icon('edit', 'w-4 h-4 mr-2')"></span>
|
|
Edit Admin User
|
|
</a>
|
|
<button
|
|
@click="toggleStatus()"
|
|
:disabled="saving || adminUser?.id === currentUserId"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
:class="adminUser?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'"
|
|
:title="adminUser?.id === currentUserId ? 'Cannot deactivate yourself' : ''">
|
|
<span x-html="$icon(adminUser?.is_active ? 'user-x' : 'user-check', 'w-4 h-4 mr-2')"></span>
|
|
<span x-text="adminUser?.is_active ? 'Deactivate' : 'Activate'"></span>
|
|
</button>
|
|
<button
|
|
@click="deleteAdminUser()"
|
|
:disabled="saving || adminUser?.id === currentUserId"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50 disabled:cursor-not-allowed"
|
|
:title="adminUser?.id === currentUserId ? 'Cannot delete yourself' : 'Delete admin user'">
|
|
<span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
|
|
Delete Admin User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Cards -->
|
|
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
|
<!-- Admin Type -->
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 rounded-full"
|
|
:class="adminUser?.is_super_admin
|
|
? 'text-orange-500 bg-orange-100 dark:text-orange-100 dark:bg-orange-500'
|
|
: 'text-purple-500 bg-purple-100 dark:text-purple-100 dark:bg-purple-500'">
|
|
<span x-html="$icon(adminUser?.is_super_admin ? 'star' : 'shield', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Admin Type
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="adminUser?.is_super_admin ? 'Super Admin' : 'Platform Admin'">
|
|
-
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Status -->
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 rounded-full"
|
|
:class="adminUser?.is_active ? 'text-green-500 bg-green-100 dark:text-green-100 dark:bg-green-500' : 'text-red-500 bg-red-100 dark:text-red-100 dark:bg-red-500'">
|
|
<span x-html="$icon(adminUser?.is_active ? 'check-circle' : 'x-circle', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Status
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="adminUser?.is_active ? 'Active' : 'Inactive'">
|
|
-
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platforms Access -->
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
|
|
<span x-html="$icon('globe-alt', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Platforms
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="adminUser?.is_super_admin ? 'All' : ((adminUser?.platforms || []).length || 0)">
|
|
0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Created Date -->
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
|
<span x-html="$icon('calendar', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Created
|
|
</p>
|
|
<p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="formatDate(adminUser?.created_at)">
|
|
-
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Info Cards -->
|
|
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
|
<!-- Account Information -->
|
|
<div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Account Information
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Username</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300">@<span x-text="adminUser?.username || '-'"></span></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Email</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.email || '-'">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Email Verified</p>
|
|
<span
|
|
class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full"
|
|
:class="adminUser?.is_email_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100'"
|
|
x-text="adminUser?.is_email_verified ? 'Verified' : 'Not Verified'">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Information -->
|
|
<div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Personal Information
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Full Name</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.full_name || 'Not provided'">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">First Name</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.first_name || 'Not provided'">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Last Name</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.last_name || 'Not provided'">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform Access (for platform admins) -->
|
|
<template x-if="!adminUser?.is_super_admin">
|
|
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Platform Access
|
|
</h3>
|
|
<template x-if="(adminUser?.platforms || []).length === 0">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">No platforms assigned. This admin cannot access any platform.</p>
|
|
</template>
|
|
<template x-if="(adminUser?.platforms || []).length > 0">
|
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<template x-for="platform in (adminUser?.platforms || [])" :key="platform.id">
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
|
|
<div class="p-2 mr-3 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-600">
|
|
<span x-html="$icon('globe-alt', 'w-4 h-4')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="platform.name"></p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400" x-text="platform.code"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Super Admin Notice -->
|
|
<template x-if="adminUser?.is_super_admin">
|
|
<div class="px-4 py-3 mb-8 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
|
|
<div class="flex items-center">
|
|
<span x-html="$icon('star', 'w-5 h-5 text-orange-500 mr-3')"></span>
|
|
<div>
|
|
<h4 class="text-sm font-medium text-orange-800 dark:text-orange-300">Super Admin Access</h4>
|
|
<p class="text-sm text-orange-600 dark:text-orange-400">
|
|
This user has full access to all platforms and can manage other admin users.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Activity Information -->
|
|
<div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Activity Information
|
|
</h3>
|
|
<div class="grid gap-6 md:grid-cols-3">
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Last Login</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.last_login ? formatDate(adminUser.last_login) : 'Never'">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Created At</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(adminUser?.created_at)">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Last Updated</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(adminUser?.updated_at)">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='admin/js/admin-user-detail.js') }}"></script>
|
|
{% endblock %}
|