Files
orion/app/templates/admin/vendor-edit.html
Samir Boulahtit c6e7f4087f feat: complete subscription billing system phases 6-10
Phase 6 - Database-driven tiers:
- Update subscription_service to query database first with legacy fallback
- Add get_tier_info() db parameter and _get_tier_from_legacy() method

Phase 7 - Platform health integration:
- Add get_subscription_capacity() for theoretical vs actual capacity
- Include subscription capacity in full health report

Phase 8 - Background subscription tasks:
- Add reset_period_counters() for billing period resets
- Add check_trial_expirations() for trial management
- Add sync_stripe_status() for Stripe synchronization
- Add cleanup_stale_subscriptions() for maintenance
- Add capture_capacity_snapshot() for daily metrics

Phase 10 - Capacity planning & forecasting:
- Add CapacitySnapshot model for historical tracking
- Create capacity_forecast_service with growth trends
- Add /subscription-capacity, /trends, /recommendations endpoints
- Add /snapshot endpoint for manual captures

Also includes billing API enhancements from phase 4:
- Add upcoming-invoice, change-tier, addon purchase/cancel endpoints
- Add UsageSummary schema for billing page
- Enhance billing.js with addon management functions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-26 20:51:13 +01:00

432 lines
22 KiB
HTML

{# 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 %}
{% 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('Loading vendor...', show_condition='loadingVendor') }}
<!-- Edit Form -->
<div x-show="!loadingVendor && vendor">
<!-- 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="vendor?.is_verified ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
<span x-html="$icon(vendor?.is_verified ? 'x-circle' : 'badge-check', 'w-4 h-4 mr-2')"></span>
<span x-text="vendor?.is_verified ? 'Unverify Vendor' : 'Verify Vendor'"></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="vendor?.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
<span x-html="$icon(vendor?.is_active ? 'lock-closed' : 'lock-open', 'w-4 h-4 mr-2')"></span>
<span x-text="vendor?.is_active ? 'Deactivate' : 'Activate'"></span>
</button>
<!-- Status Badges -->
<div class="ml-auto flex items-center gap-2">
<span
x-show="vendor?.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="!vendor?.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="vendor?.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="!vendor?.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>
<!-- Vendor Code (readonly) -->
<label class="block mb-4 text-sm">
<span class="text-gray-700 dark:text-gray-400">
Vendor Code
</span>
<input
type="text"
:value="vendor?.vendor_code || ''"
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">
Cannot be changed after creation
</span>
</label>
<!-- Name -->
<label class="block mb-4 text-sm">
<span class="text-gray-700 dark:text-gray-400">
Vendor 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>
<!-- Subdomain -->
<label class="block mb-4 text-sm">
<span class="text-gray-700 dark:text-gray-400">
Subdomain <span class="text-red-600">*</span>
</span>
<input
type="text"
x-model="formData.subdomain"
@input="formatSubdomain()"
required
maxlength="100"
: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.subdomain }"
>
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
Lowercase letters, numbers, and hyphens only
</span>
<span x-show="errors.subdomain" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.subdomain"></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>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
Contact Information
</h3>
<button
type="button"
@click="resetAllContactToCompany()"
:disabled="saving || !hasAnyContactOverride()"
class="text-xs px-2 py-1 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 disabled:opacity-50 disabled:cursor-not-allowed"
title="Reset all contact fields to inherit from company">
<span x-html="$icon('refresh', 'w-3 h-3 inline mr-1')"></span>
Reset All to Company
</button>
</div>
<!-- Owner Email (readonly) -->
<label class="block mb-4 text-sm">
<span class="text-gray-700 dark:text-gray-400">
Owner Email
</span>
<input
type="email"
:value="vendor?.owner_email || ''"
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">
Owner's authentication email
</span>
</label>
<!-- Contact Email -->
<label class="block mb-4 text-sm">
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400">
Contact Email
<span x-show="!formData.contact_email"
class="ml-1 text-xs text-purple-500 dark:text-purple-400"
title="Inherited from company">
(from company)
</span>
</span>
<button
type="button"
x-show="formData.contact_email"
@click="resetFieldToCompany('contact_email')"
:disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
Reset
</button>
</div>
<input
type="email"
x-model="formData.contact_email"
:placeholder="vendor?.company_contact_email || 'contact@company.com'"
: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">
<span x-show="!formData.contact_email">Using company value. Enter a value to override.</span>
<span x-show="formData.contact_email">Custom value (clear to inherit from company)</span>
</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">
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400">
Phone
<span x-show="!formData.contact_phone"
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company)
</span>
</span>
<button
type="button"
x-show="formData.contact_phone"
@click="resetFieldToCompany('contact_phone')"
:disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
Reset
</button>
</div>
<input
type="tel"
x-model="formData.contact_phone"
:placeholder="vendor?.company_contact_phone || '+352 XXX XXX'"
: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">
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400">
Website
<span x-show="!formData.website"
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company)
</span>
</span>
<button
type="button"
x-show="formData.website"
@click="resetFieldToCompany('website')"
:disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
Reset
</button>
</div>
<input
type="url"
x-model="formData.website"
:placeholder="vendor?.company_website || 'https://company.com'"
: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>
<!-- 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">
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400">
Business Address
<span x-show="!formData.business_address"
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company)
</span>
</span>
<button
type="button"
x-show="formData.business_address"
@click="resetFieldToCompany('business_address')"
:disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
Reset
</button>
</div>
<textarea
x-model="formData.business_address"
rows="3"
:disabled="saving"
:placeholder="vendor?.company_business_address || 'No company address'"
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">
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400">
Tax Number
<span x-show="!formData.tax_number"
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company)
</span>
</span>
<button
type="button"
x-show="formData.tax_number"
@click="resetFieldToCompany('tax_number')"
:disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
Reset
</button>
</div>
<input
type="text"
x-model="formData.tax_number"
:disabled="saving"
:placeholder="vendor?.company_tax_number || 'No company tax number'"
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>
<!-- Marketplace Integration -->
<div class="mb-8">
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
<span x-html="$icon('shopping-bag', 'inline w-5 h-5 mr-2')"></span>
Letzshop Marketplace URLs
</h3>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Configure CSV feed URLs for automatic product imports from Letzshop marketplace
</p>
<div class="space-y-4">
<!-- French CSV URL -->
<label class="block text-sm">
<span class="text-gray-700 dark:text-gray-400">
French CSV URL
</span>
<input
type="url"
x-model="formData.letzshop_csv_url_fr"
:disabled="saving"
placeholder="https://letzshop.lu/feed/fr/products.csv"
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"
>
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
URL for French language product feed
</span>
</label>
<!-- English CSV URL -->
<label class="block text-sm">
<span class="text-gray-700 dark:text-gray-400">
English CSV URL
</span>
<input
type="url"
x-model="formData.letzshop_csv_url_en"
:disabled="saving"
placeholder="https://letzshop.lu/feed/en/products.csv"
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"
>
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
URL for English language product feed
</span>
</label>
<!-- German CSV URL -->
<label class="block text-sm">
<span class="text-gray-700 dark:text-gray-400">
German CSV URL
</span>
<input
type="url"
x-model="formData.letzshop_csv_url_de"
:disabled="saving"
placeholder="https://letzshop.lu/feed/de/products.csv"
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"
>
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
URL for German language product feed
</span>
</label>
</div>
</div>
<!-- Save Button -->
<div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
<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-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>
</div>
{% endblock %}
{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/vendor-edit.js') }}"></script>
{% endblock %}