Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
Real F-Manager
/
views
/
v3
:
all-users-20260610200005-20260610220352.ejs
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/styles/style.css" rel="stylesheet" /> <title>All Users</title> </head> <body class="min-h-screen" style="background: #edf2f7;"> <div class="min-h-screen bg-gray-50/50"> <!-- component --> <div class="flex flex-wrap mb-5"> <div class="w-full mb-6 -mx-3 mx-auto"> <div class="relative flex-[1_auto] flex flex-col break-words bg-clip-border rounded-[.95rem] bg-white m-5"> <div class="relative flex flex-col break-words border border-dashed bg-clip-border rounded-2xl shadow-md border-stone-200 bg-light/30"> <!-- card header --> <div class="px-9 pt-5 flex justify-between items-stretch flex-wrap min-h-[70px] pb-0 bg-transparent"> <h3 class="flex flex-col items-start justify-center m-2 ml-0 font-medium text-md text-dark"> <span class="mr-3 font-semibold text-dark">My Users</span> <span class="mt-1 font-medium text-sm text-gray-600">Here is list of all the available users on your bot</span> </h3> </div> <!-- end card header --> <!-- card body --> <div class="flex-auto block py-8 pt-1 px-9"> <% if(users?.length) { %> <!-- search bar credits: https://readymadeui.com/tailwind-components/form/searchbar-input --> <div class="flex border-2 border-blue-500 rounded-lg rounded-r-lg overflow-hidden max-w-md mb-6 mx-auto font-[sans-serif]"> <input id="search-input" type="search" placeholder="Search User Id, Username, name..." class="w-full outline-none bg-white text-gray-600 text-sm p-2" /> <button id="search-btn" type='button' class="flex items-center justify-center bg-[#007bff] px-2 text-sm text-white rounded rounded-l-none"> Search </button> </div> <div id="users-data" class="overflow-x-auto"> <table class="w-full my-0 align-middle text-gray-600 border-neutral-200"> <thead class="align-bottom"> <tr class="font-medium text-xs"> <th class="pb-3 text-start min-w-[30px]">#</th> <th class="pb-3 min-w-[100px]">User Id</th> <th class="pb-3 min-w-[100px]">Username</th> <th class="pb-3 min-w-[100px]">Balance</th> <th class="pb-3 min-w-[100px]">Total Refers</th> <th class="pb-3 min-w-[100px]">Total Numbers</th> <th class="pb-3 min-w-[100px]">Total Withdrawn</th> <th class="pb-3 min-w-[100px]">Joined On</th> <th class="pb-3 min-w-[50px]">Action</th> </tr> </thead> <tbody> <% users.forEach(function (obj , index){ %> <tr id="<%= obj?.id %>" class="text-gray-600 border-b border-dashed last:border-b-0"> <td> <%= index+1 %> </td> <td class="p-3 pl-0 font-medium"> <%= obj.userId %> </td> <td class="p-3 pl-0 text-center font-medium"> <%= obj.username ? "@" + obj.username : "No Username" %> </td> <td class="p-3 pl-0 text-center font-medium"> <%= obj.balance %> </td> <td class="p-3 pr-0 text-center"> <span class="text-center inline-flex px-2 py-1 items-center align-self-center justify-self-center font-semibold text-base/none text-red-600 bg-red-100 border border-red-600 rounded-lg"><%= JSON.parse(obj?.refers || "[]").length %></span> </td> <td class="p-3 pr-0 text-center"> <span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-base/none text-green-600 bg-green-100 border border-green-600 rounded-lg"><%= obj.numbers %></span> </td> <td class="p-3 pr-12 text-center"> <span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-[.95rem] leading-none text-blue-600 bg-blue-100 border border-blue-600 rounded-lg"><%= obj.totalWithdrawn %></span> </td> <td class="pr-0 text-start"> <span class="font-semibold text-light-inverse text-md/normal"><%= new Date(obj?.createdAt).toGMTString() %></span> </td> <td class="flex justify-center items-center mt-8"> <a href="/v3/?id=<%= adminPath %>&q=page&page=user_details&userId=<%= obj.userId %>" class="ml-auto relative border border-blue-500 bg-blue-200 flex items-center h-[30px] w-[30px] text-base font-medium rounded-md shadow-md justify-center my-auto"> <span class="flex items-center justify-center m-0 leading-none shrink-0 text-blue-500"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16"> <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/> <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/> </svg> </a> </td> </tr> <% }) %> </tbody> </table> </div> <!-- pagination-buttons credits: https://www.material-tailwind.com/docs/html/pagination --> <div id="pagination-buttons" class="flex row mt-4 justify-center items-center"> <% if(paginateBtns.length -1 >= 1){ %> <% paginateBtns.forEach((val, i)=>{ %> <button class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none <%= paginateBtns.length -1 == i ? 'rounded-lg rounded-l-none' : '' %> <%= i == 0 ? 'rounded-lg rounded-r-none' : '' %> border <%= i != paginateBtns.length -1 ? 'border-r-0' : '' %> <%= currentPage == val ? 'border-0 text-white bg-gray-900' : 'border-gray-900 text-gray-900' %> text-center align-middle font-sans text-xs font-medium uppercase transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" onclick="searchUser(<%= val %>)"> <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 font-bold text-lg"> <%= val %> </span> </button> <% }) %> <% } %> </div> <% } else { %> <p class="text-xl font-semibold text-gray-700">Your Bot Don't Have Any Users yet...</p> <% } %> </div> </div> </div> </div> </div> </div> <% if(users?.length) { %> <script> const searchInput = document.querySelector("#search-input") const searchBtn = document.querySelector("#search-btn") const paginateBtns = document.querySelector("#pagination-buttons") searchInput.addEventListener("search", searchUser) searchBtn.addEventListener("click", searchUser) function searchUser(offset = 1){ const searchFor = searchInput.value fetch(`/v3?id=<%= adminPath %>&q=page&page=all_users&searchFor=${searchFor}&resType=json&offset=${offset}`) .then(r=>r.json()) .then(res => { const usersMain = document.querySelector("#users-data") const usersMainTable = document.querySelector("#users-data table") const usersMainTableBody = document.querySelector("#users-data table tbody") paginateBtns.innerHTML = "" if(res?.users?.length){ const noDataInfo = document.querySelector("#no-data-info") if(noDataInfo) noDataInfo.style.display = "none"; usersMainTable.style.display = ""; usersMainTableBody.innerHTML = "" res.users.forEach((obj, i)=>{ usersMainTableBody.innerHTML += `<tr id="${obj?.id}" class="text-gray-600 border-b border-dashed last:border-b-0"> <td> ${i+1} </td> <td class="p-3 pl-0 font-medium"> ${obj.userId} </td> <td class="p-3 pl-0 text-center font-medium"> ${obj.username ? "@" + obj.username : "No Username"} </td> <td class="p-3 pl-0 text-center font-medium"> ${obj.balance} </td> <td class="p-3 pr-0 text-center"> <span class="text-center inline-flex px-2 py-1 items-center align-self-center justify-self-center font-semibold text-base/none text-red-600 bg-red-100 border border-red-600 rounded-lg">${JSON.parse(obj?.refers || "[]").length}</span> </td> <td class="p-3 pr-0 text-center"> <span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-base/none text-green-600 bg-green-100 border border-green-600 rounded-lg">${obj.numbers}</span> </td> <td class="p-3 pr-12 text-center"> <span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-[.95rem] leading-none text-blue-600 bg-blue-100 border border-blue-600 rounded-lg">${obj.totalWithdrawn}</span> </td> <td class="pr-0 text-start"> <span class="font-semibold text-light-inverse text-md/normal">${new Date(obj?.createdAt).toGMTString()}</span> </td> <td class="flex justify-center items-center mt-8"> <a href="/v3/?id=<%= adminPath %>&q=page&page=user_details&userId=${obj.userId}" class="ml-auto relative border border-blue-500 bg-blue-200 flex items-center h-[30px] w-[30px] text-base font-medium rounded-md shadow-md justify-center my-auto"> <span class="flex items-center justify-center m-0 leading-none shrink-0 text-blue-500"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16"> <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/> <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/> </svg> </a> </td> </tr>` }) if(res.paginateBtns.length >= 2){ res.paginateBtns.forEach((val, i)=>{ paginateBtns.innerHTML += `<button class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none ${res.paginateBtns.length -1 == i ? 'rounded-lg rounded-l-none' : ''} ${i == 0 ? 'rounded-lg rounded-r-none' : ''} border ${res.paginateBtns.length -1 != i ? "border-r-0" : ""} ${res.currentPage == val ? 'border-0 text-white bg-gray-900' : 'border-gray-900 text-gray-900'} text-center align-middle font-sans text-xs font-medium uppercase transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" onclick="searchUser(${val})"> <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 font-bold text-lg"> ${val} </span> </button>` }) } } else { const noDataInfo = document.querySelector("#no-data-info") if(noDataInfo) noDataInfo.remove(); usersMainTable.style.display = "none" usersMain.innerHTML += `<p id="no-data-info" class="text-xl font-semibold text-gray-700">Your Bot Don't Have Any Users With User ID Or Username Or Name Of "${searchFor}"...</p>` } }) .catch(err => { console.error("err: ", err) }) } </script> <% } %> </body> </html>