sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

60
app/templates/admin/code-quality-dashboard.html
View File

@@ -1,5 +1,7 @@
{# app/templates/admin/code-quality-dashboard.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button, action_button %}
{% block title %}Code Quality Dashboard{% endblock %}
@@ -10,60 +12,16 @@
{% endblock %}
{% block content %}
<!-- Page Header with Actions -->
<div class="flex items-center justify-between my-6">
<div>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Code Quality Dashboard
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Architecture validation and technical debt tracking
</p>
</div>
<div class="flex space-x-3">
<button
@click="refresh()"
:disabled="loading"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span>Refresh</span>
</button>
<button
@click="runScan()"
:disabled="scanning"
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!scanning" x-html="$icon('search', 'w-4 h-4 mr-2')"></span>
<span x-show="scanning" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="scanning ? 'Scanning...' : 'Run Scan'"></span>
</button>
</div>
</div>
{% call page_header_flex(title='Code Quality Dashboard', subtitle='Architecture validation and technical debt tracking') %}
{{ refresh_button(variant='secondary') }}
{{ action_button('Run Scan', 'Scanning...', 'scanning', 'runScan()', icon='search') }}
{% endcall %}
<!-- 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 dashboard...</p>
</div>
{{ loading_state('Loading dashboard...') }}
<!-- 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 dashboard</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading dashboard') }}
<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
<div>
<p class="font-semibold" x-text="successMessage"></p>
</div>
</div>
{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
<!-- Dashboard Content -->
<div x-show="!loading && !error">

35
app/templates/admin/code-quality-violation-detail.html
View File

@@ -1,5 +1,7 @@
{# app/templates/admin/code-quality-violation-detail.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% block title %}Violation Detail{% endblock %}
@@ -159,37 +161,11 @@ function codeQualityViolationDetail(violationId) {
{% 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">
Violation Details
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Review and manage architecture violation
</p>
</div>
<a href="/admin/code-quality/violations"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Violations
</a>
</div>
{{ page_header('Violation Details', subtitle='Review and manage architecture violation', back_url='/admin/code-quality/violations', back_label='Back to Violations') }}
<!-- 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 violation details...</p>
</div>
{{ loading_state('Loading violation details...') }}
<!-- 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 violation</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading violation') }}
<!-- Content -->
<div x-show="!loading && violation" class="grid gap-6 mb-8">
@@ -259,6 +235,7 @@ function codeQualityViolationDetail(violationId) {
<div class="mb-6" x-show="violation.status === 'open' || violation.status === 'assigned'">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Assign to User</label>
<div class="flex gap-2">
{# noqa: FE-008 - User ID is typed directly, not incremented #}
<input x-model="assignUserId"
type="number"
placeholder="User ID"

55
app/templates/admin/code-quality-violations.html
View File

@@ -1,6 +1,9 @@
{# app/templates/admin/code-quality-violations.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% block title %}Violations List{% endblock %}
@@ -11,37 +14,11 @@
{% 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">
Architecture Violations
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Review and manage code quality violations
</p>
</div>
<a href="/admin/code-quality"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Dashboard
</a>
</div>
{{ page_header('Architecture Violations', subtitle='Review and manage code quality violations', back_url='/admin/code-quality', back_label='Back to Dashboard') }}
<!-- 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 violations...</p>
</div>
{{ loading_state('Loading violations...') }}
<!-- 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 violations</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading violations') }}
<!-- Content -->
<div x-show="!loading">
@@ -106,20 +83,8 @@
</div>
<!-- Violations Table -->
<div class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Rule</th>
<th class="px-4 py-3">Severity</th>
<th class="px-4 py-3">File</th>
<th class="px-4 py-3">Line</th>
<th class="px-4 py-3">Message</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
{% call table_wrapper() %}
{{ table_header(['Rule', 'Severity', 'File', 'Line', 'Message', 'Status', 'Actions']) }}
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-if="violations.length === 0">
<tr>
@@ -191,9 +156,7 @@
</tr>
</template>
</tbody>
</table>
</div>
</div>
{% endcall %}
{{ pagination() }}
</div>

51
app/templates/admin/companies.html
View File

@@ -1,40 +1,20 @@
{# app/templates/admin/companies.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% block title %}Companies{% endblock %}
{% block alpine_data %}adminCompanies(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Company Management
</h2>
<a
href="/admin/companies/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 Company
</a>
</div>
{{ page_header('Company Management', action_label='Create Company', action_url='/admin/companies/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 companies...</p>
</div>
{{ loading_state('Loading companies...') }}
<!-- 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 companies</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading companies') }}
<!-- Stats Cards -->
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -156,19 +136,9 @@
</div>
<!-- Companies Table -->
<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Company</th>
<th class="px-4 py-3">Owner</th>
<th class="px-4 py-3">Vendors</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Created</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<div x-show="!loading">
{% call table_wrapper() %}
{{ table_header(['Company', 'Owner', 'Vendors', 'Status', 'Created', 'Actions']) }}
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<!-- Empty State -->
<template x-if="paginatedCompanies.length === 0">
@@ -268,8 +238,7 @@
</tr>
</template>
</tbody>
</table>
</div>
{% endcall %}
{{ pagination() }}
</div>

34
app/templates/admin/company-create.html
View File

@@ -1,31 +1,14 @@
{# app/templates/admin/company-create.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import error_state %}
{% block title %}Create Company{% endblock %}
{% block alpine_data %}adminCompanyCreate(){% 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">
Create New Company
</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Create a company account with an owner user
</p>
</div>
<a
href="/admin/companies"
class="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-500 focus:outline-none focus:shadow-outline-gray"
>
<span class="flex items-center">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Companies
</span>
</a>
</div>
{{ page_header('Create New Company', subtitle='Create a company account with an owner user', back_url='/admin/companies', back_label='Back to Companies') }}
<!-- Success Message -->
<div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
@@ -48,16 +31,7 @@
</div>
</div>
<!-- Error Message -->
<div x-show="errorMessage" x-cloak class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
<div class="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 Creating Company</p>
<p class="text-sm mt-1" x-text="errorMessage"></p>
</div>
</div>
</div>
{{ error_state('Error Creating Company', error_var='errorMessage', show_condition='errorMessage') }}
<!-- Create Company Form -->
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">

40
app/templates/admin/company-detail.html
View File

@@ -1,44 +1,22 @@
{# app/templates/admin/company-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 %}Company Details{% endblock %}
{% block alpine_data %}adminCompanyDetail(){% 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" x-text="company?.name || 'Company Details'">
Company Details
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="company">
ID: <span x-text="companyId"></span>
<span class="text-gray-400 mx-2">|</span>
<span x-text="company?.vendor_count || 0"></span> vendor(s)
</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
</a>
</div>
{% call detail_page_header("company?.name || 'Company Details'", '/admin/companies', subtitle_show='company') %}
ID: <span x-text="companyId"></span>
<span class="text-gray-400 mx-2">|</span>
<span x-text="company?.vendor_count || 0"></span> vendor(s)
{% endcall %}
<!-- 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 company details...</p>
</div>
{{ loading_state('Loading company details...') }}
<!-- 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 company</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading company') }}
<!-- Company Details -->
<div x-show="!loading && company">

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>

51
app/templates/admin/content-page-edit.html
View File

@@ -1,34 +1,29 @@
{# app/templates/admin/content-page-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
{% from 'shared/macros/headers.html' import page_header_flex, back_button, action_button %}
{% from 'shared/macros/inputs.html' import number_stepper %}
{% block title %}{% if page_id %}Edit{% else %}Create{% endif %} Content Page{% endblock %}
{% block alpine_data %}contentPageEditor({{ page_id if page_id else 'null' }}){% endblock %}
{% block content %}
<!-- Page Header -->
{# Dynamic title/subtitle and save button text based on create vs edit mode #}
<div class="flex items-center justify-between my-6">
<div>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
<span x-text="pageId ? 'Edit Content Page' : 'Create Content Page'"></span>
</h2>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="pageId ? 'Edit Content Page' : 'Create Content Page'"></h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
<span x-show="!pageId">Create a new platform default or vendor-specific page</span>
<span x-show="pageId">Modify an existing content page</span>
</p>
</div>
<div class="flex gap-2">
<a
href="/admin/content-pages"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:shadow-outline-purple"
>
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to List
</a>
<div class="flex items-center space-x-3">
{{ back_button('/admin/content-pages', 'Back to List') }}
<button
@click="savePage()"
:disabled="saving"
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 disabled:opacity-50 disabled:cursor-not-allowed"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 border rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed text-white bg-purple-600 border-transparent hover:bg-purple-700 focus:shadow-outline-purple"
>
<span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
@@ -37,28 +32,11 @@
</div>
</div>
<!-- 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 page...</p>
</div>
{{ loading_state('Loading page...') }}
<!-- 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</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error', show_condition='error && !loading') }}
<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
<div>
<p class="font-semibold" x-text="successMessage"></p>
</div>
</div>
{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
<!-- Main Form -->
<div x-show="!loading" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
@@ -217,12 +195,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Display Order
</label>
<input
type="number"
x-model.number="form.display_order"
min="0"
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
>
{{ number_stepper(model='form.display_order', min=0, max=100, step=1, label='Display Order') }}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Lower = first</p>
</div>

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

13
app/templates/admin/customers.html
View File

@@ -1,22 +1,13 @@
{# app/templates/admin/customers.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% block title %}Customers{% endblock %}
{% block alpine_data %}adminCustomers(){% 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">
Customers
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Manage platform customers
</p>
</div>
</div>
{{ page_header('Customers', subtitle='Manage platform customers') }}
<!-- Empty State -->
<div class="px-4 py-12 bg-white rounded-lg shadow-md dark:bg-gray-800">

51
app/templates/admin/dashboard.html
View File

@@ -1,41 +1,19 @@
{# app/templates/admin/dashboard.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/tables.html' import table_wrapper, table_header %}
{% block title %}Dashboard{% endblock %}
{% block alpine_data %}adminDashboard(){% endblock %}
{% block content %}
<!-- Page Header with Refresh Button -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Dashboard
</h2>
<button
@click="refresh()"
:disabled="loading"
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="loading ? 'Loading...' : 'Refresh'"></span>
</button>
</div>
{{ page_header('Dashboard', action_label='Refresh', action_onclick='refresh()', action_icon='refresh') }}
<!-- 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 dashboard...</p>
</div>
{{ loading_state('Loading dashboard...') }}
<!-- 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 dashboard</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading dashboard') }}
<!-- Stats Cards -->
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -101,17 +79,9 @@
</div>
<!-- Recent Vendors Table -->
<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Vendor</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Created</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<div x-show="!loading">
{% call table_wrapper() %}
{{ table_header(['Vendor', 'Status', 'Created', 'Actions']) }}
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-if="recentVendors.length === 0">
<tr>
@@ -162,8 +132,7 @@
</tr>
</template>
</tbody>
</table>
</div>
{% endcall %}
</div>
{% endblock %}

13
app/templates/admin/icons.html
View File

@@ -1,5 +1,6 @@
{# app/templates/admin/icons.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% block title %}Icons Browser{% endblock %}
@@ -7,17 +8,7 @@
{% block alpine_data %}adminIcons(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Icons Browser
</h2>
<a href="/admin/dashboard"
class="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:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Dashboard
</a>
</div>
{{ page_header('Icons Browser', back_url='/admin/dashboard', back_label='Back to Dashboard') }}
<!-- Introduction Card -->
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg p-6 mb-8">

171
app/templates/admin/imports.html
View File

@@ -1,6 +1,10 @@
{# app/templates/admin/imports.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{% from 'shared/macros/alerts.html' import error_state %}
{% from 'shared/macros/modals.html' import job_details_modal %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% block title %}Import Jobs - Platform Monitoring{% endblock %}
@@ -11,26 +15,9 @@
{% 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">
Platform Import Jobs
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
System-wide monitoring of all marketplace import jobs
</p>
</div>
<button
@click="refreshJobs()"
:disabled="loading"
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="loading ? 'Loading...' : 'Refresh'"></span>
</button>
</div>
{% call page_header_flex(title='Platform Import Jobs', subtitle='System-wide monitoring of all marketplace import jobs') %}
{{ refresh_button(onclick='refreshJobs()') }}
{% endcall %}
<!-- Stats Cards -->
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -95,14 +82,7 @@
</div>
</div>
<!-- Error Message -->
<div x-show="error" x-transition 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</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error', show_condition='error') }}
<!-- Filters -->
<div class="mb-4 bg-white rounded-lg shadow-xs dark:bg-gray-800 p-4">
@@ -201,22 +181,9 @@
</div>
<!-- Jobs Table -->
<div x-show="!loading && jobs.length > 0" class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Job ID</th>
<th class="px-4 py-3">Vendor</th>
<th class="px-4 py-3">Marketplace</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Progress</th>
<th class="px-4 py-3">Started</th>
<th class="px-4 py-3">Duration</th>
<th class="px-4 py-3">Created By</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<div x-show="!loading && jobs.length > 0">
{% call table_wrapper() %}
{{ table_header(['Job ID', 'Vendor', 'Marketplace', 'Status', 'Progress', 'Started', 'Duration', 'Created By', 'Actions']) }}
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-for="job in jobs" :key="job.id">
<tr class="text-gray-700 dark:text-gray-400">
@@ -286,123 +253,11 @@
</tr>
</template>
</tbody>
</table>
</div>
</div>
{% endcall %}
{{ pagination(show_condition="!loading && pagination.total > 0") }}
</div>
</div>
<!-- Job Details Modal (same as marketplace version) -->
<div x-show="showJobModal"
x-cloak
@click.away="closeJobModal()"
class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div @click.away="closeJobModal()"
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 transform translate-y-1/2"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0 transform translate-y-1/2">
<!-- Modal Header -->
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
Import Job Details
</h3>
<button @click="closeJobModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<span x-html="$icon('close', 'w-5 h-5')"></span>
</button>
</div>
<!-- Modal Content -->
<div x-show="selectedJob" class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Job ID</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.id"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Vendor</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="getVendorName(selectedJob?.vendor_id)"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Marketplace</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.marketplace"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</p>
<span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
:class="{
'text-green-700 bg-green-100': selectedJob?.status === 'completed',
'text-blue-700 bg-blue-100': selectedJob?.status === 'processing',
'text-yellow-700 bg-yellow-100': selectedJob?.status === 'pending',
'text-red-700 bg-red-100': selectedJob?.status === 'failed',
'text-orange-700 bg-orange-100': selectedJob?.status === 'completed_with_errors'
}"
x-text="selectedJob?.status.replace('_', ' ').toUpperCase()">
</span>
</div>
<div class="col-span-2">
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Source URL</p>
<p class="text-sm text-gray-900 dark:text-gray-100 break-all" x-text="selectedJob?.source_url"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Imported</p>
<p class="text-sm text-green-600 dark:text-green-400" x-text="selectedJob?.imported_count"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Updated</p>
<p class="text-sm text-blue-600 dark:text-blue-400" x-text="selectedJob?.updated_count"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Errors</p>
<p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJob?.error_count"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Processed</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.total_processed"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Started At</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.started_at ? formatDate(selectedJob.started_at) : 'Not started'"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Completed At</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.completed_at ? formatDate(selectedJob.completed_at) : 'Not completed'"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Created By</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.created_by_name || 'System'"></p>
</div>
</div>
<!-- Error Details -->
<div x-show="selectedJob?.error_details?.length > 0" class="mt-4">
<p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Error Details</p>
<div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg max-h-48 overflow-y-auto">
<pre class="text-xs text-red-700 dark:text-red-300 whitespace-pre-wrap" x-text="JSON.stringify(selectedJob?.error_details, null, 2)"></pre>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="flex justify-end mt-6">
<button
@click="closeJobModal()"
class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-700 hover:border-gray-500 focus:outline-none"
>
Close
</button>
</div>
</div>
</div>
{{ job_details_modal(show_created_by=true) }}
{% endblock %}

66
app/templates/admin/logs.html
View File

@@ -1,47 +1,20 @@
{# app/templates/admin/logs.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
{% from 'shared/macros/headers.html' import page_header_refresh %}
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
{% block title %}Application Logs{% endblock %}
{% block alpine_data %}adminLogs(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Application Logs
</h2>
<div class="flex items-center space-x-3">
<button
@click="refresh()"
:disabled="loading"
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="loading ? 'Loading...' : 'Refresh'"></span>
</button>
</div>
</div>
{{ page_header_refresh('Application Logs') }}
<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
<div>
<p class="font-semibold">Success</p>
<p class="text-sm" x-text="successMessage"></p>
</div>
</div>
{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
<!-- Error Message -->
<div x-show="error" x-transition 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</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error', show_condition='error') }}
<!-- Statistics Cards -->
<div x-show="stats" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -91,28 +64,10 @@
</div>
<!-- Log Source Tabs -->
<div class="mb-6">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-px flex space-x-8">
<button
@click="logSource = 'database'; loadLogs()"
:class="logSource === 'database' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
>
<span x-html="$icon('database', 'inline w-5 h-5 mr-2')"></span>
Database Logs
</button>
<button
@click="logSource = 'file'; loadFileLogs()"
:class="logSource === 'file' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
>
<span x-html="$icon('document', 'inline w-5 h-5 mr-2')"></span>
File Logs
</button>
</nav>
</div>
</div>
{% call tabs_nav() %}
{{ tab_button('database', 'Database Logs', tab_var='logSource', icon='database', onclick="logSource = 'database'; loadLogs()") }}
{{ tab_button('file', 'File Logs', tab_var='logSource', icon='document', onclick="logSource = 'file'; loadFileLogs()") }}
{% endcall %}
<!-- Database Logs Section -->
<div x-show="logSource === 'database'" x-transition>
@@ -299,6 +254,7 @@
</div>
</div>
{# noqa: FE-004 - Log detail modal with dynamic show variable and custom content layout #}
<!-- Log Detail Modal -->
<div x-show="selectedLog" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" @click.self="selectedLog = null">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">

184
app/templates/admin/marketplace.html
View File

@@ -1,49 +1,24 @@
{# app/templates/admin/marketplace.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
{% from 'shared/macros/modals.html' import job_details_modal %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{% from 'shared/macros/inputs.html' import number_stepper %}
{% block title %}Marketplace Import{% endblock %}
{% block alpine_data %}adminMarketplace(){% 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">
Marketplace Import
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Import products from Letzshop marketplace for any vendor (self-service)
</p>
</div>
<button
@click="refreshJobs()"
:disabled="loading"
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="loading ? 'Loading...' : 'Refresh'"></span>
</button>
</div>
{% call page_header_flex(title='Marketplace Import', subtitle='Import products from Letzshop marketplace for any vendor (self-service)') %}
{{ refresh_button(onclick='refreshJobs()') }}
{% endcall %}
<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
<div>
<p class="font-semibold" x-text="successMessage"></p>
</div>
</div>
{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
<!-- Error Message -->
<div x-show="error" x-transition 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</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error', show_condition='error') }}
<!-- Import Form Card -->
<div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
@@ -129,14 +104,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
Batch Size
</label>
<input
x-model.number="importForm.batch_size"
type="number"
min="100"
max="5000"
step="100"
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
/>
{{ number_stepper(model='importForm.batch_size', min=100, max=5000, step=100, label='Batch Size') }}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
Number of products to process per batch (100-5000)
</p>
@@ -286,21 +254,9 @@
</div>
<!-- Jobs Table -->
<div x-show="!loading && jobs.length > 0" class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Job ID</th>
<th class="px-4 py-3">Vendor</th>
<th class="px-4 py-3">Marketplace</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Progress</th>
<th class="px-4 py-3">Started</th>
<th class="px-4 py-3">Duration</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<div x-show="!loading && jobs.length > 0">
{% call table_wrapper() %}
{{ table_header(['Job ID', 'Vendor', 'Marketplace', 'Status', 'Progress', 'Started', 'Duration', 'Actions']) }}
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-for="job in jobs" :key="job.id">
<tr class="text-gray-700 dark:text-gray-400">
@@ -367,121 +323,13 @@
</tr>
</template>
</tbody>
</table>
</div>
</div>
{% endcall %}
{{ pagination(show_condition="!loading && pagination.total > 0") }}
</div>
</div>
<!-- Job Details Modal (same as vendor version) -->
<div x-show="showJobModal"
x-cloak
@click.away="closeJobModal()"
class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div @click.away="closeJobModal()"
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 transform translate-y-1/2"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0 transform translate-y-1/2">
<!-- Modal Header -->
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
Import Job Details
</h3>
<button @click="closeJobModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<span x-html="$icon('close', 'w-5 h-5')"></span>
</button>
</div>
<!-- Modal Content -->
<div x-show="selectedJob" class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Job ID</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.id"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Vendor</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="getVendorName(selectedJob?.vendor_id)"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Marketplace</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.marketplace"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</p>
<span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
:class="{
'text-green-700 bg-green-100': selectedJob?.status === 'completed',
'text-blue-700 bg-blue-100': selectedJob?.status === 'processing',
'text-yellow-700 bg-yellow-100': selectedJob?.status === 'pending',
'text-red-700 bg-red-100': selectedJob?.status === 'failed',
'text-orange-700 bg-orange-100': selectedJob?.status === 'completed_with_errors'
}"
x-text="selectedJob?.status.replace('_', ' ').toUpperCase()">
</span>
</div>
<div class="col-span-2">
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Source URL</p>
<p class="text-sm text-gray-900 dark:text-gray-100 truncate" x-text="selectedJob?.source_url" :title="selectedJob?.source_url"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Imported</p>
<p class="text-sm text-green-600 dark:text-green-400" x-text="selectedJob?.imported_count"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Updated</p>
<p class="text-sm text-blue-600 dark:text-blue-400" x-text="selectedJob?.updated_count"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Errors</p>
<p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJob?.error_count"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Processed</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.total_processed"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Started At</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.started_at ? formatDate(selectedJob.started_at) : 'Not started'"></p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Completed At</p>
<p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.completed_at ? formatDate(selectedJob.completed_at) : 'Not completed'"></p>
</div>
</div>
<!-- Error Details -->
<div x-show="selectedJob?.error_details?.length > 0" class="mt-4">
<p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Error Details</p>
<div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg max-h-48 overflow-y-auto">
<pre class="text-xs text-red-700 dark:text-red-300 whitespace-pre-wrap" x-text="JSON.stringify(selectedJob?.error_details, null, 2)"></pre>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="flex justify-end mt-6">
<button
@click="closeJobModal()"
class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-700 hover:border-gray-500 focus:outline-none"
>
Close
</button>
</div>
</div>
</div>
{{ job_details_modal() }}
{% endblock %}
{% block extra_scripts %}

50
app/templates/admin/platform-homepage.html
View File

@@ -1,64 +1,36 @@
{# app/templates/admin/platform-homepage.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
{% from 'shared/macros/headers.html' import page_header_flex, action_button %}
{% block title %}Platform Homepage Manager{% endblock %}
{% block alpine_data %}platformHomepageManager(){% endblock %}
{% block content %}
<!-- Page Header -->
{# Note: Subtitle has inline HTML link, so using page_header_flex with custom structure #}
<div class="flex items-center justify-between my-6">
<div>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Platform Homepage
</h2>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Platform Homepage</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Manage your platform's main landing page at <a href="/" target="_blank" class="text-purple-600 hover:underline">localhost:8000</a>
</p>
</div>
<div class="flex gap-2">
<a
href="/"
target="_blank"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:shadow-outline-purple"
>
<div class="flex items-center space-x-3">
<a href="/" target="_blank"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
<span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
Preview
</a>
<button
@click="savePage()"
:disabled="saving"
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
</button>
{{ action_button('Save Changes', 'Saving...', 'saving', 'savePage()') }}
</div>
</div>
<!-- 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 homepage...</p>
</div>
{{ loading_state('Loading homepage...') }}
<!-- 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 homepage</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading homepage') }}
<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
<div>
<p class="font-semibold" x-text="successMessage"></p>
</div>
</div>
{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
<!-- Main Form -->
<div x-show="!loading && page" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">

97
app/templates/admin/settings.html
View File

@@ -1,76 +1,27 @@
{# app/templates/admin/settings.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
{% from 'shared/macros/headers.html' import page_header_refresh %}
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
{% from 'shared/macros/inputs.html' import number_stepper %}
{% block title %}Platform Settings{% endblock %}
{% block alpine_data %}adminSettings(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Platform Settings
</h2>
<button
@click="refresh()"
:disabled="loading"
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="loading ? 'Loading...' : 'Refresh'"></span>
</button>
</div>
{{ page_header_refresh('Platform Settings') }}
<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
<div>
<p class="font-semibold">Success</p>
<p class="text-sm" x-text="successMessage"></p>
</div>
</div>
{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
<!-- Error Message -->
<div x-show="error" x-transition 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</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error', show_condition='error') }}
<!-- Settings Categories Tabs -->
<div class="mb-6">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-px flex space-x-8">
<button
@click="activeTab = 'logging'"
:class="activeTab === 'logging' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
>
<span x-html="$icon('document-text', 'inline w-5 h-5 mr-2')"></span>
Logging
</button>
<button
@click="activeTab = 'system'"
:class="activeTab === 'system' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
>
<span x-html="$icon('cog', 'inline w-5 h-5 mr-2')"></span>
System
</button>
<button
@click="activeTab = 'security'"
:class="activeTab === 'security' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
>
<span x-html="$icon('shield-check', 'inline w-5 h-5 mr-2')"></span>
Security
</button>
</nav>
</div>
</div>
{% call tabs_nav() %}
{{ tab_button('logging', 'Logging', icon='document-text') }}
{{ tab_button('system', 'System', icon='cog') }}
{{ tab_button('security', 'Security', icon='shield-check') }}
{% endcall %}
<!-- Logging Settings Tab -->
<div x-show="activeTab === 'logging'" x-transition>
@@ -108,13 +59,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Max File Size (MB)
</label>
<input
type="number"
x-model.number="logSettings.log_file_max_size_mb"
min="1"
max="1000"
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
/>
{{ number_stepper(model='logSettings.log_file_max_size_mb', min=1, max=1000, step=10, label='Max File Size') }}
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
Log file will rotate when it reaches this size.
</p>
@@ -124,13 +69,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Backup File Count
</label>
<input
type="number"
x-model.number="logSettings.log_file_backup_count"
min="0"
max="50"
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
/>
{{ number_stepper(model='logSettings.log_file_backup_count', min=0, max=50, step=1, label='Backup File Count') }}
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
Number of rotated backup files to keep.
</p>
@@ -142,13 +81,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Database Log Retention (Days)
</label>
<input
type="number"
x-model.number="logSettings.db_log_retention_days"
min="1"
max="365"
class="block w-full md:w-1/2 px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
/>
{{ number_stepper(model='logSettings.db_log_retention_days', min=1, max=365, step=7, label='Retention Days') }}
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
Logs older than this will be automatically deleted from database.
</p>

13
app/templates/admin/test-auth-flow.html
View File

@@ -1,21 +1,12 @@
{# app/templates/admin/test-auth-flow.html #}
{% extends 'admin/base.html' %}
{% from 'shared/macros/headers.html' import page_header %}
{% block title %}Auth Flow Testing{% endblock %}
{% block content %}
<div x-data="authFlowTest()" x-init="init()">
{# Page Header #}
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
<div>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Auth Flow Testing
</h2>
<p class="text-gray-600 dark:text-gray-400 mt-1">
Comprehensive testing for Jinja2 migration auth loop fix
</p>
</div>
</div>
{{ page_header('Auth Flow Testing', subtitle='Comprehensive testing for Jinja2 migration auth loop fix') }}
{# Log Level Control #}
<div class="px-4 py-3 mb-6 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg shadow-md border-l-4 border-yellow-500">

13
app/templates/admin/test-vendors-users-migration.html
View File

@@ -1,21 +1,12 @@
{# app/templates/admin/test-vendors-users-migration.html #}
{% extends 'admin/base.html' %}
{% from 'shared/macros/headers.html' import page_header %}
{% block title %}Vendors & Users Migration Testing{% endblock %}
{% block content %}
<div x-data="migrationTest()" x-init="init()">
{# Page Header #}
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
<div>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Vendors & Users Migration Testing
</h2>
<p class="text-gray-600 dark:text-gray-400 mt-1">
Comprehensive test suite for verifying the Jinja2 migration
</p>
</div>
</div>
{{ page_header('Vendors & Users Migration Testing', subtitle='Comprehensive test suite for verifying the Jinja2 migration') }}
{# Status Cards #}
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">

13
app/templates/admin/testing-hub.html
View File

@@ -1,5 +1,6 @@
{# app/templates/admin/testing-hub.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% block title %}Testing Hub{% endblock %}
@@ -7,17 +8,7 @@
{% block alpine_data %}adminTestingHub(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Testing Hub
</h2>
<a href="/admin/dashboard"
class="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:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Dashboard
</a>
</div>
{{ page_header('Testing Hub', back_url='/admin/dashboard', back_label='Back to Dashboard') }}
<!-- Introduction Card -->
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg p-6 mb-8">

18
app/templates/admin/user-create.html
View File

@@ -1,27 +1,13 @@
{# app/templates/admin/user-create.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% block title %}Create User{% endblock %}
{% block alpine_data %}adminUserCreate(){% 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">
Create New User
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Add a new user to the platform
</p>
</div>
<a href="/admin/users"
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 Users
</a>
</div>
{{ page_header('Create New User', subtitle='Add a new user to the platform', back_url='/admin/users', back_label='Back to Users') }}
<!-- Create Form -->
<form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">

40
app/templates/admin/user-detail.html
View File

@@ -1,44 +1,22 @@
{# app/templates/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 %}User Details{% endblock %}
{% block alpine_data %}adminUserDetail(){% 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" x-text="user?.full_name || user?.username || 'User Details'">
User Details
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="user">
@<span x-text="user?.username"></span>
<span class="text-gray-400 mx-2">|</span>
<span x-text="user?.email"></span>
</p>
</div>
<a href="/admin/users"
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
</a>
</div>
{% call detail_page_header("user?.full_name || user?.username || 'User Details'", '/admin/users', subtitle_show='user') %}
@<span x-text="user?.username"></span>
<span class="text-gray-400 mx-2">|</span>
<span x-text="user?.email"></span>
{% endcall %}
<!-- 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 user details...</p>
</div>
{{ loading_state('Loading user details...') }}
<!-- 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 user</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading user') }}
<!-- User Details -->
<div x-show="!loading && user">

27
app/templates/admin/user-edit.html
View File

@@ -1,33 +1,18 @@
{# app/templates/admin/user-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state %}
{% from 'shared/macros/headers.html' import edit_page_header %}
{% block title %}Edit User{% endblock %}
{% block alpine_data %}adminUserEdit(){% 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 User
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="user">
@<span x-text="user?.username"></span>
</p>
</div>
<a href="/admin/users"
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 Users
</a>
</div>
{% call edit_page_header('Edit User', '/admin/users', subtitle_show='user', back_label='Back to Users') %}
@<span x-text="user?.username"></span>
{% endcall %}
<!-- Loading State -->
<div x-show="loadingUser" 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 user...</p>
</div>
{{ loading_state('Loading user...', show_condition='loadingUser') }}
<!-- Edit Form -->
<div x-show="!loadingUser && user">

52
app/templates/admin/users.html
View File

@@ -1,40 +1,20 @@
{# app/templates/admin/users.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% block title %}Users{% endblock %}
{% block alpine_data %}adminUsers(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
User Management
</h2>
<a
href="/admin/users/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('user-plus', 'w-4 h-4 mr-2')"></span>
Create User
</a>
</div>
{{ page_header('User Management', action_label='Create User', action_url='/admin/users/create', action_icon='user-plus') }}
<!-- 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 users...</p>
</div>
{{ loading_state('Loading users...') }}
<!-- 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 users</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading users') }}
<!-- Stats Cards -->
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -156,20 +136,9 @@
</div>
<!-- Users Table -->
<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">User</th>
<th class="px-4 py-3">Email</th>
<th class="px-4 py-3">Role</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Registered</th>
<th class="px-4 py-3">Last Login</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<div x-show="!loading">
{% call table_wrapper() %}
{{ table_header(['User', 'Email', 'Role', 'Status', 'Registered', 'Last Login', 'Actions']) }}
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<!-- Empty State -->
<template x-if="users.length === 0">
@@ -264,8 +233,7 @@
</tr>
</template>
</tbody>
</table>
</div>
{% endcall %}
{{ pagination() }}
</div>

35
app/templates/admin/vendor-create.html
View File

@@ -1,32 +1,16 @@
{# app/templates/admin/vendor-create.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import error_state %}
{% block title %}Create Vendor{% endblock %}
{% block alpine_data %}adminVendorCreate(){% 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">
Create New Vendor
</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Create a vendor (storefront/brand) under an existing company
</p>
</div>
<a
href="/admin/vendors"
class="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-500 focus:outline-none focus:shadow-outline-gray"
>
<span class="flex items-center">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Vendors
</span>
</a>
</div>
{{ page_header('Create New Vendor', subtitle='Create a vendor (storefront/brand) under an existing company', back_url='/admin/vendors', back_label='Back to Vendors') }}
{# noqa: FE-003 - Custom success message with nested template #}
<!-- Success Message -->
<div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
<div class="flex items-start">
@@ -48,16 +32,7 @@
</div>
</div>
<!-- Error Message -->
<div x-show="errorMessage" x-cloak class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
<div class="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 Creating Vendor</p>
<p class="text-sm mt-1" x-text="errorMessage"></p>
</div>
</div>
</div>
{{ error_state('Error Creating Vendor', error_var='errorMessage', show_condition='errorMessage') }}
<!-- Loading Companies -->
<div x-show="loadingCompanies" class="mb-6 p-4 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg">

40
app/templates/admin/vendor-detail.html
View File

@@ -1,44 +1,22 @@
{# app/templates/admin/vendor-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 %}Vendor Details{% endblock %}
{% block alpine_data %}adminVendorDetail(){% 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" x-text="vendor?.name || 'Vendor Details'">
Vendor Details
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="vendor">
<span x-text="vendorCode"></span>
<span class="text-gray-400 mx-2">•</span>
<span x-text="vendor?.subdomain"></span>
</p>
</div>
<a href="/admin/vendors"
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
</a>
</div>
{% call detail_page_header("vendor?.name || 'Vendor Details'", '/admin/vendors', subtitle_show='vendor') %}
<span x-text="vendorCode"></span>
<span class="text-gray-400 mx-2">•</span>
<span x-text="vendor?.subdomain"></span>
{% endcall %}
<!-- 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 vendor details...</p>
</div>
{{ loading_state('Loading vendor details...') }}
<!-- 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 vendor</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading vendor') }}
<!-- Vendor Details -->
<div x-show="!loading && vendor">

31
app/templates/admin/vendor-edit.html
View File

@@ -1,35 +1,20 @@
{# app/templates/admin/vendor-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state %}
{% from 'shared/macros/headers.html' import edit_page_header %}
{% block title %}Edit Vendor{% endblock %}
{% block alpine_data %}adminVendorEdit(){% 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 Vendor
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="vendor">
<span x-text="vendor?.name"></span>
<span class="text-gray-400">•</span>
<span x-text="vendor?.vendor_code"></span>
</p>
</div>
<a href="/admin/vendors"
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 Vendors
</a>
</div>
{% call edit_page_header('Edit Vendor', '/admin/vendors', subtitle_show='vendor', back_label='Back to Vendors') %}
<span x-text="vendor?.name"></span>
<span class="text-gray-400">•</span>
<span x-text="vendor?.vendor_code"></span>
{% endcall %}
<!-- Loading State -->
<div x-show="loadingVendor" 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 vendor...</p>
</div>
{{ loading_state('Loading vendor...', show_condition='loadingVendor') }}
<!-- Edit Form -->
<div x-show="!loadingVendor && vendor">

38
app/templates/admin/vendor-theme.html
View File

@@ -1,5 +1,7 @@
{# app/templates/admin/vendor-theme.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% block title %}Theme Editor - {{ vendor_code }}{% endblock %}
@@ -7,35 +9,17 @@
{% block alpine_data %}adminVendorTheme(){% 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">
Theme Editor
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Customize appearance for <span x-text="vendor?.name || '...'"></span>
</p>
</div>
<div class="flex space-x-2">
<a :href="`/admin/vendors/${vendorCode}`"
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 hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Vendor
</a>
</div>
</div>
{% call page_header_flex(title='Theme Editor', subtitle_var="'Customize appearance for ' + (vendor?.name || '...')") %}
<a :href="`/admin/vendors/${vendorCode}`"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
Back to Vendor
</a>
{% endcall %}
<!-- Loading State -->
<div x-show="loading" class="text-center py-12">
<span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600 animate-spin')"></span>
<p class="mt-2 text-gray-600 dark:text-gray-400">Loading theme...</p>
</div>
{{ loading_state('Loading theme...') }}
<!-- Error State -->
<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
<p x-text="error"></p>
</div>
{{ error_state('Error', show_condition='error && !loading') }}
<!-- Main Content -->
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">

29
app/templates/admin/vendor-themes.html
View File

@@ -1,22 +1,14 @@
{# app/templates/admin/vendor-themes.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% block title %}Vendor Themes{% endblock %}
{% block alpine_data %}adminVendorThemes(){% 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">
Vendor Themes
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Customize vendor theme colors and branding
</p>
</div>
</div>
{{ page_header('Vendor Themes', subtitle='Customize vendor theme colors and branding') }}
<!-- Vendor Selection -->
<div class="px-4 py-6 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
@@ -44,20 +36,9 @@
</div>
</div>
<!-- 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 vendors...</p>
</div>
{{ loading_state('Loading vendors...') }}
<!-- 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 vendors</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading vendors') }}
<!-- Vendors List -->
<div x-show="!loading && vendors.length > 0">

50
app/templates/admin/vendors.html
View File

@@ -1,40 +1,20 @@
{# app/templates/admin/vendors.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% block title %}Vendors{% endblock %}
{% block alpine_data %}adminVendors(){% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Vendor Management
</h2>
<a
href="/admin/vendors/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 Vendor
</a>
</div>
{{ page_header('Vendor Management', action_label='Create Vendor', action_url='/admin/vendors/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 vendors...</p>
</div>
{{ loading_state('Loading vendors...') }}
<!-- 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 vendors</p>
<p class="text-sm" x-text="error"></p>
</div>
</div>
{{ error_state('Error loading vendors') }}
<!-- Stats Cards -->
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -156,18 +136,9 @@
</div>
<!-- Vendors Table with Pagination -->
<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Vendor</th>
<th class="px-4 py-3">Subdomain</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Created</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<div x-show="!loading">
{% call table_wrapper() %}
{{ table_header(['Vendor', 'Subdomain', 'Status', 'Created', 'Actions']) }}
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<!-- Empty State -->
<template x-if="paginatedVendors.length === 0">
@@ -250,8 +221,7 @@
</tr>
</template>
</tbody>
</table>
</div>
{% endcall %}
{{ pagination() }}
</div>

10
app/templates/vendor/marketplace.html vendored
View File

@@ -1,5 +1,6 @@
{# app/templates/vendor/marketplace.html #}
{% extends "vendor/base.html" %}
{% from 'shared/macros/inputs.html' import number_stepper %}
{% block title %}Marketplace Import{% endblock %}
@@ -110,14 +111,7 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
Batch Size
</label>
<input
x-model.number="importForm.batch_size"
type="number"
min="100"
max="5000"
step="100"
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
/>
{{ number_stepper(model='importForm.batch_size', min=100, max=5000, step=100, label='Batch Size') }}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
Number of products to process per batch (100-5000)
</p>