WEB-26: Update icons and add end announcement route

src/components/announcement/announcementBanner.tsx

@@ -1,5 +1,5 @@
-import CrossThick from "@/icons/crossThickIcon";
 import { Announcement } from "@/models/announcement";
+import { X } from "lucide-react";
 
 interface Props {
   announcement: Announcement;
@@ -16,7 +16,7 @@ export default function AnnouncementBanner({ announcement }: Props) {
         <h6 className="text-neutral-800 line-clamp-1 break-words">{announcement.title}</h6>
         <p className="label text-neutral-600 line-clamp-3 md:line-clamp-2  break-words">{announcement.body}</p>
       </div>
-      <CrossThick className="size-[20px] fill-neutral-400" />
+      <X className="size-[20px] stroke-neutral-400" />
     </div>
   );
 }

src/components/announcement/announcementForm.tsx

@@ -4,7 +4,7 @@ import ApiClient from "@/services/apiClient";
 import { useUserStore } from "@/stores/useUserStore";
 import { formatDate } from "@/utils/utils";
 import { addDays } from "date-fns";
-import { Speaker, X } from "lucide-react";
+import { Megaphone, X } from "lucide-react";
 import { useMemo, useState } from "react";
 import AlertPopup from "../system/alertPopup";
 import ButtonPrimary1 from "../system/button/buttonPrimary1";
@@ -131,7 +131,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
           {/* Header */}
           <div className="flex flex-row justify-between items-start gap-8">
             <div className="flex flex-row items-center gap-4">
-              <Speaker className="size-[40px] stroke-neutral-800" />
+              <Megaphone className="size-[40px] stroke-neutral-800" />
               <div className="flex flex-col gap-1">
                 <h4 className="text-neutral-800">Create Announcement</h4>
                 <p className="b1 text-neutral-600">Schedule an announcement to our apps with this form.</p>
@@ -170,8 +170,24 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
                     to: new Date(announcement.endDate),
                   }}
                   setDateRange={(dateRange) => {
-                    handleChange("startDate", dateRange?.from ?? "");
-                    handleChange("endDate", dateRange?.to ?? "");
+                    const startDate = dateRange?.from;
+                    const endDate = dateRange?.to;
+
+                    if (!startDate) {
+                      handleChange("startDate", "");
+                      return;
+                    }
+                    if (!endDate) {
+                      handleChange("endDate", "");
+                      return;
+                    }
+
+                    // Beginning of start date to end of end date
+                    startDate.setHours(0, 0, 0, 0);
+                    endDate.setHours(23, 59, 59, 999);
+
+                    handleChange("startDate", startDate);
+                    handleChange("endDate", endDate);
                   }}
                 />
               </div>

src/components/announcement/announcementModal.tsx

@@ -33,10 +33,18 @@ export default function AnnouncementModal({ onClose, announcement }: Props) {
     if (!user) return;
 
     try {
-      console.log("Ending", announcement);
+      setIsLoading(true);
+      ApiClient.setAuthToken(apiClient, user.idToken);
+
+      await ApiClient.put(apiClient, `/announcements/${announcement.id}`, { endDate: new Date() });
+
+      // Successful
+      setIsLoading(false);
+      onClose(true);
     } catch (err) {
       console.error(err);
       errorToast();
+      setIsLoading(false);
     }
   };
 

src/components/landing/landingActiveSection.tsx

@@ -1,7 +1,7 @@
 import { Announcement } from "@/models/announcement";
 import { Constants } from "@/utils/constants";
 import { filterActiveAnnouncements, sortAnnouncementsByStartDate } from "@/utils/utils";
-import { CalendarArrowUp } from "lucide-react";
+import { CalendarCheck2 } from "lucide-react";
 import { useState } from "react";
 import AnnouncementCell from "../announcement/announcementCell";
 import AnnouncementModal from "../announcement/announcementModal";
