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

<?php
session_start();
if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
    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>APIws02 Admin Dashboard</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #4a6cf7;
            --secondary: #6c5ce7;
            --bg-light: #f4f6f9;
            --sidebar-width: 250px;
            --header-height: 60px;
        }
        * { box-sizing: border-box; }
        body {
            font-family: 'Roboto', sans-serif;
            background: var(--bg-light);
            overflow-x: hidden;
        }
        /* Dark mode */
        body.dark {
            --bg-light: #1a1d21;
            --text-color: #e0e0e0;
            background: #1a1d21;
            color: #e0e0e0;
        }
        body.dark .sidebar { background: #2c2f33; }
        body.dark .card { background: #2c2f33; color: #e0e0e0; border-color: #444; }
        body.dark .table { color: #e0e0e0; }
        body.dark .table-striped tbody tr:nth-of-type(odd) { background: #3a3d42; }
        body.dark .modal-content { background: #2c2f33; color: #e0e0e0; }
        body.dark .form-control { background: #3a3d42; color: #e0e0e0; border-color: #555; }
        body.dark .btn-close { filter: invert(1); }
        /* Sidebar */
        .sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            background: #ffffff;
            box-shadow: 2px 0 5px rgba(0,0,0,0.05);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            transition: all 0.3s;
            overflow-y: auto;
        }
        body.dark .sidebar { background: #2c2f33; box-shadow: 2px 0 5px rgba(0,0,0,0.3); }
        .sidebar-brand {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        body.dark .sidebar-brand { border-bottom-color: #444; }
        .sidebar-brand img { max-width: 120px; }
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar-menu li {
            border-bottom: 1px solid #f0f0f0;
        }
        body.dark .sidebar-menu li { border-bottom-color: #444; }
        .sidebar-menu li a {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: #555;
            text-decoration: none;
            transition: 0.2s;
            cursor: pointer;
        }
        body.dark .sidebar-menu li a { color: #ccc; }
        .sidebar-menu li a:hover,
        .sidebar-menu li a.active {
            background: var(--primary);
            color: #fff;
        }
        .sidebar-menu li a i {
            width: 25px;
            margin-right: 10px;
        }
        .sidebar-menu li a .badge {
            margin-left: auto;
        }
        /* Main content */
        .main-content {
            margin-left: var(--sidebar-width);
            padding: 20px;
            min-height: 100vh;
            transition: all 0.3s;
        }
        /* Header */
        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
        }
        body.dark .topbar { background: #2c2f33; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .topbar .hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }
        .topbar .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .topbar .user-info .dark-toggle {
            cursor: pointer;
            font-size: 1.2rem;
        }
        /* Cards */
        .stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            height: 100%;
        }
        body.dark .stat-card { background: #2c2f33; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .stat-card .icon {
            font-size: 2.5rem;
            color: var(--primary);
            opacity: 0.8;
        }
        .stat-card h3 { font-weight: 700; margin-bottom: 0; }
        .stat-card p { color: #888; margin-bottom: 0; }
        body.dark .stat-card p { color: #aaa; }
        /* Section containers */
        .section-view { display: none; }
        .section-view.active { display: block; }
        /* Table responsive */
        .table-responsive { overflow-x: auto; }
        /* Pagination */
        .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
        /* Modal */
        .modal-header { background: var(--primary); color: #fff; }
        body.dark .modal-header { background: #4a6cf7; }
        .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; }
        .btn-primary:hover { background: linear-gradient(135deg, var(--secondary), var(--primary)); }
        /* News Ticker */
        .news-ticker {
            background: #fff;
            border-radius: 8px;
            padding: 10px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
            overflow: hidden;
            white-space: nowrap;
        }
        body.dark .news-ticker { background: #2c2f33; }
        .news-ticker .ticker-text {
            display: inline-block;
            animation: scrollTicker 20s linear infinite;
        }
        @keyframes scrollTicker {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        /* Mobile responsive */
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .main-content { margin-left: 0; }
            .topbar .hamburger { display: block; }
        }
        /* Misc */
        .badge-soft { background: #e9ecef; color: #333; }
        body.dark .badge-soft { background: #444; color: #ddd; }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
    </style>
</head>
<body>
    <div class="toast-container"></div>

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-brand">
            <img src="apiwso2.png" alt="APIws02" style="max-height:50px;">
            <h5 class="mt-2">APIws02 Admin</h5>
        </div>
        <ul class="sidebar-menu">
            <li><a class="active" data-section="dashboard"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
            <li><a data-section="frontend"><i class="fas fa-home"></i> FrontEnd</a></li>
            <li><a data-section="products"><i class="fas fa-cubes"></i> Products</a></li>
            <li><a data-section="members"><i class="fas fa-users"></i> Members</a></li>
            <li><a data-section="subscriptions"><i class="fas fa-credit-card"></i> Subscriptions</a></li>
            <li><a data-section="payment"><i class="fas fa-money-bill-wave"></i> Payment Gateway</a></li>
            <li><a data-section="seo"><i class="fas fa-search"></i> SEO Settings</a></li>
            <li><a data-section="language"><i class="fas fa-language"></i> Language</a></li>
            <li><a data-section="smtp"><i class="fas fa-envelope"></i> SMTP</a></li>
            <li><a data-section="general"><i class="fas fa-cog"></i> General</a></li>
            <li><a data-section="security"><i class="fas fa-shield-alt"></i> Security</a></li>
            <li><a data-section="api-gateway"><i class="fas fa-network-wired"></i> API Gateway</a></li>
            <li><a data-section="mft"><i class="fas fa-file-alt"></i> MFT Services</a></li>
            <li><a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content" id="mainContent">
        <!-- Topbar -->
        <div class="topbar">
            <div class="hamburger" onclick="toggleSidebar()"><i class="fas fa-bars"></i></div>
            <div class="user-info">
                <span class="dark-toggle" onclick="toggleDarkMode()"><i class="fas fa-moon"></i></span>
                <span>Welcome, Admin</span>
                <span class="badge bg-primary"><?php echo htmlspecialchars($_SESSION['email'] ?? ''); ?></span>
            </div>
        </div>

        <!-- News Ticker -->
        <div class="news-ticker">
            <div class="ticker-text">
                <i class="fas fa-bullhorn me-2"></i> APIws02 named Leader in 2026 Gartner Magic Quadrant | New Amplify Fusion release | Upcoming webinar: AI Integration
            </div>
        </div>

        <!-- All sections -->
        <div id="section-dashboard" class="section-view active">
            <!-- Stats Cards -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p>Total Products</p>
                                <h3 id="totalProducts">0</h3>
                            </div>
                            <i class="fas fa-cubes icon"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p>Total Members</p>
                                <h3 id="totalMembers">0</h3>
                            </div>
                            <i class="fas fa-users icon"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p>Active Subs</p>
                                <h3 id="totalSubs">0</h3>
                            </div>
                            <i class="fas fa-credit-card icon"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p>Revenue</p>
                                <h3 id="totalRevenue">$0</h3>
                            </div>
                            <i class="fas fa-dollar-sign icon"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts -->
            <div class="row mb-4">
                <div class="col-md-6 mb-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5>Members Growth</h5>
                            <canvas id="membersChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5>Revenue Overview</h5>
                            <canvas id="revenueChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Members Table -->
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Recent Members</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="recentMembersTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Joined</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- FrontEnd section -->
        <div id="section-frontend" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>FrontEnd Management</h4>
                    <p>Manage your website frontend content. <a href="index.html" target="_blank">Visit Website</a></p>
                    <hr>
                    <div class="mb-3">
                        <label>Homepage Title</label>
                        <input type="text" class="form-control" id="feTitle" value="APIws02 – Data Integration, Content Collaboration">
                    </div>
                    <div class="mb-3">
                        <label>Hero Headline</label>
                        <textarea class="form-control" id="feHero" rows="2">APIws02 named a winner of 2025 EMEA AWS Partner Awards</textarea>
                    </div>
                    <button class="btn btn-primary" onclick="saveFrontend()">Save Changes</button>
                </div>
            </div>
        </div>

        <!-- Products section -->
        <div id="section-products" class="section-view">
            <div class="d-flex justify-content-between mb-3">
                <h4>Products</h4>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal"><i class="fas fa-plus"></i> Add Product</button>
            </div>
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="productsTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Price</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <nav><ul class="pagination" id="productsPagination"></ul></nav>
                </div>
            </div>
        </div>

        <!-- Members section -->
        <div id="section-members" class="section-view">
            <div class="d-flex justify-content-between mb-3">
                <h4>Members</h4>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#memberModal"><i class="fas fa-plus"></i> Add Member</button>
            </div>
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="membersTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <nav><ul class="pagination" id="membersPagination"></ul></nav>
                </div>
            </div>
        </div>

        <!-- Subscriptions section -->
        <div id="section-subscriptions" class="section-view">
            <div class="d-flex justify-content-between mb-3">
                <h4>Subscriptions</h4>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#subscriptionModal"><i class="fas fa-plus"></i> Add Subscription</button>
            </div>
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="subscriptionsTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Member</th>
                                    <th>Plan</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <nav><ul class="pagination" id="subscriptionsPagination"></ul></nav>
                </div>
            </div>
        </div>

        <!-- Payment Gateway section -->
        <div id="section-payment" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>Payment Gateway Settings</h4>
                    <form id="paymentForm">
                        <div class="mb-3">
                            <label>Gateway Provider</label>
                            <select class="form-select" name="provider">
                                <option value="stripe">Stripe</option>
                                <option value="paypal">PayPal</option>
                                <option value="razorpay">Razorpay</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>API Key</label>
                            <input type="text" class="form-control" name="api_key" placeholder="Enter API Key">
                        </div>
                        <div class="mb-3">
                            <label>Secret Key</label>
                            <input type="password" class="form-control" name="secret_key" placeholder="Enter Secret Key">
                        </div>
                        <button type="submit" class="btn btn-primary">Save Settings</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- SEO Settings section -->
        <div id="section-seo" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>SEO Settings</h4>
                    <form id="seoForm">
                        <div class="mb-3">
                            <label>Meta Title</label>
                            <input type="text" class="form-control" name="meta_title" value="APIws02 – Data Integration, Content Collaboration">
                        </div>
                        <div class="mb-3">
                            <label>Meta Description</label>
                            <textarea class="form-control" name="meta_description" rows="2">Unlock your enterprise data to open everything: new digital experiences, new offerings, and new markets.</textarea>
                        </div>
                        <div class="mb-3">
                            <label>Keywords</label>
                            <input type="text" class="form-control" name="keywords" value="API Gateway, MFT Services, B2B Solutions, APIws02">
                        </div>
                        <button type="submit" class="btn btn-primary">Save SEO</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Language section -->
        <div id="section-language" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>Language Settings</h4>
                    <form id="languageForm">
                        <div class="mb-3">
                            <label>Default Language</label>
                            <select class="form-select" name="default_lang">
                                <option value="en">English</option>
                                <option value="fr">French</option>
                                <option value="de">German</option>
                                <option value="es">Spanish</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Enable Multi-language?</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="multi_lang" checked>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Language</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- SMTP section -->
        <div id="section-smtp" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>SMTP Settings</h4>
                    <form id="smtpForm">
                        <div class="mb-3">
                            <label>Host</label>
                            <input type="text" class="form-control" name="host" placeholder="smtp.gmail.com">
                        </div>
                        <div class="mb-3">
                            <label>Port</label>
                            <input type="number" class="form-control" name="port" value="587">
                        </div>
                        <div class="mb-3">
                            <label>Username</label>
                            <input type="text" class="form-control" name="username" placeholder="email@example.com">
                        </div>
                        <div class="mb-3">
                            <label>Password</label>
                            <input type="password" class="form-control" name="password" placeholder="******">
                        </div>
                        <div class="mb-3">
                            <label>Encryption</label>
                            <select class="form-select" name="encryption">
                                <option value="tls">TLS</option>
                                <option value="ssl">SSL</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Save SMTP</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- General section -->
        <div id="section-general" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>General Settings</h4>
                    <form id="generalForm">
                        <div class="mb-3">
                            <label>Site Name</label>
                            <input type="text" class="form-control" name="site_name" value="APIws02">
                        </div>
                        <div class="mb-3">
                            <label>Currency</label>
                            <select class="form-select" name="currency">
                                <option value="USD">USD ($)</option>
                                <option value="EUR">EUR (€)</option>
                                <option value="GBP">GBP (£)</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Timezone</label>
                            <select class="form-select" name="timezone">
                                <option value="America/New_York">America/New_York</option>
                                <option value="Europe/London">Europe/London</option>
                                <option value="Asia/Kolkata">Asia/Kolkata</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Save General</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Security section -->
        <div id="section-security" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>Security Settings</h4>
                    <form id="securityForm">
                        <div class="mb-3">
                            <label>Two-Factor Authentication</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="2fa">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label>Max Login Attempts</label>
                            <input type="number" class="form-control" name="max_attempts" value="5">
                        </div>
                        <div class="mb-3">
                            <label>Session Timeout (minutes)</label>
                            <input type="number" class="form-control" name="session_timeout" value="30">
                        </div>
                        <button type="submit" class="btn btn-primary">Save Security</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- API Gateway section -->
        <div id="section-api-gateway" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>API Gateway Management</h4>
                    <p>Manage your API gateways and policies.</p>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr><th>Gateway Name</th><th>Status</th><th>Actions</th></tr>
                            </thead>
                            <tbody>
                                <tr><td>Amplify AI Gateway</td><td><span class="badge bg-success">Active</span></td><td><button class="btn btn-sm btn-outline-primary">Configure</button></td></tr>
                                <tr><td>API Management</td><td><span class="badge bg-success">Active</span></td><td><button class="btn btn-sm btn-outline-primary">Configure</button></td></tr>
                                <tr><td>Open Banking Gateway</td><td><span class="badge bg-warning">Maintenance</span></td><td><button class="btn btn-sm btn-outline-primary">Configure</button></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- MFT Services section -->
        <div id="section-mft" class="section-view">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>Managed File Transfer Services</h4>
                    <p>Monitor and manage MFT transfers.</p>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr><th>Transfer ID</th><th>Source</th><th>Destination</th><th>Status</th><th>Actions</th></tr>
                            </thead>
                            <tbody>
                                <tr><td>#MFT001</td><td>s3://bucket/file1</td><td>ftp://remote/file1</td><td><span class="badge bg-success">Completed</span></td><td><button class="btn btn-sm btn-outline-secondary">Details</button></td></tr>
                                <tr><td>#MFT002</td><td>local/files</td><td>azure://container</td><td><span class="badge bg-warning">In Progress</span></td><td><button class="btn btn-sm btn-outline-secondary">Details</button></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <!-- Product Modal -->
    <div class="modal fade" id="productModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add/Edit Product</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="productForm">
                        <input type="hidden" name="id" id="productId">
                        <div class="mb-3">
                            <label>Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label>Description</label>
                            <textarea class="form-control" name="description" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <label>Price</label>
                            <input type="number" step="0.01" class="form-control" name="price" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Member Modal -->
    <div class="modal fade" id="memberModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add/Edit Member</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="memberForm">
                        <input type="hidden" name="id" id="memberId">
                        <div class="mb-3">
                            <label>Full Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label>Email</label>
                            <input type="email" class="form-control" name="email" required>
                        </div>
                        <div class="mb-3">
                            <label>Phone</label>
                            <input type="tel" class="form-control" name="phone" required>
                        </div>
                        <div class="mb-3">
                            <label>Password (leave blank to keep unchanged)</label>
                            <input type="password" class="form-control" name="password">
                        </div>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Subscription Modal -->
    <div class="modal fade" id="subscriptionModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add/Edit Subscription</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="subscriptionForm">
                        <input type="hidden" name="id" id="subId">
                        <div class="mb-3">
                            <label>Member</label>
                            <select class="form-select" name="member_id" required></select>
                        </div>
                        <div class="mb-3">
                            <label>Plan</label>
                            <select class="form-select" name="plan">
                                <option value="Basic">Basic</option>
                                <option value="Pro">Pro</option>
                                <option value="Enterprise">Enterprise</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Status</label>
                            <select class="form-select" name="status">
                                <option value="active">Active</option>
                                <option value="pending">Pending</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // ==================== UTILITIES ====================
        function showToast(message, type = 'success') {
            const container = document.querySelector('.toast-container');
            const colors = { success: '#198754', danger: '#dc3545', warning: '#ffc107', info: '#0dcaf0' };
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white border-0 show`;
            toast.style.backgroundColor = colors[type] || '#198754';
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">${message}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            `;
            container.appendChild(toast);
            setTimeout(() => toast.remove(), 5000);
        }

        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('open');
        }

        function toggleDarkMode() {
            document.body.classList.toggle('dark');
            localStorage.setItem('darkMode', document.body.classList.contains('dark'));
        }

        // Load dark mode preference
        if (localStorage.getItem('darkMode') === 'true') {
            document.body.classList.add('dark');
        }

        // ==================== SIDEBAR NAVIGATION ====================
        const menuLinks = document.querySelectorAll('.sidebar-menu li a');
        const sections = document.querySelectorAll('.section-view');

        menuLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const section = this.dataset.section;
                if (!section) return;
                // Remove active from all links
                menuLinks.forEach(l => l.classList.remove('active'));
                this.classList.add('active');
                // Hide all sections
                sections.forEach(s => s.classList.remove('active'));
                // Show target
                const target = document.getElementById('section-' + section);
                if (target) target.classList.add('active');
                // Close sidebar on mobile
                if (window.innerWidth <= 768) {
                    document.getElementById('sidebar').classList.remove('open');
                }
            });
        });

        // ==================== API HELPERS ====================
        async function apiCall(action, method = 'GET', body = null) {
            const url = `api.php?action=${action}`;
            const options = {
                method: method,
                headers: { 'Content-Type': 'application/json' }
            };
            if (body) options.body = JSON.stringify(body);
            const resp = await fetch(url, options);
            return resp.json();
        }

        // ==================== DASHBOARD STATS ====================
        async function loadDashboardStats() {
            try {
                const data = await apiCall('dashboard_stats');
                if (data.success) {
                    document.getElementById('totalProducts').textContent = data.products || 0;
                    document.getElementById('totalMembers').textContent = data.members || 0;
                    document.getElementById('totalSubs').textContent = data.subscriptions || 0;
                    document.getElementById('totalRevenue').textContent = '$' + (data.revenue || 0);
                    // Populate recent members table
                    const tbody = document.querySelector('#recentMembersTable tbody');
                    tbody.innerHTML = '';
                    if (data.recent_members && data.recent_members.length) {
                        data.recent_members.forEach((m, i) => {
                            tbody.innerHTML += `<tr>
                                <td>${i+1}</td>
                                <td>${m.name}</td>
                                <td>${m.email}</td>
                                <td>${m.phone}</td>
                                <td>${m.created_at || ''}</td>
                            </tr>`;
                        });
                    }
                }
            } catch (e) {
                console.error('Dashboard stats error:', e);
            }
        }

        // ==================== PRODUCTS ====================
        let productsData = [];
        let productsPage = 1;
        const productsPerPage = 5;

        async function loadProducts(page = 1) {
            try {
                const data = await apiCall('products');
                if (data.success) {
                    productsData = data.data || [];
                    renderProductsTable(page);
                }
            } catch (e) { console.error(e); }
        }

        function renderProductsTable(page) {
            const start = (page - 1) * productsPerPage;
            const end = start + productsPerPage;
            const pageItems = productsData.slice(start, end);
            const tbody = document.querySelector('#productsTable tbody');
            tbody.innerHTML = '';
            pageItems.forEach(p => {
                tbody.innerHTML += `<tr>
                    <td>${p.id}</td>
                    <td>${p.name}</td>
                    <td>${p.description || ''}</td>
                    <td>$${p.price}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary" onclick="editProduct(${p.id})"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteProduct(${p.id})"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>`;
            });
            // Pagination
            const totalPages = Math.ceil(productsData.length / productsPerPage);
            const pagination = document.getElementById('productsPagination');
            pagination.innerHTML = '';
            for (let i = 1; i <= totalPages; i++) {
                pagination.innerHTML += `<li class="page-item ${i === page ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="loadProducts(${i}); return false;">${i}</a>
                </li>`;
            }
        }

        document.getElementById('productForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const action = data.id ? 'update_product' : 'add_product';
            const method = data.id ? 'POST' : 'POST';
            const result = await apiCall(action, method, data);
            if (result.success) {
                showToast('Product saved!', 'success');
                bootstrap.Modal.getInstance(document.getElementById('productModal')).hide();
                loadProducts(productsPage);
            } else {
                showToast(result.message || 'Error', 'danger');
            }
        });

        function editProduct(id) {
            const product = productsData.find(p => p.id == id);
            if (product) {
                document.getElementById('productId').value = product.id;
                document.querySelector('#productForm input[name="name"]').value = product.name;
                document.querySelector('#productForm textarea[name="description"]').value = product.description;
                document.querySelector('#productForm input[name="price"]').value = product.price;
                new bootstrap.Modal(document.getElementById('productModal')).show();
            }
        }

        async function deleteProduct(id) {
            if (!confirm('Delete this product?')) return;
            const result = await apiCall('delete_product', 'POST', { id });
            if (result.success) {
                showToast('Product deleted', 'success');
                loadProducts(productsPage);
            } else {
                showToast(result.message || 'Error', 'danger');
            }
        }

        // ==================== MEMBERS ====================
        let membersData = [];
        let membersPage = 1;
        const membersPerPage = 5;

        async function loadMembers(page = 1) {
            try {
                const data = await apiCall('members');
                if (data.success) {
                    membersData = data.data || [];
                    renderMembersTable(page);
                }
            } catch (e) { console.error(e); }
        }

        function renderMembersTable(page) {
            const start = (page - 1) * membersPerPage;
            const end = start + membersPerPage;
            const pageItems = membersData.slice(start, end);
            const tbody = document.querySelector('#membersTable tbody');
            tbody.innerHTML = '';
            pageItems.forEach(m => {
                tbody.innerHTML += `<tr>
                    <td>${m.id}</td>
                    <td>${m.name}</td>
                    <td>${m.email}</td>
                    <td>${m.phone}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary" onclick="editMember(${m.id})"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteMember(${m.id})"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>`;
            });
            const totalPages = Math.ceil(membersData.length / membersPerPage);
            const pagination = document.getElementById('membersPagination');
            pagination.innerHTML = '';
            for (let i = 1; i <= totalPages; i++) {
                pagination.innerHTML += `<li class="page-item ${i === page ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="loadMembers(${i}); return false;">${i}</a>
                </li>`;
            }
        }

        document.getElementById('memberForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const action = data.id ? 'update_member' : 'add_member';
            const result = await apiCall(action, 'POST', data);
            if (result.success) {
                showToast('Member saved!', 'success');
                bootstrap.Modal.getInstance(document.getElementById('memberModal')).hide();
                loadMembers(membersPage);
                loadDashboardStats();
            } else {
                showToast(result.message || 'Error', 'danger');
            }
        });

        function editMember(id) {
            const member = membersData.find(m => m.id == id);
            if (member) {
                document.getElementById('memberId').value = member.id;
                document.querySelector('#memberForm input[name="name"]').value = member.name;
                document.querySelector('#memberForm input[name="email"]').value = member.email;
                document.querySelector('#memberForm input[name="phone"]').value = member.phone;
                document.querySelector('#memberForm input[name="password"]').value = '';
                new bootstrap.Modal(document.getElementById('memberModal')).show();
            }
        }

        async function deleteMember(id) {
            if (!confirm('Delete this member?')) return;
            const result = await apiCall('delete_member', 'POST', { id });
            if (result.success) {
                showToast('Member deleted', 'success');
                loadMembers(membersPage);
                loadDashboardStats();
            } else {
                showToast(result.message || 'Error', 'danger');
            }
        }

        // ==================== SUBSCRIPTIONS ====================
        let subscriptionsData = [];
        let subsPage = 1;
        const subsPerPage = 5;

        async function loadSubscriptions(page = 1) {
            try {
                const data = await apiCall('subscriptions');
                if (data.success) {
                    subscriptionsData = data.data || [];
                    renderSubscriptionsTable(page);
                }
            } catch (e) { console.error(e); }
        }

        function renderSubscriptionsTable(page) {
            const start = (page - 1) * subsPerPage;
            const end = start + subsPerPage;
            const pageItems = subscriptionsData.slice(start, end);
            const tbody = document.querySelector('#subscriptionsTable tbody');
            tbody.innerHTML = '';
            pageItems.forEach(sub => {
                tbody.innerHTML += `<tr>
                    <td>${sub.id}</td>
                    <td>${sub.member_name || sub.member_id}</td>
                    <td>${sub.plan}</td>
                    <td><span class="badge ${sub.status === 'active' ? 'bg-success' : sub.status === 'pending' ? 'bg-warning' : 'bg-danger'}">${sub.status}</span></td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary" onclick="editSubscription(${sub.id})"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteSubscription(${sub.id})"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>`;
            });
            const totalPages = Math.ceil(subscriptionsData.length / subsPerPage);
            const pagination = document.getElementById('subscriptionsPagination');
            pagination.innerHTML = '';
            for (let i = 1; i <= totalPages; i++) {
                pagination.innerHTML += `<li class="page-item ${i === page ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="loadSubscriptions(${i}); return false;">${i}</a>
                </li>`;
            }
        }

        document.getElementById('subscriptionForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const action = data.id ? 'update_subscription' : 'add_subscription';
            const result = await apiCall(action, 'POST', data);
            if (result.success) {
                showToast('Subscription saved!', 'success');
                bootstrap.Modal.getInstance(document.getElementById('subscriptionModal')).hide();
                loadSubscriptions(subsPage);
                loadDashboardStats();
            } else {
                showToast(result.message || 'Error', 'danger');
            }
        });

        function editSubscription(id) {
            const sub = subscriptionsData.find(s => s.id == id);
            if (sub) {
                document.getElementById('subId').value = sub.id;
                // populate member select
                const sel = document.querySelector('#subscriptionForm select[name="member_id"]');
                // We'll assume members are loaded globally, but for simplicity we can reload members
                loadMembersForSelect(sel, sub.member_id);
                document.querySelector('#subscriptionForm select[name="plan"]').value = sub.plan;
                document.querySelector('#subscriptionForm select[name="status"]').value = sub.status;
                new bootstrap.Modal(document.getElementById('subscriptionModal')).show();
            }
        }

        async function loadMembersForSelect(selectEl, selectedId) {
            const data = await apiCall('members');
            if (data.success) {
                selectEl.innerHTML = '';
                data.data.forEach(m => {
                    const opt = document.createElement('option');
                    opt.value = m.id;
                    opt.textContent = m.name + ' (' + m.email + ')';
                    if (m.id == selectedId) opt.selected = true;
                    selectEl.appendChild(opt);
                });
            }
        }

        async function deleteSubscription(id) {
            if (!confirm('Delete this subscription?')) return;
            const result = await apiCall('delete_subscription', 'POST', { id });
            if (result.success) {
                showToast('Subscription deleted', 'success');
                loadSubscriptions(subsPage);
                loadDashboardStats();
            } else {
                showToast(result.message || 'Error', 'danger');
            }
        }

        // ==================== SETTINGS FORMS ====================
        // Payment, SEO, Language, SMTP, General, Security
        document.getElementById('paymentForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const result = await apiCall('save_settings', 'POST', { group: 'payment', data });
            if (result.success) showToast('Payment settings saved', 'success');
            else showToast(result.message || 'Error', 'danger');
        });
        document.getElementById('seoForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const result = await apiCall('save_settings', 'POST', { group: 'seo', data });
            if (result.success) showToast('SEO settings saved', 'success');
            else showToast(result.message || 'Error', 'danger');
        });
        document.getElementById('languageForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const result = await apiCall('save_settings', 'POST', { group: 'language', data });
            if (result.success) showToast('Language settings saved', 'success');
            else showToast(result.message || 'Error', 'danger');
        });
        document.getElementById('smtpForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const result = await apiCall('save_settings', 'POST', { group: 'smtp', data });
            if (result.success) showToast('SMTP settings saved', 'success');
            else showToast(result.message || 'Error', 'danger');
        });
        document.getElementById('generalForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const result = await apiCall('save_settings', 'POST', { group: 'general', data });
            if (result.success) showToast('General settings saved', 'success');
            else showToast(result.message || 'Error', 'danger');
        });
        document.getElementById('securityForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const result = await apiCall('save_settings', 'POST', { group: 'security', data });
            if (result.success) showToast('Security settings saved', 'success');
            else showToast(result.message || 'Error', 'danger');
        });

        // ==================== FRONTEND ====================
        async function saveFrontend() {
            const title = document.getElementById('feTitle').value;
            const hero = document.getElementById('feHero').value;
            const result = await apiCall('save_frontend', 'POST', { title, hero });
            if (result.success) showToast('Frontend saved', 'success');
            else showToast(result.message || 'Error', 'danger');
        }

        // ==================== CHARTS ====================
        let membersChartInstance = null;
        let revenueChartInstance = null;

        function initCharts() {
            const ctx1 = document.getElementById('membersChart').getContext('2d');
            const ctx2 = document.getElementById('revenueChart').getContext('2d');

            if (membersChartInstance) membersChartInstance.destroy();
            if (revenueChartInstance) revenueChartInstance.destroy();

            membersChartInstance = new Chart(ctx1, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [{
                        label: 'Members',
                        data: [12, 19, 3, 5, 2, 3],
                        borderColor: 'rgb(74, 108, 247)',
                        backgroundColor: 'rgba(74, 108, 247, 0.2)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: { responsive: true }
            });

            revenueChartInstance = new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [{
                        label: 'Revenue ($)',
                        data: [1200, 1900, 3000, 5000, 2000, 3000],
                        backgroundColor: 'rgba(108, 92, 231, 0.8)',
                    }]
                },
                options: { responsive: true }
            });
        }

        // ==================== INIT ====================
        document.addEventListener('DOMContentLoaded', function() {
            loadDashboardStats();
            loadProducts();
            loadMembers();
            loadSubscriptions();
            initCharts();
            // Populate member select in subscription modal
            loadMembersForSelect(document.querySelector('#subscriptionForm select[name="member_id"]'));
        });

        // Reset forms when modals close
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('hidden.bs.modal', function() {
                const form = this.querySelector('form');
                if (form) form.reset();
            });
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`