import React, { useState, useEffect } from 'react'; import { Head, useForm } 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({ initialAnnouncements }) { const [isDialogOpen, setIsDialogOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [toastMessage, setToastMessage] = useState(null); const [announcements, setAnnouncements] = useState(initialAnnouncements || []); useEffect(() => { setAnnouncements(initialAnnouncements || []); }, [initialAnnouncements]); const { data: newAnnouncement, setData: setNewAnnouncement, post, processing, reset } = useForm({ title: '', content: '', audience: 'Shortlisted' }); const showToast = (message) => { setToastMessage(message); setTimeout(() => setToastMessage(null), 3000); }; const handleCreate = (e) => { e.preventDefault(); post('/employer/announcements/create', { preserveScroll: true, onSuccess: () => { reset(); setIsDialogOpen(false); showToast('Announcement posted 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}

)) )}

); }