Update frontend/src/pages/SupportEngineerPanel.jsx

frontend/src/pages/SupportEngineerPanel.jsx

@@ -17,7 +17,15 @@ import {
   RefreshCw, 
   CheckCircle2, 
   AlertTriangle,
-  Info
+  Info,
+  Building2,
+  CreditCard,
+  Server,
+  Database,
+  HardDrive,
+  Eye,
+  Download,
+  Receipt
 } from 'lucide-react';
 import { CustomModal } from '../components/CustomModal';
 
@@ -130,6 +138,7 @@ export const SupportEngineerPanel = () => {
   const [metrics, setMetrics] = useState({});
   const [auditLogs, setAuditLogs] = useState([]);
   const [users, setUsers] = useState([]);
+  const [recentPayments, setRecentPayments] = useState([]);
   const [demoBookings, setDemoBookings] = useState([]);
   const [emailLogs, setEmailLogs] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -137,12 +146,16 @@ export const SupportEngineerPanel = () => {
   const [activeTab, setActiveTab] = useState(() => {
     try {
       const params = new URLSearchParams(window.location.search);
-      return params.get('tab') || 'organizations';
+      return params.get('tab') || 'overview';
     } catch (e) {
-      return 'organizations';
+      return 'overview';
     }
   });
 
+  // Billing Sorting State
+  const [sortBillCol, setSortBillCol] = useState('Date');
+  const [sortBillDir, setSortBillDir] = useState('desc');
+
   // Table sorting states
   const [sortOrgCol, setSortOrgCol] = useState('Tenant Name');
   const [sortOrgDir, setSortOrgDir] = useState('asc');
@@ -171,13 +184,19 @@ export const SupportEngineerPanel = () => {
   const [emailPage, setEmailPage] = useState(1);
   const [emailPageSize, setEmailPageSize] = useState(25);
 
+  // Active Scans & Invoice Modals
+  const [activeScansModalOpen, setActiveScansModalOpen] = useState(false);
+  const [activeScans, setActiveScans] = useState([]);
+  const [fetchingActiveScans, setFetchingActiveScans] = useState(false);
+  const [viewInvoice, setViewInvoice] = useState(null);
+
   // Custom Prompt Modal state for editing member roles/orgs (without password)
   const [promptModal, setPromptModal] = useState({ isOpen: false, title: '', desc: '', inputs: [], onConfirm: null });
   const [promptValues, setPromptValues] = useState({});
-  const [confirmModal, setConfirmModal] = useState({ isOpen: false, title: '', desc: '', onConfirm: null });
+  const [confirmModal, setConfirmModal] = useState({ isOpen: false, title: '', desc: '', onConfirm: null, type: 'primary' });
 
   const closePrompt = () => { setPromptModal({ isOpen: false, title: '', desc: '', inputs: [], onConfirm: null }); setPromptValues({}); };
-  const closeConfirm = () => setConfirmModal({ isOpen: false, title: '', desc: '', onConfirm: null });
+  const closeConfirm = () => setConfirmModal({ isOpen: false, title: '', desc: '', onConfirm: null, type: 'primary' });
 
   const handlePromptChange = (key, value) => setPromptValues(prev => ({ ...prev, [key]: value }));
 
@@ -199,6 +218,7 @@ export const SupportEngineerPanel = () => {
         const data = await globalRes.json();
         setOrganizations(Array.isArray(data.organizations) ? data.organizations : []);
         setMetrics(data.metrics || {});
+        setRecentPayments(Array.isArray(data.recent_payments) ? data.recent_payments : []);
         setAuditLogs(Array.isArray(data.audit_logs) ? data.audit_logs : []);
         setUsers(Array.isArray(data.users) ? data.users : []);
       }
@@ -221,6 +241,103 @@ export const SupportEngineerPanel = () => {
     fetchStats();
   }, []);
 
+  const openActiveScansModal = async () => {
+    setActiveScansModalOpen(true);
+    setFetchingActiveScans(true);
+    try {
+      const res = await authFetch('/api/scans/active');
+      if (res.ok) {
+        const data = await res.json();
+        setActiveScans(data.scans || []);
+      }
+    } catch (err) {
+      console.error("Error fetching active scans:", err);
+    }
+    setFetchingActiveScans(false);
+  };
+
+  const handleKillScan = (scanId) => {
+    setConfirmModal({
+      isOpen: true,
+      title: 'Terminate Scan',
+      desc: 'Are you sure you want to forcibly terminate this scan?',
+      type: 'error',
+      onConfirm: async () => {
+        try {
+          await authFetch(`/api/scans/${scanId}/terminate`, { method: 'POST' });
+          toast.success('Scan terminated successfully');
+          openActiveScansModal();
+        } catch (err) {
+          toast.error('Failed to terminate scan');
+        }
+        closeConfirm();
+      }
+    });
+  };
+
+  const handleBillSort = (column) => {
+    if (column === 'Invoice') return;
+    if (sortBillCol === column) {
+      setSortBillDir(sortBillDir === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortBillCol(column);
+      setSortBillDir('asc');
+    }
+  };
+
+  const getSortedBills = () => {
+    return [...(recentPayments || [])].sort((a, b) => {
+      let aVal, bVal;
+      switch (sortBillCol) {
+        case 'Date': aVal = new Date(a.created_at).getTime(); bVal = new Date(b.created_at).getTime(); break;
+        case 'Organization / User': aVal = a.org_name || ''; bVal = b.org_name || ''; break;
+        case 'Tier': aVal = a.tier_id || ''; bVal = b.tier_id || ''; break;
+        case 'Amount': aVal = a.amount || 0; bVal = b.amount || 0; break;
+        case 'Status': aVal = a.status || ''; bVal = b.status || ''; break;
+        default: aVal = new Date(a.created_at).getTime(); bVal = new Date(b.created_at).getTime();
+      }
+      if (aVal < bVal) return sortBillDir === 'asc' ? -1 : 1;
+      if (aVal > bVal) return sortBillDir === 'asc' ? 1 : -1;
+      return 0;
+    });
+  };
+
+  const handleDownloadInvoice = (payment) => {
+    const invoiceHtml = `
+      <html>
+        <head>
+          <title>Invoice - ${payment.id}</title>
+          <style>
+            body { font-family: sans-serif; padding: 40px; color: #333; }
+            h1 { color: #2563eb; margin-bottom: 5px; }
+            .header { border-bottom: 2px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }
+            .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
+            .total { font-size: 20px; font-weight: bold; margin-top: 30px; border-top: 2px solid #eee; padding-top: 20px; }
+          </style>
+        </head>
+        <body>
+          <div class="header">
+            <h1>LarShield</h1>
+            <p style="margin: 0; color: #666;">Payment Receipt & Invoice</p>
+          </div>
+          <div class="row"><strong>Date:</strong> <span>${new Date(payment.created_at).toLocaleString()}</span></div>
+          <div class="row"><strong>Organization:</strong> <span>${payment.org_name}</span></div>
+          <div class="row"><strong>Email:</strong> <span>${payment.user_email}</span></div>
+          <div class="row"><strong>Subscription Tier:</strong> <span><span style="text-transform: capitalize;">${payment.tier_id}</span> Plan</span></div>
+          <div class="row"><strong>Status:</strong> <span style="color: ${payment.status === 'successful' ? 'green' : 'red'}">${payment.status.toUpperCase()}</span></div>
+          <div class="row total">
+            <strong>Total Amount:</strong> 
+            <span>${payment.currency === 'INR' ? '₹' : '$'}${payment.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
+          </div>
+          <script>window.print();</script>
+        </body>
+      </html>
+    `;
+    const blob = new Blob([invoiceHtml], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    window.open(url, '_blank');
+  };
+
   const handleOrgSort = (column) => {
     if (column === 'Quotas' || column === 'Actions') return;
     if (sortOrgCol === column) {
@@ -295,6 +412,7 @@ export const SupportEngineerPanel = () => {
       isOpen: true,
       title: 'Inspect Tenant Environment',
       desc: `Log in as administrator for ${orgName} to troubleshoot customer issue?`,
+      type: 'primary',
       onConfirm: async () => {
         try {
           const res = await authFetch(`/api/auth/impersonate/${orgId}`, {
@@ -316,7 +434,6 @@ export const SupportEngineerPanel = () => {
     });
   };
 
-  // Support Engineer can edit role / org assignment, BUT NOT passwords
   const handleEditMember = (u) => {
     const orgOptions = [
       { label: 'None (Global)', value: '' },
@@ -446,62 +563,214 @@ export const SupportEngineerPanel = () => {
         <div className="flex flex-col gap-lg animate-fade-in">
           {/* Quick Metrics Grid */}
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-md">
-            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs">
+            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs hover:shadow-md transition-all group">
               <div>
                 <div className="text-[12px] font-bold text-on-surface-variant uppercase tracking-wider">Total Tenants</div>
                 <div className="text-2xl font-extrabold text-on-surface mt-1">{metrics.total_tenants || organizations.length || 0}</div>
               </div>
-              <div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
-                <Shield className="w-5 h-5" />
+              <div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center group-hover:scale-110 transition-transform">
+                <Building2 className="w-5 h-5" />
               </div>
             </div>
 
-            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs">
+            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs hover:shadow-md transition-all group">
               <div>
                 <div className="text-[12px] font-bold text-on-surface-variant uppercase tracking-wider">Active Licenses</div>
                 <div className="text-2xl font-extrabold text-on-surface mt-1">{metrics.active_licenses || 0}</div>
               </div>
-              <div className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center">
-                <CheckCircle2 className="w-5 h-5" />
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center group-hover:scale-110 transition-transform">
+                <CreditCard className="w-5 h-5" />
               </div>
             </div>
 
-            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs">
+            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs hover:shadow-md transition-all group">
               <div>
                 <div className="text-[12px] font-bold text-on-surface-variant uppercase tracking-wider">Global Users</div>
                 <div className="text-2xl font-extrabold text-on-surface mt-1">{metrics.global_users || users.length || 0}</div>
               </div>
-              <div className="w-10 h-10 rounded-xl bg-purple-500/10 text-purple-600 flex items-center justify-center">
+              <div className="w-10 h-10 rounded-xl bg-purple-500/10 text-purple-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                 <Users className="w-5 h-5" />
               </div>
             </div>
 
-            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs">
+            <div className="bg-surface-container-lowest border border-outline-variant p-md rounded-2xl flex items-center justify-between shadow-2xs hover:shadow-md transition-all group">
               <div>
                 <div className="text-[12px] font-bold text-on-surface-variant uppercase tracking-wider">Active Scanners</div>
-                <div className="text-2xl font-extrabold text-on-surface mt-1">{metrics.active_scanners || 0}</div>
+                <div className="text-2xl font-extrabold text-on-surface mt-1">{metrics.active_scanners || 0}<span className="text-sm text-on-surface-variant font-medium">/{metrics.total_scanners || 50}</span></div>
               </div>
-              <div className="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-600 flex items-center justify-center">
-                <Activity className="w-5 h-5" />
+              <div className="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-600 flex items-center justify-center group-hover:scale-110 transition-transform">
+                <Server className="w-5 h-5" />
               </div>
             </div>
           </div>
 
-          {/* Operational Support Guidance Box */}
-          <div className="bg-blue-500/5 border border-blue-500/20 rounded-2xl p-5 flex items-start gap-4">
-            <div className="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-600 flex items-center justify-center shrink-0 mt-0.5">
-              <Info className="w-5 h-5" />
+          {/* Infrastructure Node & System Health Cards */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-md">
+            <div className="flex flex-col gap-md">
+              <h2 className="font-headline-sm font-bold text-on-surface flex items-center text-[16.5px]">
+                <Activity className="w-4 h-4 text-primary mr-2" /> Node Infrastructure & Health
+              </h2>
+              
+              <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl p-md flex flex-col gap-sm shadow-2xs">
+                <div className="flex justify-between items-center pb-xs border-b border-outline-variant/50">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-on-surface">
+                    <Database className="w-4 h-4 text-primary" /> Database Cluster Connection Load
+                  </div>
+                  <span className="text-[11px] font-bold bg-green-500/10 text-green-600 px-2 py-0.5 rounded border border-green-500/20">
+                    HEALTHY
+                  </span>
+                </div>
+                <div className="flex justify-between items-center text-[12.5px]">
+                  <span className="text-on-surface-variant font-semibold">Active Connections</span>
+                  <span className="font-bold text-on-surface">{metrics.db_connections || 14} / 500</span>
+                </div>
+              </div>
+
+              <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl p-md flex flex-col gap-sm shadow-2xs">
+                <div className="flex justify-between items-center pb-xs border-b border-outline-variant/50">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-on-surface">
+                    <HardDrive className="w-4 h-4 text-primary" /> Celery Workers & Queue Status
+                  </div>
+                  <span className={`text-[11px] font-bold px-2 py-0.5 rounded border ${metrics.queue_size > 5 ? 'bg-yellow-500/10 text-yellow-600 border-yellow-500/20' : 'bg-green-500/10 text-green-600 border-green-500/20'}`}>
+                    {metrics.queue_size > 5 ? 'HEAVY LOAD' : 'NORMAL'}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center text-[12.5px]">
+                  <span className="text-on-surface-variant font-semibold">Queue Size</span>
+                  <span className="font-bold text-on-surface">{metrics.queue_size || 0} scans pending</span>
+                </div>
+              </div>
+
+              <button 
+                onClick={openActiveScansModal}
+                className="w-full bg-surface-container border border-outline-variant text-primary py-2.5 rounded-xl text-[13px] font-bold hover:bg-primary/10 hover:border-primary/30 cursor-pointer transition-colors flex items-center justify-center gap-2 shadow-2xs"
+              >
+                <span className="material-symbols-outlined text-[18px]">screen_search</span>
+                Inspect Active Scans
+              </button>
             </div>
-            <div className="flex-1">
-              <h3 className="font-bold text-on-surface text-[15px] m-0 mb-1">Support Engineer Scope & Guidelines</h3>
-              <p className="text-on-surface-variant text-[13px] leading-relaxed m-0">
-                You are currently in the Support Engineer Operations Console. You have full visibility into organizations, active scan quotas, global members, audit logs, and outbound communication logs to assist client troubleshooting.
-              </p>
-              <ul className="text-on-surface-variant text-[12.5px] mt-2 mb-0 pl-4 space-y-1">
-                <li>• Use the <strong><Key className="w-3.5 h-3.5 inline mr-1 text-primary" /> Inspect</strong> action on any client organization to temporarily log in as their admin and diagnose issue reports.</li>
-                <li>• You can edit member roles or organization assignments to assist configuration, but password changes are restricted for security.</li>
-                <li>• Member and Organization creation/deletion are managed exclusively by Super Admins.</li>
-              </ul>
+
+            {/* Support Guidance Box */}
+            <div className="bg-blue-500/5 border border-blue-500/20 rounded-2xl p-5 flex flex-col justify-between">
+              <div>
+                <div className="flex items-center gap-2 text-blue-600 mb-2">
+                  <Info className="w-5 h-5" />
+                  <h3 className="font-bold text-on-surface text-[15px] m-0">Support Engineer Operating Scope</h3>
+                </div>
+                <p className="text-on-surface-variant text-[13px] leading-relaxed m-0">
+                  As a Support Engineer, you have full diagnostic visibility across platform performance metrics, customer environment states, active scans, and transaction logs.
+                </p>
+                <ul className="text-on-surface-variant text-[12.5px] mt-3 space-y-1.5 pl-4">
+                  <li>• Use the <strong><Key className="w-3.5 h-3.5 inline text-primary mr-1" /> Inspect Tenant</strong> tool in Organizations tab to troubleshoot tenant issues in real-time.</li>
+                  <li>• Modify client role assignments or org mappings to resolve onboarding configurations.</li>
+                  <li>• Member passwords and organization creation/deletion are restricted for administrative security.</li>
+                </ul>
+              </div>
+              
+              <div className="mt-4 pt-3 border-t border-blue-500/20 flex items-center justify-between text-xs text-on-surface-variant font-medium">
+                <span>System Status: Fully Operational</span>
+                <span className="text-emerald-600 font-bold flex items-center gap-1">
+                  <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Online
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Global Transaction & Billing History */}
+          <div className="flex flex-col gap-md">
+            <h2 className="font-headline-sm font-bold text-on-surface flex items-center text-[17px] m-0">
+              <Receipt className="w-5 h-5 text-primary mr-2" /> Global Transactions & Invoices
+            </h2>
+            <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl overflow-hidden shadow-sm">
+              {loading ? (
+                <div className="p-10 text-center text-on-surface-variant text-[14px]">Fetching transaction logs...</div>
+              ) : (
+                <div className="overflow-x-auto max-h-[350px] hide-scrollbar">
+                  <table className="w-full text-left text-sm border-collapse">
+                    <thead className="bg-surface-container text-on-surface-variant border-b border-outline-variant sticky top-0 select-none">
+                      <tr>
+                        {['Date', 'Organization / User', 'Tier', 'Amount', 'Status', 'Invoice'].map((h, i) => (
+                          <th 
+                            key={h} 
+                            onClick={() => handleBillSort(h)}
+                            className={`px-md py-sm font-bold text-[12px] uppercase tracking-wider ${i === 5 ? 'text-right' : ''} ${h !== 'Invoice' ? 'cursor-pointer hover:bg-surface-container-highest transition-colors group' : ''}`}
+                          >
+                            <div className={`flex items-center gap-xs ${i === 5 ? 'justify-end' : ''}`}>
+                              {h}
+                            </div>
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-outline-variant">
+                      {recentPayments.length === 0 ? (
+                        <tr><td colSpan="6" className="p-10 text-center text-on-surface-variant">No recent transactions.</td></tr>
+                      ) : getSortedBills().map(p => (
+                        <tr key={p.id} className="hover:bg-surface-container transition-colors">
+                          <td className="px-md py-sm text-[13px] text-on-surface-variant">{new Date(p.created_at).toLocaleDateString()}</td>
+                          <td className="px-md py-sm"><div className="font-bold text-on-surface text-[13px]">{p.org_name}</div></td>
+                          <td className="px-md py-sm"><span className="text-[12px] font-bold capitalize text-primary bg-primary/10 px-2 py-0.5 rounded border border-primary/20">{p.tier_id}</span></td>
+                          <td className="px-md py-sm font-bold text-[13.5px] text-on-surface">{p.currency === 'INR' ? '₹' : '$'}{p.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
+                          <td className="px-md py-sm"><div className="flex items-center gap-xs text-[12.5px] font-bold"><span className={`w-2 h-2 rounded-full ${p.status === 'successful' ? 'bg-green-500' : 'bg-error'}`}></span><span className={p.status === 'successful' ? 'text-green-600 dark:text-green-500' : 'text-error'}>{p.status === 'successful' ? 'Success' : 'Failed'}</span></div></td>
+                          <td className="px-md py-sm text-right">
+                            <div className="flex items-center justify-end gap-1">
+                              <button onClick={() => setViewInvoice(p)} className="text-on-surface-variant hover:text-primary transition-colors bg-transparent border-0 cursor-pointer p-1" title="View Invoice">
+                                <Eye className="w-4 h-4" />
+                              </button>
+                              <button onClick={() => handleDownloadInvoice(p)} className="text-on-surface-variant hover:text-primary transition-colors bg-transparent border-0 cursor-pointer p-1" title="Download Invoice">
+                                <Download className="w-4 h-4" />
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* System Audit Trail Preview */}
+          <div className="flex flex-col gap-md">
+            <div className="flex justify-between items-center">
+              <h2 className="font-headline-sm font-bold text-on-surface flex items-center text-[17px] m-0">
+                <Layers className="w-5 h-5 text-primary mr-2" /> Recent System Audit Events
+              </h2>
+              <button onClick={() => setActiveTab('audit')} className="text-primary font-bold text-[13px] hover:underline bg-transparent border-0 cursor-pointer">
+                View All Logs →
+              </button>
+            </div>
+
+            <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl overflow-hidden shadow-sm">
+              {loading ? (
+                <div className="p-10 text-center text-on-surface-variant text-[14px]">Fetching audit logs...</div>
+              ) : (
+                <div className="overflow-x-auto max-h-[350px] hide-scrollbar">
+                  <table className="w-full text-left text-sm border-collapse">
+                    <thead className="bg-surface-container text-on-surface-variant border-b border-outline-variant sticky top-0">
+                      <tr>
+                        <th className="px-md py-sm font-bold text-[12px] uppercase tracking-wider">Date & Time</th>
+                        <th className="px-md py-sm font-bold text-[12px] uppercase tracking-wider">User</th>
+                        <th className="px-md py-sm font-bold text-[12px] uppercase tracking-wider">Action / Event</th>
+                        <th className="px-md py-sm font-bold text-[12px] uppercase tracking-wider">Target</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-outline-variant">
+                      {auditLogs.length === 0 ? (
+                        <tr><td colSpan="4" className="p-10 text-center text-on-surface-variant">No audit logs found.</td></tr>
+                      ) : auditLogs.slice(0, 5).map(log => (
+                        <tr key={log.id} className="hover:bg-surface-container transition-colors">
+                          <td className="px-md py-sm text-on-surface-variant text-[12.5px]">{new Date(log.timestamp).toLocaleString()}</td>
+                          <td className="px-md py-sm font-bold text-on-surface text-[13px]">{log.user_email}</td>
+                          <td className="px-md py-sm font-semibold text-on-surface text-[13px]">{log.action}</td>
+                          <td className="px-md py-sm font-bold text-[13px] text-on-surface-variant">{log.target_name || log.target_id || '-'}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -865,6 +1134,89 @@ export const SupportEngineerPanel = () => {
         </div>
       )}
 
+      {/* Active Scans Modal */}
+      <CustomModal isOpen={activeScansModalOpen} onClose={() => setActiveScansModalOpen(false)} title="Active Scans Diagnostic">
+        {fetchingActiveScans ? <div className="text-center py-xl font-bold text-on-surface-variant">Loading active scans...</div> : activeScans.length === 0 ? <div className="text-center py-xl font-bold text-on-surface-variant">No active scans running right now.</div> : (
+          <div className="flex flex-col gap-md">
+            {activeScans.map(scan => (
+              <div key={scan.id} className="bg-surface border border-outline-variant rounded-xl p-md flex flex-col sm:flex-row justify-between items-center gap-md">
+                <div>
+                  <div className="font-bold text-on-surface">{scan.target_url}</div>
+                  <div className="text-xs text-on-surface-variant mt-0.5">Scan ID: {scan.id} | Org ID: {scan.org_id}</div>
+                </div>
+                <button onClick={() => handleKillScan(scan.id)} className="bg-error/10 text-error border border-error/20 py-1.5 px-3 rounded font-bold cursor-pointer hover:bg-error/20 transition-all text-xs">
+                  Terminate Scan
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </CustomModal>
+
+      {/* Invoice View Modal */}
+      <CustomModal
+        isOpen={!!viewInvoice}
+        onClose={() => setViewInvoice(null)}
+        title="Invoice Details"
+        footer={
+          <>
+            <button onClick={() => setViewInvoice(null)} className="px-4 py-2 text-on-surface-variant hover:bg-surface-container rounded-lg font-bold border-0 bg-transparent cursor-pointer">Close</button>
+            <button onClick={() => { handleDownloadInvoice(viewInvoice); setViewInvoice(null); }} className="px-4 py-2 bg-primary text-white flex items-center gap-2 rounded-lg font-bold border-0 cursor-pointer">
+              <Download className="w-4 h-4" /> Download PDF
+            </button>
+          </>
+        }
+      >
+        {viewInvoice && (
+          <div className="flex flex-col gap-4 text-on-surface">
+            <div className="flex justify-between items-end border-b border-outline-variant pb-4 mb-2">
+              <div>
+                <h1 className="text-2xl font-bold text-primary m-0">LarShield</h1>
+                <p className="text-on-surface-variant m-0 text-sm mt-1">Payment Receipt & Invoice</p>
+              </div>
+              <div className="text-right">
+                <div className="text-sm font-bold opacity-80 uppercase tracking-wider">Date</div>
+                <div>{new Date(viewInvoice.created_at).toLocaleString()}</div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 bg-surface-container-low p-4 rounded-lg">
+              <div>
+                <div className="text-xs text-on-surface-variant font-bold uppercase mb-1">Billed To</div>
+                <div className="font-bold">{viewInvoice.org_name}</div>
+                <div className="text-sm opacity-80">{viewInvoice.user_email}</div>
+              </div>
+              <div className="text-right">
+                <div className="text-xs text-on-surface-variant font-bold uppercase mb-1">Status</div>
+                <div className={`font-bold uppercase ${viewInvoice.status === 'successful' ? 'text-green-600' : 'text-error'}`}>{viewInvoice.status}</div>
+              </div>
+            </div>
+
+            <div className="border border-outline-variant rounded-lg overflow-hidden">
+              <table className="w-full text-left border-collapse text-sm">
+                <thead className="bg-surface-container border-b border-outline-variant">
+                  <tr>
+                    <th className="p-3 font-bold">Subscription Plan</th>
+                    <th className="p-3 font-bold text-right">Amount</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td className="p-3 font-semibold capitalize">{viewInvoice.tier_id} Plan Subscription</td>
+                    <td className="p-3 font-bold text-right">{viewInvoice.currency === 'INR' ? '₹' : '$'}{viewInvoice.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div className="flex justify-between items-center bg-primary/10 border border-primary/20 p-4 rounded-lg text-primary font-bold text-lg mt-2">
+              <span>Total Amount Paid</span>
+              <span>{viewInvoice.currency === 'INR' ? '₹' : '$'}{viewInvoice.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
+            </div>
+          </div>
+        )}
+      </CustomModal>
+
       {/* Prompt Modal for Editing Role/Org */}
       <CustomModal
         isOpen={promptModal.isOpen}
@@ -918,7 +1270,7 @@ export const SupportEngineerPanel = () => {
         footer={
           <>
             <button onClick={closeConfirm} className="px-4 py-2 text-on-surface-variant hover:bg-surface-container rounded-lg font-bold border-0 bg-transparent cursor-pointer">Cancel</button>
-            <button onClick={confirmModal.onConfirm} className="px-4 py-2 bg-primary text-white rounded-lg font-bold border-0 cursor-pointer">Confirm</button>
+            <button onClick={confirmModal.onConfirm} className={`px-4 py-2 rounded-lg font-bold border-0 cursor-pointer text-white ${confirmModal.type === 'error' ? 'bg-error' : 'bg-primary'}`}>Confirm</button>
           </>
         }
       />