Scan to open on your phone
Point a camera at the QR code - it opens this exact paste, no app needed.
https://codepastes.com/zzgth0ea6ygcp3gduntitledPlain Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abul Khair Steel - Mobile Power BI Dashboard</title>
<script src="https://tailwindcss.com"></script>
<link rel="stylesheet" href="https://cloudflare.com">
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f3f2f1; }
.pbi-yellow { background-color: #f2c811; color: #252423; }
.pbi-dark { background-color: #252423; }
.card-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); }
.mobile-tab-active { color: #f2c811; border-top: 3px solid #f2c811; font-weight: bold; }
</style>
</head>
<body class="h-screen flex flex-col justify-between overflow-hidden bg-gray-50">
<!-- App Branding Banner Header -->
<header class="pbi-dark text-white h-14 flex items-center justify-between px-4 shrink-0 shadow-md">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-chart-bar text-yellow-400 text-lg"></i>
<h1 class="text-sm font-bold tracking-wide uppercase">AKS Workforce Hub</h1>
</div>
<button onclick="openModal()" class="pbi-yellow text-xs font-bold px-3 py-1.5 rounded flex items-center space-x-1 shadow">
<i class="fa-solid fa-plus"></i> <span>Add New</span>
</button>
</header>
<!-- Dynamic Filter Toolbar Strip -->
<section class="bg-white p-3 border-b border-gray-200 grid grid-cols-2 gap-2 shrink-0 card-shadow text-xs">
<select id="filter-dept" onchange="applyFilters()" class="border border-gray-300 rounded p-1.5 bg-gray-50 outline-none">
<option value="">All Departments</option>
</select>
<input type="text" id="filter-search" oninput="applyFilters()" placeholder="Search name, ID, region..." class="border border-gray-300 rounded p-1.5 bg-gray-50 outline-none">
</section>
<!-- Scrollable Profile View Workspace Canvas -->
<main class="flex-1 overflow-y-auto p-4 space-y-3 pb-20">
<!-- Live KPI Snapshot Grid Overview -->
<div class="grid grid-cols-3 gap-2">
<div class="bg-white p-3 rounded text-center card-shadow border-t-4 border-yellow-400">
<span class="text-[10px] text-gray-400 font-bold uppercase block">Active</span>
<span id="kpi-active" class="text-lg font-black text-gray-800">--</span>
</div>
<div class="bg-white p-3 rounded text-center card-shadow border-t-4 border-blue-500">
<span class="text-[10px] text-gray-400 font-bold uppercase block">Mgt</span>
<span id="kpi-mgt" class="text-lg font-black text-gray-800">--</span>
</div>
<div class="bg-white p-3 rounded text-center card-shadow border-t-4 border-red-500">
<span class="text-[10px] text-gray-400 font-bold uppercase block">Exit</span>
<span id="kpi-exit" class="text-lg font-black text-gray-800">--</span>
</div>
</div>
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider pt-2 flex justify-between items-center">
<span id="grid-headline">Active Registry Data Pool</span>
<span id="grid-counter" class="text-[11px] text-gray-500 bg-gray-200 px-2 py-0.5 rounded">-- items</span>
</div>
<!-- Target Mobile Cards Output Layout -->
<div id="cards-target-container" class="space-y-3">
<!-- Dynamic Mobile Profile Cards Output Managed via Script Below -->
</div>
</main>
<!-- Mobile-optimized Bottom Navigation Sheet Control Tab Bar Links Container -->
<footer class="pbi-dark text-gray-400 h-16 fixed bottom-0 left-0 right-0 border-t border-gray-800 flex items-center justify-around text-center z-40">
<button onclick="switchTab('active')" id="tab-active" class="flex-1 h-full flex flex-col items-center justify-center space-y-1 mobile-tab-active">
<i class="fa-solid fa-users text-lg"></i>
<span class="text-[11px]">Active Roster</span>
</button>
<button onclick="switchTab('turnover')" id="tab-turnover" class="flex-1 h-full flex flex-col items-center justify-center space-y-1">
<i class="fa-solid fa-clock-rotate-left text-lg"></i>
<span class="text-[11px]">Turnover Sheets</span>
</button>
</footer>
<!-- Onboarding Dialog Modal Layer Screen Overlay -->
<div id="form-modal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 hidden">
<div class="bg-white w-full max-w-md rounded-lg overflow-hidden shadow-2xl flex flex-col max-h-[90vh]">
<header class="pbi-dark text-white p-4 flex justify-between items-center">
<h3 class="font-bold text-sm"><i class="fa-solid fa-user-plus mr-2 text-yellow-400"></i> New Employee Onboarding</h3>
<button onclick="closeModal()" class="text-gray-400 text-lg"><i class="fa-solid fa-xmark"></i></button>
</header>
<form onsubmit="commitEntry(event)" class="p-4 space-y-3 overflow-y-auto text-xs font-medium text-gray-700">
<div>
<label class="block text-gray-400 font-bold mb-1">Oracle ID</label>
<input type="number" id="inp-id" required class="w-full border border-gray-300 rounded p-2">
</div>
<div>
<label class="block text-gray-400 font-bold mb-1">Employee Name</label>
<input type="text" id="inp-name" required class="w-full border border-gray-300 rounded p-2">
</div>
<div>
<label class="block text-gray-400 font-bold mb-1">Designation</label>
<input type="text" id="inp-desig" required class="w-full border border-gray-300 rounded p-2">
</div>
<div>
<label class="block text-gray-400 font-bold mb-1">Department</label>
<input type="text" id="inp-dept" required class="w-full border border-gray-300 rounded p-2">
</div>
<div>
<label class="block text-gray-400 font-bold mb-1">Operational Facility Unit</label>
<input type="text" id="inp-unit" required class="w-full border border-gray-300 rounded p-2">
</div>
<div>
<label class="block text-gray-400 font-bold mb-1">Org Status</label>
<select id="inp-status" class="w-full border border-gray-300 rounded p-2 bg-white">
<option value="Mgt.">Mgt.</option>
<option value="Non-Mgt.">Non-Mgt.</option>
</select>
</div>
<div class="pt-2 flex justify-end space-x-2">
<button type="button" onclick="closeModal()" class="bg-gray-100 px-4 py-2 rounded font-bold text-gray-700">Cancel</button>
<button type="submit" class="pbi-yellow px-4 py-2 rounded font-bold shadow">Save Profile</button>
</div>
</form>
</div>
</div>
<script>
// High fidelity baseline data array storage layout tracking properties
const CORE_WORKFORCE_STORE = [
{id:28507,name:"Mr.Shahadat Hossain",desig:"Assistant General Manager",dept:"Production",status:"Mgt.",unit:"Rolling"},
{id:6627,name:"Mr. Bappa Chowdury",desig:"Manager",dept:"Production",status:"Mgt.",unit:"Rolling"},
{id:19643,name:"Mr.Mashnun Kader Alvi",desig:"Deputy Manager",dept:"Production",status:"Mgt.",unit:"Rolling"},
{id:150,name:"Mr. Md. Mahmudul Haque Nizami",desig:"Assistant Manager",dept:"Production",status:"Mgt.",unit:"Rolling"},
{id:1055,name:"Mr. Mehedi Hasan",desig:"Senior Manager",dept:"Mechanical",status:"Mgt.",unit:"Rolling"},
{id:12087,name:"Mr.Md. Mokter Ali",desig:"Sr.Foreman",dept:"Mechanical",status:"Non-Mgt.",unit:"Rolling"},
{id:541,name:"Mr.Sanjoy Roy Chowdhury",desig:"Assistant General Manager",dept:"Electrical",status:"Mgt.",unit:"Rolling"}
];
const CORE_TURNOVER_STORE = [
{id:10861,name:"Mr.Dulal Kanti Chy",desig:"Foreman",dept:"Mechanical",status:"Non-Mgt",unit:"Melting",reason:"Retired"},
{id:25817,name:"Mr.Md. Jamal Uddin",desig:"Officer",dept:"QAD",status:"Mgt.",unit:"Melting",reason:"Resigned"}
];
let activeRoster = [];
let turnoverRoster = [];
let currentTab = 'active';
window.onload = function() {
if(localStorage.getItem('aks_active')) {
activeRoster = JSON.parse(localStorage.getItem('aks_active'));
turnoverRoster = JSON.parse(localStorage.getItem('aks_turnover'));
} else {
activeRoster = [...CORE_WORKFORCE_STORE];
turnoverRoster = [...CORE_TURNOVER_STORE];
syncLocalStorage();
}
buildFilterDropdown();
renderDashboard();
};
function syncLocalStorage() {
localStorage.setItem('aks_active', JSON.stringify(activeRoster));
localStorage.setItem('aks_turnover', JSON.stringify(turnoverRoster));
}
function buildFilterDropdown() {
const depts = new Set();
activeRoster.concat(turnoverRoster).forEach(e => depts.add(e.dept));
const select = document.getElementById('filter-dept');
depts.forEach(d => select.innerHTML += `<option value="${d}">${d}</option>`);
}
function switchTab(tab) {
currentTab = tab;
9,876 chars · codepastes.com