Spaces:

offerpk3
/

bigwhale

Running

App Files Files Community

offerpk3 commited on Apr 16, 2025

Commit

1320494

verified ·

1 Parent(s): 414b6fa

Add 1 files

Browse files

Files changed (1) hide show

index.html +480 -443

index.html CHANGED Viewed

@@ -1,4 +1,5 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,6 +7,7 @@
   <title>FraudShield Pro Dashboard</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     @keyframes pulse {
       0%, 100% { opacity: 1; }
@@ -47,519 +49,554 @@
       width: 30px;
       transition: height 0.5s ease;
     }
   </style>
 </head>
 <body class="bg-gray-50">
-  <div class="min-h-screen p-6">
-    <!-- Header -->
-    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
-      <div>
-        <h1 class="text-3xl font-bold text-gray-800">FraudShield Pro</h1>
-        <p class="text-gray-500">Real-time fraud detection dashboard</p>
       </div>
-      <div class="mt-4 md:mt-0 flex items-center space-x-4">
-        <div class="relative">
-          <i class="fas fa-bell absolute left-3 top-3 text-gray-400"></i>
-          <div class="absolute -top-1 -right-1 h-4 w-4 bg-red-500 rounded-full flex items-center justify-center text-white text-xs">3</div>
-          <button class="pl-10 pr-4 py-2 bg-white rounded shadow hover:bg-gray-50 focus:outline-none">
-            Alerts
-          </button>
         </div>
-        <div class="flex items-center space-x-2">
-          <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
-            <span>AD</span>
           </div>
-          <span class="font-medium">Admin</span>
         </div>
       </div>
-    </div>
-    <!-- Stats Cards -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <div class="bg-white p-6 rounded-xl shadow card-hover">
-        <div class="flex justify-between items-start">
-          <div>
-            <p class="text-gray-500 font-medium">Fraud Attempts</p>
-            <h2 class="text-3xl font-bold mt-2">87</h2>
-            <p class="text-sm text-gray-500 mt-1">+12% from last week</p>
           </div>
-          <div class="bg-red-100 p-3 rounded-full">
-            <i class="fas fa-shield-alt text-red-500 text-xl"></i>
           </div>
         </div>
-        <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
-          <span class="text-sm text-gray-500">Last 24 hours</span>
-          <a href="fraud-attempts.html" class="text-blue-600 hover:underline text-sm font-medium">View all</a>
-        </div>
       </div>
-      <div class="bg-white p-6 rounded-xl shadow card-hover">
-        <div class="flex justify-between items-start">
-          <div>
-            <p class="text-gray-500 font-medium">Active Cards</p>
-            <h2 class="text-3xl font-bold mt-2">3,542</h2>
-            <p class="text-sm text-gray-500 mt-1">+5% from last month</p>
           </div>
-          <div class="bg-blue-100 p-3 rounded-full">
-            <i class="far fa-credit-card text-blue-500 text-xl"></i>
           </div>
         </div>
-        <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
-          <span class="text-sm text-gray-500">Monitored</span>
-          <a href="active-cards.html" class="text-blue-600 hover:underline text-sm font-medium">Manage</a>
-        </div>
       </div>
-      <div class="bg-white p-6 rounded-xl shadow card-hover">
-        <div class="flex justify-between items-start">
-          <div>
-            <p class="text-gray-500 font-medium">Blocked IPs</p>
-            <h2 class="text-3xl font-bold mt-2">42</h2>
-            <p class="text-sm text-gray-500 mt-1">+8 new today</p>
           </div>
-          <div class="bg-purple-100 p-3 rounded-full">
-            <i class="fas fa-ban text-purple-500 text-xl"></i>
           </div>
         </div>
-        <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
-          <span class="text-sm text-gray-500">Current blacklist</span>
-          <a href="blocked-ips.html" class="text-blue-600 hover:underline text-sm font-medium">View list</a>
-        </div>
-      </div>
-      <div class="bg-white p-6 rounded-xl shadow card-hover">
-        <div class="flex justify-between items-start">
-          <div>
-            <p class="text-gray-500 font-medium">Prevented Loss</p>
-            <h2 class="text-3xl font-bold mt-2">$124K</h2>
-            <p class="text-sm text-gray-500 mt-1">Potential fraud</p>
           </div>
-          <div class="bg-green-100 p-3 rounded-full">
-            <i class="fas fa-dollar-sign text-green-500 text-xl"></i>
           </div>
         </div>
