teal-whatsapp

As a user I want to be able to use the backend API for lead categorization and priority flagging so that leads are automatically tagged as Enquiry, Follow-up, or Support with High/Medium/Low priority. Implement AI-driven classification using Langchain and store results in MySQL. Expose FastAPI endpoints for retrieving categorized and prioritized leads for the Dashboard page.

As a user I want to be able to use the Conversation page so that I can view AI replies, send photos, review AI responses, and take over chats. Implement the Conversation page (v2) based on the existing JSX design. Features: multi-turn chat UI, AI-generated reply bubbles with typing animation, photo upload and AI-contextual response display, admin take-over control, suggested replies panel, and conversation handoff indicator. Admin flow: Take Over Chat -> Send Reply. User flow: View AI Reply -> Send Photo -> Review AI Response.

As a user I want to be able to use the Dashboard page so that I can view priority alerts, AI summaries, categorized leads, and filter leads. Implement the Dashboard page (v2) based on the existing JSX design. Features: priority alert cards, AI summary panel, categorized lead cards with flip/stack micro-interactions, teal-green progress bar for AI auto-reply status, filter controls, and lead priority tags. Admin flow: View Priority Alerts -> Review AI Summaries. User flow: View Categorized Leads -> Filter Leads. Links to Conversation and Reports pages.

As a user I want to be able to use the Reports page so that I can export Excel reports on-demand and schedule auto-reports. Implement the Reports page (v1) based on the existing JSX design. Features: filter controls (date range, channel, category), report summary cards, charts (lead distribution, AI response timeline, lead status breakdown), data table with sortable columns, export buttons (Excel, PDF), scheduled reports management panel, and report generation timeline. Admin flow: Export Excel Report. User flow: Schedule Auto Report.

As a user I want to be able to use the Login page so that I can sign in securely and access the dashboard. Implement the Login page (v2) based on the existing JSX design. The page is the entry point for both Admin and User personas. On successful login, redirect to Dashboard. Includes form validation, error states, and teal-accent CTA button. Reference existing Login v2 design for pixel-perfect implementation.

As a user I want to be able to use the AI API for instant auto-replies so that customers receive responses in Hindi or English within 30 seconds. Integrate Litellm for LLM routing across GPT, Claude, and Gemini models. Implement Langchain-based multi-turn conversation chain. Expose FastAPI endpoints for triggering and retrieving AI replies per lead/conversation. Support language detection and routing for Hindi/English responses.

As a user I want to be able to use the backend API for conversation management so that admins can take over AI-handled chats and send replies. Implement FastAPI endpoints for fetching conversation history (from MongoDB), posting human replies, toggling admin takeover state, and retrieving AI summaries and suggested replies per conversation. Supports the Conversation page frontend.

As a user I want to be able to use the backend API for reports so that I can export filtered lead reports as Excel or PDF and schedule auto-reports. Implement FastAPI endpoints for generating filtered reports (by date, channel, category, priority), exporting to Excel/PDF, and managing scheduled report configurations (frequency, recipients, last sent, next send). Store schedule configs in MySQL.

As an admin I want to be able to use the backend API for high-priority alerts so that I am notified immediately on WhatsApp when a high-priority lead arrives. Implement a notification service in FastAPI that detects high-priority leads post-categorization and triggers WhatsApp API notifications to the admin. Include alert history storage in MySQL.

As a user I want to be able to use the frontend in Hindi or English so that language switching works across the entire application. Implement i18n support in React (react-i18next) with translation files for all UI strings in English and Hindi. Add language toggle component (visible in Navbar). Ensure AI reply language preference is passed through to the backend.

As a user I want to be able to use the AI API for photo recognition so that I can send product photos and receive AI-contextual replies. Integrate image recognition model (Google Nano Banana) via FastAPI endpoint. Accept image uploads in conversation, analyze product images, and return AI-generated contextual responses. Store image metadata in MongoDB.

As a user I want to be able to use the frontend so that all pages (Dashboard, Conversation, Reports) are connected to live backend APIs. Wire all frontend pages to FastAPI endpoints: Dashboard (leads list, filters, priority alerts, AI summaries), Conversation (chat history, send reply, photo upload, admin takeover), Reports (generate, filter, export, schedule). Replace all mock/static data with real API calls using React Query or Axios.