Samir Boulahtit
bb2e5fd260
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>
450 lines
23 KiB
HTML
450 lines
23 KiB
HTML
{# 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 %}
|
|
{% 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('Loading company...', show_condition='loadingCompany') }}
|
|
|
|
<!-- Edit Form -->
|
|
<div x-show="!loadingCompany && company">
|
|
<!-- Quick Actions Card -->
|
|
<div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Quick Actions
|
|
</h3>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<button
|
|
@click="toggleVerification()"
|
|
:disabled="saving"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
|
:class="{ 'bg-orange-600 hover:bg-orange-700': company && company.is_verified, 'bg-green-600 hover:bg-green-700': company && !company.is_verified }">
|
|
<span x-html="$icon(company?.is_verified ? 'x-circle' : 'badge-check', 'w-4 h-4 mr-2')"></span>
|
|
<span x-text="company?.is_verified ? 'Unverify Company' : 'Verify Company'"></span>
|
|
</button>
|
|
|
|
<button
|
|
@click="toggleActive()"
|
|
:disabled="saving"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
|
:class="{ 'bg-red-600 hover:bg-red-700': company && company.is_active, 'bg-green-600 hover:bg-green-700': company && !company.is_active }">
|
|
<span x-html="$icon(company?.is_active ? 'lock-closed' : 'lock-open', 'w-4 h-4 mr-2')"></span>
|
|
<span x-text="company?.is_active ? 'Deactivate' : 'Activate'"></span>
|
|
</button>
|
|
|
|
<!-- Status Badges -->
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<span
|
|
x-show="company?.is_verified"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
<span x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
|
|
Verified
|
|
</span>
|
|
<span
|
|
x-show="!company?.is_verified"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
|
|
<span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
|
|
Pending
|
|
</span>
|
|
<span
|
|
x-show="company?.is_active"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
Active
|
|
</span>
|
|
<span
|
|
x-show="!company?.is_active"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
|
|
Inactive
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
|
<!-- Left Column: Basic Info -->
|
|
<div>
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Basic Information
|
|
</h3>
|
|
|
|
<!-- Company ID (readonly) -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Company ID
|
|
</span>
|
|
<input
|
|
type="text"
|
|
:value="company?.id"
|
|
disabled
|
|
class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
System-generated identifier
|
|
</span>
|
|
</label>
|
|
|
|
<!-- Name -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Company Name <span class="text-red-600">*</span>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
x-model="formData.name"
|
|
required
|
|
maxlength="255"
|
|
:disabled="saving"
|
|
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"
|
|
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
|
|
>
|
|
<span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
|
|
</label>
|
|
|
|
<!-- Description -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Description
|
|
</span>
|
|
<textarea
|
|
x-model="formData.description"
|
|
rows="3"
|
|
:disabled="saving"
|
|
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-textarea"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Right Column: Contact Info -->
|
|
<div>
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Contact Information
|
|
</h3>
|
|
|
|
<!-- Owner Info (readonly) -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Owner
|
|
</span>
|
|
<input
|
|
type="text"
|
|
:value="company?.owner_username ? company.owner_username + ' (' + company.owner_email + ')' : 'User ID: ' + company?.owner_user_id"
|
|
disabled
|
|
class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Use "Transfer Ownership" in More Actions to change
|
|
</span>
|
|
</label>
|
|
|
|
<!-- Contact Email -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Contact Email <span class="text-red-600">*</span>
|
|
</span>
|
|
<input
|
|
type="email"
|
|
x-model="formData.contact_email"
|
|
required
|
|
:disabled="saving"
|
|
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"
|
|
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.contact_email }"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Public business contact email
|
|
</span>
|
|
<span x-show="errors.contact_email" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.contact_email"></span>
|
|
</label>
|
|
|
|
<!-- Phone -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Phone
|
|
</span>
|
|
<input
|
|
type="tel"
|
|
x-model="formData.contact_phone"
|
|
:disabled="saving"
|
|
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"
|
|
>
|
|
</label>
|
|
|
|
<!-- Website -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Website
|
|
</span>
|
|
<input
|
|
type="url"
|
|
x-model="formData.website"
|
|
:disabled="saving"
|
|
placeholder="https://example.com"
|
|
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"
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Business Details -->
|
|
<div class="mb-8">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Business Details
|
|
</h3>
|
|
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<!-- Business Address -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Business Address
|
|
</span>
|
|
<textarea
|
|
x-model="formData.business_address"
|
|
rows="3"
|
|
:disabled="saving"
|
|
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-textarea"
|
|
></textarea>
|
|
</label>
|
|
|
|
<!-- Tax Number -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Tax Number
|
|
</span>
|
|
<input
|
|
type="text"
|
|
x-model="formData.tax_number"
|
|
:disabled="saving"
|
|
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"
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Company Statistics (readonly) -->
|
|
<template x-if="company?.vendor_count !== undefined">
|
|
<div class="mb-8">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Company Statistics
|
|
</h3>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Total Vendors</p>
|
|
<p class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="company.vendor_count || 0"></p>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Active Vendors</p>
|
|
<p class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="company.active_vendor_count || 0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
|
|
<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-400 focus:outline-none">
|
|
Cancel
|
|
</a>
|
|
<button
|
|
type="submit"
|
|
: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">
|
|
<span x-html="$icon('check', 'w-4 h-4 mr-2 inline')"></span>
|
|
Save Changes
|
|
</span>
|
|
<span x-show="saving" class="flex items-center">
|
|
<span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
|
Saving...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- More Actions Section -->
|
|
<div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
More Actions
|
|
</h3>
|
|
<div class="flex flex-wrap gap-3">
|
|
<!-- Transfer Ownership Button -->
|
|
<button
|
|
@click="showTransferOwnershipModal = true"
|
|
:disabled="saving"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-orange-600 border border-transparent rounded-lg hover:bg-orange-700 focus:outline-none focus:shadow-outline-orange disabled:opacity-50"
|
|
>
|
|
<span x-html="$icon('switch-horizontal', 'w-4 h-4 mr-2')"></span>
|
|
Transfer Ownership
|
|
</button>
|
|
|
|
<!-- Delete Company Button -->
|
|
<button
|
|
@click="deleteCompany()"
|
|
:disabled="saving || (company?.vendor_count > 0)"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50"
|
|
:title="company?.vendor_count > 0 ? 'Cannot delete company with vendors' : 'Delete this company'"
|
|
>
|
|
<span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
|
|
Delete Company
|
|
</button>
|
|
</div>
|
|
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
|
|
<span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
|
|
Ownership transfer affects all vendors under this company.
|
|
<span x-show="company?.vendor_count > 0" class="text-orange-600 dark:text-orange-400">
|
|
Company cannot be deleted while it has vendors (<span x-text="company?.vendor_count"></span> vendors).
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
{# noqa: FE-004 - Complex form modal with dynamic user search and transfer functionality #}
|
|
<!-- Transfer Ownership Modal -->
|
|
<div
|
|
x-show="showTransferOwnershipModal"
|
|
x-cloak
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
|
|
@keydown.escape.window="showTransferOwnershipModal = false"
|
|
>
|
|
<div
|
|
@click.away="showTransferOwnershipModal = false"
|
|
class="w-full max-w-md bg-white rounded-lg shadow-lg dark:bg-gray-800"
|
|
>
|
|
<!-- Modal Header -->
|
|
<div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Transfer Company Ownership
|
|
</h3>
|
|
<button
|
|
@click="showTransferOwnershipModal = false"
|
|
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
|
>
|
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="p-4">
|
|
<div class="mb-4 p-3 bg-orange-100 border border-orange-300 text-orange-700 rounded-lg dark:bg-orange-900 dark:border-orange-700 dark:text-orange-300">
|
|
<p class="flex items-start text-sm">
|
|
<span x-html="$icon('exclamation', 'w-5 h-5 mr-2 flex-shrink-0')"></span>
|
|
<span>
|
|
<strong>Warning:</strong> This will transfer ownership of the company
|
|
"<span x-text="company?.name"></span>" and all its vendors to another user.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="transferOwnership()">
|
|
<!-- New Owner Search -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
New Owner <span class="text-red-600">*</span>
|
|
</span>
|
|
{{ 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>
|
|
<p x-show="showOwnerError && !transferData.new_owner_user_id" class="mt-1 text-xs text-red-600 dark:text-red-400">
|
|
<span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1')"></span>
|
|
Please select a new owner
|
|
</p>
|
|
</label>
|
|
|
|
<!-- Transfer Reason -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Reason (optional)
|
|
</span>
|
|
<textarea
|
|
x-model="transferData.transfer_reason"
|
|
rows="2"
|
|
:disabled="transferring"
|
|
placeholder="Enter reason for transfer (for audit log)"
|
|
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-textarea"
|
|
></textarea>
|
|
</label>
|
|
|
|
<!-- Confirmation Checkbox -->
|
|
<label class="flex items-center text-sm">
|
|
<input
|
|
type="checkbox"
|
|
x-model="transferData.confirm_transfer"
|
|
:disabled="transferring"
|
|
class="form-checkbox text-purple-600"
|
|
>
|
|
<span class="ml-2 text-gray-700 dark:text-gray-400">
|
|
I confirm I want to transfer ownership
|
|
</span>
|
|
</label>
|
|
<p x-show="showConfirmError && !transferData.confirm_transfer" class="mt-1 mb-4 text-xs text-red-600 dark:text-red-400">
|
|
<span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1')"></span>
|
|
Please confirm the transfer by checking the box above
|
|
</p>
|
|
<div x-show="!showConfirmError || transferData.confirm_transfer" class="mb-4"></div>
|
|
|
|
<!-- Modal Actions -->
|
|
<div class="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
@click="showTransferOwnershipModal = false"
|
|
:disabled="transferring"
|
|
class="px-4 py-2 text-sm font-medium 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 disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
:disabled="transferring"
|
|
class="flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-orange-600 border border-transparent rounded-lg hover:bg-orange-700 focus:outline-none focus:shadow-outline-orange disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span x-show="!transferring">
|
|
<span x-html="$icon('switch-horizontal', 'w-4 h-4 mr-2 inline')"></span>
|
|
Transfer Ownership
|
|
</span>
|
|
<span x-show="transferring" class="flex items-center">
|
|
<span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
|
Transferring...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='admin/js/company-edit.js') }}"></script>
|
|
{% endblock %}
|