-        <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
-          <span class="text-sm text-gray-500">This month</span>
-          <a href="savings.html" class="text-blue-600 hover:underline text-sm font-medium">Details</a>
-        </div>
-      </div>
-    </div>
-    <!-- Main Content Area -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-      <!-- Fraud Detection Trend -->
-      <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow">
-        <div class="flex justify-between items-center mb-6">
-          <div>
-            <h2 class="text-xl font-bold">Fraud Detection Trend</h2>
-            <p class="text-gray-500">Last 30 days activity</p>
           </div>
-          <div class="space-x-2">
-            <button class="trend-btn px-3 py-1 border rounded-lg text-sm hover:bg-gray-50" data-period="week">Week</button>
-            <button class="trend-btn px-3 py-1 border rounded-lg text-sm hover:bg-gray-50" data-period="month">Month</button>
-            <button class="trend-btn active px-3 py-1 border rounded-lg text-sm" data-period="year">Year</button>
           </div>
         </div>
-        <div class="chart-container" id="trendChart">
-          <!-- Chart will be generated by JavaScript -->
-        </div>
-        <div class="mt-6 flex justify-center space-x-6">
-          <div class="flex items-center">
-            <div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div>
-            <span class="text-sm text-gray-600">High Risk</span>
-          </div>
-          <div class="flex items-center">
-            <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></div>
-            <span class="text-sm text-gray-600">Medium Risk</span>
           </div>
-          <div class="flex items-center">
-            <div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
-            <span class="text-sm text-gray-600">Low Risk</span>
           </div>
         </div>
       </div>
-      <!-- System Status -->
-      <div class="bg-white p-6 rounded-xl shadow">
-        <h2 class="text-xl font-bold mb-6">System Status</h2>
-        <div class="space-y-4">
-          <div>
-            <div class="flex justify-between items-center mb-1">
-              <span class="font-medium">API Monitoring</span>
-              <span class="text-green-500 text-sm font-medium">Active</span>
             </div>
-            <div class="w-full bg-gray-200 rounded-full h-2">
-              <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
             </div>
           </div>
-          <div>
-            <div class="flex justify-between items-center mb-1">
-              <span class="font-medium">Database</span>
-              <span class="text-green-500 text-sm font-medium">Stable</span>
-            </div>
-            <div class="w-full bg-gray-200 rounded-full h-2">
-              <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div>
-            </div>
           </div>
-          <div>
-            <div class="flex justify-between items-center mb-1">
-              <span class="font-medium">Fraud Detection</span>
-              <span class="text-green-500 text-sm font-medium">Running</span>
             </div>
-            <div class="w-full bg-gray-200 rounded-full h-2">
-              <div class="bg-green-500 h-2 rounded-full" style="width: 98%"></div>
             </div>
           </div>
-          <div>
-            <div class="flex justify-between items-center mb-1">
-              <span class="font-medium">Storage</span>
-              <span class="text-yellow-500 text-sm font-medium">65% used</span>
             </div>
-            <div class="w-full bg-gray-200 rounded-full h-2">
-              <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
             </div>
-          </div>
-        </div>
-        <div class="mt-8">
-          <h3 class="font-medium mb-3">Recent Alerts</h3>
-          <div class="space-y-3">
-            <div class="p-3 rounded-lg bg-red-50 flex items-start">
-              <div class="mr-3 mt-1">
-                <i class="fas fa-exclamation-circle text-red-500"></i>
               </div>
-              <div>
-                <p class="font-medium">High risk transaction</p>
-                <p class="text-sm text-gray-600">Card ending 7890 from new IP</p>
-                <p class="text-xs text-gray-500 mt-1">2 minutes ago</p>
               </div>
             </div>
-            <div class="p-3 rounded-lg bg-yellow-50 flex items-start">
-              <div class="mr-3 mt-1">
-                <i class="fas fa-exclamation-triangle text-yellow-500"></i>
               </div>
-              <div>
-                <p class="font-medium">Multiple failed logins</p>
-                <p class="text-sm text-gray-600">From IP 192.168.1.45</p>
-                <p class="text-xs text-gray-500 mt-1">15 minutes ago</p>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- Recent Activity Section -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-      <!-- Recent Fraud Attempts -->
-      <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow">
-        <div class="flex justify-between items-center mb-6">
-          <h2 class="text-xl font-bold">Recent Fraud Attempts</h2>
-          <div class="flex space-x-2">
-            <button class="px-3 py-1 border rounded-lg text-sm hover:bg-gray-50">Filter</button>
-            <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Export</button>
           </div>
