PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u456810272/domains/huntbooking.org/public_html/dashboard.php

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: index.html#login");
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HuntBooking Admin Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-color: #f3f4f6;
            --sidebar-bg: #1f2937;
            --sidebar-hover: #374151;
            --text-main: #111827;
            --text-light: #6b7280;
            --card-bg: #ffffff;
            --primary: #4f46e5;
            --primary-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            --secondary-grad: linear-gradient(135deg, #10b981 0%, #34d399 100%);
            --danger-grad: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
            --warning-grad: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
            --border: #e5e7eb;
        }

        body.dark-mode {
            --bg-color: #111827;
            --sidebar-bg: #030712;
            --text-main: #f9fafb;
            --text-light: #9ca3af;
            --card-bg: #1f2937;
            --border: #374151;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        body { background-color: var(--bg-color); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; transition: 0.3s; }
        
        /* Sidebar */
        .sidebar { width: 260px; background-color: var(--sidebar-bg); color: #fff; display: flex; flex-direction: column; transition: 0.3s; }
        .sidebar-header { padding: 20px; font-size: 1.5rem; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; color: #fff; }
        .nav-links { flex: 1; overflow-y: auto; padding: 10px 0; }
        .nav-link { padding: 15px 25px; display: block; color: #d1d5db; text-decoration: none; font-weight: 500; transition: 0.2s; cursor: pointer; }
        .nav-link:hover, .nav-link.active { background-color: var(--sidebar-hover); color: #fff; border-left: 4px solid var(--primary); }
        
        /* Main Content */
        .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .topbar { height: 70px; background-color: var(--card-bg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; padding: 0 30px; }
        .theme-toggle { background: var(--primary-grad); color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 500; }
        
        .content-area { padding: 30px; overflow-y: auto; flex: 1; }
        .view-panel { display: none; animation: fadeIn 0.3s ease; }
        .view-panel.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Dashboard Stats */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .stat-card { background: var(--card-bg); padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid var(--border); transition: transform 0.2s; }
        .stat-card:hover { transform: translateY(-4px); }
        .stat-card h3 { color: var(--text-light); font-size: 0.9rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
        .stat-card .value { font-size: 2rem; font-weight: 700; color: var(--text-main); }
        .stat-card.c1 { border-top: 4px solid #4f46e5; }
        .stat-card.c2 { border-top: 4px solid #10b981; }
        .stat-card.c3 { border-top: 4px solid #f59e0b; }
        .stat-card.c4 { border-top: 4px solid #ef4444; }

        /* Tables & Forms */
        .card { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 25px; margin-bottom: 25px; }
        .card h2 { margin-bottom: 20px; font-size: 1.25rem; }
        table { width: 100%; border-collapse: collapse; text-align: left; }
        th, td { padding: 15px; border-bottom: 1px solid var(--border); }
        th { color: var(--text-light); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; }
        .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; font-weight: 500; font-size: 0.9rem; transition: 0.2s; }
        .btn-grad { background: var(--primary-grad); }
        .btn-grad:hover { box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4); }
        .btn-danger { background: var(--danger-grad); }

        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-light); font-weight: 500; }
        .form-group input, .form-group select { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-main); font-size: 1rem; transition: border-color 0.2s; }
        .form-group input:focus { border-color: var(--primary); outline: none; }

        /* Toast */
        #toast { position: fixed; bottom: 20px; right: 20px; padding: 15px 25px; border-radius: 8px; color: #fff; font-weight: 500; opacity: 0; transition: opacity 0.3s; z-index: 9999; }
    </style>
</head>
<body>

    <aside class="sidebar">
        <div class="sidebar-header">HuntBooking</div>
        <div class="nav-links">
            <a class="nav-link active" data-target="dashboard">Dashboard</a>
            <a href="index.html" class="nav-link">FrontEnd</a>
            <a class="nav-link" data-target="products">Products</a>
            <a class="nav-link" data-target="members">Members</a>
            <a class="nav-link" data-target="subscriptions">Subscriptions</a>
            <a class="nav-link" data-target="payment">Payment Gateway</a>
            <a class="nav-link" data-target="seo">SEO Settings</a>
            <a class="nav-link" data-target="language">Language</a>
            <a class="nav-link" data-target="smtp">SMTP Settings</a>
            <a class="nav-link" data-target="general">General</a>
            <a class="nav-link" data-target="security">Security</a>
            <a href="api.php?action=logout" class="nav-link" style="color:#f87171;">Logout</a>
        </div>
    </aside>

    <main class="main-content">
        <header class="topbar">
            <div><h2 style="font-size:1.2rem; font-weight:600;">Admin Panel</h2></div>
            <div style="display:flex; gap:15px; align-items:center;">
                <span style="font-weight:500; color:var(--text-light);">Welcome, Admin</span>
                <button class="theme-toggle" onclick="document.body.classList.toggle('dark-mode')">Toggle Dark Mode</button>
            </div>
        </header>

        <div class="content-area">
            <div id="dashboard" class="view-panel active">
                <div class="stats-grid">
                    <div class="stat-card c1">
                        <h3>Total Members</h3>
                        <div class="value" id="stat-members">0</div>
                    </div>
                    <div class="stat-card c2">
                        <h3>Active Products</h3>
                        <div class="value" id="stat-products">0</div>
                    </div>
                    <div class="stat-card c3">
                        <h3>Active Subs</h3>
                        <div class="value" id="stat-subs">0</div>
                    </div>
                    <div class="stat-card c4">
                        <h3>System Revenue</h3>
                        <div class="value" id="stat-rev">$0</div>
                    </div>
                </div>
                <div class="card">
                    <h2>System Overview</h2>
                    <p style="color:var(--text-light);">Welcome to the HuntBooking administrative interface. Navigate using the sidebar to manage core modules.</p>
                </div>
            </div>

            <div id="products" class="view-panel">
                <div class="card">
                    <div style="display:flex; justify-content:space-between; margin-bottom:20px;">
                        <h2>Manage Products</h2>
                        <button class="btn btn-grad" onclick="alert('Add product modal placeholder')">+ Add Product</button>
                    </div>
                    <table>
                        <thead><tr><th>ID</th><th>Title</th><th>Location</th><th>Price</th><th>Days</th><th>Action</th></tr></thead>
                        <tbody id="table-products"></tbody>
                    </table>
                </div>
            </div>

            <div id="members" class="view-panel">
                <div class="card">
                    <h2>Registered Members</h2>
                    <table>
                        <thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Action</th></tr></thead>
                        <tbody id="table-members"></tbody>
                    </table>
                </div>
            </div>

            <div id="subscriptions" class="view-panel">
                <div class="card">
                    <h2>Subscriptions</h2>
                    <table>
                        <thead><tr><th>ID</th><th>Member ID</th><th>Plan Type</th><th>Status</th><th>Action</th></tr></thead>
                        <tbody id="table-subs"></tbody>
                    </table>
                </div>
            </div>

            <div id="payment" class="view-panel">
                <div class="card" style="max-width: 600px;">
                    <h2>Payment Gateway Config</h2>
                    <div class="form-group">
                        <label>Stripe Public Key</label>
                        <input type="text" placeholder="pk_test_...">
                    </div>
                    <div class="form-group">
                        <label>Stripe Secret Key</label>
                        <input type="password" placeholder="sk_test_...">
                    </div>
                    <div class="form-group">
                        <label>Currency</label>
                        <select><option>USD</option><option>EUR</option><option>GBP</option></select>
                    </div>
                    <button class="btn btn-grad" onclick="showToast('Payment settings saved')">Save Settings</button>
                </div>
            </div>

            <div id="seo" class="view-panel">
                <div class="card" style="max-width: 600px;">
                    <h2>SEO Settings</h2>
                    <div class="form-group">
                        <label>Meta Title</label>
                        <input type="text" value="HuntBooking - The Premier Hunting SaaS">
                    </div>
                    <div class="form-group">
                        <label>Meta Description</label>
                        <input type="text" value="The premier booking destination for hunting adventures.">
                    </div>
                    <div class="form-group">
                        <label>Keywords</label>
                        <input type="text" value="hunting, safari, bookings, SaaS">
                    </div>
                    <button class="btn btn-grad" onclick="showToast('SEO settings saved')">Save SEO</button>
                </div>
            </div>

            <div id="language" class="view-panel">
                <div class="card" style="max-width: 600px;">
                    <h2>Language Preferences</h2>
                    <div class="form-group">
                        <label>Default Site Language</label>
                        <select><option>English (US)</option><option>Spanish</option><option>French</option></select>
                    </div>
                    <button class="btn btn-grad" onclick="showToast('Language updated')">Save Language</button>
                </div>
            </div>

            <div id="smtp" class="view-panel">
                <div class="card" style="max-width: 600px;">
                    <h2>SMTP Settings (Emails)</h2>
                    <div class="form-group"><label>SMTP Host</label><input type="text" placeholder="smtp.mailtrap.io"></div>
                    <div class="form-group"><label>SMTP Port</label><input type="text" placeholder="587"></div>
                    <div class="form-group"><label>SMTP User</label><input type="text"></div>
                    <div class="form-group"><label>SMTP Password</label><input type="password"></div>
                    <button class="btn btn-grad" onclick="showToast('SMTP connected securely')">Test & Save</button>
                </div>
            </div>

            <div id="general" class="view-panel">
                <div class="card" style="max-width: 600px;">
                    <h2>General Settings</h2>
                    <div class="form-group">
                        <label>Site Name</label>
                        <input type="text" id="set-sitename" value="HuntBooking">
                    </div>
                    <div class="form-group">
                        <label>Support Email</label>
                        <input type="email" value="support@huntbooking.org">
                    </div>
                    <button class="btn btn-grad" onclick="showToast('General Settings updated')">Save Changes</button>
                </div>
            </div>

            <div id="security" class="view-panel">
                <div class="card" style="max-width: 600px;">
                    <h2>Security & Auth</h2>
                    <div class="form-group"><label>Admin Password Reset</label><input type="password" placeholder="New Password"></div>
                    <div class="form-group"><label>Confirm Password</label><input type="password" placeholder="Confirm"></div>
                    <div class="form-group">
                        <label>Enable 2FA (Admin)</label>
                        <select><option>Disabled</option><option>Email OTP</option></select>
                    </div>
                    <button class="btn btn-danger" onclick="showToast('Security protocols updated')">Update Security</button>
                </div>
            </div>

        </div>
    </main>

    <div id="toast"></div>

    <script>
        // Sidebar Navigation Logic
        const links = document.querySelectorAll('.nav-link[data-target]');
        const panels = document.querySelectorAll('.view-panel');

        links.forEach(link => {
            link.addEventListener('click', () => {
                links.forEach(l => l.classList.remove('active'));
                panels.forEach(p => p.classList.remove('active'));
                
                link.classList.add('active');
                document.getElementById(link.dataset.target).classList.add('active');
            });
        });

        function showToast(msg) {
            const t = document.getElementById('toast');
            t.textContent = msg;
            t.style.background = '#10b981';
            t.style.opacity = 1;
            setTimeout(() => t.style.opacity = 0, 3000);
        }

        // Fetch Data from API
        async function loadDashboardData() {
            try {
                // Dashboard Stats
                const statRes = await fetch('api.php?action=dashboard_stats');
                const stats = await statRes.json();
                document.getElementById('stat-members').innerText = stats.total_members || 0;
                document.getElementById('stat-products').innerText = stats.total_products || 0;
                document.getElementById('stat-subs').innerText = stats.total_subs || 0;
                
                let rev = 0;
                stats.products_data.forEach(p => rev += parseFloat(p.price));
                document.getElementById('stat-rev').innerText = '$' + rev.toLocaleString();

                // Populate Products Table
                const pTable = document.getElementById('table-products');
                pTable.innerHTML = '';
                stats.products_data.forEach(p => {
                    pTable.innerHTML += `<tr><td>#${p.id}</td><td>${p.title}</td><td>${p.location}</td><td>$${p.price}</td><td>${p.days}</td>
                    <td><button class="btn btn-grad" style="padding:4px 8px; font-size:0.8rem;">Edit</button></td></tr>`;
                });

                // Populate Members Table
                const mTable = document.getElementById('table-members');
                mTable.innerHTML = '';
                stats.members_data.forEach(m => {
                    mTable.innerHTML += `<tr><td>#${m.id}</td><td>${m.name}</td><td>${m.email}</td><td>${m.phone}</td>
                    <td><button class="btn btn-grad" style="padding:4px 8px; font-size:0.8rem;">Edit</button></td></tr>`;
                });

                // Populate Subs Table
                const sTable = document.getElementById('table-subs');
                sTable.innerHTML = '';
                stats.subs_data.forEach(s => {
                    let badge = s.status === 'Active' ? 'background:#10b981;' : 'background:#f59e0b;';
                    sTable.innerHTML += `<tr><td>#${s.id}</td><td>Member #${s.member_id}</td><td>${s.plan}</td>
                    <td><span style="${badge} color:#fff; padding:3px 8px; border-radius:12px; font-size:0.8rem;">${s.status}</span></td>
                    <td><button class="btn btn-danger" style="padding:4px 8px; font-size:0.8rem;">Revoke</button></td></tr>`;
                });

                // Settings Setup
                if(stats.settings_data) {
                    document.getElementById('set-sitename').value = stats.settings_data.site_name;
                }

            } catch (err) {
                console.error("API Load Error", err);
            }
        }

        window.onload = loadDashboardData;
    </script>
</body>
</html>
Back to Directory=ceiIENDB`