feat(cdr): add Call Logs & CDR module with automatic trunk detection and CSV export (v1.6.0)
This commit is contained in:
sorcier committed
1 parent
a9d86dd6ac
commit
7c28a237ba
5 files changed
+927
-1
No files matched your search
@@ -258,6 +258,18 @@ $appVersion = $appVerData['version'] ?? '1.5.0';
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-300 animate-pulse"></span>
|
||||
</button>
|
||||
|
||||
<!-- Journal d'appels (CDR) -->
|
||||
<button type="button" data-tab="cdr" onclick="switchTab('cdr')"
|
||||
class="tab-btn w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl text-sm font-medium text-slate-300 hover:bg-anthracite-800 hover:text-white transition">
|
||||
<span class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>Journal d'appels (CDR)</span>
|
||||
</span>
|
||||
<span id="nav-badge-cdr" class="px-2 py-0.5 text-xs rounded-full bg-anthracite-800 text-sky-300 border border-anthracite-700 font-bold">CDR</span>
|
||||
</button>
|
||||
|
||||
<div class="pt-3 px-3 py-1.5 text-[11px] font-bold uppercase tracking-wider text-slate-400">Téléphonie IP</div>
|
||||
|
||||
<!-- Postes SIP -->
|
||||
@@ -980,6 +992,158 @@ $appVersion = $appVerData['version'] ?? '1.5.0';
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- ONGLET : JOURNAL D'APPELS (CDR) -->
|
||||
<!-- ========================================================= -->
|
||||
<section id="tab-cdr" class="tab-panel hidden space-y-4">
|
||||
<!-- En-tête avec Actions -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-bold text-white">Journal d'Appels & Historique CDR</h2>
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-sky-500/20 text-sky-300 border border-sky-500/30">Asterisk CDR</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-300">Traçabilité complète des flux téléphoniques entrants, sortants et internes avec identification automatique des correspondants et des Trunks SIP.</p>
|
||||
</div>
|
||||
<div class="flex items-center flex-wrap gap-2">
|
||||
<button type="button" onclick="loadCdr()" id="btn-refresh-cdr"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium bg-anthracite-800 hover:bg-anthracite-750 text-slate-200 border border-anthracite-700 transition" title="Recharger les derniers appels">
|
||||
<svg id="spinner-refresh-cdr" class="w-4 h-4 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
<span>Actualiser</span>
|
||||
</button>
|
||||
<button type="button" onclick="exportCdrCsv()"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium bg-emerald-600/20 hover:bg-emerald-600/30 text-emerald-300 border border-emerald-500/40 shadow-sm transition" title="Exporter au format CSV compatible Excel">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||||
<span>Exporter CSV</span>
|
||||
</button>
|
||||
<button type="button" onclick="confirmClearCdr()"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium bg-rose-600/10 hover:bg-rose-600/20 text-rose-300 border border-rose-500/30 transition" title="Purger le journal d'appels">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<span>Purger</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cartes KPIs Statistiques -->
|
||||
<div class="grid grid-cols-2 lg:grid-cols-5 gap-3">
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl p-4 shadow-lg">
|
||||
<div class="text-[11px] font-semibold uppercase text-slate-400">Total Appels</div>
|
||||
<div id="cdr-stat-total" class="text-2xl font-bold text-white mt-1">0</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Sur la période</div>
|
||||
</div>
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl p-4 shadow-lg">
|
||||
<div class="text-[11px] font-semibold uppercase text-emerald-400">Décrochés</div>
|
||||
<div id="cdr-stat-answered" class="text-2xl font-bold text-emerald-400 mt-1">0</div>
|
||||
<div id="cdr-stat-rate" class="text-[11px] text-emerald-300 font-semibold mt-0.5">0% de réponse</div>
|
||||
</div>
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl p-4 shadow-lg">
|
||||
<div class="text-[11px] font-semibold uppercase text-amber-400">Non Répondus / Manqués</div>
|
||||
<div id="cdr-stat-missed" class="text-2xl font-bold text-amber-400 mt-1">0</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Sans réponse / échecs</div>
|
||||
</div>
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl p-4 shadow-lg">
|
||||
<div class="text-[11px] font-semibold uppercase text-cyan-400">Appels Sortants</div>
|
||||
<div id="cdr-stat-outbound" class="text-2xl font-bold text-cyan-400 mt-1">0</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Vers opérateurs / Trunks</div>
|
||||
</div>
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl p-4 shadow-lg">
|
||||
<div class="text-[11px] font-semibold uppercase text-teal-400">Appels Entrants</div>
|
||||
<div id="cdr-stat-inbound" class="text-2xl font-bold text-teal-400 mt-1">0</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Reçus via SDA / Trunks</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barre de Recherche & Filtres Multicritères -->
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl p-4 shadow-lg space-y-3">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
|
||||
<!-- Recherche textuelle -->
|
||||
<div class="relative lg:col-span-2">
|
||||
<span class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</span>
|
||||
<input type="text" id="cdr-filter-search" oninput="debounceCdrLoad()" placeholder="Rechercher par appelant, destinataire, trunk..."
|
||||
class="w-full pl-10 pr-4 py-2 rounded-xl bg-anthracite-950 border border-anthracite-700 text-xs sm:text-sm text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 transition">
|
||||
</div>
|
||||
|
||||
<!-- Filtre Période -->
|
||||
<div>
|
||||
<select id="cdr-filter-period" onchange="loadCdr()"
|
||||
class="w-full px-3 py-2 rounded-xl bg-anthracite-950 border border-anthracite-700 text-xs text-white focus:outline-none focus:border-sky-500 transition">
|
||||
<option value="all">Toute la période</option>
|
||||
<option value="today" selected>Aujourd'hui</option>
|
||||
<option value="yesterday">Hier</option>
|
||||
<option value="week">7 derniers jours</option>
|
||||
<option value="month">30 derniers jours</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtre Direction -->
|
||||
<div>
|
||||
<select id="cdr-filter-direction" onchange="loadCdr()"
|
||||
class="w-full px-3 py-2 rounded-xl bg-anthracite-950 border border-anthracite-700 text-xs text-white focus:outline-none focus:border-sky-500 transition">
|
||||
<option value="all">Toutes les directions</option>
|
||||
<option value="inbound">Entrants (Trunk → Poste)</option>
|
||||
<option value="outbound">Sortants (Poste → Trunk)</option>
|
||||
<option value="internal">Internes (Poste à Poste)</option>
|
||||
<option value="service">Services (*98, SVI, etc.)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtre Statut / Disposition -->
|
||||
<div>
|
||||
<select id="cdr-filter-disposition" onchange="loadCdr()"
|
||||
class="w-full px-3 py-2 rounded-xl bg-anthracite-950 border border-anthracite-700 text-xs text-white focus:outline-none focus:border-sky-500 transition">
|
||||
<option value="all">Tous les statuts</option>
|
||||
<option value="answered">Décrochés (Répondus)</option>
|
||||
<option value="no_answer">Non répondus (Manqués)</option>
|
||||
<option value="busy">Occupés</option>
|
||||
<option value="failed">Échecs</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ligne d'info & Limite d'affichage -->
|
||||
<div class="flex items-center justify-between pt-2 border-t border-anthracite-700/60 text-xs text-slate-400">
|
||||
<div id="cdr-status-info">Chargement de l'historique...</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>Afficher :</span>
|
||||
<select id="cdr-filter-limit" onchange="loadCdr()"
|
||||
class="px-2 py-1 rounded-lg bg-anthracite-950 border border-anthracite-700 text-xs text-white focus:outline-none">
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100" selected>100</option>
|
||||
<option value="250">250</option>
|
||||
<option value="500">500</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tableau du Journal d'Appels -->
|
||||
<div class="bg-anthracite-800 border border-anthracite-700 rounded-2xl overflow-hidden shadow-lg">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-anthracite-950/80 text-[11px] font-semibold uppercase text-slate-400 border-b border-anthracite-700">
|
||||
<th class="py-3 px-4">Date & Heure</th>
|
||||
<th class="py-3 px-3">Direction</th>
|
||||
<th class="py-3 px-4">Appelant (Qui a appelé)</th>
|
||||
<th class="py-3 px-4">Destinataire (Qui a été appelé)</th>
|
||||
<th class="py-3 px-4">Trunk Utilisé</th>
|
||||
<th class="py-3 px-3">Durée Parlée</th>
|
||||
<th class="py-3 px-3">Statut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="cdr-table-body" class="divide-y divide-anthracite-700/60 text-xs">
|
||||
<tr>
|
||||
<td colspan="7" class="py-8 text-center text-slate-400">Chargement du journal d'appels...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- ONGLET 1 : EXTENSIONS SIP -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
Reference in new issue
Block a user