Asset Depreciation Dashboard
Book Value Over Time
Annual Depreciation Expense
| Asset Name |
Purchase Date |
Initial Cost ($) |
Salvage Value ($) |
Useful Life (Yrs) |
Actions |
Please add an asset or select one to view its depreciation schedule.
';
if(charts.bookValue) charts.bookValue.destroy();
if(charts.expense) charts.expense.destroy();
return;
}
let schedule = [];
let bookValue = asset.cost;
let accumulatedDep = 0;
const life = asset.life;
const salvage = asset.salvage;
for (let year = 1; year <= life; year++) {
let depreciationExpense = 0;
const beginningBookValue = bookValue;
if (bookValue <= salvage) { // Stop depreciating if book value is at or below salvage
depreciationExpense = 0;
} else if (method === 'straight-line') {
depreciationExpense = (asset.cost - salvage) / life;
} else if (method === 'double-declining') {
const rate = 2 / life;
depreciationExpense = beginningBookValue * rate;
}
// Adjust expense to not go below salvage value
if (beginningBookValue - depreciationExpense < salvage) {
depreciationExpense = beginningBookValue - salvage;
}
accumulatedDep += depreciationExpense;
bookValue -= depreciationExpense;
schedule.push({ year, beginningBookValue, depreciationExpense, accumulatedDep, endingBookValue: bookValue });
}
renderScheduleTable(schedule);
renderCharts(schedule);
}
// --- RENDER FUNCTIONS ---
function renderScheduleTable(schedule) {
const container = document.getElementById('depreciation-schedule-container');
let tableHTML = `
| Year |
Beginning Book Value |
Depreciation Expense |
Accumulated Depreciation |
Ending Book Value |
${schedule.map(row => `
| ${row.year} |
${formatCurrency(row.beginningBookValue)} |
${formatCurrency(row.depreciationExpense)} |
${formatCurrency(row.accumulatedDep)} |
${formatCurrency(row.endingBookValue)} |
`).join('')}
`;
container.innerHTML = tableHTML;
}
function renderCharts(schedule) {
const labels = schedule.map(row => `Year ${row.year}`);
const bookValueData = schedule.map(row => row.endingBookValue);
const expenseData = schedule.map(row => row.depreciationExpense);
// Book Value Line Chart
const bvCtx = document.getElementById('book-value-chart').getContext('2d');
if (charts.bookValue) charts.bookValue.destroy();
charts.bookValue = new Chart(bvCtx, {
type: 'line',
data: { labels, datasets: [{ label: 'Book Value', data: bookValueData, borderColor: '#0369a1', tension: 0.1 }] },
options: { responsive: true, maintainAspectRatio: false }
});
// Expense Bar Chart
const exCtx = document.getElementById('depreciation-expense-chart').getContext('2d');
if (charts.expense) charts.expense.destroy();
charts.expense = new Chart(exCtx, {
type: 'bar',
data: { labels, datasets: [{ label: 'Depreciation Expense', data: expenseData, backgroundColor: '#0ea5e9' }] },
options: { responsive: true, maintainAspectRatio: false }
});
}
function updateAssetSelector() {
const selectedId = parseInt(assetSelect.value);
assetSelect.innerHTML = assetsData.map(a => `
`).join('');
// Preserve selection if possible
if (assetsData.some(a => a.id === selectedId)) {
assetSelect.value = selectedId;
}
}
function renderAssetManagerTable() {
const tbody = document.querySelector('#assets-table tbody');
tbody.innerHTML = assetsData.map(asset => `
|
|
|
|
|
|
`).join('');
}
// --- DATA MANIPULATION (CRUD) ---
window.add_updateAsset = (id, key, value) => {
const asset = assetsData.find(a => a.id === id);
if(asset) asset[key] = value;
renderAll();
};
window.add_addAsset = () => {
const newAsset = {
id: Date.now(), name: 'New Asset', date: new Date().toISOString().split('T')[0],
cost: 10000, salvage: 1000, life: 5
};
assetsData.push(newAsset);
renderAll();
};
window.add_removeAsset = (id) => {
assetsData = assetsData.filter(a => a.id !== id);
renderAll();
};
// --- INITIALIZATION & SAMPLE DATA ---
function initialize() {
assetsData = [
{ id: 1, name: 'Company Vehicle', date: '2023-01-15', cost: 35000, salvage: 5000, life: 5 },
{ id: 2, name: 'High-End Computer', date: '2024-03-20', cost: 4500, salvage: 300, life: 3 },
{ id: 3, name: 'Office Machinery', date: '2022-07-01', cost: 150000, salvage: 15000, life: 10 }
];
assetSelect.addEventListener('change', calculateAndRenderSchedule);
methodSelect.addEventListener('change', calculateAndRenderSchedule);
renderAll();
}
// --- PDF DOWNLOAD ---
document.getElementById('add-download-pdf-btn').addEventListener('click', () => {
const container = document.getElementById('add-tab-0');
const assetName = assetSelect.options[assetSelect.selectedIndex].text;
html2canvas(container, { scale: 2 }).then(canvas => {
const { jsPDF } = window.jspdf;
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
pdf.text(`Depreciation Report for: ${assetName}`, 15, 15);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const ratio = canvas.width / canvas.height;
let imgWidth = pdfWidth - 20;
let imgHeight = imgWidth / ratio;
if(imgHeight > pdfHeight - 30) {
imgHeight = pdfHeight - 30;
imgWidth = imgHeight * ratio;
}
pdf.addImage(imgData, 'PNG', 10, 20, imgWidth, imgHeight);
pdf.save(`${assetName}-Depreciation-Report.pdf`);
});
});
initialize();
});
