218 lines
12 KiB
JavaScript
218 lines
12 KiB
JavaScript
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 (
|
|
<EmployerLayout title="Announcements">
|
|
<Head title="Announcements - Employer Portal" />
|
|
|
|
{toastMessage && (
|
|
<div className="fixed bottom-8 right-8 bg-slate-900 text-white px-6 py-4 rounded-2xl shadow-2xl flex items-center space-x-3 z-[100] animate-in slide-in-from-bottom-5">
|
|
<div className="bg-emerald-500 p-1 rounded-full">
|
|
<CheckCircle2 className="w-4 h-4 text-white" />
|
|
</div>
|
|
<span className="font-bold text-xs uppercase tracking-widest">{toastMessage}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6 select-none max-w-5xl mx-auto">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm">
|
|
<div className="relative flex-1 max-w-md group">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search announcements..."
|
|
value={searchTerm}
|
|
onChange={(e) => 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"
|
|
/>
|
|
</div>
|
|
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<button className="bg-[#185FA5] hover:bg-[#144f8a] text-white px-8 py-3 rounded-2xl font-black text-xs uppercase tracking-widest flex items-center justify-center space-x-2 transition-all shadow-lg shadow-blue-200/50 hover:-translate-y-1 active:translate-y-0">
|
|
<Megaphone className="w-4 h-4" />
|
|
<span>New Announcement</span>
|
|
</button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[500px] rounded-3xl p-0 overflow-hidden border-none shadow-2xl">
|
|
<div className="bg-[#185FA5] p-8 text-white relative">
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl" />
|
|
<DialogTitle className="text-2xl font-black relative z-10">Post Announcement</DialogTitle>
|
|
<DialogDescription className="text-blue-100 font-medium mt-2 relative z-10">
|
|
This will be visible to your selected candidates immediately.
|
|
</DialogDescription>
|
|
</div>
|
|
|
|
<form onSubmit={handleCreate} className="p-8 space-y-6 bg-white">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Target Audience</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{['Shortlisted', 'Selected Candidates'].map(aud => (
|
|
<button
|
|
key={aud}
|
|
type="button"
|
|
onClick={() => setNewAnnouncement({ ...newAnnouncement, audience: aud })}
|
|
className={`px-4 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest border transition-all ${
|
|
newAnnouncement.audience === aud
|
|
? 'bg-blue-50 border-[#185FA5] text-[#185FA5]'
|
|
: 'bg-slate-50 border-slate-200 text-slate-500 hover:bg-white'
|
|
}`}
|
|
>
|
|
{aud}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Title</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={newAnnouncement.title}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, title: e.target.value })}
|
|
className="w-full px-5 py-3.5 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
placeholder="e.g. Schedule for Video Interview"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Message Content</label>
|
|
<textarea
|
|
required
|
|
rows="4"
|
|
value={newAnnouncement.content}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, content: e.target.value })}
|
|
className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none resize-none"
|
|
placeholder="Enter your message..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<DialogFooter className="pt-4">
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#185FA5] hover:bg-[#144f8a] text-white py-4 rounded-2xl text-xs font-black uppercase tracking-widest flex items-center justify-center space-x-2 transition-all shadow-lg shadow-blue-200/50"
|
|
>
|
|
<Send className="w-4 h-4" />
|
|
<span>Post Announcement</span>
|
|
</button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{filteredAnnouncements.length === 0 ? (
|
|
<div className="text-center py-24 bg-white rounded-[40px] border border-slate-200 shadow-sm text-slate-500 border-dashed">
|
|
<div className="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<Megaphone className="w-10 h-10 text-slate-200" />
|
|
</div>
|
|
<h3 className="font-black text-slate-900 text-lg uppercase tracking-tight">No announcements</h3>
|
|
<p className="font-bold text-xs text-slate-400 mt-1 uppercase tracking-widest">You haven't posted any announcements yet</p>
|
|
</div>
|
|
) : (
|
|
filteredAnnouncements.map((ann) => (
|
|
<div key={ann.id} className="group bg-white rounded-[32px] border border-slate-100 p-6 shadow-sm hover:shadow-md transition-all duration-300 relative overflow-hidden flex flex-col md:flex-row md:items-start gap-6">
|
|
<div className="flex-1 space-y-3">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<span className={`px-3 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-widest border ${
|
|
ann.audience === 'Selected Candidates'
|
|
? 'bg-emerald-50 border-emerald-100 text-emerald-700'
|
|
: 'bg-blue-50 border-blue-100 text-[#185FA5]'
|
|
}`}>
|
|
To: {ann.audience}
|
|
</span>
|
|
<div className="flex items-center text-slate-400 text-[10px] font-black uppercase tracking-widest">
|
|
<Calendar className="w-3.5 h-3.5 mr-1.5" />
|
|
{ann.created_at}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h4 className="text-lg font-black text-slate-900 tracking-tight">{ann.title}</h4>
|
|
<p className="text-sm font-medium text-slate-600 leading-relaxed">{ann.content}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3 md:border-l md:border-slate-50 md:pl-6 shrink-0">
|
|
<button className="p-3 rounded-2xl bg-slate-50 text-slate-400 hover:text-[#185FA5] transition-all">
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|