214 lines
13 KiB
JavaScript
214 lines
13 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, router } from '@inertiajs/react';
|
|
import AdminLayout from '@/Layouts/AdminLayout';
|
|
import {
|
|
BellRing,
|
|
Send,
|
|
Smartphone,
|
|
MessageCircle,
|
|
CheckCircle,
|
|
BarChart3,
|
|
Users,
|
|
AlertTriangle,
|
|
History,
|
|
Sparkles,
|
|
TrendingUp
|
|
} from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
export default function NotificationsCampaigns({ campaigns, whatsapp_templates }) {
|
|
const [channel, setChannel] = useState('push');
|
|
const [recipients, setRecipients] = useState('All Active Workers');
|
|
const [title, setTitle] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
|
|
const handleBroadcast = (e) => {
|
|
e.preventDefault();
|
|
router.post('/admin/notifications/broadcast', {
|
|
channel,
|
|
recipients,
|
|
title,
|
|
message
|
|
}, {
|
|
onSuccess: () => {
|
|
setTitle('');
|
|
setMessage('');
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<AdminLayout title="Campaigns & Notifications Hub">
|
|
<Head title="Campaigns & Alerts" />
|
|
|
|
<div className="font-sans max-w-7xl mx-auto space-y-8">
|
|
|
|
{/* Header overview and status */}
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-900 tracking-tight">System Campaign Broadcasting Center</h1>
|
|
<p className="text-xs text-gray-500 mt-0.5">Reach users directly via SMS, WhatsApp, and Native Push notifications. Monitor open rates and clicks.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
|
|
|
{/* Column 1 & 2: Broadcast Composer & Campaigns History */}
|
|
<div className="lg:col-span-2 space-y-8">
|
|
|
|
{/* Section 1: Composer */}
|
|
<div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1">
|
|
<Sparkles className="w-4 h-4 text-[#0F6E56]" />
|
|
<span>Direct Campaign Composer</span>
|
|
</h3>
|
|
<p className="text-[10px] text-slate-400 font-semibold mt-1">Schedules immediate or recurring broadcasts</p>
|
|
</div>
|
|
<Badge className="bg-emerald-50 text-emerald-700 border-none font-bold uppercase text-[8px] tracking-wider">SMS Gateway: Active</Badge>
|
|
</div>
|
|
|
|
<form onSubmit={handleBroadcast} className="space-y-4 text-xs font-bold text-slate-700">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Select Channel</label>
|
|
<select
|
|
className="w-full bg-slate-50 border rounded-xl px-3 py-2.5 outline-none cursor-pointer focus:bg-white"
|
|
value={channel}
|
|
onChange={e => setChannel(e.target.value)}
|
|
>
|
|
<option value="push">Native App Push Notification</option>
|
|
<option value="whatsapp">WhatsApp Business API</option>
|
|
<option value="both">Both (Multi-channel coverage)</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Target User Cohort</label>
|
|
<select
|
|
className="w-full bg-slate-50 border rounded-xl px-3 py-2.5 outline-none cursor-pointer focus:bg-white"
|
|
value={recipients}
|
|
onChange={e => setRecipients(e.target.value)}
|
|
>
|
|
<option value="All Active Workers">All Active Workers (1,250 users)</option>
|
|
<option value="Unverified Workers (Morocco & Philippines)">Unverified Workers Pool (142 users)</option>
|
|
<option value="Premium Employers">Premium Employers only (312 users)</option>
|
|
<option value="All Employers">All Registered Employers (380 users)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Notification Title</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
className="w-full bg-slate-50 border rounded-xl px-3 py-2.5 outline-none focus:bg-white focus:ring-2 focus:ring-[#0F6E56]/10"
|
|
placeholder="e.g., Emirates ID Verification Required"
|
|
value={title}
|
|
onChange={e => setTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Notification Text Message</label>
|
|
<textarea
|
|
rows="3"
|
|
required
|
|
className="w-full bg-slate-50 border rounded-xl p-3 outline-none focus:bg-white focus:ring-2 focus:ring-[#0F6E56]/10"
|
|
placeholder="Type the message content. Use tags like {{name}} to personalize matches..."
|
|
value={message}
|
|
onChange={e => setMessage(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className="w-full py-3 bg-[#0F6E56] text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md hover:bg-[#085041] flex items-center justify-center gap-1.5">
|
|
<Send className="w-4 h-4" />
|
|
<span>Broadcast System Campaign</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Section 2: Campaigns History */}
|
|
<div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm overflow-hidden">
|
|
<div className="mb-4">
|
|
<h3 className="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1.5">
|
|
<History className="w-4 h-4 text-slate-600" />
|
|
<span>Broadcast Campaign Logs</span>
|
|
</h3>
|
|
<p className="text-[10px] text-slate-400 font-semibold mt-0.5">Logs of recently delivered campaigns</p>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-100">
|
|
{campaigns.map((camp) => (
|
|
<div key={camp.id} className="py-4 hover:bg-slate-50/50 transition-colors flex items-start justify-between gap-4 text-xs font-bold text-slate-700">
|
|
<div className="space-y-1.5 flex-1">
|
|
<div className="flex items-center space-x-2">
|
|
<Badge className="bg-blue-50 text-blue-700 border-none font-bold uppercase text-[8px]">{camp.channel}</Badge>
|
|
<span className="text-[10px] text-slate-400 font-semibold">Cohort: {camp.recipient_type}</span>
|
|
</div>
|
|
<h4 className="text-sm font-black text-slate-900">{camp.title}</h4>
|
|
<p className="text-slate-500 font-medium text-[11px] leading-relaxed">{camp.message}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-[9px] text-slate-400 font-mono block">{camp.sent_at}</span>
|
|
<div className="mt-2 text-[10px] font-black text-emerald-600 uppercase tracking-wide">
|
|
{camp.delivery_rate} Delivered • {camp.clicks}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Column 3: Pre-approved WhatsApp Templates */}
|
|
<div className="space-y-6">
|
|
<div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm space-y-4">
|
|
<div>
|
|
<h3 className="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1">
|
|
<MessageCircle className="w-4.5 h-4.5 text-emerald-600" />
|
|
<span>WhatsApp Templates</span>
|
|
</h3>
|
|
<p className="text-[10px] text-slate-400 mt-0.5">Meta pre-approved utility check-in templates</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{whatsapp_templates.map((tpl, i) => (
|
|
<div key={i} className="p-3 bg-slate-50 rounded-xl border border-slate-100 text-xs font-bold text-slate-700 space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-black text-slate-800 text-[10px] font-mono leading-none">{tpl.name}</span>
|
|
<Badge className={`border-none text-[8px] font-black uppercase ${
|
|
tpl.status === 'Approved' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'
|
|
}`}>{tpl.status}</Badge>
|
|
</div>
|
|
<p className="text-[10px] text-slate-500 font-medium leading-relaxed bg-white p-2 rounded-lg border border-slate-100">{tpl.text}</p>
|
|
<div className="text-[8px] text-slate-400 uppercase tracking-widest font-black">Category: {tpl.category} • Language: {tpl.language}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Interactive campaign delivery metrics */}
|
|
<div className="bg-blue-50/40 border border-blue-100 p-5 rounded-3xl shadow-sm space-y-3 text-xs font-bold text-slate-700">
|
|
<span className="text-[10px] font-black text-blue-900 uppercase tracking-widest flex items-center gap-1">
|
|
<TrendingUp className="w-4 h-4" />
|
|
<span>Engagement Metrics</span>
|
|
</span>
|
|
<div className="grid grid-cols-2 gap-4 pt-1">
|
|
<div className="bg-white p-3 rounded-xl border border-blue-50 text-center">
|
|
<span className="text-[9px] text-slate-400 uppercase tracking-wider block">Push Open Rate</span>
|
|
<span className="text-lg font-black text-slate-800">42.8%</span>
|
|
</div>
|
|
<div className="bg-white p-3 rounded-xl border border-blue-50 text-center">
|
|
<span className="text-[9px] text-slate-400 uppercase tracking-wider block">WhatsApp Click Rate</span>
|
|
<span className="text-lg font-black text-emerald-600">68.5%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
}
|