Samir Boulahtit
36603178c3
Platform Email Settings (Admin): - Add GET/PUT/DELETE /admin/settings/email/* endpoints - Settings stored in admin_settings table override .env values - Support all providers: SMTP, SendGrid, Mailgun, Amazon SES - Edit mode UI with provider-specific configuration forms - Reset to .env defaults functionality - Test email to verify configuration Vendor Email Settings: - Add VendorEmailSettings model with one-to-one vendor relationship - Migration: v0a1b2c3d4e5_add_vendor_email_settings.py - Service: vendor_email_settings_service.py with tier validation - API endpoints: /vendor/email-settings/* (CRUD, status, verify) - Email tab in vendor settings page with full configuration - Warning banner until email is configured (like billing warnings) - Premium providers (SendGrid, Mailgun, SES) tier-gated to Business+ Email Service Updates: - get_platform_email_config(db) checks DB first, then .env - Configurable provider classes accept config dict - EmailService uses database-aware providers - Vendor emails use vendor's own SMTP (Wizamart doesn't pay) - "Powered by Wizamart" footer for Essential/Professional tiers - White-label (no footer) for Business/Enterprise tiers Other: - Add scripts/install.py for first-time platform setup - Add make install target - Update init-prod to include email template seeding 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
502 lines
28 KiB
HTML
502 lines
28 KiB
HTML
{# app/templates/vendor/invoices.html #}
|
|
{% extends "vendor/base.html" %}
|
|
|
|
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
|
{% from 'shared/macros/tables.html' import table_wrapper, table_header, simple_pagination %}
|
|
{% from 'shared/macros/modals.html' import form_modal %}
|
|
|
|
{% block title %}Invoices{% endblock %}
|
|
|
|
{% block alpine_data %}vendorInvoices(){% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="/static/vendor/js/invoices.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
{% call page_header_flex(title='Invoices', subtitle='Create and manage invoices for your orders') %}
|
|
<button
|
|
@click="openCreateModal()"
|
|
:disabled="!hasSettings"
|
|
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"
|
|
:title="!hasSettings ? 'Configure invoice settings first' : 'Create new invoice'"
|
|
>
|
|
<span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
|
|
Create Invoice
|
|
</button>
|
|
{{ refresh_button(loading_var='loading', onclick='refreshData()', variant='secondary') }}
|
|
{% endcall %}
|
|
|
|
<!-- Success Message -->
|
|
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 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>
|
|
<button @click="successMessage = ''" class="ml-auto text-green-700 dark:text-green-300 hover:text-green-900">
|
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
{# noqa: FE-003 - Uses dismissible close button not supported by error_state macro #}
|
|
<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300 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>
|
|
<button @click="error = ''" class="ml-auto text-red-700 dark:text-red-300 hover:text-red-900">
|
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Settings Warning -->
|
|
<div x-show="!hasSettings && !loading" x-transition class="mb-6 p-4 bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-400 dark:border-yellow-600 text-yellow-700 dark:text-yellow-300 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 class="flex-1">
|
|
<p class="font-semibold">Invoice Settings Required</p>
|
|
<p class="text-sm mt-1">Configure your company details and invoice preferences before creating invoices.</p>
|
|
<button
|
|
@click="activeTab = 'settings'"
|
|
class="mt-3 inline-flex items-center px-3 py-1.5 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-lg hover:bg-yellow-300"
|
|
>
|
|
<span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
|
|
Configure Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="mb-6">
|
|
<div class="flex border-b border-gray-200 dark:border-gray-700">
|
|
<button
|
|
@click="activeTab = 'invoices'"
|
|
:class="activeTab === 'invoices' ? 'border-purple-600 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
|
|
class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
|
|
>
|
|
<span class="flex items-center">
|
|
<span x-html="$icon('document-text', 'w-4 h-4 mr-2')"></span>
|
|
Invoices
|
|
<span x-show="stats.total_invoices > 0" class="ml-2 px-2 py-0.5 text-xs bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 rounded-full" x-text="stats.total_invoices"></span>
|
|
</span>
|
|
</button>
|
|
<button
|
|
@click="activeTab = 'settings'"
|
|
:class="activeTab === 'settings' ? 'border-purple-600 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
|
|
class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
|
|
>
|
|
<span class="flex items-center">
|
|
<span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
|
|
Settings
|
|
<span x-show="!hasSettings" class="ml-2 w-2 h-2 bg-yellow-500 rounded-full"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoices Tab -->
|
|
<div x-show="activeTab === 'invoices'" x-transition>
|
|
<!-- Stats Cards -->
|
|
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:bg-blue-900">
|
|
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Invoices</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_invoices"></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-gray-500 bg-gray-100 rounded-full dark:bg-gray-700">
|
|
<span x-html="$icon('pencil', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Draft</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.draft_count"></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:bg-orange-900">
|
|
<span x-html="$icon('paper-airplane', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Issued</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.issued_count"></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:bg-green-900">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Paid</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.paid_count"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="mb-4 flex flex-wrap gap-4">
|
|
<select
|
|
x-model="filters.status"
|
|
@change="loadInvoices()"
|
|
class="px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
|
|
>
|
|
<option value="">All Status</option>
|
|
<option value="draft">Draft</option>
|
|
<option value="issued">Issued</option>
|
|
<option value="paid">Paid</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Invoices Table -->
|
|
{% call table_wrapper() %}
|
|
{{ table_header(['Invoice #', 'Customer', 'Date', 'Amount', 'Status', 'Actions']) }}
|
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
|
<template x-if="loading && invoices.length === 0">
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
|
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2')"></span>
|
|
<p>Loading invoices...</p>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template x-if="!loading && invoices.length === 0">
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
|
<span x-html="$icon('document-text', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
|
|
<p class="font-medium">No invoices yet</p>
|
|
<p class="text-sm mt-1" x-show="hasSettings">Click "Create Invoice" to generate your first invoice</p>
|
|
<p class="text-sm mt-1" x-show="!hasSettings">Configure invoice settings first to get started</p>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template x-for="invoice in invoices" :key="invoice.id">
|
|
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center text-sm">
|
|
<div>
|
|
<p class="font-semibold" x-text="invoice.invoice_number"></p>
|
|
<p class="text-xs text-gray-500" x-text="'Order #' + (invoice.order_id || 'N/A')"></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<p x-text="invoice.buyer_name || 'N/A'"></p>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<span x-text="formatDate(invoice.invoice_date)"></span>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm font-semibold">
|
|
<span x-text="formatCurrency(invoice.total_cents, invoice.currency)"></span>
|
|
</td>
|
|
<td class="px-4 py-3 text-xs">
|
|
<span
|
|
class="px-2 py-1 font-semibold leading-tight rounded-full"
|
|
:class="{
|
|
'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300': invoice.status === 'draft',
|
|
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': invoice.status === 'issued',
|
|
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': invoice.status === 'paid',
|
|
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': invoice.status === 'cancelled'
|
|
}"
|
|
x-text="invoice.status.toUpperCase()"
|
|
></span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center space-x-2 text-sm">
|
|
<button
|
|
@click="downloadPDF(invoice)"
|
|
class="flex items-center justify-center px-2 py-1 text-sm text-purple-600 transition-colors duration-150 rounded-md hover:bg-purple-100 dark:hover:bg-purple-900"
|
|
title="Download PDF"
|
|
>
|
|
<span x-html="$icon('download', 'w-4 h-4')"></span>
|
|
</button>
|
|
<button
|
|
x-show="invoice.status === 'draft'"
|
|
@click="updateStatus(invoice, 'issued')"
|
|
class="flex items-center justify-center px-2 py-1 text-sm text-blue-600 transition-colors duration-150 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900"
|
|
title="Mark as Issued"
|
|
>
|
|
<span x-html="$icon('paper-airplane', 'w-4 h-4')"></span>
|
|
</button>
|
|
<button
|
|
x-show="invoice.status === 'issued'"
|
|
@click="updateStatus(invoice, 'paid')"
|
|
class="flex items-center justify-center px-2 py-1 text-sm text-green-600 transition-colors duration-150 rounded-md hover:bg-green-100 dark:hover:bg-green-900"
|
|
title="Mark as Paid"
|
|
>
|
|
<span x-html="$icon('check', 'w-4 h-4')"></span>
|
|
</button>
|
|
<button
|
|
x-show="invoice.status !== 'cancelled' && invoice.status !== 'paid'"
|
|
@click="updateStatus(invoice, 'cancelled')"
|
|
class="flex items-center justify-center px-2 py-1 text-sm text-red-600 transition-colors duration-150 rounded-md hover:bg-red-100 dark:hover:bg-red-900"
|
|
title="Cancel Invoice"
|
|
>
|
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
{% endcall %}
|
|
|
|
<!-- Pagination -->
|
|
{{ simple_pagination(page_var='page', total_var='totalInvoices', limit_var='perPage', on_change='loadInvoices()') }}
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div x-show="activeTab === 'settings'" x-transition>
|
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-6">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Invoice Settings
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Configure your company details and preferences for invoice generation.
|
|
</p>
|
|
|
|
<form @submit.prevent="saveSettings()">
|
|
<!-- Company Information -->
|
|
<div class="mb-8">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
|
|
Company Information
|
|
</h4>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Company Name <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.company_name"
|
|
required
|
|
placeholder="Your Company S.A."
|
|
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"
|
|
/>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Address
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.company_address"
|
|
placeholder="123 Main Street"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
City
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.company_city"
|
|
placeholder="Luxembourg"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Postal Code
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.company_postal_code"
|
|
placeholder="L-1234"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Country
|
|
</label>
|
|
<select
|
|
x-model="settingsForm.company_country"
|
|
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"
|
|
>
|
|
<option value="LU">Luxembourg</option>
|
|
<option value="DE">Germany</option>
|
|
<option value="FR">France</option>
|
|
<option value="BE">Belgium</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
VAT Number
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.vat_number"
|
|
placeholder="LU12345678"
|
|
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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoice Numbering -->
|
|
<div class="mb-8">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
|
|
Invoice Numbering
|
|
</h4>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Invoice Prefix
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.invoice_prefix"
|
|
placeholder="INV"
|
|
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"
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500">Example: INV-2024-00001</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Default VAT Rate (%)
|
|
</label>
|
|
<select
|
|
x-model="settingsForm.default_vat_rate"
|
|
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"
|
|
>
|
|
<option value="17.00">17% (Standard)</option>
|
|
<option value="14.00">14% (Intermediate)</option>
|
|
<option value="8.00">8% (Reduced)</option>
|
|
<option value="3.00">3% (Super-reduced)</option>
|
|
<option value="0.00">0% (Exempt)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bank Details -->
|
|
<div class="mb-8">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
|
|
Bank Details
|
|
</h4>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Bank Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.bank_name"
|
|
placeholder="BCEE Luxembourg"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
IBAN
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.bank_iban"
|
|
placeholder="LU00 0000 0000 0000 0000"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
BIC/SWIFT
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.bank_bic"
|
|
placeholder="BCEELULL"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Payment Terms
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="settingsForm.payment_terms"
|
|
placeholder="Net 30 days"
|
|
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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mb-8">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
|
|
Invoice Footer
|
|
</h4>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Footer Text
|
|
</label>
|
|
<textarea
|
|
x-model="settingsForm.footer_text"
|
|
rows="3"
|
|
placeholder="Thank you for your business!"
|
|
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"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
:disabled="savingSettings"
|
|
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-show="!savingSettings" x-html="$icon('save', 'w-4 h-4 mr-2')"></span>
|
|
<span x-show="savingSettings" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
|
<span x-text="savingSettings ? 'Saving...' : 'Save Settings'"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Invoice Modal -->
|
|
{% call form_modal('createInvoiceModal', 'Create Invoice', show_var='showCreateModal', submit_action='createInvoice()', submit_text='Create Invoice', loading_var='creatingInvoice', loading_text='Creating...', size='sm') %}
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Order ID <span class="text-red-500">*</span>
|
|
</label>
|
|
{# noqa: FE-008 - Order ID is a reference field, not a quantity stepper #}
|
|
<input
|
|
type="number"
|
|
x-model="createForm.order_id"
|
|
required
|
|
placeholder="Enter order ID"
|
|
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"
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Enter the order ID to generate an invoice for
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Notes (Optional)
|
|
</label>
|
|
<textarea
|
|
x-model="createForm.notes"
|
|
rows="3"
|
|
placeholder="Any additional notes for the invoice..."
|
|
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"
|
|
></textarea>
|
|
</div>
|
|
{% endcall %}
|
|
{% endblock %}
|