sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: standardize admin templates with shared macros

Browse Source 
Migrate all admin templates to use standardized components:
- Use tabs macros (tabs_nav, tab_button) for tab navigation
- Use number_stepper for quantity/numeric inputs
- Use headers macros for consistent page layouts
- Use modals macros for dialog components

Affected pages: dashboard, settings, logs, content-pages, companies,
vendors, users, imports, marketplace, code-quality, and more.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-07 17:04:43 +01:00
parent 2ec150e8a5
commit bb2e5fd260
31 changed files with 261 additions and 1290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/templates/admin/content-pages.html
View File

@@ -1,75 +1,29 @@
{# app/templates/admin/content-pages.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tabs.html' import tabs_inline, tab_button %}
{% block title %}Content Pages{% endblock %}
{% block alpine_data %}contentPagesManager(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<div>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Content Pages
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Manage platform defaults and vendor-specific content pages
</p>
</div>
<a
href="/admin/content-pages/create"
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('plus', 'w-4 h-4 mr-2')"></span>
Create Page
</a>
</div>
{{ page_header('Content Pages', subtitle='Manage platform defaults and vendor-specific content pages', action_label='Create Page', action_url='/admin/content-pages/create') }}
<!-- Loading State -->
<div x-show="loading" class="text-center py-12">
<span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
<p class="mt-2 text-gray-600 dark:text-gray-400">Loading pages...</p>
</div>
{{ loading_state('Loading pages...') }}
<!-- Error State -->
<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
<span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
<div>
<p class="font-semibold">Error loading pages</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading pages') }}
<!-- Tabs and Filters -->
<div x-show="!loading" class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<!-- Tabs -->
<div class="flex space-x-2 border-b border-gray-200 dark:border-gray-700">
<button
@click="activeTab = 'all'"
class="px-4 py-2 text-sm font-medium transition-colors"
:class="activeTab === 'all' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
>
All Pages
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="allPages.length"></span>
</button>
<button
@click="activeTab = 'platform'"
class="px-4 py-2 text-sm font-medium transition-colors"
:class="activeTab === 'platform' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
>
Platform Defaults
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="platformPages.length"></span>
</button>
<button
@click="activeTab = 'vendor'"
class="px-4 py-2 text-sm font-medium transition-colors"
:class="activeTab === 'vendor' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
>
Vendor Overrides
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="vendorPages.length"></span>
</button>
</div>
{% call tabs_inline() %}
{{ tab_button('all', 'All Pages', count_var='allPages.length') }}
{{ tab_button('platform', 'Platform Defaults', count_var='platformPages.length') }}
{{ tab_button('vendor', 'Vendor Overrides', count_var='vendorPages.length') }}
{% endcall %}
<!-- Search -->
<div class="relative">