@@ -26,7 +26,7 @@ export default function LandingActiveSection({ announcements, onEditClick, onRef
   return (
     <div className="flex flex-col p-6 items-start gap-6 rounded-lg bg-neutral-white">
       <div className="flex items-center gap-4 self-stretch">
-        <CalendarArrowUp className="size-[32px] md:size-[40px] stroke-neutral-800" />
+        <CalendarCheck2 className="size-[32px] md:size-[40px] stroke-neutral-800" />
         <div className="flex flex-col">
           <h4 className="self-stretch text-neutral-800">Active Announcements</h4>
           <p className="b1 self-stretch text-neutral-600">Current and upcoming announcements.</p>

src/components/landing/landingCreateAnnouncement.tsx

@@ -1,4 +1,4 @@
-import SpeakerIcon from "@/icons/speakerIcon";
+import { Megaphone } from "lucide-react";
 import ButtonPrimary1 from "../system/button/buttonPrimary1";
 
 interface Props {
@@ -9,7 +9,7 @@ export default function LandingCreateAnnouncement({ action }: Props) {
   return (
     <div className="flex flex-col p-6 items-start gap-6 rounded-lg bg-neutral-white">
       <div className="flex items-center gap-4 self-stretch">
-        <SpeakerIcon className="min-w-[32px] w-[32px] h-[32px] md:w-[40px] md:h-[40px] fill-neutral-800" />
+        <Megaphone className="size-[32px] md:size-[40px] stroke-neutral-800" />
         <div className="flex flex-col gap-1">
           <h4 className="text-neutral-800">Have something to say?</h4>
           <p className="b1 text-neutral-600">Schedule an announcement to our apps with this form.</p>

src/components/landing/landingPastSection.tsx

@@ -1,7 +1,7 @@
-import CalendarPlainIcon from "@/icons/calendarPlainIcon";
 import { Announcement } from "@/models/announcement";
 import { Constants } from "@/utils/constants";
 import { filterPastAnnouncements, sortAnnouncementsByStartDate } from "@/utils/utils";
+import { CalendarX2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import AnnouncementCell from "../announcement/announcementCell";
@@ -16,7 +16,7 @@ interface Props {
 export default function LandingPastSection({ announcements, onEditClick }: Props) {
   const router = useRouter();
 
-  const pastAnnouncements = sortAnnouncementsByStartDate(filterPastAnnouncements(announcements ?? []));
+  const pastAnnouncements = sortAnnouncementsByStartDate(filterPastAnnouncements(announcements ?? [])).reverse();
   const [selectedAnnouncement, setSelectedAnnouncement] = useState<Announcement | null>(null);
 
   const openModal = (announcement: Announcement) => {
@@ -33,7 +33,7 @@ export default function LandingPastSection({ announcements, onEditClick }: Props
   return (
     <div className="flex flex-col p-6 items-start gap-6 rounded-lg bg-neutral-white">
       <div className="flex items-center gap-4 self-stretch">
-        <CalendarPlainIcon className="w-[32px] md:w-[40px] h-[32px] md:h-[40px] stroke-neutral-800" />
+        <CalendarX2 className="size-[32px] md:size-[40px] stroke-neutral-800" />
         <div className="flex flex-col">
           <h4 className="self-stretch text-neutral-800">Past Announcements</h4>
           <p className="b1 self-stretch text-neutral-600">Previous inactive announcements.</p>

src/components/landing/landingUpcomingSection.tsx

@@ -1,9 +1,9 @@
-import { useState, useEffect, useMemo } from "react";
-import HourglassIcon from "@/icons/hourglassIcon";
-import AnnouncementBanner from "../announcement/announcementBanner";
 import { Announcement } from "@/models/announcement";
-import { calculateTimeRemaining, filterFutureAnnouncements, getEarliestAnnouncements } from "@/utils/utils";
 import { Constants } from "@/utils/constants";
+import { calculateTimeRemaining, filterFutureAnnouncements, getEarliestAnnouncements } from "@/utils/utils";
+import { Timer } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import AnnouncementBanner from "../announcement/announcementBanner";
 
 interface Props {
   announcements?: Announcement[];
@@ -38,7 +38,7 @@ export default function LandingUpcomingSection({ announcements }: Props) {
   return (
     <div className="flex flex-col p-6 items-start gap-6 rounded-lg bg-neutral-white">
       <div className="flex items-center gap-4 self-stretch">
-        <HourglassIcon className="w-[32px] h-[32px] md:w-[40px] md:h-[40px] stroke-neutral-800 fill-neutral-800" />
+        <Timer className="size-[32px] md:size-[40px] stroke-neutral-800" />
         <div className="flex flex-col gap-1">
           <h4 className="text-neutral-800">Up Next</h4>
           <p className="b1 text-neutral-600">Countdown to the next announcement.</p>

src/components/past/past.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import FilterIcon from "@/icons/filterIcon";
 import { Announcement } from "@/models/announcement";
 import { AppName } from "@/models/enums/appName";
 import { SortType } from "@/models/enums/sortType";
 import { createDummyAnnouncement } from "@/utils/dummy";
 import { dateInRange } from "@/utils/utils";
+import { ListFilter } from "lucide-react";
 import { ChangeEvent, useEffect, useState } from "react";
 import { DateRange } from "react-day-picker";
 import Footer from "../common/footer";
@@ -139,7 +139,7 @@ export default function Past() {
               className="flex flex-row gap-3 items-center px-4 py-3 rounded-md bg-neutral-white border border-other-stroke opacity-hover"
               onClick={() => setShowFilters(true)}
             >
-              <FilterIcon className="size-[16px] fill-neutral-400" />
+              <ListFilter className="size-[16px] stroke-neutral-400" />
               <p className="b1 text-neutral-500">
                 {filterDateRange && filterApps.length !== 0
                   ? "Filter - 2"

src/components/system/input/inputDatePicker.tsx

@@ -38,10 +38,10 @@ export default function InputDatePicker({ value, setDateRange }: Props) {
             {date?.from ? (
               date.to ? (
                 <>
-                  {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
+                  {format(date.from, "LLL d, hh:mm aa")} - {format(date.to, "LLL d, hh:mm aa")}
                 </>
               ) : (
-                format(date.from, "LLL dd, y")
+                format(date.from, "LLL d, hh:mm aa")
               )
             ) : (
               <span>Pick a date</span>

src/components/system/input/inputSearch.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Input } from "@/components/ui/input";
-import SearchIcon from "@/icons/searchIcon";
+import { Search } from "lucide-react";
 import { ChangeEvent } from "react";
 
 interface Props {
@@ -13,7 +13,7 @@ interface Props {
 export default function InputSearch({ text, placeholder, onChange }: Props) {
   return (
     <div className="relative flex items-center md:w-[320px] lg:w-[400px]">
-      <SearchIcon className="w-[16px] h-[16px] fill-neutral-300 absolute left-4" />
+      <Search className="size-[16px] stroke-neutral-300 absolute left-4" />
       <Input
         value={text}
         onChange={onChange}

src/components/ui/calendar.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
 import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;