|
|
| </h<!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <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; } |
| 50% { opacity: 0.5; } |
| } |
| .pulse-animation { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| .trend-btn.active { |
| @apply bg-blue-600 text-white shadow-md; |
| } |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .risk-high { |
| background-color: rgba(220, 38, 38, 0.1); |
| border-left: 4px solid rgb(220, 38, 38); |
| } |
| .risk-medium { |
| background-color: rgba(234, 179, 8, 0.1); |
| border-left: 4px solid rgb(234, 179, 8); |
| } |
| .risk-low { |
| background-color: rgba(34, 197, 94, 0.1); |
| border-left: 4px solid rgb(34, 197, 94); |
| } |
| .chart-container { |
| position: relative; |
| height: 250px; |
| width: 100%; |
| } |
| .chart-bar { |
| position: absolute; |
| bottom: 0; |
| 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"> |
| |
| <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> |
|
|
| |
| <div class="main-content flex-1 p-6 ml-0"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <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> |
|
|
| |
| <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> |
