234 lines
14 KiB
JavaScript
234 lines
14 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, router } from '@inertiajs/react';
|
|
import AdminLayout from '../../../Layouts/AdminLayout';
|
|
import { Megaphone, Plus, Trash2, Send, CheckCircle2, Check, X } from 'lucide-react';
|
|
|
|
export default function Announcements({ initialAnnouncements }) {
|
|
const [announcements, setAnnouncements] = useState(initialAnnouncements || []);
|
|
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;
|
|
}
|
|
|
|
router.post(route('admin.announcements.store'), {
|
|
title: newAnnouncement.title,
|
|
content: newAnnouncement.content,
|
|
type: newAnnouncement.audience === 'Both' ? 'info' : (newAnnouncement.audience === 'Employers' ? 'success' : 'warning')
|
|
}, {
|
|
onSuccess: () => {
|
|
setNewAnnouncement({ title: '', content: '', audience: 'Both' });
|
|
setErrors({});
|
|
setIsFormOpen(false);
|
|
showToast('Announcement broadcasted successfully');
|
|
setTimeout(() => window.location.reload(), 500);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleApprove = (id) => {
|
|
router.post(route('admin.announcements.approve', id), {}, {
|
|
onSuccess: () => {
|
|
showToast('Announcement approved successfully');
|
|
setTimeout(() => window.location.reload(), 500);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleReject = (id) => {
|
|
router.post(route('admin.announcements.reject', id), {}, {
|
|
onSuccess: () => {
|
|
showToast('Announcement rejected successfully');
|
|
setTimeout(() => window.location.reload(), 500);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleDelete = (id) => {
|
|
if (confirm('Are you sure you want to delete this announcement?')) {
|
|
router.delete(route('admin.announcements.delete', id), {
|
|
onSuccess: () => {
|
|
showToast('Announcement deleted');
|
|
setTimeout(() => window.location.reload(), 500);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
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 & Events</h1>
|
|
<p className="text-sm text-slate-500">Approve user-submitted events or broadcast messages to all users.</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 border-none"
|
|
>
|
|
<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 border-none"
|
|
>
|
|
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 border-none"
|
|
>
|
|
<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 flex-wrap gap-y-2">
|
|
<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.type === 'info' ? 'bg-purple-100 text-purple-700' :
|
|
ann.type === 'success' ? 'bg-blue-100 text-blue-700' :
|
|
'bg-emerald-100 text-emerald-700'
|
|
}`}>
|
|
Type: {ann.type}
|
|
</span>
|
|
<span className={`px-2.5 py-1 rounded-md text-[10px] font-bold uppercase border ${
|
|
ann.status === 'approved' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' :
|
|
ann.status === 'rejected' ? 'bg-rose-50 text-rose-700 border-rose-200' :
|
|
'bg-yellow-50 text-yellow-700 border-yellow-200'
|
|
}`}>
|
|
Status: {ann.status}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-slate-600 leading-relaxed whitespace-pre-wrap">{ann.content}</p>
|
|
<div className="flex items-center space-x-2 text-[11px] font-medium text-slate-400">
|
|
<span>Posted by: <strong className="text-slate-600">{ann.posted_by}</strong> ({ann.organization})</span>
|
|
<span>•</span>
|
|
<span>Published: {ann.created_at}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2 self-start flex-wrap gap-2">
|
|
{ann.status === 'pending' && (
|
|
<>
|
|
<button
|
|
onClick={() => handleApprove(ann.id)}
|
|
className="px-3 py-1.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 rounded-xl transition-colors cursor-pointer flex items-center space-x-1 font-bold text-xs border border-solid border-emerald-200"
|
|
title="Approve Announcement"
|
|
>
|
|
<Check className="w-3.5 h-3.5" />
|
|
<span>Approve</span>
|
|
</button>
|
|
<button
|
|
onClick={() => handleReject(ann.id)}
|
|
className="px-3 py-1.5 bg-rose-50 hover:bg-rose-100 text-rose-700 rounded-xl transition-colors cursor-pointer flex items-center space-x-1 font-bold text-xs border border-solid border-rose-200"
|
|
title="Reject Announcement"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
<span>Reject</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
<button
|
|
onClick={() => handleDelete(ann.id)}
|
|
className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors cursor-pointer border-none bg-transparent"
|
|
title="Delete Announcement"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
}
|