Update frontend/src/pages/ReportsHistory.jsx

frontend/src/pages/ReportsHistory.jsx

@@ -1,424 +1,424 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, Link, useLocation } from 'react-router-dom';
-import { useAuth } from '../components/AuthContext';
-import { OrganizationSelector } from '../components/OrganizationSelector';
-
-export const ReportsHistory = () => {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const q = searchParams.get('q') || '';
-
-  const [scans, setScans] = useState([]);
-  const [searchQuery, setSearchQuery] = useState(q);
-
-  useEffect(() => {
-    setSearchQuery(q);
-  }, [q]);
-  const [scanTypeFilter, setScanTypeFilter] = useState('All Types');
-  const [loading, setLoading] = useState(true);
-  const [exportingId, setExportingId] = useState(null);
-  const [copiedId, setCopiedId] = useState(null);
-  const [error, setError] = useState(null);
-  const [now, setNow] = useState(new Date());
-  
-  const [dateFilter, setDateFilter] = useState('all'); // 'all', '7d', '30d'
-  const [statusFilter, setStatusFilter] = useState('all'); // 'all', 'completed', 'scanning', 'failed'
-  const [showFilters, setShowFilters] = useState(false);
-  
-  const [sortColumn, setSortColumn] = useState('Date');
-  const [sortDirection, setSortDirection] = useState('desc');
-
-  const { token } = useAuth();
-  const navigate = useNavigate();
-
-  // Live clock — updates every second for accurate "time ago" display
-  useEffect(() => {
-    const tick = setInterval(() => setNow(new Date()), 1000);
-    return () => clearInterval(tick);
-  }, []);
-
-  useEffect(() => {
-    fetchScanHistory();
-    // Auto-refresh every 5s so running scans update live
-    const interval = setInterval(fetchScanHistory, 5000);
-    return () => clearInterval(interval);
-  }, [token]);
-
-  const fetchScanHistory = async () => {
-    try {
-      const res = await fetch('/api/scans/history', {
-        headers: { 'Authorization': `Bearer ${token}` }
-      });
-      if (res.ok) {
-        const data = await res.json();
-        setScans(data.scans || []);
-      }
-    } catch (err) {
-      console.error("Error fetching historical scans", err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handlePdfExport = async (e, scanId) => {
-    e.stopPropagation();
-    setExportingId(scanId);
-    try {
-      const res = await fetch(`/api/reports/${scanId}/pdf`, {
-        headers: { 'Authorization': `Bearer ${token}` }
-      });
-      if (res.ok) {
-        const blob = await res.blob();
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `LarShield_Report_${scanId.substring(0, 8)}.pdf`;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        window.URL.revokeObjectURL(url);
-      } else {
-        setError("Failed to compile PDF Report. Server error.");
-      }
-    } catch (err) {
-      console.error("PDF Export error", err);
-    } finally {
-      setExportingId(null);
-    }
-  };
-
-  const handleShare = (e, scanId) => {
-    e.stopPropagation();
-    const shareUrl = `${window.location.origin}/scans/results?id=${scanId}`;
-    navigator.clipboard.writeText(shareUrl);
-    setCopiedId(scanId);
-    setTimeout(() => setCopiedId(null), 2500);
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-2xl font-label-md text-label-md text-on-surface-variant text-left">
-        <span className="material-symbols-outlined animate-spin mr-sm">sync</span>
-        Loading Historical Audits...
-      </div>
-    );
-  }
-
-  // Filter & Search logic
-  const filteredScans = scans.filter((scan) => {
-    const cleanUrl = scan.target_url.toLowerCase();
-    const cleanId = scan.id.toLowerCase();
-    const cleanStatus = scan.status.toLowerCase();
-    const query = searchQuery.toLowerCase();
-    const matchesSearch = cleanUrl.includes(query) || cleanId.includes(query) || cleanStatus.includes(query);
-    
-    const matchesType = scanTypeFilter === 'All Types' || scan.scan_type === scanTypeFilter || (scanTypeFilter === 'Advanced' && scan.scan_type === 'Standard');
-    const matchesStatus = statusFilter === 'all' || scan.status === statusFilter;
-    
-    let matchesDate = true;
-    if (dateFilter !== 'all' && scan.started_at) {
-        const scanDate = new Date(scan.started_at);
-        const diffDays = (now - scanDate) / (1000 * 60 * 60 * 24);
-        if (dateFilter === '7d' && diffDays > 7) matchesDate = false;
-        if (dateFilter === '30d' && diffDays > 30) matchesDate = false;
-    }
-    
-    return matchesSearch && matchesType && matchesStatus && matchesDate;
-  });
-
-  // Format date in local timezone (IST-aware)
-  const formatDate = (isoString) => {
-    if (!isoString) return 'Unknown';
-    return new Date(isoString).toLocaleString('en-IN', {
-      day: '2-digit', month: 'short', year: 'numeric',
-      hour: '2-digit', minute: '2-digit', second: '2-digit',
-      hour12: true
-    });
-  };
-
-  // Live "X ago" helper
-  const timeAgo = (isoString) => {
-    if (!isoString) return '';
-    const diff = Math.floor((now - new Date(isoString)) / 1000);
-    if (diff < 60) return `${diff}s ago`;
-    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-    return `${Math.floor(diff / 86400)}d ago`;
-  };
-
-  const handleSort = (column) => {
-    if (sortColumn === column) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortColumn(column);
-      setSortDirection('asc');
-    }
-  };
-
-  const getSortedScans = () => {
-    return [...filteredScans].sort((a, b) => {
-      let aVal, bVal;
-      switch (sortColumn) {
-        case 'Report ID & Date':
-        case 'Date':
-          aVal = new Date(a.started_at || 0).getTime(); bVal = new Date(b.started_at || 0).getTime(); break;
-        case 'Target Host':
-          aVal = a.target_url || ''; bVal = b.target_url || ''; break;
-        case 'Engine profile':
-          aVal = a.scan_type || ''; bVal = b.scan_type || ''; break;
-        case 'Findings Status':
-          aVal = a.status || ''; bVal = b.status || ''; break;
-        default:
-          return 0;
-      }
-      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
-      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
-      return 0;
-    });
-  };
-
-  return (
-    <div className="flex flex-col gap-lg text-left w-full">
-      
-      {/* Error Toast */}
-      {error && (
-        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-[100] flex items-center bg-error text-on-error px-md py-sm rounded-lg shadow-xl animate-fade-in gap-sm border border-on-error/20">
-          <span className="material-symbols-outlined">error</span>
-          <span className="font-bold text-[14px]">{error}</span>
-          <button onClick={() => setError(null)} className="ml-md text-on-error/80 hover:text-on-error bg-transparent border-0 cursor-pointer p-0 flex items-center">
-            <span className="material-symbols-outlined text-[18px]">close</span>
-          </button>
-        </div>
-      )}
-
-      {/* Page Header & Date Actions */}
-      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-md">
-        <div>
-          <h2 className="font-display-lg text-display-lg text-on-surface font-bold tracking-tight">Reports &amp; Logs</h2>
-          <p className="font-body-md text-body-md text-on-surface-variant mt-sm">
-            View and manage historical security scans and vulnerability logs.
-          </p>
-        </div>
-        <div className="flex items-center gap-sm w-full md:w-auto relative">
-          <OrganizationSelector />
-          <select 
-            className="appearance-none flex items-center gap-xs px-md py-sm bg-surface border border-outline-variant rounded-lg text-on-surface font-label-md text-label-md hover:border-primary transition-all cursor-pointer"
-            value={dateFilter}
-            onChange={(e) => setDateFilter(e.target.value)}
-          >
-            <option value="all">🗓 Date: All Time</option>
-            <option value="7d">🗓 Last 7 Days</option>
-            <option value="30d">🗓 Last 30 Days</option>
-          </select>
-          
-          <button 
-            onClick={() => setShowFilters(!showFilters)}
-            className={`flex items-center gap-xs px-md py-sm bg-surface border ${showFilters ? 'border-primary' : 'border-outline-variant'} rounded-lg text-on-surface font-label-md text-label-md hover:border-primary transition-all cursor-pointer`}
-          >
-            <span className="material-symbols-outlined text-[18px]">filter_list</span>
-            <span>Filter Status</span>
-          </button>
-          
-          {showFilters && (
-            <div className="absolute top-[110%] right-0 bg-surface border border-outline-variant rounded-lg shadow-lg z-50 flex flex-col min-w-[150px] overflow-hidden">
-                <button onClick={() => {setStatusFilter('all'); setShowFilters(false)}} className={`text-left px-md py-sm border-b border-outline-variant ${statusFilter === 'all' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>All Statuses</button>
-                <button onClick={() => {setStatusFilter('completed'); setShowFilters(false)}} className={`text-left px-md py-sm border-b border-outline-variant ${statusFilter === 'completed' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>Completed</button>
-                <button onClick={() => {setStatusFilter('scanning'); setShowFilters(false)}} className={`text-left px-md py-sm border-b border-outline-variant ${statusFilter === 'scanning' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>Scanning</button>
-                <button onClick={() => {setStatusFilter('failed'); setShowFilters(false)}} className={`text-left px-md py-sm ${statusFilter === 'failed' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>Failed</button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Search & Toolbar */}
-      <div className="bg-surface border border-outline-variant rounded-xl p-sm flex flex-col sm:flex-row gap-sm items-center shadow-sm">
-        <div className="relative flex-grow w-full">
-          <span className="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
-          <input 
-            type="text"
-            className="w-full bg-surface-container-low border border-transparent rounded-lg py-sm pl-xl pr-md text-on-surface font-body-sm text-body-sm placeholder-on-surface-variant focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
-            placeholder="Search reports by ID, Target, or Status..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-        <div className="flex items-center gap-xs w-full sm:w-auto border-t sm:border-t-0 pt-sm sm:pt-0">
-          <span className="font-label-sm text-label-sm text-on-surface-variant uppercase px-sm font-bold whitespace-nowrap">Scan Profile:</span>
-          <select 
-            className="bg-surface border border-outline-variant rounded-lg py-sm px-md text-on-surface font-body-sm text-body-sm focus:outline-none focus:border-primary transition-all w-full sm:w-auto cursor-pointer"
-            value={scanTypeFilter}
-            onChange={(e) => setScanTypeFilter(e.target.value)}
-          >
-            <option value="All Types">All Scan Profiles</option>
-            <option value="Quick">Quick Scan</option>
-            <option value="Advanced">Advanced Scan</option>
-            <option value="Deep">Deep Assessment</option>
-          </select>
-        </div>
-      </div>
-
-      {/* Reports List Canvas Card */}
-      <div className="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col shadow-sm">
-        
-        {/* Table Header */}
-        <div className="grid grid-cols-12 gap-md px-lg py-sm border-b border-outline-variant bg-surface-container-low items-center hidden md:grid select-none">
-          <div onClick={() => handleSort('Date')} className="col-span-3 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
-            Report ID &amp; Date
-            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Date' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
-              {sortColumn === 'Date' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
-            </span>
-          </div>
-          <div onClick={() => handleSort('Target Host')} className="col-span-3 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
-            Target Host
-            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Target Host' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
-              {sortColumn === 'Target Host' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
-            </span>
-          </div>
-          <div onClick={() => handleSort('Engine profile')} className="col-span-2 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
-            Engine profile
-            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Engine profile' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
-              {sortColumn === 'Engine profile' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
-            </span>
-          </div>
-          <div onClick={() => handleSort('Findings Status')} className="col-span-2 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
-            Findings Status
-            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Findings Status' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
-              {sortColumn === 'Findings Status' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
-            </span>
-          </div>
-          <div className="col-span-2 font-label-sm text-label-sm text-on-surface-variant uppercase text-right font-bold">Actions</div>
-        </div>
-
-        {/* List Items */}
-        <div className="flex flex-col divide-y divide-outline-variant">
-          {filteredScans.length === 0 ? (
-            <div className="text-center py-2xl text-on-surface-variant font-body-sm">
-              No historical security audits match your search query.
-            </div>
-          ) : (
-            getSortedScans().map((s) => {
-              const hasCritical = s.vulnerabilities_count?.critical > 0;
-              const hasHigh = s.vulnerabilities_count?.high > 0;
-
-              return (
-                <div 
-                  key={s.id}
-                  onClick={() => navigate(`/scans/results?id=${s.id}`)}
-                  className="grid grid-cols-1 md:grid-cols-12 gap-md px-lg py-md hover:bg-surface-container-low transition-colors items-center group cursor-pointer"
-                >
-                  {/* ID & Date */}
-                  <div className="col-span-1 md:col-span-3 flex flex-col text-left">
-                    <span className="font-label-md text-label-md text-primary font-bold group-hover:underline">
-                      REP-{s.id.substring(0, 8).toUpperCase()}
-                    </span>
-                    <span className="font-body-sm text-body-sm text-on-surface-variant flex items-center gap-xs mt-xs">
-                      <span className="material-symbols-outlined text-[14px]">event</span>
-                      {formatDate(s.started_at)}
-                    </span>
-                    <span className="font-body-sm text-body-sm text-on-surface-variant/60 text-[11px] ml-[18px]">
-                      {timeAgo(s.started_at)}
-                    </span>
-                  </div>
-
-                  {/* Target Host */}
-                  <div className="col-span-1 md:col-span-3 text-left">
-                    <span className="font-body-md text-body-md text-on-surface font-semibold truncate block">
-                      {s.target_url.replace("https://", "").replace("http://", "")}
-                    </span>
-                  </div>
-
-                  {/* Type */}
-                  <div className="col-span-1 md:col-span-2 text-left">
-                    <span className="inline-flex items-center px-sm py-[2px] rounded bg-surface border border-outline-variant font-label-sm text-label-sm text-on-surface-variant font-bold uppercase tracking-wider">
-                      {s.scan_type} Scan
-                    </span>
-                  </div>
-
-                  {/* Status / Findings */}
-                  <div className="col-span-1 md:col-span-2 text-left">
-                    {s.status === 'completed' ? (
-                      (() => {
-                        const counts = s.vulnerabilities_count || {};
-                        const total = (counts.critical || 0) + (counts.high || 0) + (counts.medium || 0) + (counts.low || 0) + (counts.info || 0);
-                        if (total === 0) {
-                          return (
-                            <div className="flex items-center gap-sm">
-                              <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
-                              <span className="font-label-md text-label-md font-bold text-green-600">Clean / Safe</span>
-                            </div>
-                          );
-                        }
-                        return (
-                          <div className="grid grid-cols-2 gap-xs w-fit">
-                            {counts.critical > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-error/10 text-error border border-error/20 text-center" title="Critical">{counts.critical} Crit</span>}
-                            {counts.high > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-orange-500/10 text-orange-600 border border-orange-500/20 text-center" title="High">{counts.high} High</span>}
-                            {counts.medium > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-yellow-500/10 text-yellow-600 border border-yellow-500/20 text-center" title="Medium">{counts.medium} Med</span>}
-                            {counts.low > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-600 border border-blue-500/20 text-center" title="Low">{counts.low} Low</span>}
-                            {counts.info > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-slate-500/10 text-slate-600 border border-slate-500/20 text-center" title="Info">{counts.info} Info</span>}
-                          </div>
-                        );
-                      })()
-                    ) : s.status === 'scanning' || s.status === 'queued' ? (
-                      <div className="flex items-center gap-sm">
-                        <div className="w-2.5 h-2.5 rounded-full bg-yellow-500 animate-pulse"></div>
-                        <span className="font-label-md text-label-md text-yellow-600 font-bold uppercase">
-                          Running Audit
-                        </span>
-                      </div>
-                    ) : (
-                      <div className="flex items-center gap-sm">
-                        <div className="w-2.5 h-2.5 rounded-full bg-slate-400"></div>
-                        <span className="font-label-md text-label-md text-slate-500 font-bold">
-                          Failed Session
-                        </span>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Actions */}
-                  <div className="col-span-1 md:col-span-2 flex items-center justify-end gap-sm">
-                    <button 
-                      onClick={(e) => handlePdfExport(e, s.id)}
-                      disabled={exportingId === s.id}
-                      className="p-xs text-on-surface-variant hover:text-primary transition-colors border-0 bg-transparent cursor-pointer flex items-center justify-center" 
-                      title="Download PDF"
-                    >
-                      <span className="material-symbols-outlined text-[20px]">
-                        {exportingId === s.id ? 'sync' : 'picture_as_pdf'}
-                      </span>
-                    </button>
-                    <button 
-                      onClick={(e) => handleShare(e, s.id)}
-                      className="p-xs text-on-surface-variant hover:text-primary transition-colors border-0 bg-transparent cursor-pointer flex items-center justify-center relative" 
-                      title={copiedId === s.id ? 'Link Copied!' : 'Share Link'}
-                    >
-                      <span className="material-symbols-outlined text-[20px]">
-                        {copiedId === s.id ? 'check_circle' : 'share'}
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              );
-            })
-          )}
-        </div>
-
-        {/* Pagination footer */}
-        <div className="px-lg py-md border-t border-outline-variant bg-surface-container-low flex justify-between items-center">
-          <span className="font-body-sm text-body-sm text-on-surface-variant">
-            Showing 1-{filteredScans.length} of {filteredScans.length} completed logs
-          </span>
-          <div className="flex items-center gap-sm">
-            <button className="p-[4px] rounded hover:bg-surface-variant text-on-surface-variant transition-colors disabled:opacity-50 border-0 bg-transparent cursor-pointer flex items-center justify-center" disabled>
-              <span className="material-symbols-outlined">chevron_left</span>
-            </button>
-            <button className="p-[4px] rounded hover:bg-surface-variant text-on-surface-variant transition-colors disabled:opacity-50 border-0 bg-transparent cursor-pointer flex items-center justify-center" disabled>
-              <span className="material-symbols-outlined">chevron_right</span>
-            </button>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  );
-};
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link, useLocation } from 'react-router-dom';
+import { useAuth } from '../components/AuthContext';
+import { OrganizationSelector } from '../components/OrganizationSelector';
+
+export const ReportsHistory = () => {
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const q = searchParams.get('q') || '';
+
+  const [scans, setScans] = useState([]);
+  const [searchQuery, setSearchQuery] = useState(q);
+
+  useEffect(() => {
+    setSearchQuery(q);
+  }, [q]);
+  const [scanTypeFilter, setScanTypeFilter] = useState('All Types');
+  const [loading, setLoading] = useState(true);
+  const [exportingId, setExportingId] = useState(null);
+  const [copiedId, setCopiedId] = useState(null);
+  const [error, setError] = useState(null);
+  const [now, setNow] = useState(new Date());
+  
+  const [dateFilter, setDateFilter] = useState('all'); // 'all', '7d', '30d'
+  const [statusFilter, setStatusFilter] = useState('all'); // 'all', 'completed', 'scanning', 'failed'
+  const [showFilters, setShowFilters] = useState(false);
+  
+  const [sortColumn, setSortColumn] = useState('Date');
+  const [sortDirection, setSortDirection] = useState('desc');
+
+  const { token } = useAuth();
+  const navigate = useNavigate();
+
+  // Live clock — updates every second for accurate "time ago" display
+  useEffect(() => {
+    const tick = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(tick);
+  }, []);
+
+  useEffect(() => {
+    fetchScanHistory();
+    // Auto-refresh every 5s so running scans update live
+    const interval = setInterval(fetchScanHistory, 5000);
+    return () => clearInterval(interval);
+  }, [token]);
+
+  const fetchScanHistory = async () => {
+    try {
+      const res = await fetch('/api/scans/history', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setScans(data.scans || []);
+      }
+    } catch (err) {
+      console.error("Error fetching historical scans", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePdfExport = async (e, scanId) => {
+    e.stopPropagation();
+    setExportingId(scanId);
+    try {
+      const res = await fetch(`/api/reports/${scanId}/pdf`, {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      if (res.ok) {
+        const blob = await res.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `LarShield_Report_${scanId.substring(0, 8)}.pdf`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        window.URL.revokeObjectURL(url);
+      } else {
+        setError("Failed to compile PDF Report. Server error.");
+      }
+    } catch (err) {
+      console.error("PDF Export error", err);
+    } finally {
+      setExportingId(null);
+    }
+  };
+
+  const handleShare = (e, scanId) => {
+    e.stopPropagation();
+    const shareUrl = `${window.location.origin}/api/reports/${scanId}/public-pdf`;
+    navigator.clipboard.writeText(shareUrl);
+    setCopiedId(scanId);
+    setTimeout(() => setCopiedId(null), 2500);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-2xl font-label-md text-label-md text-on-surface-variant text-left">
+        <span className="material-symbols-outlined animate-spin mr-sm">sync</span>
+        Loading Historical Audits...
+      </div>
+    );
+  }
+
+  // Filter & Search logic
+  const filteredScans = scans.filter((scan) => {
+    const cleanUrl = scan.target_url.toLowerCase();
+    const cleanId = scan.id.toLowerCase();
+    const cleanStatus = scan.status.toLowerCase();
+    const query = searchQuery.toLowerCase();
+    const matchesSearch = cleanUrl.includes(query) || cleanId.includes(query) || cleanStatus.includes(query);
+    
+    const matchesType = scanTypeFilter === 'All Types' || scan.scan_type === scanTypeFilter || (scanTypeFilter === 'Advanced' && scan.scan_type === 'Standard');
+    const matchesStatus = statusFilter === 'all' || scan.status === statusFilter;
+    
+    let matchesDate = true;
+    if (dateFilter !== 'all' && scan.started_at) {
+        const scanDate = new Date(scan.started_at);
+        const diffDays = (now - scanDate) / (1000 * 60 * 60 * 24);
+        if (dateFilter === '7d' && diffDays > 7) matchesDate = false;
+        if (dateFilter === '30d' && diffDays > 30) matchesDate = false;
+    }
+    
+    return matchesSearch && matchesType && matchesStatus && matchesDate;
+  });
+
+  // Format date in local timezone (IST-aware)
+  const formatDate = (isoString) => {
+    if (!isoString) return 'Unknown';
+    return new Date(isoString).toLocaleString('en-IN', {
+      day: '2-digit', month: 'short', year: 'numeric',
+      hour: '2-digit', minute: '2-digit', second: '2-digit',
+      hour12: true
+    });
+  };
+
+  // Live "X ago" helper
+  const timeAgo = (isoString) => {
+    if (!isoString) return '';
+    const diff = Math.floor((now - new Date(isoString)) / 1000);
+    if (diff < 60) return `${diff}s ago`;
+    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    return `${Math.floor(diff / 86400)}d ago`;
+  };
+
+  const handleSort = (column) => {
+    if (sortColumn === column) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const getSortedScans = () => {
+    return [...filteredScans].sort((a, b) => {
+      let aVal, bVal;
+      switch (sortColumn) {
+        case 'Report ID & Date':
+        case 'Date':
+          aVal = new Date(a.started_at || 0).getTime(); bVal = new Date(b.started_at || 0).getTime(); break;
+        case 'Target Host':
+          aVal = a.target_url || ''; bVal = b.target_url || ''; break;
+        case 'Engine profile':
+          aVal = a.scan_type || ''; bVal = b.scan_type || ''; break;
+        case 'Findings Status':
+          aVal = a.status || ''; bVal = b.status || ''; break;
+        default:
+          return 0;
+      }
+      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
+      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
+      return 0;
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-lg text-left w-full">
+      
+      {/* Error Toast */}
+      {error && (
+        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-[100] flex items-center bg-error text-on-error px-md py-sm rounded-lg shadow-xl animate-fade-in gap-sm border border-on-error/20">
+          <span className="material-symbols-outlined">error</span>
+          <span className="font-bold text-[14px]">{error}</span>
+          <button onClick={() => setError(null)} className="ml-md text-on-error/80 hover:text-on-error bg-transparent border-0 cursor-pointer p-0 flex items-center">
+            <span className="material-symbols-outlined text-[18px]">close</span>
+          </button>
+        </div>
+      )}
+
+      {/* Page Header & Date Actions */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-md">
+        <div>
+          <h2 className="font-display-lg text-display-lg text-on-surface font-bold tracking-tight">Reports &amp; Logs</h2>
+          <p className="font-body-md text-body-md text-on-surface-variant mt-sm">
+            View and manage historical security scans and vulnerability logs.
+          </p>
+        </div>
+        <div className="flex items-center gap-sm w-full md:w-auto relative">
+          <OrganizationSelector />
+          <select 
+            className="appearance-none flex items-center gap-xs px-md py-sm bg-surface border border-outline-variant rounded-lg text-on-surface font-label-md text-label-md hover:border-primary transition-all cursor-pointer"
+            value={dateFilter}
+            onChange={(e) => setDateFilter(e.target.value)}
+          >
+            <option value="all">🗓 Date: All Time</option>
+            <option value="7d">🗓 Last 7 Days</option>
+            <option value="30d">🗓 Last 30 Days</option>
+          </select>
+          
+          <button 
+            onClick={() => setShowFilters(!showFilters)}
+            className={`flex items-center gap-xs px-md py-sm bg-surface border ${showFilters ? 'border-primary' : 'border-outline-variant'} rounded-lg text-on-surface font-label-md text-label-md hover:border-primary transition-all cursor-pointer`}
+          >
+            <span className="material-symbols-outlined text-[18px]">filter_list</span>
+            <span>Filter Status</span>
+          </button>
+          
+          {showFilters && (
+            <div className="absolute top-[110%] right-0 bg-surface border border-outline-variant rounded-lg shadow-lg z-50 flex flex-col min-w-[150px] overflow-hidden">
+                <button onClick={() => {setStatusFilter('all'); setShowFilters(false)}} className={`text-left px-md py-sm border-b border-outline-variant ${statusFilter === 'all' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>All Statuses</button>
+                <button onClick={() => {setStatusFilter('completed'); setShowFilters(false)}} className={`text-left px-md py-sm border-b border-outline-variant ${statusFilter === 'completed' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>Completed</button>
+                <button onClick={() => {setStatusFilter('scanning'); setShowFilters(false)}} className={`text-left px-md py-sm border-b border-outline-variant ${statusFilter === 'scanning' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>Scanning</button>
+                <button onClick={() => {setStatusFilter('failed'); setShowFilters(false)}} className={`text-left px-md py-sm ${statusFilter === 'failed' ? 'bg-primary/10 text-primary' : 'hover:bg-surface-variant text-on-surface'}`}>Failed</button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Search & Toolbar */}
+      <div className="bg-surface border border-outline-variant rounded-xl p-sm flex flex-col sm:flex-row gap-sm items-center shadow-sm">
+        <div className="relative flex-grow w-full">
+          <span className="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
+          <input 
+            type="text"
+            className="w-full bg-surface-container-low border border-transparent rounded-lg py-sm pl-xl pr-md text-on-surface font-body-sm text-body-sm placeholder-on-surface-variant focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+            placeholder="Search reports by ID, Target, or Status..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-xs w-full sm:w-auto border-t sm:border-t-0 pt-sm sm:pt-0">
+          <span className="font-label-sm text-label-sm text-on-surface-variant uppercase px-sm font-bold whitespace-nowrap">Scan Profile:</span>
+          <select 
+            className="bg-surface border border-outline-variant rounded-lg py-sm px-md text-on-surface font-body-sm text-body-sm focus:outline-none focus:border-primary transition-all w-full sm:w-auto cursor-pointer"
+            value={scanTypeFilter}
+            onChange={(e) => setScanTypeFilter(e.target.value)}
+          >
+            <option value="All Types">All Scan Profiles</option>
+            <option value="Quick">Quick Scan</option>
+            <option value="Advanced">Advanced Scan</option>
+            <option value="Deep">Deep Assessment</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Reports List Canvas Card */}
+      <div className="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden flex flex-col shadow-sm">
+        
+        {/* Table Header */}
+        <div className="grid grid-cols-12 gap-md px-lg py-sm border-b border-outline-variant bg-surface-container-low items-center hidden md:grid select-none">
+          <div onClick={() => handleSort('Date')} className="col-span-3 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
+            Report ID &amp; Date
+            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Date' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
+              {sortColumn === 'Date' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
+            </span>
+          </div>
+          <div onClick={() => handleSort('Target Host')} className="col-span-3 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
+            Target Host
+            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Target Host' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
+              {sortColumn === 'Target Host' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
+            </span>
+          </div>
+          <div onClick={() => handleSort('Engine profile')} className="col-span-2 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
+            Engine profile
+            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Engine profile' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
+              {sortColumn === 'Engine profile' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
+            </span>
+          </div>
+          <div onClick={() => handleSort('Findings Status')} className="col-span-2 font-label-sm text-label-sm text-on-surface-variant uppercase font-bold cursor-pointer group flex items-center gap-xs">
+            Findings Status
+            <span className={`material-symbols-outlined text-[16px] opacity-0 group-hover:opacity-50 transition-opacity ${sortColumn === 'Findings Status' ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
+              {sortColumn === 'Findings Status' && sortDirection === 'desc' ? 'arrow_downward' : 'arrow_upward'}
+            </span>
+          </div>
+          <div className="col-span-2 font-label-sm text-label-sm text-on-surface-variant uppercase text-right font-bold">Actions</div>
+        </div>
+
+        {/* List Items */}
+        <div className="flex flex-col divide-y divide-outline-variant">
+          {filteredScans.length === 0 ? (
+            <div className="text-center py-2xl text-on-surface-variant font-body-sm">
+              No historical security audits match your search query.
+            </div>
+          ) : (
+            getSortedScans().map((s) => {
+              const hasCritical = s.vulnerabilities_count?.critical > 0;
+              const hasHigh = s.vulnerabilities_count?.high > 0;
+
+              return (
+                <div 
+                  key={s.id}
+                  onClick={() => navigate(`/scans/results?id=${s.id}`)}
+                  className="grid grid-cols-1 md:grid-cols-12 gap-md px-lg py-md hover:bg-surface-container-low transition-colors items-center group cursor-pointer"
+                >
+                  {/* ID & Date */}
+                  <div className="col-span-1 md:col-span-3 flex flex-col text-left">
+                    <span className="font-label-md text-label-md text-primary font-bold group-hover:underline">
+                      REP-{s.id.substring(0, 8).toUpperCase()}
+                    </span>
+                    <span className="font-body-sm text-body-sm text-on-surface-variant flex items-center gap-xs mt-xs">
+                      <span className="material-symbols-outlined text-[14px]">event</span>
+                      {formatDate(s.started_at)}
+                    </span>
+                    <span className="font-body-sm text-body-sm text-on-surface-variant/60 text-[11px] ml-[18px]">
+                      {timeAgo(s.started_at)}
+                    </span>
+                  </div>
+
+                  {/* Target Host */}
+                  <div className="col-span-1 md:col-span-3 text-left">
+                    <span className="font-body-md text-body-md text-on-surface font-semibold truncate block">
+                      {s.target_url.replace("https://", "").replace("http://", "")}
+                    </span>
+                  </div>
+
+                  {/* Type */}
+                  <div className="col-span-1 md:col-span-2 text-left">
+                    <span className="inline-flex items-center px-sm py-[2px] rounded bg-surface border border-outline-variant font-label-sm text-label-sm text-on-surface-variant font-bold uppercase tracking-wider">
+                      {s.scan_type} Scan
+                    </span>
+                  </div>
+
+                  {/* Status / Findings */}
+                  <div className="col-span-1 md:col-span-2 text-left">
+                    {s.status === 'completed' ? (
+                      (() => {
+                        const counts = s.vulnerabilities_count || {};
+                        const total = (counts.critical || 0) + (counts.high || 0) + (counts.medium || 0) + (counts.low || 0) + (counts.info || 0);
+                        if (total === 0) {
+                          return (
+                            <div className="flex items-center gap-sm">
+                              <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
+                              <span className="font-label-md text-label-md font-bold text-green-600">Clean / Safe</span>
+                            </div>
+                          );
+                        }
+                        return (
+                          <div className="grid grid-cols-2 gap-xs w-fit">
+                            {counts.critical > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-error/10 text-error border border-error/20 text-center" title="Critical">{counts.critical} Crit</span>}
+                            {counts.high > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-orange-500/10 text-orange-600 border border-orange-500/20 text-center" title="High">{counts.high} High</span>}
+                            {counts.medium > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-yellow-500/10 text-yellow-600 border border-yellow-500/20 text-center" title="Medium">{counts.medium} Med</span>}
+                            {counts.low > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-600 border border-blue-500/20 text-center" title="Low">{counts.low} Low</span>}
+                            {counts.info > 0 && <span className="text-[11px] font-bold px-1.5 py-0.5 rounded bg-slate-500/10 text-slate-600 border border-slate-500/20 text-center" title="Info">{counts.info} Info</span>}
+                          </div>
+                        );
+                      })()
+                    ) : s.status === 'scanning' || s.status === 'queued' ? (
+                      <div className="flex items-center gap-sm">
+                        <div className="w-2.5 h-2.5 rounded-full bg-yellow-500 animate-pulse"></div>
+                        <span className="font-label-md text-label-md text-yellow-600 font-bold uppercase">
+                          Running Audit
+                        </span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-sm">
+                        <div className="w-2.5 h-2.5 rounded-full bg-slate-400"></div>
+                        <span className="font-label-md text-label-md text-slate-500 font-bold">
+                          Failed Session
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="col-span-1 md:col-span-2 flex items-center justify-end gap-sm">
+                    <button 
+                      onClick={(e) => handlePdfExport(e, s.id)}
+                      disabled={exportingId === s.id}
+                      className="p-xs text-on-surface-variant hover:text-primary transition-colors border-0 bg-transparent cursor-pointer flex items-center justify-center" 
+                      title="Download PDF"
+                    >
+                      <span className="material-symbols-outlined text-[20px]">
+                        {exportingId === s.id ? 'sync' : 'picture_as_pdf'}
+                      </span>
+                    </button>
+                    <button 
+                      onClick={(e) => handleShare(e, s.id)}
+                      className="p-xs text-on-surface-variant hover:text-primary transition-colors border-0 bg-transparent cursor-pointer flex items-center justify-center relative" 
+                      title={copiedId === s.id ? 'Link Copied!' : 'Share Link'}
+                    >
+                      <span className="material-symbols-outlined text-[20px]">
+                        {copiedId === s.id ? 'check_circle' : 'share'}
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* Pagination footer */}
+        <div className="px-lg py-md border-t border-outline-variant bg-surface-container-low flex justify-between items-center">
+          <span className="font-body-sm text-body-sm text-on-surface-variant">
+            Showing 1-{filteredScans.length} of {filteredScans.length} completed logs
+          </span>
+          <div className="flex items-center gap-sm">
+            <button className="p-[4px] rounded hover:bg-surface-variant text-on-surface-variant transition-colors disabled:opacity-50 border-0 bg-transparent cursor-pointer flex items-center justify-center" disabled>
+              <span className="material-symbols-outlined">chevron_left</span>
+            </button>
+            <button className="p-[4px] rounded hover:bg-surface-variant text-on-surface-variant transition-colors disabled:opacity-50 border-0 bg-transparent cursor-pointer flex items-center justify-center" disabled>
+              <span className="material-symbols-outlined">chevron_right</span>
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};