-        </div>
-        <div class="overflow-x-auto">
-          <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
-              <tr>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risk</th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
-                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
-              </tr>
-            </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
-              <tr class="risk-high hover:bg-gray-50">
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="flex items-center">
-                    <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
-                      <i class="fas fa-credit-card text-red-500"></i>
                     </div>
-                    <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900">Card Fraud</div>
-                      <div class="text-sm text-gray-500">Visa •••• 7890</div>
                     </div>
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-900">Multiple countries</div>
-                  <div class="text-sm text-gray-500">IP: 45.67.89.123</div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High</span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 min ago</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                  <a href="#" class="text-blue-600 hover:text-blue-900">Block</a>
-                </td>
-              </tr>
-              <tr class="risk-medium hover:bg-gray-50">
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="flex items-center">
-                    <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center">
-                      <i class="fas fa-user text-yellow-500"></i>
                     </div>
-                    <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900">Account Takeover</div>
-                      <div class="text-sm text-gray-500">User: johndoe</div>
                     </div>
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-900">Multiple failed logins</div>
-                  <div class="text-sm text-gray-500">IP: 192.168.1.45</div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 min ago</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                  <a href="#" class="text-blue-600 hover:text-blue-900">Review</a>
-                </td>
-              </tr>
-              <tr class="risk-low hover:bg-gray-50">
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="flex items-center">
-                    <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
-                      <i class="fas fa-globe text-green-500"></i>
                     </div>
-                    <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900">Proxy Detected</div>
-                      <div class="text-sm text-gray-500">New IP location</div>
                     </div>
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-900">VPN/proxy usage</div>
-                  <div class="text-sm text-gray-500">IP: 87.65.43.21</div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Low</span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25 min ago</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                  <a href="#" class="text-blue-600 hover:text-blue-900">Monitor</a>
-                </td>
-              </tr>
-              <tr class="risk-high hover:bg-gray-50">
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="flex items-center">
-                    <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
-                      <i class="fas fa-user-plus text-red-500"></i>
                     </div>
-                    <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900">Fake Account</div>
-                      <div class="text-sm text-gray-500">Suspicious registration</div>
                     </div>
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-900">Fake details detected</div>
-                  <div class="text-sm text-gray-500">IP: 123.45.67.89</div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High</span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42 min ago</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                  <a href="#" class="text-blue-600 hover:text-blue-900">Block</a>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="mt-4 flex justify-between items-center">
-          <span class="text-sm text-gray-500">Showing 4 of 87 attempts</span>
-          <a href="all-attempts.html" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
-            View All Attempts
-          </a>
-        </div>
-      </div>
-      <!-- Quick Actions & Recent Users -->
-      <div class="bg-white p-6 rounded-xl shadow">
-        <h2 class="text-xl font-bold mb-6">Quick Actions</h2>
-        <div class="grid grid-cols-2 gap-4 mb-8">
-          <button class="p-3 bg-blue-50 rounded-lg flex flex-col items-center justify-center hover:bg-blue-100 transition">
-            <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mb-2">
-              <i class="fas fa-ban text-blue-500"></i>
-            </div>
-            <span class="text-sm font-medium text-center">Block IP</span>
-          </button>
-          <button class="p-3 bg-purple-50 rounded-lg flex flex-col items-center justify-center hover:bg-purple-100 transition">
-            <div class="h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
-              <i class="fas fa-user-shield text-purple-500"></i>
-            </div>
-            <span class="text-sm font-medium text-center">Add Rule</span>
-          </button>
-          <button class="p-3 bg-green-50 rounded-lg flex flex-col items-center justify-center hover:bg-green-100 transition">
-            <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
-              <i class="fas fa-file-export text-green-500"></i>
-            </div>
-            <span class="text-sm font-medium text-center">Export Data</span>
-          </button>
-          <button class="p-3 bg-yellow-50 rounded-lg flex flex-col items-center justify-center hover:bg-yellow-100 transition">
-            <div class="h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
-              <i class="fas fa-cog text-yellow-500"></i>
-            </div>
-            <span class="text-sm font-medium text-center">Settings</span>
-          </button>
-        </div>
-        <h2 class="text-xl font-bold mb-6">Recent Users</h2>
-        <div class="space-y-4">
-          <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition">
-            <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
-              <span class="text-blue-600 font-medium">JD</span>
-            </div>
-            <div class="flex-1">
-              <p class="font-medium">John Doe</p>
-              <p class="text-sm text-gray-500">Admin</p>
-            </div>
-            <span class="text-green-500 text-sm font-medium">Active</span>
-          </div>
-          <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition">
-            <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
-              <span class="text-purple-600 font-medium">AS</span>
-            </div>
-            <div class="flex-1">
-              <p class="font-medium">Alice Smith</p>
-              <p class="text-sm text-gray-500">Analyst</p>
-            </div>
-            <span class="text-green-500 text-sm font-medium">Active</span>
-          </div>
-          <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition">
-            <div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
-              <span class="text-yellow-600 font-medium">RJ</span>
-            </div>
-            <div class="flex-1">
-              <p class="font-medium">Robert Johnson</p>
-              <p class="text-sm text-gray-500">Operator</p>
-            </div>
-            <span class="text-yellow-500 text-sm font-medium">Pending</span>
           </div>
