Coordina: Field Service Management Dashboard
Dashboard for service businesses to follow clients, requests, quotes, jobs and invoices, with appointments and business performance at a glance.
- Status
- In progress
- Type
- Personal project
About this project
Coordina is a management app for service businesses such as cleaning, landscaping or repair companies. It brings their daily operations into one place: clients, requests, quotes, jobs and invoices, alongside workspaces for marketing, a receptionist, insights, expenses and timesheets.
This is the interface only, built as a front-end project: screens use sample data and are not yet connected to an API. The home dashboard and the sign-in page are done; the rest of the app is in progress.
My role: Front-end developer: I built the interface, which is UI only for now, not yet connected to a backend or deployed
Key features
Overview
Counters for requests, quotes, jobs and invoices with their status breakdown, filtered by location, team, employment type and period.
Today's appointments
Totals by status, the day's appointments with their place, time and assignee, and a to-do list next to them.
Business performance
A table of indicators such as revenue, cash flow, retention and profit margin, with rate, trend, score, status and period.
Sign-in
Social sign-in with Google, Apple and GitHub or email, next to a preview of the product on an animated background.
Technical approach
Component-based UI
Built on Base UI primitives in the shadcn/ui style, with a sidebar that collapses to icons and grouped navigation for operations and workspaces.
Light and dark themes
Both themes come from design tokens, switched with next-themes.
Motion
The sign-in page draws animated floating paths with Motion.
What I built
- Built the home dashboard: overview counters with filters, today's appointments, a to-do list and a business performance table.
- Built the sign-in page with social and email options and an animated background.
- Set up a collapsible sidebar, grouped navigation and light and dark themes.
Built with
- Framework
- Next.js
- React
- TypeScript
- UI
- Tailwind CSS
- Base UI
- shadcn/ui
- Motion
- Motion