fix: update day picker to handle utc display

frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx

@@ -18,12 +18,12 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { Timezone } from "@app/helpers/datetime";
 
 import {
   auditLogDateFilterFormSchema,
   AuditLogDateFilterType,
-  TAuditLogDateFilterFormData,
-  Timezone
+  TAuditLogDateFilterFormData
 } from "./types";
 
 type Props = {
@@ -233,6 +233,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
                         <DatePicker
                           value={field.value || undefined}
                           onChange={onChange}
+                          timezone={timezone}
                           dateFormat="P"
                           buttonClassName="w-44 h-8 font-normal"
                           popUpProps={{
@@ -266,6 +267,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
                           onChange={onChange}
                           dateFormat="P"
                           buttonClassName="w-44 h-8 font-normal"
+                          timezone={timezone}
                           popUpProps={{
                             open: isEndDatePickerOpen,
                             onOpenChange: setIsEndDatePickerOpen

frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx

@@ -5,6 +5,7 @@ import ms from "ms";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { Timezone } from "@app/helpers/datetime";
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -15,8 +16,7 @@ import {
   AuditLogDateFilterType,
   Presets,
   TAuditLogDateFilterFormData,
-  TAuditLogFilterFormData,
-  Timezone
+  TAuditLogFilterFormData
 } from "./types";
 
 type Props = {

frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx

@@ -1,14 +1,12 @@
 import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
 
 import { Td, Tr } from "@app/components/v2";
+import { formatDateTime, Timezone } from "@app/helpers/datetime";
 import { useToggle } from "@app/hooks";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
 import { AuditLog } from "@app/hooks/api/auditLogs/types";
 
-import { Timezone } from "./types";
-
 type Props = {
   auditLog: AuditLog;
   rowNumber: number;
@@ -30,16 +28,6 @@ const Tag = ({ label, value }: TagProps) => {
   );
 };
 
-const formatDateTime = (timestamp: string | Date, timezone: Timezone) => {
-  const date = new Date(timestamp);
-
-  if (timezone === Timezone.UTC) {
-    const utcDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
-    return `${format(utcDate, "MMM do yyyy, hh:mm a")} UTC`;
-  }
-  return format(date, "MMM do yyyy, hh:mm a");
-};
-
 export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
   const [isOpen, setIsOpen] = useToggle();
 
@@ -59,7 +47,7 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
           <FontAwesomeIcon icon={isOpen ? faCaretDown : faCaretRight} />
           {rowNumber}
         </Td>
-        <Td className="align-top">{formatDateTime(auditLog.createdAt, timezone)}</Td>
+        <Td className="align-top">{formatDateTime({ timestamp: auditLog.createdAt, timezone })}</Td>
         <Td>
           <div className="flex flex-wrap gap-4 text-sm">
             <Tag label="event" value={auditLog.event.type} />

frontend/src/pages/organization/AuditLogsPage/components/types.tsx

@@ -8,11 +8,6 @@ export enum AuditLogDateFilterType {
   Absolute = "absolute"
 }
 
-export enum Timezone {
-  Local = "local",
-  UTC = "UTC"
-}
-
 export const auditLogFilterFormSchema = z.object({
   eventMetadata: z.object({}).optional(),
   project: z