Internal · Staff training

Staff training

Watch the clip, play the narration, read the notes. One module per part of the booking app.

5 modules5 builtNot for customers

Screens are captured against the live app. The customer shown in every clip is test data.

  1. Booking flow Ready
  2. Estimating Ready
  3. Contracts Ready
  4. Invoicing Ready
  5. Admin Ready

Module 01

Booking flow

The public booking page at /book. No login, no account: anyone with the link can use it. Four steps: Service, Time, Details, Confirm.

Animated walkthrough of the DHS Plumbing booking wizard: service selection, calendar, time windows, details form, review screen, and confirmation page.
Every screen a customer sees, start to finish. Loops every 20 seconds.

Narration

Step notes

  1. Step one

    Pick a service

    The red Emergency bar at the top is for an active leak or no water. Everything below it is routine work: leak repair, drain cleaning, tankless install, water heater repair, routine maintenance.

    The service picked sets how long the appointment is and how much buffer time gets blocked around it, so it changes which times show up on the next screen.

  2. Step two

    Pick a day

    The calendar only lights up days that actually have open windows in the next 14 days. Grey days have nothing available; a small red dot marks a day with openings.

    This reads off the live schedule. If a window shows here, it's genuinely open.

  3. Step two

    Pick a window

    Clicking a day lists that day's open windows underneath. Each one is the arrival block: two hours for drain cleaning, longer or shorter for other services.

    Clicking a window turns it dark. Continue stays disabled until one is selected.

  4. Step three

    Customer details

    Required: name, email, phone, street address, city, ZIP. Review booking stays greyed out until all six are filled in. Apt/suite, notes, and birthdate are optional.

    The notes field is what the technician reads before the visit. If you're entering a booking for someone who called in, put the real problem description there.

  5. The newsletter checkbox

    Checked by default. If a customer doesn't want mailings, they have to uncheck it, or you uncheck it for them.

  6. Step four

    Review & confirm

    The last screen before anything is saved. It lists back the service, time window, address, contact, and notes.

    If something's wrong, use the ← Back link at the top. The wizard keeps everything already typed.

  7. What "Confirm booking" actually does

    Writes the appointment, holds that time slot so nobody else can take it, emails the customer, emails the office, and texts the customer if they opted into texts.

  8. The confirmation screen

    Shows a confirmation number: the first eight characters of the booking ID. That's the number to ask for on the phone when someone wants to change or cancel. The customer gets the same number in their confirmation email.

  9. If two people book the same window

    The second person gets sent back to the time step with a message that the slot was taken. That's the system preventing a double booking; nothing is broken, they just pick another window.

  10. The emergency path

    It doesn't skip any steps: same four screens. What it does is flag the job as urgent for the office and tell the customer we'll call to confirm the window.

Module 02

Estimating

The estimates list and detail pages at /admin/estimates. Build a quote, track its status, and move it toward a contract or invoice.

Animated walkthrough of the DHS Plumbing estimates admin: the estimates list showing three rows marked declined, declined, and approved, then a single estimate open with its line items, status dropdown, and deposit request.
The list, then one estimate open. Loops every 8 seconds.

Narration

Step notes

  1. Step one

    The estimates list

    Everything lives at /admin/estimates. Each row shows the customer, the status, the date, and the total.

    The filter at the top narrows the list down to one status at a time.

  2. The five statuses

    Draft, sent, approved, declined, and expired. An estimate moves between them from the status dropdown on the estimate itself, not from the list.

  3. Step two

    Create an estimate

    A short form. Pick the customer from the dropdown, optionally link it to an existing booking, then add one or more line items.

    Each line carries a service type, a line type of labor, parts, fee, discount, or trip charge, a quantity, and a unit price. The total updates as lines go in. Create estimate saves it.

  4. Step three

    Open an estimate

    Four things, stacked down the page. At the top, the customer and the total, with a dropdown to move the status through draft, sent, approved, declined, or expired, and an Update status button.

    Below that, Convert to invoice, for once the customer has said yes. Below that, the contract section, which is the next module. Below that, the line items with subtotal, tax, and total.

  5. Deposits

    At the bottom of the page. Request a deposit as a flat dollar amount or as a percent of the estimate total.

    This is separate from the down payment built into a signed contract. Use it when you want money up front before a contract exists at all.

  6. One contract per estimate

    Generating a second one is blocked. If an estimate already has a contract on it, you have to void the old one first. The contract state shown here always reflects the one real record for that estimate.

Module 03

Contracts

The contract lifecycle, generated from an estimate: draft, send, customer sign, and the frozen signed record.

Animated walkthrough of the DHS Plumbing contract lifecycle: the no contract and voided states on an estimate, the draft editor with scope of work and payment schedule, the sent and viewed states, the customer facing contract page with its legal text, the customer signing form with initials and acknowledgements, the admin view of a signed contract showing signer, timestamp, IP address, and content hash, and the customer view of that same signed contract.
Seven frames, one per stage of the lifecycle. Loops every 18 seconds.

Narration

