Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Reports - Janus Scanner Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script> | |
| </head> | |
| <body class="bg-black text-terminal-green"> | |
| <div class="scanline"></div> | |
| <div id="matrix-bg" class="fixed inset-0 z-0 opacity-30"></div> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 relative z-10"> | |
| <section class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-accent mb-4">[RAPPORTS D'ANALYSE]</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Historique des analyses et génération de rapports détaillés pour les autorités. | |
| </p> | |
| </section> | |
| <!-- Scan History Section --> | |
| <div class="bg-secondary border border-gray-700 rounded-lg p-6 mb-8"> | |
| <h3 class="card-title mb-4"> | |
| <i data-feather="archive" class="inline mr-2"></i> | |
| HISTORIQUE DES SCANS | |
| </h3> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full border-collapse border border-gray-800"> | |
| <thead> | |
| <tr class="bg-gray-800"> | |
| <th class="border border-gray-700 px-4 py-2 text-left">Date/Heure</th> | |
| <th class="border border-gray-700 px-4 py-2 text-left">Fichier</th> | |
| <th class="border border-gray-700 px-4 py-2 text-left">Type</th> | |
| <th class="border border-gray-700 px-4 py-2 text-left">Score Risque</th> | |
| <th class="border border-gray-700 px-4 py-2 text-left">Statut</th> | |
| <th class="border border-gray-700 px-4 py-2 text-left">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="detailedScanHistory"> | |
| <tr> | |
| <td colspan="6" class="text-center py-8 text-gray-500"> | |
| <i data-feather="inbox" class="mx-auto mb-2"></i> | |
| Aucun rapport disponible. Effectuez une analyse pour commencer. | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Report Generation Section --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-secondary border border-gray-700 rounded-lg p-6 hover:border-accent transition-colors"> | |
| <h3 class="card-title mb-4"> | |
| <i data-feather="file-text" class="inline mr-2"></i> | |
| RAPPORT PDF | |
| </h3> | |
| <p class="text-gray-400 mb-4">Générer un rapport détaillé au format PDF pour les autorités.</p> | |
| <button id="generatePdfBtn" class="btn w-full"> | |
| <i data-feather="download" class="inline mr-2"></i> | |
| GÉNÉRER RAPPORT PDF | |
| </button> | |
| </div> | |
| <div class="bg-secondary border border-gray-700 rounded-lg p-6 hover:border-accent transition-colors"> | |
| <h3 class="card-title mb-4"> | |
| <i data-feather="database" class="inline mr-2"></i> | |
| EXPORT CSV | |
| </h3> | |
| <p class="text-gray-400 mb-4">Exporter les données d'analyse pour traitement ultérieur.</p> | |
| <button id="exportCsvBtn" class="btn w-full"> | |
| <i data-feather="download-cloud" class="inline mr-2"></i> | |
| EXPORTER CSV | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Statistics Dashboard --> | |
| <div class="bg-secondary border border-accent rounded-lg p-6 mb-8"> | |
| <h3 class="card-title mb-4">STATISTIQUES GLOBALES</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-accent" id="totalScans">0</div> | |
| <div class="text-sm text-gray-400">Total Scans</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-red-500" id="highRiskCount">0</div> | |
| <div class="text-sm text-gray-400">Alertes Critiques</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-yellow-500" id="mediumRiskCount">0</div> | |
| <div class="text-sm text-gray-400">Risques Moyens</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-green-500" id="lowRiskCount">0</div> | |
| <div class="text-sm text-gray-400">Risques Faibles</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alert Configuration --> | |
| <div class="bg-secondary border border-gray-700 rounded-lg p-6"> | |
| <h3 class="card-title mb-4"> | |
| <i data-feather="alert-triangle" class="inline mr-2"></i> | |
| CONFIGURATION ALERTES | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-gray-300">Alertes Email (Procureur)</label> | |
| <input type="checkbox" id="emailAlert" checked class="w-4 h-4"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-gray-300">Notification TRACFIN</label> | |
| <input type="checkbox" id="tracfinAlert" checked class="w-4 h-4"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-gray-300">Export Automatique PDF</label> | |
| <input type="checkbox" id="autoExport" class="w-4 h-4"> | |
| </div> | |
| <button id="saveAlertConfig" class="btn w-full mt-4"> | |
| SAUVEGARDER CONFIGURATION | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Load and display detailed scan history | |
| function loadReportsHistory() { | |
| const scanHistory = JSON.parse(localStorage.getItem('scanHistory')) || []; | |
| const tbody = document.getElementById('detailedScanHistory'); | |
| if (scanHistory.length === 0) { | |
| tbody.innerHTML = ` | |
| <tr> | |
| <td colspan="6" class="text-center py-8 text-gray-500"> | |
| <i data-feather="inbox" class="mx-auto mb-2"></i> | |
| Aucun rapport disponible. Effectuez une analyse pour commencer. | |
| </td> | |
| </tr> | |
| `; | |
| feather.replace(); | |
| return; | |
| } | |
| const stats = { | |
| total: scanHistory.length, | |
| high: scanHistory.filter(s => s.riskScore > 70).length, | |
| medium: scanHistory.filter(s => s.riskScore > 40 && s.riskScore <= 70).length, | |
| low: scanHistory.filter(s => s.riskScore <= 40).length | |
| }; | |
| document.getElementById('totalScans').textContent = stats.total; | |
| document.getElementById('highRiskCount').textContent = stats.high; | |
| document.getElementById('mediumRiskCount').textContent = stats.medium; | |
| document.getElementById('lowRiskCount').textContent = stats.low; | |
| tbody.innerHTML = scanHistory.map(scan => ` | |
| <tr class="border-t border-gray-700 hover:bg-gray-800"> | |
| <td class="px-4 py-3 text-sm">${new Date(scan.date).toLocaleString()}</td> | |
| <td class="px-4 py-3 text-sm">${scan.fileName}</td> | |
| <td class="px-4 py-3 text-sm">${scan.type || 'FEC'}</td> | |
| <td class="px-4 py-3"> | |
| <span class="font-bold ${scan.riskScore > 70 ? 'text-red-500' : scan.riskScore > 40 ? 'text-yellow-500' : 'text-green-500'}"> | |
| ${scan.riskScore}% | |
| </span> | |
| </td> | |
| <td class="px-4 py-3"> | |
| <span class="px-2 py-1 rounded text-xs font-medium ${ | |
| scan.riskScore > 70 ? 'bg-red-900 text-red-300' : | |
| scan.riskScore > 40 ? 'bg-yellow-900 text-yellow-300' : | |
| 'bg-green-900 text-green-300' | |
| }"> | |
| ${scan.status} | |
| </span> | |
| </td> | |
| <td class="px-4 py-3"> | |
| <button onclick="viewReport('${scan.fileName}')" class="text-accent hover:text-red-400 text-sm"> | |
| <i data-feather="eye" class="w-4 h-4 inline"></i> | |
| </button> | |
| <button onclick="exportReport('${scan.fileName}')" class="text-blue-400 hover:text-blue-300 ml-2 text-sm"> | |
| <i data-feather="download" class="w-4 h-4 inline"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| `).join(''); | |
| feather.replace(); | |
| } | |
| loadReportsHistory(); | |
| // Generate PDF Report | |
| document.getElementById('generatePdfBtn').addEventListener('click', function() { | |
| const scanHistory = JSON.parse(localStorage.getItem('scanHistory')) || []; | |
| if (scanHistory.length === 0) { | |
| alert('Aucune donnée à exporter. Effectuez des analyses d\'abord.'); | |
| return; | |
| } | |
| // Simulate PDF generation | |
| const btn = this; | |
| btn.disabled = true; | |
| btn.innerHTML = '<i data-feather="loader" class="animate-spin inline mr-2"></i>Génération en cours...'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| const highRiskScans = scanHistory.filter(s => s.riskScore > 70); | |
| const pdfContent = ` | |
| RAPPORT D'ANALYSE JANUS SCANNER PRO | |
| Généré le: ${new Date().toLocaleString()} | |
| Opération: Lumière Noire | |
| STATISTIQUES: | |
| - Total Scans: ${scanHistory.length} | |
| - Alertes Critiques: ${highRiskScans.length} | |
| - Risque Moyen: ${scanHistory.filter(s => s.riskScore > 40 && s.riskScore <= 70).length} | |
| - Risque Faible: ${scanHistory.filter(s => s.riskScore <= 40).length} | |
| SCANSS à HAUT RISQUE: | |
| ${highRiskScans.map(s => `- ${s.fileName}: ${s.riskScore}%`).join('\n')} | |
| FIN DU RAPPORT | |
| `; | |
| // Create and download file | |
| const blob = new Blob([pdfContent], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `Janus_Report_${Date.now()}.txt`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| btn.disabled = false; | |
| btn.innerHTML = '<i data-feather="download" class="inline mr-2"></i>GÉNÉRER RAPPORT PDF'; | |
| feather.replace(); | |
| alert('Rapport généré avec succès!'); | |
| }, 2000); | |
| }); | |
| // Export CSV | |
| document.getElementById('exportCsvBtn').addEventListener('click', function() { | |
| const scanHistory = JSON.parse(localStorage.getItem('scanHistory')) || []; | |
| if (scanHistory.length === 0) { | |
| alert('Aucune donnée à exporter.'); | |
| return; | |
| } | |
| const csvContent = "data:text/csv;charset=utf-8," + | |
| "Date,File Name,Type,Risk Score,Status\n" + | |
| scanHistory.map(s => | |
| `${new Date(s.date).toLocaleString()},${s.fileName},${s.type || 'FEC'},${s.riskScore},${s.status}` | |
| ).join("\n"); | |
| const encodedUri = encodeURI(csvContent); | |
| const link = document.createElement("a"); | |
| link.setAttribute("href", encodedUri); | |
| link.setAttribute("download", `Janus_Report_${Date.now()}.csv`); | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| // Save alert configuration | |
| document.getElementById('saveAlertConfig').addEventListener('click', function() { | |
| const config = { | |
| emailAlert: document.getElementById('emailAlert').checked, | |
| tracfinAlert: document.getElementById('tracfinAlert').checked, | |
| autoExport: document.getElementById('autoExport').checked | |
| }; | |
| localStorage.setItem('alertConfig', JSON.stringify(config)); | |
| alert('Configuration sauvegardée!'); | |
| }); | |
| // Load alert configuration | |
| const savedConfig = JSON.parse(localStorage.getItem('alertConfig') || '{}'); | |
| document.getElementById('emailAlert').checked = savedConfig.emailAlert !== false; | |
| document.getElementById('tracfinAlert').checked = savedConfig.tracfinAlert !== false; | |
| document.getElementById('autoExport').checked = savedConfig.autoExport === true; | |
| // Global functions for report actions | |
| window.viewReport = function(fileName) { | |
| alert(`Ouverture du rapport détaillé pour: ${fileName}\n\nFonctionnalité à implémenter.`); | |
| }; | |
| window.exportReport = function(fileName) { | |
| const scanHistory = JSON.parse(localStorage.getItem('scanHistory')) || []; | |
| const scan = scanHistory.find(s => s.fileName === fileName); | |
| if (scan) { | |
| const reportContent = ` | |
| RAPPORT INDIVIDUEL: ${scan.fileName} | |
| Date: ${new Date(scan.date).toLocaleString()} | |
| Type: ${scan.type || 'FEC'} | |
| Score Risque: ${scan.riskScore}% | |
| Statut: ${scan.status} | |
| DÉTAILS: | |
| - Anomalies détectées: ${scan.anomalies || 0} | |
| - Entrées analysées: ${scan.entries || 'N/A'} | |
| `; | |
| const blob = new Blob([reportContent], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `Report_${scan.fileName}_${Date.now()}.txt`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| } | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |