feat: add admin frontend for subscription and billing management
Add admin pages for managing subscription tiers, vendor subscriptions, and billing history: - Subscription Tiers page: Create, edit, activate/deactivate tiers - Vendor Subscriptions page: View/edit subscriptions, custom limits - Billing History page: View invoices with filters and PDF links - Stats dashboard with MRR/ARR calculations Also includes: - Pydantic schemas for billing operations (models/schema/billing.py) - Admin subscription service layer for database operations - Security validation fixes (SEC-001, SEC-021, SEC-022) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
207
app/templates/admin/billing-history.html
Normal file
207
app/templates/admin/billing-history.html
Normal file
@@ -0,0 +1,207 @@
|
||||
{# app/templates/admin/billing-history.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
|
||||
{% from 'shared/macros/headers.html' import page_header_refresh %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper, table_header, th_sortable %}
|
||||
{% from 'shared/macros/pagination.html' import pagination_full %}
|
||||
|
||||
{% block title %}Billing History{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminBillingHistory(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ page_header_refresh('Billing History') }}
|
||||
|
||||
{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
|
||||
|
||||
{{ error_state('Error', show_condition='error') }}
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
||||
<!-- Total Invoices -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<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="pagination.total || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paid -->
|
||||
<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:text-green-100 dark:bg-green-500">
|
||||
<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="statusCounts.paid || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Open -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||
<span x-html="$icon('clock', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Open</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="statusCounts.open || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Failed -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
|
||||
<span x-html="$icon('x-circle', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Failed</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="statusCounts.uncollectible || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="mb-4 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<!-- Vendor Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<select
|
||||
x-model="filters.vendor_id"
|
||||
@change="loadInvoices()"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="">All Vendors</option>
|
||||
<template x-for="vendor in vendors" :key="vendor.id">
|
||||
<option :value="vendor.id" x-text="vendor.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<select
|
||||
x-model="filters.status"
|
||||
@change="loadInvoices()"
|
||||
class="px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
<option value="paid">Paid</option>
|
||||
<option value="open">Open</option>
|
||||
<option value="draft">Draft</option>
|
||||
<option value="uncollectible">Uncollectible</option>
|
||||
<option value="void">Void</option>
|
||||
</select>
|
||||
|
||||
<!-- Reset -->
|
||||
<button
|
||||
@click="resetFilters()"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invoices Table -->
|
||||
{% call table_wrapper() %}
|
||||
<table class="w-full whitespace-nowrap">
|
||||
{% call table_header() %}
|
||||
{{ th_sortable('invoice_date', 'Date', 'sortBy', 'sortOrder') }}
|
||||
<th class="px-4 py-3">Invoice #</th>
|
||||
{{ th_sortable('vendor_name', 'Vendor', 'sortBy', 'sortOrder') }}
|
||||
<th class="px-4 py-3">Description</th>
|
||||
<th class="px-4 py-3 text-right">Amount</th>
|
||||
{{ th_sortable('status', 'Status', 'sortBy', 'sortOrder') }}
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
{% endcall %}
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-if="loading">
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('refresh', 'inline w-6 h-6 animate-spin mr-2')"></span>
|
||||
Loading invoices...
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-if="!loading && invoices.length === 0">
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
No invoices found.
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-for="invoice in invoices" :key="invoice.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400">
|
||||
<td class="px-4 py-3 text-sm" x-text="formatDate(invoice.invoice_date)"></td>
|
||||
<td class="px-4 py-3 text-sm font-mono" x-text="invoice.invoice_number || '-'"></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<p class="font-semibold text-gray-900 dark:text-gray-100" x-text="invoice.vendor_name"></p>
|
||||
<p class="text-xs text-gray-500" x-text="invoice.vendor_code"></p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm max-w-xs truncate" x-text="invoice.description || 'Subscription'"></td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<span class="font-mono font-semibold" x-text="formatCurrency(invoice.total_cents)"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded-full"
|
||||
:class="{
|
||||
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': invoice.status === 'paid',
|
||||
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': invoice.status === 'open',
|
||||
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': invoice.status === 'draft',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200': invoice.status === 'uncollectible',
|
||||
'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400': invoice.status === 'void'
|
||||
}"
|
||||
x-text="invoice.status.toUpperCase()"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<!-- View Invoice -->
|
||||
<a
|
||||
x-show="invoice.hosted_invoice_url"
|
||||
:href="invoice.hosted_invoice_url"
|
||||
target="_blank"
|
||||
class="p-2 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
title="View Invoice"
|
||||
>
|
||||
<span x-html="$icon('external-link', 'w-4 h-4')"></span>
|
||||
</a>
|
||||
<!-- Download PDF -->
|
||||
<a
|
||||
x-show="invoice.invoice_pdf_url"
|
||||
:href="invoice.invoice_pdf_url"
|
||||
target="_blank"
|
||||
class="p-2 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400"
|
||||
title="Download PDF"
|
||||
>
|
||||
<span x-html="$icon('download', 'w-4 h-4')"></span>
|
||||
</a>
|
||||
<!-- View Vendor -->
|
||||
<a
|
||||
:href="'/admin/vendors/' + invoice.vendor_code"
|
||||
class="p-2 text-gray-500 hover:text-green-600 dark:hover:text-green-400"
|
||||
title="View Vendor"
|
||||
>
|
||||
<span x-html="$icon('user', 'w-4 h-4')"></span>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Pagination -->
|
||||
{{ pagination_full() }}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='admin/js/billing-history.js') }}"></script>
|
||||
{% endblock %}
|
||||
@@ -93,6 +93,14 @@
|
||||
{{ menu_item('marketplace-letzshop', '/admin/marketplace/letzshop', 'shopping-cart', 'Letzshop') }}
|
||||
{% endcall %}
|
||||
|
||||
<!-- Billing & Subscriptions Section -->
|
||||
{{ section_header('Billing & Subscriptions', 'billing') }}
|
||||
{% call section_content('billing') %}
|
||||
{{ menu_item('subscription-tiers', '/admin/subscription-tiers', 'tag', 'Subscription Tiers') }}
|
||||
{{ menu_item('subscriptions', '/admin/subscriptions', 'credit-card', 'Vendor Subscriptions') }}
|
||||
{{ menu_item('billing-history', '/admin/billing-history', 'document-text', 'Billing History') }}
|
||||
{% endcall %}
|
||||
|
||||
<!-- Content Management Section -->
|
||||
{{ section_header('Content Management', 'contentMgmt') }}
|
||||
{% call section_content('contentMgmt') %}
|
||||
|
||||
338
app/templates/admin/subscription-tiers.html
Normal file
338
app/templates/admin/subscription-tiers.html
Normal file
@@ -0,0 +1,338 @@
|
||||
{# app/templates/admin/subscription-tiers.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
|
||||
{% from 'shared/macros/headers.html' import page_header_refresh %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper, table_header, th_sortable, empty_state %}
|
||||
{% from 'shared/macros/modals.html' import modal_confirm %}
|
||||
|
||||
{% block title %}Subscription Tiers{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminSubscriptionTiers(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ page_header_refresh('Subscription Tiers') }}
|
||||
|
||||
{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
|
||||
|
||||
{{ error_state('Error', show_condition='error') }}
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
||||
<!-- Total Tiers -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<span x-html="$icon('tag', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Tiers</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="tiers.length">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Tiers -->
|
||||
<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:text-green-100 dark:bg-green-500">
|
||||
<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">Active Tiers</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="tiers.filter(t => t.is_active).length">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Public Tiers -->
|
||||
<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:text-blue-100 dark:bg-blue-500">
|
||||
<span x-html="$icon('eye', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Public Tiers</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="tiers.filter(t => t.is_public).length">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MRR -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||
<span x-html="$icon('currency-euro', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Est. MRR</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats ? formatCurrency(stats.mrr_cents) : '-'">-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters & Actions -->
|
||||
<div class="mb-4 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="flex items-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<input type="checkbox" x-model="includeInactive" @change="loadTiers()" class="mr-2 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700">
|
||||
Show inactive tiers
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="openCreateModal()"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
|
||||
Create Tier
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tiers Table -->
|
||||
{% call table_wrapper() %}
|
||||
<table class="w-full whitespace-nowrap">
|
||||
{% call table_header() %}
|
||||
<th class="px-4 py-3">#</th>
|
||||
{{ th_sortable('code', 'Code', 'sortBy', 'sortOrder') }}
|
||||
{{ th_sortable('name', 'Name', 'sortBy', 'sortOrder') }}
|
||||
<th class="px-4 py-3 text-right">Monthly</th>
|
||||
<th class="px-4 py-3 text-right">Annual</th>
|
||||
<th class="px-4 py-3 text-center">Orders/Mo</th>
|
||||
<th class="px-4 py-3 text-center">Products</th>
|
||||
<th class="px-4 py-3 text-center">Team</th>
|
||||
<th class="px-4 py-3 text-center">Features</th>
|
||||
<th class="px-4 py-3 text-center">Status</th>
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
{% endcall %}
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-if="loading">
|
||||
<tr>
|
||||
<td colspan="11" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('refresh', 'inline w-6 h-6 animate-spin mr-2')"></span>
|
||||
Loading tiers...
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-if="!loading && tiers.length === 0">
|
||||
<tr>
|
||||
<td colspan="11" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
No subscription tiers found.
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-for="(tier, index) in tiers" :key="tier.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400" :class="{ 'opacity-50': !tier.is_active }">
|
||||
<td class="px-4 py-3 text-sm" x-text="tier.display_order"></td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded-full"
|
||||
:class="{
|
||||
'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200': tier.code === 'essential',
|
||||
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': tier.code === 'professional',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': tier.code === 'business',
|
||||
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': tier.code === 'enterprise',
|
||||
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200': !['essential','professional','business','enterprise'].includes(tier.code)
|
||||
}"
|
||||
x-text="tier.code.toUpperCase()"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-gray-100" x-text="tier.name"></td>
|
||||
<td class="px-4 py-3 text-sm text-right font-mono" x-text="formatCurrency(tier.price_monthly_cents)"></td>
|
||||
<td class="px-4 py-3 text-sm text-right font-mono" x-text="tier.price_annual_cents ? formatCurrency(tier.price_annual_cents) : '-'"></td>
|
||||
<td class="px-4 py-3 text-sm text-center" x-text="tier.orders_per_month || 'Unlimited'"></td>
|
||||
<td class="px-4 py-3 text-sm text-center" x-text="tier.products_limit || 'Unlimited'"></td>
|
||||
<td class="px-4 py-3 text-sm text-center" x-text="tier.team_members || 'Unlimited'"></td>
|
||||
<td class="px-4 py-3 text-sm text-center">
|
||||
<span class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded" x-text="(tier.features || []).length"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span x-show="tier.is_active && tier.is_public" class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full dark:bg-green-900 dark:text-green-200">Active</span>
|
||||
<span x-show="tier.is_active && !tier.is_public" class="px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-200">Private</span>
|
||||
<span x-show="!tier.is_active" class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Inactive</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button @click="openEditModal(tier)" class="p-2 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400" title="Edit">
|
||||
<span x-html="$icon('pencil', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="!tier.is_active"
|
||||
@click="toggleTierStatus(tier, true)"
|
||||
class="p-2 text-gray-500 hover:text-green-600 dark:hover:text-green-400"
|
||||
title="Activate"
|
||||
>
|
||||
<span x-html="$icon('check-circle', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="tier.is_active"
|
||||
@click="toggleTierStatus(tier, false)"
|
||||
class="p-2 text-gray-500 hover:text-red-600 dark:hover:text-red-400"
|
||||
title="Deactivate"
|
||||
>
|
||||
<span x-html="$icon('x-circle', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Create/Edit Modal -->
|
||||
<div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center overflow-auto bg-black bg-opacity-50">
|
||||
<div class="relative w-full max-w-2xl p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800" @click.away="closeModal()">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4" x-text="editingTier ? 'Edit Tier' : 'Create Tier'"></h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Code -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Code</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.code"
|
||||
:disabled="editingTier"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:opacity-50"
|
||||
placeholder="e.g., premium"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.name"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="e.g., Premium Plan"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Price -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Monthly Price (cents)</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.price_monthly_cents"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="e.g., 4900 for 49.00"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Annual Price -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Annual Price (cents)</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.price_annual_cents"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="e.g., 49000 for 490.00"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Orders per Month -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Orders/Month (empty = unlimited)</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.orders_per_month"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="e.g., 100"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Products Limit -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Products Limit (empty = unlimited)</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.products_limit"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="e.g., 200"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Team Members -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Team Members (empty = unlimited)</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.team_members"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="e.g., 3"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Display Order -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Display Order</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.display_order"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="e.g., 1"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Stripe Product ID -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Stripe Product ID</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.stripe_product_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="prod_..."
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Stripe Monthly Price ID -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Stripe Monthly Price ID</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.stripe_price_monthly_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="price_..."
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
|
||||
<textarea
|
||||
x-model="formData.description"
|
||||
rows="2"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Brief description of this tier..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Toggles -->
|
||||
<div class="md:col-span-2 flex gap-6">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" x-model="formData.is_active" class="mr-2 rounded border-gray-300 dark:border-gray-600">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Active</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" x-model="formData.is_public" class="mr-2 rounded border-gray-300 dark:border-gray-600">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Public (visible to vendors)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Actions -->
|
||||
<div class="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="closeModal()"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="saveTier()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!saving" x-text="editingTier ? 'Update' : 'Create'"></span>
|
||||
<span x-show="saving">Saving...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='admin/js/subscription-tiers.js') }}"></script>
|
||||
{% endblock %}
|
||||
327
app/templates/admin/subscriptions.html
Normal file
327
app/templates/admin/subscriptions.html
Normal file
@@ -0,0 +1,327 @@
|
||||
{# app/templates/admin/subscriptions.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
|
||||
{% from 'shared/macros/headers.html' import page_header_refresh %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper, table_header, th_sortable %}
|
||||
{% from 'shared/macros/pagination.html' import pagination_full %}
|
||||
|
||||
{% block title %}Vendor Subscriptions{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminSubscriptions(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ page_header_refresh('Vendor Subscriptions') }}
|
||||
|
||||
{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
|
||||
|
||||
{{ error_state('Error', show_condition='error') }}
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-6">
|
||||
<!-- Total -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<span x-html="$icon('users', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats?.total_subscriptions || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active -->
|
||||
<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:text-green-100 dark:bg-green-500">
|
||||
<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">Active</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats?.active_count || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trial -->
|
||||
<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:text-blue-100 dark:bg-blue-500">
|
||||
<span x-html="$icon('clock', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Trial</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats?.trial_count || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Past Due -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||
<span x-html="$icon('exclamation', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Past Due</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats?.past_due_count || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cancelled -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
|
||||
<span x-html="$icon('x-circle', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Cancelled</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats?.cancelled_count || 0">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MRR -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-emerald-500 bg-emerald-100 rounded-full dark:text-emerald-100 dark:bg-emerald-500">
|
||||
<span x-html="$icon('currency-euro', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">MRR</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats ? formatCurrency(stats.mrr_cents) : '-'">-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="mb-4 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<!-- Search -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<input
|
||||
type="text"
|
||||
x-model="filters.search"
|
||||
@input.debounce.300ms="loadSubscriptions()"
|
||||
placeholder="Search vendor name..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<select
|
||||
x-model="filters.status"
|
||||
@change="loadSubscriptions()"
|
||||
class="px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="trial">Trial</option>
|
||||
<option value="past_due">Past Due</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
<option value="expired">Expired</option>
|
||||
</select>
|
||||
|
||||
<!-- Tier Filter -->
|
||||
<select
|
||||
x-model="filters.tier"
|
||||
@change="loadSubscriptions()"
|
||||
class="px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="">All Tiers</option>
|
||||
<option value="essential">Essential</option>
|
||||
<option value="professional">Professional</option>
|
||||
<option value="business">Business</option>
|
||||
<option value="enterprise">Enterprise</option>
|
||||
</select>
|
||||
|
||||
<!-- Reset -->
|
||||
<button
|
||||
@click="resetFilters()"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subscriptions Table -->
|
||||
{% call table_wrapper() %}
|
||||
<table class="w-full whitespace-nowrap">
|
||||
{% call table_header() %}
|
||||
{{ th_sortable('vendor_name', 'Vendor', 'sortBy', 'sortOrder') }}
|
||||
{{ th_sortable('tier', 'Tier', 'sortBy', 'sortOrder') }}
|
||||
{{ th_sortable('status', 'Status', 'sortBy', 'sortOrder') }}
|
||||
<th class="px-4 py-3 text-center">Orders</th>
|
||||
<th class="px-4 py-3 text-center">Products</th>
|
||||
<th class="px-4 py-3 text-center">Team</th>
|
||||
<th class="px-4 py-3">Period End</th>
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
{% endcall %}
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-if="loading">
|
||||
<tr>
|
||||
<td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('refresh', 'inline w-6 h-6 animate-spin mr-2')"></span>
|
||||
Loading subscriptions...
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-if="!loading && subscriptions.length === 0">
|
||||
<tr>
|
||||
<td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
No subscriptions found.
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-for="sub in subscriptions" :key="sub.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<p class="font-semibold text-gray-900 dark:text-gray-100" x-text="sub.vendor_name"></p>
|
||||
<p class="text-xs text-gray-500" x-text="sub.vendor_code"></p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded-full"
|
||||
:class="{
|
||||
'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200': sub.tier === 'essential',
|
||||
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': sub.tier === 'professional',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': sub.tier === 'business',
|
||||
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': sub.tier === 'enterprise'
|
||||
}"
|
||||
x-text="sub.tier.charAt(0).toUpperCase() + sub.tier.slice(1)"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded-full"
|
||||
:class="{
|
||||
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': sub.status === 'active',
|
||||
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': sub.status === 'trial',
|
||||
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': sub.status === 'past_due',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200': sub.status === 'cancelled',
|
||||
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': sub.status === 'expired'
|
||||
}"
|
||||
x-text="sub.status.replace('_', ' ').toUpperCase()"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span x-text="sub.orders_this_period"></span>
|
||||
<span class="text-gray-400">/</span>
|
||||
<span x-text="sub.orders_limit || '∞'"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span x-text="sub.products_limit || '∞'"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span x-text="sub.team_members_limit || '∞'"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm" x-text="formatDate(sub.period_end)"></td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button @click="openEditModal(sub)" class="p-2 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400" title="Edit">
|
||||
<span x-html="$icon('pencil', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<a :href="'/admin/vendors/' + sub.vendor_code" class="p-2 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400" title="View Vendor">
|
||||
<span x-html="$icon('external-link', 'w-4 h-4')"></span>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Pagination -->
|
||||
{{ pagination_full() }}
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center overflow-auto bg-black bg-opacity-50">
|
||||
<div class="relative w-full max-w-lg p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800" @click.away="closeModal()">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Edit Subscription</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4" x-text="'Vendor: ' + (editingSub?.vendor_name || '')"></p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Tier -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tier</label>
|
||||
<select
|
||||
x-model="formData.tier"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="essential">Essential</option>
|
||||
<option value="professional">Professional</option>
|
||||
<option value="business">Business</option>
|
||||
<option value="enterprise">Enterprise</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
|
||||
<select
|
||||
x-model="formData.status"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="trial">Trial</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="past_due">Past Due</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
<option value="expired">Expired</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Custom Limits Section -->
|
||||
<div class="pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Custom Limit Overrides</h4>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Leave empty to use tier defaults</p>
|
||||
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Orders/Month</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.custom_orders_limit"
|
||||
placeholder="Tier default"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Products</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.custom_products_limit"
|
||||
placeholder="Tier default"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Team Members</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="formData.custom_team_limit"
|
||||
placeholder="Tier default"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Actions -->
|
||||
<div class="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="closeModal()"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="saveSubscription()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!saving">Save Changes</span>
|
||||
<span x-show="saving">Saving...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='admin/js/subscriptions.js') }}"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user