Trip scheduling and staff time clock for a medical transport company

A medical transport office books rides for patients who may need mobility help or oxygen, and many of them ride to the same appointment every week. Each trip has to go to a driver who can really get there on time, both legs of a round trip have to stay together, and every employee's hours have to add up at the end of the week, overtime included. Kept in spreadsheets and phone calls, a return leg or a forgotten punch is easy to miss.

1. 01

   Patient profiles

   Each rider's profile holds mobility needs, weight, stairs at home, oxygen and notes, so the office sends the right vehicle and crew. Age is worked out from the date of birth.

2. 02

   Repeat riders

   Patients with standing appointments, such as dialysis, are marked as recurring with how often they ride, and flagged when a trip is booked for them.

3. 03

   Booking a trip

   The new-trip form shows the patient's stairs, oxygen and repeat details and fills in their information. A new patient and their first trip can be added in one step.

4. 04

   Round trips that stay together

   A round trip is saved as two linked legs, there and back, each with its own pickup time and status, so the ride home never gets lost.

5. 05

   Trip status board

   Trips move through scheduled, in progress, completed and cancelled, with a tab for each, so the office sees at a glance what is still open.

6. 06

   Pickup reminders

   Every leg creates a reminder due at its pickup time, and staff check them off from one shared list.

7. 07

   Assigns trips to drivers

   The dispatcher picks a date, the drivers on shift and where they start. The system builds a run sheet for each driver from real driving times (Google's Distance Matrix service) plus time for loading, unloading and oxygen setup. A trip no driver can reach in time is flagged for a person to handle, and the dispatcher reviews the plan before saving it.

8. 08

   Drivers and starting points

   Keep the list of active drivers and the places they start from, which the scheduler uses as each driver's first stop of the day.

9. 09

   Today at a glance

   The home screen shows the patient count, today's trips, upcoming trips and the reminders that are due.

10. 10

    Employee time clock on their phone

    Each employee has their own login and clocks in or out from their phone. The location at each punch is saved as a street address, and a second clock-in is refused while a shift is still open.

11. 11

    Clock-in alerts for managers

    Managers get a notification in the app and on their phone or browser whenever someone clocks in or out.

12. 12

    Timesheets with overtime

    Weekly (Monday to Sunday) and monthly timesheets for each employee, with regular hours, overtime after 40 hours a week at time and a half or a custom rate, and pay totals. Managers can move through the calendar, filter by employee and correct a single punch.

13. 13

    Staff list

    Add and deactivate employees, set hourly and overtime rates, and manage each person's login.

14. 14

    Installs on a phone

    It installs on the home screen like an app, with a menu sized for one hand and a layout that fits modern phone screens. Notifications arrive through the browser.

15. 15

    Times stay in local time

    Every date and time is entered and shown in the company's own time zone, whatever the phone or laptop is set to, so pickups and punches never shift by an hour.

Next.js

The framework the screens and the server code are written in.

React

Draws the screens and updates them as the data changes.

TypeScript

JavaScript with types, so many mistakes are caught before the code runs.

Tailwind CSS

Styles the screens, with large tap targets for use on a phone.

PostgreSQL

The database where every record is kept.

Google Distance Matrix API

Real driving times between addresses, used to match trips to drivers and to set delivery fees.

Google Geocoding API

Turns a phone's location into a street address.

Web Push

Sends notifications to phones and browsers without an app store.

Progressive Web App

Lets the app install on a phone home screen straight from the browser.

Cloud hosting

Hosts the app.

The client isn't named and nothing here comes from their data. The animation is a concept with sample data.