Samir Boulahtit
463e1b67d5
Phase 1 - Sidebar Refactor: - Refactor sidebar to use collapsible sections with Alpine.js - Add localStorage persistence for section states - Reorganize navigation into logical groups Phase 2 - Core JS Files: - Add products.js: product CRUD, search, filtering, toggle active/featured - Add orders.js: order list, status management, filtering - Add inventory.js: stock tracking, adjust/set quantity modals - Add customers.js: customer list, order history, messaging - Add team.js: member invite, role management, remove members - Add profile.js: profile editing with form validation - Add settings.js: tabbed settings (general, marketplace, notifications) Templates updated from placeholders to full functional UIs. Vendor frontend now at ~90% parity with admin. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
207 lines
10 KiB
HTML
207 lines
10 KiB
HTML
{# app/templates/vendor/profile.html #}
|
|
{% extends "vendor/base.html" %}
|
|
{% from 'shared/macros/headers.html' import page_header_flex %}
|
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
|
|
|
{% block title %}Profile{% endblock %}
|
|
|
|
{% block alpine_data %}vendorProfile(){% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
{% call page_header_flex(title='Profile', subtitle='Manage your business information') %}
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
x-show="hasChanges"
|
|
@click="resetForm()"
|
|
class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
|
>
|
|
Reset
|
|
</button>
|
|
<button
|
|
@click="saveProfile()"
|
|
:disabled="saving || !hasChanges"
|
|
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"
|
|
>
|
|
<span x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
|
|
<span x-show="!saving">Save Changes</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
{{ loading_state('Loading profile...') }}
|
|
|
|
{{ error_state('Error loading profile') }}
|
|
|
|
<!-- Profile Form -->
|
|
<div x-show="!loading && !error" class="w-full mb-8">
|
|
<!-- Business Information -->
|
|
<div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Business Information</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Basic information about your business</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Business Name -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Business Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.name"
|
|
@input="markChanged()"
|
|
:class="{'border-red-500': errors.name}"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
/>
|
|
<p x-show="errors.name" class="mt-1 text-xs text-red-500" x-text="errors.name"></p>
|
|
</div>
|
|
|
|
<!-- Tax Number -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Tax Number / VAT ID
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.tax_number"
|
|
@input="markChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="LU12345678"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Business Address -->
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Business Address
|
|
</label>
|
|
<textarea
|
|
x-model="form.business_address"
|
|
@input="markChanged()"
|
|
rows="3"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="123 Business Street City, Postal Code Country"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Business Description
|
|
</label>
|
|
<textarea
|
|
x-model="form.description"
|
|
@input="markChanged()"
|
|
rows="4"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="Tell customers about your business..."
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Information</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">How customers can reach you</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Contact Email -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Contact Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
x-model="form.contact_email"
|
|
@input="markChanged()"
|
|
:class="{'border-red-500': errors.contact_email}"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="contact@yourbusiness.com"
|
|
/>
|
|
<p x-show="errors.contact_email" class="mt-1 text-xs text-red-500" x-text="errors.contact_email"></p>
|
|
</div>
|
|
|
|
<!-- Contact Phone -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Contact Phone
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
x-model="form.contact_phone"
|
|
@input="markChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="+352 123 456 789"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Website -->
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Website
|
|
</label>
|
|
<input
|
|
type="url"
|
|
x-model="form.website"
|
|
@input="markChanged()"
|
|
:class="{'border-red-500': errors.website}"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="https://www.yourbusiness.com"
|
|
/>
|
|
<p x-show="errors.website" class="mt-1 text-xs text-red-500" x-text="errors.website"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vendor Info (Read Only) -->
|
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Account Information</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Your vendor account details (read-only)</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Vendor Code -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Vendor Code</label>
|
|
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.vendor_code"></p>
|
|
</div>
|
|
|
|
<!-- Subdomain -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Subdomain</label>
|
|
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.subdomain || '-'"></p>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Status</label>
|
|
<span
|
|
:class="profile?.is_active
|
|
? 'px-2 py-1 text-xs font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
|
|
: 'px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100'"
|
|
x-text="profile?.is_active ? 'Active' : 'Inactive'"
|
|
></span>
|
|
<span
|
|
x-show="profile?.is_verified"
|
|
class="ml-2 px-2 py-1 text-xs font-semibold text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100"
|
|
>Verified</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='vendor/js/profile.js') }}"></script>
|
|
{% endblock %}
|