MotorFlow - Automotive Lead Management System

MotorFlow is a modern, high-fidelity lead management Single-Page Application (SPA) designed exclusively for the high-velocity environment of automotive dealerships (e.g., HSR Motors).

It bridges the crucial gap between high-level business analytics (Business Managers) and rapid, on-the-ground sales execution (Sales Agents).

Features

• Role-Adaptive UI: Instantly switch between "Business Manager" and "Sales Agent" personas. The application re-contextualizes user tags, analytics access, and historical audit logging based on the active role.
• Native Kanban Pipeline: Replaces static spreadsheet rows with a fully interactive HTML5 drag-and-drop board. Agents can physically move customer cards across sales stages (New > Contacted > Test Drive) with instant visual feedback.
• Real-Time Global Search: A unified JS-powered search engine instantly filters complex data tables and Kanban cards simultaneously as you type, with zero server lag.
• Immutable Audit Trail: Enforces strict operational accountability. Every manual note, call log, or completed task is securely time-stamped with the active user's credentials and permanently locked into the history—giving managers a tamper-proof audit trace.
• AI Automation Suite: Simulates modern workflow automations directly into its interface:
  • Predictive Scoring: Visually flags high-intent buyers (e.g., 🔥 98 Score).
  • Generative AI Responses: A 1-click feature that parses a customer's target car variant and budget to instantly draft hyper-personalized follow-up messaging, injecting a system note directly into the timeline.
  • 1-Click WhatsApp: Simulates instant API connections to consumer messaging platforms to increase speed-to-lead.

Technologies Used

• HTML5: Semantic structure and native Drag-and-Drop APIs.
• CSS3: Pure vanilla CSS featuring custom variables, modern Flexbox/Grid layouts, glassmorphism overlays, and smooth CSS animations.
• JavaScript (ES6+): Vanilla JS for DOM manipulation, real-time array filtering, event delegation, and dynamic mock-state management without relying on heavy frameworks like React or Vue.
• Lucide Icons: Clean, consistent SVG iconography.

Getting Started

Because MotorFlow is built entirely with vanilla web technologies, there are no dependencies to install or complex build steps.

1. Clone the repository: git clone https://github.com/yourusername/MotorFlow.git
2. Navigate to the project folder.
3. Simply double-click index.html to open the application in any modern web browser.

Project Structure

/MotorFlow
├── index.html     # Main SPA structure and layout
├── styles.css     # UI design, variables, responsive logic, and animations
└── app.js         # Core interactive logic, filtering, Kanban DnD, and state

Walkthrough

1. Open the app and observe the high-level Dashboard metrics.
2. Click the user profile widget in the bottom left (Mohan Krishna) to swap into the Sales Agent view.
3. Navigate to Lead Listing and type "Rahul" in the search bar to see instant filtering.
4. Navigate to Lead Management and drag Priya Desai from "Contacted" into "Test Drive".
5. Click on any lead's name to open their Details. Type a custom note, click save, and then "Mark as completed" to see the immutable audit history in action.