Zani Dashboard

Context and Idea

The collaboration started from a simple need: unify the company's operational data, until then scattered across dozens of Excel files. The goal was to give managers one place to keep everything under control — job sites, personnel, equipment, and materials.

Challenges

• Complex Calculations: Accurately managing cost calculations—which combine labor hours, materials, and machinery—while ensuring real-time data consistency
• UI Complexity: Handling a large volume of information without cluttering the interface
• User Base: Maintaining a clear and usable design, even for non-technical users
• Infrastructure: Ensuring performance and stability on an internal local network

The Solution

I designed the interface and the user experience in Figma, keeping everything as simple as possible: few screens, shallow hierarchy, no menus inside menus. Then I built the frontend in Angular — a platform where all the information lives together and that opens straight in the browser, nothing to install. What I built: • Site management with cards and quick navigation • Automatic calculation of personnel and material costs • Integrated supplier and warehouse management • Roles and access (admin, warehouse manager) • An estimating module that separates internal and external costs

Dashboard

The Dashboard is the entry point: an immediate summary of business activity with key KPIs (active sites, total costs, margin, revenue), cost-vs-revenue tracking over time, expense breakdown by category, and the most recently updated sites. One single view to understand how the company is doing — without opening another menu.

Construction Sites

The Construction Sites area gives an immediate operational overview of each project through compact cards showing status, estimate, current costs, margin and profit. Search filters narrow the list by status, client, type and cost range — so even with hundreds of active sites, the critical ones surface in seconds.

Daily Planning

The Daily Planning view shows in a relational map who is working where: the selected day at the centre, active sites around it, and workers assigned to each one. Below, the operational view lists every site with its assigned crew — so the manager can confirm or rearrange the day at a glance.

Daily Site Log

For each construction site, the Daily Site Log is the operational journal: a written summary, the hours of every worker with raw cost and total cost calculated automatically, and the materials used with quantity, mark-up and final cost. This is where raw data becomes a precise picture of the day — and what feeds every downstream calculation.

Periodic Site Report

The Periodic Report aggregates daily logs into a month × worker matrix: for each day and each person, hours worked and cost are visible at a glance, with row and column totals always in view. From here, internal costs (suppliers-materials and workers-vehicles) and accounting data can be exported, ready for the accountant or the client.

Estimated vs Actual

One of the most requested features: every site constantly compares what was estimated with what is actually being spent. Real-time progress bars and deltas make budget gaps and remaining margins obvious — so decisions can be made before a slippage turns into a loss.

Vehicles and Equipment

The Vehicles module keeps everything around the fleet in one place: profile data, value, hourly cost, deadlines (insurance, inspection), documents and photos. Each vehicle can then be assigned to a daily log, so its hourly cost flows automatically into the site's calculation.

Material Price History

Every material has its own detail card with current price, discounts, discounted price and — most importantly — a price-trend chart showing how the price has evolved over time. A practical tool to negotiate with suppliers and spot rising costs before they eat into site margins.

Annual Report

The Annual Report is the big-picture view: top-level KPIs, cost-and-revenue trends, and dedicated tabs for Services, Materials, Workers and Final Data. For each area, a Top suppliers list, distribution by site, and a line-by-line breakdown — so by year-end it's clear not only how much was spent, but where and with whom.

Invoice Recap

The Invoice Recap brings the entire admin picture onto a single page: split between overdue, pending and paid invoices, monthly taxable revenue, top 5 clients and sites by income, and a fully filterable table by client, site, amount or date. A dashboard built for whoever has to chase payments and keep an eye on cash flow.

Development and Technologies

I took care of the UI/UX design and the Angular frontend. The backend and the Java APIs were handled by Andrea Calotychos, along with the internal server. We moved in small releases, collecting feedback from the company as we went — the best way to build something that was actually useful.

Results

• All operational data finally in one place
• Far fewer errors than the manual approach
• Day-to-day management got much faster
• Interface used every day by the ZANI team

Conclusion

The most satisfying part was watching data that used to be scattered everywhere land in one place and actually become useful. A concrete case of how design and frontend can genuinely improve a company's day-to-day work.