Prototype blueprint

Architecture & page map

A connected map of the complete Surya prototype and its shared dummy-data model.

COMPLETE CLICKABLE PROTOTYPE

One CRM. One customer record. One complete journey.

The architecture consolidates the formal Surya workflow, CRM proposal and approved AI extensions into one Bootstrap interaction model. No production backend or real API is connected.

32 Connected screens 16 Shared entities 4 Actor types

Connected page map

Prototype information architecture

Lead acquisition

Capture & import Form builder Customer landing page Duplicate review OTP verification Mobile / WhatsApp / email verification Source attribution

AI & conversations

Qualification queue Lead table & Kanban Lead 360° journey Lead health WhatsApp AI Human handoff Voice calls AI voice calls Recordings & transcripts Unified mailbox

Engagement

Follow-ups Calendar Meetings Site visits Uber transport Template library

Sales & customer

Documents Bookings Agreements Payments Expenses Post sales Channel partners

Management

Executive dashboard Reports & KPI Marketing Staff availability Team groups Users & roles Mandatory employee 2FA Integrations Automation Settings

Shared data model

Realistic prototype entities

Lead Contact & consent Verification state Qualification Conversation Journey event Task & SLA Meeting / visit Recording & transcript Booking & unit Document Payment User / role Partner Campaign Integration log

Journey-first rule: every customer-facing AI action, human action or system event creates a timestamped Journey Event linked to the same Lead.

Reusable design system

Interface foundations

PRIMARY #315BD6

NAVY #13245C

SUCCESS #259B84

WARNING #E69937

SURFACE #FFFFFF

Responsive shell Kanban pipeline KPI cards Tables Status pills Journey timeline Modals Form controls Charts Toasts Role-aware nav

Journey event contract

How every interaction stays connected

AI WhatsApp answer · score · summary · health

Human Call · handoff · meeting · feedback

System Capture · OTP · assignment · reminder

Commercial Document · booking · payment · handover

Unified Customer Journey Actor · channel · timestamp · summary · evidence · next action