You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
670 lines
28 KiB
670 lines
28 KiB
{% extends "base.html" %}
|
|
|
|
{% block title %}Batch #{{ batch.id }} - Plutus{% endblock %}
|
|
|
|
{% block content %}
|
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
|
<ul>
|
|
<li><a href="{{ url_for('main.index') }}">Dashboard</a></li>
|
|
<li><a href="{{ url_for('main.batch_list') }}">Payment Batches</a></li>
|
|
<li class="is-active"><a href="#" aria-current="page">Batch #{{ batch.id }}</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<div>
|
|
<h1 class="title">Payment Batch #{{ batch.id }}</h1>
|
|
<p class="subtitle">Created: {{ batch.Created.strftime('%Y-%m-%d %H:%M:%S') if batch.Created else 'Unknown' }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<a class="button is-light" href="{{ url_for('main.batch_list') }}">
|
|
<span class="icon"><i class="fas fa-arrow-left"></i></span>
|
|
<span>Back to Batches</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary Statistics -->
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="box">
|
|
<div class="level">
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="heading">Total Payments</p>
|
|
<p class="title">{{ summary.payment_count or 0 }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="heading">Payment Amount</p>
|
|
<p class="title">{{ summary.total_amount | currency }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="heading">Stripe Fees</p>
|
|
<p class="title">{{ summary.total_fees | currency }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<div class="box">
|
|
<div class="has-text-centered">
|
|
<p class="heading">Successful</p>
|
|
<p class="title has-text-success">{{ summary.successful_count or 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="box">
|
|
<div class="has-text-centered">
|
|
<p class="heading">Failed</p>
|
|
<p class="title has-text-danger">{{ summary.failed_count or 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="box">
|
|
<div class="has-text-centered">
|
|
<p class="heading">Errors</p>
|
|
<p class="title" style="color: #ff8c00;">{{ summary.error_count or 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="box">
|
|
<div class="has-text-centered">
|
|
<p class="heading">Success Rate</p>
|
|
{% if summary.payment_count and summary.payment_count > 0 %}
|
|
{% set success_rate = (summary.successful_count or 0) / summary.payment_count * 100 %}
|
|
<p class="title {% if success_rate >= 90 %}has-text-success{% elif success_rate >= 70 %}has-text-warning{% else %}has-text-danger{% endif %}">
|
|
{{ "%.1f"|format(success_rate) }}%
|
|
</p>
|
|
{% else %}
|
|
<p class="title">0%</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Details Table -->
|
|
<div class="box">
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<h2 class="title is-4">Payment Details</h2>
|
|
</div>
|
|
<div class="level-right">
|
|
<div class="field">
|
|
<p class="control has-icons-left">
|
|
<input class="input" type="text" id="searchInput" placeholder="Search Splynx ID, Customer ID, Payment Intent...">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Controls -->
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div class="control">
|
|
<label class="label is-small">Filter by Status:</label>
|
|
<div class="select is-small">
|
|
<select id="statusFilter">
|
|
<option value="all">All Payments</option>
|
|
<option value="success">Successful Only</option>
|
|
<option value="failed">Failed Only</option>
|
|
<option value="pending">Pending Only</option>
|
|
<option value="followup">Follow Up Required</option>
|
|
<option value="refund">Refunds Only</option>
|
|
<option value="error">Has Errors</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<label class="label is-small">Filter by Payment Method:</label>
|
|
<div class="select is-small">
|
|
<select id="paymentMethodFilter">
|
|
<option value="all">All Methods</option>
|
|
<!-- Options will be populated by JavaScript -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<label class="label is-small">Sort by:</label>
|
|
<div class="select is-small">
|
|
<select id="sortFilter">
|
|
<option value="splynx_asc">Splynx ID (Ascending)</option>
|
|
<option value="splynx_desc">Splynx ID (Descending)</option>
|
|
<option value="amount_asc">Amount (Low to High)</option>
|
|
<option value="amount_desc">Amount (High to Low)</option>
|
|
<option value="status">Status</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<button class="button is-small is-info" onclick="clearFilters()">
|
|
<span class="icon"><i class="fas fa-times"></i></span>
|
|
<span>Clear Filters</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Counter -->
|
|
<div class="notification is-info is-light" id="filterResults" style="display: none;">
|
|
<span id="resultCount">0</span> of {{ payments|length }} payments shown
|
|
</div>
|
|
|
|
{% if payments %}
|
|
<div class="table-container">
|
|
<table class="table is-fullwidth is-striped is-hoverable" id="paymentsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Payment ID</th>
|
|
<th>Splynx ID</th>
|
|
<th>Stripe Customer</th>
|
|
<th>Payment Intent</th>
|
|
<th>Follow Up</th>
|
|
<th>Last Check</th>
|
|
<th>Payment Method</th>
|
|
<th>Stripe Fee</th>
|
|
<th>Amount</th>
|
|
<th>Data</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="paymentsTableBody">
|
|
{% for payment in payments %}
|
|
{% set row_class = '' %}
|
|
{% if payment.Success == True %}
|
|
{% set row_class = 'has-background-success-light' %}
|
|
{% elif payment.Success == False and payment.PI_FollowUp %}
|
|
{% set row_class = 'has-background-warning-light' %}
|
|
{% elif payment.Success == False and payment.Error %}
|
|
{% set row_class = 'has-background-danger-light' %}
|
|
{% elif payment.Success == None %}
|
|
{% set row_class = 'has-background-info-light' %}
|
|
{% endif %}
|
|
|
|
<tr class="{{ row_class }}">
|
|
<td>
|
|
<a href="{{ url_for('main.payment_detail', payment_id=payment.id) }}"
|
|
class="has-text-weight-semibold has-text-primary">
|
|
#{{ payment.id }}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
{% if payment.Splynx_ID %}
|
|
<a href="https://billing.interphone.com.au/admin/customers/view?id={{ payment.Splynx_ID }}"
|
|
target="_blank" class="has-text-weight-semibold">
|
|
{{ payment.Splynx_ID }}
|
|
</a>
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if payment.Success == True %}
|
|
<code class="is-small has-background-success has-text-white">{{ payment.Stripe_Customer_ID or '-' }}</code>
|
|
{% elif payment.Success == False and payment.PI_FollowUp %}
|
|
<code class="is-small has-background-warning has-text-black">{{ payment.Stripe_Customer_ID or '-' }}</code>
|
|
{% elif payment.Success == False and payment.Error %}
|
|
<code class="is-small has-background-danger has-text-white">{{ payment.Stripe_Customer_ID or '-' }}</code>
|
|
{% elif payment.Success == None %}
|
|
<code class="is-small has-background-info has-text-white">{{ payment.Stripe_Customer_ID or '-' }}</code>
|
|
{% else %}
|
|
<code class="is-small has-background-grey-light has-text-black">{{ payment.Stripe_Customer_ID or '-' }}</code>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if payment.Success == True %}
|
|
<code class="is-small has-background-success has-text-white">{{ payment.Payment_Intent or '-' }}</code>
|
|
{% elif payment.Success == False and payment.PI_FollowUp %}
|
|
<code class="is-small has-background-warning has-text-black">{{ payment.Payment_Intent or '-' }}</code>
|
|
{% elif payment.Success == False and payment.Error %}
|
|
<code class="is-small has-background-danger has-text-white">{{ payment.Payment_Intent or '-' }}</code>
|
|
{% elif payment.Success == None %}
|
|
<code class="is-small has-background-info has-text-white">{{ payment.Payment_Intent or '-' }}</code>
|
|
{% else %}
|
|
<code class="is-small has-background-grey-light has-text-black">{{ payment.Payment_Intent or '-' }}</code>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if payment.PI_FollowUp %}
|
|
<span class="tag is-warning">Follow Up</span>
|
|
{% else %}
|
|
<span class="tag is-light">No</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{{ payment.PI_Last_Check.strftime('%Y-%m-%d %H:%M') if payment.PI_Last_Check else '-' }}
|
|
</td>
|
|
<td>
|
|
{% if payment.Payment_Method %}
|
|
<span class="tag is-info is-light">{{ payment.Payment_Method }}</span>
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if payment.Fee_Stripe %}
|
|
{{ payment.Fee_Stripe | currency }}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if payment.Payment_Amount %}
|
|
<strong>{{ payment.Payment_Amount | currency }}</strong>
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="buttons are-small">
|
|
{% if payment.PI_JSON %}
|
|
<button class="button is-info is-outlined" onclick="showModal('json-modal-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-code"></i></span>
|
|
<span>JSON</span>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if payment.PI_FollowUp_JSON %}
|
|
<button class="button is-primary is-outlined" onclick="showModal('followup-modal-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-redo"></i></span>
|
|
<span>Follow Up</span>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if payment.Refund_JSON %}
|
|
<button class="button is-outlined" style="border-color: #9370db; color: #9370db;" onclick="showModal('refund-modal-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-undo"></i></span>
|
|
<span>Refund</span>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if payment.Error %}
|
|
<button class="button is-danger is-outlined" onclick="showModal('error-modal-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
|
|
<span>Error</span>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{% if payment.Refund == True %}
|
|
<span class="status-badge refund">
|
|
<i class="fas fa-undo"></i>
|
|
Refund
|
|
</span>
|
|
{% elif payment.Success == True %}
|
|
<span class="status-badge success">
|
|
<i class="fas fa-check"></i>
|
|
Success
|
|
</span>
|
|
{% elif payment.Success == False and payment.PI_FollowUp %}
|
|
<span class="status-badge pending">
|
|
<i class="fas fa-clock"></i>
|
|
Pending
|
|
</span>
|
|
{% elif payment.Success == False %}
|
|
<span class="status-badge failed">
|
|
<i class="fas fa-times"></i>
|
|
Failed
|
|
</span>
|
|
{% else %}
|
|
<span class="status-badge pending">
|
|
<i class="fas fa-clock"></i>
|
|
Pending
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="notification is-info">
|
|
<p>No payments found in this batch.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Modals for JSON/Error data -->
|
|
{% for payment in payments %}
|
|
<!-- PI_JSON Modal -->
|
|
{% if payment.PI_JSON %}
|
|
<div class="modal" id="json-modal-{{ payment.id }}">
|
|
<div class="modal-background" onclick="hideModal('json-modal-{{ payment.id }}')"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Payment Intent JSON - Payment #{{ payment.id }}</p>
|
|
<button class="delete" aria-label="close" onclick="hideModal('json-modal-{{ payment.id }}')"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<pre><code class="language-json">{{ payment.PI_JSON | format_json }}</code></pre>
|
|
<button class="button is-small is-info" onclick="copyFormattedJSON('json-content-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-copy"></i></span>
|
|
<span>Copy JSON</span>
|
|
</button>
|
|
<div id="json-content-{{ payment.id }}" style="display: none;">{{ payment.PI_JSON | format_json }}</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- PI_FollowUp_JSON Modal -->
|
|
{% if payment.PI_FollowUp_JSON %}
|
|
<div class="modal" id="followup-modal-{{ payment.id }}">
|
|
<div class="modal-background" onclick="hideModal('followup-modal-{{ payment.id }}')"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Follow Up JSON - Payment #{{ payment.id }}</p>
|
|
<button class="delete" aria-label="close" onclick="hideModal('followup-modal-{{ payment.id }}')"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<pre><code class="language-json">{{ payment.PI_FollowUp_JSON | format_json }}</code></pre>
|
|
<button class="button is-small is-primary" onclick="copyFormattedJSON('followup-content-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-copy"></i></span>
|
|
<span>Copy JSON</span>
|
|
</button>
|
|
<div id="followup-content-{{ payment.id }}" style="display: none;">{{ payment.PI_FollowUp_JSON | format_json }}</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Refund_JSON Modal -->
|
|
{% if payment.Refund_JSON %}
|
|
<div class="modal" id="refund-modal-{{ payment.id }}">
|
|
<div class="modal-background" onclick="hideModal('refund-modal-{{ payment.id }}')"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Refund JSON - Payment #{{ payment.id }}</p>
|
|
<button class="delete" aria-label="close" onclick="hideModal('refund-modal-{{ payment.id }}')"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<pre><code class="language-json">{{ payment.Refund_JSON | format_json }}</code></pre>
|
|
<button class="button is-small" style="border-color: #9370db; color: #9370db;" onclick="copyFormattedJSON('refund-content-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-copy"></i></span>
|
|
<span>Copy JSON</span>
|
|
</button>
|
|
<div id="refund-content-{{ payment.id }}" style="display: none;">{{ payment.Refund_JSON | format_json }}</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Error Modal -->
|
|
{% if payment.Error %}
|
|
<div class="modal" id="error-modal-{{ payment.id }}">
|
|
<div class="modal-background" onclick="hideModal('error-modal-{{ payment.id }}')"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Payment Error - Payment #{{ payment.id }}</p>
|
|
<button class="delete" aria-label="close" onclick="hideModal('error-modal-{{ payment.id }}')"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<div class="notification is-danger is-light">
|
|
<pre>{{ payment.Error }}</pre>
|
|
</div>
|
|
<button class="button is-small is-danger" onclick="copyFormattedJSON('error-content-{{ payment.id }}')">
|
|
<span class="icon"><i class="fas fa-copy"></i></span>
|
|
<span>Copy Error</span>
|
|
</button>
|
|
<div id="error-content-{{ payment.id }}" style="display: none;">{{ payment.Error }}</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<script>
|
|
// Payment filtering and sorting functionality
|
|
let allPayments = [];
|
|
let filteredPayments = [];
|
|
|
|
// Initialize payment data and filters when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializePayments();
|
|
populatePaymentMethodFilter();
|
|
setupEventListeners();
|
|
});
|
|
|
|
function initializePayments() {
|
|
const tableBody = document.getElementById('paymentsTableBody');
|
|
const rows = tableBody.querySelectorAll('tr');
|
|
|
|
allPayments = Array.from(rows).map(row => {
|
|
const cells = row.querySelectorAll('td');
|
|
return {
|
|
element: row,
|
|
paymentId: cells[0] ? (cells[0].textContent.trim() || '') : '',
|
|
splynxId: cells[1] ? (cells[1].textContent.trim() || '') : '',
|
|
stripeCustomerId: cells[2] ? (cells[2].textContent.trim() || '') : '',
|
|
paymentIntent: cells[3] ? (cells[3].textContent.trim() || '') : '',
|
|
followUp: cells[4] ? (cells[4].textContent.trim() || '') : '',
|
|
lastCheck: cells[5] ? (cells[5].textContent.trim() || '') : '',
|
|
paymentMethod: cells[6] ? (cells[6].textContent.trim() || '') : '',
|
|
stripeFee: cells[7] ? (cells[7].textContent.trim() || '') : '',
|
|
amount: cells[8] ? (cells[8].textContent.trim() || '') : '',
|
|
status: cells[10] ? (cells[10].textContent.trim() || '') : '',
|
|
success: row.classList.contains('has-background-success-light'),
|
|
failed: row.classList.contains('has-background-danger-light'),
|
|
pending: row.classList.contains('has-background-info-light'),
|
|
followUpRequired: row.classList.contains('has-background-warning-light'),
|
|
refund: cells[10] && cells[10].textContent.includes('Refund'),
|
|
hasError: cells[9] && cells[9].querySelector('button.is-danger')
|
|
};
|
|
});
|
|
|
|
filteredPayments = [...allPayments];
|
|
updateResultCount();
|
|
}
|
|
|
|
function populatePaymentMethodFilter() {
|
|
const select = document.getElementById('paymentMethodFilter');
|
|
const methods = [...new Set(allPayments
|
|
.map(p => p.paymentMethod)
|
|
.filter(method => method && method !== '-')
|
|
)].sort();
|
|
|
|
// Clear existing options except "All Methods"
|
|
select.innerHTML = '<option value="all">All Methods</option>';
|
|
|
|
methods.forEach(method => {
|
|
const option = document.createElement('option');
|
|
option.value = method;
|
|
option.textContent = method;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function setupEventListeners() {
|
|
document.getElementById('searchInput').addEventListener('input', applyFilters);
|
|
document.getElementById('statusFilter').addEventListener('change', applyFilters);
|
|
document.getElementById('paymentMethodFilter').addEventListener('change', applyFilters);
|
|
document.getElementById('sortFilter').addEventListener('change', applyFilters);
|
|
}
|
|
|
|
function applyFilters() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
const paymentMethodFilter = document.getElementById('paymentMethodFilter').value;
|
|
const sortFilter = document.getElementById('sortFilter').value;
|
|
|
|
// Filter payments
|
|
filteredPayments = allPayments.filter(payment => {
|
|
// Search filter
|
|
const searchMatch = !searchTerm ||
|
|
payment.paymentId.toLowerCase().includes(searchTerm) ||
|
|
payment.splynxId.toLowerCase().includes(searchTerm) ||
|
|
payment.stripeCustomerId.toLowerCase().includes(searchTerm) ||
|
|
payment.paymentIntent.toLowerCase().includes(searchTerm);
|
|
|
|
// Status filter
|
|
let statusMatch = true;
|
|
switch(statusFilter) {
|
|
case 'success':
|
|
statusMatch = payment.success;
|
|
break;
|
|
case 'failed':
|
|
statusMatch = payment.failed;
|
|
break;
|
|
case 'pending':
|
|
statusMatch = payment.pending;
|
|
break;
|
|
case 'followup':
|
|
statusMatch = payment.followUpRequired;
|
|
break;
|
|
case 'refund':
|
|
statusMatch = payment.refund;
|
|
break;
|
|
case 'error':
|
|
statusMatch = payment.hasError;
|
|
break;
|
|
}
|
|
|
|
// Payment method filter
|
|
const methodMatch = paymentMethodFilter === 'all' ||
|
|
payment.paymentMethod === paymentMethodFilter;
|
|
|
|
return searchMatch && statusMatch && methodMatch;
|
|
});
|
|
|
|
// Sort payments
|
|
sortPayments(sortFilter);
|
|
|
|
// Update display
|
|
updateTable();
|
|
updateResultCount();
|
|
}
|
|
|
|
function sortPayments(sortBy) {
|
|
switch(sortBy) {
|
|
case 'splynx_asc':
|
|
filteredPayments.sort((a, b) => parseInt(a.splynxId) - parseInt(b.splynxId));
|
|
break;
|
|
case 'splynx_desc':
|
|
filteredPayments.sort((a, b) => parseInt(b.splynxId) - parseInt(a.splynxId));
|
|
break;
|
|
case 'amount_asc':
|
|
filteredPayments.sort((a, b) => parseFloat(a.amount.replace(/[$,]/g, '')) - parseFloat(b.amount.replace(/[$,]/g, '')));
|
|
break;
|
|
case 'amount_desc':
|
|
filteredPayments.sort((a, b) => parseFloat(b.amount.replace(/[$,]/g, '')) - parseFloat(a.amount.replace(/[$,]/g, '')));
|
|
break;
|
|
case 'status':
|
|
filteredPayments.sort((a, b) => a.status.localeCompare(b.status));
|
|
break;
|
|
}
|
|
}
|
|
|
|
function updateTable() {
|
|
const tableBody = document.getElementById('paymentsTableBody');
|
|
|
|
// Hide all rows first
|
|
allPayments.forEach(payment => {
|
|
payment.element.style.display = 'none';
|
|
});
|
|
|
|
// Show filtered rows
|
|
filteredPayments.forEach(payment => {
|
|
payment.element.style.display = '';
|
|
tableBody.appendChild(payment.element); // Re-append to maintain sort order
|
|
});
|
|
}
|
|
|
|
function updateResultCount() {
|
|
const resultCount = document.getElementById('resultCount');
|
|
const filterResults = document.getElementById('filterResults');
|
|
|
|
resultCount.textContent = filteredPayments.length;
|
|
|
|
if (filteredPayments.length === allPayments.length) {
|
|
filterResults.style.display = 'none';
|
|
} else {
|
|
filterResults.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('searchInput').value = '';
|
|
document.getElementById('statusFilter').value = 'all';
|
|
document.getElementById('paymentMethodFilter').value = 'all';
|
|
document.getElementById('sortFilter').value = 'splynx_asc';
|
|
applyFilters();
|
|
}
|
|
|
|
// Modal functionality
|
|
function showModal(modalId) {
|
|
document.getElementById(modalId).classList.add('is-active');
|
|
}
|
|
|
|
function hideModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('is-active');
|
|
}
|
|
|
|
// Copy to clipboard functionality
|
|
function copyFormattedJSON(elementId) {
|
|
const element = document.getElementById(elementId);
|
|
const text = element.textContent || element.innerText;
|
|
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
// Show temporary success message
|
|
const button = event.target.closest('button');
|
|
const originalText = button.innerHTML;
|
|
button.innerHTML = '<span class="icon"><i class="fas fa-check"></i></span><span>Copied!</span>';
|
|
button.classList.add('is-success');
|
|
|
|
setTimeout(function() {
|
|
button.innerHTML = originalText;
|
|
button.classList.remove('is-success');
|
|
}, 2000);
|
|
}).catch(function(err) {
|
|
console.error('Failed to copy text: ', err);
|
|
// Fallback for older browsers
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = text;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
const button = event.target.closest('button');
|
|
const originalText = button.innerHTML;
|
|
button.innerHTML = '<span class="icon"><i class="fas fa-check"></i></span><span>Copied!</span>';
|
|
button.classList.add('is-success');
|
|
|
|
setTimeout(function() {
|
|
button.innerHTML = originalText;
|
|
button.classList.remove('is-success');
|
|
}, 2000);
|
|
} catch (fallbackErr) {
|
|
console.error('Fallback copy failed: ', fallbackErr);
|
|
}
|
|
document.body.removeChild(textArea);
|
|
});
|
|
}
|
|
|
|
// Close modal on Escape key
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Escape') {
|
|
const activeModals = document.querySelectorAll('.modal.is-active');
|
|
activeModals.forEach(modal => modal.classList.remove('is-active'));
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|