Fix calendar

package.json

@@ -59,6 +59,7 @@
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
+    "luxon": "^3.5.0",
     "node-static": "^0.7.11",
     "parse-domain": "^8.0.1",
     "postcss": "^8.4.21",

src/app/(auth)/awards/page.js

@@ -35,12 +35,14 @@ export default async function Page({ searchParams }) {
                 <TableRow key={award.id} data-testid={award.name}>
                   <TableCell className="hidden w-1/6 !py-4 sm:table-cell">
                     {award.image?.image_url ? (
-                      <div className="relative mx-auto h-20">
+                      <div className="relative mx-auto flex h-20 items-center justify-center">
                         <Image
                           src={award.image.image_url}
                           alt={award.name}
-                          fill
-                          objectFit="contain"
+                          width={80}
+                          height={80}
+                          priority={true}
+                          style={{ width: 'auto' }}
                         />
                       </div>
                     ) : (
@@ -52,13 +54,14 @@ export default async function Page({ searchParams }) {
                   <TableCell className="!whitespace-normal break-normal !py-4">
                     <>
                       {award.image?.image_url && (
-                        <div className="relative mb-2 flex h-12 sm:hidden">
+                        <div className="relative mb-2 flex h-8 sm:hidden">
                           <Image
-                            className="!w-auto"
                             src={award.image.image_url}
                             alt={award.name}
-                            fill
-                            objectFit="contain"
+                            width={32}
+                            height={32}
+                            priority={true}
+                            style={{ width: 'auto' }}
                           />
                         </div>
                       )}

src/app/(auth)/calendar/_components/days.js

@@ -1,20 +1,13 @@
 'use client';
 
 import cx from 'classnames';
-import dayjs from 'dayjs';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
 import { useSearchParams } from 'next/navigation';
 import { Fragment, useEffect, useState } from 'react';
-import { rrulestr } from 'rrule';
+import { DateHelper } from '../../../../lib/date';
+import { RRuleHelper } from '../../../../lib/rrule';
 
 export function Days({ currentMonth, handleDayEventSelect, events }) {
   const searchParams = useSearchParams();
-
-  dayjs.extend(utcPlugin);
-  dayjs.extend(timezonePlugin);
-  dayjs.tz.setDefault(searchParams.get('timezone') ?? 'UTC');
-
   const [arrayOfWeeks, setArrayOfWeeks] = useState([]);
   const [selectedDay, setSelectedDay] = useState({});
 
@@ -36,36 +29,37 @@ export function Days({ currentMonth, handleDayEventSelect, events }) {
     };
   };
 
-  const formatEvent = (event) => {
+  const formatEvent = (event, timezone) => {
+    const rruleHelper = new RRuleHelper(event, timezone);
+
     return {
       id: event.id,
       name: event.name,
       description: event.description,
-      start: dayjs(event.start).tz(searchParams.get('timezone') ?? 'UTC'),
-      end: dayjs(event.start)
-        .tz(searchParams.get('timezone') ?? 'UTC')
-        .isSame(dayjs(event.end), 'day')
-        ? dayjs(event.end)
-        : null,
+      start: new DateHelper(event.starts, timezone),
+      end: new DateHelper(event.ends, timezone),
       color: event?.calendar?.color,
       allDay: event.all_day,
       repeats: event.repeats,
-      rrule: event.repeats ? rrulestr(event.rrule) : null,
+      rrule: rruleHelper.canGenerateRRule() ? rruleHelper.getRRule() : null,
       calendar: event.calendar?.name,
       location: event.location,
       details: event.content
     };
   };
 
   const getAllDays = () => {
+    const timezone = searchParams.get('timezone') ?? 'UTC';
+
     const parsedSingleEvents =
       events.data &&
-      events.data.filter((event) => !event.repeats).map((event) => formatEvent(event));
+      events.data.filter((event) => !event.repeats).map((event) => formatEvent(event, timezone));
+
     const parsedRepeatingEvents =
       events.data &&
       events.data
-        .filter((event) => event.repeats && event.rrule)
-        .map((event) => formatEvent(event));
+        .filter((event) => event.repeats && event.schedule)
+        .map((event) => formatEvent(event, timezone));
 
     let parsedEvents = parsedSingleEvents;
     let currentDate = currentMonth
@@ -79,7 +73,7 @@ export function Days({ currentMonth, handleDayEventSelect, events }) {
         ...event.rrule
           .between(currentDate.toDate(), currentDate.add(45, 'day').toDate())
           .map(function (occurrence) {
-            return { ...event, start: dayjs(occurrence) };
+            return { ...event, start: new DateHelper(occurrence, timezone) };
           })
       );
     });
@@ -91,7 +85,7 @@ export function Days({ currentMonth, handleDayEventSelect, events }) {
     while (currentDate.weekday(0).toObject().months !== nextMonth) {
       const formatted = formatDateObject(currentDate);
       formatted['events'] = parsedEvents.filter(function (event) {
-        return currentDate.isSame(dayjs(event.start), 'day');
+        return currentDate.isSame(event.start.getDate(), 'day');
       });
 
       weekDates.push(formatted);

src/app/(auth)/newsfeed/_components/item.js

@@ -1,19 +1,14 @@
 'use client';
 
 import cx from 'classnames';
-import dayjs from 'dayjs';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
 import { Avatar } from 'flowbite-react';
 import { useSearchParams } from 'next/navigation';
 import TimeAgo from 'react-timeago';
+import { DateHelper } from '../../../../lib/date';
 
 export function Item({ item, currentUser, onLikeClick, onUnlikeClick }) {
   const searchParams = useSearchParams();
-
-  dayjs.extend(utcPlugin);
-  dayjs.extend(timezonePlugin);
-  dayjs.tz.setDefault(searchParams.get('timezone') ?? 'UTC');
+  const timezone = searchParams.get('timezone') ?? 'UTC';
 
   const {
     id,
@@ -50,6 +45,8 @@ export function Item({ item, currentUser, onLikeClick, onUnlikeClick }) {
     return text ?? description ?? 'No content exists for this item.';
   };
 
+  const createdAt = new DateHelper(created_at, timezone);
+
   return (
     <div className="flex flex-col space-y-4" key={id} data-testid={headline}>
       <div className="mb-10 mt-2 flex flex-col space-y-2">
@@ -95,13 +92,9 @@ export function Item({ item, currentUser, onLikeClick, onUnlikeClick }) {
               'text-green-700': color === 'success',
               'text-yellow-700': color === 'warning'
             })}
-            dateTime={dayjs(created_at)
-              .tz(searchParams.get('timezone') ?? 'UTC')
-              .format('YYYY-MM-DD')}
+            dateTime={createdAt.format('YYYY-MM-DD')}
           >
-            {dayjs(created_at)
-              .tz(searchParams.get('timezone') ?? 'UTC')
-              .format('dddd, MMM D, YYYY')}
+            {createdAt.format('dddd, MMM D, YYYY')}
           </time>
         </div>
         <div>
@@ -128,13 +121,9 @@ export function Item({ item, currentUser, onLikeClick, onUnlikeClick }) {
             'text-green-700': color === 'success',
             'text-yellow-700': color === 'warning'
           })}
-          dateTime={dayjs(created_at)
-            .tz(searchParams.get('timezone') ?? 'UTC')
-            .format('YYYY-MM-DD')}
+          dateTime={createdAt.format('YYYY-MM-DD')}
         >
-          {dayjs(created_at)
-            .tz(searchParams.get('timezone') ?? 'UTC')
-            .format('dddd, MMM D, YYYY')}
+          {createdAt.format('dddd, MMM D, YYYY')}
         </time>
       </div>
       <div className="!-my-4 -mx-6 border-t border-gray-100 bg-gray-50 text-gray-700 last:rounded-b dark:border-gray-900 dark:bg-[#09090B] dark:text-gray-400">

src/app/(auth)/qualifications/page.js

@@ -35,12 +35,14 @@ export default async function Page({ searchParams }) {
                 <TableRow key={qualification.id}>
                   <TableCell className="hidden w-1/6 !py-4 sm:table-cell">
                     {qualification.image?.image_url ? (
-                      <div className="relative mx-auto h-20 w-28">
+                      <div className="relative mx-auto flex h-20 items-center justify-center">
                         <Image
                           src={qualification.image.image_url}
                           alt={qualification.name}
-                          fill
-                          objectFit="contain"
+                          width={80}
+                          height={80}
+                          priority={true}
+                          style={{ width: 'auto' }}
                         />
                       </div>
                     ) : (
@@ -52,13 +54,14 @@ export default async function Page({ searchParams }) {
                   <TableCell className="!whitespace-normal break-normal !py-4">
                     <>
                       {qualification.image?.image_url && (
-                        <div className="relative mb-2 flex h-12 sm:hidden">
+                        <div className="relative mb-2 flex h-8 sm:hidden">
                           <Image
-                            className="!w-auto"
                             src={qualification.image.image_url}
                             alt={qualification.name}
-                            fill
-                            objectFit="contain"
+                            width={32}
+                            height={32}
+                            priority={true}
+                            style={{ width: 'auto' }}
                           />
                         </div>
                       )}

src/app/(auth)/ranks/page.js

@@ -35,12 +35,14 @@ export default async function Page({ searchParams }) {
                 <TableRow key={rank.id}>
                   <TableCell className="hidden w-1/6 !py-4 sm:table-cell">
                     {rank.image?.image_url ? (
-                      <div className="relative mx-auto h-20">
+                      <div className="relative mx-auto flex h-20 items-center justify-center">
                         <Image
                           src={rank.image.image_url}
                           alt={rank.name}
-                          fill
-                          objectFit="contain"
+                          width={80}
+                          height={80}
+                          priority={true}
+                          style={{ width: 'auto' }}
                         />
                       </div>
                     ) : (
@@ -52,13 +54,14 @@ export default async function Page({ searchParams }) {
                   <TableCell className="!whitespace-normal break-normal !py-4">
                     <>
                       {rank.image?.image_url && (
-                        <div className="relative mb-2 flex h-12 sm:hidden">
+                        <div className="relative mb-2 flex h-8 sm:hidden">
                           <Image
-                            className="!w-auto"
                             src={rank.image.image_url}
                             alt={rank.name}
-                            fill
-                            objectFit="contain"
+                            width={32}
+                            height={32}
+                            priority={true}
+                            style={{ width: 'auto' }}
                           />
                         </div>
                       )}

src/app/(auth)/roster/_components/unit.js

@@ -34,8 +34,15 @@ export function Unit({ unit }) {
                     {rank && (
                       <div className="flex w-8 flex-shrink-0 items-center">
                         {image_url ? (
-                          <div className="relative h-8 w-8">
-                            <Image src={image_url} alt={rank_name} fill objectFit="contain" />
+                          <div className="relative flex h-8 w-8 items-center justify-center">
+                            <Image
+                              src={image_url}
+                              alt={rank_name}
+                              width={32}
+                              height={32}
+                              priority={true}
+                              style={{ width: 'auto' }}
+                            />
                           </div>
                         ) : (
                           <div className="text-xs">{abbreviation}</div>

src/app/(auth)/users/_components/assignment.js

@@ -1,14 +1,11 @@
 'use client';
 
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
 import { TabItem } from 'flowbite-react';
 import { useSearchParams } from 'next/navigation';
 import { Card } from '../../../../components/card';
 import { Datatable } from '../../../../components/datatable';
 import { Tabs } from '../../../../components/tabs';
+import { DateHelper } from '../../../../lib/date';
 
 export function Assignment({ user }) {
   const { position, unit, specialty, secondary_assignment_records, last_assignment_change_date } =
@@ -18,18 +15,10 @@ export function Assignment({ user }) {
   const { name: unit_name } = unit ?? {};
 
   const searchParams = useSearchParams();
+  const timezone = searchParams.get('timezone') ?? 'UTC';
 
-  dayjs.extend(utcPlugin);
-  dayjs.extend(timezonePlugin);
-  dayjs.extend(relativeTime);
-  dayjs.tz.setDefault(searchParams.get('timezone') ?? 'UTC');
-
-  const lastAssignmentChangeDate = dayjs(last_assignment_change_date).tz(
-    searchParams.get('timezone') ?? 'UTC'
-  );
-  const timeInAssignment = dayjs(last_assignment_change_date)
-    .tz(searchParams.get('timezone') ?? 'UTC')
-    .fromNow(true);
+  const lastAssignmentChangeDate = new DateHelper(last_assignment_change_date, timezone);
+  const timeInAssignment = lastAssignmentChangeDate.diffFrom(new Date().toDateString());
 
   return (
     <Card className="p-4 sm:p-6">
@@ -61,9 +50,7 @@ export function Assignment({ user }) {
                   Last Assignment Change Date
                 </p>
                 <p className="truncate text-xs text-gray-700 dark:text-gray-400">
-                  <time dateTime={lastAssignmentChangeDate.format('YYYY-MM-DD')}>
-                    {lastAssignmentChangeDate.format('dddd, MMM D, YYYY')}
-                  </time>
+                  {lastAssignmentChangeDate.toHtml()}
                 </p>
               </li>
               <li className="py-2">
@@ -85,13 +72,9 @@ export function Assignment({ user }) {
                 {
                   name: 'Date',
                   selector: (row) => {
-                    const date = dayjs(row.created_at).tz(searchParams.get('timezone') ?? 'UTC');
+                    const date = new DateHelper(row.created_at, timezone);
 
-                    return (
-                      <time dateTime={date.format('YYYY-MM-DD')}>
-                        {date.format('dddd, MMM D, YYYY')}
-                      </time>
-                    );
+                    return date.toHtml();
                   },
                   sortable: true,
                   maxWidth: '250px'