Samir Boulahtit
8ee8c398ce
Some checks failed
Add defer attribute to 145 <script> tags across 103 template files (PERF-067) and loading="lazy" to 22 <img> tags across 13 template files (PERF-058). Both improve page load performance. Validator totals: 0 errors, 2 warnings, 1360 info (down from 1527). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
163 lines
7.9 KiB
HTML
163 lines
7.9 KiB
HTML
{# app/modules/loyalty/templates/loyalty/admin/analytics.html #}
|
|
{% extends "admin/base.html" %}
|
|
{% from 'shared/macros/headers.html' import page_header %}
|
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
|
|
|
{% block title %}Loyalty Analytics{% endblock %}
|
|
|
|
{% block alpine_data %}adminLoyaltyAnalytics(){% endblock %}
|
|
|
|
{% block content %}
|
|
{{ page_header('Loyalty Analytics') }}
|
|
|
|
{{ loading_state('Loading analytics...') }}
|
|
|
|
{{ error_state('Error loading analytics') }}
|
|
|
|
<!-- Analytics Dashboard -->
|
|
<div x-show="!loading">
|
|
<!-- Summary Stats -->
|
|
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
|
<!-- Total Programs -->
|
|
<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('gift', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Total Programs
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_programs)">
|
|
0
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
<span x-text="stats.active_programs"></span> active
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Members -->
|
|
<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('users', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Total Members
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_cards)">
|
|
0
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
<span x-text="formatNumber(stats.active_cards)"></span> active
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Points Issued (30d) -->
|
|
<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('trending-up', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Points Issued (30d)
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.points_issued_30d)">
|
|
0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Points Redeemed (30d) -->
|
|
<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:text-orange-100 dark:bg-orange-500">
|
|
<span x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Points Redeemed (30d)
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.points_redeemed_30d)">
|
|
0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Metrics -->
|
|
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
|
<!-- Transactions Overview -->
|
|
<div class="px-4 py-5 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">
|
|
<span x-html="$icon('chart-bar', 'inline w-5 h-5 mr-2')"></span>
|
|
Transaction Activity (30 Days)
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Total Transactions</span>
|
|
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.transactions_30d)">0</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Merchants with Programs</span>
|
|
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.merchants_with_programs)">0</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Redemption Rate</span>
|
|
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="redemptionRate + '%'">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Points Balance Overview -->
|
|
<div class="px-4 py-5 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">
|
|
<span x-html="$icon('currency-dollar', 'inline w-5 h-5 mr-2')"></span>
|
|
Points Overview
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex items-center justify-between mb-1">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Points Issued vs Redeemed (30d)</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
|
|
<div class="h-4 rounded-full flex">
|
|
<div class="bg-green-500 rounded-l-full" :style="'width: ' + issuedPercentage + '%'"></div>
|
|
<div class="bg-orange-500 rounded-r-full" :style="'width: ' + redeemedPercentage + '%'"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
<span><span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-1"></span>Issued: <span x-text="formatNumber(stats.points_issued_30d)"></span></span>
|
|
<span><span class="inline-block w-3 h-3 bg-orange-500 rounded-full mr-1"></span>Redeemed: <span x-text="formatNumber(stats.points_redeemed_30d)"></span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div class="px-4 py-5 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">
|
|
<span x-html="$icon('link', 'inline w-5 h-5 mr-2')"></span>
|
|
Quick Links
|
|
</h3>
|
|
<div class="flex flex-wrap gap-3">
|
|
<a href="/admin/loyalty/programs"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 dark:text-purple-300 dark:bg-purple-900/30 dark:hover:bg-purple-900/50">
|
|
<span x-html="$icon('gift', 'w-4 h-4 mr-2')"></span>
|
|
View All Programs
|
|
</a>
|
|
<a href="/admin/merchants"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 bg-blue-100 rounded-lg hover:bg-blue-200 dark:text-blue-300 dark:bg-blue-900/30 dark:hover:bg-blue-900/50">
|
|
<span x-html="$icon('building-office', 'w-4 h-4 mr-2')"></span>
|
|
Manage Merchants
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script defer src="{{ url_for('loyalty_static', path='admin/js/loyalty-analytics.js') }}"></script>
|
|
{% endblock %}
|