import GeneralHeader from '@admin/components/general-header'; import AnnouncementAddModal from '@admin/components/modals/announcement-add-modal'; import { AnnouncementDetailsModal } from '@admin/components/modals/announcement-details-modal'; import { Button } from '@admin/components/ui/button'; import { DropdownMenu, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu'; import { Input } from '@admin/components/ui/input'; import { mockAnnouncements } from '@admin/data/static'; import AppLayout from '@admin/layouts/app-layout'; import { Head } from '@inertiajs/react'; import { DropdownMenuContent } from '@radix-ui/react-dropdown-menu'; import { Edit, Eye, MoreVertical, Plus, Trash2 } from 'lucide-react'; import { ReactNode, useMemo, useState } from 'react'; interface Announcement { id: string; title: string; excerpt: string; date: string; description?: string; coverImage?: string; likes?: number; comments?: number; } function Index() { const [search, setSearch] = useState(''); const [announcements, setAnnouncements] = useState(mockAnnouncements); const [isModalOpen, setIsModalOpen] = useState(false); const [modalMode, setModalMode] = useState<'add' | 'edit'>('add'); const [editing, setEditing] = useState(null); const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false); const [selectedAnnouncement, setSelectedAnnouncement] = useState(null); const filtered = useMemo(() => { if (!search) return announcements; return announcements.filter((a) => (a.title + a.excerpt).toLowerCase().includes(search.toLowerCase())); }, [search, announcements]); return (
setSearch(e.target.value)} className="max-w-lg" />
{filtered.map((item) => (
{ setSelectedAnnouncement(item); setIsDetailsModalOpen(true); }} > {/* Cover Image */}
{item.coverImage ? ( {item.title} ) : (
)} {/* Action Menu Overlay */}
{ e.stopPropagation(); setModalMode('edit'); setEditing(item); setIsModalOpen(true); }} className="cursor-pointer" > Edit { e.stopPropagation(); setAnnouncements((prev) => prev.filter((a) => a.id !== item.id)); }} className="cursor-pointer text-red-600 focus:text-red-600" > Delete
{/* Content - Flexible area */}

{item.title}

{item.excerpt && item.excerpt.length > 120 ? item.excerpt.slice(0, 120) + '...' : item.excerpt}

{/* Footer - Fixed at bottom */}
{new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', })}
))}
{ if (modalMode === 'add') { const next: Announcement = { id: Date.now().toString(), title: values.title, excerpt: (values.description || '').slice(0, 120), description: values.description || '', date: values.date || new Date().toISOString(), coverImage: values.coverImage as string | undefined, likes: 0, comments: 0, }; setAnnouncements((prev) => [next, ...prev]); } else if (modalMode === 'edit' && editing) { setAnnouncements((prev) => prev.map((a) => a.id === editing.id ? { ...a, title: values.title, description: values.description || '', excerpt: (values.description || '').slice(0, 120), date: values.date || a.date, coverImage: (values.coverImage as string) || a.coverImage, } : a, ), ); } setIsModalOpen(false); }} /> {/* Announcement Details Modal */} setIsDetailsModalOpen(false)} announcement={selectedAnnouncement} onEdit={() => { if (selectedAnnouncement) { setModalMode('edit'); setEditing(selectedAnnouncement); setIsModalOpen(true); } }} />
); } Index.layout = (page: ReactNode) => ( {page} ); export default Index;