Step notes

  1. Step one

    Every contract starts from an estimate

    Open the estimate and the contract section shows one of five states: no contract yet, draft, sent, viewed, or signed.

    If a contract was voided, you get a Voided notice and a Generate replacement button in place of Generate contract, so a corrected one can be issued without losing the record of the original.

  2. Step two

    Fill in the draft

    Generate contract creates a draft and opens the editor right there on the estimate page.

    This is where the scope of work goes, along with the approximate start and completion dates, and whether the emergency waiver of the right to cancel applies to this job.

  3. The schedule of progress payments

    Normally three rows: a down payment due at signing, a progress payment due when installation is complete, and a final payment due after inspection. Each row has its own description, its due-upon condition, and its dollar amount.

    The scheduled total has to match the contract price. A running total sits right below the rows, so check it before saving.

  4. Check it before it goes out

    The draft shows the customer signing link directly on the page, with a Copy link button, and a live Preview PDF link that renders exactly what the customer will see.

  5. Step three

    Send it

    Send contract emails that signing link to the customer and moves the status to sent.

    Once they open it, the status advances to viewed on its own, before they have signed anything.

  6. Step four

    What the customer reads

    Their page opens with the full legal contract above the signing form: the California Business and Professions Code section 7159 disclosures, the three or five day right to cancel, the mechanics lien warning, and all sixteen numbered terms and conditions, in full.

  7. Step five

    The signing form

    It asks for their full legal name and email, a joint owner name if there is a second signer, and an option to correct the mailing address if it is wrong.

    Then four acknowledgements, each with its own initials box and an I agree checkbox: the right to cancel notice, the payment and lien rights section, the mechanics lien warning, and the limited warranty. All four are required, plus a final electronic signature consent checkbox, before Sign this contract will go through.

  8. The signed record

    Once signed, the contract is frozen. Back on the estimate page, the admin view shows signed, the signer's name, the exact signing timestamp, the signer's IP address, and a content hash, with a note that this reflects the estimate exactly as it stood at that moment.

    From here you can view the signed contract or download the signed PDF.

  9. Voiding a signed contract

    The frozen copy never changes. Voiding is possible if one needs reissuing, but it only makes room for a fresh replacement. It does not edit the old one.

Module 04

Invoicing

The invoices list and detail pages at /admin/invoices. Payment history, pay links, and CSV exports.

Animated walkthrough of the DHS Plumbing invoices admin: the invoices list with rows in several statuses, a fully paid invoice showing its payment history, pay link, and zero amount due, then a draft invoice with a linked signed contract at the bottom of the page.
The list, a paid invoice, a draft with a contract on it. Loops every 8 seconds.

Narration

Step notes

  1. Step one

    The invoices list

    At /admin/invoices. Status runs through draft, sent, viewed, partially paid, paid, overdue, voided, and refunded.

    Two export buttons at the top pull a CSV of all invoices or all payments, for accounting.

  2. Step two

    Create an invoice

    Same shape as an estimate. Pick the customer, optionally link a booking, add line items with a service type, quantity, and unit price, set a due date and payment terms if you use them, then press Create invoice.

  3. Step three

    Open an invoice

    The customer pay link sits right at the top with a Copy link button, alongside Resend, Void, and Download PDF.

    Below that, the line items and the totals: subtotal, tax, total, paid so far, and amount due. A fully paid invoice shows amount due at zero.

  4. Payment history

    Every successful charge, its amount, the method, card or ACH, and the timestamp.

    This is pulled directly from Stripe once a payment clears. Nothing in this list is entered by hand.

  5. Deposits

    They work the same as on an estimate: request a flat amount or a percent of the total, and it shows up in its own list once requested.

  6. A deposit is not an invoice payment

    The two are tracked separately. Converting an estimate to an invoice carries the total forward, but a deposit already collected against that estimate does not appear as an invoice payment. It has to be accounted for on the invoice.

  7. The contract section here is read-only

    The block at the bottom of an invoice shows whatever contract is on file for that invoice's estimate, the same summary card as the estimate page, with no editing controls.

    Contract changes always happen from the estimate side.

Module 05

Admin

Staff roles, the booking schedule, and the revenue dashboard, at /admin/staff, /admin/availability, and /admin/revenue.

Animated walkthrough of three DHS Plumbing general admin pages: staff role management, the availability page with weekly hours and date overrides, and the revenue dashboard with its four totals, repeat customers table, and sales log.
Staff, availability, revenue. Loops every 8 seconds.

Narration

Step notes

  1. Step one

    Staff and roles

    /admin/staff lists everyone with a login and lets you set their role. Admin is unrestricted. Dispatcher covers scheduling and customers. Technician is view only, with no financials. Accountant covers invoices, payments, and exports.

    Pick a role and press Save. Add staff opens a form for a new login. Remove takes someone off the list entirely.

  2. Step two

    Weekly availability

    /admin/availability sets the recurring weekly schedule customers see on the booking page: each day of the week, active or not, with hours.

  3. Date overrides

    Under the weekly hours, for one-off exceptions. Leave start and end blank with Blocked checked to close the whole day. Fill them in with Blocked checked to close just that window. Leave Blocked unchecked to open an extra window outside the normal schedule instead.

  4. Step three

    Revenue

    /admin/revenue is the money view. Four totals across the top: today, this week, this month, and this year.

    Below them, filters by service type, service area, and customer, new versus repeat, plus a date range and a search box.

  5. Repeat customers and the sales log

    A repeat customers table lists anyone with two or more paid orders, their order count, and their lifetime total.

    Under it, every sale, one row per transaction, with date, customer, service type, service area, whether they were new or repeat, and the amount. Export sales CSV at the top pulls all of this to a spreadsheet.

  6. What the revenue page counts

    Collected payments only: card, ACH, or wallet, once Stripe confirms them.

    A sent or partially paid invoice does not show up here until the money has actually cleared.

Internal use only. Screens captured against the live app; the customer shown is fake test data.