194 lines
11 KiB
JavaScript
194 lines
11 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head } from '@inertiajs/react';
|
|
import AdminLayout from '../../../Layouts/AdminLayout';
|
|
import { Megaphone, Plus, Trash2, Send, CheckCircle2 } from 'lucide-react';
|
|
|
|
export default function Announcements() {
|
|
const [announcements, setAnnouncements] = useState([
|
|
{
|
|
id: 1,
|
|
title: 'New Visa Regulations Update',
|
|
content: 'The Ministry of Human Resources and Emiratisation has announced updated guidelines for domestic worker sponsorship starting this month.',
|
|
audience: 'Both',
|
|
created_at: 'May 10, 2026',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Enhanced OCR Verification Active',
|
|
content: 'We have deployed upgraded OCR passport verification to ensure 100% legal compliance for all worker profiles on the platform.',
|
|
audience: 'Employers',
|
|
created_at: 'May 1, 2026',
|
|
},
|
|
]);
|
|
|
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
|
const [newAnnouncement, setNewAnnouncement] = useState({ title: '', content: '', audience: 'Both' });
|
|
const [errors, setErrors] = useState({});
|
|
const [toastMessage, setToastMessage] = useState(null);
|
|
|
|
const showToast = (message) => {
|
|
setToastMessage(message);
|
|
setTimeout(() => setToastMessage(null), 3000);
|
|
};
|
|
|
|
const handleCreate = (e) => {
|
|
e.preventDefault();
|
|
let newErrors = {};
|
|
if (!newAnnouncement.title.trim()) newErrors.title = 'Title is required';
|
|
if (!newAnnouncement.content.trim()) newErrors.content = 'Content is required';
|
|
|
|
if (Object.keys(newErrors).length > 0) {
|
|
setErrors(newErrors);
|
|
return;
|
|
}
|
|
|
|
const newEntry = {
|
|
id: announcements.length + 1,
|
|
title: newAnnouncement.title,
|
|
content: newAnnouncement.content,
|
|
audience: newAnnouncement.audience,
|
|
created_at: 'Just now',
|
|
};
|
|
setAnnouncements([newEntry, ...announcements]);
|
|
setNewAnnouncement({ title: '', content: '', audience: 'Both' });
|
|
setErrors({});
|
|
setIsFormOpen(false);
|
|
showToast('Announcement sent successfully');
|
|
};
|
|
|
|
const handleDelete = (id) => {
|
|
setAnnouncements(announcements.filter(a => a.id !== id));
|
|
showToast('Announcement deleted');
|
|
};
|
|
|
|
return (
|
|
<AdminLayout title="Announcements">
|
|
<Head title="Announcements - Admin Portal" />
|
|
|
|
{/* Toast Notification */}
|
|
{toastMessage && (
|
|
<div className="fixed bottom-4 right-4 bg-slate-900 text-white px-6 py-3 rounded-xl shadow-2xl flex items-center space-x-3 z-50 animate-in slide-in-from-bottom-5">
|
|
<CheckCircle2 className="w-5 h-5 text-emerald-400" />
|
|
<span className="font-medium text-sm">{toastMessage}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6 select-none max-w-6xl mx-auto">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">Platform Announcements</h1>
|
|
<p className="text-sm text-slate-500">Broadcast messages to employers and workers.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsFormOpen(true)}
|
|
className="bg-[#185FA5] hover:bg-[#144f8a] text-white px-5 py-2.5 rounded-xl font-bold text-sm flex items-center space-x-2 transition-colors shadow-sm cursor-pointer"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>New Announcement</span>
|
|
</button>
|
|
</div>
|
|
|
|
{isFormOpen && (
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 animate-in fade-in">
|
|
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-2xl w-full max-w-lg animate-in slide-in-from-bottom-4">
|
|
<div className="flex items-center space-x-2 mb-4 text-[#185FA5] font-bold">
|
|
<Megaphone className="w-5 h-5" />
|
|
<h2>Compose Message</h2>
|
|
</div>
|
|
<form onSubmit={handleCreate} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 mb-1">Title</label>
|
|
<input
|
|
type="text"
|
|
value={newAnnouncement.title}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, title: e.target.value })}
|
|
className={`w-full px-4 py-2.5 rounded-xl border ${errors.title ? 'border-red-500' : 'border-slate-300'} text-sm focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] outline-none transition-all`}
|
|
placeholder="Enter announcement title..."
|
|
/>
|
|
{errors.title && <p className="text-red-500 text-xs mt-1">{errors.title}</p>}
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 mb-1">Content</label>
|
|
<textarea
|
|
rows="4"
|
|
value={newAnnouncement.content}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, content: e.target.value })}
|
|
className={`w-full px-4 py-3 rounded-xl border ${errors.content ? 'border-red-500' : 'border-slate-300'} text-sm focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] outline-none transition-all resize-none`}
|
|
placeholder="Type your message here..."
|
|
></textarea>
|
|
{errors.content && <p className="text-red-500 text-xs mt-1">{errors.content}</p>}
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 mb-1">Target Audience</label>
|
|
<select
|
|
value={newAnnouncement.audience}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, audience: e.target.value })}
|
|
className="w-full px-4 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] outline-none transition-all bg-white"
|
|
>
|
|
<option value="Both">Both Employers & Workers</option>
|
|
<option value="Employers">Employers Only</option>
|
|
<option value="Workers">Workers Only</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex items-center justify-end space-x-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setIsFormOpen(false); setErrors({}); }}
|
|
className="px-5 py-2.5 rounded-xl text-sm font-semibold text-slate-600 hover:bg-slate-100 transition-colors cursor-pointer"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-2.5 rounded-xl text-sm font-bold flex items-center space-x-2 transition-colors shadow-sm cursor-pointer"
|
|
>
|
|
<Send className="w-4 h-4" />
|
|
<span>Broadcast Message</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
{announcements.length === 0 ? (
|
|
<div className="text-center py-16 bg-white rounded-2xl border border-slate-200 shadow-sm text-slate-500">
|
|
<Megaphone className="w-12 h-12 text-slate-300 mx-auto mb-3" />
|
|
<p className="font-medium text-sm">No announcements published yet.</p>
|
|
</div>
|
|
) : (
|
|
announcements.map((ann) => (
|
|
<div key={ann.id} className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col sm:flex-row sm:items-start justify-between gap-4 group">
|
|
<div className="space-y-2 flex-1">
|
|
<div className="flex items-center space-x-3">
|
|
<h3 className="font-bold text-lg text-slate-900 tracking-tight">{ann.title}</h3>
|
|
<span className={`px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider ${
|
|
ann.audience === 'Both' ? 'bg-purple-100 text-purple-700' :
|
|
ann.audience === 'Employers' ? 'bg-blue-100 text-blue-700' :
|
|
'bg-emerald-100 text-emerald-700'
|
|
}`}>
|
|
To: {ann.audience}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-slate-600 leading-relaxed">{ann.content}</p>
|
|
<div className="text-[11px] font-medium text-slate-400">
|
|
Published: {ann.created_at}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => handleDelete(ann.id)}
|
|
className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors self-start sm:opacity-0 group-hover:opacity-100 focus:opacity-100 cursor-pointer"
|
|
title="Delete Announcement"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
}
|