Samir Boulahtit
9a828999fe
- Add AdminMenuConfig model for per-platform menu customization - Add menu registry for centralized menu configuration - Add my-menu-config and platform-menu-config admin pages - Update sidebar with improved layout and Alpine.js interactions - Add FrontendType enum for admin/vendor menu separation - Document self-contained module patterns in session note Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
175 lines
8.8 KiB
HTML
175 lines
8.8 KiB
HTML
{# app/templates/admin/my-menu-config.html #}
|
|
{% extends "admin/base.html" %}
|
|
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
|
|
{% from 'shared/macros/headers.html' import page_header %}
|
|
|
|
{% block title %}My Menu{% endblock %}
|
|
|
|
{% block alpine_data %}adminMyMenuConfig(){% endblock %}
|
|
|
|
{% block content %}
|
|
{{ page_header('My Menu Configuration', subtitle='Customize your personal admin sidebar', back_url='/admin/settings') }}
|
|
|
|
{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
|
|
{{ error_state('Error', show_condition='error') }}
|
|
|
|
<!-- Info Box -->
|
|
<div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3')"></span>
|
|
<div>
|
|
<p class="text-sm text-blue-800 dark:text-blue-200">
|
|
This configures <strong>your personal</strong> admin sidebar menu. These settings only affect your view.
|
|
</p>
|
|
<p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
|
To configure menus for platform admins or vendors, go to <a href="/admin/platforms" class="underline hover:no-underline">Platforms</a> and select a platform's Menu Configuration.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="grid gap-4 mb-6 md:grid-cols-3">
|
|
<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('view-grid', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Total Items</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="menuConfig?.total_items || 0"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
|
|
<span x-html="$icon('eye', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Visible</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="menuConfig?.visible_items || 0"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-gray-500 bg-gray-100 rounded-full dark:text-gray-100 dark:bg-gray-600">
|
|
<span x-html="$icon('eye-off', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Hidden</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="menuConfig?.hidden_items || 0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
Toggle visibility for menu items. Mandatory items cannot be hidden.
|
|
</p>
|
|
<div class="flex gap-2">
|
|
<button
|
|
@click="showAll()"
|
|
:disabled="saving"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
|
|
Show All
|
|
</button>
|
|
<button
|
|
@click="resetToDefaults()"
|
|
:disabled="saving"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<span x-html="$icon('eye-off', 'w-4 h-4 mr-2')"></span>
|
|
Hide All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div x-show="loading" class="flex items-center justify-center py-12 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<span x-html="$icon('refresh', 'w-8 h-8 animate-spin text-purple-600')"></span>
|
|
<span class="ml-3 text-gray-500 dark:text-gray-400">Loading menu configuration...</span>
|
|
</div>
|
|
|
|
<!-- Menu Items by Section -->
|
|
<div x-show="!loading" class="space-y-6">
|
|
<template x-for="section in groupedItems" :key="section.id">
|
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
|
<!-- Section Header -->
|
|
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="section.label || 'Main'"></h3>
|
|
<span
|
|
x-show="section.isSuperAdminOnly"
|
|
class="ml-2 px-2 py-0.5 text-xs font-medium rounded bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
|
|
>
|
|
Super Admin Only
|
|
</span>
|
|
</div>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400" x-text="`${section.visibleCount}/${section.items.length} visible`"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Items -->
|
|
<div class="divide-y divide-gray-100 dark:divide-gray-700">
|
|
<template x-for="item in section.items" :key="item.id">
|
|
<div class="flex items-center justify-between px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/30">
|
|
<div class="flex items-center">
|
|
<span x-html="$icon(item.icon, 'w-5 h-5 text-gray-400 mr-3')"></span>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="item.label"></p>
|
|
<p class="text-xs text-gray-400 dark:text-gray-500" x-text="item.url"></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<!-- Mandatory Badge -->
|
|
<span
|
|
x-show="item.is_mandatory"
|
|
class="px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
|
|
>
|
|
Mandatory
|
|
</span>
|
|
|
|
<!-- Toggle Switch -->
|
|
<button
|
|
@click="toggleVisibility(item)"
|
|
:disabled="item.is_mandatory || saving"
|
|
:class="{
|
|
'bg-purple-600': item.is_visible,
|
|
'bg-gray-200 dark:bg-gray-600': !item.is_visible,
|
|
'opacity-50 cursor-not-allowed': item.is_mandatory
|
|
}"
|
|
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
|
|
role="switch"
|
|
:aria-checked="item.is_visible"
|
|
>
|
|
<span
|
|
:class="{
|
|
'translate-x-5': item.is_visible,
|
|
'translate-x-0': !item.is_visible
|
|
}"
|
|
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Empty State -->
|
|
<div x-show="groupedItems.length === 0" class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-8 text-center">
|
|
<span x-html="$icon('view-grid', 'w-12 h-12 mx-auto text-gray-400')"></span>
|
|
<p class="mt-4 text-gray-500 dark:text-gray-400">No menu items available.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='admin/js/my-menu-config.js') }}"></script>
|
|
{% endblock %}
|