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
401 lines
21 KiB
HTML
401 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
<title>Add New Asset | 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">
|
||
</head>
|
||
<body>
|
||
<div class="app-layout">
|
||
<!-- SIDEBAR -->
|
||
<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 active"><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"><span class="nav-icon">📈</span> Reports</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>
|
||
|
||
<!-- MAIN -->
|
||
<div class="main-wrapper">
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<a href="assets.html" class="btn btn-ghost btn-sm" style="margin-right:6px">← Back to Assets</a>
|
||
<div class="topbar-title">Add New Asset</div>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<button class="btn btn-secondary btn-sm" onclick="saveDraft()">💾 Save Draft</button>
|
||
<a href="index.html" class="icon-btn">🚪</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="content">
|
||
<div style="display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start">
|
||
<!-- Step Sidebar -->
|
||
<div class="card p-5" id="stepsSidebar">
|
||
<div style="font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px">Creation Steps</div>
|
||
<div id="stepNav"></div>
|
||
<hr class="divider">
|
||
<div style="font-size:11.5px;color:var(--text-muted)">
|
||
<div class="mb-2">💡 <strong style="color:var(--text-secondary)">Auto-generated:</strong></div>
|
||
<div style="margin-bottom:4px">• Asset ID: <code style="color:var(--primary-light)" id="previewId">AST-2025-021</code></div>
|
||
<div>• QR code on save</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Form Area -->
|
||
<div id="formArea">
|
||
<!-- Step 1 -->
|
||
<div class="card" id="step1" data-step="1">
|
||
<div class="card-header"><span class="card-title">📋 Step 1: Basic Information</span></div>
|
||
<div class="card-body">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Asset Name <span class="req">*</span></label>
|
||
<input type="text" class="form-input" id="assetName" placeholder="e.g. Dell Latitude 5540 Laptop" oninput="updatePreview()">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Category <span class="req">*</span></label>
|
||
<select class="form-select" id="assetCategory" onchange="renderCustomFields()">
|
||
<option value="">Select category…</option>
|
||
<option>Laptops</option><option>Desktops</option><option>Servers</option>
|
||
<option>Printers</option><option>Networking</option><option>Mobile Devices</option>
|
||
<option>AV Equipment</option><option>Displays</option><option>Furniture</option>
|
||
<option>Vehicles</option><option>HVAC</option><option>Power Equipment</option><option>Storage</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Serial Number</label>
|
||
<input type="text" class="form-input" id="serialNo" placeholder="Manufacturer serial number">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Model / Part Number</label>
|
||
<input type="text" class="form-input" id="modelNo" placeholder="Model identifier">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Brand / Manufacturer</label>
|
||
<input type="text" class="form-input" id="brand" placeholder="e.g. Dell, HP, Apple">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status <span class="req">*</span></label>
|
||
<select class="form-select" id="assetStatus">
|
||
<option>Active</option><option>Idle</option><option>Under Maintenance</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Description</label>
|
||
<textarea class="form-textarea" placeholder="Optional description or notes about this asset…" rows="2"></textarea>
|
||
</div>
|
||
|
||
<!-- Custom Fields -->
|
||
<div id="customFieldsSection" style="display:none">
|
||
<hr class="divider">
|
||
<div class="section-hdr">Category-specific Fields</div>
|
||
<div id="customFieldsGrid" class="form-row"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 2 -->
|
||
<div class="card mt-4" id="step2" data-step="2">
|
||
<div class="card-header"><span class="card-title">💰 Step 2: Purchase & Financial Details</span></div>
|
||
<div class="card-body">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Vendor / Supplier <span class="req">*</span></label>
|
||
<select class="form-select" id="assetVendor">
|
||
<option value="">Select vendor…</option>
|
||
<option>Dell India Pvt. Ltd.</option><option>HP India Pvt. Ltd.</option>
|
||
<option>Cisco Systems India</option><option>Apple India</option>
|
||
<option>Lenovo India</option><option>Daikin India</option>
|
||
<option>Samsung India</option><option>Godrej Interio</option>
|
||
<option value="new">+ Add New Vendor</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Purchase Date <span class="req">*</span></label>
|
||
<input type="date" class="form-input" id="purchaseDate" value="2025-05-28">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Purchase Cost (₹) <span class="req">*</span></label>
|
||
<div class="input-group">
|
||
<span class="input-prefix">₹</span>
|
||
<input type="number" class="form-input" id="purchaseCost" placeholder="0.00" oninput="calcDepreciation()" style="border-radius:0 var(--radius-md) var(--radius-md) 0;border-left:none">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Invoice / PO Reference</label>
|
||
<input type="text" class="form-input" id="invoiceRef" placeholder="INV-2025-XXXX or PO-XXXX">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Warranty Expiry</label>
|
||
<input type="date" class="form-input" id="warrantyDate">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Warranty Type</label>
|
||
<select class="form-select"><option>On-site</option><option>Carry-in</option><option>Comprehensive AMC</option><option>No Warranty</option></select>
|
||
</div>
|
||
</div>
|
||
<hr class="divider">
|
||
<div class="section-hdr">Depreciation Configuration</div>
|
||
<div class="form-row-3">
|
||
<div class="form-group">
|
||
<label class="form-label">Method <span class="req">*</span></label>
|
||
<select class="form-select" id="depMethod" onchange="calcDepreciation()">
|
||
<option value="SLM">SLM – Straight Line</option>
|
||
<option value="WDV">WDV – Written Down Value</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Rate (% p.a.) <span class="req">*</span></label>
|
||
<input type="number" class="form-input" id="depRate" value="20" min="1" max="100" oninput="calcDepreciation()">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Residual Value (₹)</label>
|
||
<input type="number" class="form-input" id="residualValue" placeholder="0">
|
||
</div>
|
||
</div>
|
||
<div id="depPreview" style="display:none;margin-top:8px;padding:14px;background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border)">
|
||
<div style="font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px">Depreciation Preview</div>
|
||
<div id="depPreviewContent"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 3 -->
|
||
<div class="card mt-4" id="step3" data-step="3">
|
||
<div class="card-header"><span class="card-title">📍 Step 3: Location & Assignment</span></div>
|
||
<div class="card-body">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Department <span class="req">*</span></label>
|
||
<select class="form-select" id="assetDept">
|
||
<option value="">Select department…</option>
|
||
<option>IT</option><option>Finance</option><option>HR</option>
|
||
<option>Operations</option><option>Marketing</option><option>Admin</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Location <span class="req">*</span></label>
|
||
<select class="form-select" id="assetLoc">
|
||
<option>IT Dept – Floor 2</option><option>Finance – Floor 1</option>
|
||
<option>HR – Floor 2</option><option>Server Room – B1</option>
|
||
<option>Marketing – Floor 3</option><option>Admin – Floor 1</option>
|
||
<option>Warehouse – Whitefield</option><option>Parking – B1</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Assign To (Employee)</label>
|
||
<select class="form-select" id="assetAssignee">
|
||
<option value="">Unassigned (Pool Asset)</option>
|
||
<option>Priya Kumar – IT</option><option>Rahul Mehta – Finance</option>
|
||
<option>Anita Singh – HR</option><option>Vikram Reddy – Operations</option>
|
||
<option>Sneha Patel – Marketing</option><option>Deepak Joshi – Admin</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Assignment Date</label>
|
||
<input type="date" class="form-input" value="2025-05-28">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Cost Center</label>
|
||
<select class="form-select">
|
||
<option>CC-IT-001 (IT Infrastructure)</option><option>CC-FIN-002 (Finance Ops)</option>
|
||
<option>CC-HR-003 (Human Resources)</option><option>CC-OPS-004 (Operations)</option>
|
||
<option>CC-MKT-005 (Marketing)</option>
|
||
</select>
|
||
</div>
|
||
<hr class="divider">
|
||
<div class="section-hdr">Additional Options</div>
|
||
<div class="flex gap-4 flex-wrap">
|
||
<label class="flex items-center gap-2" style="cursor:pointer;font-size:13px">
|
||
<input type="checkbox" checked> Generate QR code on save
|
||
</label>
|
||
<label class="flex items-center gap-2" style="cursor:pointer;font-size:13px">
|
||
<input type="checkbox" checked> Send acknowledgment email to assignee
|
||
</label>
|
||
<label class="flex items-center gap-2" style="cursor:pointer;font-size:13px">
|
||
<input type="checkbox"> Schedule first PM after 3 months
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Submit Row -->
|
||
<div class="card mt-4">
|
||
<div class="card-body" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
|
||
<div>
|
||
<div style="font-size:13px;font-weight:600">Ready to save?</div>
|
||
<div style="font-size:12px;color:var(--text-muted)">Asset will be created and QR code will be generated automatically.</div>
|
||
</div>
|
||
<div class="flex gap-3">
|
||
<button class="btn btn-secondary" onclick="saveDraft()">💾 Save as Draft</button>
|
||
<button class="btn btn-primary btn-lg" onclick="submitAsset()">✅ Create Asset</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /formArea -->
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Success Modal -->
|
||
<div class="modal-overlay" id="successModal">
|
||
<div class="modal" style="max-width:420px">
|
||
<div class="modal-body" style="text-align:center;padding:36px 28px">
|
||
<div style="font-size:52px;margin-bottom:16px">🎉</div>
|
||
<div style="font-size:20px;font-weight:800;margin-bottom:8px">Asset Created!</div>
|
||
<div style="font-size:13px;color:var(--text-muted);margin-bottom:6px">Asset ID: <code id="newAssetId" style="color:var(--primary-light);font-size:14px"></code></div>
|
||
<div style="font-size:12.5px;color:var(--text-muted);margin-bottom:24px">QR code generated. Assignee acknowledgment email sent.</div>
|
||
<div class="flex gap-3" style="justify-content:center">
|
||
<a href="assets.html" class="btn btn-secondary">← Asset List</a>
|
||
<button class="btn btn-primary" onclick="viewNew()">View Asset →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
<script src="js/data.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script>
|
||
const steps = [
|
||
{ num:1, label:'Basic Info', sub:'Name, category, serial' },
|
||
{ num:2, label:'Purchase & Finance', sub:'Cost, depreciation' },
|
||
{ num:3, label:'Location & Assign', sub:'Department, assignee' }
|
||
];
|
||
|
||
const customFieldDefs = {
|
||
'Laptops': [['Processor','text','e.g. Intel Core i7'],['RAM','text','e.g. 16 GB'],['Storage','text','e.g. 512 GB SSD'],['OS','text','e.g. Windows 11 Pro'],['Screen Size','text','e.g. 14 inch']],
|
||
'Desktops': [['Processor','text','e.g. Core i5'],['RAM','text','e.g. 8 GB'],['Storage','text','e.g. 1 TB HDD'],['OS','text','e.g. Windows 11']],
|
||
'Servers': [['CPU','text','e.g. Xeon Gold'],['RAM','text','e.g. 64 GB ECC'],['Storage','text','e.g. 2× 1.8 TB SAS'],['RAID','text','e.g. RAID 10'],['OS','text','e.g. Ubuntu Server']],
|
||
'Vehicles': [['Registration No.','text','e.g. MH12AB1234'],['Fuel Type','select','Petrol|Diesel|Electric|CNG'],['Engine CC','number','1498'],['Insurance Expiry','date',''],['Seating Capacity','number','5']],
|
||
'HVAC': [['Capacity','text','e.g. 1.5 Ton'],['Type','select','Split|Window|Cassette|Ducted'],['Refrigerant','text','e.g. R-32'],['Star Rating','number','5']],
|
||
'Printers': [['Print Speed (ppm)','number','40'],['Technology','select','Laser|Inkjet|Dot Matrix'],['Paper Sizes','text','A4, A5, Letter'],['Monthly Duty Cycle','text','e.g. 80,000 pages']],
|
||
'Networking': [['Port Count','number','24'],['Speed','text','e.g. 1 Gbps'],['Managed','select','Yes|No'],['PoE','select','Yes|No']],
|
||
'Mobile Devices': [['OS','select','iOS|Android|Windows'],['Storage','text','256 GB'],['IMEI','text','']],
|
||
'Displays': [['Screen Size','text','43 inch'],['Resolution','text','4K UHD'],['Panel Type','select','IPS|VA|OLED|TN']],
|
||
'Furniture': [['Material','text','e.g. Engineered Wood'],['Color','text','Black'],['Load Capacity','text','e.g. 120 kg']]
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
renderStepNav();
|
||
});
|
||
|
||
function renderStepNav() {
|
||
document.getElementById('stepNav').innerHTML = steps.map(s => `
|
||
<div class="step-nav-item ${s.num===1?'active':''}" id="stepNavItem-${s.num}" onclick="scrollToStep(${s.num})">
|
||
<div class="step-num" id="stepNum-${s.num}">${s.num}</div>
|
||
<div><div class="step-nav-label">${s.label}</div><div class="step-nav-sub">${s.sub}</div></div>
|
||
</div>`).join('');
|
||
}
|
||
|
||
function scrollToStep(n) {
|
||
const el = document.getElementById(`step${n}`);
|
||
if (el) el.scrollIntoView({behavior:'smooth',block:'start'});
|
||
}
|
||
|
||
function renderCustomFields() {
|
||
const cat = document.getElementById('assetCategory').value;
|
||
const section = document.getElementById('customFieldsSection');
|
||
const grid = document.getElementById('customFieldsGrid');
|
||
const fields = customFieldDefs[cat];
|
||
if (!fields) { section.style.display='none'; return; }
|
||
section.style.display = '';
|
||
grid.innerHTML = fields.map(([label,type,ph])=>`
|
||
<div class="form-group">
|
||
<label class="form-label">${label}</label>
|
||
${type==='select'
|
||
? `<select class="form-select">${ph.split('|').map(o=>`<option>${o}</option>`).join('')}</select>`
|
||
: `<input type="${type}" class="form-input" placeholder="${ph||''}">`
|
||
}
|
||
</div>`).join('');
|
||
}
|
||
|
||
function updatePreview() {
|
||
const n = document.getElementById('assetName').value;
|
||
if(n) document.getElementById('previewId').textContent = 'AST-2025-021';
|
||
}
|
||
|
||
function calcDepreciation() {
|
||
const cost = parseFloat(document.getElementById('purchaseCost').value) || 0;
|
||
const rate = parseFloat(document.getElementById('depRate').value) || 20;
|
||
const method = document.getElementById('depMethod').value;
|
||
const prev = document.getElementById('depPreview');
|
||
const cont = document.getElementById('depPreviewContent');
|
||
if (!cost) { prev.style.display='none'; return; }
|
||
prev.style.display = '';
|
||
let rows='',val=cost;
|
||
for(let i=1;i<=4;i++){
|
||
const dep = method==='SLM' ? cost*rate/100 : val*rate/100;
|
||
const close = Math.max(0,val-dep);
|
||
rows+=`<div class="flex justify-between" style="font-size:12px;padding:5px 0;border-bottom:1px solid var(--border)">
|
||
<span style="color:var(--text-muted)">Year ${i}</span>
|
||
<span style="color:var(--danger)">-${fmt(Math.round(dep))}</span>
|
||
<span style="font-weight:600">${fmt(Math.round(close))}</span>
|
||
</div>`;
|
||
val=close;
|
||
}
|
||
cont.innerHTML = `<div class="flex justify-between mb-2" style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px"><span>Year</span><span>Depreciation</span><span>Closing Value</span></div>${rows}`;
|
||
}
|
||
|
||
function saveDraft() {
|
||
const name = document.getElementById('assetName').value || 'Unnamed Asset';
|
||
showToast('Draft Saved',`"${name}" saved as draft`,'info');
|
||
}
|
||
|
||
function submitAsset() {
|
||
const name = document.getElementById('assetName').value;
|
||
const cat = document.getElementById('assetCategory').value;
|
||
const cost = document.getElementById('purchaseCost').value;
|
||
if (!name) { showToast('Validation Error','Please enter the asset name','error'); document.getElementById('assetName').focus(); return; }
|
||
if (!cat) { showToast('Validation Error','Please select a category','error'); document.getElementById('assetCategory').focus(); return; }
|
||
if (!cost) { showToast('Validation Error','Please enter the purchase cost','error'); document.getElementById('purchaseCost').focus(); return; }
|
||
|
||
// Simulate save
|
||
document.querySelector('#successModal .modal').innerHTML = `
|
||
<div style="text-align:center;padding:36px 28px">
|
||
<div style="font-size:52px;margin-bottom:16px">🎉</div>
|
||
<div style="font-size:20px;font-weight:800;margin-bottom:8px">Asset Created!</div>
|
||
<div style="font-size:13px;color:var(--text-muted);margin-bottom:6px">Asset ID: <code style="color:var(--primary-light);font-size:14px">AST-2025-021</code></div>
|
||
<div style="font-size:12px;color:var(--text-muted);margin-bottom:6px"><strong style="color:var(--text-secondary)">${name}</strong> — ${cat}</div>
|
||
<div style="font-size:12.5px;color:var(--text-muted);margin-bottom:24px">QR code generated. Assignee acknowledgment email sent.</div>
|
||
<div class="flex gap-3" style="justify-content:center">
|
||
<a href="assets.html" class="btn btn-secondary">← Asset List</a>
|
||
<a href="asset-detail.html?id=AST-2025-001" class="btn btn-primary">View Asset →</a>
|
||
</div>
|
||
</div>`;
|
||
openModal('successModal');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|