started implementing stripe
This commit is contained in:
178
templates/admin/customers.html
Normal file
178
templates/admin/customers.html
Normal file
@@ -0,0 +1,178 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user