Dispatch — Field-Service Work Order System

A job/work-order management app for field-service companies (HVAC, plumbing, electrical, cleaning, auto service). Built as a static React app that runs entirely in the browser — no backend, deployable to GitHub Pages.

All five modules are built: Work Orders, Schedule, Customers, Team, and Reports.

Features

Work Orders

• Dispatch board with live KPIs (open orders, in progress, unassigned, pipeline value)
• Search, status/priority/technician filters, and sorting
• Job detail with an interactive status pipeline (New → Scheduled → In Progress → Completed → Invoiced)
• Editable line items (labor, parts, fees) with live totals
• Inline technician assignment and rescheduling
• Activity timeline with auto-logged status changes and manual notes
• Create / edit / cancel / delete work orders
• Priority flags and per-status color coding

Schedule

• Weekly dispatch calendar (Mon–Sun) with today highlighted
• Drag-and-drop rescheduling — drag a job onto a day, or back to the backlog
• Unscheduled backlog rail, technician filter, week navigation
• Cards colored by assigned technician

Customers

• Directory with per-customer stats (jobs, open, pipeline, lifetime billed)
• Customer detail with full work-order history
• Create / edit / delete (deleting unlinks jobs rather than orphaning them)

Team

• Technician roster with active-load capacity gauges
• Per-tech detail: assigned/open jobs, history, and billed totals
• Unassigned-work warning; create / edit / remove (removing unassigns jobs)

Reports

• KPI tiles: revenue billed, open pipeline, avg job value, completion rate
• Distribution charts: jobs by status, revenue by technician, pipeline value by stage, open jobs by priority (colorblind-validated, direct-labeled)

Data

• Ships with realistic seed data (a fictional trades company)
• All changes persist to localStorage — no account, no server
• "Reset demo data" restores the seed state

Tech stack

• React 19 + Vite 8
• React Router 7 (HashRouter — no server rewrites needed on Pages)
• Zustand (state + localStorage persistence)
• Tailwind CSS v4

Design

An industrial "work-ticket" identity: cool paper workspace, near-black slate sidebar, a single safety-amber accent, and monospace type for ticket data (work-order numbers, money, timestamps). The status pipeline is the signature element.

Develop

npm install
npm run dev        # local dev server
npm run build      # production build → dist/
npm run preview    # preview the production build

Deploy to GitHub Pages

Two options — both work because vite.config.js sets base: './' and the app uses HashRouter.

Option A — GitHub Actions (recommended). Push to main; the included workflow (.github/workflows/deploy.yml) builds and publishes. Enable it under Settings → Pages → Build and deployment → Source: GitHub Actions.

Option B — manual, one command:

npm run deploy     # builds and pushes dist/ to the gh-pages branch

Then set Settings → Pages → Source: Deploy from a branch → gh-pages.

What's next

Quotes/estimates and invoices are natural follow-ons to the Work Orders core, plus recurring/repeat jobs, file & photo attachments, and a customer portal.