feat: add admin menu configuration and sidebar improvements

- 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>

app/templates/admin/my-menu-config.html

@@ -0,0 +1,174 @@
+{# 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 %}

app/templates/admin/partials/sidebar.html

@@ -38,9 +38,9 @@
 </ul>
 {% endmacro %}
 
-{# Macro for menu item #}
+{# Macro for menu item with visibility check #}
 {% macro menu_item(page_id, url, icon, label) %}
-<li class="relative px-6 py-3">
+<li x-show="isMenuItemVisible('{{ page_id }}')" class="relative px-6 py-3">
     <span x-show="currentPage === '{{ page_id }}'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
     <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
        :class="currentPage === '{{ page_id }}' ? 'text-gray-800 dark:text-gray-100' : ''"
@@ -56,7 +56,7 @@
    ============================================================================ #}
 
 {% macro sidebar_content() %}
-<div class="py-4 text-gray-500 dark:text-gray-400">
+<div class="py-4 text-gray-500 dark:text-gray-400" x-init="loadMenuConfig()">
     <a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200" href="/admin/dashboard">
         Admin Portal
     </a>
@@ -77,80 +77,110 @@
     </template>
 
     <!-- Platform Administration Section -->
-    {{ section_header('Platform Administration', 'platformAdmin') }}
-    {% call section_content('platformAdmin') %}
-        {{ menu_item('companies', '/admin/companies', 'office-building', 'Companies') }}
-        {{ menu_item('vendors', '/admin/vendors', 'shopping-bag', 'Vendors') }}
-        {{ menu_item('messages', '/admin/messages', 'chat-bubble-left-right', 'Messages') }}
-    {% endcall %}
+    <div x-show="isSectionVisible('platformAdmin')">
+        {{ section_header('Platform Administration', 'platformAdmin') }}
+        {% call section_content('platformAdmin') %}
+            {{ menu_item('companies', '/admin/companies', 'office-building', 'Companies') }}
+            {{ menu_item('vendors', '/admin/vendors', 'shopping-bag', 'Vendors') }}
+            {{ menu_item('messages', '/admin/messages', 'chat-bubble-left-right', 'Messages') }}
+        {% endcall %}
+    </div>
 
     <!-- Vendor Operations Section -->
-    {{ section_header('Vendor Operations', 'vendorOps') }}
-    {% call section_content('vendorOps') %}
-        {{ menu_item('vendor-products', '/admin/vendor-products', 'cube', 'Products') }}
-        {{ menu_item('customers', '/admin/customers', 'user-group', 'Customers') }}
-        {{ menu_item('inventory', '/admin/inventory', 'archive', 'Inventory') }}
-        {{ menu_item('orders', '/admin/orders', 'clipboard-list', 'Orders') }}
-        {# Future items - uncomment when implemented:
-        {{ menu_item('shipping', '/admin/shipping', 'truck', 'Shipping') }}
-        #}
-    {% endcall %}
+    <div x-show="isSectionVisible('vendorOps')">
+        {{ section_header('Vendor Operations', 'vendorOps') }}
+        {% call section_content('vendorOps') %}
+            {{ menu_item('vendor-products', '/admin/vendor-products', 'cube', 'Products') }}
+            {{ menu_item('customers', '/admin/customers', 'user-group', 'Customers') }}
+            {{ menu_item('inventory', '/admin/inventory', 'archive', 'Inventory') }}
+            {{ menu_item('orders', '/admin/orders', 'clipboard-list', 'Orders') }}
+            {# Future items - uncomment when implemented:
+            {{ menu_item('shipping', '/admin/shipping', 'truck', 'Shipping') }}
+            #}
+        {% endcall %}
+    </div>
 
     <!-- Marketplace Section -->
-    {{ section_header('Marketplace', 'marketplace') }}
-    {% call section_content('marketplace') %}
-        {{ menu_item('marketplace-letzshop', '/admin/marketplace/letzshop', 'shopping-cart', 'Letzshop') }}
-    {% endcall %}
+    <div x-show="isSectionVisible('marketplace')">
+        {{ section_header('Marketplace', 'marketplace') }}
+        {% call section_content('marketplace') %}
+            {{ menu_item('marketplace-letzshop', '/admin/marketplace/letzshop', 'shopping-cart', 'Letzshop') }}
+        {% endcall %}
+    </div>
 
     <!-- Billing & Subscriptions Section -->
-    {{ section_header('Billing & Subscriptions', 'billing') }}
-    {% call section_content('billing') %}
-        {{ menu_item('subscription-tiers', '/admin/subscription-tiers', 'tag', 'Subscription Tiers') }}
-        {{ menu_item('subscriptions', '/admin/subscriptions', 'credit-card', 'Vendor Subscriptions') }}
-        {{ menu_item('billing-history', '/admin/billing-history', 'document-text', 'Billing History') }}
-    {% endcall %}
+    <div x-show="isSectionVisible('billing')">
+        {{ section_header('Billing & Subscriptions', 'billing') }}
+        {% call section_content('billing') %}
+            {{ menu_item('subscription-tiers', '/admin/subscription-tiers', 'tag', 'Subscription Tiers') }}
+            {{ menu_item('subscriptions', '/admin/subscriptions', 'credit-card', 'Vendor Subscriptions') }}
+            {{ menu_item('billing-history', '/admin/billing-history', 'document-text', 'Billing History') }}
+        {% endcall %}
+    </div>
 
     <!-- Content Management Section -->
-    {{ section_header('Content Management', 'contentMgmt') }}
-    {% call section_content('contentMgmt') %}
-        {{ menu_item('platforms', '/admin/platforms', 'globe-alt', 'Platforms') }}
-        {{ menu_item('content-pages', '/admin/content-pages', 'document-text', 'Content Pages') }}
-        {{ menu_item('vendor-theme', '/admin/vendor-themes', 'color-swatch', 'Vendor Themes') }}
-    {% endcall %}
+    <div x-show="isSectionVisible('contentMgmt')">
+        {{ section_header('Content Management', 'contentMgmt') }}
+        {% call section_content('contentMgmt') %}
+            {{ menu_item('platforms', '/admin/platforms', 'globe-alt', 'Platforms') }}
+            {{ menu_item('content-pages', '/admin/content-pages', 'document-text', 'Content Pages') }}
+            {{ menu_item('vendor-themes', '/admin/vendor-themes', 'color-swatch', 'Vendor Themes') }}
+        {% endcall %}
+    </div>
 
     <!-- Developer Tools Section -->
-    {{ section_header('Developer Tools', 'devTools') }}
-    {% call section_content('devTools') %}
-        {{ menu_item('components', '/admin/components', 'view-grid', 'Components') }}
-        {{ menu_item('icons', '/admin/icons', 'photograph', 'Icons') }}
-    {% endcall %}
+    <div x-show="isSectionVisible('devTools')">
+        {{ section_header('Developer Tools', 'devTools') }}
+        {% call section_content('devTools') %}
+            {{ menu_item('components', '/admin/components', 'view-grid', 'Components') }}
+            {{ menu_item('icons', '/admin/icons', 'photograph', 'Icons') }}
+        {% endcall %}
+    </div>
 
     <!-- Platform Health Section -->
-    {{ section_header('Platform Health', 'platformHealth') }}
-    {% call section_content('platformHealth') %}
-        {{ menu_item('platform-health', '/admin/platform-health', 'chart-bar', 'Capacity Monitor') }}
-        {{ menu_item('testing', '/admin/testing', 'beaker', 'Testing Hub') }}
-        {{ menu_item('code-quality', '/admin/code-quality', 'shield-check', 'Code Quality') }}
-    {% endcall %}
+    <div x-show="isSectionVisible('platformHealth')">
+        {{ section_header('Platform Health', 'platformHealth') }}
+        {% call section_content('platformHealth') %}
+            {{ menu_item('platform-health', '/admin/platform-health', 'chart-bar', 'Capacity Monitor') }}
+            {{ menu_item('testing', '/admin/testing', 'beaker', 'Testing Hub') }}
+            {{ menu_item('code-quality', '/admin/code-quality', 'shield-check', 'Code Quality') }}
+        {% endcall %}
+    </div>
 
     <!-- Platform Monitoring Section -->
-    {{ section_header('Platform Monitoring', 'monitoring') }}
-    {% call section_content('monitoring') %}
-        {{ menu_item('imports', '/admin/imports', 'cube', 'Import Jobs') }}
-        {{ menu_item('background-tasks', '/admin/background-tasks', 'collection', 'Background Tasks') }}
-        {{ menu_item('logs', '/admin/logs', 'document-text', 'Application Logs') }}
-        {{ menu_item('notifications', '/admin/notifications', 'bell', 'Notifications') }}
-    {% endcall %}
+    <div x-show="isSectionVisible('monitoring')">
+        {{ section_header('Platform Monitoring', 'monitoring') }}
+        {% call section_content('monitoring') %}
+            {{ menu_item('imports', '/admin/imports', 'cube', 'Import Jobs') }}
+            {{ menu_item('background-tasks', '/admin/background-tasks', 'collection', 'Background Tasks') }}
+            {{ menu_item('logs', '/admin/logs', 'document-text', 'Application Logs') }}
+            {{ menu_item('notifications', '/admin/notifications', 'bell', 'Notifications') }}
+        {% endcall %}
+    </div>
 
     <!-- Platform Settings Section -->
-    {{ section_header('Platform Settings', 'settingsSection') }}
-    {% call section_content('settingsSection') %}
-        {{ menu_item('settings', '/admin/settings', 'cog', 'General') }}
-        {{ menu_item('email-templates', '/admin/email-templates', 'mail', 'Email Templates') }}
-        {# TODO: Implement profile and API keys pages #}
-        {# {{ menu_item('profile', '/admin/profile', 'user-circle', 'Profile') }} #}
-        {# {{ menu_item('api-keys', '/admin/api-keys', 'key', 'API Keys') }} #}
-    {% endcall %}
+    <div x-show="isSectionVisible('settingsSection')">
+        {{ section_header('Platform Settings', 'settingsSection') }}
+        {% call section_content('settingsSection') %}
+            {{ menu_item('settings', '/admin/settings', 'cog', 'General') }}
+            {{ menu_item('email-templates', '/admin/email-templates', 'mail', 'Email Templates') }}
+            <!-- My Menu - super admin only (customize personal sidebar) -->
+            <template x-if="isSuperAdmin">
+                <li x-show="isMenuItemVisible('my-menu')" class="relative px-6 py-3">
+                    <span x-show="currentPage === 'my-menu'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                    <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                       :class="currentPage === 'my-menu' ? 'text-gray-800 dark:text-gray-100' : ''"
+                       href="/admin/my-menu">
+                        <span x-html="$icon('view-grid')"></span>
+                        <span class="ml-4">My Menu</span>
+                    </a>
+                </li>
+            </template>
+            {# TODO: Implement profile and API keys pages #}
+            {# {{ menu_item('profile', '/admin/profile', 'user-circle', 'Profile') }} #}
+            {# {{ menu_item('api-keys', '/admin/api-keys', 'key', 'API Keys') }} #}
+        {% endcall %}
+    </div>
 </div>
 {% endmacro %}
 

app/templates/admin/platform-menu-config.html

@@ -0,0 +1,200 @@
+{# app/templates/admin/platform-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 %}Menu Configuration{% endblock %}
+
+{% block alpine_data %}adminPlatformMenuConfig('{{ platform_code }}'){% endblock %}
+
+{% block content %}
+{{ page_header('Menu Configuration', back_url='/admin/platforms/' + platform_code) }}
+
+{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
+{{ error_state('Error', show_condition='error') }}
+
+<!-- Platform Info -->
+<div class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex items-center justify-between">
+        <div>
+            <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="platform?.name || 'Loading...'"></h2>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+                Configure which menu items are visible for admins and vendors on this platform.
+            </p>
+        </div>
+        <span class="px-3 py-1 text-sm font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200" x-text="platform?.code?.toUpperCase()"></span>
+    </div>
+</div>
+
+<!-- Frontend Type Tabs -->
+<div class="mb-6">
+    <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-1 w-fit">
+        <button
+            @click="frontendType = 'admin'; loadPlatformMenuConfig()"
+            :class="{
+                'bg-white dark:bg-gray-800 shadow': frontendType === 'admin',
+                'text-gray-600 dark:text-gray-400': frontendType !== 'admin'
+            }"
+            class="px-4 py-2 text-sm font-medium rounded-md transition-all"
+        >
+            <span x-html="$icon('shield', 'w-4 h-4 inline mr-2')"></span>
+            Admin Frontend
+        </button>
+        <button
+            @click="frontendType = 'vendor'; loadPlatformMenuConfig()"
+            :class="{
+                'bg-white dark:bg-gray-800 shadow': frontendType === 'vendor',
+                'text-gray-600 dark:text-gray-400': frontendType !== 'vendor'
+            }"
+            class="px-4 py-2 text-sm font-medium rounded-md transition-all"
+        >
+            <span x-html="$icon('shopping-bag', 'w-4 h-4 inline mr-2')"></span>
+            Vendor Frontend
+        </button>
+    </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 configured for this frontend type.</p>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/platform-menu-config.js') }}"></script>
+{% endblock %}