1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / earnlouq / oxyield.live / user /
Filename : transactions.php
back
<?php
session_start();
include '../../config/oxconfig.php';
include 'includes/checklogin.php';
include 'includes/functions.php';
check_login();
$title = "Transactions";
$uid = $_SESSION['id'];
$user = getUserInfo($con, $uid);
extract($user);

// Fetch all transactions
$stmt = $con->prepare("SELECT id, type, amount, status, created_at FROM transactions WHERE user_id = ? ORDER BY created_at DESC");
$stmt->bind_param("i", $uid);
$stmt->execute();
$transactions = $stmt->get_result();

include 'includes/header.php';
?>

<!-- Custom CSS for card hover and layout -->
<style>
    .transaction-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .transaction-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .transaction-icon {
        font-size: 1rem;
        color: #6c757d;
        background-color: #f1f3f5;
        border-radius: 50%;
        padding: 8px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .transaction-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .left-col {
        display: flex;
        align-items: center;
    }
    .left-content {
        margin-left: 10px;
    }
    .right-col {
        text-align: right;
    }
    .transaction-amount {
        font-size: 1.5rem;
        font-weight: bold;
    }
</style>
<!-- [ Main Content ] start -->
<div class="pc-container">
    <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb mb-3">
                            <li class="breadcrumb-item"><a href="dashboard.php">Home</a></li>
                            <li class="breadcrumb-item" aria-current="page">Transactions</li>
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h4 class="mb-0">Transaction History</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->

        <!-- Tabs for filtering -->
        <ul class="nav nav-tabs mb-4 mt-4" id="transactionTabs" role="tablist"
        style="display:flex;flex-direction:row;align-items:center;justify-content:space-between;">
            <li class="nav-item">
                <a class="nav-link active" id="deposit-tab" data-bs-toggle="tab" href="#deposit" role="tab" aria-selected="true">Deposits</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="withdrawal-tab" data-bs-toggle="tab" href="#withdrawal" role="tab" aria-selected="false">Withdrawals</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="others-tab" data-bs-toggle="tab" href="#others" role="tab" aria-selected="false">Others</a>
            </li>
        </ul>

        <!-- Tab content -->
        <div class="tab-content">
            <div class="tab-pane fade show active" id="deposit" role="tabpanel">
                <div class="row" id="depositContainer"></div>
            </div>
            <div class="tab-pane fade" id="withdrawal" role="tabpanel">
                <div class="row" id="withdrawalContainer"></div>
            </div>
            <div class="tab-pane fade" id="others" role="tabpanel">
                <div class="row" id="othersContainer"></div>
            </div>
        </div>

        <!-- No transactions message -->
        <div class="alert alert-info text-center" id="noTransactions" style="display: none;">
            No transactions found.
        </div>

        <!-- Load More Button -->
        <div class="text-center mt-1 mb-4">
            <button id="loadMore" class="btn btn-primary" style="display: none;">Load More</button>
        </div>
    </div>
    <div style="height:30px;"></div>
</div>

<!-- Bootstrap JS and jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Store transactions in JavaScript
    const transactions = [
        <?php while ($row = $transactions->fetch_assoc()): ?>
            {
                id: <?php echo $row['id']; ?>,
                type: "<?php echo strtolower($row['type']); ?>",
                amount: <?php echo $row['amount']; ?>,
                status: "<?php echo strtolower($row['status']); ?>",
                created_at: "<?php echo (new DateTime($row['created_at']))->format('j F, Y'); ?>",
                type_text: "<?php echo match (strtolower($row['type'])) {
                    'deposit' => 'Deposit',
                    'withdrawal' => 'Withdrawal',
                    'profit' => 'Profit',
                    'loss' => 'Loss',
                    'trading' => 'Trading',
                    'bot purchase' => 'Bot Purchase',
                    'referral commission' => 'Referral Commission',
                    default => 'Transaction'
                }; ?>",
                icon_class: "<?php echo match (strtolower($row['type'])) {
                    'deposit' => 'fa-solid fa-arrow-down',
                    'withdrawal' => 'fa-solid fa-arrow-up',
                    'profit' => 'fa-solid fa-chart-line',
                    'loss' => 'fa-solid fa-chart-line-down',
                    'trading' => 'fa-solid fa-piggy-bank',
                    'bot purchase' => 'fa-solid fa-robot',
                    'referral commission' => 'fa-solid fa-users',
                    default => 'fa-solid fa-circle-question'
                }; ?>",
                status_class: "<?php echo match (strtolower($row['status'])) {
                    'confirmed', 'completed' => 'success',
                    'pending' => 'warning',
                    'failed', 'cancelled', 'rejected' => 'danger',
                    default => 'info'
                }; ?>"
            },
        <?php endwhile; ?>
    ];

    // Client-side pagination
    const cardsPerPage = 9;
    let currentPage = 1;
    let activeTab = 'deposit';

    function renderTransactions(filterType, page) {
        const $container = $(`#${filterType}Container`);
        $container.empty();
        const filtered = filterType === 'others' 
            ? transactions.filter(t => t.type !== 'Deposit' && t.type !== 'Withdrawal')
            : transactions.filter(t => t.type === filterType);
        
        if (filtered.length === 0) {
            $('#noTransactions').show();
            $('#loadMore').hide();
            return;
        }
        
        $('#noTransactions').hide();
        const start = (page - 1) * cardsPerPage;
        const end = start + cardsPerPage;
        const pageTransactions = filtered.slice(start, end);

        pageTransactions.forEach(t => {
            $container.append(`
                <div class="col-md-4 col-sm-6">
                    <div class="card transaction-card">
                        <div class="card-body">
                            <div class="transaction-row">
                                <div class="left-col">
                                    <div class="transaction-icon">
                                        <i class="fa ${t.icon_class}"></i>
                                    </div>
                                    <div class="left-content">
                                        <h6 class="mb-1">${t.type_text}</h6>
                                        <p class="mb-0 text-muted">${t.created_at}</p>
                                    </div>
                                </div>
                                <div class="right-col">
                                    <p class="mb-1 transaction-amount">$${Number(t.amount).toFixed(2)}</p>
                                    <span class="badge bg-${t.status_class}">${t.status.charAt(0).toUpperCase() + t.status.slice(1)}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `);
        });

        $('#loadMore').toggle(end < filtered.length);
    }

    // Handle tab click
    $('#transactionTabs a').on('click', function(e) {
        e.preventDefault();
        $(this).tab('show');
        activeTab = $(this).attr('href').substring(1); // Get tab ID (deposit, withdrawal, others)
        currentPage = 1;
        renderTransactions(activeTab, currentPage);
    });

    // Load More button
    $('#loadMore').on('click', function() {
        currentPage++;
        renderTransactions(activeTab, currentPage);
    });

    // Initial render
    if (transactions.length > 0) {
        renderTransactions('deposit', 1);
    } else {
        $('#noTransactions').show();
    }
});
</script>

<?php
$transactions->close();
include 'includes/footer.php';
?>