727 lines
53 KiB
JavaScript
727 lines
53 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Head, useForm } from '@inertiajs/react';
|
|
import EmployerLayout from '../../Layouts/EmployerLayout';
|
|
import { useTranslation } from '../../lib/LanguageContext';
|
|
import {
|
|
Megaphone,
|
|
Send,
|
|
CheckCircle2,
|
|
Users,
|
|
Search,
|
|
Calendar,
|
|
Target,
|
|
Filter,
|
|
ChevronRight,
|
|
MessageSquare,
|
|
Info,
|
|
Heart,
|
|
MapPin,
|
|
Clock,
|
|
Sparkles,
|
|
BellRing,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Gift,
|
|
Plus,
|
|
User
|
|
} from 'lucide-react';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
DialogFooter
|
|
} from '@/components/ui/dialog';
|
|
|
|
const hoursList = [
|
|
'12:00', '12:30', '01:00', '01:30', '02:00', '02:30',
|
|
'03:00', '03:30', '04:00', '04:30', '05:00', '05:30',
|
|
'06:00', '06:30', '07:00', '07:30', '08:00', '08:30',
|
|
'09:00', '09:30', '10:00', '10:30', '11:00', '11:30'
|
|
];
|
|
|
|
export default function Announcements({ initialAnnouncements }) {
|
|
const { t } = useTranslation();
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [toastMessage, setToastMessage] = useState(null);
|
|
const [toastSub, setToastSub] = useState(null);
|
|
const [announcements, setAnnouncements] = useState(initialAnnouncements || []);
|
|
|
|
// Time picker states
|
|
const [startTimeHour, setStartTimeHour] = useState('09:00');
|
|
const [startTimeAmpm, setStartTimeAmpm] = useState('AM');
|
|
const [endTimeHour, setEndTimeHour] = useState('04:00');
|
|
const [endTimeAmpm, setEndTimeAmpm] = useState('PM');
|
|
const [isStartPickerOpen, setIsStartPickerOpen] = useState(false);
|
|
const [isEndPickerOpen, setIsEndPickerOpen] = useState(false);
|
|
const [expandedCards, setExpandedCards] = useState({});
|
|
const [statusFilter, setStatusFilter] = useState('All');
|
|
|
|
useEffect(() => {
|
|
setAnnouncements(initialAnnouncements || []);
|
|
}, [initialAnnouncements]);
|
|
|
|
const { data: newAnnouncement, setData: setNewAnnouncement, post, processing, reset } = useForm({
|
|
title: '',
|
|
content: '',
|
|
audience: 'Charity',
|
|
type: 'Charity',
|
|
provided_items: '',
|
|
event_date: '',
|
|
event_time: '09:00 AM - 04:00 PM',
|
|
location_details: '',
|
|
location_pin: '',
|
|
contact_person_name: '',
|
|
contact_number: '',
|
|
country_code: '+971'
|
|
});
|
|
|
|
const updateEventTime = (sh, sa, eh, ea) => {
|
|
setNewAnnouncement({
|
|
...newAnnouncement,
|
|
event_time: `${sh} ${sa} - ${eh} ${ea}`
|
|
});
|
|
};
|
|
|
|
const toggleExpand = (id) => {
|
|
setExpandedCards(prev => ({
|
|
...prev,
|
|
[id]: !prev[id]
|
|
}));
|
|
};
|
|
|
|
const showToast = (message, subMessage = null) => {
|
|
setToastMessage(message);
|
|
setToastSub(subMessage);
|
|
setTimeout(() => {
|
|
setToastMessage(null);
|
|
setToastSub(null);
|
|
}, 5000);
|
|
};
|
|
|
|
const handleCreate = (e) => {
|
|
e.preventDefault();
|
|
post('/employer/events/create', {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
reset();
|
|
setStartTimeHour('09:00');
|
|
setStartTimeAmpm('AM');
|
|
setEndTimeHour('04:00');
|
|
setEndTimeAmpm('PM');
|
|
setIsDialogOpen(false);
|
|
showToast(
|
|
t('community_charity_event_posted', 'COMMUNITY CHARITY EVENT POSTED!'),
|
|
t('community_charity_event_posted_desc', 'Instant Push Notification sent to all workers! Morning-of reminder notification scheduled successfully.')
|
|
);
|
|
}
|
|
});
|
|
};
|
|
|
|
const filteredAnnouncements = announcements.filter(ann => {
|
|
const matchesSearch =
|
|
ann.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
ann.content.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
const matchesStatus = statusFilter === 'All' || ann.status.toLowerCase() === statusFilter.toLowerCase();
|
|
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
return (
|
|
<EmployerLayout title="Charity Events">
|
|
<Head title={t('charity_events', 'Charity Events')} />
|
|
|
|
{toastMessage && (
|
|
<div className="fixed bottom-8 right-8 bg-slate-900 text-white px-6 py-5 rounded-[24px] shadow-2xl border border-slate-800 flex items-start space-x-3.5 z-[100] max-w-md animate-in slide-in-from-bottom-5 duration-350">
|
|
<div className="bg-emerald-500 p-2 rounded-xl shrink-0 mt-0.5 shadow-md shadow-emerald-500/20">
|
|
<CheckCircle2 className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="font-black text-xs uppercase tracking-widest text-emerald-400">{toastMessage}</div>
|
|
{toastSub && <p className="text-[11px] text-slate-300 leading-relaxed font-semibold">{toastSub}</p>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6 select-none max-w-5xl mx-auto">
|
|
|
|
{/* Community Drive & Charity Banner */}
|
|
<div className="bg-gradient-to-br from-[#185FA5]/10 via-[#185FA5]/5 to-transparent border border-[#185FA5]/20 rounded-[32px] p-6 sm:p-8 flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div className="space-y-2 max-w-2xl">
|
|
<div className="inline-flex items-center space-x-2 px-3 py-1 bg-[#185FA5]/5 border border-[#185FA5]/10 rounded-full text-[10px] font-black uppercase tracking-wider text-[#185FA5]">
|
|
<Heart className="w-3.5 h-3.5 fill-[#185FA5] text-[#185FA5] animate-pulse" />
|
|
<span>{t('dubai_community_support_drives', 'Community Support Drives')}</span>
|
|
</div>
|
|
<h2 className="text-xl font-black text-slate-900 tracking-tight">{t('free_medical_checks_title', 'Free Medical Checks, Food Drives & Support Services')}</h2>
|
|
<p className="text-xs text-slate-500 font-bold leading-relaxed">
|
|
{t('free_medical_checks_desc', 'Organizing a support program? Share community campaigns directly. The platform will automatically push an instant pop-up notification to workers, followed by a morning-of event reminder to keep attendance strong.')}
|
|
</p>
|
|
</div>
|
|
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<button className="bg-[#185FA5] hover:bg-[#14508c] text-white px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider flex items-center justify-center space-x-1.5 transition-all shadow-md shadow-[#185FA5]/20 hover:-translate-y-0.5 active:translate-y-0 shrink-0 border-none cursor-pointer self-start md:self-center">
|
|
<Plus className="w-4 h-4" />
|
|
<span>{t('post_charity_event', 'Post Charity Event')}</span>
|
|
</button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[650px] rounded-3xl p-0 overflow-hidden border-none shadow-2xl">
|
|
<div className="bg-gradient-to-r from-[#185FA5] to-[#2573c2] 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">{t('post_charity_event', 'Post Charity Event')}</DialogTitle>
|
|
<DialogDescription className="text-white/80 font-semibold mt-2 relative z-10">
|
|
{t('broadcast_support_program_desc', 'Broadcast a support program, medical camp, or distribution drive to the worker community.')}
|
|
</DialogDescription>
|
|
</div>
|
|
|
|
<form onSubmit={handleCreate} className="p-8 space-y-5 bg-white max-h-[80vh] overflow-y-auto">
|
|
|
|
<div className="space-y-4 p-4 bg-[#185FA5]/5 rounded-2xl border border-[#185FA5]/10 animate-in fade-in duration-200">
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div className="space-y-1">
|
|
<label className="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('event_date', 'Event Date')}</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
value={newAnnouncement.event_date}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, event_date: e.target.value })}
|
|
className="w-full h-11 px-3.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#185FA5]/20 outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative space-y-1">
|
|
{isStartPickerOpen && (
|
|
<div className="fixed inset-0 z-[45] bg-transparent" onClick={() => setIsStartPickerOpen(false)} />
|
|
)}
|
|
<div className="relative z-50">
|
|
<label className="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('start_time', 'Start Time')}</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsStartPickerOpen(!isStartPickerOpen);
|
|
setIsEndPickerOpen(false);
|
|
}}
|
|
className={`w-full h-11 flex items-center justify-between px-3.5 bg-white border ${
|
|
isStartPickerOpen ? 'border-[#185FA5] ring-2 ring-[#185FA5]/20' : 'border-slate-200'
|
|
} rounded-xl hover:border-[#185FA5] transition-all cursor-pointer text-left`}
|
|
>
|
|
<div className="flex items-center space-x-2 min-w-0">
|
|
<Clock className="w-4 h-4 text-slate-400 shrink-0" />
|
|
<div className="flex flex-col justify-center min-w-0 leading-tight">
|
|
<div className="text-[8px] text-slate-500 font-bold uppercase tracking-wider">Start at</div>
|
|
<div className="text-slate-800 text-xs font-bold truncate">{startTimeHour} {startTimeAmpm}</div>
|
|
</div>
|
|
</div>
|
|
<ChevronDown className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
|
</button>
|
|
|
|
{isStartPickerOpen && (
|
|
<div className="absolute top-full mt-1.5 left-0 bg-white border border-slate-200 shadow-xl rounded-xl p-2 z-50 flex space-x-2.5 w-48 animate-in fade-in slide-in-from-top-2">
|
|
<div className="flex-1 max-h-40 overflow-y-auto pr-1 space-y-1 scrollbar-thin">
|
|
{hoursList.map(h => (
|
|
<button
|
|
key={h}
|
|
type="button"
|
|
onClick={() => {
|
|
setStartTimeHour(h);
|
|
setIsStartPickerOpen(false);
|
|
updateEventTime(h, startTimeAmpm, endTimeHour, endTimeAmpm);
|
|
}}
|
|
className={`w-full text-left px-2 py-1 rounded text-xs font-semibold transition-colors ${
|
|
startTimeHour === h
|
|
? 'bg-[#185FA5]/10 text-[#185FA5]'
|
|
: 'text-slate-600 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{h}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-col space-y-1 justify-center border-l border-slate-100 pl-2">
|
|
{['AM', 'PM'].map(ampm => (
|
|
<button
|
|
key={ampm}
|
|
type="button"
|
|
onClick={() => {
|
|
setStartTimeAmpm(ampm);
|
|
updateEventTime(startTimeHour, ampm, endTimeHour, endTimeAmpm);
|
|
}}
|
|
className={`px-2 py-1 rounded text-[10px] font-black transition-all border border-solid ${
|
|
startTimeAmpm === ampm
|
|
? 'bg-[#185FA5] border-[#185FA5] text-white shadow-sm'
|
|
: 'border-slate-200 text-slate-400 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{ampm}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative space-y-1">
|
|
{isEndPickerOpen && (
|
|
<div className="fixed inset-0 z-[45] bg-transparent" onClick={() => setIsEndPickerOpen(false)} />
|
|
)}
|
|
<div className="relative z-50">
|
|
<label className="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('end_time', 'End Time')}</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsEndPickerOpen(!isEndPickerOpen);
|
|
setIsStartPickerOpen(false);
|
|
}}
|
|
className={`w-full h-11 flex items-center justify-between px-3.5 bg-white border ${
|
|
isEndPickerOpen ? 'border-[#185FA5] ring-2 ring-[#185FA5]/20' : 'border-slate-200'
|
|
} rounded-xl hover:border-[#185FA5] transition-all cursor-pointer text-left`}
|
|
>
|
|
<div className="flex items-center space-x-2 min-w-0">
|
|
<Clock className="w-4 h-4 text-slate-400 shrink-0" />
|
|
<div className="flex flex-col justify-center min-w-0 leading-tight">
|
|
<div className="text-[8px] text-slate-500 font-bold uppercase tracking-wider">End with</div>
|
|
<div className="text-slate-800 text-xs font-bold truncate">{endTimeHour} {endTimeAmpm}</div>
|
|
</div>
|
|
</div>
|
|
<ChevronDown className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
|
</button>
|
|
|
|
{isEndPickerOpen && (
|
|
<div className="absolute top-full mt-1.5 right-0 bg-white border border-slate-200 shadow-xl rounded-xl p-2 z-50 flex space-x-2.5 w-48 animate-in fade-in slide-in-from-top-2">
|
|
<div className="flex-1 max-h-40 overflow-y-auto pr-1 space-y-1 scrollbar-thin">
|
|
{hoursList.map(h => (
|
|
<button
|
|
key={h}
|
|
type="button"
|
|
onClick={() => {
|
|
setEndTimeHour(h);
|
|
setIsEndPickerOpen(false);
|
|
updateEventTime(startTimeHour, startTimeAmpm, h, endTimeAmpm);
|
|
}}
|
|
className={`w-full text-left px-2 py-1 rounded text-xs font-semibold transition-colors ${
|
|
endTimeHour === h
|
|
? 'bg-[#185FA5]/10 text-[#185FA5]'
|
|
: 'text-slate-600 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{h}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-col space-y-1 justify-center border-l border-slate-100 pl-2">
|
|
{['AM', 'PM'].map(ampm => (
|
|
<button
|
|
key={ampm}
|
|
type="button"
|
|
onClick={() => {
|
|
setEndTimeAmpm(ampm);
|
|
updateEventTime(startTimeHour, startTimeAmpm, endTimeHour, ampm);
|
|
}}
|
|
className={`px-2 py-1 rounded text-[10px] font-black transition-all border border-solid ${
|
|
endTimeAmpm === ampm
|
|
? 'bg-[#185FA5] border-[#185FA5] text-white shadow-sm'
|
|
: 'border-slate-200 text-slate-400 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{ampm}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('what_is_provided', 'What is Being Provided')}</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder={t('provided_items_placeholder', 'e.g. Free Medical Check, Food Boxes, Supplies')}
|
|
value={newAnnouncement.provided_items}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, provided_items: e.target.value })}
|
|
className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#185FA5]/20 outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('location_details_pin', 'Location Details & Pin URL')}</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder={t('location_details_placeholder', 'e.g. Al Quoz Community Center')}
|
|
value={newAnnouncement.location_details}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, location_details: e.target.value })}
|
|
className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#185FA5]/20 outline-none mb-2"
|
|
/>
|
|
<input
|
|
type="url"
|
|
required
|
|
placeholder={t('maps_pin_link_placeholder', 'Google Maps Pin Link (e.g. https://maps.app.goo.gl/xyz)')}
|
|
value={newAnnouncement.location_pin}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, location_pin: e.target.value })}
|
|
className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#185FA5]/20 outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
|
|
<div className="space-y-1">
|
|
<label className="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('contact_person_name', 'Contact Person Name')}</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder={t('contact_person_placeholder', 'e.g. Jane Doe')}
|
|
value={newAnnouncement.contact_person_name}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, contact_person_name: e.target.value })}
|
|
className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#185FA5]/20 outline-none"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1 min-w-0">
|
|
<label className="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('contact_mobile_number', 'Contact Mobile Number')}</label>
|
|
<div className="flex space-x-1.5 w-full min-w-0">
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="+971"
|
|
value={newAnnouncement.country_code}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, country_code: e.target.value })}
|
|
className="w-16 px-2 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#185FA5]/20 outline-none text-center shrink-0"
|
|
/>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="551234567"
|
|
value={newAnnouncement.contact_number}
|
|
onChange={(e) => setNewAnnouncement({ ...newAnnouncement, contact_number: e.target.value })}
|
|
className="flex-1 min-w-0 px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#185FA5]/20 outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('title_label', '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-[#185FA5]/20 transition-all outline-none"
|
|
placeholder={t('title_placeholder', 'e.g. Free Dental checkup by Emirates Charity')}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">{t('event_desc_instructions', 'Event Description & Instructions')}</label>
|
|
<textarea
|
|
required
|
|
rows="3"
|
|
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-[#185FA5]/20 transition-all outline-none resize-none"
|
|
placeholder={t('event_desc_placeholder', 'Enter details of the charity event here...')}
|
|
></textarea>
|
|
</div>
|
|
|
|
<DialogFooter className="pt-2">
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full bg-[#185FA5] hover:bg-[#14508c] 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-[#185FA5]/25 cursor-pointer border-none"
|
|
>
|
|
<Send className="w-4 h-4" />
|
|
<span>{t('publish_charity_event', 'Publish Charity Event')}</span>
|
|
</button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<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={t('search_charity_events_placeholder', 'Search charity events & drives...')}
|
|
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-[#185FA5]/20 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Status Filters */}
|
|
<div className="flex items-center space-x-1 bg-slate-50 p-1 rounded-xl border border-slate-200 shrink-0 self-start md:self-center">
|
|
{['All', 'Pending', 'Approved', 'Rejected'].map((status) => (
|
|
<button
|
|
key={status}
|
|
type="button"
|
|
onClick={() => setStatusFilter(status)}
|
|
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all border-none cursor-pointer ${
|
|
statusFilter === status
|
|
? 'bg-[#185FA5] text-white shadow-sm'
|
|
: 'text-slate-500 hover:text-slate-800 bg-transparent'
|
|
}`}
|
|
>
|
|
{status === 'All' ? t('status_filter_all', 'All') :
|
|
status === 'Pending' ? t('status_filter_pending', 'Pending') :
|
|
status === 'Approved' ? t('status_filter_approved', 'Approved') :
|
|
t('status_filter_rejected', 'Rejected')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
{filteredAnnouncements.length === 0 ? (
|
|
<div className="text-center py-24 bg-white rounded-[40px] border border-slate-200 shadow-sm text-slate-500 border-dashed md:col-span-2">
|
|
<div className="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<Heart className="w-10 h-10 text-slate-200 fill-slate-50" />
|
|
</div>
|
|
<h3 className="font-black text-slate-900 text-lg uppercase tracking-tight">{t('no_charity_events_title', 'No Charity Events')}</h3>
|
|
<p className="font-bold text-xs text-slate-400 mt-1 uppercase tracking-widest">{t('no_charity_events_desc', "You haven't posted any charity events yet")}</p>
|
|
</div>
|
|
) : (
|
|
filteredAnnouncements.map((ann) => {
|
|
const details = ann.charityDetails;
|
|
const isExpanded = !!expandedCards[ann.id];
|
|
const statusColorClass =
|
|
ann.status === 'approved' ? 'border-l-emerald-500' :
|
|
ann.status === 'rejected' ? 'border-l-rose-500' :
|
|
'border-l-amber-500';
|
|
|
|
return (
|
|
<div
|
|
key={ann.id}
|
|
onClick={() => setSelectedAnnouncement(ann)}
|
|
className={`bg-white rounded-2xl border border-slate-200 border-l-4 ${statusColorClass} shadow-sm hover:shadow-md transition-all flex flex-col justify-between overflow-hidden cursor-pointer`}
|
|
>
|
|
{/* Top Card Area */}
|
|
<div className="p-4 space-y-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="space-y-1 flex-1 min-w-0">
|
|
<div className="flex items-center space-x-2 flex-wrap gap-y-1">
|
|
<h3 className="font-bold text-sm text-slate-800 tracking-tight flex items-center gap-1 min-w-0">
|
|
<Sparkles className="w-3.5 h-3.5 text-[#185FA5] fill-[#185FA5]/10 shrink-0" />
|
|
<span className="truncate block font-extrabold" title={ann.title}>{ann.title}</span>
|
|
</h3>
|
|
<span className={`px-2 py-0.5 rounded text-[8px] font-extrabold uppercase tracking-wider shrink-0 ${
|
|
ann.status === 'approved' ? 'bg-emerald-50 text-emerald-700 border border-solid border-emerald-100' :
|
|
ann.status === 'rejected' ? 'bg-rose-50 text-rose-700 border border-solid border-rose-100' :
|
|
'bg-amber-50 text-amber-700 border border-solid border-amber-100'
|
|
}`}>
|
|
{ann.status === 'approved' ? t('status_approved', 'APPROVED') : (ann.status === 'rejected' ? t('status_rejected', 'REJECTED') : t('status_pending', 'PENDING'))}
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Collapsible Content */}
|
|
<div className="space-y-2 text-xs">
|
|
<p className={`text-slate-600 leading-relaxed font-semibold ${isExpanded ? '' : 'line-clamp-2'}`}>
|
|
{ann.content}
|
|
</p>
|
|
|
|
{ann.content.length > 90 && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => { e.stopPropagation(); toggleExpand(ann.id); }}
|
|
className="text-[#185FA5] hover:underline font-extrabold flex items-center space-x-0.5 border-none bg-transparent cursor-pointer p-0 text-[10px]"
|
|
>
|
|
<span>{isExpanded ? t('show_less', 'Show Less') : t('read_full_description', 'Read Full Description')}</span>
|
|
{isExpanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
|
|
</button>
|
|
)}
|
|
{ann.status === 'rejected' && ann.remarks && (
|
|
<div className="bg-rose-50 border border-rose-100 rounded-xl p-2.5 text-rose-800 text-[11px] font-semibold mt-1.5 leading-relaxed" onClick={(e) => e.stopPropagation()}>
|
|
<strong>{t('rejection_remarks_label', 'Remarks')}:</strong> {ann.remarks}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Details metadata row (compact icons) */}
|
|
{details && (
|
|
<div className="pt-2.5 border-t border-slate-100 grid grid-cols-3 gap-2 text-[10px] text-slate-500 font-black uppercase tracking-wider">
|
|
<div className="flex items-center space-x-1.5 min-w-0">
|
|
<Gift className="w-3.5 h-3.5 text-[#185FA5] fill-[#185FA5]/10 shrink-0" />
|
|
<span className="truncate text-slate-700" title={details.provided_items}>
|
|
{details.provided_items}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1.5 min-w-0">
|
|
<Calendar className="w-3.5 h-3.5 text-amber-500 shrink-0" />
|
|
<span className="truncate text-slate-700" title={`${details.event_date} ${details.event_time}`}>
|
|
{details.event_date}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1.5 min-w-0">
|
|
<MapPin className="w-3.5 h-3.5 text-[#185FA5] shrink-0" />
|
|
<span className="truncate text-slate-700" title={details.location_details}>
|
|
{details.location_details}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Contact details row */}
|
|
{details && details.contact_person_name && (
|
|
<div className="pt-2 border-t border-slate-100 flex items-center space-x-1.5 text-[10px] text-slate-500 font-black uppercase tracking-wider">
|
|
<User className="w-3.5 h-3.5 text-indigo-500 shrink-0" />
|
|
<span className="truncate text-slate-700 normal-case" title={`${details.contact_person_name} (${details.country_code || '+971'} ${details.contact_number})`}>
|
|
<strong>{details.contact_person_name}</strong>: {details.country_code || '+971'} {details.contact_number}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bottom Card Footer */}
|
|
<div className="px-4 py-2 bg-slate-50 rounded-b-xl border-t border-slate-100 flex items-center justify-between text-[9px] text-slate-400 font-extrabold uppercase tracking-widest">
|
|
<span>{t('posted_label', 'Posted')}: {ann.created_at}</span>
|
|
{details?.location_pin && (
|
|
<a
|
|
href={details.location_pin}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="text-[#185FA5] hover:underline flex items-center space-x-0.5 normal-case animate-none"
|
|
>
|
|
<span>{t('view_on_map', 'View on Map')}</span>
|
|
<MapPin className="w-2.5 h-2.5" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* Event Detail Popup Modal */}
|
|
<Dialog open={!!selectedAnnouncement} onOpenChange={(open) => !open && setSelectedAnnouncement(null)}>
|
|
<DialogContent className="sm:max-w-[650px] rounded-3xl p-0 overflow-hidden border-none shadow-2xl">
|
|
{selectedAnnouncement && (
|
|
<>
|
|
<div className="bg-gradient-to-r from-[#185FA5] to-[#2573c2] 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" />
|
|
<div className="flex items-center space-x-2 mb-2 relative z-10">
|
|
<span className="px-2 py-0.5 rounded text-[8px] font-extrabold uppercase tracking-wider shrink-0 bg-white/20 text-white">
|
|
{selectedAnnouncement.status}
|
|
</span>
|
|
<span className="bg-white/20 text-white px-2 py-0.5 rounded text-[8px] font-extrabold uppercase tracking-wider flex items-center gap-0.5">
|
|
<Heart className="w-2.5 h-2.5 fill-white text-white" />
|
|
<span>Charity</span>
|
|
</span>
|
|
</div>
|
|
<DialogTitle className="text-2xl font-black relative z-10 leading-tight">
|
|
{selectedAnnouncement.title}
|
|
</DialogTitle>
|
|
<p className="text-white/80 font-bold text-xs mt-2 relative z-10">
|
|
{t('posted_label', 'Posted')}: {selectedAnnouncement.created_at}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-8 space-y-6 bg-white max-h-[70vh] overflow-y-auto font-sans">
|
|
<div className="space-y-2">
|
|
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('description', 'Description')}</h4>
|
|
<p className="text-slate-600 text-xs font-bold leading-relaxed whitespace-pre-wrap">
|
|
{selectedAnnouncement.content}
|
|
</p>
|
|
</div>
|
|
|
|
{selectedAnnouncement.charityDetails && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-slate-100">
|
|
<div className="space-y-1 bg-rose-50/40 border border-rose-100/50 p-3 rounded-2xl">
|
|
<div className="text-[9px] text-rose-500 font-extrabold uppercase tracking-wider flex items-center gap-1">
|
|
<Gift className="w-3.5 h-3.5 fill-rose-500 text-rose-500" />
|
|
<span>{t('items_provided', 'Items Provided')}</span>
|
|
</div>
|
|
<div className="text-slate-700 font-extrabold text-xs">
|
|
{selectedAnnouncement.charityDetails.provided_items}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1 bg-amber-50/40 border border-amber-100/50 p-3 rounded-2xl">
|
|
<div className="text-[9px] text-amber-600 font-extrabold uppercase tracking-wider flex items-center gap-1">
|
|
<Calendar className="w-3.5 h-3.5 text-amber-600" />
|
|
<span>{t('event_date', 'Event Date')}</span>
|
|
</div>
|
|
<div className="text-slate-700 font-extrabold text-xs">
|
|
{selectedAnnouncement.charityDetails.event_date}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1 bg-indigo-50/40 border border-indigo-100/50 p-3 rounded-2xl">
|
|
<div className="text-[9px] text-indigo-600 font-extrabold uppercase tracking-wider flex items-center gap-1">
|
|
<Clock className="w-3.5 h-3.5 text-indigo-600" />
|
|
<span>{t('event_time', 'Event Time')}</span>
|
|
</div>
|
|
<div className="text-slate-700 font-extrabold text-xs">
|
|
{selectedAnnouncement.charityDetails.event_time}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1 bg-blue-50/40 border border-blue-100/50 p-3 rounded-2xl">
|
|
<div className="text-[9px] text-blue-600 font-extrabold uppercase tracking-wider flex items-center gap-1">
|
|
<MapPin className="w-3.5 h-3.5 text-blue-600" />
|
|
<span>{t('location', 'Location')}</span>
|
|
</div>
|
|
<div className="text-slate-700 font-extrabold text-xs">
|
|
{selectedAnnouncement.charityDetails.location_details}
|
|
</div>
|
|
</div>
|
|
|
|
{selectedAnnouncement.charityDetails.contact_person_name && (
|
|
<div className="space-y-1 bg-emerald-50/40 border border-emerald-100/50 p-3 rounded-2xl md:col-span-2">
|
|
<div className="text-[9px] text-emerald-600 font-extrabold uppercase tracking-wider flex items-center gap-1">
|
|
<User className="w-3.5 h-3.5 text-emerald-600" />
|
|
<span>{t('contact_person_details', 'Contact Person Details')}</span>
|
|
</div>
|
|
<div className="text-slate-700 font-extrabold text-xs flex flex-col sm:flex-row sm:justify-between gap-1 mt-1">
|
|
<span>Name: <strong className="text-slate-900">{selectedAnnouncement.charityDetails.contact_person_name}</strong></span>
|
|
<span>Mobile: <strong className="text-slate-900">{selectedAnnouncement.charityDetails.country_code || '+971'} {selectedAnnouncement.charityDetails.contact_number}</strong></span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex space-x-3 pt-4 border-t border-slate-100">
|
|
{selectedAnnouncement.charityDetails?.location_pin && (
|
|
<a
|
|
href={selectedAnnouncement.charityDetails.location_pin}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 py-3 rounded-2xl text-xs font-black uppercase tracking-widest text-center no-underline flex items-center justify-center space-x-1.5 transition-all"
|
|
>
|
|
<MapPin className="w-4 h-4" />
|
|
<span>{t('view_on_map', 'View on Map')}</span>
|
|
</a>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedAnnouncement(null)}
|
|
className="flex-1 bg-[#185FA5] hover:bg-[#14508c] text-white py-3 rounded-2xl text-xs font-black uppercase tracking-widest cursor-pointer border-none shadow-md shadow-[#185FA5]/25"
|
|
>
|
|
{t('close', 'Close')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|