| | <?php |
| | ini_set('display_errors', 1); |
| | ini_set('display_startup_errors', 1); |
| | error_reporting(E_ALL); |
| |
|
| | session_start(); |
| | if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) { |
| | header('Location: ../../index.php'); |
| | exit; |
| | } |
| |
|
| | |
| | require_once '../../db.php'; |
| | require_once '../classes/User.php'; |
| | require_once '../classes/Transaction.php'; |
| |
|
| | |
| | $database = new Database(); |
| | $db = $database->getConnection(); |
| |
|
| | |
| | $user = new User($db); |
| | $transaction = new Transaction($db); |
| |
|
| | |
| | $username = $_SESSION['username']; |
| |
|
| | |
| | $email = $_SESSION['email'] ?? 'unknown@example.com'; |
| | $tier = $_SESSION['tier'] ?? 'Basic'; |
| | $package = $_SESSION['package'] ?? 'NOVA'; |
| | $balance = $_SESSION['balance'] ?? 0; |
| | $total_deposits = $_SESSION['total_deposits'] ?? 0; |
| | $total_withdrawals = $_SESSION['total_withdrawals'] ?? 0; |
| | $rewards = $_SESSION['rewards'] ?? 0; |
| | $earnings = $total_deposits - $total_withdrawals; |
| | $transactions = []; |
| |
|
| | |
| | try { |
| | if ($user->getUserByUsername($username)) { |
| | |
| | $email = $user->email; |
| | $tier = $user->tier; |
| | $package = $user->package; |
| | $balance = $user->balance; |
| | $total_deposits = $user->total_deposits; |
| | $total_withdrawals = $user->total_withdrawals; |
| | $rewards = $user->rewards; |
| | $earnings = $total_deposits - $total_withdrawals; |
| | |
| | |
| | $_SESSION['email'] = $email; |
| | $_SESSION['tier'] = $tier; |
| | $_SESSION['package'] = $package; |
| | $_SESSION['balance'] = $balance; |
| | $_SESSION['total_deposits'] = $total_deposits; |
| | $_SESSION['total_withdrawals'] = $total_withdrawals; |
| | $_SESSION['rewards'] = $rewards; |
| | |
| | |
| | $transactions_stmt = $transaction->getTransactionsByUserId($user->id, 20); |
| | if ($transactions_stmt) { |
| | $transactions = $transactions_stmt->fetchAll(PDO::FETCH_ASSOC); |
| | } |
| | } |
| | } catch (Exception $e) { |
| | |
| | error_log("Database error: " . $e->getMessage()); |
| | } |
| | ?> |
| |
|
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Japanese Motors — Transactions</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet"> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <style> |
| | :root { |
| | --bg: |
| | --card: |
| | --card-2: |
| | --accent: |
| | --muted: rgba(255,255,255,0.6); |
| | --glass: rgba(255,255,255,0.04); |
| | --promo-gradient: linear-gradient(180deg,#a13df0 0%, #ff2a79 50%, #d70b1a 100%); |
| | font-family: 'Poppins', system-ui, Arial; |
| | --spacing-unit: 1rem; |
| | --accent-primary: |
| | --accent-secondary: |
| | --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1); |
| | --premium-gold: |
| | } |
| | |
| | body { |
| | background: var(--bg); |
| | font-family: 'Poppins', sans-serif; |
| | transition: all 0.3s ease; |
| | min-height: 100vh; |
| | } |
| | |
| | .sidebar { |
| | width: 250px; |
| | height: 100vh; |
| | background: |
| | color: |
| | position: fixed; |
| | top: 0; |
| | left: -250px; |
| | transition: all 0.3s ease; |
| | z-index: 1000; |
| | overflow-y: auto; |
| | } |
| | |
| | .sidebar.active { |
| | left: 0; |
| | } |
| | |
| | |
| | margin-left: 0; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .sidebar.active ~ |
| | margin-left: 250px; |
| | } |
| | |
| | header { |
| | background: |
| | color: white; |
| | padding: 15px 20px; |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | position: relative; |
| | z-index: 900; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .sidebar.active ~ |
| | margin-left: 250px; |
| | } |
| | |
| | .menu-toggle { |
| | background: transparent; |
| | border: none; |
| | color: white; |
| | font-size: 1.5rem; |
| | cursor: pointer; |
| | } |
| | |
| | .logo-section { |
| | padding: 15px; |
| | border-bottom: 1px solid |
| | display: flex; |
| | align-items: center; |
| | gap: 10px; |
| | } |
| | |
| | .brand { |
| | font-size: 1.2rem; |
| | font-weight: 700; |
| | color: |
| | } |
| | |
| | .subtitle { |
| | font-size: 0.75rem; |
| | color: |
| | } |
| | |
| | .menu { |
| | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| | } |
| | |
| | .menu li a { |
| | display: flex; |
| | align-items: center; |
| | padding: 12px 20px; |
| | color: white; |
| | text-decoration: none; |
| | transition: background 0.3s; |
| | } |
| | |
| | .menu li a:hover { |
| | background: |
| | } |
| | |
| | .menu li a i { |
| | margin-right: 12px; |
| | } |
| | |
| | .user-footer { |
| | padding: 15px; |
| | background: |
| | display: flex; |
| | align-items: center; |
| | gap: 10px; |
| | position: sticky; |
| | bottom: 0; |
| | } |
| | |
| | .avatar { |
| | width: 35px; |
| | height: 35px; |
| | background: |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-weight: bold; |
| | color: white; |
| | } |
| | |
| | .banner { |
| | max-width: 450px; |
| | margin: 0 auto calc(var(--spacing-unit) * 2); |
| | background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
| | border-radius: 12px; |
| | padding: calc(var(--spacing-unit) * 1.5); |
| | text-align: center; |
| | box-shadow: var(--shadow-hover); |
| | animation: fadeIn 0.5s ease; |
| | } |
| |
|
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(20px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| |
|
| | @keyframes blink { |
| | 0% { opacity: 1; } |
| | 50% { opacity: 0.3; } |
| | 100% { opacity: 1; } |
| | } |
| |
|
| | .banner .title { |
| | font-size: 1.25rem; |
| | margin-bottom: calc(var(--spacing-unit) * 1); |
| | color: |
| | font-weight: 700; |
| | animation: blink 1.5s infinite; |
| | } |
| |
|
| | .banner p { |
| | font-size: 0.95rem; |
| | line-height: 1.6; |
| | margin-bottom: calc(var(--spacing-unit) * 1); |
| | color: var(--premium-gold); |
| | animation: blink 1.5s infinite; |
| | } |
| |
|
| | .banner .footer { |
| | font-size: 0.75rem; |
| | color: rgba(255, 255, 255, 0.9); |
| | font-style: italic; |
| | animation: blink 1.5s infinite; |
| | } |
| | |
| | .card { |
| | background: var(--card); |
| | border-radius: 12px; |
| | padding: 26px; |
| | color: white; |
| | box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset; |
| | flex: 1; |
| | } |
| | |
| | .transaction { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | padding: 14px 0; |
| | border-bottom: 1px solid rgba(255,255,255,0.1); |
| | } |
| | |
| | .transaction:last-child { |
| | border-bottom: none; |
| | } |
| | |
| | .transaction-type { |
| | width: 40px; |
| | height: 40px; |
| | border-radius: 10px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | margin-right: 12px; |
| | } |
| | |
| | .transaction-details { |
| | flex-grow: 1; |
| | } |
| | |
| | .transaction-amount { |
| | text-align: right; |
| | font-weight: 600; |
| | } |
| | |
| | .filter-tabs { |
| | display: flex; |
| | background: rgba(0,0,0,0.2); |
| | border-radius: 10px; |
| | padding: 5px; |
| | margin-bottom: 20px; |
| | } |
| | |
| | .filter-tab { |
| | flex: 1; |
| | text-align: center; |
| | padding: 8px; |
| | border-radius: 8px; |
| | cursor: pointer; |
| | } |
| | |
| | .filter-tab.active { |
| | background: var(--accent); |
| | color: |
| | font-weight: 600; |
| | } |
| | |
| | .btn { |
| | background: |
| | color: white; |
| | padding: 10px 20px; |
| | border-radius: 8px; |
| | border: none; |
| | cursor: pointer; |
| | transition: background 0.3s; |
| | } |
| | |
| | .btn:hover { |
| | background: |
| | } |
| | |
| | @media (max-width: 768px) { |
| | .cards { |
| | flex-direction: column; |
| | } |
| | |
| | .promo { |
| | width: 92%; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <!-- Sidebar --> |
| | <aside class="sidebar" id="sidebar"> |
| | <div class="logo-section"> |
| | <i data-feather="zap" class="text-yellow-400"></i> |
| | <div> |
| | <h2 class="brand">JMOTORS</h2> |
| | <p class="subtitle">Marketing Platform</p> |
| | </div> |
| | </div> |
| | |
| | <ul class="menu"> |
| | <li><a href="index.php"><i data-feather="home"></i> Dashboard</a></li> |
| | <li><a href="meta-uploads.php"><i data-feather="upload"></i> Meta Uploads</a></li> |
| | <li><a href="transactions.php" class="active-page"><i data-feather="repeat"></i> Transactions</a></li> |
| | <li><a href="transfer.php"><i data-feather="send"></i> Transfer</a></li> |
| | <li><a href="daily-product.php"><i data-feather="shopping-bag"></i> Daily Product</a></li> |
| | <li><a href="withdraw.php"><i data-feather="dollar-sign"></i> Withdraw</a></li> |
| | <li><a href="packages.php"><i data-feather="package"></i> Packages</a></li> |
| | <li><a href="loan.php"><i data-feather="credit-card"></i> Loan</a></li> |
| | <li><a href="recharge.php"><i data-feather="battery-charging"></i> Recharge</a></li> |
| | <li><a href="agent-approval.php"><i data-feather="user-check"></i> Agent Approval</a></li> |
| | <li><a href="access-token.php"><i data-feather="key"></i> Access Token</a></li> |
| | <li><a href="agent-claim.php"><i data-feather="tag"></i> Agent Claim</a></li> |
| | <li><a href="team.php"><i data-feather="users"></i> Team</a></li> |
| | </ul> |
| | |
| | <ul class="menu bottom"> |
| | <li><a href="profile.php"><i data-feather="user"></i> Profile</a></li> |
| | <li><a href="settings.php"><i data-feather="settings"></i> Settings</a></li> |
| | <li><a href="whatsapp-channel.php"><i data-feather="message-square"></i> Whatsapp Channel</a></li> |
| | <li><a href="customer-care.php"><i data-feather="headphones"></i> Customer Care</a></li> |
| | </ul> |
| | |
| | <div class="user-footer"> |
| | <div class="avatar"><?php echo substr($username, 0, 2); ?></div> |
| | <div> |
| | <h4><?php echo $username; ?></h4> |
| | <p><?php echo $tier; ?> - Marketer</p> |
| | </div> |
| | </div> |
| | </aside> |
| | |
| | <!-- Main Content --> |
| | <div id="content"> |
| | <header class="bg-gray-800 text-white p-4"> |
| | <div class="flex items-center"> |
| | <button class="menu-toggle" id="menu-toggle"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | <div class="ml-4 font-bold text-xl">Jmotors</div> |
| | </div> |
| | <nav class="flex items-center space-x-6"> |
| | <a href="transfer.php" class="hover:text-yellow-300">Transfer</a> |
| | <a href="loan.php" class="hover:text-yellow-300">Loans</a> |
| | <a href="dailyproduct.php" class="hover:text-yellow-300">New Product</a> |
| | <div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-300 to-orange-400 flex items-center justify-center font-bold">MI</div> |
| | </nav> |
| | </header> |
| | |
| | <main class="p-4"> |
| | <div class="banner"> |
| | <div class="title">🎉 Tuesday Giveaway Cashback! 🎄 Only at Jmotors</div> |
| | <p>Buy the <strong>💎 NOVA</strong> at <strong>KES 1,000.00</strong> get Awarded Instantly <strong>KES 3,000.00</strong> ...</p> |
| | |
| | <div class="footer">📦 Fast payouts via M-Pesa • Powered by Jmotors</div> |
| | </div> |
| | |
| | <div class="card mt-6"> |
| | <div class="flex items-center gap-3 mb-6"> |
| | <div class="w-11 h-11 rounded-lg bg-gray-800 bg-opacity-30 flex items-center justify-center text-2xl">💸</div> |
| | <div> |
| | <h3 class="text-2xl font-bold">Transaction History</h3> |
| | <small class="text-gray-300">All your financial activities</small> |
| | </div> |
| | </div> |
| | |
| | <div class="filter-tabs"> |
| | <div class="filter-tab active" data-filter="all">All</div> |
| | <div class="filter-tab" data-filter="deposit">Deposits</div> |
| | <div class="filter-tab" data-filter="withdrawal">Withdrawals</div> |
| | <div class="filter-tab" data-filter="earning">Earnings</div> |
| | </div> |
| | |
| | <div class="mt-4" id="transactions-container"> |
| | <?php if (!empty($transactions)): ?> |
| | <?php foreach ($transactions as $row): ?> |
| | <?php |
| | $icon = ''; |
| | $color_class = ''; |
| | $bg_class = ''; |
| | |
| | switch ($row['type']) { |
| | case 'deposit': |
| | case 'bonus': |
| | case 'earning': |
| | $icon = 'arrow-down-right'; |
| | $color_class = 'text-green-400'; |
| | $bg_class = 'bg-green-900'; |
| | $amount_display = '+ KES ' . number_format($row['amount'], 2); |
| | break; |
| | case 'withdrawal': |
| | case 'purchase': |
| | $icon = 'arrow-up-right'; |
| | $color_class = 'text-red-400'; |
| | $bg_class = 'bg-red-900'; |
| | $amount_display = '- KES ' . number_format($row['amount'], 2); |
| | break; |
| | case 'transfer': |
| | $icon = 'refresh-cw'; |
| | $color_class = 'text-yellow-400'; |
| | $bg_class = 'bg-blue-900'; |
| | $amount_display = 'KES ' . number_format($row['amount'], 2); |
| | break; |
| | default: |
| | $icon = 'dollar-sign'; |
| | $color_class = 'text-gray-400'; |
| | $bg_class = 'bg-gray-900'; |
| | $amount_display = 'KES ' . number_format($row['amount'], 2); |
| | } |
| | ?> |
| | <div class="transaction" data-type="<?php echo $row['type']; ?>"> |
| | <div style="display: flex; align-items: center;"> |
| | <div class="transaction-type <?php echo $bg_class; ?>"> |
| | <i data-feather="<?php echo $icon; ?>" class="<?php echo $color_class; ?>"></i> |
| | </div> |
| | <div class="transaction-details"> |
| | <div class="font-medium"><?php echo ucfirst($row['description'] ?: $row['type']); ?></div> |
| | <div class="text-xs text-gray-400"><?php echo date('M j, Y, g:i A', strtotime($row['created_at'])); ?></div> |
| | </div> |
| | </div> |
| | <div class="transaction-amount <?php echo $color_class; ?>"><?php echo $amount_display; ?></div> |
| | </div> |
| | <?php endforeach; ?> |
| | <?php else: ?> |
| | <div class="text-center py-4 text-gray-400">No transactions found</div> |
| | <!-- Sample transactions for demonstration --> |
| | <div class="transaction" data-type="deposit"> |
| | <div style="display: flex; align-items: center;"> |
| | <div class="transaction-type bg-green-900"> |
| | <i data-feather="arrow-down-right" class="text-green-400"></i> |
| | </div> |
| | <div class="transaction-details"> |
| | <div class="font-medium">Sample Deposit</div> |
| | <div class="text-xs text-gray-400">Today, 09:42 AM</div> |
| | </div> |
| | </div> |
| | <div class="transaction-amount text-green-400">+ KES 100</div> |
| | </div> |
| | |
| | <div class="transaction" data-type="withdrawal"> |
| | <div style="display: flex; align-items: center;"> |
| | <div class="transaction-type bg-red-900"> |
| | <i data-feather="arrow-up-right" class="text-red-400"></i> |
| | </div> |
| | <div class="transaction-details"> |
| | <div class="font-medium">Sample Withdrawal</div> |
| | <div class="text-xs text-gray-400">Yesterday, 3:15 PM</div> |
| | </div> |
| | </div> |
| | <div class="transaction-amount text-red-400">- KES 1,000</div> |
| | </div> |
| | <?php endif; ?> |
| | </div> |
| | |
| | <div class="mt-6 text-center"> |
| | <button class="btn bg-gray-700 hover:bg-gray-600">Load More Transactions</button> |
| | </div> |
| | </div> |
| | </main> |
| | </div> |
| | |
| | <script> |
| | feather.replace(); |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const toggleBtn = document.getElementById('menu-toggle'); |
| | const sidebar = document.getElementById('sidebar'); |
| | const content = document.getElementById('content'); |
| | |
| | toggleBtn.addEventListener('click', function() { |
| | sidebar.classList.toggle('active'); |
| | content.classList.toggle('active'); |
| | }); |
| | |
| | |
| | const tabs = document.querySelectorAll('.filter-tab'); |
| | const transactions = document.querySelectorAll('.transaction'); |
| | |
| | tabs.forEach(tab => { |
| | tab.addEventListener('click', function() { |
| | tabs.forEach(t => t.classList.remove('active')); |
| | this.classList.add('active'); |
| | |
| | const filter = this.getAttribute('data-filter'); |
| | |
| | transactions.forEach(transaction => { |
| | if (filter === 'all') { |
| | transaction.style.display = 'flex'; |
| | } else { |
| | if (transaction.getAttribute('data-type') === filter) { |
| | transaction.style.display = 'flex'; |
| | } else { |
| | transaction.style.display = 'none'; |
| | } |
| | } |
| | }); |
| | }); |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
