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

103
app/templates/admin/company-edit.html
View File

@@ -1,33 +1,19 @@
{# app/templates/admin/company-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state %}
{% from 'shared/macros/inputs.html' import search_autocomplete, selected_item_display %}
{% from 'shared/macros/headers.html' import edit_page_header %}
{% block title %}Edit Company{% endblock %}
{% block alpine_data %}adminCompanyEdit(){% 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">
Edit Company
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="company">
<span x-text="company?.name"></span>
</p>
</div>
<a href="/admin/companies"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Companies
</a>
</div>
{% call edit_page_header('Edit Company', '/admin/companies', subtitle_show='company', back_label='Back to Companies') %}
<span x-text="company?.name"></span>
{% endcall %}
<!-- Loading State -->
<div x-show="loadingCompany" 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 company...</p>
</div>
{{ loading_state('Loading company...', show_condition='loadingCompany') }}
<!-- Edit Form -->
<div x-show="!loadingCompany && company">
@@ -322,6 +308,7 @@
</p>
</div>
{# noqa: FE-004 - Complex form modal with dynamic user search and transfer functionality #}
<!-- Transfer Ownership Modal -->
<div
x-show="showTransferOwnershipModal"
@@ -364,60 +351,26 @@
<span class="text-gray-700 dark:text-gray-400">
New Owner <span class="text-red-600">*</span>
</span>
<div class="relative">
<input
type="text"
x-model="userSearchQuery"
@input="searchUsers()"
@focus="showUserDropdown = true"
:disabled="transferring"
placeholder="Search by name or email..."
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
>
<!-- Search Results Dropdown -->
<div
x-show="showUserDropdown && userSearchResults.length > 0"
x-cloak
@click.away="showUserDropdown = false"
class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"
>
<template x-for="user in userSearchResults" :key="user.id">
<button
type="button"
@click="selectUser(user)"
class="w-full px-4 py-2 text-left text-sm hover:bg-purple-50 dark:hover:bg-gray-600 focus:outline-none"
:class="{ 'bg-purple-50 dark:bg-gray-600': transferData.new_owner_user_id === user.id }"
>
<div class="font-medium text-gray-700 dark:text-gray-200" x-text="user.username"></div>
<div class="text-xs text-gray-500 dark:text-gray-400" x-text="user.email"></div>
</button>
</template>
</div>
<!-- No Results -->
<div
x-show="showUserDropdown && userSearchQuery.length >= 2 && userSearchResults.length === 0 && !searchingUsers"
class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
>
No users found
</div>
<!-- Loading -->
<div
x-show="searchingUsers"
class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
>
<span x-html="$icon('spinner', 'w-4 h-4 inline mr-2')"></span>
Searching...
</div>
</div>
<!-- Selected User Display -->
<div x-show="selectedUser" class="mt-2 p-2 bg-purple-50 dark:bg-purple-900 rounded-lg text-sm">
<span class="text-purple-700 dark:text-purple-300">
Selected: <strong x-text="selectedUser?.username"></strong> (<span x-text="selectedUser?.email"></span>)
</span>
<button type="button" @click="clearSelectedUser()" class="ml-2 text-purple-600 hover:text-purple-800 dark:text-purple-400">
<span x-html="$icon('x', 'w-4 h-4 inline')"></span>
</button>
</div>
{{ search_autocomplete(
search_var='userSearchQuery',
results_var='userSearchResults',
show_dropdown_var='showUserDropdown',
loading_var='searchingUsers',
disabled_var='transferring',
search_action='searchUsers()',
select_action='selectUser(item)',
selected_check='transferData.new_owner_user_id === item.id',
display_field='username',
secondary_field='email',
placeholder='Search by name or email...',
no_results_text='No users found'
) }}
{{ selected_item_display(
selected_var='selectedUser',
display_field='username',
secondary_field='email',
clear_action='clearSelectedUser()'
) }}
<span class="text-xs text-gray-500 dark:text-gray-400 mt-1">
Current owner: <span x-text="company?.owner_username || 'User ID ' + company?.owner_user_id"></span>
</span>