Reports

<!DOCTYPE html>

<head>

<title>My Banking | Admin & User Dashboard</title>

<style>

body {background: #f7faff; font-family: 'Segoe UI', Arial, sans-serif; margin:0;}

.navbar {width: 100%; background: #2266cc; color: #fff; display: flex; align-items: center; height: 60px; box-shadow: 0 2px 10px #c0d6ff3d; margin-bottom: 32px;}

.navbar-logo {display: flex; align-items: center; margin-left: 22px;}

.navbar-logo svg {width: 38px; height: 38px; margin-right: 12px;}

.navbar-title { font-size: 1.68em; font-weight: bold; letter-spacing: 0.5px;}

.centered {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;}

.box {background:#fff;box-shadow:0 2px 16px rgba(0,0,0,0.07);border-radius:14px;padding:38px 28px;max-width:410px;width:98%;margin:22px 0;}

h1,h2,h3 {color:#2266cc;}

.input {width:98%;padding:11px 9px;border:1.5px solid #bbb;border-radius:7px;margin-bottom:15px;font-size:1.05em;}

.btn {padding: 10px 25px; background: #2266cc; color: #fff; border: none; border-radius: 6px; font-size: 1.08em; cursor: pointer; font-weight: 500;}

.btn:hover {background: #1652a0;}

.link {color:#2266cc;cursor:pointer;text-decoration:underline;}

.hide {display:none;}

.user-table, .admin-table {width:100%;border-collapse:collapse;margin:18px 0;}

.user-table th, .user-table td, .admin-table th, .admin-table td {border:1px solid #bbb;padding:9px 6px;text-align:center;}

.user-table th, .admin-table th {background:#e3eefd;}

.profile-card {background: #e3eefd; border-radius: 13px; padding: 19px 14px 15px 14px; margin-bottom: 18px; text-align: center; color: #174b93; box-shadow: 0 0 8px #dbe5ff50;}

.profile-card .avatar {width:54px;height:54px;border-radius:50%;background:#fff;border:2.5px solid #2266cc;display:inline-block;margin-bottom:7px;}

.profile-card .avatar span {font-size: 2.3em; color: #2266cc; line-height: 54px; font-weight: bold;display:inline-block;width:100%;text-align:center;}

.profile-info {font-size:1.17em;margin:2px 0;}

.profile-username {font-size:1.04em;color:#325;}

.bank-info {background: #f9f9ff; border-radius: 11px; padding: 13px 14px; margin-top: 8px;margin-bottom:13px; font-size: 1.09em; color: #2266cc; box-shadow: 0 0 0.5px #b8b8e4;}

.bank-info span.label {color:#444;font-size:1.01em;font-weight:bold;}

.bal {font-size:2.2em;color:#21734e;margin-bottom:7px;}

.pending-bal {color:#a60101;font-size:1em;}

.withdraw-btn {background:#ffb300;}

.withdraw-btn:hover {background:#c68600;}

.approve-btn {background:#43cea2;}

.approve-btn:hover {background:#13795b;}

.block-btn {background:#e74c3c;color:#fff;}

.block-btn:hover {background:#a60101;}

.unblock-btn {background:#43cea2;color:#fff;}

.unblock-btn:hover {background:#13795b;}

.success {background:#d1ffd6;color:#136a43;border-radius:8px;margin:10px 0;padding:10px 6px;}

.error {background:#ffd7d7;color:#a60101;border-radius:8px;margin:10px 0;padding:10px 6px;}

.admin-link {position:fixed;top:8px;right:22px;}

.admin-panel-tabs {display:flex;gap:20px;justify-content:center;margin-bottom:18px;}

.admin-tab-btn {padding:10px 30px;border-radius:6px;border:none;font-size:1.07em;cursor:pointer;background:#e3eefd;}

.admin-tab-btn.active {background:#2266cc;color:#fff;}

.login-history-list {max-height:120px;overflow-y:auto;font-size:1em;text-align:left;margin:0 0 10px 0;}

.login-history-list li {margin-bottom:3px;}

.time-footer {margin: 30px auto 18px auto; text-align: center; color: #555; font-size: 1.09em; background: #e3eefd; border-radius: 7px; padding: 6px 20px; width: fit-content;}

@media (max-width: 650px) {.box{padding:10vw 2vw;}.navbar-title {font-size: 1.25em;}.navbar-logo svg {width: 30px; height: 30px;}}

</style>

</head>

<body>

\<div class="navbar-logo"\>

  \<svg viewBox="0 0 48 48" fill="none"\>\<ellipse cx="24" cy="13" rx="18" ry="7" fill="#fff" stroke="#1652a0" stroke-width="2"/\>\<rect x="8" y="20" width="32" height="16" rx="3" fill="#e3eefd" stroke="#1652a0" stroke-width="2"/\>\<rect x="15" y="28" width="6" height="8" rx="1.5" fill="#2266cc" /\>\<rect x="27" y="28" width="6" height="8" rx="1.5" fill="#2266cc" /\>\<rect x="21" y="28" width="6" height="8" rx="1.5" fill="#43cea2" /\>\<rect x="21" y="20" width="6" height="4" rx="1.2" fill="#ffb300" /\>\</svg\>

  \<span class="navbar-title"\>My Banking\</span\>

\</div\>

</div>

\<h2 id="authTitle"\>Login\</h2\>

\<div id="authError" class="error hide"\>\</div\>

\<input id="authName" class="input hide" placeholder="Full Name" autocomplete="name" /\>

\<input id="authNumber" class="input hide" placeholder="Mobile Number" autocomplete="tel" /\>

\<input id="authUser" class="input" placeholder="Username" autocomplete="username" /\>

\<input id="authPass" class="input" type="password" placeholder="Password" autocomplete="current-password" /\>

\<button class="btn" onclick="login()"\>Login\</button\>

\<div style="margin-top:9px;"\>

  \<span id="toSignup" class="link" onclick="showSignup()"\>Create Account\</span\>

  \<span id="toLogin" class="link hide" onclick="showLogin()"\>Login\</span\>

\</div\>

\<div class="link admin-link" onclick="showAdminLogin()" style="font-size:1em;"\>Admin?\</div\>

</div>

\<div class="profile-card"\>

  \<div class="avatar"\>\<span id="profileAvatar"\>\</span\>\</div\>

  \<div class="profile-info" id="profileName"\>\</div\>

  \<div class="profile-info" id="profileNumber"\>\</div\>

  \<div class="profile-username" id="profileUsername"\>\</div\>

\</div\>

\<div class="bank-info"\>

  \<div\>\<span class="label"\>Account No:\</span\> \<span id="bankAccountNo"\>\</span\>\</div\>

  \<div\>\<span class="label"\>Last Transaction:\</span\> \<span id="lastTrans"\>\</span\>\</div\>

  \<div\>\<span class="label"\>Status:\</span\> \<span id="accStatus"\>\</span\>\</div\>

\</div\>

\<div style="margin-bottom:7px;"\>Your Balance:\</div\>

\<div class="bal" id="userBalance"\>\</div\>

\<div class="pending-bal" id="userPendingBal"\>\</div\>

\<button class="btn withdraw-btn" onclick="showWithdrawForm()"\>Withdraw/Transfer\</button\>

\<button class="btn" onclick="logout()" style="float:right;margin-top:10px;"\>Logout\</button\>

\<h3 style="margin-top:30px;"\>Withdraw/Transfer History\</h3\>

\<table class="user-table" id="userTransTable"\>

  \<tr\>\<th\>Date\</th\>\<th\>Amount\</th\>\<th\>Method\</th\>\<th\>Status\</th\>\</tr\>

\</table\>

</div>

\<h3\>Withdraw/Transfer\</h3\>

\<div id="withdrawError" class="error hide"\>\</div\>

\<input id="withdrawAmount" class="input" type="number" placeholder="Amount" min="1" /\>

\<div class="radio-group" style="margin-bottom:14px;"\>

  \<label\>\<input type="radio" name="method" value="bank" checked onchange="toggleMethodFields()"\> Bank Account\</label\>

  \<label\>\<input type="radio" name="method" value="bkash" onchange="toggleMethodFields()"\> Bkash Number\</label\>

  \<label\>\<input type="radio" name="method" value="mobile" onchange="toggleMethodFields()"\> Mobile Recharge\</label\>

\</div\>

\<form class="card-form" onsubmit="submitWithdraw(event)"\>

  \<input id="bankField" class="input" placeholder="Bank Account Number" /\>

  \<input id="bkashField" class="input hide" placeholder="Bkash Number" /\>

  \<input id="mobileField" class="input hide" placeholder="Mobile Recharge Number" /\>

  \<button class="btn approve-btn" type="submit"\>Submit\</button\>

  \<button class="btn" type="button" onclick="hideWithdrawForm()" style="background:#bbb;color:#222;"\>Close\</button\>

\</form\>

</div>

<div class="success hide" id="withdrawSuccessMsg">Your request has been received. You will get payment within 12-24 hours.</div>

</div>

\<h2\>Admin Panel\</h2\>

\<button class="btn" onclick="adminLogout()" style="float:right;"\>Logout\</button\>

\<div class="admin-panel-tabs"\>

  \<button class="admin-tab-btn active" id="tab-users" onclick="showAdminTab('users')"\>User List\</button\>

  \<button class="admin-tab-btn" id="tab-withdraws" onclick="showAdminTab('withdraws')"\>Withdraw History\</button\>

  \<button class="admin-tab-btn" id="tab-logins" onclick="showAdminTab('logins')"\>Login History\</button\>

\</div\>

\<div id="adminTabUsers"\>

  \<h3\>User Balance & Control\</h3\>

  \<table class="admin-table" id="adminUserTable"\>

    \<tr\>\<th\>Username\</th\>\<th\>Name\</th\>\<th\>Mobile\</th\>\<th\>Balance\</th\>\<th\>Adjust\</th\>\<th\>Status\</th\>\<th\>Action\</th\>\</tr\>

  \</table\>

\</div\>

\<div id="adminTabWithdraws" class="hide"\>

  \<h3\>Withdraw/Transfer Requests\</h3\>

  \<table class="admin-table" id="adminReqTable"\>

    \<tr\>\<th\>Date\</th\>\<th\>User\</th\>\<th\>Amount\</th\>\<th\>Method\</th\>\<th\>Details\</th\>\<th\>Status\</th\>\<th\>Action\</th\>\</tr\>

  \</table\>

\</div\>

\<div id="adminTabLogins" class="hide"\>

  \<h3\>User Login History\</h3\>

  \<ul class="login-history-list" id="adminLoginHistory"\>\</ul\>

\</div\>

</div>

// Persistent LocalStorage System

function getUsers() {

let data = localStorage.getItem("bankUsersEn");

if (data) return JSON.parse(data);

// Only your 4 new users

let users = [

{username: 'monir', name: 'MD Monir Hossain', number: '+96879086974', password: '9999', balance: 510000, trans: \[\], bank: '1002001', status: 'Active', blocked: false},

{username: 'ariful', name: 'MD Ariful Biswas', number: '+966507500491', password: '9999', balance: 510000, trans: \[\], bank: '1002002', status: 'Active', blocked: false},

{username: 'shopon', name: 'MD Shopon Miah', number: '+96893454132', password: '9999', balance: 510000, trans: \[\], bank: '1002003', status: 'Active', blocked: false},

{username: 'suvanath', name: 'Suvanath Chowdhury', number: '+96630606886', password: '9999', balance: 510000, trans: \[\], bank: '1002004', status: 'Active', blocked: false}

];

localStorage.setItem("bankUsersEn", JSON.stringify(users));

return users;

}

function saveUsers(users) {

localStorage.setItem("bankUsersEn", JSON.stringify(users));

}

function getWithdraws() {

let data = localStorage.getItem("bankWithdrawsEn");

if (data) return JSON.parse(data);

localStorage.setItem("bankWithdrawsEn", "[]");

return [];

}

function saveWithdraws(withdraws) {

localStorage.setItem("bankWithdrawsEn", JSON.stringify(withdraws));

}

function getLoginHistory() {

let data = localStorage.getItem("bankLoginHistoryEn");

if (data) return JSON.parse(data);

localStorage.setItem("bankLoginHistoryEn", "[]");

return [];

}

function saveLoginHistory(loginHistory) {

localStorage.setItem("bankLoginHistoryEn", JSON.stringify(loginHistory));

}

let users = getUsers();

let withdraws = getWithdraws();

let loginHistory = getLoginHistory();

let currentUser = null, isAdmin=false;

function updateAllData() {

saveUsers(users);

saveWithdraws(withdraws);

saveLoginHistory(loginHistory);

}

/* ---------- AUTH ---------- */

function showSignup(){

document.getElementById('authTitle').innerText = 'Create Account';

document.getElementById('toSignup').classList.add('hide');

document.getElementById('toLogin').classList.remove('hide');

document.querySelector('#authView button').innerText = 'Sign Up';

document.getElementById('authError').classList.add('hide');

document.getElementById('authName').classList.remove('hide');

document.getElementById('authNumber').classList.remove('hide');

document.getElementById('authUser').placeholder = 'Username';

document.getElementById('authUser').value = '';

document.getElementById('authPass').value = '';

document.getElementById('authName').value = '';

document.getElementById('authNumber').value = '';

document.querySelector('#authView button').onclick = signup;

}

function showLogin(){

document.getElementById('authTitle').innerText = 'Login';

document.getElementById('toSignup').classList.remove('hide');

document.getElementById('toLogin').classList.add('hide');

document.querySelector('#authView button').innerText = 'Login';

document.getElementById('authError').classList.add('hide');

document.getElementById('authName').classList.add('hide');

document.getElementById('authNumber').classList.add('hide');

document.getElementById('authUser').placeholder = 'Username';

document.getElementById('authUser').value = '';

document.getElementById('authPass').value = '';

document.querySelector('#authView button').onclick = login;

}

function showAdminLogin(){

isAdmin=true;

document.getElementById('authTitle').innerText = 'Admin Login';

document.getElementById('toSignup').classList.add('hide');

document.getElementById('toLogin').classList.remove('hide');

document.querySelector('#authView button').innerText = 'Login';

document.getElementById('authError').classList.add('hide');

document.getElementById('authName').classList.add('hide');

document.getElementById('authNumber').classList.add('hide');

document.getElementById('authUser').placeholder = 'Admin Username';

document.getElementById('authUser').value = '';

document.getElementById('authPass').value = '';

document.querySelector('#authView button').onclick = adminLogin;

}

function login(){

let username = document.getElementById('authUser').value.trim();

let password = document.getElementById('authPass').value;

let user = users.find(u=>u.username===username && u.password===password);

if(user){

if(user.blocked){

  document.getElementById('authError').innerText = 'Your account is blocked!';

  document.getElementById('authError').classList.remove('hide');

  return;

}

currentUser = user; isAdmin=false;

document.getElementById('authView').classList.add('hide');

document.getElementById('userView').classList.remove('hide');

renderUserProfile();

loadUserData();

addLoginHistory(user.username, user.name);

saveLoginHistory(loginHistory);

}else{

document.getElementById('authError').innerText = 'Invalid username or password!';

document.getElementById('authError').classList.remove('hide');

}

function signup(){

let name = document.getElementById('authName').value.trim();

let number = document.getElementById('authNumber').value.trim();

let username = document.getElementById('authUser').value.trim();

let password = document.getElementById('authPass').value;

if(!name || !number || !username || !password){

document.getElementById('authError').innerText = 'Please fill all fields!';

document.getElementById('authError').classList.remove('hide');

return;

}

if(users.find(u=>u.username===username)){

document.getElementById('authError').innerText = 'This username already exists!';

document.getElementById('authError').classList.remove('hide');

return;

}

let bankNo = Math.floor(Math.random()*9000000+1000000).toString();

let user = {username,name,number,password,balance:510000,trans:[], bank:bankNo, status:'Active', blocked:false};

users.push(user);

currentUser = user; isAdmin=false;

updateAllData();

document.getElementById('authView').classList.add('hide');

document.getElementById('userView').classList.remove('hide');

renderUserProfile();

loadUserData();

addLoginHistory(user.username, user.name);

saveLoginHistory(loginHistory);

}

function adminLogin(){

let username = document.getElementById('authUser').value.trim();

let password = document.getElementById('authPass').value;

if(username==='admin' && password==='admin'){

currentUser=null;isAdmin=true;

document.getElementById('authView').classList.add('hide');

document.getElementById('adminView').classList.remove('hide');

showAdminTab('users');

loadAdminData();

}else{

document.getElementById('authError').innerText = 'Admin username or password incorrect!';

document.getElementById('authError').classList.remove('hide');

}

function logout(){

currentUser=null;

document.getElementById('userView').classList.add('hide');

document.getElementById('authView').classList.remove('hide');

showLogin();

}

function adminLogout(){

isAdmin=false;

document.getElementById('adminView').classList.add('hide');

document.getElementById('authView').classList.remove('hide');

showLogin();

}

function addLoginHistory(username, name){

let now = new Date();

let ts = now.getFullYear()+'-'+String(now.getMonth()+1).padStart(2,'0')+'-'+String(now.getDate()).padStart(2,'0')

+' '+String(now.getHours()).padStart(2,'0')+':'+String(now.getMinutes()).padStart(2,'0')+':'+String(now.getSeconds()).padStart(2,'0');

loginHistory.unshift({username, name, ts});

}

/* ---------- USER DASHBOARD ---------- */

function renderUserProfile(){

document.getElementById('profileAvatar').innerText = currentUser.name?currentUser.name[0].toUpperCase():"U";

document.getElementById('profileName').innerHTML = "<b>Name:</b> "+currentUser.name;

document.getElementById('profileNumber').innerHTML = "<b>Mobile:</b> "+currentUser.number;

document.getElementById('profileUsername').innerHTML = "<b>Username:</b> "+currentUser.username;

document.getElementById('bankAccountNo').innerText = currentUser.bank || "Not set";

document.getElementById('accStatus').innerText = currentUser.status || "Active";

let last = withdraws.filter(w=>w.user===currentUser.username).slice(-1)[0];

document.getElementById('lastTrans').innerText = last ? (last.date+" - "+last.amount+" TK") : "N/A";

}

function loadUserData(){

let bal = currentUser.balance;

let pending = withdraws.filter(w=>w.user===currentUser.username && w.status==='pending').reduce((t,w)=>t+w.amount,0);

document.getElementById('userBalance').innerText = (bal-pending) + ' TK';

document.getElementById('userPendingBal').innerText = pending>0 ? `(Pending: ${pending} TK)` : "";

let table = document.getElementById('userTransTable');

table.innerHTML = '<tr><th>Date</th><th>Amount</th><th>Method</th><th>Status</th></tr>';

withdraws.filter(w=>w.user===currentUser.username)

.forEach(w=\>{

  table.innerHTML += \`\<tr\>

    \<td\>${w.date}\</td\>

    \<td\>${w.amount}\</td\>

    \<td\>${methodLabel(w.method)}\</td\>

    \<td\>${w.status==='pending'?'Processing':w.status==='approved'?'Completed':'Rejected'}\</td\>

  \</tr\>\`;

});

}

function showWithdrawForm(){

document.getElementById('withdrawFormBox').classList.remove('hide');

document.getElementById('withdrawError').classList.add('hide');

document.getElementById('withdrawAmount').value = '';

document.getElementById('bankField').value = '';

document.getElementById('bkashField').value = '';

document.getElementById('mobileField').value = '';

document.getElementById('withdrawSuccessMsg').classList.add('hide');

document.querySelector('input[name="method"][value="bank"]').checked = true;

toggleMethodFields();

}

function hideWithdrawForm(){document.getElementById('withdrawFormBox').classList.add('hide');}

function toggleMethodFields(){

let method = document.querySelector('input[name="method"]:checked').value;

document.getElementById('bankField').classList.toggle('hide', method!=='bank');

document.getElementById('bkashField').classList.toggle('hide', method!=='bkash');

document.getElementById('mobileField').classList.toggle('hide', method!=='mobile');

}

function methodLabel(method){

if(method==='bank') return 'Bank Account';

if(method==='bkash') return 'Bkash Number';

if(method==='mobile') return 'Mobile Recharge';

return method;

}

function submitWithdraw(e){

e.preventDefault();

let amount = parseInt(document.getElementB

79691301