File "all-users-20250306001204.ejs"
Full Path: /home/wiomgjqe/neduas.store/v3/all-users-20250306001204.ejs
File size: 11.86 KB
MIME-type: text/html
Charset: utf-8
<!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>