Business App · Owner & Staff (mobile)

The business app.

The native phone app for the people who run the business — the owner, the office manager, and the techs in the field. It is the one-handed companion to the web Dashboard: the AI captures leads and books jobs 24/7; this app is where the team keeps up with it on the move. (The separate customer app is for clients — this is not that.) Every screen reuses our foundations — metric cards, tables/lists, calendar, pills, buttons & actions, the bottom tab bar, toasts & modals — adapted to native mobile patterns and rendered in ~390px phone frames so they can be verified like a real device.

Mobile-only · phone frames Role-aware (Owner / Admin / Member) Reuses the App Shell, Tab Bar, Metric Cards, Tables, Calendar, Team avatars

1 · Auth — Splash, Login & Biometric quick-login

First launch shows the branded splash + sign-in. On a returning device the app offers Face ID / fingerprint so staff get back to their day in one tap.

1.1 Splash & sign in All users
9:41
R

Your business,
handled.

Sign in to see what the AI booked while you were out.

Reuses the auth form fields, password show/hide toggle, and primary button. PRD: single point of contact — the owner and team log into the same managed system.

1.2 Biometric quick-login Returning device
9:41
R

Welcome back,
Jordan.

Use Face ID to jump straight in.

Quick-login hint (Face ID / fingerprint). Falls back to password. Touch targets ≥44px; the whole biometric row is one big tap target.

2 · Home — Mobile dashboard (today-focused)

The phone-first version of the web Dashboard. Opens to today: a KPI snapshot, the things that need you (new leads, gaps to fill), and today’s appointments. Owner/Admin see revenue & recovery KPIs; staff (Member) get a focused “my day” view.

2.1 Home — populated Owner / Admin
9:41
R Revenue Engine

Good morning, Jordan

The AI handled 6 inquiries overnight.

Revenue
$18.4k
12%
Leads
142
8%
Recovered
$3.2k
21%
Bookings
23
4%
Needs you
2 new leads to qualify
Priya N. + 1 — AI gathered the details
3 open slots today
Push to fill — text waitlist or share link
Today’s appointments Calendar
9:001h
Maria Gomez
HVAC tune-up · Alex
10:3045m
Dev Patel
Drain cleaning · Sam
2:002h
The Reyes family
Pool service · Unassigned

KPI snapshot → PRD outcome metrics (Revenue / Leads / Missed-recovered / Bookings). “Needs you” surfaces new leads (AI responder) + gap detection (nightly prep). Reuses Metric Cards, bottom Tab Bar, status colors.

2.2 Home — “My day” Member (staff)
9:41
R Revenue Engine

Hi, Sam

You have 4 jobs today.

You’re available
New jobs can be assigned to you
My jobs
4
today
Done
1
of 4
My next job
10:3045m
Dev Patel
Drain cleaning · 1.2 mi away
1:001h
Lena Park
Water heater check

Member view: only their assignments & no revenue/recovery KPIs, no team or billing.

Staff (Member) get a reduced tab bar (no Leads/Customers), an availability quick-toggle, “my jobs” only, and no money metrics — respecting the Owner/Admin/Member model from Settings · Team.

2.3 Quick add (bottom sheet) Owner / Admin

The FAB opens a bottom-sheet of quick actions (new appointment, block time, add customer, share link). Reuses sheet pattern + icon menu rows. Block-time satisfies the “quick add / block-time” calendar requirement.

3 · Calendar / Schedule — Day, Agenda & Week

On a phone the working view is the day agenda (per our Scheduling Calendar mobile rule). A day-strip jumps between days; Week is a horizontally-scrolling time grid. Tap a block to open the appointment; the FAB adds a job or blocks time.

3.1 Day / Agenda Owner / Admin
9:41
ScheduleMarch 2026

Reuses the segmented Day/Week toggle (icon-only on phone), status colors (booked/pending/no-show), and an inline open-slot row tied to gap-detection. Open slots are tappable to fill.

3.2 Week (scrolls horizontally) Owner / Admin
9:41
ScheduleMar 9 – 15
Mon
9
Tue
10
Wed
11
Thu
12
9a
10a
11a
12p
1p
M. Gomez
9–10a
D. Patel
10:30a
Reyes
2p

Directly reuses the Scheduling Calendar Week time-grid, appointment blocks, and current-time line — scrolls horizontally with min-width columns at phone size (the documented mobile behavior).

4 · Appointment detail — full booking + quick actions

Everything about one job: customer, service, time, status, assignee, notes — plus one-tap field actions (call, text, directions) and management actions (reschedule, mark complete, no-show, cancel). Reuses badges, the assignee picker, and the icon-menu for destructive actions.

