Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transaction List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Our Shop</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link"  href="member.html">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="transaksi.html">TRANSAKSI</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="profile.html">Profile</a>
                    </li>
                    <li class="nav-item">
                        <button class="btn btn-danger btn-sm" onclick="logout()">Logout</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Container -->
    <div class="container mt-5">
        <h1 class="text-center mb-4">Transaction List</h1>
        <table class="table table-bordered table-striped">
            <thead class="table-dark">
                <tr>
                    <th>No</th>
                    <th>User Name</th>
                    <th>Product</th>
                    <th>Order ID</th>
                    <th>Status</th>
                    <th>Payment Link</th>
                </tr>
            </thead>
            <tbody id="transaction-list"></tbody>
        </table>
    </div>

    <script>
        fetch('http://localhost:3000/api/get-user-id', {
            method: 'GET',
            credentials: 'include' // Include cookies in request
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Unauthorized access');
            }
            return response.json();
        })
        .catch(error => {
            console.error('Error fetching user ID:', error);
            alert('Please log in first!');
            window.location.href = "http://localhost:5500/";
        });

        // Fungsi untuk logout
        function logout() {
            fetch('http://localhost:3000/api/logout', { method: 'POST', credentials: 'include' })
                .then(() => {
                    window.location.href = 'login.html';
                })
                .catch(err => console.error('Logout error:', err));
        }

        // Mengambil data transaksi dari backend
        fetch('http://localhost:3000/api/transactions', {
            method: 'GET',
            credentials: 'include' // Mengirim cookie session
        })
            .then(response => response.json())
            .then(data => {
                const transactionList = document.getElementById('transaction-list');
                data.forEach((transaction, index) => {
                    const statusColor =
                        transaction.status === 'success'
                            ? 'text-success'
                            : transaction.status === 'pending'
                            ? 'text-warning'
                            : 'text-danger';

                    transactionList.innerHTML += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${transaction.user_name}</td>
                            <td>${transaction.product_name}</td>
                            <td>${transaction.order_id}</td>
                            <td class="${statusColor} fw-bold">${transaction.status}</td>
                            <td>
                                ${
                                    transaction.status === 'pending'
                                        ? `<a href="${transaction.payment_link}" target="_blank" class="btn btn-primary btn-sm">Pay Now</a>`
                                        : '-'
                                }
                            </td>
                        </tr>
                    `;
                });
            })
            .catch(error => {
                console.error('Error fetching transactions:', error);
            });

            function logout() {
            fetch('http://localhost:3000/logout', {
                method: 'GET',
                credentials: 'include'
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                window.location.href = "http://localhost:5500/";
            })
            .catch(error => {
                console.error('Error during logout:', error);
            });
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

buatkan menggunakan tailwindcss versi 3.4.16 plugin flowbite versi 2.5.2