-          <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition">
-            <div class="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
-              <span class="text-red-600 font-medium">MB</span>
             </div>
-            <div class="flex-1">
-              <p class="font-medium">Maria Brown</p>
-              <p class="text-sm text-gray-500">Operator</p>
-            </div>
-            <span class="text-red-500 text-sm font-medium">Blocked</span>
           </div>
         </div>
-        <div class="mt-4">
-          <a href="all-users.html" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
-            View All Users
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script>
-    // Trend buttons functionality
-    const buttons = document.querySelectorAll('.trend-btn');
-    const trendChart = document.getElementById('trendChart');
-    // Generate random data for the chart
-    function generateChartData(period) {
-      let data = [];
-      let count = period === 'week' ? 7 : period === 'month' ? 30 : 12;
-      for (let i = 0; i < count; i++) {
-        data.push({
-          high: Math.floor(Math.random() * 20) + 5,
-          medium: Math.floor(Math.random() * 30) + 10,
-          low: Math.floor(Math.random() * 50) + 20,
-          label: period === 'year' ? `Month ${i+1}` : `Day ${i+1}`
-        });
-      }
-      return data;
-    }
-    // Render chart function
-    function renderChart(period) {
-      const data = generateChartData(period);
-      const maxValue = Math.max(...data.map(d => d.high + d.medium + d.low));
-      const barWidth = 100 / data.length;
-      let chartHTML = '';
-      // Create bars
-      data.forEach((item, index) => {
-        const total = item.high + item.medium + item.low;
-        const barHeight = (total / maxValue) * 100;
-        const highHeight = (item.high / total) * barHeight;
-        const mediumHeight = (item.medium / total) * barHeight;
-        const lowHeight = (item.low / total) * barHeight;
-        chartHTML += `
-          <div class="chart-bar" style="left: ${index * barWidth}%; width: ${barWidth - 2}%">
-            <div class="absolute bottom-0 w-full bg-green-500" style="height: ${lowHeight}%"></div>
-            <div class="absolute bottom-0 w-full bg-yellow-500" style="height: ${mediumHeight}%; bottom: ${lowHeight}%"></div>
-            <div class="absolute bottom-0 w-full bg-red-500" style="height: ${highHeight}%; bottom: ${lowHeight + mediumHeight}%"></div>
-            <div class="absolute -bottom-6 w-full text-center text-xs text-gray-500">${item.label}</div>
           </div>
-        `;
-      });
-      trendChart.innerHTML = chartHTML;
-    }
-    // Initialize chart with month data
-    renderChart('year');
-    // Add event listeners to buttons
-    buttons.forEach(btn => {
-      btn.addEventListener('click', () => {
-        const period = btn.getAttribute('data-period');
-        buttons.forEach(b => b.classList.remove('bg-blue-600', 'text-white', 'shadow-md'));
-        btn.classList.add('bg-blue-600', 'text-white', 'shadow-md');
-        renderChart(period);
-      });
-    });
-    // Simulate real-time updates
-    setInterval(() => {
-      // Find a random row in the table to update
-      const rows = document.querySelectorAll('tbody tr');
-      if (rows.length > 0) {
-        const randomRow = rows[Math.floor(Math.random() * rows.length)];
-        const timeCell = randomRow.querySelector('td:nth-child(4)');
-        if (timeCell) {
-          // Update the time to "just now" and add pulse animation
-          timeCell.textContent = 'just now';
-          timeCell.classList.add('pulse-animation');
-          // Remove animation after 2 seconds
-          setTimeout(() => {
-            timeCell.classList.remove('pulse-animation');
-          }, 2000);
-        }
-      }
-    }, 5000);
-  </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=offerpk3/bigwhale" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

+</h<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>FraudShield Pro Dashboard</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       width: 30px;
       transition: height 0.5s ease;
     }
