Capex

Enterprise finance teams track capital expenditure through spreadsheets, emails, and fragile approval chains. Budget requests get lost. Asset lifecycles go unmonitored. Reports take days to compile.

Capex replaced all of that. One real-time dashboard. Budgets from request to approval, asset lifecycles end to end, complex financial summaries computed instantly. No spreadsheets.

The legacy app was JavaScript with Material-UI. Slow builds, bloated bundles, a design system that fought every change. I led a complete ground-up rewrite into TypeScript, Vite, and Tailwind CSS with shadcn/ui.

Build times dropped. Bundle sizes shrank. The components actually fit the product. Every pixel matched the client’s Photoshop mocks.

Capex runs on a client-side financial engine that pulls together department budgets, asset costs, depreciation schedules, and regulatory thresholds. It computes tax-like summaries in real time. Users navigate deeply dependent multi-step forms with interactive fields, dynamic select matrices, and custom range sliders.

State orchestration was the hardest part. Too many interdependent fields across multiple steps. A single change ripples through the entire form. I used React Context API to cache progress across step boundaries. No state fragmentation, no unnecessary re-renders.

Enterprise finance data is sensitive. Budget figures, depreciation schedules, pricing configs. Not everyone gets to see everything.

I designed a two-tier RBAC system with Admin and User roles. Every view, data point, and config variable is gated behind token-verified authorization scopes. Admins see the full picture. Users see only what they need.

As Frontend Lead, I set the technical direction. Delegated milestones, managed features, enforced TypeScript strict mode across the codebase. Smaller bundles, faster computations, a codebase that does not rot.

The client got a dashboard that loads faster, computes instantly, and handles whatever the finance team throws at it.