Editing: /home/goacom/baji.princedev.shop/views/admin/agents.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Manage Agents | Admin Panel</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=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/css/style.css"> <style> .admin-nav { background-color: var(--bg-card); border-bottom: 1px solid var(--border-color); padding: 12px 20px; } .admin-nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .admin-menu { display: flex; gap: 10px; } .admin-menu a { color: var(--text-muted); text-decoration: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; } .admin-menu a:hover, .admin-menu a.active { background-color: var(--accent-gold); color: #000; } .table-container { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; text-align: left; } th, td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; } th { background-color: rgba(0, 0, 0, 0.4); color: var(--accent-gold); font-weight: 600; } tr:hover { background-color: rgba(255, 255, 255, 0.02); } .action-btn { padding: 6px 10px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; } .btn-edit { background: var(--accent-gold); color: #000; } .btn-del { background: var(--accent-red); color: #fff; } .alert-msg { background: rgba(46, 196, 182, 0.2); border: 1px solid var(--accent-green); color: var(--accent-green); padding: 10px 15px; border-radius: 8px; margin-bottom: 20px; } </style> </head> <body> <!-- Admin Header --> <header class="site-header"> <div class="header-container"> <a href="/admin/dashboard" class="logo-area"> <div class="logo-icon">ADMIN</div> <div class="logo-text"> <h1><%= settings.siteTitle %></h1> <span>AGENT MANAGER</span> </div> </a> <div> <a href="/" target="_blank" class="btn-admin" style="margin-right: 10px;"><i class="fas fa-external-link-alt"></i> View Site</a> <a href="/admin/logout" class="btn-admin" style="border-color: var(--accent-red); color: var(--accent-red);"><i class="fas fa-sign-out-alt"></i> Logout</a> </div> </div> </header> <!-- Admin Sub Nav --> <nav class="admin-nav"> <div class="admin-nav-container"> <div class="admin-menu"> <a href="/admin/dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a> <a href="/admin/agents" class="active"><i class="fas fa-users-cog"></i> Manage Agents</a> <a href="/admin/settings"><i class="fas fa-sliders-h"></i> Site Settings</a> <a href="/admin/complaints"><i class="fas fa-exclamation-circle"></i> Complaints</a> </div> </div> </nav> <main class="main-container"> <% if (msg) { %> <div class="alert-msg"><i class="fas fa-info-circle"></i> <%= msg %></div> <% } %> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;"> <h2 style="color: #fff;"><i class="fas fa-user-shield"></i> Agent Directory (<%= agents.length %>)</h2> <button class="btn-submit" style="width: auto; padding: 10px 20px;" onclick="openAddModal()"> <i class="fas fa-plus-circle"></i> Add New Agent </button> </div> <!-- Agent Table --> <div class="table-container"> <table> <thead> <tr> <th>ID</th> <th>Agent ID</th> <th>Name</th> <th>Agent Level</th> <th>Category</th> <th>WhatsApp</th> <th>Status</th> <th>Verified</th> <th>Actions</th> </tr> </thead> <tbody> <% if (agents && agents.length > 0) { %> <% agents.forEach(agent => { %> <tr> <td><%= agent.id %></td> <td><strong style="color: var(--accent-gold);"><%= agent.agentId %></strong></td> <td><%= agent.name %></td> <td> <span class="agent-badge" style="background: rgba(255, 183, 3, 0.2); color: var(--accent-gold);"> <%= agent.levelName || ('Level ' + (agent.level || 3)) %> </span> </td> <td><%= agent.category %></td> <td><i class="fab fa-whatsapp" style="color: #25d366;"></i> <%= agent.whatsapp %></td> <td> <% if (agent.status === 'Active') { %> <span style="color: #2ec4b6; font-weight: 600;">Active</span> <% } else { %> <span style="color: var(--accent-red); font-weight: 600;"><%= agent.status %></span> <% } %> </td> <td> <% if (agent.verified) { %> <i class="fas fa-check-circle" style="color: #2ec4b6;"></i> Yes <% } else { %> <i class="fas fa-times-circle" style="color: #888;"></i> No <% } %> </td> <td> <button class="action-btn btn-edit" onclick='openEditModal(<%- JSON.stringify(agent) %>)'> <i class="fas fa-edit"></i> Edit </button> <form action="/admin/agents/delete/<%= agent.id %>" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this agent?')"> <button type="submit" class="action-btn btn-del"> <i class="fas fa-trash"></i> Delete </button> </form> </td> </tr> <% }); %> <% } else { %> <tr> <td colspan="8" style="text-align: center; padding: 20px; color: var(--text-muted);">No agents registered yet. Click Add New Agent to create one.</td> </tr> <% } %> </tbody> </table> </div> </main> <!-- Add Agent Modal --> <div class="modal-overlay" id="addAgentModal"> <div class="modal-content"> <div class="modal-header"> <h3 style="color: var(--accent-gold);"><i class="fas fa-user-plus"></i> Add New Agent</h3> <button class="close-btn" onclick="closeAddModal()">×</button> </div> <form action="/admin/agents/add" method="POST"> <div class="form-group"> <label>Agent ID (e.g. MASTER-101) *</label> <input type="text" name="agentId" class="form-control" required placeholder="AGENT-101"> </div> <div class="form-group"> <label>Agent Name *</label> <input type="text" name="name" class="form-control" required placeholder="Shakib Al Hasan"> </div> <div class="form-group"> <label>Agent Level Hierarchy *</label> <select name="level" class="form-control"> <option value="1">Level 1 - Sub Admin</option> <option value="2">Level 2 - Super Agent</option> <option value="3" selected>Level 3 - Master Agent</option> <option value="4">Level 4 - Sub Agent</option> <option value="5">Level 5 - Customer Care</option> </select> </div> <div class="form-group"> <label>Category / Role *</label> <select name="category" class="form-control"> <% categories.forEach(cat => { %> <option value="<%= cat %>"><%= cat %></option> <% }); %> </select> </div> <div class="form-group"> <label>WhatsApp Number (with country code) *</label> <input type="text" name="whatsapp" class="form-control" required placeholder="+8801700000000"> </div> <div class="form-group"> <label>Status</label> <select name="status" class="form-control"> <option value="Active">Active</option> <option value="Suspended">Suspended</option> </select> </div> <div class="form-group"> <label>Verified Badge</label> <select name="verified" class="form-control"> <option value="true">Verified (Yes)</option> <option value="false">Unverified (No)</option> </select> </div> <div class="form-group"> <label>Notes / Description</label> <input type="text" name="notes" class="form-control" placeholder="Fast 24/7 bKash/Nagad service"> </div> <button type="submit" class="btn-submit">Save Agent</button> </form> </div> </div> <!-- Edit Agent Modal --> <div class="modal-overlay" id="editAgentModal"> <div class="modal-content"> <div class="modal-header"> <h3 style="color: var(--accent-gold);"><i class="fas fa-edit"></i> Edit Agent</h3> <button class="close-btn" onclick="closeEditModal()">×</button> </div> <form id="editForm" method="POST"> <div class="form-group"> <label>Agent ID *</label> <input type="text" id="editAgentId" name="agentId" class="form-control" required> </div> <div class="form-group"> <label>Agent Name *</label> <input type="text" id="editName" name="name" class="form-control" required> </div> <div class="form-group"> <label>Agent Level Hierarchy *</label> <select id="editLevel" name="level" class="form-control"> <option value="1">Level 1 - Sub Admin</option> <option value="2">Level 2 - Super Agent</option> <option value="3">Level 3 - Master Agent</option> <option value="4">Level 4 - Sub Agent</option> <option value="5">Level 5 - Customer Care</option> </select> </div> <div class="form-group"> <label>Category / Role *</label> <select id="editCategory" name="category" class="form-control"> <% categories.forEach(cat => { %> <option value="<%= cat %>"><%= cat %></option> <% }); %> </select> </div> <div class="form-group"> <label>WhatsApp Number *</label> <input type="text" id="editWhatsapp" name="whatsapp" class="form-control" required> </div> <div class="form-group"> <label>Status</label> <select id="editStatus" name="status" class="form-control"> <option value="Active">Active</option> <option value="Suspended">Suspended</option> </select> </div> <div class="form-group"> <label>Verified Badge</label> <select id="editVerified" name="verified" class="form-control"> <option value="true">Verified (Yes)</option> <option value="false">Unverified (No)</option> </select> </div> <div class="form-group"> <label>Notes / Description</label> <input type="text" id="editNotes" name="notes" class="form-control"> </div> <button type="submit" class="btn-submit">Update Agent</button> </form> </div> </div> <script> function openAddModal() { document.getElementById('addAgentModal').style.display = 'flex'; } function closeAddModal() { document.getElementById('addAgentModal').style.display = 'none'; } function openEditModal(agent) { document.getElementById('editForm').action = '/admin/agents/edit/' + agent.id; document.getElementById('editAgentId').value = agent.agentId; document.getElementById('editName').value = agent.name; document.getElementById('editLevel').value = agent.level || 3; document.getElementById('editCategory').value = agent.category; document.getElementById('editWhatsapp').value = agent.whatsapp; document.getElementById('editStatus').value = agent.status; document.getElementById('editVerified').value = agent.verified ? 'true' : 'false'; document.getElementById('editNotes').value = agent.notes || ''; document.getElementById('editAgentModal').style.display = 'flex'; } function closeEditModal() { document.getElementById('editAgentModal').style.display = 'none'; } </script> </body> </html>
💾 Save