Department and Individual Budget Dashboard

Problem

Department budgets often live in scattered Excel files and manual ledgers. Annual targets, monthly targets, customer-level budgets, actual collections, service types, and month fields rarely fit cleanly into one view. A static screenshot does not show department totals, member-level detail, or a reusable structure when team size changes. This skill turns that budget data into an accessible web dashboard instead of another one-off report.

How It Works

It starts with an Excel file or a requirements description, then confirms the member list, sheet structure, and annual allocation. It extracts key fields such as customer name, product, amount, type, service type, and month. The output is a React 18, TypeScript, and Tailwind CSS project built with Vite, using localStorage for local persistence. The dashboard typically includes:
- Department summary view: annual budget, cumulative collections, forecast collections, monthly actuals, progress bars, monthly bar charts, quarterly allocation, and monthly detail tables.
- Individual member views: unlimited members, with overview, budget detail, and actual collection records that support add, edit, and delete operations.
- Config-driven navigation: tabs are rendered from member configuration, making it easier to adapt when the organization changes.

Boundaries

This is primarily a frontend dashboard with browser-local data storage. The server hosts page code only, while business data lives in localStorage, so it is not suited for real-time multi-user collaboration or cross-device sharing. Excel column names, sheet names, and member names need to be recognizable. Amount formatting, completion rates, and positive/negative gap coloring are presentation conventions; if the source data definitions are inconsistent, reconcile them before import.