<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MoMo Integration - ConnectPay</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .sidebar {
            background: white;
            border-right: 1px solid #e2e8f0;
            min-height: 100vh;
        }

        .sidebar-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .nav-item {
            margin-bottom: 0.25rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            color: #6b7280;
            text-decoration: none;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .nav-link:hover {
            background-color: #f3f4f6;
            color: #374151;
        }

        .nav-link.active {
            background-color: #3b82f6;
            color: white;
        }

        .nav-link i {
            width: 1.25rem;
            margin-right: 0.75rem;
        }

        .card {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
        }

        .card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            background-color: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            padding: 1rem 1.5rem;
            border-radius: 8px 8px 0 0;
        }

        .card-body {
            padding: 1.5rem;
        }

        .stats-card {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 1.5rem;
            transition: all 0.2s ease;
        }

        .stats-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .stats-icon {
            width: 3rem;
            height: 3rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.875rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2563eb;
        }

        .btn-secondary {
            background-color: #6b7280;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #4b5563;
        }

        .btn-outline {
            background-color: white;
            border: 1px solid #d1d5db;
            color: #374151;
        }

        .btn-outline:hover {
            background-color: #f9fafb;
            border-color: #9ca3af;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-success {
            background-color: #dcfce7;
            color: #166534;
        }

        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }

        .status-failed {
            background-color: #fef2f2;
            color: #dc2626;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 0.875rem;
            transition: border-color 0.2s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-select {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            padding-right: 2.5rem;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

        .table th {
            background-color: #f8fafc;
            font-weight: 500;
            font-size: 0.75rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .table tbody tr:hover {
            background-color: #f9fafb;
        }

        .page-header {
            background: white;
            border-bottom: 1px solid #e2e8f0;
            padding: 1.5rem 2rem;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .breadcrumb-item {
            color: #6b7280;
            font-size: 0.875rem;
        }

        .breadcrumb-item:not(:last-child)::after {
            content: "/";
            margin: 0 0.5rem;
            color: #9ca3af;
        }

        .breadcrumb-item.active {
            color: #374151;
        }

        .content-area {
            padding: 2rem;
        }

        .sidebar-footer {
            padding: 1rem;
            border-top: 1px solid #e2e8f0;
            margin-top: auto;
        }

        .connection-status {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: #6b7280;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #10b981;
        }

        .metric-card {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .metric-value {
            font-size: 2rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        .metric-label {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.5rem;
        }

        .metric-change {
            font-size: 0.75rem;
            font-weight: 500;
        }

        .metric-change.positive {
            color: #059669;
        }

        .metric-change.negative {
            color: #dc2626;
        }

        .section {
            display: none;
        }

        .section.active {
            display: block;
        }

        .alert {
            padding: 1rem;
            border-radius: 6px;
            margin-bottom: 1.5rem;
            border: 1px solid transparent;
        }

        .alert-success {
            background-color: #ecfdf5;
            border-color: #d1fae5;
            color: #065f46;
        }

        .alert-error {
            background-color: #fef2f2;
            border-color: #fecaca;
            color: #991b1b;
        }

        .alert-warning {
            background-color: #fffbeb;
            border-color: #fed7aa;
            color: #92400e;
        }

        .config-section {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .config-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 1rem;
        }

        .help-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0.75rem;
        }

        .help-item i {
            color: #10b981;
            margin-right: 0.75rem;
            margin-top: 0.125rem;
        }

        .transaction-row {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .transaction-row:last-child {
            border-bottom: none;
        }

        .transaction-avatar {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background-color: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: 500;
            color: #6b7280;
            margin-right: 1rem;
        }

        .transaction-details {
            flex: 1;
        }

        .transaction-name {
            font-weight: 500;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        .transaction-phone {
            font-size: 0.875rem;
            color: #6b7280;
        }

        .transaction-amount {
            font-weight: 600;
            color: #111827;
            margin-left: 1rem;
        }

        .transaction-time {
            font-size: 0.75rem;
            color: #9ca3af;
            margin-left: 1rem;
        }
    </style>
</head>
<body>
    <div class="flex h-screen bg-gray-50">
        <!-- Sidebar -->
        <div class="sidebar w-64 flex flex-col">
            <!-- Header -->
            <div class="sidebar-header">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-mobile-alt text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">MoMo Integration</h3>
                        <p class="text-sm text-gray-500">ConnectPay Platform</p>
                    </div>
                </div>
            </div>

            <!-- Navigation Menu -->
            <nav class="flex-1 px-4 py-4">
                <ul class="space-y-1">
                    <li class="nav-item">
                        <a href="#" class="nav-link active" onclick="showSection('dashboard')">
                            <i class="fas fa-chart-bar"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" onclick="showSection('transactions')">
                            <i class="fas fa-credit-card"></i>
                            <span>Transactions</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" onclick="showSection('configuration')">
                            <i class="fas fa-cog"></i>
                            <span>Configuration</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" onclick="showSection('webhooks')">
                            <i class="fas fa-webhook"></i>
                            <span>Webhooks</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" onclick="showSection('api-keys')">
                            <i class="fas fa-key"></i>
                            <span>API Keys</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" onclick="showSection('logs')">
                            <i class="fas fa-file-alt"></i>
                            <span>Transaction Logs</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- Footer -->
            <div class="sidebar-footer">
                <div class="connection-status">
                    <div class="status-dot"></div>
                    <span>MoMo API Connected</span>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Dashboard Section -->
            <div id="dashboard" class="section active">
                <!-- Page Header -->
                <div class="page-header">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">Dashboard</span>
                        <span class="breadcrumb-item active">MoMo Integration</span>
                    </nav>
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-2xl font-semibold text-gray-900">MoMo Integration Dashboard</h1>
                            <p class="text-gray-600">Monitor your Mobile Money transactions and performance</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <button class="btn btn-outline">
                                <i class="fas fa-download mr-2"></i>
                                Export Data
                            </button>
                            <button class="btn btn-primary">
                                <i class="fas fa-plus mr-2"></i>
                                New Payment
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Content Area -->
                <div class="content-area">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="stats-card">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="metric-label">Total Transactions</div>
                                    <div class="metric-value">2,436</div>
                                    <div class="metric-change positive">+12% from last month</div>
                                </div>
                                <div class="stats-icon" style="background-color: #dbeafe; color: #1d4ed8;">
                                    <i class="fas fa-credit-card"></i>
                                </div>
                            </div>
                        </div>

                        <div class="stats-card">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="metric-label">Total Revenue</div>
                                    <div class="metric-value">UGX 45.2M</div>
                                    <div class="metric-change positive">+20.1% from last month</div>
                                </div>
                                <div class="stats-icon" style="background-color: #dcfce7; color: #166534;">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                            </div>
                        </div>

                        <div class="stats-card">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="metric-label">Success Rate</div>
                                    <div class="metric-value">98.5%</div>
                                    <div class="metric-change positive">+2.1% from last month</div>
                                </div>
                                <div class="stats-icon" style="background-color: #d1fae5; color: #059669;">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>

                        <div class="stats-card">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="metric-label">Active Users</div>
                                    <div class="metric-value">1,234</div>
                                    <div class="metric-change positive">+5.2% from last month</div>
                                </div>
                                <div class="stats-icon" style="background-color: #e0e7ff; color: #5b21b6;">
                                    <i class="fas fa-users"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Transactions -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="text-lg font-medium text-gray-900">Recent Transactions</h3>
                        </div>
                        <div class="card-body p-0">
                            <div class="transaction-row">
                                <div class="transaction-avatar">JD</div>
                                <div class="transaction-details">
                                    <div class="transaction-name">John Doe</div>
                                    <div class="transaction-phone">+256 771 234 567</div>
                                </div>
                                <div class="transaction-amount">UGX 50,000</div>
                                <div class="status-badge status-success">Success</div>
                                <div class="transaction-time">2 min ago</div>
                            </div>
                            <div class="transaction-row">
                                <div class="transaction-avatar">JS</div>
                                <div class="transaction-details">
                                    <div class="transaction-name">Jane Smith</div>
                                    <div class="transaction-phone">+256 772 345 678</div>
                                </div>
                                <div class="transaction-amount">UGX 25,000</div>
                                <div class="status-badge status-pending">Pending</div>
                                <div class="transaction-time">5 min ago</div>
                            </div>
                            <div class="transaction-row">
                                <div class="transaction-avatar">BJ</div>
                                <div class="transaction-details">
                                    <div class="transaction-name">Bob Johnson</div>
                                    <div class="transaction-phone">+256 773 456 789</div>
                                </div>
                                <div class="transaction-amount">UGX 100,000</div>
                                <div class="status-badge status-success">Success</div>
                                <div class="transaction-time">8 min ago</div>
                            </div>
                            <div class="transaction-row">
                                <div class="transaction-avatar">AB</div>
                                <div class="transaction-details">
                                    <div class="transaction-name">Alice Brown</div>
                                    <div class="transaction-phone">+256 774 567 890</div>
                                </div>
                                <div class="transaction-amount">UGX 75,000</div>
                                <div class="status-badge status-failed">Failed</div>
                                <div class="transaction-time">12 min ago</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Transactions Section -->
            <div id="transactions" class="section">
                <div class="page-header">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">Dashboard</span>
                        <span class="breadcrumb-item">MoMo Integration</span>
                        <span class="breadcrumb-item active">Transactions</span>
                    </nav>
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-2xl font-semibold text-gray-900">Transaction History</h1>
                            <p class="text-gray-600">View and manage all MoMo transactions</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <select class="form-control form-select w-auto">
                                <option>All Status</option>
                                <option>Success</option>
                                <option>Pending</option>
                                <option>Failed</option>
                            </select>
                            <input type="text" class="form-control w-auto" placeholder="Search transactions...">
                        </div>
                    </div>
                </div>

                <div class="content-area">
                    <div class="card">
                        <div class="card-body p-0">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" class="form-control w-4 h-4">
                                        </th>
                                        <th>Transaction ID</th>
                                        <th>Customer</th>
                                        <th>Amount</th>
                                        <th>Provider</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" class="form-control w-4 h-4"></td>
                                        <td class="font-medium">TXN-001234</td>
                                        <td>
                                            <div class="flex items-center">
                                                <div class="transaction-avatar mr-3">JD</div>
                                                <div>
                                                    <div class="font-medium">John Doe</div>
                                                    <div class="text-sm text-gray-500">+256 771 234 567</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="font-medium">UGX 50,000</td>
                                        <td>MTN Mobile Money</td>
                                        <td><span class="status-badge status-success">Success</span></td>
                                        <td class="text-sm text-gray-500">2024-01-15 14:30</td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">View</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="form-control w-4 h-4"></td>
                                        <td class="font-medium">TXN-001235</td>
                                        <td>
                                            <div class="flex items-center">
                                                <div class="transaction-avatar mr-3">JS</div>
                                                <div>
                                                    <div class="font-medium">Jane Smith</div>
                                                    <div class="text-sm text-gray-500">+256 772 345 678</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="font-medium">UGX 25,000</td>
                                        <td>Airtel Money</td>
                                        <td><span class="status-badge status-pending">Pending</span></td>
                                        <td class="text-sm text-gray-500">2024-01-15 14:25</td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">View</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="form-control w-4 h-4"></td>
                                        <td class="font-medium">TXN-001236</td>
                                        <td>
                                            <div class="flex items-center">
                                                <div class="transaction-avatar mr-3">BJ</div>
                                                <div>
                                                    <div class="font-medium">Bob Johnson</div>
                                                    <div class="text-sm text-gray-500">+256 773 456 789</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="font-medium">UGX 100,000</td>
                                        <td>MTN Mobile Money</td>
                                        <td><span class="status-badge status-success">Success</span></td>
                                        <td class="text-sm text-gray-500">2024-01-15 14:20</td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">View</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Configuration Section -->
            <div id="configuration" class="section">
                <div class="page-header">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">Dashboard</span>
                        <span class="breadcrumb-item">MoMo Integration</span>
                        <span class="breadcrumb-item active">Configuration</span>
                    </nav>
                    <div>
                        <h1 class="text-2xl font-semibold text-gray-900">MoMo Configuration</h1>
                        <p class="text-gray-600">Configure your Mobile Money integration settings</p>
                    </div>
                </div>

                <div class="content-area">
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        <!-- Main Configuration -->
                        <div class="lg:col-span-2">
                            <div class="config-section">
                                <h3 class="config-title">API Configuration</h3>
                                <div class="space-y-4">
                                    <div class="form-group">
                                        <label class="form-label">Environment</label>
                                        <select class="form-control form-select">
                                            <option>Production</option>
                                            <option>Sandbox</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">Primary Provider</label>
                                        <select class="form-control form-select">
                                            <option>MTN Mobile Money</option>
                                            <option>Airtel Money</option>
                                            <option>m-GURUSH</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">Collection User ID</label>
                                        <input type="text" class="form-control" placeholder="Enter Collection User ID">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">API Key</label>
                                        <input type="password" class="form-control" placeholder="Enter API Key">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">Subscription Key</label>
                                        <input type="password" class="form-control" placeholder="Enter Subscription Key">
                                    </div>
                                </div>
                            </div>

                            <div class="config-section">
                                <h3 class="config-title">Transaction Settings</h3>
                                <div class="space-y-4">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="auto-retry" class="mr-3">
                                        <label for="auto-retry" class="text-sm">Enable automatic retry for failed transactions</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="webhook-notifications" class="mr-3">
                                        <label for="webhook-notifications" class="text-sm">Enable webhook notifications</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="transaction-logging" class="mr-3">
                                        <label for="transaction-logging" class="text-sm">Enable detailed transaction logging</label>
                                    </div>
                                </div>
                            </div>

                            <div class="flex justify-end">
                                <button class="btn btn-primary">
                                    <i class="fas fa-save mr-2"></i>
                                    Save Configuration
                                </button>
                            </div>
                        </div>

                        <!-- Sidebar Info -->
                        <div class="space-y-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="font-medium">Configuration Status</h5>
                                </div>
                                <div class="card-body">
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">API Connection</span>
                                            <span class="status-badge status-success">Connected</span>
                                        </div>
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">Webhook Status</span>
                                            <span class="status-badge status-success">Active</span>
                                        </div>
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">SSL Certificate</span>
                                            <span class="status-badge status-success">Valid</span>
                                        </div>
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">Last Test</span>
                                            <span class="text-sm text-gray-500">2 hours ago</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h5 class="font-medium">Provider Status</h5>
                                </div>
                                <div class="card-body">
                                    <div class="space-y-3">
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">MTN Mobile Money</span>
                                            <span class="status-badge status-success">Online</span>
                                        </div>
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">Airtel Money</span>
                                            <span class="status-badge status-success">Online</span>
                                        </div>
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">m-GURUSH</span>
                                            <span class="status-badge status-pending">Maintenance</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h5 class="font-medium">Need Help?</h5>
                                </div>
                                <div class="card-body">
                                    <div class="space-y-3">
                                        <div class="help-item">
                                            <i class="fas fa-check-circle"></i>
                                            <span class="text-sm">Verify API credentials</span>
                                        </div>
                                        <div class="help-item">
                                            <i class="fas fa-check-circle"></i>
                                            <span class="text-sm">Test connection status</span>
                                        </div>
                                        <div class="help-item">
                                            <i class="fas fa-check-circle"></i>
                                            <span class="text-sm">Check webhook URLs</span>
                                        </div>
                                    </div>
                                    <div class="mt-4 space-y-2">
                                        <button class="btn btn-outline w-full">
                                            <i class="fas fa-life-ring mr-2"></i>
                                            Support Center
                                        </button>
                                        <button class="btn btn-outline w-full">
                                            <i class="fas fa-book mr-2"></i>
                                            Documentation
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Webhooks Section -->
            <div id="webhooks" class="section">
                <div class="page-header">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">Dashboard</span>
                        <span class="breadcrumb-item">MoMo Integration</span>
                        <span class="breadcrumb-item active">Webhooks</span>
                    </nav>
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-2xl font-semibold text-gray-900">Webhook Management</h1>
                            <p class="text-gray-600">Configure webhook endpoints for real-time transaction notifications</p>
                        </div>
                        <button class="btn btn-primary">
                            <i class="fas fa-plus mr-2"></i>
                            Add Webhook
                        </button>
                    </div>
                </div>

                <div class="content-area">
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        <div class="lg:col-span-2">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="font-medium">Webhook Endpoints</h5>
                                </div>
                                <div class="card-body">
                                    <div class="space-y-4">
                                        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                            <div>
                                                <div class="font-medium">Payment Success</div>
                                                <div class="text-sm text-gray-500">https://yoursite.com/webhooks/payment-success</div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <span class="status-badge status-success">Active</span>
                                                <button class="btn btn-outline btn-sm">Edit</button>
                                            </div>
                                        </div>
                                        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                            <div>
                                                <div class="font-medium">Payment Failed</div>
                                                <div class="text-sm text-gray-500">https://yoursite.com/webhooks/payment-failed</div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <span class="status-badge status-success">Active</span>
                                                <button class="btn btn-outline btn-sm">Edit</button>
                                            </div>
                                        </div>
                                        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                            <div>
                                                <div class="font-medium">Refund Processed</div>
                                                <div class="text-sm text-gray-500">https://yoursite.com/webhooks/refund</div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <span class="status-badge status-pending">Inactive</span>
                                                <button class="btn btn-outline btn-sm">Edit</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="font-medium">Webhook Events</h5>
                                </div>
                                <div class="card-body">
                                    <div class="space-y-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" id="payment-success" class="mr-3" checked>
                                            <label for="payment-success" class="text-sm">Payment Success</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="payment-failed" class="mr-3" checked>
                                            <label for="payment-failed" class="text-sm">Payment Failed</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="payment-pending" class="mr-3">
                                            <label for="payment-pending" class="text-sm">Payment Pending</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="refund-processed" class="mr-3">
                                            <label for="refund-processed" class="text-sm">Refund Processed</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- API Keys Section -->
            <div id="api-keys" class="section">
                <div class="page-header">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">Dashboard</span>
                        <span class="breadcrumb-item">MoMo Integration</span>
                        <span class="breadcrumb-item active">API Keys</span>
                    </nav>
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-2xl font-semibold text-gray-900">API Key Management</h1>
                            <p class="text-gray-600">Manage your API keys and access tokens</p>
                        </div>
                        <button class="btn btn-primary">
                            <i class="fas fa-plus mr-2"></i>
                            Generate New Key
                        </button>
                    </div>
                </div>

                <div class="content-area">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="font-medium">Active API Keys</h5>
                        </div>
                        <div class="card-body">
                            <div class="space-y-4">
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                    <div>
                                        <div class="font-medium">Production API Key</div>
                                        <div class="text-sm text-gray-500 font-mono">pk_live_****************************</div>
                                        <div class="text-xs text-gray-400">Created: Jan 15, 2024</div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <span class="status-badge status-success">Active</span>
                                        <button class="btn btn-outline btn-sm">Regenerate</button>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                    <div>
                                        <div class="font-medium">Sandbox API Key</div>
                                        <div class="text-sm text-gray-500 font-mono">pk_test_****************************</div>
                                        <div class="text-xs text-gray-400">Created: Jan 10, 2024</div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <span class="status-badge status-success">Active</span>
                                        <button class="btn btn-outline btn-sm">Regenerate</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Logs Section -->
            <div id="logs" class="section">
                <div class="page-header">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">Dashboard</span>
                        <span class="breadcrumb-item">MoMo Integration</span>
                        <span class="breadcrumb-item active">Logs</span>
                    </nav>
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-2xl font-semibold text-gray-900">Transaction Logs</h1>
                            <p class="text-gray-600">Monitor API calls, errors, and transaction logs</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <select class="form-control form-select w-auto">
                                <option>All Logs</option>
                                <option>API Calls</option>
                                <option>Errors</option>
                                <option>Webhooks</option>
                            </select>
                            <button class="btn btn-outline">
                                <i class="fas fa-download mr-2"></i>
                                Export Logs
                            </button>
                        </div>
                    </div>
                </div>

                <div class="content-area">
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="space-y-0">
                                <div class="flex items-start p-4 border-b border-gray-200">
                                    <div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-4"></div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <div class="font-medium">Payment Request Successful</div>
                                            <div class="text-sm text-gray-500">2 minutes ago</div>
                                        </div>
                                        <div class="text-sm text-gray-600">Transaction ID: TXN-001234 | Amount: UGX 50,000</div>
                                        <div class="text-xs text-gray-400">POST /api/v1/payments/request</div>
                                    </div>
                                </div>
                                <div class="flex items-start p-4 border-b border-gray-200">
                                    <div class="w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-4"></div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <div class="font-medium">Webhook Retry Attempted</div>
                                            <div class="text-sm text-gray-500">5 minutes ago</div>
                                        </div>
                                        <div class="text-sm text-gray-600">Transaction ID: TXN-001235 | Retry attempt: 2/3</div>
                                        <div class="text-xs text-gray-400">POST /webhooks/payment-status</div>
                                    </div>
                                </div>
                                <div class="flex items-start p-4 border-b border-gray-200">
                                    <div class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-4"></div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <div class="font-medium">API Rate Limit Exceeded</div>
                                            <div class="text-sm text-gray-500">8 minutes ago</div>
                                        </div>
                                        <div class="text-sm text-gray-600">Rate limit: 100 requests/minute exceeded</div>
                                        <div class="text-xs text-gray-400">POST /api/v1/payments/request</div>
                                    </div>
                                </div>
                                <div class="flex items-start p-4 border-b border-gray-200">
                                    <div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-4"></div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <div class="font-medium">Transaction Status Updated</div>
                                            <div class="text-sm text-gray-500">12 minutes ago</div>
                                        </div>
                                        <div class="text-sm text-gray-600">Transaction ID: TXN-001236 | Status: Success</div>
                                        <div class="text-xs text-gray-400">PUT /api/v1/transactions/status</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Section navigation
        function showSection(sectionId) {
            // Remove active class from all sections
            document.querySelectorAll('.section').forEach(section => {
                section.classList.remove('active');
            });
            
            // Remove active class from all nav links
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // Show selected section
            document.getElementById(sectionId).classList.add('active');
            
            // Add active class to clicked nav link
            event.target.classList.add('active');
        }

        // Initialize tooltips and other interactive elements
        document.addEventListener('DOMContentLoaded', function() {
            // Add any initialization code here
            console.log('MoMo Integration Dashboard loaded');
        });

        // Auto-refresh dashboard data (placeholder)
        setInterval(() => {
            // In a real application, this would fetch fresh data from the API
            console.log('Refreshing dashboard data...');
        }, 30000);
    </script>
</body>
</html>