desktop

byArmaan Bukhari

Build a mobile app: ZB Patrol — Master Build Prompt for Emergent Paste everything below this line directly into Emergent as one prompt. App Summary Build "ZB Patrol," a mobile-first operations app for ZB Security GmbH, a Darmstadt-based Wachdienst (guard/patrol company) covering site protection, event/retail/clinic security, and reception/driver staffing. The app replaces paper patrol logs, phone-call check-ins, and WhatsApp incident photos with GPS-verified shift check-in/out, QR checkpoint patrol tours, and instant photo-backed incident reporting — killing the "did the guard actually show up and do the round" trust gap that currently causes invoice disputes and slow incident response. Three user roles in one app: Guard (field), Dispatcher (admin/ops), Client (site owner viewing coverage). Brand & Design Direction This is a command-console utility, not a consumer lifestyle app. Think airport operations board crossed with a DHL tracking app crossed with a police CAD dispatch screen — dense with real-time status, calm and legible under low light or gloved thumbs, zero decorative flourish. German engineering precision: tight grids, tabular numerals, no rounded playful iconography. Color tokens (dark-mode primary, this is a night-shift tool): --bg-primary: #0B1220 (near-black navy, main background) --bg-surface: #12161F (card/panel background) --bg-elevated: #1A2030 (modals, active elements) --border-subtle: #232B3D --text-primary: #F4F5F7 --text-muted: #8A93A6 --accent-signal: #3B82F6 (primary actions, links — cool blue, not generic "brand purple") --status-active: #2FBF71 (on-site, checkpoint confirmed, shift live) --status-warning: #F2A93B (checkpoint overdue, shift starting soon) --status-critical: #E3342F (missed checkpoint, incident filed, no-show) --status-neutral: #4B5468 (off-duty, scheduled/future) Typography: IBM Plex Sans or Inter. Use tabular/monospaced numerals (font-variant-numeric: tabular-nums) for all timestamps, durations, and shift clocks so numbers don't jitter as they update live. Headings semi-bold, body regular, never light-weight (must stay legible in direct sunlight/low battery brightness). Generous 16px+ base size — this gets used one-handed, sometimes with gloves. Reference vibes: Nest Secure app's calm status states, DHL/UPS live tracking's timeline pattern, a security-guard tour system like Guard1/TrackTik's dispatch map, and the restrained data-density of a NOC dashboard. Avoid: gradients, illustration-heavy empty states, playful mascots, anything that reads as a consumer social app. Core Features (how they connect) Shift Check-In/Check-Out (GPS-geofenced) — Guard opens the app at shift start; app verifies the guard's GPS is inside the assigned site's geofence before allowing check-in. This is the trust anchor everything else hangs off: no valid check-in, no shift record, no billing hour logged. QR Checkpoint Patrol Tours — Each site has a defined route of physical checkpoints (QR stickers placed on-site). During an active shift, the guard scans checkpoints in sequence; each scan timestamps a PatrolRound entry. If a checkpoint isn't scanned within its expected window, it auto-flags as missed and pushes a warning to the Dispatcher's live feed. This is what turns "guard was on-site" into "guard actually did the round." Digital Incident Reporting — From any active shift, guard can file an incident: category (theft, trespass, fire/safety, medical, property damage, other), free-text description, 1-4 photos, auto-attached GPS + timestamp. Severity "High" auto-routes a push notification to the Dispatcher immediately and, if the client's site has notifications enabled, to the Client too. This closes the loop that currently runs through slow phone calls. Live Dispatcher Console — Map view of all active guards/sites color-coded by status token (green on-site, amber checkpoint-overdue, red no-show/incident). Feed of live events (check-ins, missed checkpoints, incidents) sorted newest-first. Dispatcher can reassign a guard, message them, or escalate to the client from here. Client Portal (scoped, read-only + request) — Client logs into a lighter view scoped only to their own site(s): current coverage status, today's completed patrol rounds, incident reports for their site, and a "Request additional coverage" button. This is the feature that turns invoice disputes into a non-issue, because the client is watching the proof happen in real time. Data Model Users id, role (guard | dispatcher | client_admin), name, phone, email, assigned_site_ids[], status (active | off_shift) Clients id, company_name, contact_name, contact_email, site_ids[], portal_tier (basic | pro) Sites id, client_id, name, address, geofence_center (lat,lng), geofence_radius_m, checkpoint_ids[] Checkpoints id, site_id, label, qr_code_value, sequence_order, expected_interval_minutes, gps_lat, gps_lng Shifts id, guard_id, site_id, scheduled_start, scheduled_end, actual_checkin_ts, actual_checkout_ts, status (scheduled | active | completed | no_show), checkin_gps_valid (bool) PatrolRounds id, shift_id, checkpoint_id, scanned_at_ts, on_time (bool) Incidents id, shift_id, guard_id, site_id, category, description, photo_urls[], severity (low | medium | high), filed_at_ts, client_notified (bool), status (open | acknowledged | resolved) Notifications id, recipient_user_id, type (missed_checkpoint | incident_high | no_show | shift_reminder), related_id, sent_at_ts, read (bool) Trigger logic (build these as real backend rules, not just UI states): Guard checks in but GPS is outside geofence_radius_m of site → check-in blocked, shift flagged, Dispatcher notified. Checkpoint not scanned within expected_interval_minutes of the prior scan → auto-create Notification(type=missed_checkpoint) to Dispatcher. Guard hasn't checked in within 15 minutes of scheduled_start → Shift.status = no_show, Dispatcher notified immediately, Client notified if portal_tier = pro. Incident filed with severity = high → Notification to Dispatcher instantly; if site's client has notifications on, also notify Client. Shift checkout triggers an automatic hours-worked calculation from actual_checkin_ts to actual_checkout_ts for payroll/invoicing export. Monetization Mechanics (baked into UX, not bolted on) ZB Security's revenue is B2B service contracts, so monetization here is about upsell surfaces inside the operational UX, not consumer payments: Client Portal tiers: Basic (free with contract) shows only live coverage status — is a guard on-site right now, yes/no. Pro (paid add-on) unlocks full incident history, patrol-round timestamps, exportable PDF compliance reports, and real-time push alerts. Gate the "Incident History" and "Export Report" tabs behind a visible but non-intrusive "Upgrade to Pro" card when on Basic — this is the natural upsell moment because the client is actively looking for proof they'd have to pay to see in full. In-app coverage requests: The Client Portal's "Request additional coverage" button generates a lead directly to the Dispatcher's console as a flagged request, turning ad-hoc client calls into a trackable, billable pipeline instead of a phone call that gets forgotten. No transactional payments needed in v1 — this is a contract-based service business; the monetization is operational leverage (fewer disputed invoices, faster upsell to Pro tier, converted coverage-request leads), not a checkout flow. Do not build a payment/checkout screen unless explicitly asked later. Screens to Build Onboarding/Login — role-based (Guard / Dispatcher / Client), phone or email auth Guard: Today's Shift — check-in button (geofence-gated), live checkpoint list with scan-QR action, incident report shortcut, checkout button Guard: File Incident — category picker, photo capture (multi), description field, severity, submit Dispatcher: Live Console — map + status-coded pins, live event feed, tap-through to any shift/incident detail, reassign/message action Dispatcher: Schedule — calendar/list of shifts by site and guard, create/edit shift Client: Coverage Dashboard — today's status card, patrol timeline, incident list (tier-gated), "Request coverage" CTA Client: Upgrade to Pro — simple tier comparison, contact-to-upgrade (no payment flow needed) Shared: Notifications feed Build this as a fully functional mobile web app (responsive, mobile-first, works one-handed) with realistic mock data pre-seeded for one client (ZB Security's own demo site with 3 checkpoints, 2 guards, 1 dispatcher, 1 client login) so it's demoable immediately without empty states everywhere.https://www.zb-security.de/. visit this is the company website and logo also see this and add this in my app follow the exact theme and logos all in app