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>
246 lines
12 KiB
HTML
246 lines
12 KiB
HTML
{# 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('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">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
|
<div class="flex-1">
|
|
<p class="font-semibold">Vendor Created Successfully!</p>
|
|
<template x-if="createdVendor">
|
|
<div class="mt-2 p-3 bg-white rounded border border-green-300">
|
|
<p class="text-sm font-semibold mb-2">Vendor Details:</p>
|
|
<div class="space-y-1 text-sm">
|
|
<div><span class="font-bold">Vendor Code:</span> <span x-text="createdVendor.vendor_code"></span></div>
|
|
<div><span class="font-bold">Name:</span> <span x-text="createdVendor.name"></span></div>
|
|
<div><span class="font-bold">Subdomain:</span> <span x-text="createdVendor.subdomain"></span></div>
|
|
<div><span class="font-bold">Company:</span> <span x-text="createdVendor.company_name"></span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</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">
|
|
<div class="flex items-center">
|
|
<span x-html="$icon('spinner', 'w-5 h-5 mr-3 animate-spin')"></span>
|
|
<span>Loading companies...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Vendor Form -->
|
|
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<form @submit.prevent="createVendor">
|
|
<!-- Parent Company Selection -->
|
|
<div class="mb-6">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Parent Company</h3>
|
|
<div class="p-4 mb-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
|
|
<p class="text-sm text-blue-800 dark:text-blue-300">
|
|
<span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
|
|
Vendors are storefronts/brands under a company. Select the parent company for this vendor.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Company <span class="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
x-model="formData.company_id"
|
|
required
|
|
:disabled="loadingCompanies"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
>
|
|
<option value="">Select a company...</option>
|
|
<template x-for="company in companies" :key="company.id">
|
|
<option :value="company.id" x-text="`${company.name} (ID: ${company.id})`"></option>
|
|
</template>
|
|
</select>
|
|
<p class="mt-1 text-xs text-gray-500">The company this vendor belongs to</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vendor Information Section -->
|
|
<div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Vendor Information</h3>
|
|
|
|
<div class="grid gap-6 mb-4 md:grid-cols-2">
|
|
<!-- Vendor Code -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Vendor Code <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="formData.vendor_code"
|
|
required
|
|
minlength="2"
|
|
maxlength="50"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600 uppercase"
|
|
placeholder="TECHSTORE"
|
|
@input="formData.vendor_code = $event.target.value.toUpperCase()"
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500">Unique identifier (uppercase, 2-50 chars)</p>
|
|
</div>
|
|
|
|
<!-- Subdomain -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Subdomain <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="flex items-center">
|
|
<input
|
|
type="text"
|
|
x-model="formData.subdomain"
|
|
required
|
|
minlength="2"
|
|
maxlength="100"
|
|
pattern="[a-z0-9][a-z0-9-]*[a-z0-9]"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
placeholder="techstore"
|
|
@input="formData.subdomain = $event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')"
|
|
/>
|
|
<span class="ml-2 text-sm text-gray-500">.example.com</span>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500">Lowercase letters, numbers, and hyphens only</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6 mb-4 md:grid-cols-2">
|
|
<!-- Vendor Name -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Display Name <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="formData.name"
|
|
required
|
|
minlength="2"
|
|
maxlength="255"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
placeholder="Tech Store Luxembourg"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Auto-generate subdomain from name -->
|
|
<div class="flex items-end">
|
|
<button
|
|
type="button"
|
|
@click="autoGenerateSubdomain()"
|
|
class="px-4 py-2 text-sm font-medium text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-gray-700"
|
|
>
|
|
<span class="flex items-center">
|
|
<span x-html="$icon('sparkles', 'w-4 h-4 mr-2')"></span>
|
|
Auto-generate Subdomain
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
x-model="formData.description"
|
|
rows="3"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
placeholder="Brief description of the vendor/brand..."
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Marketplace URLs Section (Optional) -->
|
|
<div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Marketplace URLs (Optional)</h3>
|
|
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
|
|
CSV feed URLs for product import from Letzshop marketplace
|
|
</p>
|
|
|
|
<div class="grid gap-6 md:grid-cols-1">
|
|
<!-- French CSV URL -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
French CSV URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
x-model="formData.letzshop_csv_url_fr"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
placeholder="https://letzshop.lu/feeds/vendor-fr.csv"
|
|
/>
|
|
</div>
|
|
|
|
<!-- English CSV URL -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
English CSV URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
x-model="formData.letzshop_csv_url_en"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
placeholder="https://letzshop.lu/feeds/vendor-en.csv"
|
|
/>
|
|
</div>
|
|
|
|
<!-- German CSV URL -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
German CSV URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
x-model="formData.letzshop_csv_url_de"
|
|
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
placeholder="https://letzshop.lu/feeds/vendor-de.csv"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<button
|
|
type="button"
|
|
@click="window.location.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"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
:disabled="loading || loadingCompanies || !formData.company_id"
|
|
class="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">Create Vendor</span>
|
|
<span x-show="loading" class="flex items-center">
|
|
<span x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
|
|
Creating...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="/static/admin/js/vendor-create.js"></script>
|
|
{% endblock %}
|