Added announcement pages and api changes and types to fix announcements

src/app/announcements/page.tsx

@@ -1,6 +1,7 @@
 import { formatDateToMonthDayYear } from "@/lib/utils";
 import { Announcement } from "@/lib/types";
 import { fetchAnnouncements } from "@/lib/api";
+import Link from "next/link";
 
 
 export const metadata = {
@@ -27,10 +28,12 @@ export default async function AnnouncementPage() {
     return (
             <div className="max-w-6xl mx-auto py-10 px-4">                    
                 {sorted_announcements.map((announcement) => (
-                    <li key={announcement.id} className="mb-2 list-none">
-                        <div className="text-lg font-semibold">{announcement.title}</div>
-                        <div className="text-sm text-gray-500">{formatDateToMonthDayYear(new Date(announcement.datetime))}</div>
-                    </li>
+                    <Link href = {`/announcements/${announcement.documentId}`} key={announcement.documentId}>
+                        <li key={announcement.id} className="mb-2 list-none">
+                            <div className="text-lg font-semibold">{announcement.title}</div>
+                            <div className="text-sm text-gray-500">{formatDateToMonthDayYear(new Date(announcement.datetime))}</div>
+                        </li>
+                    </Link>
                 ))}
             </div>
         );