4.1 Appointment detail Owner / Admin
9:41
Appointment
Tue, Mar 10 · 9:00 AM
HVAC tune-up · 1 hour
Booked Booked by AI APT-4821
Customer
Maria Gomez
Address
412 Maple St, Burbank, CA
Assigned to
AR Alex Reyes
Notes
Gate code #1140. Dog in yard — friendly. Unit on the roof.
Accepts
Cash · Card · Venmo Nothing charged to book

Quick-action row = field needs (call / text / directions / Add photos — capture is available any time, not only at completion). Status + AI-booked tag + appointment ID per PRD step 6. Assignee picker reuses Team. Mark complete fires the “Add photos of this job?” prompt (4.3); cancel opens a destructive confirm (4.2). Job-photo capture flow continues at Job Photos.

4.2 Cancel — confirm Owner / Admin
9:41
Appointment
Tue, Mar 10 · 9:00 AM
HVAC tune-up · Maria Gomez
Cancel this appointment?

Maria will be texted that her 9:00 AM HVAC tune-up was cancelled. The slot reopens for booking.

Destructive confirm as a bottom sheet (mobile-native equivalent of our destructive modal). Reuses the danger modal icon, checkbox, and .btn--danger. Recovery path: “Keep it”.

4.3 Mark complete → “Add photos?” Owner / Member
9:41
Appointment
Tue, Mar 10 · 9:00 AM
HVAC tune-up · Maria Gomez
Completed
Add photos of this job?

Great work shows. Snap a quick before/after — it goes to your Work Gallery to publish later. Takes 20 seconds.

Add photos

The capture trigger: marking a job complete fires this bottom sheet (reuses the sheet + success modal icon, like our toasts/modals-as-sheets pattern). “Add photos” opens the capture screen (5 in Job Photos); “Not this time” dismisses. Both Owner and Member see this.

4b · Job photos — before/after capture (feeds the Work Gallery)

The capture source for the Work Gallerypublic Showcase → reviews/brand system. Any servicer (Owner OR Member/field staff) shoots before/after photos on their phone; the set auto-tags to the appointment’s service + customer and lands in the gallery draft tray — nothing goes public until the owner approves & publishes. Reuses the real .ba-slider, draft-thumb tiles, sheet, and screen-foot.

1 · Capture in app
(this flow)
2 · Gallery draft
(owner curates)
3 · Public Showcase
+ reviews
4b.1 Capture — empty (no photos yet) Owner / Member
9:41
Before
Point at the job & tap to shoot
Start with a before shot, then do the work and shoot the after.
BeforeTap shutter
AfterLater

Camera viewfinder mock: take photo (72px shutter) or choose from library, with the active slot (Before) pilled at top and a Before/After vs Single mode toggle (single = verticals like a haircut). Empty state — nothing shot yet. All controls ≥44px, shutter is thumb-friendly.

4b.2 Mid-capture — before taken Owner / Member
9:41
After
Now shoot the after
Before is saved. Finish the job, then capture the after from the same angle.
BeforeBefore
AfterTap shutter

One photo taken: the Before slot now shows the thumbnail with a check + a retake affordance (rotate-ccw); the active slot advances to After. The viewfinder coaches “shoot the after from the same angle.”

4b.3 Before + after — review Owner / Member
9:41
Review photos
After: clean unit Before: dirty unit Before After

Drag to preview the before/after slider customers will see

Both shots captured: previewed with the real .ba-slider component (the same one on the Showcase & Work Gallery) so the servicer sees exactly what customers will. Retake either shot. This is literally what the owner pairs in the gallery.

4b.4 Single-photo mode Owner / Member
9:41
Review photo
Finished haircut Photo
Single-photo mode — for verticals where before/after doesn’t apply (a haircut, a detail, a finished install).

Single-photo path (e.g. a haircut, a finished detail) uses the slider’s .ba-slider--single variant — same component, one image, no handle. Marked “Photo,” not “After.”

4b.5 Attach & caption Owner / Member
9:41
Attach photos
Before After
Attaches to (from the appointment)
Service
HVAC tune-up
Customer
Maria Gomez
Tue, Mar 10 · #APT-4821
A line of context. The owner can edit this before publishing.
You’re signed in as staff — these go to the gallery for your manager to review & publish. Nothing posts publicly from here.

The set auto-associates with the appointment’s service + customer (shown read-only, lock icon) + an optional one-line caption. Submit → the gallery draft tray (not auto-public). Staff see the “manager will review” note (owner sees a curate-now variant, 4b.6).

4b.6 Sent to gallery Member (staff)
9:41
Job photos

Added to gallery

Before After

Your before/after for HVAC tune-up was sent. Your manager will review & publish it to the Showcase.

Field staff capture; only the owner/admin curates & publishes. Nothing is public yet.

Submitted confirmation (staff): “Added to gallery” with the pair preview + the explicit “your manager will review/publish” message. Reaffirms the role split. “Add more” loops back to capture.

4b.7 Sent to gallery Owner / Admin
9:41
Job photos

Added to your gallery

Before After

Saved to the gallery draft tray, tagged HVAC tune-up. Publish it to your Showcase whenever you’re ready.

Owner variant: same draft-tray destination, but the owner gets a direct “Curate & publish” link to the web Work Gallery. Both roles capture; only Owner/Admin publish.

5 · Leads / Inbox — AI-captured inbound & convert to booking

The heart of the PRD: every inbound across SMS, web form, social DM, and phone, captured and qualified by the AI responder. Channel icons distinguish source; tap to see the AI conversation, then qualify, assign, or convert to a booking. (Hidden from Member by default.)

5.1 Leads inbox Owner / Admin

Channel icons (SMS / web / DM / phone) + AI-handled tags directly map the PRD’s cross-channel AI responder. Unread rows highlighted; filter chips reuse choice pills. Each row → lead detail.

5.2 Lead detail — AI thread & convert Owner / Admin
9:41
Priya N.SMS · 3 min ago
Channel · captured by AI
SMS · +1 (818) 555-0142
New
Interested in
AC install — 3-bed home
What the AI gathered
Priya
Hi, do you install AC units? Need a quote.
AI responder
Yes! We install central & mini-split AC. What size is the home, and is this a replacement or a new install?
3-bedroom, ~1,600 sq ft. Replacing an old central unit.
AI responder
Got it. A tech can do a free on-site quote. I have Wed 2pm or Thu 10am — want me to book one?

Shows the AI conversation (chat bubbles), the gathered job details, and the conversion path: Convert to booking (primary), Qualify, Assign, Reply. Ties directly to PRD “AI conversation → qualify → gather details → book.”

6 · Customers — list & profile (history, LTV, contact)

The repeat-client value the PRD calls out for personal-services verticals. Search the book of business; open a profile for history, lifetime value, and one-tap call/text. (Hidden from Member by default.)

6.1 Customer list Owner / Admin

Reuses Search (with clear), Team avatars (color variants), alphabetical dividers, and status pills (“Repeat”). Add-customer in the bar.

6.2 Customer profile Owner / Admin
9:41
Customer
MG
Maria Gomez
Customer since Aug 2024
Repeat clientBurbank, CA
$2,140
Lifetime
6
Jobs
0
No-shows
Call Text
Appointment history
Mar 10
HVAC tune-up
$140 · Alex R.
Booked
Dec 4
Furnace repair
$420 · Sam D.
Done
Aug 19
AC install
$1,580 · Jordan
Done

Lifetime value, job count, no-show count (reuses cust-stats), call/text/book quick actions, and full history (reuses agenda rows + status badges). Supports the PRD repeat-client / reactivation model.

7 · Notifications — in-app alerts center

The in-app feed that mirrors our notification emails & push: new booking, assigned-to-you, cancellation, gap-to-fill, and the nightly/weekly digest. Grouped by time, unread-marked, each tapping through to the relevant screen.

7.1 Alerts center All users

Each alert type maps to our notification emails (new booking, assigned, cancellation, gap, nightly prep, weekly digest). Type-colored icon tiles, unread dots + highlight, “mark all read,” date groups, deep-link tap-through.

8 · Team — roster & assignments (Owner/Admin) vs “My assignments” (staff)

Owner/Admin manage the roster, roles, and who’s on what. Staff (Member) only ever see their assignments — no roster, no role controls. Reuses Team avatars, role pills, and the assignee picker.

8.1 Team roster Owner / Admin
9:41
Team3 of 5 seats
JM
Jordan Mills (you)
jordan@jordansplumbing.com
Owner
AR
Alex Reyes
3 jobs today · active 2h ago
Admin
SD
Sam Diaz
4 jobs today · available
Member
taylor@example.com
Invite sent 1 day ago
Invited

Owner: billing + team + everything. Admin: bookings/calendar/leads/team, no billing. Member: their assignments only.

Reuses Team roster avatars, role pills (Owner/Admin/Member/Invited), and seat count. Invite + role management are Owner/Admin only. Tapping a member shows their day & lets you reassign.

8.2 My assignments Member (staff)

Member role: no roster, no roles, no reassigning others — just their own jobs, with completion state. Enforces the reduced staff permission set from Settings · Team.

9 · Settings / Account — mobile list & mobile-specific toggles

A mobile settings list that links out to the deeper web settings (profile, business profile, services, availability, channels) plus the two genuinely mobile-specific controls: the availability quick-toggle and notification preferences. Member sees a reduced list (no team, no billing).

9.1 Settings Owner / Admin
9:41
Settings
Available for jobs
Tap to set yourself away
JM
Jordan Mills
Owner · Jordan’s Plumbing
Business
App

AI Revenue Engine · v1.0 (build 240)

Grouped settings list (reuses set-list rows + toggle). Deep links to the existing web settings pages; doesn’t rebuild them. Mobile-specific: availability quick-toggle up top, notification prefs (9.2). Sign out as a danger row. Member would not see Team or Subscription.

9.2 Notification preferences All users
9:41
Notifications
Push to this phone
New booking
When the AI books a job
Assigned to me
Cancellations
Gaps to fill
Nightly prep & digest
Quiet hours
Mute overnight
9:00 PM – 7:00 AM

Mirrors the notification emails — owners pick which alerts also reach their phone.

Per-type push toggles (reuse the iOS-style toggle), mapped 1:1 to the alerts feed & notification emails, plus quiet hours. The key mobile-specific control the brief calls out.

10 · Empty / First-run states

What a brand-new owner sees the first time they open the app, and the empty states for the key tabs before any activity exists. Every empty state points to the next best action — usually sharing the booking link so the AI can start working.

10.1 First run — no bookings yet New owner
9:41
R Revenue Engine

Welcome, Jordan

Your booking system is live.

Revenue
No data
Leads
No data

No bookings yet

Put your booking link & QR where customers see you. Every scan books a job 24/7.

Make decals, cards & flyers

Mirrors the web Dashboard first-run: empty KPI cards + a share-your-link hero (booking link + copy + decals CTA). Drives the PRD on-ramp (every scan = a captured lead).

10.2 Empty — Leads Owner / Admin
9:41
Leads

No leads yet

When someone texts, DMs, or fills out your form, the AI answers and the lead shows up here.

Share your booking link Check your channels

Empty Leads explains what the channel does + gives two next actions (share link, check channels). Reuses the in-screen empty pattern.

10.3 Empty — Calendar (free day) Owner / Admin
9:41
ScheduleTue, Mar 10

Nothing booked today

A clear day. Share your link to fill it, or add a job manually.

Share booking link

Empty day keeps the day-strip visible (so you can jump elsewhere) and offers fill / add actions. Reuses the empty pattern with a neutral icon.

How it maps · PRD & foundations

PRD coverage: Service 1 Booking — Calendar, Appointment detail, Leads→convert, appointment ID. Service 2 Calendar Prep — gap-detection callouts, nightly-prep & weekly-digest notifications. AI Lead Capture — Leads inbox across SMS/web/DM/phone with the AI conversation thread + AI-handled tags. Owner alerts — Notifications center + push prefs. Repeat-client / LTV — Customer profile. SEO & share — booking-link share entry points. Brand / trust system — Job-photo capture (4b) is the capture source feeding the Work Gallery draft tray → public Showcase → reviews.

Job-photo capture (4b): triggered by “Mark complete” (an “Add photos?” sheet) or the Appointment’s “Add photos” action any time. Camera viewfinder with Before/After (or Single) slots + retake; previews with the shared .ba-slider; auto-tags the service + customer; submits to the gallery draft tray (.draft-tray on settings-gallery.html) — never auto-public. Both Owner and Member capture; only Owner/Admin curate & publish (staff see “your manager will review/publish”).

Foundations reused: App Shell (.app container query) · bottom Tab Bar & .appbar--mobile · Metric Cards (incl. empty) · Tables → mobile list rows · Scheduling Calendar (Week grid, blocks, now-line) + Calendar agenda · status Badges / Pills / choice chips · Buttons & Actions (+ icon buttons, action rows) · Search · Team avatars + role pills + assignee picker · Toasts & Modals (as bottom sheets) · forms / toggles.

Roles: Owner/Admin get the full 5-tab app (Home/Calendar/Leads/Customers/Settings) with revenue & recovery KPIs, Team management, billing. Member (staff) get a reduced 4-tab app (My day/Schedule/Alerts/Settings) — only their assignments, an availability quick-toggle, no money metrics, no roster, no billing.