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/climfinchain.com/public_html/dashboard.php

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: index.html");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clim Fin-Chain Admin Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --bg: #f0f2f5;
            --card-bg: #ffffff;
            --text-main: #1a1f1c;
            --text-muted: #556158;
            --border: #e0e0e0;
            --sidebar-bg: #ffffff;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
            --primary: #6C63FF;
            --primary-dark: #5A52D9;
            --secondary: #FF6584;
            --gradient-btn: linear-gradient(135deg, #6C63FF 0%, #5A52D9 100%);
            --gradient-btn-secondary: linear-gradient(135deg, #FF6584 0%, #FF3B5C 100%);
            --radius: 12px;
        }
        .dark-mode {
            --bg: #1a1f1c;
            --card-bg: #2a302d;
            --text-main: #f0f2f5;
            --text-muted: #b0b8b5;
            --border: #3a423e;
            --sidebar-bg: #2a302d;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-main); display: flex; min-height: 100vh; transition: 0.3s; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
        
        /* Sidebar */
        .sidebar { width: 260px; background: var(--sidebar-bg); padding: 20px; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000; border-right: 1px solid var(--border); overflow-y: auto; transition: 0.3s; }
        .sidebar .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--text-main); margin-bottom: 40px; padding: 0 10px; }
        .sidebar .logo span { color: var(--primary); }
        .sidebar ul { list-style: none; padding: 0; }
        .sidebar ul li { margin-bottom: 6px; }
        .sidebar ul li a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius); color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 14px; transition: 0.2s; cursor: pointer; }
        .sidebar ul li a:hover, .sidebar ul li a.active { background: var(--bg); color: var(--primary); }
        .sidebar ul li a i { width: 20px; text-align: center; font-size: 16px; }
        .sidebar ul li.divider { height: 1px; background: var(--border); margin: 20px 0; }
        .btn-logout { background: transparent; border: none; width: 100%; text-align: left; padding: 12px 16px; color: #ff4d4d; font-weight: 500; font-size: 14px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; gap: 14px; transition: 0.2s; }
        .btn-logout:hover { background: #ffebeb; }

        /* Main Content */
        .main-content { margin-left: 260px; flex: 1; padding: 20px 30px; padding-bottom: 100px; width: calc(100% - 260px); }
        .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 10px 0; background: var(--bg); position: sticky; top: 0; z-index: 100; }
        .topbar h2 { font-size: 24px; font-weight: 600; }
        .topbar-actions { display: flex; gap: 16px; align-items: center; }
        .topbar-actions button { background: var(--card-bg); border: 1px solid var(--border); padding: 8px 12px; border-radius: var(--radius); cursor: pointer; font-size: 16px; transition: 0.2s; color: var(--text-main); }
        .topbar-actions button:hover { background: var(--bg); }
        .hamburger { display: none; }

        /* Sections */
        .content-section { display: none; animation: fadeIn 0.3s ease; }
        .content-section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Cards */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .stat-card { background: var(--card-bg); padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); transition: 0.3s; }
        .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
        .stat-card .icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
        .stat-card .icon.primary { background: rgba(108, 99, 255, 0.1); color: var(--primary); }
        .stat-card .icon.secondary { background: rgba(255, 101, 132, 0.1); color: var(--secondary); }
        .stat-card .icon.green { background: rgba(0, 179, 126, 0.1); color: #00b37e; }
        .stat-card .icon.orange { background: rgba(255, 165, 0, 0.1); color: #ffa500; }
        .stat-card h3 { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
        .stat-card p { color: var(--text-muted); font-size: 14px; font-weight: 500; }
        .stat-card .trend { font-size: 12px; display: flex; align-items: center; gap: 4px; margin-top: 8px; }
        .stat-card .trend.up { color: #00b37e; }
        .stat-card .trend.down { color: #ff4d4d; }

        /* Tables, Forms, Buttons */
        .card-box { background: var(--card-bg); padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 24px; }
        .card-box h4 { font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
        .card-box .actions { display: flex; gap: 10px; }
        .card-box .actions input { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-main); font-family: inherit; }
        .btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; font-size: 14px; transition: 0.2s; color: #fff; }
        .btn-primary { background: var(--gradient-btn); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3); }
        .btn-secondary { background: var(--gradient-btn-secondary); }
        .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 101, 132, 0.3); }
        .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-main); }
        .btn-outline:hover { background: var(--bg); }
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
        th { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
        tr:hover { background: var(--bg); }
        .badge { padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; }
        .badge.active { background: rgba(0, 179, 126, 0.1); color: #00b37e; }
        .badge.inactive { background: rgba(255, 77, 77, 0.1); color: #ff4d4d; }
        .badge.pending { background: rgba(255, 165, 0, 0.1); color: #ffa500; }

        /* Form Styles */
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-main); font-family: inherit; font-size: 14px; transition: 0.2s; }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; transition: 0.4s; border-radius: 28px; }
        .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; transition: 0.4s; border-radius: 50%; }
        input:checked + .slider { background: var(--primary); }
        input:checked + .slider:before { transform: translateX(22px); }
        .settings-toggle { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
        .settings-toggle:last-child { border-bottom: none; }

        /* Modals */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
        .modal-overlay.active { display: flex; }
        .modal-box { background: var(--card-bg); padding: 30px; border-radius: var(--radius); width: 90%; max-width: 500px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); position: relative; max-height: 90vh; overflow-y: auto; }
        .modal-box .close { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: var(--text-muted); transition: 0.2s; }
        .modal-box .close:hover { color: var(--text-main); }

        /* Pagination, Loader, Toast */
        .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
        .pagination button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); cursor: pointer; transition: 0.2s; }
        .pagination button:hover { background: var(--bg); }
        .loader { border: 4px solid var(--border); border-top: 4px solid var(--primary); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; display: none; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        #toast-container { position: fixed; top: 20px; right: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; }
        .toast { padding: 16px 24px; border-radius: 8px; color: #fff; font-weight: 500; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: slideInRight 0.4s ease; }
        .toast.success { background: #00b37e; }
        .toast.error { background: #ff4d4d; }
        .toast.info { background: #3399ff; }
        @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

        /* Responsive */
        @media (max-width: 992px) {
            .sidebar { transform: translateX(-100%); width: 280px; }
            .sidebar.open { transform: translateX(0); }
            .main-content { margin-left: 0; width: 100%; padding: 20px; }
            .hamburger { display: block; }
            .form-row { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
        }
    </style>
</head>
<body>
    <div class="sidebar" id="sidebar">
        <div class="logo"><i class="fas fa-leaf" style="color:#00b37e; font-size:24px;"></i> Clim Fin<span style="color:#00b37e;">Chain</span></div>
        <ul>
            <li><a class="active" onclick="switchView('section-dashboard')"><i class="fas fa-th-large"></i> Dashboard</a></li>
            <li><a onclick="window.location.href='index.html'"><i class="fas fa-globe"></i> FrontEnd</a></li>
            <li class="divider"></li>
            <li><a onclick="switchView('section-products')"><i class="fas fa-boxes"></i> Products</a></li>
            <li><a onclick="switchView('section-members')"><i class="fas fa-users"></i> Members</a></li>
            <li><a onclick="switchView('section-subscriptions')"><i class="fas fa-credit-card"></i> Subscriptions</a></li>
            <li><a onclick="switchView('section-carbon')"><i class="fas fa-recycle"></i> Carbon Credits</a></li>
            <li><a onclick="switchView('section-marketplace')"><i class="fas fa-store"></i> Marketplace</a></li>
            <li class="divider"></li>
            <li><a onclick="switchView('section-payment')"><i class="fas fa-wallet"></i> Payment Gateway</a></li>
            <li><a onclick="switchView('section-seo')"><i class="fas fa-search"></i> SEO Settings</a></li>
            <li><a onclick="switchView('section-language')"><i class="fas fa-language"></i> Language</a></li>
            <li><a onclick="switchView('section-smtp')"><i class="fas fa-envelope"></i> SMTP</a></li>
            <li><a onclick="switchView('section-general')"><i class="fas fa-cogs"></i> General</a></li>
            <li><a onclick="switchView('section-security')"><i class="fas fa-shield-alt"></i> Security</a></li>
            <li class="divider"></li>
            <li><button class="btn-logout" onclick="location.href='api.php?action=logout'"><i class="fas fa-sign-out-alt"></i> Logout</button></li>
        </ul>
    </div>

    <div class="main-content">
        <div class="topbar">
            <div style="display:flex; align-items:center; gap:20px;">
                <button class="hamburger" onclick="document.getElementById('sidebar').classList.toggle('open')"><i class="fas fa-bars"></i></button>
                <h2 id="page-title">Dashboard</h2>
            </div>
            <div class="topbar-actions">
                <button onclick="toggleDarkMode()"><i class="fas fa-moon"></i></button>
                <button><i class="fas fa-bell"></i></button>
                <button><i class="fas fa-user-circle"></i></button>
            </div>
        </div>

        <!-- SECTION 1: DASHBOARD -->
        <div id="section-dashboard" class="content-section active">
            <div class="stats-grid" id="stats-grid">
                <div class="stat-card"><div class="icon primary"><i class="fas fa-boxes"></i></div><h3 id="stat-products">0</h3><p>Total Products</p><div class="trend up"><i class="fas fa-arrow-up"></i> 12% this month</div></div>
                <div class="stat-card"><div class="icon secondary"><i class="fas fa-users"></i></div><h3 id="stat-members">0</h3><p>Total Members</p><div class="trend up"><i class="fas fa-arrow-up"></i> 8% this month</div></div>
                <div class="stat-card"><div class="icon green"><i class="fas fa-user-check"></i></div><h3 id="stat-subs">0</h3><p>Active Subs</p><div class="trend up"><i class="fas fa-arrow-up"></i> 5% this month</div></div>
                <div class="stat-card"><div class="icon orange"><i class="fas fa-dollar-sign"></i></div><h3 id="stat-revenue">$0</h3><p>Total Revenue</p><div class="trend down"><i class="fas fa-arrow-down"></i> 2% this month</div></div>
            </div>
            <div class="card-box"><h4>Analytics Overview</h4><div style="height: 200px;"><canvas id="dashboardChart"></canvas></div></div>
            <div class="card-box"><h4>Recent Activities</h4><table><thead><tr><th>User</th><th>Action</th><th>Date</th></tr></thead><tbody id="recent-activities"><tr><td colspan="3" style="text-align:center; color:var(--text-muted);">Loading...</td></tr></tbody></table></div>
        </div>

        <!-- SECTION 2: PRODUCTS -->
        <div id="section-products" class="content-section">
            <div class="card-box"><h4>Manage Products <div class="actions"><input type="text" placeholder="Search..." id="search-products"><button class="btn btn-primary" onclick="openModal('productModal')">+ Add Product</button></div></h4>
                <div class="loader" id="loader-products"></div>
                <table><thead><tr><th>ID</th><th>Name</th><th>Category</th><th>Price</th><th>Status</th><th>Actions</th></tr></thead><tbody id="products-tbody"></tbody></table>
                <div class="pagination"><button>Prev</button><button>1</button><button>Next</button></div>
            </div>
        </div>

        <!-- SECTION 3: MEMBERS -->
        <div id="section-members" class="content-section">
            <div class="card-box"><h4>Manage Members <div class="actions"><input type="text" placeholder="Search..." id="search-members"><button class="btn btn-primary" onclick="openModal('memberModal')">+ Add Member</button></div></h4>
                <div class="loader" id="loader-members"></div>
                <table><thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Status</th><th>Joined</th><th>Actions</th></tr></thead><tbody id="members-tbody"></tbody></table>
                <div class="pagination"><button>Prev</button><button>1</button><button>Next</button></div>
            </div>
        </div>

        <!-- SECTION 4: SUBSCRIPTIONS -->
        <div id="section-subscriptions" class="content-section">
            <div class="card-box"><h4>Manage Subscriptions <div class="actions"><button class="btn btn-primary" onclick="openModal('subModal')">+ New Subscription</button></div></h4>
                <div class="loader" id="loader-subs"></div>
                <table><thead><tr><th>User</th><th>Plan</th><th>Start</th><th>End</th><th>Status</th><th>Actions</th></tr></thead><tbody id="subs-tbody"></tbody></table>
                <div class="pagination"><button>Prev</button><button>1</button><button>Next</button></div>
            </div>
        </div>

        <!-- SECTION 5: CARBON CREDITS -->
        <div id="section-carbon" class="content-section">
            <div class="stats-grid" style="grid-template-columns: 1fr 1fr 1fr;">
                <div class="stat-card"><div class="icon green"><i class="fas fa-tree"></i></div><h3>12,450</h3><p>Total Credits Issued</p></div>
                <div class="stat-card"><div class="icon primary"><i class="fas fa-check-circle"></i></div><h3>8,220</h3><p>Verified Retirements</p></div>
                <div class="stat-card"><div class="icon orange"><i class="fas fa-clock"></i></div><h3>4,230</h3><p>Pending Verification</p></div>
            </div>
            <div class="card-box"><h4>Credit Batches <div class="actions"><button class="btn btn-primary">+ Issue Credits</button></div></h4>
                <table><thead><tr><th>Batch ID</th><th>Project</th><th>Tonnes</th><th>Vintage</th><th>Price/Tonne</th><th>Status</th></tr></thead><tbody>
                    <tr><td>CFC-001</td><td>Amazon Rainforest</td><td>500</td><td>2025</td><td>$12.50</td><td><span class="badge active">Active</span></td></tr>
                    <tr><td>CFC-002</td><td>Solar Farm India</td><td>1200</td><td>2026</td><td>$10.00</td><td><span class="badge pending">Pending</span></td></tr>
                    <tr><td>CFC-003</td><td>Wind Power Kenya</td><td>800</td><td>2024</td><td>$15.00</td><td><span class="badge active">Active</span></td></tr>
                </tbody></table>
            </div>
        </div>

        <!-- SECTION 6: MARKETPLACE -->
        <div id="section-marketplace" class="content-section">
            <div class="card-box"><h4>Marketplace Listings <div class="actions"><select><option>Filter by Type</option><option>Buy</option><option>Sell</option></select><button class="btn btn-secondary">+ Create Listing</button></div></h4>
                <table><thead><tr><th>Listing ID</th><th>User</th><th>Type</th><th>Credits</th><th>Price</th><th>Status</th><th>Actions</th></tr></thead><tbody>
                    <tr><td>L-101</td><td>Green Corp</td><td><span class="badge active">Buy</span></td><td>1,000</td><td>$14.00</td><td><span class="badge active">Live</span></td><td><i class="fas fa-edit" style="cursor:pointer; color:var(--primary);"></i></td></tr>
                    <tr><td>L-102</td><td>Eco Energy</td><td><span class="badge pending">Sell</span></td><td>500</td><td>$13.50</td><td><span class="badge inactive">Closed</span></td><td><i class="fas fa-edit" style="cursor:pointer; color:var(--primary);"></i></td></tr>
                </tbody></table>
            </div>
        </div>

        <!-- SECTION 7: PAYMENT GATEWAY -->
        <div id="section-payment" class="content-section">
            <div class="card-box"><h4>Payment Configuration</h4><form id="paymentForm"><div class="form-row"><div class="form-group"><label>API Key</label><input type="text" placeholder="sk_test_..." required></div><div class="form-group"><label>Secret Key</label><input type="text" placeholder="sk_live_..." required></div></div><div class="form-row"><div class="form-group"><label>Currency</label><select><option>USD</option><option>EUR</option><option>GBP</option></select></div><div class="form-group"><label>Sandbox Mode</label><div class="settings-toggle"><span>Enable Sandbox</span><label class="toggle-switch"><input type="checkbox"><span class="slider"></span></label></div></div></div><button class="btn btn-primary" type="submit">Save Configuration</button></form></div>
        </div>

        <!-- SECTION 8: SEO SETTINGS -->
        <div id="section-seo" class="content-section">
            <div class="card-box"><h4>SEO Optimization</h4><form id="seoForm"><div class="form-group"><label>Site Title</label><input type="text" value="Clim Fin-Chain - Carbon Credit Marketplace"></div><div class="form-group"><label>Meta Description</label><textarea rows="2">Clim Fin-Chain provides transparent, traceable, and instant carbon credit trading infrastructure for global markets.</textarea></div><div class="form-group"><label>Meta Keywords</label><input type="text" value="carbon credits, climate finance, carbon trading, sustainability, offsets"></div><div class="form-group"><label>OG Image URL</label><input type="text" placeholder="https://example.com/og-image.png"></div><button class="btn btn-primary" type="submit">Save SEO Settings</button></form></div>
        </div>

        <!-- SECTION 9: LANGUAGE -->
        <div id="section-language" class="content-section">
            <div class="card-box"><h4>Language Settings</h4><form id="langForm"><div class="form-group"><label>Default Language</label><select><option>English (US)</option><option>Spanish</option><option>French</option><option>German</option></select></div><div class="form-group"><label>Translation Strings (JSON)</label><textarea rows="5" style="font-family: monospace;">{"dashboard":"Dashboard","products":"Products","members":"Members"}</textarea></div><button class="btn btn-primary" type="submit">Save Language Settings</button></form></div>
        </div>

        <!-- SECTION 10: SMTP -->
        <div id="section-smtp" class="content-section">
            <div class="card-box"><h4>SMTP Configuration</h4><form id="smtpForm"><div class="form-row"><div class="form-group"><label>SMTP Host</label><input type="text" placeholder="smtp.gmail.com" required></div><div class="form-group"><label>Port</label><input type="number" placeholder="587" required></div></div><div class="form-row"><div class="form-group"><label>Username</label><input type="text" placeholder="admin@climfinchain.com" required></div><div class="form-group"><label>Password</label><input type="password" placeholder="••••••••" required></div></div><div class="form-group"><label>Encryption</label><select><option>TLS</option><option>SSL</option><option>None</option></select></div><button class="btn btn-primary" type="submit">Test & Save SMTP</button></form></div>
        </div>

        <!-- SECTION 11: GENERAL -->
        <div id="section-general" class="content-section">
            <div class="card-box"><h4>General Settings</h4><form id="generalForm"><div class="form-row"><div class="form-group"><label>Site Name</label><input type="text" value="Clim Fin-Chain"></div><div class="form-group"><label>Site Address</label><input type="text" value="123 Green Tech Avenue, San Francisco, CA"></div></div><div class="form-row"><div class="form-group"><label>Support Email</label><input type="email" value="support@climfinchain.io"></div><div class="form-group"><label>Contact Phone</label><input type="text" value="+1 (555) 123-4567"></div></div><div class="form-group"><label>Footer Text</label><input type="text" value="© 2026 Clim Fin-Chain. All rights reserved."></div><button class="btn btn-primary" type="submit">Update General Settings</button></form></div>
        </div>

        <!-- SECTION 12: SECURITY -->
        <div id="section-security" class="content-section">
            <div class="card-box"><h4>Security Settings</h4><form id="securityForm"><div class="settings-toggle"><span>Two-Factor Authentication (2FA)</span><label class="toggle-switch"><input type="checkbox"><span class="slider"></span></label></div><div class="settings-toggle"><span>IP Whitelisting</span><label class="toggle-switch"><input type="checkbox"><span class="slider"></span></label></div><div class="form-group"><label>Max Login Attempts</label><input type="number" value="5" style="width:100px;"></div><div class="form-group"><label>Session Timeout (Minutes)</label><input type="number" value="60" style="width:100px;"></div><button class="btn btn-primary" type="submit">Update Security Policies</button></form></div>
        </div>
    </div>

    <!-- MODALS -->
    <div id="productModal" class="modal-overlay"><div class="modal-box"><span class="close" onclick="closeModal('productModal')">×</span><h3>Add Product</h3><form><div class="form-group"><label>Product Name</label><input type="text" required></div><div class="form-group"><label>Category</label><select><option>Carbon Credits</option><option>Marketplace Service</option></select></div><div class="form-group"><label>Price</label><input type="number" step="0.01" required></div><div class="form-group"><label>Status</label><select><option>Active</option><option>Inactive</option></select></div><button class="btn btn-primary" type="submit">Save Product</button></form></div></div>

    <div id="memberModal" class="modal-overlay"><div class="modal-box"><span class="close" onclick="closeModal('memberModal')">×</span><h3>Add Member</h3><form id="memberModalForm"><div class="form-group"><label>Full Name</label><input type="text" id="m_name" required></div><div class="form-group"><label>Email Address</label><input type="email" id="m_email" required></div><div class="form-group"><label>Phone Number</label><input type="text" id="m_phone" pattern="[0-9]+" required></div><div class="form-group"><label>Password</label><input type="password" id="m_pass" required></div><button class="btn btn-primary" type="submit">Add Member</button></form></div></div>

    <div id="subModal" class="modal-overlay"><div class="modal-box"><span class="close" onclick="closeModal('subModal')">×</span><h3>Add Subscription</h3><form><div class="form-group"><label>User Email</label><input type="email" required></div><div class="form-group"><label>Plan Name</label><select><option>Basic</option><option>Pro</option><option>Enterprise</option></select></div><div class="form-row"><div class="form-group"><label>Start Date</label><input type="date" required></div><div class="form-group"><label>End Date</label><input type="date" required></div></div><button class="btn btn-primary" type="submit">Create Subscription</button></form></div></div>

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

    <script>
        let chartInstance = null;

        document.addEventListener('DOMContentLoaded', function() {
            fetchDashboardStats();
            fetchProducts();
            fetchMembers();
            fetchSubscriptions();
            setupFormListeners();
        });

        function switchView(id) {
            document.querySelectorAll('.content-section').forEach(el => el.classList.remove('active'));
            document.getElementById(id).classList.add('active');
            document.getElementById('page-title').innerText = document.querySelector(`[onclick="switchView('${id}')"]`).innerText.trim();
            document.getElementById('sidebar').classList.remove('open');
            if(id === 'section-dashboard') setTimeout(renderChart, 300);
        }

        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
            const icon = document.querySelector('.topbar-actions button:first-child i');
            icon.classList.toggle('fa-moon');
            icon.classList.toggle('fa-sun');
        }

        function openModal(id) { document.getElementById(id).classList.add('active'); }
        function closeModal(id) { document.getElementById(id).classList.remove('active'); }

        function showToast(msg, type = 'info') {
            const c = document.getElementById('toast-container');
            const t = document.createElement('div');
            t.className = `toast ${type}`;
            t.innerText = msg;
            c.appendChild(t);
            setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 4000);
        }

        function fetchDashboardStats() {
            fetch('api.php?action=dashboard_stats')
                .then(r => r.json())
                .then(d => {
                    if(d.success) {
                        document.getElementById('stat-products').innerText = d.data.products;
                        document.getElementById('stat-members').innerText = d.data.members;
                        document.getElementById('stat-subs').innerText = d.data.subscriptions;
                        document.getElementById('stat-revenue').innerText = '$' + d.data.revenue;
                        renderChart();
                    }
                });
        }

        function renderChart() {
            const ctx = document.getElementById('dashboardChart').getContext('2d');
            if(chartInstance) chartInstance.destroy();
            chartInstance = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [{
                        label: 'Revenue',
                        data: [12000, 15000, 18000, 22000, 19000, 24000],
                        borderColor: '#6C63FF',
                        backgroundColor: 'rgba(108, 99, 255, 0.1)',
                        fill: true,
                        tension: 0.4,
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { grid: { display: false } } }
                }
            });
        }

        function fetchProducts() {
            document.getElementById('loader-products').style.display = 'block';
            fetch('api.php?action=products')
                .then(r => r.json()).then(d => {
                    document.getElementById('loader-products').style.display = 'none';
                    const tb = document.getElementById('products-tbody');
                    if(d.success && d.data.length) {
                        tb.innerHTML = d.data.map(p => `<tr><td>${p.id}</td><td>${p.name}</td><td>${p.category}</td><td>$${p.price}</td><td><span class="badge ${p.status.toLowerCase()}">${p.status}</span></td><td><i class="fas fa-edit" style="color:var(--primary);cursor:pointer;" onclick="showToast('Edit Product','info')"></i> <i class="fas fa-trash" style="color:#ff4d4d;cursor:pointer;" onclick="showToast('Deleted','error')"></i></td></tr>`).join('');
                    } else tb.innerHTML = '<tr><td colspan="6" style="text-align:center;">No products found.</td></tr>';
                });
        }

        function fetchMembers() {
            document.getElementById('loader-members').style.display = 'block';
            fetch('api.php?action=members')
                .then(r => r.json()).then(d => {
                    document.getElementById('loader-members').style.display = 'none';
                    const tb = document.getElementById('members-tbody');
                    if(d.success && d.data.length) {
                        tb.innerHTML = d.data.map(m => `<tr><td>${m.id}</td><td>${m.name}</td><td>${m.email}</td><td>${m.phone}</td><td><span class="badge ${m.status.toLowerCase()}">${m.status}</span></td><td>${m.joined}</td><td><i class="fas fa-edit" style="color:var(--primary);cursor:pointer;" onclick="openEditMember(${m.id})"></i> <i class="fas fa-trash" style="color:#ff4d4d;cursor:pointer;" onclick="deleteMember(${m.id})"></i></td></tr>`).join('');
                    } else tb.innerHTML = '<tr><td colspan="7" style="text-align:center;">No members found.</td></tr>';
                });
        }

        function fetchSubscriptions() {
            document.getElementById('loader-subs').style.display = 'block';
            fetch('api.php?action=subscriptions')
                .then(r => r.json()).then(d => {
                    document.getElementById('loader-subs').style.display = 'none';
                    const tb = document.getElementById('subs-tbody');
                    if(d.success && d.data.length) {
                        tb.innerHTML = d.data.map(s => `<tr><td>${s.user}</td><td>${s.plan}</td><td>${s.start}</td><td>${s.end}</td><td><span class="badge ${s.status.toLowerCase()}">${s.status}</span></td><td><i class="fas fa-edit" style="color:var(--primary);cursor:pointer;"></i></td></tr>`).join('');
                    } else tb.innerHTML = '<tr><td colspan="6" style="text-align:center;">No subscriptions found.</td></tr>';
                });
        }

        function setupFormListeners() {
            document.getElementById('memberModalForm').onsubmit = function(e) {
                e.preventDefault();
                fetch('api.php?action=register', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({name: document.getElementById('m_name').value, email: document.getElementById('m_email').value, phone: document.getElementById('m_phone').value, password: document.getElementById('m_pass').value})
                }).then(r => r.json()).then(d => {
                    if(d.success) { showToast('Member added!','success'); closeModal('memberModal'); fetchMembers(); }
                    else showToast(d.message,'error');
                });
            };
        }
    </script>
</body>
</html>
Back to Directory=ceiIENDB`