Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <script>(function(){const t=localStorage.getItem('theme')||'light';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');})();</script> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Panel | Aadhaar Portal Pro</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=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/css/global.css"> | |
| <link rel="stylesheet" href="/static/css/admin.css"> | |
| <link rel="stylesheet" href="/static/css/auth.css"> | |
| <script src="/static/js/global.js" defer></script> | |
| <script src="/static/js/admin.js" defer></script> | |
| <style> | |
| /* ── Admin tab bar ── */ | |
| .admin-tabs { display:flex; gap:4px; margin-bottom:20px; } | |
| .admin-tab-btn { | |
| padding:9px 20px; border-radius:8px; border:1px solid var(--border-color); | |
| background:transparent; font-family:'Outfit',sans-serif; font-size:0.9rem; | |
| cursor:pointer; color:var(--text-muted); transition:0.15s; | |
| } | |
| .admin-tab-btn.active { | |
| background:var(--primary-color); color:#fff; border-color:var(--primary-color); | |
| } | |
| .admin-section { display:none; } | |
| .admin-section.active { display:block; } | |
| /* ── Ticket panel split layout ── */ | |
| .ticket-panel { | |
| display:grid; grid-template-columns:340px 1fr; | |
| gap:16px; min-height:500px; | |
| } | |
| .ticket-list-col { | |
| border:1px solid var(--border-color); border-radius:12px; overflow:hidden; | |
| } | |
| .ticket-list-header { | |
| padding:12px 16px; border-bottom:1px solid var(--border-color); | |
| display:flex; align-items:center; justify-content:space-between; | |
| } | |
| .ticket-list-header h4 { margin:0; font-size:0.95rem; } | |
| .ticket-filter-tabs { display:flex; gap:4px; padding:8px 12px; border-bottom:1px solid var(--border-color); flex-wrap:wrap; } | |
| .tf-tab { | |
| font-size:0.75rem; padding:3px 10px; border-radius:20px; | |
| border:1px solid transparent; cursor:pointer; background:transparent; | |
| color:var(--text-muted); font-family:'Outfit',sans-serif; | |
| } | |
| .tf-tab.on { background:var(--bg-secondary,#f5f5f5); border-color:var(--border-color); color:var(--text-color); font-weight:600; } | |
| .ticket-items { overflow-y:auto; max-height:480px; } | |
| .tkt-row { | |
| padding:11px 14px; border-bottom:1px solid var(--border-color); | |
| cursor:pointer; transition:background 0.1s; | |
| } | |
| .tkt-row:hover { background:var(--bg-secondary, #f9f9f9); } | |
| .tkt-row.active { background:var(--primary-light, #eef2ff); } | |
| .tkt-row-top { display:flex; align-items:center; gap:6px; margin-bottom:3px; } | |
| .tkt-num { font-size:0.72rem; color:var(--text-muted); font-family:monospace; } | |
| .tkt-name { font-size:0.88rem; font-weight:600; flex:1; } | |
| .tkt-time { font-size:0.72rem; color:var(--text-muted); } | |
| .tkt-row-bot { display:flex; align-items:center; gap:6px; } | |
| .tkt-subject { font-size:0.78rem; color:var(--text-muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } | |
| .priority-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } | |
| .p-high { background:#e74c3c; } | |
| .p-medium { background:#f39c12; } | |
| .p-low { background:#27ae60; } | |
| /* Status pills */ | |
| .spill { | |
| display:inline-block; font-size:0.7rem; font-weight:600; | |
| padding:2px 8px; border-radius:20px; white-space:nowrap; | |
| } | |
| .spill-open { background:#fde8e8; color:#c0392b; } | |
| .spill-pending { background:#fef3cd; color:#9c6d00; } | |
| .spill-resolved { background:#d5f5e3; color:#1a7a45; } | |
| .spill-closed { background:#eee; color:#666; } | |
| /* Category pills */ | |
| .cpill { | |
| display:inline-block; font-size:0.7rem; font-weight:600; | |
| padding:2px 8px; border-radius:20px; | |
| } | |
| .cpill-payment { background:#dbeafe; color:#1d4ed8; } | |
| .cpill-wallet { background:#d1fae5; color:#065f46; } | |
| .cpill-refund { background:#fef3c7; color:#92400e; } | |
| .cpill-other { background:#f3f4f6; color:#374151; } | |
| /* ── Ticket detail col ── */ | |
| .ticket-detail-col { | |
| border:1px solid var(--border-color); border-radius:12px; | |
| display:flex; flex-direction:column; overflow:hidden; | |
| } | |
| .detail-empty { | |
| flex:1; display:flex; align-items:center; justify-content:center; | |
| color:var(--text-muted); font-size:0.9rem; | |
| } | |
| .detail-head { padding:14px 18px; border-bottom:1px solid var(--border-color); } | |
| .detail-head-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; } | |
| .detail-head-num { font-size:0.78rem; color:var(--text-muted); font-family:monospace; } | |
| .detail-head-name { font-size:1rem; font-weight:700; flex:1; } | |
| .detail-head-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.8rem; color:var(--text-muted); } | |
| .chat-window { flex:1; padding:14px 18px; overflow-y:auto; max-height:340px; display:flex; flex-direction:column; gap:10px; } | |
| .chat-msg { max-width:78%; } | |
| .chat-msg.from-user { align-self:flex-start; } | |
| .chat-msg.from-admin { align-self:flex-end; } | |
| .chat-bubble { padding:9px 13px; border-radius:10px; font-size:0.88rem; line-height:1.5; } | |
| .from-user .chat-bubble { background:var(--bg-secondary,#f5f5f5); border:1px solid var(--border-color); border-radius:3px 10px 10px 10px; } | |
| .from-admin .chat-bubble { background:var(--primary-color,#4361ee); color:#fff; border-radius:10px 3px 10px 10px; } | |
| .chat-meta { font-size:0.7rem; color:var(--text-muted); margin-top:3px; } | |
| .from-admin .chat-meta { text-align:right; } | |
| .reply-footer { padding:12px 18px; border-top:1px solid var(--border-color); } | |
| .reply-textarea { | |
| width:100%; border:1px solid var(--border-color); border-radius:8px; | |
| padding:9px 12px; font-size:0.88rem; font-family:'Outfit',sans-serif; | |
| resize:none; background:var(--bg-secondary,#f9f9f9); | |
| color:var(--text-color); margin-bottom:9px; | |
| } | |
| .reply-textarea:focus { outline:none; border-color:var(--primary-color); } | |
| .reply-actions { display:flex; gap:8px; flex-wrap:wrap; } | |
| .ra-btn { | |
| font-size:0.82rem; padding:7px 14px; border-radius:7px; | |
| border:1px solid var(--border-color); cursor:pointer; | |
| font-family:'Outfit',sans-serif; background:transparent; color:var(--text-color); | |
| transition:0.15s; | |
| } | |
| .ra-btn:hover { opacity:0.85; } | |
| .ra-btn.primary { background:var(--primary-color,#4361ee); color:#fff; border-color:var(--primary-color); } | |
| .ra-btn.resolve { background:#27ae60; color:#fff; border-color:#27ae60; } | |
| .ra-btn.escalate { color:#e67e22; border-color:#f39c12; } | |
| .ra-btn.escalate:hover { background:#fef3cd; } | |
| @media (max-width:768px) { | |
| .ticket-panel { grid-template-columns:1fr; } | |
| .ticket-items { max-height:260px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="dashboard-wrapper"> | |
| <div class="sidebar-overlay" id="sidebar-overlay"></div> | |
| <nav class="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="logo-area"> | |
| <i class="fa-solid fa-scale-balanced" style="color:var(--warning);"></i> | |
| <span>Admin Central</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-menu"> | |
| <a href="/" class="side-btn"><i class="fa-solid fa-house"></i><span>User Dashboard</span></a> | |
| <a href="/admin" class="side-btn active"><i class="fa-solid fa-file-invoice-dollar"></i><span>Verify Payments</span></a> | |
| <a href="/admin/support" class="side-btn" id="nav-support-link" onclick="switchTab('support');return false;"> | |
| <i class="fa-solid fa-headset"></i><span>Complaints</span> | |
| <span id="open-ticket-count" style="display:none;background:#e74c3c;color:#fff;border-radius:20px;font-size:0.7rem;padding:1px 6px;margin-left:auto;"></span> | |
| </a> | |
| <a href="/logout" class="side-btn logout-link"><i class="fa-solid fa-right-from-bracket"></i><span>Logout</span></a> | |
| </div> | |
| </nav> | |
| <main class="main-content"> | |
| <header class="top-bar"> | |
| <div class="header-left"> | |
| <button class="hamburger-menu" id="mobile-toggle"><i class="fa-solid fa-bars"></i></button> | |
| <div class="breadcrumb"> | |
| <span>Admin</span> | |
| <i class="fa-solid fa-chevron-right"></i> | |
| <span class="active" id="breadcrumb-active">Payment Queue</span> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <button class="header-icon-btn" id="theme-toggle-btn"><i class="fa-solid fa-moon"></i></button> | |
| <div class="wallet-pill"><i class="fa-solid fa-user-shield"></i><span>ADMIN</span></div> | |
| </div> | |
| </header> | |
| <div class="content-body"> | |
| <!-- Tab bar --> | |
| <div class="admin-tabs"> | |
| <button class="admin-tab-btn active" id="tab-btn-payments" onclick="switchTab('payments')"> | |
| <i class="fa-solid fa-file-invoice-dollar" style="margin-right:6px;"></i>Payment Queue | |
| </button> | |
| <button class="admin-tab-btn" id="tab-btn-support" onclick="switchTab('support')"> | |
| <i class="fa-solid fa-headset" style="margin-right:6px;"></i>Complaints | |
| <span id="tab-badge" style="display:none;background:#e74c3c;color:#fff;border-radius:20px;font-size:0.7rem;padding:1px 7px;margin-left:6px;"></span> | |
| </button> | |
| </div> | |
| <!-- ═══ SECTION 1: PAYMENT QUEUE ═══ --> | |
| <div class="admin-section active" id="section-payments"> | |
| <div class="welcome-banner compact admin-banner"> | |
| <div class="welcome-text"> | |
| <h1>Payment Verification Queue</h1> | |
| <p>Verify user top-up requests and approve wallet balances instantly.</p> | |
| </div> | |
| </div> | |
| <div class="admin-grid animate-up"> | |
| <div class="table-wrapper"> | |
| <table class="admin-table"> | |
| <thead> | |
| <tr> | |
| <th>Submission Date</th> | |
| <th>User Partner</th> | |
| <th>Amount</th> | |
| <th>UTR Number</th> | |
| <th>Screenshot</th> | |
| <th>Status</th> | |
| <th>Verification</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tx-table-body"> | |
| <tr> | |
| <td colspan="7" class="loading-state"> | |
| <i class="fa-solid fa-spinner fa-spin"></i> | |
| <span>Loading transactions...</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══ SECTION 2: COMPLAINT TICKETS ═══ --> | |
| <div class="admin-section" id="section-support"> | |
| <div class="welcome-banner compact admin-banner" style="margin-bottom:20px;"> | |
| <div class="welcome-text"> | |
| <h1>Support & Complaints</h1> | |
| <p>Review, reply, and resolve user tickets.</p> | |
| </div> | |
| </div> | |
| <div class="ticket-panel animate-up"> | |
| <!-- Left: ticket list --> | |
| <div class="ticket-list-col"> | |
| <div class="ticket-list-header"> | |
| <h4>All Tickets</h4> | |
| <button onclick="loadTickets()" style="background:none;border:none;cursor:pointer;color:var(--text-muted);" title="Refresh"> | |
| <i class="fa-solid fa-rotate-right"></i> | |
| </button> | |
| </div> | |
| <div class="ticket-filter-tabs"> | |
| <button class="tf-tab on" onclick="filterTkts('all',this)">Sab</button> | |
| <button class="tf-tab" onclick="filterTkts('open',this)">Open</button> | |
| <button class="tf-tab" onclick="filterTkts('pending',this)">Pending</button> | |
| <button class="tf-tab" onclick="filterTkts('resolved',this)">Resolved</button> | |
| </div> | |
| <div class="ticket-items" id="ticket-items"></div> | |
| </div> | |
| <!-- Right: ticket detail --> | |
| <div class="ticket-detail-col" id="ticket-detail-col"> | |
| <div class="detail-empty">Koi ticket select karein</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Confirm modal (existing) --> | |
| <div id="custom-confirm-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);justify-content:center;align-items:center;"> | |
| <div class="auth-card" style="max-width:400px;padding:40px;text-align:center;animation:authSlideUp 0.3s ease-out;position:relative;"> | |
| <div id="modal-icon-container" style="font-size:50px;margin-bottom:15px;color:var(--primary-color);"> | |
| <i class="fa-solid fa-circle-question" id="modal-icon"></i> | |
| </div> | |
| <h3 id="modal-title" style="font-size:1.6rem;font-weight:700;margin-bottom:10px;">Confirm Action</h3> | |
| <p id="modal-message" style="color:var(--text-muted);margin-bottom:30px;font-size:0.95rem;">Are you sure?</p> | |
| <div style="display:flex;gap:15px;"> | |
| <button id="modal-cancel-btn" class="btn-auth" style="background:transparent;border:2px solid var(--border-color);color:var(--text-color);box-shadow:none;">Cancel</button> | |
| <button id="modal-confirm-btn" class="btn-auth">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |