Welcome to your Listo Work Orders preview
This is a working preview of the app being built for Listo Maintenance and Painting. It's yours to click around for the next few days — create a work order, assign a technician, check out the schedule, see what a crew member sees in the field. This guide is a companion to it: click a page in the left sidebar any time, or click a card below to jump straight to it.
Dashboard
The first thing anyone sees after logging in. It answers "what do I need to know right now?" without clicking anything.
4 stat tiles
Today — how many jobs are scheduled today. This week — jobs through the next 7 days. Needs a technician — jobs with no one assigned yet (a to-do list, effectively). Awaiting invoice — completed jobs that haven't been billed.
Clicking any tile jumps straight to the Work Orders list, already filtered — a nice "zero to filtered list in one click" shortcut.
Today & This Week lists
Below the tiles, every job scheduled today, then a day-by-day agenda for the coming week. Each row is clickable and opens that job's full detail page.
Work Orders
Every job Listo has ever run or scheduled, in one searchable, filterable table. This is where an office admin spends most of their day.
- Search box — matches against the WO number, description, client name, and assigned technician.
- Client filter — a dropdown to narrow the list to one property/customer.
- Status filter chips — All, Scheduled, Unassigned, In Progress, Completed, Awaiting invoice. The "Unassigned" chip shows a live count badge.
- The table — WO number, client, scheduled date/time (date ranges for multi-day jobs), technician, status pill, and an invoiced checkmark.
- Pagination — 10 jobs per page, with page numbers and a "Showing X–Y of Z" counter.
- + New work order — top right, opens the creation form (see the dedicated how-to page).
Work Order Detail
Clicking any job — from the Dashboard, Work Orders list, Schedule, or a client's history — opens this single page for that job.
- Status stepper — Scheduled → In Progress → Completed → Invoiced, shown visually so you can see where a job stands at a glance.
- Line items — the scope of work, with a checkmark for anything the technician has already completed in the field.
- Job details card — client, job-site address, schedule, assigned technician, and status.
- Internal notes — access instructions, gate codes, anything not meant for the client.
- Edit — reopens this job in the same form used to create it.
- Print — generates a real, clean work-order sheet and opens your browser's print dialog. This one is fully functional, not simulated.
- Open technician view — jumps into the mobile field view for this exact job (see that page).
- Mark invoiced — appears once a job is completed; flips its status to Invoiced.
- Back link — reads "Back to Dashboard / Work Orders / Schedule / Clients" depending on where you came from, and returns you there.
Schedule
A weekly timeline with one row per technician — this is usually the page that gets the biggest reaction, since it's the clearest visual answer to "who's where, and for how long."
- One row per active technician, plus an "Unassigned" row if any jobs have no one assigned.
- Multi-day jobs render as a single bar spanning several days, instead of showing up as separate entries each day.
- Prev / Today / Next — navigate week by week. Three weeks of demo data are loaded (last week, this week, next week) so both buttons show populated data.
- Click any bar to open that job's detail page.
Clients
Every property or customer Listo services — HOAs, apartment complexes, retail centers, dental offices, and individual homeowners are all represented in the demo data.
- Search — matches client name or city.
- The table — name & address, contact info, city, a live count of that client's work orders, and Active/Inactive status.
- Clicking a row opens a side drawer with full contact details, a status toggle (Deactivate / Reactivate), an Edit button, and — importantly — that client's complete job history, each entry clickable straight through to its detail page.
- + Add client — a simple form to add a new property/customer on the spot.
Technicians
The shortest page in the app, and that's by design — it's a simple roster, not a full HR system.
- The table — name, phone, email, how many jobs that person has today, and Active/Inactive status.
- Clicking a row opens the same simple add/edit modal used for "+ Add technician."
Technician Field View
A phone-shaped simulation of what a technician sees on-site — reachable either from the sidebar's "Preview technician view" button, the Dashboard banner, or "Open technician view" on any job's detail page.
- Job header — client name, job-site address, date, and time window.
- Progress bar — updates live as line items are checked off.
- Line items with checkboxes — tap to mark work done; each item also has a note field and a photo-attach button.
- Photo capture — this genuinely opens the device camera/photo picker and shows the picture inline. It's real, not a placeholder — it just isn't saved anywhere permanent yet (more on that on the "What's Not Built Yet" page).
- Mark work order complete — only enabled once every line item is checked; flips the job to Completed and the office dashboard updates instantly.
How to Create a Work Order
This single flow touches almost every part of the app, so it's the best way to get a feel for the whole thing in one pass. Follow the steps below in the live mockup — check off each circle here just to track your own progress through this guide (it doesn't affect the actual app).
01Go to Work Orders, then click "+ New work order"
The orange button in the top-right corner of the Work Orders page.
02(Optional) Try the PDF drop zone
Heads up — this step is simulated for now: it picks a random client and fills in placeholder line items to show the intended flow, rather than actually reading your PDF yet.
03Pick a client, or add one on the fly
The "+ New client" link next to the dropdown opens a quick-add modal without leaving the form.
04Enter a job description
e.g. "Exterior repaint — trim & front door."
05Set the job-site address
Click "Use client address" to autofill it, or type a different address — useful when the billing contact and the job site aren't the same place.
06Set the start date — and an end date for multi-day jobs
Leave the end date blank for a single-day job. This is the field that powers the multi-day bars on the Schedule page.
07Set the start–end time window
Applied to each day if it's a multi-day job.
08Assign a technician
Worth trying: pick a technician who's already booked at an overlapping time — you'll see a red warning appear that blocks Save until you pick someone else or a different time.
09Add line items
Description and quantity for each piece of work. Note: there's no price field here yet — see "What's Not Built Yet."
10Add internal notes
Gate codes, access instructions — anything for the technician that shouldn't go to the client.
11Click "Save work order"
You'll land back on the Work Orders list with the new job at the top, already numbered.
12Open it and see it everywhere else
Click into the new job, then check the Dashboard, the Schedule, and that client's history — one entry, reflected consistently across the whole app.
Suggested Order to Explore
There's no wrong way to click around, but if you'd like a sensible path through the whole app, here's an order that builds up naturally rather than jumping around. Fifteen minutes or so is plenty to get a feel for it.
1. Start on the Dashboard
This is what you'd see every morning — take a look at the 4 stats and today's job list.
2. Go to Work Orders
Try the search, the client filter, and a status chip together.
3. Create a work order
Follow the step-by-step guide — this is the centerpiece and touches most of what the app can do. Try triggering the scheduling conflict warning on purpose to see how it works.
4. Open that job's detail page
Look at the status stepper, line items, and the action buttons (Edit, Print, Open technician view, Mark invoiced).
5. Click "Open technician view"
Check off a line item, then flip back to the office view and watch the status update land instantly — this is one of the best moments in the whole app.
6. Go to Schedule
Look at the current week, find a multi-day bar, then click Prev and Next to see three weeks of live data.
7. Go to Clients
Open one client's drawer and scroll their job history.
8. Quick look at Technicians
Just a glance — this page is intentionally simple.
9. Jot down questions as you go
If anything's unclear, feels off, or you wish it worked differently — write it down. We'll go over it together.
What's Not Built Yet
Everything below is intentional — this is a clickable front-end mockup meant to validate the design and flow before the real build, not a working product yet. If something feels missing while you're exploring, it's very likely already on this list.
No real backend or database
All data lives in the browser's memory. Refreshing the page resets everything to the default demo data — nothing typed in is saved permanently.
No login or authentication
The app opens straight to an admin view ("Wendy Camp, Admin" in the top right is just a static label). No real accounts, passwords, or permission levels exist yet.
Email notifications aren't actually sent
The real build will send real emails (via Resend, per the proposal); nothing goes out from this mockup.
SMS/text notifications aren't actually sent
Same story — planned for the real build, not wired up here.
PDF import is simulated
Dropping a PDF doesn't actually read it — it randomly assigns a client and fills in placeholder line items purely to show the intended flow.
Photos aren't saved permanently
The camera/photo capture in the Technician Field View genuinely works and previews the image — but it's held only in that browser tab's memory, not uploaded to any cloud storage yet.
No pricing entry on a new work order
The New/Edit Work Order form only has description and quantity for each line item — there's no dollar field yet. (The historical demo jobs have prices baked into their seed data, but that's not something the form itself lets you set.)
No real invoicing
"Mark invoiced" simply flips a status flag — it doesn't generate a PDF invoice, integrate with QuickBooks, or send anything to the client.
No reporting or data export
No CSV export, revenue reports, or analytics beyond the 4 dashboard stat tiles.
No client-facing portal
Clients don't have their own login to check a job's status — everything here is the office/admin and field-technician side only.
No settings or user-management page
There's nowhere in the mockup to manage multiple office-user accounts, change a password, or adjust preferences.