178 lines
7.9 KiB
HTML
178 lines
7.9 KiB
HTML
{% extends "common/base.html" %}
|
|
{% from "components/header.html" import header %}
|
|
|
|
{% block title %}Customers - Admin{% endblock %}
|
|
|
|
{% block content %}
|
|
{{ header(
|
|
title="Customers",
|
|
description="Manage customer information and subscriptions",
|
|
icon="fa-users"
|
|
) }}
|
|
|
|
<div class="container-fluid">
|
|
{% if customers.items %}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Phone</th>
|
|
<th>Plan</th>
|
|
<th>Status</th>
|
|
<th>Billing Cycle</th>
|
|
<th>Created</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for customer in customers.items %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar-sm me-3">
|
|
<div class="avatar-title bg-primary rounded-circle">
|
|
{{ customer.name[0] if customer.name else customer.email[0] }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">{{ customer.name or 'N/A' }}</h6>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>{{ customer.email }}</td>
|
|
<td>{{ customer.phone or 'N/A' }}</td>
|
|
<td>
|
|
{% if customer.subscription_plan_id %}
|
|
{% set plan = customer.plan %}
|
|
{% if plan %}
|
|
<span class="badge bg-primary">{{ plan.name }}</span>
|
|
{% else %}
|
|
<span class="text-muted">Plan {{ customer.subscription_plan_id }}</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted">No plan</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if customer.subscription_status %}
|
|
{% if customer.subscription_status == 'active' %}
|
|
<span class="badge bg-success">Active</span>
|
|
{% elif customer.subscription_status == 'canceled' %}
|
|
<span class="badge bg-danger">Canceled</span>
|
|
{% elif customer.subscription_status == 'past_due' %}
|
|
<span class="badge bg-warning">Past Due</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ customer.subscription_status }}</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted">No subscription</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if customer.subscription_billing_cycle %}
|
|
<span class="badge bg-info">{{ customer.subscription_billing_cycle.title() }}</span>
|
|
{% else %}
|
|
<span class="text-muted">N/A</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ customer.created_at.strftime('%Y-%m-%d') if customer.created_at else 'N/A' }}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary"
|
|
onclick="viewCustomerDetails({{ customer.id }})">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if customers.pages > 1 %}
|
|
<nav aria-label="Customer pagination">
|
|
<ul class="pagination justify-content-center">
|
|
{% if customers.has_prev %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('admin.customers', page=customers.prev_num) }}">Previous</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% for page_num in customers.iter_pages() %}
|
|
{% if page_num %}
|
|
{% if page_num != customers.page %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('admin.customers', page=page_num) }}">{{ page_num }}</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item active">
|
|
<span class="page-link">{{ page_num }}</span>
|
|
</li>
|
|
{% endif %}
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if customers.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('admin.customers', page=customers.next_num) }}">Next</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="card">
|
|
<div class="card-body text-center py-5">
|
|
<i class="fas fa-users fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">No customers found</h5>
|
|
<p class="text-muted">Customers will appear here once they complete a purchase.</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Customer Details Modal -->
|
|
<div class="modal fade" id="customerDetailsModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customer Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="customerDetailsContent">
|
|
<!-- Content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function viewCustomerDetails(customerId) {
|
|
// Load customer details via AJAX
|
|
fetch(`/admin/customers/${customerId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
document.getElementById('customerDetailsContent').innerHTML = data.html;
|
|
new bootstrap.Modal(document.getElementById('customerDetailsModal')).show();
|
|
} else {
|
|
alert('Failed to load customer details');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Failed to load customer details');
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %} |