created org_announcements page and fixed filtering

Author: AlvinH17

frontend/src/pages/Admin/AnnouncementsPage/Announcements.tsx

@@ -249,15 +249,6 @@ const AdminAnnouncements = () => {
     });
   };
 
-  const generateSlug = (title: string): string => {
-    const baseSlug = title
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/(^-|-$)/g, '');
-    const timestamp = Date.now().toString(36);
-    return `${baseSlug}-${timestamp}`;
-  };
-
   useEffect(() => {
     fetchAnnouncement();
     fetchTags();
@@ -646,7 +637,6 @@ const AdminAnnouncements = () => {
                       setNewAnnouncement({
                         ...newAnnouncement,
                         title,
-                        slug: generateSlug(title),
                       });
                     }}
                     className='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#194B90]'

frontend/src/pages/AnnouncementPage/Announcement.tsx

@@ -57,7 +57,7 @@ export default function Announcement() {
         <h1 className='font-[Open_Sans] text-[40px] font-bold mb-4'>{announcement.title}</h1>
         <div className='flex items-center gap-3 mb-4'>
           <h3 className='font-[Open_Sans] text-[16px] font-normal leading-[150%] text-[#717171]'>
-            {getTimeAgo(announcement.createdAt)}
+            {getTimeAgo(announcement.publishedDate || announcement.createdAt)}
           </h3>
           {announcement.tags && announcement.tags.length > 0 && (
             <>

frontend/src/pages/AnnouncementsPage/Announcements.tsx

@@ -109,39 +109,47 @@ const AnnouncementsPage = () => {
     return `${Math.floor(diffInMinutes / 1440)} ${Math.floor(diffInMinutes / 1440) === 1 ? 'day' : 'days'} ago`;
   };
 
-  const filterAnnouncements = announcements.filter(a => {
-    const now = new Date();
+  const filterAnnouncements = announcements
+    .filter(a => {
+      const now = new Date();
 
-    // TIME FILTER
-    if (timeFilter) {
-      const createdAt = new Date(a.createdAt);
-      const diffInHours = (now.getTime() - createdAt.getTime()) / 1000 / 3600;
-      if (
-        (timeFilter === '24h' && diffInHours > 24) ||
-        (timeFilter === 'week' && diffInHours > 24 * 7) ||
-        (timeFilter === 'month' && diffInHours > 24 * 30) ||
-        (timeFilter === 'year' && diffInHours > 24 * 365)
-      ) {
-        return false;
+      // TIME FILTER
+      if (timeFilter) {
+        const publishedDate = new Date(a.publishedDate || a.createdAt);
+        const diffInHours = (now.getTime() - publishedDate.getTime()) / 1000 / 3600;
+        if (
+          (timeFilter === '24h' && diffInHours > 24) ||
+          (timeFilter === 'week' && diffInHours > 24 * 7) ||
+          (timeFilter === 'month' && diffInHours > 24 * 30) ||
+          (timeFilter === 'year' && diffInHours > 24 * 365)
+        ) {
+          return false;
+        }
       }
-    }
 
-    // TAG FILTER
-    if (selectedTags.length > 0) {
-      const selectedTagNames = selectedTags.map(t => t.name);
-      const announcementTagNames = a.tags.map(t => t.name);
-      if (!announcementTagNames.some(tag => selectedTagNames.includes(tag))) {
-        return false;
+      // TAG FILTER
+      if (selectedTags.length > 0) {
+        const selectedTagNames = selectedTags.map(t => t.name);
+        const announcementTagNames = a.tags.map(t => t.name);
+        if (!announcementTagNames.some(tag => selectedTagNames.includes(tag))) {
+          return false;
+        }
       }
-    }
 
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      return a.title.toLowerCase().includes(query) || a.content.toLowerCase().includes(query);
-    }
+      // SEARCH FILTER
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        return a.title.toLowerCase().includes(query) || a.content.toLowerCase().includes(query);
+      }
 
-    return true;
-  });
+      return true;
+    })
+    .sort((a, b) => {
+      // sort by publishedDate descending (most recent first)
+      const dateA = new Date(a.publishedDate || a.createdAt).getTime();
+      const dateB = new Date(b.publishedDate || b.createdAt).getTime();
+      return dateB - dateA;
+    });
 
   return (
     <div className='mt-8'>
@@ -301,7 +309,7 @@ const AnnouncementsPage = () => {
                     </h2>
                     <div className='flex items-center gap-3 mb-4'>
                       <h3 className='font-[Open_Sans] text-[14px] font-normal leading-[150%] text-[#717171]'>
-                        {getTimeAgo(a.createdAt)}
+                        {getTimeAgo(a.publishedDate || a.createdAt)}
                       </h3>
                       {a.tags.length > 0 && (
                         <>