admin/marco.asseto.prototype
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
marco.asseto.prototype/reports.html
Vaibhav Surve 2dfe150a5c feat: AMS V1 — multi-page HTML prototype 
- 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
2026-05-28 18:09:32 +05:30

333 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Reports & Audit | AMS</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
<div class="app-layout">
<aside class="sidebar">
<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</a>
<a href="procurement.html" class="nav-item"><span class="nav-icon">🛒</span> Procurement</a>
<div class="nav-section-label">Operations</div>
<a href="maintenance.html" class="nav-item"><span class="nav-icon">🔧</span> Maintenance</a>
<a href="reports.html" class="nav-item active"><span class="nav-icon">📈</span> Reports &amp; Audit</a>
<div class="nav-section-label">Administration</div>
<a href="users.html" class="nav-item"><span class="nav-icon">👥</span> Users</a>
<a href="settings.html" class="nav-item"><span class="nav-icon">⚙️</span> Settings</a>
</nav>
<div class="sidebar-footer"><div class="user-card"><div class="user-av">AS</div><div style="flex:1;min-width:0"><div class="user-name">Arjun Sharma</div><div class="user-role">Asset Manager</div></div></div></div>
</aside>
<div class="main-wrapper">
<header class="topbar">
<div class="topbar-left"><div class="topbar-title">Reports &amp; Audit</div></div>
<div class="topbar-actions">
<button class="btn btn-secondary btn-sm" onclick="exportAll()">📥 Export All Reports</button>
<a href="index.html" class="icon-btn">🚪</a>
</div>
</header>
<main class="content">
<!-- Report Cards Grid -->
<div class="grid-3 mb-5" id="reportCards"></div>
<!-- Tabs -->
<div class="tab-container">
<div class="tabs" data-group="rpt">
<button class="tab-btn active" data-tab="tab-depreciation" data-group="rpt">💰 Depreciation Schedule</button>
<button class="tab-btn" data-tab="tab-utilization" data-group="rpt">📊 Utilization</button>
<button class="tab-btn" data-tab="tab-financial" data-group="rpt">🏦 Financial Summary</button>
<button class="tab-btn" data-tab="tab-compliance" data-group="rpt">🔍 Compliance</button>
</div>
<!-- Depreciation Schedule -->
<div class="tab-content active" id="tab-depreciation" data-group="rpt">
<div class="card mb-4">
<div class="card-header">
<span class="card-title">💰 Depreciation Schedule — FY 2025-26</span>
<div class="flex gap-2">
<select class="filter-sel"><option>All Methods</option><option>SLM</option><option>WDV</option></select>
<button class="btn btn-primary btn-sm" onclick="genDepReport()">Generate PDF</button>
<button class="btn btn-secondary btn-sm" onclick="exportDep()">📥 CSV</button>
</div>
</div>
<div class="card-body">
<div class="grid-4 mb-4">
<div class="stat-card" style="--sc-color:var(--primary)"><div class="stat-icon" style="background:var(--primary-glow);color:var(--primary)">📦</div><div class="stat-label">Gross Block</div><div class="stat-value" style="color:var(--primary)">₹4.29Cr</div></div>
<div class="stat-card" style="--sc-color:var(--danger)"><div class="stat-icon" style="background:var(--danger-bg);color:var(--danger)">📉</div><div class="stat-label">Acc. Depreciation</div><div class="stat-value" style="color:var(--danger)">₹1.28Cr</div></div>
<div class="stat-card" style="--sc-color:var(--success)"><div class="stat-icon" style="background:var(--success-bg);color:var(--success)">💎</div><div class="stat-label">Net Block</div><div class="stat-value" style="color:var(--success)">₹3.01Cr</div></div>
<div class="stat-card" style="--sc-color:var(--warning)"><div class="stat-icon" style="background:var(--warning-bg);color:var(--warning)">📅</div><div class="stat-label">FY Dep. Charge</div><div class="stat-value" style="color:var(--warning)">₹52.4L</div></div>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead><tr><th>Asset ID</th><th>Asset Name</th><th>Category</th><th>Gross Cost</th><th>Method</th><th>Rate</th><th>Acc. Dep.</th><th>Net Value</th><th>Dep. (FY)</th><th>Useful Life Left</th></tr></thead>
<tbody id="depTbody"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Utilization -->
<div class="tab-content" id="tab-utilization" data-group="rpt">
<div class="grid-2 mb-4">
<div class="card">
<div class="card-header"><span class="card-title">📊 Asset Utilization by Department</span></div>
<div class="card-body"><canvas id="utilDeptChart" height="240"></canvas></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">📈 Utilization Rate by Category</span></div>
<div class="card-body"><canvas id="utilCatChart" height="240"></canvas></div>
</div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">😴 Idle Assets Report — 30+ Days</span>
<button class="btn btn-secondary btn-sm" onclick="showToast('Export','Idle assets list exported','info')">📥 Export</button>
</div>
<div class="card-body">
<div class="table-wrapper">
<table class="data-table">
<thead><tr><th>Asset</th><th>Category</th><th>Dept</th><th>Last Assigned</th><th>Idle Since</th><th>Net Value</th><th>Recommendation</th></tr></thead>
<tbody id="idleTbody"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Financial -->
<div class="tab-content" id="tab-financial" data-group="rpt">
<div class="grid-2 mb-4">
<div class="card">
<div class="card-header"><span class="card-title">💰 Capex vs Opex (Last 12 Months)</span></div>
<div class="card-body"><canvas id="capexChart" height="240"></canvas></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">📊 Asset Value by Department</span></div>
<div class="card-body"><canvas id="deptValueChart" height="240"></canvas></div>
</div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">💳 Budget vs Actual Spend</span></div>
<div class="card-body">
<div class="table-wrapper">
<table class="data-table">
<thead><tr><th>Department</th><th>FY Budget</th><th>Spent YTD</th><th>Balance</th><th>Utilization %</th></tr></thead>
<tbody id="budgetTbody"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Compliance -->
<div class="tab-content" id="tab-compliance" data-group="rpt">
<div class="grid-2 mb-4">
<div class="card">
<div class="card-header"><span class="card-title">✅ Audit Checklist — Pre-Launch</span></div>
<div class="card-body" id="auditChecklist"></div>
</div>
<div class="card">
<div class="card-header"><span class="card-title">📊 Compliance Score</span></div>
<div class="card-body" style="text-align:center">
<div style="position:relative;display:inline-block;margin:20px auto">
<canvas id="complianceGauge" width="200" height="200"></canvas>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-40%);text-align:center">
<div style="font-size:34px;font-weight:800;color:var(--success)">98.4%</div>
<div style="font-size:12px;color:var(--text-muted)">Compliance Score</div>
</div>
</div>
<div class="info-grid" style="margin-top:12px">
<div class="info-item"><div class="info-label">Verified Assets</div><div class="info-value" style="color:var(--success)">1,228 / 1,247</div></div>
<div class="info-item"><div class="info-label">Unverified</div><div class="info-value" style="color:var(--danger)">19</div></div>
<div class="info-item"><div class="info-label">Warranty Coverage</div><div class="info-value">84.6%</div></div>
<div class="info-item"><div class="info-label">Insured Assets</div><div class="info-value">62.3%</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="toast-container" id="toastContainer"></div>
<script src="js/data.js"></script>
<script src="js/app.js"></script>
<script>
const reportDefs = [
{ icon:'💰', title:'Depreciation Schedule', desc:'SLM/WDV depreciation for all assets. Year-wise breakdown with opening and closing values.', color:'var(--primary)', bg:'var(--primary-glow)', tab:'tab-depreciation' },
{ icon:'📊', title:'Asset Utilization Report', desc:'Assigned vs idle assets by dept. & category. Highlights under-utilized and idle assets.', color:'var(--cyan)', bg:'var(--cyan-glow)', tab:'tab-utilization' },
{ icon:'📦', title:'Physical Audit Report', desc:'Comparison of system records vs physical count. Discrepancy list with status.', color:'var(--warning)', bg:'var(--warning-bg)', tab:'tab-compliance' },
{ icon:'💳', title:'Capital Expenditure Report', desc:'Asset acquisitions by period, vendor, category. Budget vs actual spend analysis.', color:'var(--success)', bg:'var(--success-bg)', tab:'tab-financial' },
{ icon:'🗑️', title:'Disposal & Write-off Report',desc:'All disposed assets with reason, approval chain, write-off amount, and accounting entries.', color:'var(--danger)', bg:'var(--danger-bg)', tab:'tab-financial' },
{ icon:'🔧', title:'Maintenance Cost Report', desc:'Ticket-wise maintenance spend, vendor-wise costs, preventive vs reactive breakdown.', color:'var(--purple)', bg:'var(--purple-bg)', tab:'tab-utilization' },
{ icon:'📅', title:'Warranty Expiry Forecast', desc:'Assets whose warranty expires in next 30/60/90 days. Action alerts.', color:'var(--warning)', bg:'var(--warning-bg)', tab:'tab-compliance' },
{ icon:'🏦', title:'Asset Register (Trial Balance)',desc:'Complete asset register as required by Companies Act / Income Tax for audit purposes.', color:'var(--info)', bg:'var(--info-bg)', tab:'tab-depreciation' },
{ icon:'🔄', title:'Asset Movement Report', desc:'All transfers, assignments, and returns in selected period.', color:'var(--cyan)', bg:'var(--cyan-glow)', tab:'tab-utilization' }
];
document.addEventListener('DOMContentLoaded', () => {
renderReportCards();
renderDepreciation();
renderUtilization();
renderFinancial();
renderCompliance();
initCharts();
initTabs();
});
function renderReportCards() {
document.getElementById('reportCards').innerHTML = reportDefs.map(r=>`
<div class="report-card" onclick="jumpToTab('${r.tab}')">
<div class="report-icon" style="background:${r.bg};color:${r.color}">${r.icon}</div>
<div class="report-title">${r.title}</div>
<div class="report-desc">${r.desc}</div>
<div class="flex gap-2 mt-3">
<button class="btn btn-ghost btn-sm" style="font-size:11px;color:${r.color}" onclick="event.stopPropagation();genReport('${r.title}')">📄 Generate</button>
<button class="btn btn-ghost btn-sm" style="font-size:11px" onclick="event.stopPropagation();exportReport('${r.title}')">📥 Export CSV</button>
</div>
</div>`).join('');
}
function jumpToTab(tabId) {
const btn = document.querySelector(`[data-tab="${tabId}"]`);
if(btn) btn.click();
window.scrollTo(0,400);
}
function renderDepreciation() {
document.getElementById('depTbody').innerHTML = AMS.assets.slice(0,15).map(a => {
const years = Math.floor((new Date()-new Date(a.purchase))/(365.25*24*3600*1000));
const accDep = a.cost - a.value;
const fyDep = a.depM==='SLM' ? Math.round(a.cost*a.depR/100) : Math.round(a.value*a.depR/100);
const lifeLeft = Math.max(0, Math.ceil((a.value - a.cost*0.05) / Math.max(1,fyDep)));
return `<tr>
<td><code style="font-size:11px;color:var(--primary-light)">${a.id}</code></td>
<td><div style="font-weight:600;color:var(--text-primary)">${a.name}</div></td>
<td><span class="badge badge-neutral" style="font-size:9.5px">${a.cat}</span></td>
<td>${fmt(a.cost)}</td>
<td><span class="badge ${a.depM==='SLM'?'badge-info':'badge-purple'}">${a.depM}</span></td>
<td>${a.depR}%</td>
<td style="color:var(--danger)">${fmt(accDep)}</td>
<td style="font-weight:700;color:var(--success)">${fmt(a.value)}</td>
<td style="color:var(--warning)">${fmt(fyDep)}</td>
<td>${lifeLeft} yr${lifeLeft!==1?'s':''}</td>
</tr>`;
}).join('');
}
function renderUtilization() {
const idles = AMS.assets.filter(a=>a.status==='Idle');
document.getElementById('idleTbody').innerHTML = idles.map(a=>`
<tr>
<td><div style="font-weight:600;color:var(--text-primary)">${a.name}</div></td>
<td><span class="badge badge-neutral">${a.cat}</span></td>
<td>${a.dept}</td>
<td>${fmtDate(a.purchase)}</td>
<td style="color:var(--warning)">90+ days</td>
<td style="font-weight:700">${fmt(a.value)}</td>
<td><span class="badge badge-info">Reallocate</span></td>
</tr>`).join('');
}
function renderFinancial() {
const budgets = [
{ dept:'IT', budget:1500000, spent:1124000 },
{ dept:'Finance', budget:400000, spent:287000 },
{ dept:'HR', budget:350000, spent:198000 },
{ dept:'Operations',budget:800000, spent:643000 },
{ dept:'Marketing', budget:600000, spent:524000 },
{ dept:'Admin', budget:500000, spent:312000 }
];
document.getElementById('budgetTbody').innerHTML = budgets.map(b=>{
const pct = Math.round(b.spent/b.budget*100);
return `<tr>
<td style="font-weight:600;color:var(--text-primary)">${b.dept}</td>
<td>${fmt(b.budget)}</td>
<td style="color:var(--warning)">${fmt(b.spent)}</td>
<td style="color:${b.budget-b.spent>0?'var(--success)':'var(--danger)'}">${fmt(b.budget-b.spent)}</td>
<td>
<div class="flex items-center gap-2">
<div class="progress-wrap flex-1" style="height:6px"><div class="progress-fill" style="width:${pct}%;background:${pct>90?'linear-gradient(90deg,var(--warning),var(--danger))':'linear-gradient(90deg,var(--primary),var(--cyan))'}"></div></div>
<span style="font-size:12px;font-weight:700;min-width:32px">${pct}%</span>
</div>
</td>
</tr>`;
}).join('');
}
function renderCompliance() {
const checks = [
{ label:'All assets have unique Asset IDs', done:true },
{ label:'All IT assets have serial numbers', done:true },
{ label:'QR codes generated for all assets', done:true },
{ label:'Physical audit completed within last 6 months', done:false },
{ label:'Depreciation schedule up to date', done:true },
{ label:'All vehicles have valid insurance', done:false },
{ label:'Warranty tracking active for all assets', done:true },
{ label:'Disposal records maintained with approvals',done:true },
{ label:'RBAC roles assigned to all users', done:true },
{ label:'Backup of asset data taken this month', done:true }
];
document.getElementById('auditChecklist').innerHTML = checks.map(c=>`
<div class="flex items-center gap-3 mb-3">
<div style="width:22px;height:22px;border-radius:50%;background:${c.done?'var(--success-bg)':'var(--danger-bg)'};color:${c.done?'var(--success)':'var(--danger)'};display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0">${c.done?'✓':'✕'}</div>
<span style="font-size:13px;color:${c.done?'var(--text-secondary)':'var(--text-primary)'};">${c.label}</span>
${!c.done?`<span class="badge badge-danger" style="margin-left:auto;font-size:9px">Action Needed</span>`:''}
</div>`).join('');
}
function initCharts() {
const gridColor='rgba(255,255,255,.04)', tick={color:'#4B5563',font:{family:'Inter',size:11}};
// Dept Utilization
new Chart(document.getElementById('utilDeptChart'),{type:'bar',data:{labels:['IT','Finance','HR','Operations','Marketing','Admin'],
datasets:[{label:'Assigned',data:[340,130,98,265,172,95],backgroundColor:'rgba(99,102,241,.7)',borderRadius:4},{label:'Idle',data:[44,26,14,33,15,15],backgroundColor:'rgba(245,158,11,.5)',borderRadius:4}]},
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{color:'#94A3B8',font:{family:'Inter',size:11},usePointStyle:true}}},scales:{x:{stacked:true,grid:{color:gridColor},ticks:tick},y:{stacked:true,grid:{color:gridColor},ticks:tick}}}});
// Category Utilization
new Chart(document.getElementById('utilCatChart'),{type:'bar',data:{labels:AMS.categories.slice(0,7).map(c=>c.name),
datasets:[{label:'Utilization %',data:[95,87,100,78,92,85,72],backgroundColor:AMS.categories.slice(0,7).map((_,i)=>`hsl(${230+i*15},70%,60%)`),borderRadius:5}]},
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{grid:{color:gridColor},ticks:{...tick,maxRotation:45}},y:{grid:{color:gridColor},ticks:{...tick,callback:v=>v+'%'},max:100}}}});
// Capex Chart
const months=['Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May'];
new Chart(document.getElementById('capexChart'),{type:'line',data:{labels:months,datasets:[
{label:'Capex',data:[280000,150000,420000,180000,310000,95000,580000,220000,165000,340000,495000,285000],borderColor:'#6366F1',backgroundColor:'rgba(99,102,241,.1)',fill:true,tension:.4,pointRadius:3,borderWidth:2},
{label:'Opex (Maintenance)',data:[45000,62000,38000,71000,55000,88000,42000,95000,61000,73000,82000,67000],borderColor:'#10B981',backgroundColor:'rgba(16,185,129,.08)',fill:true,tension:.4,pointRadius:3,borderWidth:2}
]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{color:'#94A3B8',font:{family:'Inter',size:11},usePointStyle:true}}},scales:{x:{grid:{color:gridColor},ticks:tick},y:{grid:{color:gridColor},ticks:{...tick,callback:v=>'₹'+(v/1000).toFixed(0)+'K'}}}}});
// Dept Value
new Chart(document.getElementById('deptValueChart'),{type:'doughnut',data:{labels:['IT','Finance','HR','Operations','Marketing','Admin'],
datasets:[{data:[15800000,6200000,4100000,8900000,5400000,2700000],backgroundColor:['#6366F1','#06B6D4','#A855F7','#10B981','#F59E0B','#3B82F6'],borderColor:'rgba(19,25,38,0)',hoverOffset:5}]},
options:{responsive:true,maintainAspectRatio:false,cutout:'60%',plugins:{legend:{position:'right',labels:{color:'#94A3B8',font:{family:'Inter',size:11},usePointStyle:true}}}}});
// Compliance Gauge
const ctx=document.getElementById('complianceGauge').getContext('2d');
new Chart(ctx,{type:'doughnut',data:{datasets:[{data:[98.4,1.6],backgroundColor:['#10B981','rgba(239,68,68,.2)'],borderColor:'rgba(19,25,38,0)',borderWidth:0}]},
options:{responsive:false,cutout:'72%',plugins:{legend:{display:false}}}});
}
function genReport(name) { showToast('Generating PDF',`${name} PDF report being prepared…`,'info'); }
function exportReport(name) { showToast('Export',`${name} exported to CSV`,'success'); }
function genDepReport() { showToast('PDF Generated','Depreciation Schedule PDF ready for download','success'); }
function exportDep() { downloadCSV(AMS.assets.map(a=>({ID:a.id,Name:a.name,Cat:a.cat,Cost:a.cost,Method:a.depM,Rate:a.depR+'%',AccDep:a.cost-a.value,NetValue:a.value})),'depreciation_schedule.csv'); }
function exportAll() { showToast('Bulk Export','All reports being packaged as ZIP…','info'); }
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink