ROADSIDE
New Service & Ticket Workspace
Design preview — click any tile to see the interactive mockup for that section. These are visual-only prototypes; no data saves, no APIs connected. Once approved, designs get ported to the live portal.
9 FORM SECTIONS 1 WORKSPACE PANEL MORE COMING
01 — 09 New Service Form 9 SECTIONS
01 Contact
Multi-contact with role dropdown + USDOT/MC lookup (3 states)
3 states · USDOT live API VIEW →
02 Service Type
5-category tile grid (Towing, Roadside, Mechanical, Specialty, Transport) + chip summary
21 services · multi-select VIEW →
03 Location
Service location + multi-stop destinations with labels, SMS pin button
A/B/C blocks · distance auto VIEW →
04 Unit Info
9 types, PlateToVin lookup, Tractor+Trailer dual panel, condition suggestions
2 states · red/blue dual VIEW →
05 Dispatch Note
Free text + AI Summarize side-by-side, preview of what provider will see
3 states · AI-assisted VIEW →
06 Services & Charges
AI parser + preset dropdown, editable line items, 4% fee auto-line-item
2 states · live totals VIEW →
07 Customer Payment
Card info (for manual charge) + Send Payment Link via RoadSync, status tracking
3 states · RoadSync integration VIEW →
08 Scheduling
ASAP / Scheduled toggle, date+time picker, reminders with smart defaults
3 states · reminders VIEW →
09 Internal Note
Chat-style messages with @mentions, threaded replies, system events
2 states · @mention picker VIEW →
WORKSPACE Ticket Workspace Pieces 4 OF 4 DESIGNED ✓
WS Provider Assignment
Full-width top bar — compact list with AI ranking, confirm modal, assigned state with Ramp card
3 states · Ramp integration VIEW →
WS Chat Panels
Customer (left) + Provider (right) side-by-side, SMS/MMS via Dialpad, email
iMessage-style · AI suggests VIEW →
WS Activity Log
Bottom strip with last 5 events, AI-summary at top, expandable full history modal
timeline · filters · CSV export VIEW →
WS Payment Status Badge
Workspace header badge: Pending → Link Sent → Opened → Paid → Failed
progress bar + popover · 6 states VIEW →
How to use this preview: Click any tile to open the mockup in a new tab. Every section shows multiple states stacked on one page (empty, filled, edge cases, etc.) so you can see the full flow at a glance. Nothing saves, no APIs fire. Once you approve each mockup, we'll port it to real React code in the live portal as one coordinated build.