import { Head, Link } from '@inertiajs/react'; import { AlertTriangle, CheckCheck, Megaphone, MessageSquare, Send, Smartphone, ArrowUpRight, Zap, ArrowRight, } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Progress } from '@/components/ui/progress'; import { StatCard } from '@/components/ui/stat-card'; import { StatusBadge } from '@/components/ui/status-badge'; interface Stats { activeNumbers: number; totalCampaigns: number; totalMessagesSent: number; totalDelivered: number; totalFailed: number; totalReceived: number; } interface RecentCampaign { id: number; name: string; status: string; message_label: string; sent_count: number; delivered_count: number; total_recipients: number; progress: number; created_at: string; } interface WeeklyActivityDay { day: string; date: string; sent: number; delivered: number; } interface DeliveryStatus { total: number; delivered: number; failed: number; pending: number; sent: number; deliveryRate: number; unresolvedRate: number; } interface ClientDashboardProps { stats: Stats; recentCampaigns: RecentCampaign[]; weeklyActivity: WeeklyActivityDay[]; deliveryStatus: DeliveryStatus; } export default function ClientDashboard({ stats, recentCampaigns, weeklyActivity, deliveryStatus, }: ClientDashboardProps) { const totalDelivered = stats.totalDelivered; const totalSent = stats.totalMessagesSent; const totalFailed = stats.totalFailed; const totalReceived = stats.totalReceived; const deliveryRate = deliveryStatus.deliveryRate; const unresolvedMessages = deliveryStatus.failed + deliveryStatus.pending + deliveryStatus.sent; const weeklyData = weeklyActivity; const hasWeeklyTraffic = weeklyData.some( (day) => day.sent > 0 || day.delivered > 0, ); const maxVal = Math.max( ...weeklyData.map((d) => d.sent), ...weeklyData.map((d) => d.delivered), 10, ); const chartHeight = 150; const chartWidth = 500; const paddingLeft = 40; const paddingRight = 20; const paddingTop = 15; const paddingBottom = 25; const getX = (index: number) => { const step = (chartWidth - paddingLeft - paddingRight) / (weeklyData.length - 1); return paddingLeft + index * step; }; const getY = (value: number) => { const ratio = value / maxVal; return ( chartHeight - paddingBottom - ratio * (chartHeight - paddingTop - paddingBottom) ); }; // Build Sent line path let sentPath = ''; let sentAreaPath = ''; if (weeklyData.length > 0) { sentPath = `M ${getX(0)} ${getY(weeklyData[0].sent)}`; weeklyData.forEach((d, idx) => { if (idx > 0) { sentPath += ` L ${getX(idx)} ${getY(d.sent)}`; } }); sentAreaPath = `${sentPath} L ${getX(weeklyData.length - 1)} ${chartHeight - paddingBottom} L ${getX(0)} ${chartHeight - paddingBottom} Z`; } // Build Delivered line path let deliveredPath = ''; let deliveredAreaPath = ''; if (weeklyData.length > 0) { deliveredPath = `M ${getX(0)} ${getY(weeklyData[0].delivered)}`; weeklyData.forEach((d, idx) => { if (idx > 0) { deliveredPath += ` L ${getX(idx)} ${getY(d.delivered)}`; } }); deliveredAreaPath = `${deliveredPath} L ${getX(weeklyData.length - 1)} ${chartHeight - paddingBottom} L ${getX(0)} ${chartHeight - paddingBottom} Z`; } return ( <>

{/* Performance & Limit Cards */}

{/* WhatsApp Channels Status */}

Saluran WhatsApp

{stats.activeNumbers} Terhubung

Aktif

Nomor pengirim pesan WhatsApp Business aktif

{/* Campaign Overview Widget */}

Ringkasan Kampanye Siaran

{stats.totalCampaigns} Diluncurkan

Total

Kampanye broadcast yang telah/sedang berjalan

{/* Statistics Highlights */}

Metrik Pengiriman Pesan

{/* Performance Analytics Section */}

{/* Weekly Activity Trend (Line/Area Chart) */} Tren Aktivitas Mingguan Tren visual pesan terkirim dan diterima selama 7 hari terakhir.

{/* Legend */}

Pesan Keluar

Pesan Diterima

{/* Delivery Success Ratio (Doughnut Chart) */} Status Pengiriman Ringkasan persentase tingkat keberhasilan kirim.

{deliveryRate}% Berhasil

{/* Details List */}

Tersampaikan

{deliveryStatus.delivered.toLocaleString()}{' '} ({deliveryRate}%)

Gagal / Menunggu / Proses

{unresolvedMessages.toLocaleString()} ( {deliveryStatus.unresolvedRate}%)

{/* Main Content Grid */}

{/* Recent Campaigns */}

Kampanye Terakhir

Pantau progres langsung pesan siaran massal

{recentCampaigns.length > 0 ? ( recentCampaigns.map((camp) => (

{camp.name} Template:{' '}


                                                        {camp.message_label}

{/* Progress bar */}

Terkirim {camp.sent_count} /{' '} {camp.total_recipients} ( {camp.progress}%) {camp.delivered_count}{' '} Tersampaikan

ID Kampanye: #{camp.id} Mulai {camp.created_at}

)) ) : (

Belum ada kampanye yang dijalankan

Mulai siarkan pesan menggunakan template sekarang

)}

{/* Quick Start Guide */}

Panduan Memulai

3 langkah mudah untuk mulai mengirim pesan

1

Hubungkan WhatsApp Business

Buka menu{' '} Nomor WhatsApp {' '} untuk konfigurasi dan hubungkan akun WABA Anda.

2

Buat Template Pesan

Buat dan sinkronkan{' '} Template Pesan {' '} resmi sesuai standar kebijakan Meta WhatsApp.

3

Siarkan & Pantau Hasil

Buka menu{' '} Kampanye Siaran , pilih kontak atau grup, pilih template, dan kirimkan siaran Anda.

); } ClientDashboard.layout = (page: any) => page;