# WhatsApp SaaS - Implementation Steps

This guide outlines the step-by-step process to build and deploy the WhatsApp Automation SaaS platform.

## Phase 1: Foundation (Backend & Database)

### 1. Database Setup
-   [ ] **Create Database:** Setup PostgreSQL database (e.g., `whatsapp_saas`).
-   [ ] **Define Schema (Prisma):**
    -   Define `users`, `business_profiles`, `integrations`.
    -   Define `contacts`, `conversations`, `messages`.
    -   Define `automation_rules`, `ai_agents`, `business_entities`.
    -   Use UUIDs (`@default(uuid())`) and JSONB fields.
-   [ ] **Run Migrations:** `npx prisma migrate dev --name init`.

### 2. Backend Server Setup (`unified_server`)
-   [ ] **Initialize Node.js Project:** `npm init -y`.
-   [ ] **Install Dependencies:** `express`, `cors`, `dotenv`, `@prisma/client`, `axios`, `jsonwebtoken`, `bcryptjs`, `winston`.
-   [ ] **Structure:**
    -   `src/controllers`: Logic for auth, business, messaging.
    -   `src/routes`: API definitions.
    -   `src/services`: Business logic (AI, Automation, WhatsApp).
    -   `src/middleware`: Auth checks, error handling.

### 3. Implementing Core Modules
-   [ ] **Authentication:**
    -   Implement JWT-based Login/Register.
    -   Implement "Login via WhatsApp" (OTP flow).
-   [ ] **Business Profiles:**
    -   CRUD for creating/updating business details.
    -   API to fetch dashboard configuration based on `business_type`.
-   [ ] **WhatsApp Integration:**
    -   Set up Webhook endpoint (`POST /webhooks/whatsapp`).
    -   Verify webhook with Meta.
    -   Handle incoming messages -> Save to DB.
    -   Send outgoing messages -> Call Meta Graph API.

### 4. AI & Automation Logic
-   [ ] **Automation Rules Engine:**
    -   On incoming message -> Check `automation_rules` table.
    -   Match keyword/intent -> Execute action (Send Message, Tag User).
-   [ ] **AI Assistant:**
    -   Integrate OpenAI API.
    -   Fetch `ai_agents` settings for the business.
    -   Generate response based on context + business entities.

---

## Phase 2: Frontend Dashboard (React)

### 1. Project Setup
-   [ ] **Create App:** `npx create-react-app frontend` or `vite`.
-   [ ] **Dependencies:** `axios`, `react-router-dom`, `recharts` (for charts), `lucide-react` (icons), `zustand` (state).

### 2. Authentication UI
-   [ ] **Login/Register Pages:** Forms for entry.
-   [ ] **Onboarding:** Step-by-step wizard to set up Business Profile.

### 3. Dynamic Dashboard Implementation
-   [ ] **Dashboard Component:**
    -   Fetch user's business profile.
    -   Fetch applicable widgets configuration.
    -   Render widgets dynamically (KPI cards, charts, lists).
-   [ ] **Widgets Library:** Create reusable components (`KPIWidget`, `ChartWidget`, `ListWidget`).

### 4. Messaging Interface (Unified Inbox)
-   [ ] **Chat Layout:** Sidebar with conversation list, Main area with message thread.
-   [ ] **Real-time Updates:** Use polling or WebSockets (Socket.io) for new messages.
-   [ ] **Rich Media:** Display images/docs in chat.

---

## Phase 3: Advanced Features

### 1. Campaigns (Broadcasting)
-   [ ] **Campaign Builder:** UI to select verified templates and target audience (tags).
-   [ ] **Backend Worker:** Scheduled job to send messages in batches (respecting Meta rate limits).

### 2. Business Entities Management
-   [ ] **Generic Interface:** UI to manage Products/Properties based on usage.
-   [ ] **JSON Builder:** For custom fields.

---

## Phase 4: Testing & Deployment

### 1. Testing
-   [ ] **Unit Tests:** Jest for critical logic (Auth, Automation).
-   [ ] **Integration Tests:** Verify WhatsApp webhook flow.
-   [ ] **User Acceptance:** Test end-to-end flows (Register -> Connect WA -> Send Msg).

### 2. Deployment
-   [ ] **Backend:** Deploy Node.js server to VPS (Hostinger) using PM2.
-   [ ] **Frontend:** Build optimized assets (`npm run build`) and serve via Nginx/Apache.
-   [ ] **Database:** Ensure secure access credentials.
-   [ ] **Domain:** Configure SSL (Certbot) and domain pointing.

---

## Technical Stack Summary

| Component | Technology |
| :--- | :--- |
| **Backend** | Node.js, Express, Prisma |
| **Database** | PostgreSQL |
| **Frontend** | React, Tailwind CSS |
| **External APIs** | Meta WhatsApp Cloud API, OpenAI API |
| **Infrastructure** | Ubuntu VPS, Nginx, PM2 |