Project Tracking & Status Reports

Track portfolio projects, budgets, RAG health, and timelines in one browser-based dashboard.

Overview

This single-page app helps project managers and PMO teams monitor active work across a portfolio. AG-Grid powers the project table with sortable columns, status grouping, and visual progress bars. Alpine.js drives the add-project form, filters, and view switching. Charts summarize status distribution and budget burndown; a CSS timeline shows project schedules at a glance.

Key features

Project grid

• Columns: Project Name, Owner, Status, Start Date, End Date, % Complete, Budget, Spent, and RAG status
• Ten sample projects load on first visit
• Progress bar cell renderer for % complete
• Color-coded status and RAG (Red / Amber / Green) columns
• Optional row grouping by status
• Pinned portfolio total row for budget and spent

Portfolio summary

• Active project count, average % complete, total budget, total spent, and RAG breakdown cards update live from filtered data

Add project form

• Alpine.js form to enter name, owner, status, dates, completion %, budget, and spent
• New projects appear in the grid and update summary cards and charts

Views

• Table — full AG-Grid with sorting and filtering
• Timeline — Gantt-style CSS bars showing each project’s date range

Charts

• Doughnut chart: status distribution (Planning, In Progress, On Hold, Complete, Cancelled)
• Line chart: budget burndown vs cumulative spend over recent months

Filters

• Filter by status, owner, or RAG; all summaries, charts, grid, and timeline respect active filters

Data import & export

• Export filtered projects to Excel (`.xlsx`) via SheetJS
• Import Excel to replace the portfolio (with confirmation)

Persistence & theme

• Projects and preferences saved in `localStorage`
• Dark mode toggle with saved preference
• Reset to sample data with confirmation

Data & persistence

• Sample data: ten projects across five statuses with realistic budgets and dates
• Storage key: `projectTracking_v1` for project rows; `projectTracking_dark` for theme
• Reset restores the original sample set

Charts & reporting

• Status pie chart and budget burndown line chart (Chart.js)
• Portfolio KPI cards and pinned grid totals
• Excel export for status reports

Built with

Tailwind CSS, AG-Grid Community, Alpine.js, Chart.js, and SheetJS — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.