Vaibhav Surve
2dfe150a5c
- Login page with animated floating stat cards - Executive dashboard with Chart.js KPIs and activity feed - Full asset registry (list, search, filter, bulk actions, QR) - Asset detail page with 6 tabs (financial, maintenance, history…) - 3-step asset creation wizard with category-specific fields - Inventory: stock overview, GRN, location tree, physical audit - Procurement: PR → approval → PO → GRN → asset lifecycle - Maintenance: Kanban board, PM schedule, AMC contracts - Reports: depreciation schedule, utilization, compliance gauge - User management: roles, permission matrix, session control - Settings: 8 config sections (org, depreciation, security, integrations) - Premium dark UI with CSS variables, Chart.js 4, toast system
92 lines
4.5 KiB
JavaScript
92 lines
4.5 KiB
JavaScript
// js/sidebar.js — shared sidebar & topbar HTML injector
|
||
// Include this after data.js and app.js in every authenticated page.
|
||
// Call: renderShell(pageTitle, pageSubtitle) inside <body> before main content.
|
||
|
||
function renderShell(pageTitle, pageSubtitle = '') {
|
||
const u = window.AMS ? AMS.currentUser : { name:'Arjun Sharma', role:'Asset Manager', avatar:'AS' };
|
||
const notifUnread = window.AMS ? AMS.notifications.filter(n=>!n.read).length : 0;
|
||
|
||
const sidebarHTML = `
|
||
<aside class="sidebar" id="appSidebar">
|
||
<div class="sidebar-logo">
|
||
<div class="logo-icon">📦</div>
|
||
<div>
|
||
<div class="logo-title">AMS</div>
|
||
<div class="logo-sub">Asset Management</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<div class="nav-section-label">Overview</div>
|
||
<a href="dashboard.html" class="nav-item"><span class="nav-icon">📊</span> Dashboard</a>
|
||
|
||
<div class="nav-section-label">Assets</div>
|
||
<a href="assets.html" class="nav-item"><span class="nav-icon">📦</span> All Assets</a>
|
||
<a href="asset-create.html"class="nav-item"><span class="nav-icon">➕</span> Add Asset</a>
|
||
|
||
<div class="nav-section-label">Supply Chain</div>
|
||
<a href="inventory.html" class="nav-item"><span class="nav-icon">🏪</span> Inventory <span class="nav-badge" style="background:var(--warning)">5</span></a>
|
||
<a href="procurement.html" class="nav-item"><span class="nav-icon">🛒</span> Procurement <span class="nav-badge">${window.AMS?AMS.stats.pendingPRs:8}</span></a>
|
||
|
||
<div class="nav-section-label">Operations</div>
|
||
<a href="maintenance.html" class="nav-item"><span class="nav-icon">🔧</span> Maintenance <span class="nav-badge">${window.AMS?AMS.stats.pendingTickets:12}</span></a>
|
||
<a href="reports.html" class="nav-item"><span class="nav-icon">📈</span> Reports & Audit</a>
|
||
|
||
<div class="nav-section-label">Administration</div>
|
||
<a href="users.html" class="nav-item"><span class="nav-icon">👥</span> Users & Roles</a>
|
||
<a href="settings.html" class="nav-item"><span class="nav-icon">⚙️</span> Settings</a>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="user-card" onclick="showToast('Profile','User profile settings coming soon','info')">
|
||
<div class="user-av" id="sidebarUserAv">${u.avatar}</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div class="user-name" id="sidebarUserName">${u.name}</div>
|
||
<div class="user-role" id="sidebarUserRole">${u.role}</div>
|
||
</div>
|
||
<span style="color:var(--text-muted);font-size:14px">⋮</span>
|
||
</div>
|
||
</div>
|
||
</aside>`;
|
||
|
||
const topbarHTML = `
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<div class="topbar-title">${pageTitle}${pageSubtitle?`<span class="topbar-sub">${pageSubtitle}</span>`:''}</div>
|
||
</div>
|
||
<div class="topbar-search">
|
||
<span style="color:var(--text-muted);font-size:14px">🔍</span>
|
||
<input type="text" placeholder="Search assets, tickets, users…" id="globalSearch">
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<div class="dropdown" style="position:relative">
|
||
<button class="icon-btn" id="notifBell" title="Notifications">
|
||
🔔
|
||
<span class="badge-dot" ${notifUnread===0?'style="display:none"':''}></span>
|
||
</button>
|
||
<div class="notif-panel" id="notifPanel">
|
||
<div class="notif-header">
|
||
<span class="notif-title">Notifications</span>
|
||
<button class="btn btn-ghost btn-sm" onclick="markAllRead()" style="font-size:11px">Mark all read</button>
|
||
</div>
|
||
<div id="notifList"></div>
|
||
<div style="padding:10px 16px;text-align:center;border-top:1px solid var(--border)">
|
||
<a href="#" style="font-size:12px;color:var(--primary-light)">View all notifications</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="icon-btn" title="Help" onclick="showToast('Help','Documentation is available at /docs','info')">❓</button>
|
||
<a href="index.html" class="icon-btn" title="Logout" onclick="return confirm('Log out?')">🚪</a>
|
||
</div>
|
||
</header>`;
|
||
|
||
document.body.innerHTML = sidebarHTML + `<div class="main-wrapper">${topbarHTML}<main class="content animate-fadein" id="mainContent"></main></div>` + document.body.innerHTML;
|
||
}
|
||
|
||
function markAllRead() {
|
||
if (window.AMS) AMS.notifications.forEach(n => n.read = true);
|
||
populateNotifBadge();
|
||
renderNotifPanel();
|
||
showToast('All caught up!','All notifications marked as read','success');
|
||
}
|