Update frontend/src/pages/LogsAndThreats.jsx

frontend/src/pages/LogsAndThreats.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../components/AuthContext';
-import { ShieldAlert, FileText, AlertTriangle, Search, Download, X, RefreshCw, List } from 'lucide-react';
+import { ShieldAlert, Search, Download, RefreshCw, List, ArrowLeft } from 'lucide-react';
 
 const LogsAndThreats = () => {
   const { user, loading: authLoading } = useAuth();
@@ -9,8 +9,8 @@ const LogsAndThreats = () => {
   const [auditLogs, setAuditLogs] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  // Modal State for View All Audit Logs
-  const [showAllLogsModal, setShowAllLogsModal] = useState(false);
+  // Dedicated Full Page Audit Logs State
+  const [isFullLogsView, setIsFullLogsView] = useState(false);
   const [allLogs, setAllLogs] = useState([]);
   const [loadingAllLogs, setLoadingAllLogs] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -65,11 +65,15 @@ const LogsAndThreats = () => {
     return () => clearInterval(interval);
   }, []);
 
-  const openAllLogsModal = () => {
-    setShowAllLogsModal(true);
+  const openFullLogsView = () => {
+    setIsFullLogsView(true);
     fetchAllAuditLogs();
   };
 
+  const closeFullLogsView = () => {
+    setIsFullLogsView(false);
+  };
+
   const filteredAllLogs = allLogs.filter(log => {
     if (!searchQuery) return true;
     const q = searchQuery.toLowerCase();
@@ -155,6 +159,121 @@ const LogsAndThreats = () => {
     );
   }
 
+  // Full Page View Mode
+  if (isFullLogsView) {
+    return (
+      <div className="w-full text-on-surface animate-fade-in">
+        {/* Full Page Header */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between mb-lg gap-sm border-b border-outline-variant/60 pb-md">
+          <div>
+            <button 
+              onClick={closeFullLogsView}
+              className="flex items-center text-primary hover:underline font-bold text-[13px] mb-2 cursor-pointer bg-transparent border-0 p-0"
+            >
+              <ArrowLeft className="w-4 h-4 mr-1" />
+              Back to Summary Dashboard
+            </button>
+            <h1 className="text-[26px] font-extrabold font-display tracking-tight text-on-surface flex items-center gap-2">
+              <span className="material-symbols-outlined text-primary text-[28px]">policy</span>
+              Complete Admin Audit Logs
+              <span className="bg-primary/10 text-primary text-[12px] font-bold px-2.5 py-0.5 rounded-full ml-2">
+                {filteredAllLogs.length} Records
+              </span>
+            </h1>
+            <p className="text-on-surface-variant text-[13.5px] mt-1">Full system audit trail of administrative events and actions.</p>
+          </div>
+
+          <div className="flex items-center gap-2 flex-wrap">
+            <button
+              onClick={fetchAllAuditLogs}
+              disabled={loadingAllLogs}
+              className="flex items-center gap-1.5 px-3.5 py-2 bg-surface-container border border-outline-variant text-on-surface hover:bg-surface-container-high rounded-lg text-[13px] font-bold transition-colors cursor-pointer"
+            >
+              <RefreshCw className={`w-4 h-4 ${loadingAllLogs ? 'animate-spin' : ''}`} />
+              Refresh
+            </button>
+            <button
+              onClick={exportLogsToCSV}
+              disabled={!filteredAllLogs.length}
+              className="flex items-center gap-1.5 px-4 py-2 bg-primary text-on-primary hover:bg-primary/90 rounded-lg text-[13px] font-bold transition-colors cursor-pointer shadow-2xs"
+            >
+              <Download className="w-4 h-4" />
+              Export CSV
+            </button>
+          </div>
+        </div>
+
+        {/* Filter and Search Bar */}
+        <div className="mb-md bg-surface-container-lowest border border-outline-variant/70 rounded-xl p-4 flex flex-col sm:flex-row items-center justify-between gap-3 shadow-2xs">
+          <div className="relative w-full sm:w-80">
+            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" />
+            <input
+              type="text"
+              placeholder="Search user, action, or target..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-3 py-2 bg-surface border border-outline-variant/60 rounded-lg text-[13.5px] text-on-surface focus:outline-none focus:border-primary"
+            />
+          </div>
+          <div className="text-[12.5px] text-on-surface-variant font-medium">
+            Showing <strong className="text-on-surface font-bold">{getSortedLogs().length}</strong> audit event entries
+          </div>
+        </div>
+
+        {/* Audit Logs Data Table */}
+        <div className="bg-surface-container-lowest border border-outline-variant/70 rounded-xl overflow-hidden shadow-2xs">
+          {loadingAllLogs ? (
+            <div className="text-center py-16 text-on-surface-variant text-[14px]">Loading full audit history...</div>
+          ) : filteredAllLogs.length === 0 ? (
+            <div className="text-center py-16 text-on-surface-variant text-[14px]">No audit logs match your search filter.</div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-left text-[13.5px]">
+                <thead className="bg-surface-container-high/60 text-on-surface-variant text-[11px] uppercase tracking-wider select-none border-b border-outline-variant/70">
+                  <tr>
+                    {['Timestamp', 'User', 'Action', 'Target'].map((h, i) => (
+                      <th 
+                        key={h}
+                        onClick={() => handleLogSort(h)}
+                        className="p-3.5 cursor-pointer hover:bg-surface-container-highest transition-colors group"
+                      >
+                        <div className="flex items-center gap-xs font-bold">
+                          {h}
+                          <span className={`material-symbols-outlined text-[14px] opacity-0 group-hover:opacity-50 transition-opacity ${sortLogCol === h ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
+                            {sortLogCol === h && sortLogDir === 'desc' ? 'arrow_downward' : 'arrow_upward'}
+                          </span>
+                        </div>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-outline-variant/60">
+                  {getSortedLogs().map((log, i) => (
+                    <tr key={log.id || i} className="hover:bg-surface-container-lowest/80 transition-colors">
+                      <td className="p-3.5 text-[12px] font-mono text-on-surface-variant whitespace-nowrap">
+                        {new Date(log.timestamp).toLocaleString()}
+                      </td>
+                      <td className="p-3.5 font-bold text-on-surface">
+                        {log.user_email || log.admin_id || 'System'}
+                      </td>
+                      <td className="p-3.5 text-on-surface">
+                        {log.action}
+                      </td>
+                      <td className="p-3.5 text-[12.5px] text-on-surface-variant">
+                        {log.target_name || log.target_id || '-'}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Dashboard Overview Mode
   return (
     <div className="w-full text-on-surface animate-fade-in">
       <div className="flex flex-col md:flex-row md:items-center justify-between mb-xl gap-sm">
@@ -178,7 +297,7 @@ const LogsAndThreats = () => {
             <span className="material-symbols-outlined text-error mr-2 text-[20px]">warning</span>
             Global Threat Intelligence
           </h2>
-          <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl overflow-hidden shadow-sm p-4">
+          <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl overflow-hidden shadow-2xs p-4">
             {loading ? (
               <div className="text-center text-on-surface-variant text-[13px] py-4">Loading threats...</div>
             ) : trends.length === 0 ? (
@@ -188,10 +307,10 @@ const LogsAndThreats = () => {
                 {trends.map((t, i) => (
                   <li key={i} className="py-3 flex justify-between items-center">
                     <span className="font-semibold text-on-surface text-[14px] flex items-center gap-2">
-                      <span className="w-6 h-6 rounded-full bg-error/10 text-error flex items-center justify-center text-[11px]">{i + 1}</span>
+                      <span className="w-6 h-6 rounded-full bg-error/10 text-error flex items-center justify-center text-[11px] font-bold">{i + 1}</span>
                       {t.title}
                     </span>
-                    <span className="bg-surface-container-high px-2 py-1 rounded-md text-[12px] font-bold">{t.count} Found</span>
+                    <span className="bg-surface-container-high px-2.5 py-1 rounded-md text-[12px] font-bold">{t.count} Found</span>
                   </li>
                 ))}
               </ul>
@@ -207,14 +326,14 @@ const LogsAndThreats = () => {
               Admin Audit Logs
             </h2>
             <button
-              onClick={openAllLogsModal}
+              onClick={openFullLogsView}
               className="flex items-center gap-1.5 px-3 py-1.5 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-colors font-bold text-[12px] cursor-pointer"
             >
               <List className="w-4 h-4" />
               View All Audit Logs
             </button>
           </div>
-          <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl overflow-hidden shadow-sm p-4">
+          <div className="bg-surface-container-lowest border border-outline-variant rounded-2xl overflow-hidden shadow-2xs p-4">
             {loading ? (
               <div className="text-center text-on-surface-variant text-[13px] py-4">Loading logs...</div>
             ) : auditLogs.length === 0 ? (
@@ -239,8 +358,8 @@ const LogsAndThreats = () => {
                 </ul>
                 <div className="mt-4 pt-3 border-t border-outline-variant text-center">
                   <button
-                    onClick={openAllLogsModal}
-                    className="text-primary hover:underline text-[13px] font-bold inline-flex items-center gap-1 cursor-pointer"
+                    onClick={openFullLogsView}
+                    className="text-primary hover:underline text-[13px] font-bold inline-flex items-center gap-1 cursor-pointer bg-transparent border-0"
                   >
                     View All Complete Audit Logs &rarr;
                   </button>
@@ -250,118 +369,6 @@ const LogsAndThreats = () => {
           </div>
         </div>
       </div>
-
-      {/* Modal for View All Audit Logs */}
-      {showAllLogsModal && (
-        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
-          <div className="bg-surface border border-outline-variant rounded-2xl w-full max-w-4xl max-h-[85vh] flex flex-col shadow-2xl animate-fade-in">
-            {/* Modal Header */}
-            <div className="flex items-center justify-between p-4 border-b border-outline-variant">
-              <div className="flex items-center gap-2">
-                <span className="material-symbols-outlined text-primary text-[24px]">policy</span>
-                <h3 className="text-[18px] font-bold text-on-surface">Complete Admin Audit Logs</h3>
-                <span className="bg-primary/10 text-primary text-[11px] font-bold px-2 py-0.5 rounded-full ml-2">
-                  {filteredAllLogs.length} Records
-                </span>
-              </div>
-              <button
-                onClick={() => setShowAllLogsModal(false)}
-                className="p-1 rounded-lg hover:bg-surface-container-high text-on-surface-variant transition-colors cursor-pointer"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* Modal Actions Bar */}
-            <div className="p-4 border-b border-outline-variant bg-surface-container-lowest flex flex-col sm:flex-row items-center justify-between gap-3">
-              <div className="relative w-full sm:w-72">
-                <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" />
-                <input
-                  type="text"
-                  placeholder="Search user, action, or target..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-9 pr-3 py-1.5 bg-surface border border-outline-variant rounded-lg text-[13px] text-on-surface focus:outline-none focus:border-primary"
-                />
-              </div>
-
-              <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
-                <button
-                  onClick={fetchAllAuditLogs}
-                  disabled={loadingAllLogs}
-                  className="flex items-center gap-1.5 px-3 py-1.5 bg-surface-container border border-outline-variant text-on-surface hover:bg-surface-container-high rounded-lg text-[12px] font-bold transition-colors cursor-pointer"
-                >
-                  <RefreshCw className={`w-3.5 h-3.5 ${loadingAllLogs ? 'animate-spin' : ''}`} />
-                  Refresh
-                </button>
-                <button
-                  onClick={exportLogsToCSV}
-                  disabled={!filteredAllLogs.length}
-                  className="flex items-center gap-1.5 px-3 py-1.5 bg-primary text-on-primary hover:bg-primary/90 rounded-lg text-[12px] font-bold transition-colors cursor-pointer"
-                >
-                  <Download className="w-3.5 h-3.5" />
-                  Export CSV
-                </button>
-              </div>
-            </div>
-
-            {/* Modal Body - Audit Table */}
-            <div className="p-4 overflow-y-auto flex-1">
-              {loadingAllLogs ? (
-                <div className="text-center py-12 text-on-surface-variant text-[14px]">Loading full audit history...</div>
-              ) : filteredAllLogs.length === 0 ? (
-                <div className="text-center py-12 text-on-surface-variant text-[14px]">No audit logs match your search.</div>
-              ) : (
-                <div className="overflow-x-auto">
-                  <table className="w-full text-left text-[13px]">
-                    <thead className="bg-surface-container-high text-on-surface-variant text-[11px] uppercase tracking-wider select-none">
-                      <tr>
-                        {['Timestamp', 'User', 'Action', 'Target'].map((h, i) => (
-                          <th 
-                            key={h}
-                            onClick={() => handleLogSort(h)}
-                            className={`p-3 cursor-pointer hover:bg-surface-container-highest transition-colors group ${i === 0 ? 'rounded-l-lg' : i === 3 ? 'rounded-r-lg' : ''}`}
-                          >
-                            <div className="flex items-center gap-xs">
-                              {h}
-                              <span className={`material-symbols-outlined text-[14px] opacity-0 group-hover:opacity-50 transition-opacity ${sortLogCol === h ? 'opacity-100 group-hover:opacity-100 text-primary' : ''}`}>
-                                {sortLogCol === h && sortLogDir === 'desc' ? 'arrow_downward' : 'arrow_upward'}
-                              </span>
-                            </div>
-                          </th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-outline-variant">
-                      {getSortedLogs().map((log, i) => (
-                        <tr key={log.id || i} className="hover:bg-surface-container-lowest/50 transition-colors">
-                          <td className="p-3 text-[11.5px] text-on-surface-variant whitespace-nowrap">
-                            {new Date(log.timestamp).toLocaleString()}
-                          </td>
-                          <td className="p-3 font-bold text-on-surface">
-                            {log.user_email || log.admin_id || 'System'}
-                          </td>
-                          <td className="p-3 text-on-surface">
-                            {log.action}
-                          </td>
-                          <td className="p-3 text-[12px] text-on-surface-variant">
-                            {log.target_name || log.target_id || '-'}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
-
-            {/* Modal Footer */}
-            <div className="p-3 border-t border-outline-variant bg-surface-container-lowest text-right text-[12px] text-on-surface-variant">
-              Showing {filteredAllLogs.length} audit event entries.
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 };