import React, { useState } from 'react'; import { Head } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { Megaphone, Send, CheckCircle2, Users, Search, Calendar, Target, Filter, ChevronRight, MessageSquare, Info } from 'lucide-react'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'; export default function Announcements() { const [isDialogOpen, setIsDialogOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [newAnnouncement, setNewAnnouncement] = useState({ title: '', content: '', audience: 'Shortlisted' }); const [toastMessage, setToastMessage] = useState(null); const [announcements, setAnnouncements] = useState([ { id: 1, title: 'Interview Schedule Updates', content: 'Hello everyone, we will be conducting the next round of interviews next week. Please keep your phones available and ensure you have a stable internet connection for the video call.', audience: 'Selected Candidates', created_at: '2 days ago', reads: 12, replies: 4 }, { id: 2, title: 'Welcome to the Recruitment Pool', content: 'We have successfully added your profile to our recruitment pool. We will contact you if your skills match our requirements.', audience: 'Shortlisted', created_at: '5 days ago', reads: 45, replies: 0 } ]); const showToast = (message) => { setToastMessage(message); setTimeout(() => setToastMessage(null), 3000); }; const handleCreate = (e) => { e.preventDefault(); const newEntry = { id: announcements.length + 1, title: newAnnouncement.title, content: newAnnouncement.content, audience: newAnnouncement.audience, created_at: 'Just now', reads: 0, replies: 0 }; setAnnouncements([newEntry, ...announcements]); setNewAnnouncement({ title: '', content: '', audience: 'Shortlisted' }); setIsDialogOpen(false); showToast('Announcement sent successfully'); }; const filteredAnnouncements = announcements.filter(ann => ann.title.toLowerCase().includes(searchTerm.toLowerCase()) || ann.content.toLowerCase().includes(searchTerm.toLowerCase()) ); const stats = [ { label: 'Total Announcements', value: announcements.length, icon: Megaphone, color: 'text-blue-600', bg: 'bg-blue-50' }, { label: 'Audience Reach', value: '57 Candidates', icon: Target, color: 'text-emerald-600', bg: 'bg-emerald-50' }, { label: 'Avg. Engagement', value: '82%', icon: CheckCircle2, color: 'text-purple-600', bg: 'bg-purple-50' }, ]; return ( {toastMessage && (

{toastMessage}

)}

setSearchTerm(e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />

{filteredAnnouncements.length === 0 ? (

No announcements

You haven't posted any announcements yet

) : ( filteredAnnouncements.map((ann) => (

To: {ann.audience}

{ann.created_at}

{ann.title}

{ann.content}

)) )}

); }