+    .glow-red {
+      box-shadow: 0 0 10px rgba(220, 38, 38, 0.7);
+    }
+    .glow-yellow {
+      box-shadow: 0 0 10px rgba(234, 179, 8, 0.7);
+    }
+    .glow-blue {
+      box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
+    }
+    .notification-badge {
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      width: 18px;
+      height: 18px;
+      background-color: #ef4444;
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: bold;
+    }
+    .sidebar {
+      transition: all 0.3s ease;
+    }
+    .sidebar-collapsed {
+      width: 70px;
+    }
+    .sidebar-expanded {
+      width: 250px;
+    }
+    .main-content {
+      transition: margin-left 0.3s ease;
+    }
+    .dark-mode {
+      background-color: #1a202c;
+      color: #f7fafc;
+    }
+    .dark-card {
+      background-color: #2d3748;
+      color: #f7fafc;
+      border-color: #4a5568;
+    }
+    .dark-text {
+      color: #f7fafc;
+    }
+    .dark-border {
+      border-color: #4a5568;
+    }
+    .dark-hover:hover {
+      background-color: #4a5568;
+    }
   </style>
 </head>
 <body class="bg-gray-50">
+  <div class="flex min-h-screen">
+    <!-- Sidebar -->
+    <div class="sidebar sidebar-expanded bg-blue-800 text-white flex flex-col">
+      <div class="p-4 flex items-center justify-between border-b border-blue-700">
+        <div class="flex items-center">
+          <i class="fas fa-shield-alt text-2xl mr-3 text-blue-300"></i>
+          <span class="font-bold text-xl">FraudShield</span>
+        </div>
+        <button id="sidebarToggle" class="text-blue-200 hover:text-white">
+          <i class="fas fa-bars"></i>
+        </button>
       </div>
+      <div class="flex-1 overflow-y-auto py-4">
+        <div class="px-4 space-y-1">
+          <a href="#" class="flex items-center px-3 py-2 rounded-lg bg-blue-700 text-white">
+            <i class="fas fa-tachometer-alt mr-3"></i>
+            <span>Dashboard</span>
+          </a>
+          <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
+            <i class="fas fa-exclamation-triangle mr-3"></i>
+            <span>Alerts</span>
+            <div class="notification-badge">3</div>
+          </a>
+          <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
+            <i class="fas fa-credit-card mr-3"></i>
+            <span>Cards</span>
+          </a>
+          <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
+            <i class="fas fa-users mr-3"></i>
+            <span>Users</span>
+          </a>
+          <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
+            <i class="fas fa-ban mr-3"></i>
+            <span>Blocklist</span>
+          </a>
+          <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
+            <i class="fas fa-chart-line mr-3"></i>
+            <span>Analytics</span>
+          </a>
+          <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-blue-100 hover:text-white">
+            <i class="fas fa-cog mr-3"></i>
+            <span>Settings</span>
+          </a>
         </div>
+        <div class="px-4 mt-8">
+          <div class="bg-blue-900 rounded-lg p-4">
+            <div class="flex items-center">
+              <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center mr-3">
+                <i class="fas fa-lightbulb text-blue-300"></i>
+              </div>
+              <div>
+                <p class="font-medium">Pro Tip</p>
+                <p class="text-xs text-blue-200">Review high-risk alerts within 15 minutes</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+      <div class="p-4 border-t border-blue-700">
+        <div class="flex items-center">
+          <div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
+            <span class="font-medium">AD</span>
           </div>
+          <div>
+            <p class="font-medium">Admin</p>
+            <p class="text-xs text-blue-200">Super Admin</p>
           </div>
         </div>
       </div>
+    </div>
+    <!-- Main Content -->
+    <div class="main-content flex-1 p-6 ml-0">
+      <!-- Header -->
+      <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
+        <div>
+          <h1 class="text-3xl font-bold text-gray-800 dark:text-white">FraudShield Pro</h1>
+          <p class="text-gray-500 dark:text-gray-300">Real-time fraud detection dashboard</p>
+        </div>
+        <div class="mt-4 md:mt-0 flex items-center space-x-4">
+          <button id="darkModeToggle" class="p-2 rounded-full bg-white dark:bg-gray-700 shadow hover:bg-gray-100 dark:hover:bg-gray-600">
+            <i class="fas fa-moon dark:hidden"></i>
+            <i class="fas fa-sun hidden dark:block text-yellow-300"></i>
+          </button>
+          <div class="relative">
+            <div class="relative">
+              <i class="fas fa-bell absolute left-3 top-3 text-gray-400 dark:text-gray-300"></i>
+              <div class="absolute -top-1 -right-1 h-4 w-4 bg-red-500 rounded-full flex items-center justify-center text-white text-xs">3</div>
+              <button class="pl-10 pr-4 py-2 bg-white dark:bg-gray-700 rounded shadow hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none">
+                Alerts
+              </button>
+            </div>
           </div>
