feat: build Outreach page with template list, WhatsApp preview, and message history

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/outreach.tsx

@@ -1,11 +1,148 @@
-import { TopBar } from "@/components/layout/top-bar";
+import { useState } from 'react';
+
+import { TopBar } from '@/components/layout/top-bar';
+import { TemplateList } from '@/components/outreach/template-list';
+import { TemplatePreview } from '@/components/outreach/template-preview';
+import { MessageList } from '@/components/outreach/message-list';
+import { useData } from '@/providers/data-provider';
+import { cx } from '@/utils/cx';
+import type { PatientMessage } from '@/types/entities';
+
+type OutreachKpiCard = {
+    label: string;
+    value: number;
+    delta: string;
+    deltaColor: string;
+};
+
+const recentMessages: PatientMessage[] = [
+    {
+        id: 'msg-1',
+        createdAt: '2026-03-16T08:30:00Z',
+        subject: "Women's Day Health Checkup",
+        body: 'Namaste Priya, Happy Women\'s Day from Ramaiah Memorial! Book your free checkup here.',
+        direction: 'CLINIC_TO_PATIENT',
+        channel: 'WHATSAPP',
+        priority: 'NORMAL',
+        sentAt: '2026-03-16T08:30:00Z',
+        readAt: '2026-03-16T09:15:00Z',
+        senderName: 'Care Team',
+        patientId: 'p-001',
+        status: 'READ',
+        recipientName: 'Priya Sharma',
+        recipientPhone: '+91 98765 43210',
+    },
+    {
+        id: 'msg-2',
+        createdAt: '2026-03-16T09:10:00Z',
+        subject: 'IVF Free Consultation',
+        body: 'Namaste Anitha, We would like to invite you for a FREE first consultation with our IVF specialist.',
+        direction: 'CLINIC_TO_PATIENT',
+        channel: 'WHATSAPP',
+        priority: 'NORMAL',
+        sentAt: '2026-03-16T09:10:00Z',
+        readAt: null,
+        senderName: 'Care Team',
+        patientId: 'p-002',
+        status: 'DELIVERED',
+        recipientName: 'Anitha Reddy',
+        recipientPhone: '+91 87654 32109',
+    },
+    {
+        id: 'msg-3',
+        createdAt: '2026-03-16T10:00:00Z',
+        subject: 'Cervical Screening Reminder',
+        body: 'Namaste Kavitha, This is a gentle reminder for your cervical cancer screening appointment.',
+        direction: 'CLINIC_TO_PATIENT',
+        channel: 'WHATSAPP',
+        priority: 'HIGH',
+        sentAt: '2026-03-16T10:00:00Z',
+        readAt: null,
+        senderName: 'Care Team',
+        patientId: 'p-003',
+        status: 'SENT',
+        recipientName: 'Kavitha Nair',
+        recipientPhone: '+91 76543 21098',
+    },
+    {
+        id: 'msg-4',
+        createdAt: '2026-03-16T10:45:00Z',
+        subject: 'General Follow-up',
+        body: 'Namaste Meena, This is Ramaiah Memorial reaching out to follow up on your recent enquiry.',
+        direction: 'CLINIC_TO_PATIENT',
+        channel: 'WHATSAPP',
+        priority: 'NORMAL',
+        sentAt: '2026-03-16T10:45:00Z',
+        readAt: '2026-03-16T11:02:00Z',
+        senderName: 'Care Team',
+        patientId: 'p-004',
+        status: 'READ',
+        recipientName: 'Meena Iyer',
+        recipientPhone: '+91 65432 10987',
+    },
+    {
+        id: 'msg-5',
+        createdAt: '2026-03-16T11:30:00Z',
+        subject: 'Senior Health Package',
+        body: 'Namaste Lakshmi, Our Senior Health Package is designed specifically for individuals above 60 years.',
+        direction: 'CLINIC_TO_PATIENT',
+        channel: 'WHATSAPP',
+        priority: 'NORMAL',
+        sentAt: '2026-03-16T11:30:00Z',
+        readAt: null,
+        senderName: 'Care Team',
+        patientId: 'p-005',
+        status: 'FAILED',
+        recipientName: 'Lakshmi Devi',
+        recipientPhone: '+91 54321 09876',
+    },
+];
+
+const kpiCards: OutreachKpiCard[] = [
+    { label: 'Messages Sent (24h)', value: 87, delta: '+14% vs yesterday', deltaColor: 'text-success-primary' },
+    { label: 'Delivered', value: 78, delta: '90% delivery rate', deltaColor: 'text-brand-secondary' },
+    { label: 'Read', value: 52, delta: '67% read rate', deltaColor: 'text-brand-secondary' },
+    { label: 'CTA Clicked', value: 18, delta: '+5 vs yesterday', deltaColor: 'text-success-primary' },
+];
 
 export const OutreachPage = () => {
+    const { templates } = useData();
+    const [selectedId, setSelectedId] = useState<string | null>(templates[0]?.id ?? null);
+
+    const selectedTemplate = templates.find((t) => t.id === selectedId) ?? null;
+
     return (
-        <div className="flex flex-1 flex-col">
-            <TopBar title="Outreach" />
-            <div className="flex flex-1 items-center justify-center p-8">
-                <p className="text-tertiary">Outreach — coming soon</p>
+        <div className="flex flex-1 flex-col overflow-hidden">
+            <TopBar title="Outreach" subtitle="WhatsApp templates and message history" />
+
+            <div className="flex flex-1 overflow-hidden">
+                {/* Left: Template List */}
+                <TemplateList templates={templates} selectedId={selectedId} onSelect={setSelectedId} />
+
+                {/* Right: Preview + KPIs + Messages */}
+                <div className="flex-1 overflow-y-auto p-7 space-y-5">
+                    {/* Outreach KPIs */}
+                    <div className="grid grid-cols-4 gap-3">
+                        {kpiCards.map((card) => (
+                            <div
+                                key={card.label}
+                                className="bg-primary rounded-2xl border border-secondary p-4 transition hover:shadow-md"
+                            >
+                                <p className="text-xs font-medium uppercase tracking-wider text-quaternary">
+                                    {card.label}
+                                </p>
+                                <p className="mt-1 text-display-sm font-bold text-primary">{card.value}</p>
+                                <p className={cx('mt-1 text-xs', card.deltaColor)}>{card.delta}</p>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Template Preview */}
+                    {selectedTemplate && <TemplatePreview template={selectedTemplate} />}
+
+                    {/* Recent Messages */}
+                    <MessageList messages={recentMessages} />
+                </div>
             </div>
         </div>
     );