Customer App · Screen 4 of 6

Real-time Tracking

Live map view showing the professional en route, with ETA, status steps, and quick contact actions.

9:41
Tracking Help
🚗
1.2 km
Booked
Confirmed
En Route
Arrived
AB
Ahmed B.
★★★★★ 4.9
En Route
🕐 Arriving in ~8 min
Quick Wash — Toyota Corolla
Call
Message
Home
Book
Track
History
Profile
Active Tracking — En Route
Map Area
Height: 200px, bg: #D9E8F2 (simulated map)
Grid: CSS background-image grid pattern for road texture
Customer dot: pulsing animation, blue, 14px core with glow rings
Pro dot: orange (#FF6B35), 34px circle with box-shadow glow
Progress Steps
Done: bg: #22C55E, checkmark label in green
Current: bg: #0B96D0, label in blue
Pending: bg: #E8EEF4, label in #6B7A90
Connector line: 2px, green when done, gray when pending
Status Card
Overlaps map: border-radius 22px top, negative margin-top -8px, z-index 2
ETA chip: bg: #F5F7FA, border-radius: 10px, padding: 8px 12px
En Route badge: bg: rgba(34,197,94,.1), color: #16A34A
Action Buttons
Style: outlined, border 1.5px solid #E8EEF4, border-radius: 12px
Cancel link: font-size 11px, color: #EF4444 (red), font-weight 600
Layout: flex row, gap 8px, full width split equally