Merge pull request #414 from Markodiba/feature/compliance-dashboard-and-backup-ui

Add compliance dashboard and backup UI

Author: Mystery-CLI

backend/src/middleware/adminAuth.js

@@ -0,0 +1,25 @@
+import { verifyToken } from '../auth/tokens.js';
+
+// Admin role check middleware
+// For demo purposes, we check if user has an 'admin' role in their JWT payload
+// In production, this should check against a database or external auth service
+export function requireAdmin(req, res, next) {
+  const auth = req.headers.authorization;
+  if (!auth?.startsWith('Bearer ')) {
+    return res.status(401).json({ error: 'Missing or invalid Authorization header' });
+  }
+  
+  try {
+    const user = verifyToken(auth.slice(7));
+    req.user = user;
+    
+    // Check if user has admin role
+    if (user.role !== 'admin') {
+      return res.status(403).json({ error: 'Admin access required' });
+    }
+    
+    next();
+  } catch {
+    res.status(401).json({ error: 'Invalid or expired token' });
+  }
+}

backend/src/routes/backup.js

@@ -65,4 +65,28 @@ router.get('/metrics', (_req, res) => {
   res.json(getMetrics());
 });
 
+// GET  /api/backup/status   — get last backup info for UI
+router.get('/status', async (_req, res) => {
+  try {
+    const backups = await listBackups();
+    const lastBackup = backups.length > 0 ? backups[0] : null;
+    const metrics = getMetrics();
+    
+    res.json({
+      lastBackup: lastBackup ? {
+        timestamp: lastBackup.createdAt,
+        file: lastBackup.file,
+        size: lastBackup.size,
+      } : null,
+      metrics: {
+        totalBackups: backups.length,
+        totalSize: backups.reduce((sum, b) => sum + b.size, 0),
+        ...metrics,
+      },
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 export default router;

backend/src/routes/compliance.js

@@ -1,5 +1,7 @@
 import { Router } from 'express';
 import { requireAuth as authMiddleware } from '../middleware/auth.js';
+import { requireAdmin } from '../middleware/adminAuth.js';
+import { prisma } from '../db/client.js';
 import {
   kycCollector,
   identityVerifier,
@@ -88,4 +90,74 @@ router.get('/reports', authMiddleware, async (req, res) => {
   res.json(reports);
 });
 
+// ── AML Alerts Dashboard (Admin Only) ────────────────────────────────────────
+
+// List all AML alerts with pagination
+router.get('/aml/alerts', requireAdmin, async (req, res) => {
+  try {
+    const { page = 1, limit = 20, severity, reviewed } = req.query;
+    const skip = (parseInt(page) - 1) * parseInt(limit);
+    
+    const where = {};
+    if (severity) where.severity = severity;
+    
+    const alerts = await prisma.aMLAlert.findMany({
+      where,
+      include: {
+        transaction: {
+          select: {
+            hash: true,
+            amount: true,
+            assetCode: true,
+            createdAt: true,
+          },
+        },
+        user: {
+          select: {
+            publicKey: true,
+          },
+        },
+      },
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: parseInt(limit),
+    });
+    
+    const total = await prisma.aMLAlert.count({ where });
+    
+    res.json({
+      alerts,
+      pagination: {
+        page: parseInt(page),
+        limit: parseInt(limit),
+        total,
+        pages: Math.ceil(total / parseInt(limit)),
+      },
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Mark alert as reviewed (admin only)
+router.patch('/aml/alerts/:id/review', requireAdmin, async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { notes } = req.body;
+    
+    // For now, we'll log the review action in the audit trail
+    // In a production system, you'd add a 'reviewed' field to the AMLAlert model
+    await complianceAudit.log('AML_ALERT_REVIEWED', req.user.id, {
+      alertId: id,
+      reviewedBy: req.user.id,
+      notes: notes || '',
+      reviewedAt: new Date().toISOString(),
+    });
+    
+    res.json({ success: true, message: 'Alert marked as reviewed' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 export default router;

frontend/src/App.jsx

@@ -44,6 +44,8 @@ import { useExchangeRate } from './hooks/useExchangeRate';
 import { AMMPoolBrowser } from './components/AMMPoolBrowser';
 import { ConvertWidget } from './components/ConvertWidget';
 import { AccountRecovery } from './components/AccountRecovery';
+import { ComplianceDashboard } from './components/ComplianceDashboard';
+import { BackupSettings } from './components/BackupSettings';
 
 const STATUS_COLORS = { connected: '#22c55e', disconnected: '#ef4444', reconnecting: '#f59e0b' };
 const TIMEOUT_MS = 30000;
@@ -71,6 +73,9 @@ function App() {
   const [kycStatus, setKycStatus] = useState(null);
   const [kycLoading, setKycLoading] = useState(false);
   const [kycError, setKycError] = useState(null);
+  const [showComplianceDashboard, setShowComplianceDashboard] = useState(false);
+  const [showBackupSettings, setShowBackupSettings] = useState(false);
+  const [userRole, setUserRole] = useState(null);
 
   const msg = useMessages();
   const { canInstall, install, updateAvailable, applyUpdate, pushEnabled, enablePush } = usePWA();
@@ -214,6 +219,16 @@ function App() {
 
   useEffect(() => {
     fetchKycStatus();
+    // Check if user has admin role from JWT token
+    const token = localStorage.getItem('authToken');
+    if (token) {
+      try {
+        const payload = JSON.parse(atob(token.split('.')[1]));
+        setUserRole(payload.role);
+      } catch (e) {
+        // Invalid token format
+      }
+    }
   }, [fetchKycStatus]);
 
   const saveLabel = async () => {
@@ -902,11 +917,19 @@ function App() {
                       { id: 'multisig', label: '🔐 Multi-Sig' },
                       { id: 'kyc', label: '📋 KYC' },
                       { id: 'notifications', label: '🔔 Notifications' },
+                      { id: 'backup', label: '💾 Backup', action: () => setShowBackupSettings(true) },
+                      ...(userRole === 'admin' ? [{ id: 'compliance', label: '🛡️ Compliance', action: () => setShowComplianceDashboard(true) }] : []),
                     ].map((section) => (
                       <button
                         key={section.id}
                         type="button"
-                        onClick={() => setActiveSettingsSection(activeSettingsSection === section.id ? null : section.id)}
+                        onClick={() => {
+                          if (section.action) {
+                            section.action();
+                          } else {
+                            setActiveSettingsSection(activeSettingsSection === section.id ? null : section.id);
+                          }
+                        }}
                         style={{
                           padding: '10px 16px',
                           background: activeSettingsSection === section.id ? '#2563eb' : '#f3f4f6',
@@ -1036,6 +1059,14 @@ function App() {
             onClose={() => setShowSettings(false)}
           />
         )}
+
+        {showComplianceDashboard && (
+          <ComplianceDashboard onClose={() => setShowComplianceDashboard(false)} />
+        )}
+
+        {showBackupSettings && (
+          <BackupSettings onClose={() => setShowBackupSettings(false)} />
+        )}
       </div>
     </>
   );

frontend/src/components/AccountSettings.jsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { AddressBook } from './AddressBook';
 import { WebhookManager } from './WebhookManager';
+import { BackupSettings } from './BackupSettings';
+import { ComplianceDashboard } from './ComplianceDashboard';
 
 const ASSETS = ['XLM', 'USDC', 'EURC'];
 
@@ -10,10 +12,25 @@ export function AccountSettings({ publicKey, onClose }) {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState(null);
   const [saved, setSaved] = useState(false);
+  const [showBackup, setShowBackup] = useState(false);
+  const [showCompliance, setShowCompliance] = useState(false);
+  const [userRole, setUserRole] = useState(null);
 
   useEffect(() => {
     axios.get(`/api/stellar/account/${publicKey}/settings`)
-      .then(({ data }) => setSettings(data))
+      .then(({ data }) => {
+        setSettings(data);
+        // Check if user has admin role from JWT token
+        const token = localStorage.getItem('authToken');
+        if (token) {
+          try {
+            const payload = JSON.parse(atob(token.split('.')[1]));
+            setUserRole(payload.role);
+          } catch (e) {
+            // Invalid token format
+          }
+        }
+      })
       .catch(e => setError(e?.response?.data?.error ?? e.message));
   }, [publicKey]);
 
@@ -110,6 +127,25 @@ export function AccountSettings({ publicKey, onClose }) {
               <WebhookManager accountId={publicKey} />
             </div>
 
+            <div style={{ marginBottom: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <button
+                type="button"
+                onClick={() => setShowBackup(true)}
+                style={{ fontSize: '0.9rem', padding: '8px 16px' }}
+              >
+                💾 Backup & Restore
+              </button>
+              {userRole === 'admin' && (
+                <button
+                  type="button"
+                  onClick={() => setShowCompliance(true)}
+                  style={{ fontSize: '0.9rem', padding: '8px 16px', background: '#dc2626' }}
+                >
+                  🛡️ Compliance Dashboard
+                </button>
+              )}
+            </div>
+
             <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
               <button type="button" onClick={save} disabled={saving}>
                 {saving ? 'Saving…' : 'Save'}
@@ -119,6 +155,9 @@ export function AccountSettings({ publicKey, onClose }) {
             </div>
           </>
         )}
+
+        {showBackup && <BackupSettings onClose={() => setShowBackup(false)} />}
+        {showCompliance && <ComplianceDashboard onClose={() => setShowCompliance(false)} />}
       </div>
     </div>
   );