Samir Boulahtit
6acd783754
Some checks failed
Extract analytics stat cards, points activity, and location breakdown into a shared partial used by admin, merchant, and store dashboards. Add merchant stats API endpoint and client-side merchant filter on admin analytics page. Extend stats schema with new_this_month and estimated_liability_cents fields. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
204 lines
11 KiB
HTML
204 lines
11 KiB
HTML
{# app/modules/loyalty/templates/loyalty/shared/analytics-stats.html #}
|
|
{#
|
|
Shared analytics stats partial. Set these variables before including:
|
|
- show_programs_card (bool): Show "Total Programs" instead of "Total Members" in first card
|
|
- show_locations (bool): Show location breakdown table
|
|
- show_merchants_metric (bool): Show "Merchants with Programs" in Member Activity
|
|
#}
|
|
|
|
<!-- Summary Stats Cards -->
|
|
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
|
{% if show_programs_card %}
|
|
<!-- Total Programs (admin) -->
|
|
<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>
|
|
{% else %}
|
|
<!-- 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-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 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>
|
|
{% endif %}
|
|
|
|
<!-- Active 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-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">
|
|
{% if show_programs_card %}Total Members{% else %}Active Members{% endif %}
|
|
</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200"
|
|
x-text="formatNumber({% if show_programs_card %}stats.total_cards{% else %}stats.active_cards{% endif %})">0</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-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-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>
|
|
|
|
<!-- Transactions (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('chart-bar', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Transactions (30d)</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.transactions_30d)">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Metrics (2-col) -->
|
|
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
|
<!-- Points 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">
|
|
<!-- Progress bar: Issued vs Redeemed (30d) -->
|
|
<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 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 class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Outstanding Balance</span>
|
|
<span class="font-semibold text-purple-600 dark:text-purple-400" x-text="formatNumber(stats.total_points_balance || 0)">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Member Activity -->
|
|
<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('users', 'inline w-5 h-5 mr-2')"></span>
|
|
Member Activity
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Active Members (30d)</span>
|
|
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.active_cards)">0</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">New This Month</span>
|
|
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.new_this_month || 0)">0</span>
|
|
</div>
|
|
{% if show_merchants_metric %}
|
|
<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)">0</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Avg Points Per Member</span>
|
|
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.avg_points_per_member || 0)">0</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- All-Time Statistics -->
|
|
<div class="mb-8 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">All-Time Statistics</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Total Points Issued</p>
|
|
<p class="text-xl font-bold text-gray-900 dark:text-white" x-text="formatNumber(stats.total_points_issued || 0)">0</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Total Points Redeemed</p>
|
|
<p class="text-xl font-bold text-gray-900 dark:text-white" x-text="formatNumber(stats.total_points_redeemed || 0)">0</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Points Redeemed (30d)</p>
|
|
<p class="text-xl font-bold text-gray-900 dark:text-white" x-text="formatNumber(stats.points_redeemed_30d || 0)">0</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Outstanding Liability</p>
|
|
<p class="text-xl font-bold text-gray-900 dark:text-white"
|
|
x-text="'€' + ((stats.estimated_liability_cents || 0) / 100).toFixed(2)">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Breakdown -->
|
|
{% if show_locations %}
|
|
<div x-show="locations && locations.length > 0" class="mb-8 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Location Breakdown</h3>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full whitespace-nowrap">
|
|
<thead>
|
|
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
|
<th class="px-4 py-3">Store</th>
|
|
<th class="px-4 py-3">Enrolled</th>
|
|
<th class="px-4 py-3">Points Earned</th>
|
|
<th class="px-4 py-3">Points Redeemed</th>
|
|
<th class="px-4 py-3">Transactions (30d)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
|
<template x-for="loc in locations" :key="loc.store_id">
|
|
<tr class="text-gray-700 dark:text-gray-400">
|
|
<td class="px-4 py-3 text-sm font-medium" x-text="loc.store_name"></td>
|
|
<td class="px-4 py-3 text-sm" x-text="formatNumber(loc.enrolled_count)"></td>
|
|
<td class="px-4 py-3 text-sm" x-text="formatNumber(loc.points_earned)"></td>
|
|
<td class="px-4 py-3 text-sm" x-text="formatNumber(loc.points_redeemed)"></td>
|
|
<td class="px-4 py-3 text-sm" x-text="formatNumber(loc.transactions_30d)"></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|