docs/implementation_plan_whatsapp_templates.md

# Implementation Plan: WhatsApp Templates Management & Security Hardening

This document outlines the technical implementation for the WhatsApp Message Templates management interface and the prerequisite security hardening of the administrative routes.

## 1. Objectives
- **Security First**: Fix tenant isolation vulnerabilities in administrative routes.
- **Meta Compliance**: Provide a UI to Sync and **Create** templates to justify `whatsapp_business_management` permission.
- **Global Readiness**: Ensure 100% i18n coverage (EN/FR) for the Meta App Review screencast.

## 2. Step 0: Security Hardening (Prerequisite)
Audit findings revealed that `apps/api/src/routes/admin.ts` lacks tenant isolation in several GET/POST handlers.
- **Action**: Update all queries to include `where: { organizationId: request.organizationId }`.
- **Affected Endpoints**: `/stats`, `/users`, `/enrollments`, `/live-feed`.

## 3. Backend Architecture (API)

### 3.1 Service Layer (`apps/api/src/services/whatsapp.ts`)
- **`fetchMetaTemplates`**: Fetches existing templates from Meta.
- **`createMetaTemplate`**: New method to submit a template for approval.
```typescript
async createMetaTemplate(config: { accessToken: string; wabaId: string }, template: any) {
    const url = `${this.baseUrl}/${config.wabaId}/message_templates`;
    return axios.post(url, template, {
        headers: { 'Authorization': `Bearer ${config.accessToken}` }
    });
}
```

### 3.2 API Routes (`apps/api/src/routes/whatsapp.ts`)
- `GET /v1/whatsapp/templates`: Lists and syncs templates.
- `POST /v1/whatsapp/templates`: Accepts `name`, `language`, `category`, and `components` to create a new template on Meta.

---

## 4. Frontend Architecture (Admin)

### 4.1 Templates Page (`TemplatesPage.tsx`)
- **i18n Implementation**: Mandatory use of `useTranslation()` for all labels.
- **Template Creation Form**:
    - Fields: Name (uppercase/underscores), Category (MARKETING/UTILITY), Language, Body Text.
    - Submit: Triggers the Meta approval workflow.
- **Sync Logic**: Integration with React Query `invalidateQueries` to refresh the table after creation or manual sync.

### 4.2 Translation Keys (`en.json`)
Add keys for:
- `whatsapp.templates.title`
- `whatsapp.templates.sync_button`
- `whatsapp.templates.create_button`
- `whatsapp.templates.status_approved`
- etc.

---

## 5. Implementation Steps
1. **Phase 1: Security**: Patch `admin.ts` routes.
2. **Phase 2: Backend**: Extend `WhatsAppService` and add Template routes.
3. **Phase 3: Frontend**: Build `TemplatesPage.tsx` with creation form and full i18n.
4. **Phase 4: Validation**: Verify the flow with a real Meta Business account for the screencast.