import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; import { BreadcrumbItem, WhatsAppSendStatus, WhatsAppTemplateSend } from '@/types'; import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowLeft, Search } from 'lucide-react'; import { useMemo, useState } from 'react'; interface StatsTemplate { id: number; friendly_name: string; body: string; template_type: string; approval_status: string; } interface Counts { total: number; unique: number; sent: number; delivered: number; read: number; failed: number; responded: number; yes: number; no: number; pending: number; } interface PageProps { template: StatsTemplate; counts: Counts; sends: WhatsAppTemplateSend[]; [key: string]: unknown; } const statusConfig: Record = { queued: 'bg-gray-200 text-gray-700', sent: 'bg-blue-100 text-blue-800', delivered: 'bg-indigo-100 text-indigo-800', read: 'bg-green-100 text-green-800', failed: 'bg-red-100 text-red-800', }; const formatDate = (value: string | null) => value ? new Date(value).toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' }) : '—'; // Percentage of n over d as a compact label; "—" when there's nothing to divide by. const pct = (n: number, d: number) => (d > 0 ? `${Math.round((n / d) * 100)}%` : '—'); type StatusFilter = 'all' | 'sent' | 'delivered' | 'read' | 'failed' | 'responded' | 'yes' | 'no' | 'pending'; export default function WhatsAppTemplateStats() { const { t } = useTranslation(); const { template, counts, sends } = usePage().props; const [search, setSearch] = useState(''); const [status, setStatus] = useState('all'); const filtered = useMemo(() => { const q = search.trim().toLowerCase(); return sends.filter((s) => { const matchesText = q === '' || (s.name ?? '').toLowerCase().includes(q) || s.phone.toLowerCase().includes(q) || (s.response_text ?? '').toLowerCase().includes(q); const matchesStatus = status === 'all' ? true : status === 'responded' ? s.responded_at !== null : status === 'yes' ? s.reply_choice === 'yes' : status === 'no' ? s.reply_choice === 'no' : status === 'pending' ? s.responded_at === null && s.status !== 'failed' : s.status === status; return matchesText && matchesStatus; }); }, [sends, search, status]); const breadcrumbs: BreadcrumbItem[] = [ { title: t('newsletters', 'whatsapp'), href: '/newsletters/whatsapp' }, { title: template.friendly_name, href: route('newsletters.whatsapp.templates.stats', template.id) }, ]; const statusOptions: StatusFilter[] = ['all', 'sent', 'delivered', 'read', 'failed', 'responded', 'yes', 'pending', 'no']; return (

{template.friendly_name}

{t('newsletters', 'stats')}

{/* KPI cards */}
{/* Search + status filter */}
setSearch(e.target.value)} placeholder={t('newsletters', 'search_sends')} className="pl-9" />
{/* Sends table */}
{t('newsletters', 'name')} {t('newsletters', 'phone')} {t('newsletters', 'type')} {t('newsletters', 'status')} {t('newsletters', 'response')} {t('newsletters', 'sent_at')} {filtered.length === 0 ? ( {sends.length === 0 ? t('newsletters', 'no_sends') : t('newsletters', 'no_results')} ) : ( filtered.map((send) => ( {send.name ?? '—'} {send.phone} {send.recipient_type ? t('newsletters', send.recipient_type) : '—'} {t('newsletters', send.status)} {send.reply_choice ? ( {t('newsletters', send.reply_choice)} ) : ( (send.response_text ?? '—') )} {formatDate(send.sent_at)} )) )}
); } function StatCard({ label, value, sub, className }: { label: string; value: number; sub?: string; className?: string }) { return (
{label}
{value}
{sub &&
{sub}
}
); }