+          <div class="flex items-center space-x-2">
+            <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
+              <span>AD</span>
+            </div>
+            <span class="font-medium dark:text-white">Admin</span>
+            <i class="fas fa-chevron-down text-gray-400 dark:text-gray-300"></i>
           </div>
         </div>
       </div>
+      <!-- Stats Cards -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow card-hover glow-red">
+          <div class="flex justify-between items-start">
+            <div>
+              <p class="text-gray-500 dark:text-gray-300 font-medium">Fraud Attempts</p>
+              <h2 class="text-3xl font-bold mt-2 dark:text-white">87</h2>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">+12% from last week</p>
+            </div>
+            <div class="bg-red-100 dark:bg-red-900 p-3 rounded-full">
+              <i class="fas fa-shield-alt text-red-500 dark:text-red-300 text-xl"></i>
+            </div>
           </div>
+          <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Last 24 hours</span>
+            <a href="fraud-attempts.html" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">View all</a>
           </div>
         </div>
+        <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow card-hover glow-blue">
+          <div class="flex justify-between items-start">
+            <div>
+              <p class="text-gray-500 dark:text-gray-300 font-medium">Active Cards</p>
+              <h2 class="text-3xl font-bold mt-2 dark:text-white">3,542</h2>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">+5% from last month</p>
+            </div>
+            <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full">
+              <i class="far fa-credit-card text-blue-500 dark:text-blue-300 text-xl"></i>
+            </div>
           </div>
+          <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Monitored</span>
+            <a href="active-cards.html" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Manage</a>
           </div>
         </div>
+        <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow card-hover">
+          <div class="flex justify-between items-start">
+            <div>
+              <p class="text-gray-500 dark:text-gray-300 font-medium">Blocked IPs</p>
+              <h2 class="text-3xl font-bold mt-2 dark:text-white">42</h2>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">+8 new today</p>
+            </div>
+            <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-full">
+              <i class="fas fa-ban text-purple-500 dark:text-purple-300 text-xl"></i>
+            </div>
           </div>
+          <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Current blacklist</span>
+            <a href="blocked-ips.html" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">View list</a>
           </div>
         </div>
+        <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow card-hover glow-yellow">
+          <div class="flex justify-between items-start">
+            <div>
+              <p class="text-gray-500 dark:text-gray-300 font-medium">Prevented Loss</p>
+              <h2 class="text-3xl font-bold mt-2 dark:text-white">$124K</h2>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Potential fraud</p>
+            </div>
+            <div class="bg-green-100 dark:bg-green-900 p-3 rounded-full">
+              <i class="fas fa-dollar-sign text-green-500 dark:text-green-300 text-xl"></i>
+            </div>
           </div>
+          <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center">
+            <span class="text-sm text-gray-500 dark:text-gray-400">This month</span>
+            <a href="savings.html" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Details</a>
           </div>
         </div>
       </div>
+      <!-- Main Content Area -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+        <!-- Fraud Detection Trend -->
+        <div class="lg:col-span-2 bg-white dark:bg-gray-700 p-6 rounded-xl shadow">
+          <div class="flex justify-between items-center mb-6">
+            <div>
+              <h2 class="text-xl font-bold dark:text-white">Fraud Detection Trend</h2>
+              <p class="text-gray-500 dark:text-gray-300">Last 30 days activity</p>
             </div>
+            <div class="space-x-2">
+              <button class="trend-btn px-3 py-1 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-gray-600" data-period="week">Week</button>
+              <button class="trend-btn px-3 py-1 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-gray-600" data-period="month">Month</button>
+              <button class="trend-btn active px-3 py-1 border rounded-lg text-sm" data-period="year">Year</button>
             </div>
           </div>
+          <div class="chart-container">
+            <canvas id="fraudTrendChart"></canvas>
           </div>
+          <div class="mt-6 flex justify-center space-x-6">
+            <div class="flex items-center">
+              <div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div>
+              <span class="text-sm text-gray-600 dark:text-gray-300">High Risk</span>
             </div>
