Goal Achievement Dashboard
No goals set. Add a goal in the "Manage Goals" tab.
';
return;
}
const totalProgress = goalsData.reduce((sum, g) => sum + Math.min(g.Progress, 100), 0) / totalGoals;
const goalsCompleted = goalsData.filter(g => g.Progress >= 100).length;
const goalsInProgress = goalsData.filter(g => g.Progress > 0 && g.Progress < 100).length;
const progressEl = document.getElementById('kpi-overall-progress');
progressEl.textContent = formatPercent(totalProgress);
progressEl.className = `value ${totalProgress >= 95 ? 'positive' : ''}`;
document.getElementById('kpi-goals-completed').textContent = goalsCompleted;
document.getElementById('kpi-goals-in-progress').textContent = goalsInProgress;
// Render Goal Cards
const grid = document.getElementById('goal-grid');
grid.innerHTML = goalsData.map(goal => `
${goal.Name}
Progress
${formatPercent(goal.Progress)}
${goal.Current.toLocaleString()} / ${goal.Target.toLocaleString()} ${goal.Unit}
`).join('');
}
function renderGoalsTable() {
const table = document.getElementById('goals-table');
const headers = ['Goal Name', 'Unit', 'Current Progress', 'Target'];
table.innerHTML = `
${headers.map(h=>`| ${h} | `).join('')}Actions |
${goalsData.map(g => `
|
|
|
|
|
`).join('')}
`;
}
function addGoal() {
goalsData.push({ id: Date.now(), Name: 'New Goal', Unit: 'Units', Current: 0, Target: 100 });
processAndRenderAll();
}
function handleTableEvents(e) {
const target = e.target;
if (!target) return;
const id = parseInt(target.closest('tr')?.dataset.id);
if (!id) return;
if (target.classList.contains('remove-goal-btn')) {
goalsData = goalsData.filter(g => g.id !== id);
} else if (target.tagName === 'INPUT') {
const key = target.dataset.key;
const goal = goalsData.find(g => g.id === id);
if (goal) goal[key] = (target.type === 'number') ? parseFloat(target.value) || 0 : target.value;
}
processAndRenderAll();
}
document.getElementById('gad-add-goal-btn').addEventListener('click', addGoal);
const goalTable = document.getElementById('goals-table');
goalTable.addEventListener('change', handleTableEvents);
goalTable.addEventListener('click', handleTableEvents);
function initialize() {
goalsData = [
{ id: 1, Name: 'Save for Down Payment', Unit: '$', Current: 18500, Target: 50000 },
{ id: 2, Name: 'Read Books This Year', Unit: 'Books', Current: 15, Target: 24 },
{ id: 3, Name: 'Run Total Distance', Unit: 'km', Current: 210, Target: 500 },
{ id: 4, Name: 'Complete Online Course', Unit: '%', Current: 60, Target: 100 },
{ id: 5, Name: 'Increase Team Sales', Unit: '$', Current: 450000, Target: 600000 },
];
processAndRenderAll();
}
initialize();
});
