1148 lines
38 KiB
HTML
1148 lines
38 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Moniteur de Transactions - WortsPay</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.4/socket.io.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(45deg, #2c3e50, #3498db);
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header p {
|
|
opacity: 0.9;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
padding: 30px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-card h3 {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stat-card p {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.stat-card.success p { color: #27ae60; }
|
|
.stat-card.failed p { color: #e74c3c; }
|
|
.stat-card.pending p { color: #f39c12; }
|
|
.stat-card.total p { color: #3498db; }
|
|
|
|
.table-container {
|
|
padding: 30px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.controls {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-box {
|
|
padding: 10px 15px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
width: 300px;
|
|
}
|
|
|
|
.search-box:focus {
|
|
outline: none;
|
|
border-color: #3498db;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.status-indicator.live {
|
|
background: #27ae60;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
th {
|
|
background: #34495e;
|
|
color: white;
|
|
padding: 15px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.85em;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
td {
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
tr.success {
|
|
background: linear-gradient(90deg, #d5f4e6, #ffffff);
|
|
}
|
|
|
|
tr.failed {
|
|
background: linear-gradient(90deg, #ffeaea, #ffffff);
|
|
}
|
|
|
|
tr.pending {
|
|
background: linear-gradient(90deg, #fff3cd, #ffffff);
|
|
}
|
|
|
|
tr:hover {
|
|
background: #f8f9fa !important;
|
|
transform: scale(1.01);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.timestamp {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
}
|
|
|
|
.amount {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.footer {
|
|
background: #2c3e50;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.new-transaction {
|
|
animation: highlight 3s ease-in-out;
|
|
}
|
|
|
|
@keyframes highlight {
|
|
0% { background-color: #fff3cd; }
|
|
100% { background-color: transparent; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.header {
|
|
padding: 20px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
padding: 20px;
|
|
gap: 15px;
|
|
}
|
|
|
|
.table-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
table {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
th, td {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🔍 Moniteur de Transactions</h1>
|
|
<p>Surveillance en temps réel - WortsPay</p>
|
|
</div>
|
|
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card total">
|
|
<h3>Total</h3>
|
|
<p>69</p>
|
|
</div>
|
|
<div class="stat-card success">
|
|
<h3>Réussies</h3>
|
|
<p>33</p>
|
|
</div>
|
|
<div class="stat-card failed">
|
|
<h3>Échouées</h3>
|
|
<p>19</p>
|
|
</div>
|
|
<div class="stat-card pending">
|
|
<h3>En attente</h3>
|
|
<p>17</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="table-container">
|
|
<div class="controls">
|
|
<span class="status-indicator live"></span>
|
|
<span>En direct</span>
|
|
<input type="text" class="search-box" placeholder="Rechercher une transaction..." id="searchBox">
|
|
<span style="margin-left: auto; color: #666; font-size: 0.9em;">
|
|
Dernière mise à jour: 2025-09-08 13:37:51
|
|
</span>
|
|
</div>
|
|
|
|
<table id="transactionsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Horodatage</th>
|
|
<th>Statut</th>
|
|
<th>ID Client</th>
|
|
<th>Réseau</th>
|
|
<th>Numéro</th>
|
|
<th>Montant</th>
|
|
<th>État</th>
|
|
<th>ID Transaction</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:15:24</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908742</td>
|
|
<td>mtn</td>
|
|
<td>066510283</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:16:32</td>
|
|
<td>🕒</td>
|
|
<td>WPMSPEEDPAY_250908977</td>
|
|
<td>mtn</td>
|
|
<td>066510283</td>
|
|
<td>25977</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:16:36</td>
|
|
<td>🕒</td>
|
|
<td>WPASPEEDPAY_250908868</td>
|
|
<td>airtel</td>
|
|
<td>055878181</td>
|
|
<td>15607</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:16:43</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908977</td>
|
|
<td>mtn</td>
|
|
<td>066510283</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:16:46</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908977</td>
|
|
<td>mtn</td>
|
|
<td>066510283</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:16:49</td>
|
|
<td>✅</td>
|
|
<td>WPASPEEDPAY_250908868</td>
|
|
<td>airtel</td>
|
|
<td>055878181</td>
|
|
<td>15607</td>
|
|
<td>200</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:17:37</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908977</td>
|
|
<td>mtn</td>
|
|
<td>066510283</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:17:40</td>
|
|
<td>🕒</td>
|
|
<td>WPAE2C_250908288</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>33978</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:18:02</td>
|
|
<td>❌</td>
|
|
<td>WPAE2C_250908288</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>33978</td>
|
|
<td>500</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:18:07</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908452</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:18:07</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908452</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:18:44</td>
|
|
<td>✅</td>
|
|
<td>WPASPEEDPAY_250908868</td>
|
|
<td>airtel</td>
|
|
<td>055878181</td>
|
|
<td>15607</td>
|
|
<td>200</td>
|
|
<td>TRSPEED0809202513181757333925</td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:19:05</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908356</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:19:08</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908356</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:19:49</td>
|
|
<td>🕒</td>
|
|
<td>WPMSPEEDPAY_250908720</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:20:12</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908720</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:20:17</td>
|
|
<td>✅</td>
|
|
<td>WPAE2C_250908288</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>33978</td>
|
|
<td>200</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:20:21</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908720</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:20:53</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908720</td>
|
|
<td>mtn</td>
|
|
<td>066777128</td>
|
|
<td>25977</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td>TRSPEED0809202513201757334053</td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:21:07</td>
|
|
<td>✅</td>
|
|
<td>WPAE2C_250908288</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>33978</td>
|
|
<td>200</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:21:14</td>
|
|
<td>✅</td>
|
|
<td>WPAE2C_250908288</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>33978</td>
|
|
<td>200</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:23:13</td>
|
|
<td>🕒</td>
|
|
<td>WPME2C_250908860</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>83315</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:23:40</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908860</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>83315</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:24:06</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908860</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>83315</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:24:14</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908860</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>83315</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:28:57</td>
|
|
<td>🕒</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:29:23</td>
|
|
<td>🕒</td>
|
|
<td>WPME2C_250908589</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>3000</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:29:33</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:30:42</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908589</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>3000</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:31:01</td>
|
|
<td>🕒</td>
|
|
<td>WPMSPEEDPAY_250908104</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:31:06</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908589</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>3000</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:31:08</td>
|
|
<td>🕒</td>
|
|
<td>WPAE2C_250908316</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>5250</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:31:11</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908104</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:31:14</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908589</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>3000</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:31:41</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:32:12</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:32:45</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:33:02</td>
|
|
<td>❌</td>
|
|
<td>WPAE2C_250908316</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>5250</td>
|
|
<td>500</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:33:13</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:33:17</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908104</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:33:17</td>
|
|
<td>🕒</td>
|
|
<td>WPAPELISSA_250908615</td>
|
|
<td>airtel</td>
|
|
<td>044924646</td>
|
|
<td>31110</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:33:21</td>
|
|
<td>🕒</td>
|
|
<td>WPAE2C_250908776</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>5250</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:33:45</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:33:54</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908104</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:34:38</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:34:55</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:35:11</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:35:18</td>
|
|
<td>🕒</td>
|
|
<td>WPAPELISSA_250908871</td>
|
|
<td>airtel</td>
|
|
<td>044924646</td>
|
|
<td>31110</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:35:27</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:35:30</td>
|
|
<td>🕒</td>
|
|
<td>WPME2C_250908420</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>27030</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:35:40</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:35:44</td>
|
|
<td>🕒</td>
|
|
<td>WPME2C_250908683</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>19299</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:35:46</td>
|
|
<td>🕒</td>
|
|
<td>WPAE2C_250908115</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>5250</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:36:05</td>
|
|
<td>❌</td>
|
|
<td>WPAE2C_250908115</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>5250</td>
|
|
<td>500</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:36:05</td>
|
|
<td>❌</td>
|
|
<td>WPAPELISSA_250908871</td>
|
|
<td>airtel</td>
|
|
<td>044924646</td>
|
|
<td>31110</td>
|
|
<td>500</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:36:06</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908683</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>19299</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:36:07</td>
|
|
<td>❌</td>
|
|
<td>WPAE2C_250908776</td>
|
|
<td>airtel</td>
|
|
<td>N/A</td>
|
|
<td>5250</td>
|
|
<td>500</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:36:09</td>
|
|
<td>❌</td>
|
|
<td>WPAPELISSA_250908615</td>
|
|
<td>airtel</td>
|
|
<td>044924646</td>
|
|
<td>31110</td>
|
|
<td>500</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:36:13</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908420</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>27030</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:36:27</td>
|
|
<td>❌</td>
|
|
<td>WPMSPEEDPAY_250908104</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:36:50</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908843</td>
|
|
<td>mtn</td>
|
|
<td>068439884</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:37:07</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908420</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>27030</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:37:11</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908683</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>19299</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:37:19</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908420</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>27030</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:37:22</td>
|
|
<td>🕒</td>
|
|
<td>WPAUBA_250908532</td>
|
|
<td>airtel</td>
|
|
<td>055101001</td>
|
|
<td>5859</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:37:24</td>
|
|
<td>✅</td>
|
|
<td>WPME2C_250908683</td>
|
|
<td>mtn</td>
|
|
<td>N/A</td>
|
|
<td>19299</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="pending">
|
|
<td>2025-09-08 13:37:35</td>
|
|
<td>🕒</td>
|
|
<td>WPMSPEEDPAY_250908770</td>
|
|
<td>mtn</td>
|
|
<td>066664308</td>
|
|
<td>15607</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="failed">
|
|
<td>2025-09-08 13:37:39</td>
|
|
<td>❌</td>
|
|
<td>WPAUBA_250908532</td>
|
|
<td>airtel</td>
|
|
<td>055101001</td>
|
|
<td>5859</td>
|
|
<td>FAILED</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr class="success">
|
|
<td>2025-09-08 13:37:51</td>
|
|
<td>✅</td>
|
|
<td>WPMSPEEDPAY_250908770</td>
|
|
<td>mtn</td>
|
|
<td>066664308</td>
|
|
<td>15607</td>
|
|
<td>SUCCESSFUL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
© 2024 WortsPay - Moniteur de Transactions | Généré automatiquement
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Connexion Socket.IO pour les mises à jour en temps réel
|
|
const socket = io();
|
|
|
|
socket.on('connect', function() {
|
|
console.log('Connecté au serveur');
|
|
});
|
|
|
|
socket.on('initial_data', function(data) {
|
|
updateTable(data.transactions);
|
|
updateStats(data.stats);
|
|
});
|
|
|
|
socket.on('new_transaction', function(data) {
|
|
addTransactionToTable(data.transaction);
|
|
updateStats(data.stats);
|
|
});
|
|
|
|
function updateTable(transactions) {
|
|
const tbody = document.querySelector('#transactionsTable tbody');
|
|
tbody.innerHTML = '';
|
|
transactions.forEach(transaction => {
|
|
addTransactionToTable(transaction, false);
|
|
});
|
|
}
|
|
|
|
function addTransactionToTable(transaction, isNew = true) {
|
|
const tbody = document.querySelector('#transactionsTable tbody');
|
|
const row = document.createElement('tr');
|
|
row.className = transaction.status_class + (isNew ? ' new-transaction' : '');
|
|
|
|
// Conversion des symboles vers emojis pour l'affichage HTML
|
|
let displayIcon = transaction.status_icon;
|
|
if (displayIcon === '[WAIT]') displayIcon = '🕒';
|
|
if (displayIcon === '[OK]') displayIcon = '✅';
|
|
if (displayIcon === '[FAIL]') displayIcon = '❌';
|
|
|
|
row.innerHTML = `
|
|
<td class="timestamp">${transaction.timestamp}</td>
|
|
<td>${displayIcon}</td>
|
|
<td>${transaction.client_trans_id}</td>
|
|
<td>${transaction.network}</td>
|
|
<td>${transaction.num_paid}</td>
|
|
<td class="amount">${transaction.amount}</td>
|
|
<td>${transaction.status}</td>
|
|
<td>${transaction.id_transaction}</td>
|
|
`;
|
|
|
|
if (isNew) {
|
|
tbody.insertBefore(row, tbody.firstChild);
|
|
// Limiter le nombre de lignes affichées
|
|
while (tbody.children.length > 100) {
|
|
tbody.removeChild(tbody.lastChild);
|
|
}
|
|
} else {
|
|
tbody.appendChild(row);
|
|
}
|
|
}
|
|
|
|
function updateStats(stats) {
|
|
const statCards = document.querySelectorAll('.stat-card p');
|
|
if (statCards.length >= 4) {
|
|
statCards[0].textContent = stats.total_changes;
|
|
statCards[1].textContent = stats.successful_transactions;
|
|
statCards[2].textContent = stats.failed_transactions;
|
|
statCards[3].textContent = stats.pending_transactions;
|
|
}
|
|
}
|
|
|
|
// Fonction de recherche
|
|
document.getElementById('searchBox').addEventListener('input', function(e) {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
const rows = document.querySelectorAll('#transactionsTable tbody tr');
|
|
|
|
rows.forEach(row => {
|
|
const text = row.textContent.toLowerCase();
|
|
row.style.display = text.includes(searchTerm) ? '' : 'none';
|
|
});
|
|
});
|
|
|
|
// Auto-refresh de la page toutes les 5 minutes si pas de socket
|
|
if (!socket.connected) {
|
|
setInterval(() => {
|
|
location.reload();
|
|
}, 300000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|