+            <div class="flex items-center">
+              <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></div>
+              <span class="text-sm text-gray-600 dark:text-gray-300">Medium Risk</span>
+            </div>
+            <div class="flex items-center">
+              <div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
+              <span class="text-sm text-gray-600 dark:text-gray-300">Low Risk</span>
             </div>
           </div>
+        </div>
+        <!-- System Status -->
+        <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow">
+          <h2 class="text-xl font-bold mb-6 dark:text-white">System Status</h2>
+          <div class="space-y-4">
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium dark:text-gray-300">API Monitoring</span>
+                <span class="text-green-500 text-sm font-medium">Active</span>
+              </div>
+              <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+                <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
+              </div>
             </div>
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium dark:text-gray-300">Database</span>
+                <span class="text-green-500 text-sm font-medium">Stable</span>
+              </div>
+              <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+                <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div>
+              </div>
             </div>
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium dark:text-gray-300">Fraud Detection</span>
+                <span class="text-green-500 text-sm font-medium">Running</span>
               </div>
+              <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+                <div class="bg-green-500 h-2 rounded-full" style="width: 98%"></div>
               </div>
             </div>
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium dark:text-gray-300">Storage</span>
+                <span class="text-yellow-500 text-sm font-medium">65% used</span>
               </div>
+              <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+                <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-8">
+            <h3 class="font-medium mb-3 dark:text-white">Recent Alerts</h3>
+            <div class="space-y-3">
+              <div class="p-3 rounded-lg bg-red-50 dark:bg-red-900/30 flex items-start">
+                <div class="mr-3 mt-1">
+                  <i class="fas fa-exclamation-circle text-red-500"></i>
+                </div>
+                <div>
+                  <p class="font-medium dark:text-white">High risk transaction</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Card ending 7890 from new IP</p>
+                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">2 minutes ago</p>
+                </div>
+              </div>
+              <div class="p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 flex items-start">
+                <div class="mr-3 mt-1">
+                  <i class="fas fa-exclamation-triangle text-yellow-500"></i>
+                </div>
+                <div>
+                  <p class="font-medium dark:text-white">Multiple failed logins</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">From IP 192.168.1.45</p>
+                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">15 minutes ago</p>
+                </div>
+              </div>
+              <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/30 flex items-start">
+                <div class="mr-3 mt-1">
+                  <i class="fas fa-info-circle text-blue-500"></i>
+                </div>
+                <div>
+                  <p class="font-medium dark:text-white">New rule triggered</p>
+                  <p class="text-sm text-gray-600 dark:text-gray-300">Unusual purchase pattern</p>
+                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">28 minutes ago</p>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <!-- Recent Activity Section -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Recent Fraud Attempts -->
+        <div class="lg:col-span-2 bg-white dark:bg-gray-700 p-6 rounded-xl shadow">
+          <div class="flex justify-between items-center mb-6">
+            <h2 class="text-xl font-bold dark:text-white">Recent Fraud Attempts</h2>
+            <div class="flex space-x-2">
+              <div class="relative">
+                <select class="appearance-none pl-3 pr-8 py-1 border rounded-lg text-sm bg-white dark:bg-gray-600 dark:border-gray-500 dark:text-white">
+                  <option>All Types</option>
+                  <option>Card Fraud</option>
+                  <option>Account Takeover</option>
+                  <option>Proxy Detected</option>
+                </select>
+                <i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 dark:text-gray-300 text-xs"></i>
+              </div>
+              <button class="px-3 py-1 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-gray-600">Filter</button>
+              <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Export</button>
+            </div>
           </div>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+              <thead class="bg-gray-50 dark:bg-gray-600">
+                <tr>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Details</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Risk</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Time</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:divide-gray-600">
+                <tr class="risk-high hover:bg-gray-50 dark:hover:bg-gray-600">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex-shrink-0 h-10 w-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
+                        <i class="fas fa-credit-card text-red-500"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900 dark:text-white">Card Fraud</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-300">Visa •••• 7890</div>
+                      </div>
                     </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-900 dark:text-white">Multiple countries</div>
+                    <div class="text-sm text-gray-500 dark:text-gray-300">IP: 45.67.89.123</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">High</span>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">5 min ago</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                    <div class="flex space-x-2">
+                      <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">Block</a>
+                      <span class="text-gray-400">|</span>
+                      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Details</a>
                     </div>
+                  </td>
+                </tr>
+                <tr class="risk-medium hover:bg-gray-50 dark:hover:bg-gray-600">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 dark:bg-yellow-900/30 rounded-full flex items-center justify-center">
+                        <i class="fas fa-user text-yellow-500"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900 dark:text-white">Account Takeover</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-300">User: johndoe</div>
+                      </div>
                     </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-900 dark:text-white">Multiple failed logins</div>
