admin-dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - ForensicFlow</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e40af',
                        secondary: '#dc2626'
                    }
                }
            }
        }
    </script>
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .stat-card {
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen">
    <!-- Navigation -->
    <nav class="bg-black/30 backdrop-blur-md border-b border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i data-feather="settings" class="text-white"></i>
                    </div>
                    <div>
                        <h1 class="text-white font-bold text-xl">Admin Dashboard</h1>
                        <p class="text-gray-400 text-sm">Full System Control</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-white">Admin User</span>
                    <button class="text-gray-400 hover:text-white">
                        <i data-feather="log-out" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="stat-card glass-effect rounded-xl p-6 text-white">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-400 text-sm">Pending Reviews</p>
                        <p class="text-3xl font-bold">12</p>
                    </div>
                    <i data-feather="clock" class="w-8 h-8 text-yellow-400"></i>
                </div>
            </div>
            <div class="stat-card glass-effect rounded-xl p-6 text-white">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-400 text-sm">Active Cases</p>
                        <p class="text-3xl font-bold">47</p>
                    </div>
                    <i data-feather="file-text" class="w-8 h-8 text-primary"></i>
                </div>
            </div>
            <div class="stat-card glass-effect rounded-xl p-6 text-white">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-400 text-sm">Approved Reports</p>
                        <p class="text-3xl font-bold">156</p>
                    </div>
                    <i data-feather="check-circle" class="w-8 h-8 text-green-400"></i>
                </div>
            </div>
            <div class="stat-card glass-effect rounded-xl p-6 text-white">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-400 text-sm">System Users</p>
                        <p class="text-3xl font-bold">23</p>
                    </div>
                    <i data-feather="users" class="w-8 h-8 text-purple-400"></i>
                </div>
            </div>
        </div>

        <!-- Main Content Tabs -->
        <div class="glass-effect rounded-xl p-6">
            <div class="flex space-x-4 border-b border-gray-700 pb-4 mb-6">
                <button class="tab-btn bg-primary text-white px-4 py-2 rounded-lg" data-tab="pending">Pending Reviews</button>
                <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="cases">All Cases</button>
                <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="users">User Management</button>
                <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="security">Security</button>
            </div>

            <!-- Pending Reviews Tab -->
            <div id="pending-tab" class="tab-content">
                <div class="space-y-4">
                    <!-- Sample Case Item -->
                    <div class="glass-effect rounded-lg p-4 flex justify-between items-center">
                        <div>
                            <h4 class="text-white font-semibold">Case #2024-001: Theft Investigation</h4>
                            <p class="text-gray-400 text-sm">Submitted by: Investigator Ahmed</p>
                            <p class="text-gray-400 text-sm">Date: 2024-01-15</p>
                        </div>
                        <div class="flex space-x-2">
                            <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2">
                                <i data-feather="eye" class="w-4 h-4"></i>
                                <span>Review</span>
                            </button>
                            <button class="bg-secondary hover:bg-red-700 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2">
                                <i data-feather="edit" class="w-4 h-4"></i>
                                <span>Edit</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- All Cases Tab -->
            <div id="cases-tab" class="tab-content hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-white">
                        <thead>
                            <tr class="border-b border-gray-700">
                                <th class="text-left py-3 px-4">Case ID</th>
                                <th class="text-left py-3 px-4">Title</th>
                                <th class="text-left py-3 px-4">Investigator</th>
                                <th class="text-left py-3 px-4">Status</th>
                                <th class="text-left py-3 px-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-800">
                                <td class="py-3 px-4">2024-001</td>
                                <td class="py-3 px-4">Commercial Theft</td>
                                <td class="py-3 px-4">Ahmed Hassan</td>
                                <td class="py-3 px-4"><span class="bg-yellow-500 text-white px-2 py-1 rounded text-xs">Under Review</span></td>
                                <td class="py-3 px-4">
                                    <div class="flex space-x-2">
                                        <button class="text-blue-400 hover:text-blue-300">
                                            <i data-feather="edit" class="w-4 h-4"></i>
                                        </button>
                                        <button class="text-red-400 hover:text-red-300">
                                            <i data-feather="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Tab functionality
        document.querySelectorAll('.tab-btn').forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('text-gray-300');
                });
                
                // Add active class to clicked button
                button.classList.add('bg-primary', 'text-white');
                button.classList.remove('text-gray-300');
                
                // Hide all tab contents
                document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.add('hidden');
                });
                
                // Show selected tab content
                const tabId = button.getAttribute('data-tab');
                document.getElementById(tabId + '-tab').classList.remove('hidden');
            });
        });

        // Initialize feather icons
        feather.replace();
    </script>
</body>
</html>