+                    <div class="text-sm text-gray-500 dark:text-gray-300">IP: 192.168.1.45</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">Medium</span>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">12 min ago</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                    <div class="flex space-x-2">
+                      <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">Review</a>
+                      <span class="text-gray-400">|</span>
+                      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Details</a>
                     </div>
+                  </td>
+                </tr>
+                <tr class="risk-low hover:bg-gray-50 dark:hover:bg-gray-600">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex-shrink-0 h-10 w-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
+                        <i class="fas fa-globe text-green-500"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900 dark:text-white">Proxy Detected</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-300">New IP location</div>
+                      </div>
                     </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-900 dark:text-white">VPN/proxy usage</div>
+                    <div class="text-sm text-gray-500 dark:text-gray-300">IP: 87.65.43.21</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Low</span>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">25 min ago</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                    <div class="flex space-x-2">
+                      <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">Monitor</a>
+                      <span class="text-gray-400">|</span>
+                      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Details</a>
                     </div>
+                  </td>
+                </tr>
+                <tr class="risk-high hover:bg-gray-50 dark:hover:bg-gray-600">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex-shrink-0 h-10 w-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
+                        <i class="fas fa-user-plus text-red-500"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900 dark:text-white">Fake Account</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-300">Suspicious registration</div>
+                      </div>
                     </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-900 dark:text-white">Fake details detected</div>
+                    <div class="text-sm text-gray-500 dark:text-gray-300">IP: 123.45.67.89</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">High</span>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">42 min ago</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                    <div class="flex space-x-2">
+                      <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">Block</a>
+                      <span class="text-gray-400">|</span>
+                      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Details</a>
                     </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
+          <div class="mt-4 flex justify-between items-center">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Showing 4 of 87 attempts</span>
+            <div class="flex space-x-2">
+              <button class="px-3 py-1 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-gray-600">Previous</button>
+              <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Next</button>
             </div>
           </div>
         </div>
+        <!-- Quick Actions & Recent Users -->
+        <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow">
+          <h2 class="text-xl font-bold mb-6 dark:text-white">Quick Actions</h2>
+          <div class="grid grid-cols-2 gap-4 mb-8">
+            <button class="p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex flex-col items-center justify-center hover:bg-blue-100 dark:hover:bg-blue-800 transition">
+              <div class="h-10 w-10 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center mb-2">
+                <i class="fas fa-ban text-blue-500 dark:text-blue-300"></i>
+              </div>
+              <span class="text-sm font-medium text-center dark:text-white">Block IP</span>
+            </button>
+            <button class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex flex-col items-center justify-center hover:bg-purple-100 dark:hover:bg-purple-800 transition">
+              <div class="h-10 w-10 bg-purple-100 dark:bg-purple-800 rounded-full flex items-center justify-center mb-2">
+                <i class="fas fa-user-shield text-purple-500 dark:text-purple-300"></i>
+              </div>
+              <span class="text-sm font-medium text-center dark:text-white">Add Rule</span>
+            </button>
+            <button class="p-3 bg-green-50 dark:bg-green-900/30 rounded-lg flex flex-col items-center justify-center hover:bg-green-100 dark:hover:bg-green-800 transition">
+              <div class="h-10 w-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center mb-2">
+                <i class="fas fa-file-export text-green-500 dark:text-green-300"></i>
+              </div>
+              <span class="text-sm font-medium text-center dark:text-white">Export Data</span>
+            </button>
+            <button class="p-3 bg-yellow-50 dark:bg-yellow-900/30 rounded-lg flex flex-col items-center justify-center hover:bg-yellow-100 dark:hover:bg-yellow-800 transition">
+              <div class="h-10 w-10 bg-yellow-100 dark:bg-yellow-800 rounded-full flex items-center justify-center mb-2">
+                <i class="fas fa-cog text-yellow-500 dark:text-yellow-300"></i>
+              </div>
+              <span class="text-sm font-medium text-center dark:text-white">Settings</span>
+            </button>
           </div>
+          <h2 class="text-xl font-bold mb-6 dark:text-white">Recent Users</h2>
+          <div class="space-y-4">
+            <div class="flex items-center p-3 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-lg transition">
+              <div class="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-800 flex items-center justify-center mr-3">
+                <span class="text-blue-600 dark:text-blue-300 font-medium">JD</span>
+              </div>
+              <div class="flex-1">
+                <p class="font-medium dark:text-white">Johntml>