chore: remove unnecessary date helper functions

web/components/common/product-updates-modal.tsx

@@ -12,7 +12,7 @@ import { Loader } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { renderLongDateFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 
 type Props = {
   isOpen: boolean;
@@ -69,7 +69,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                             <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
                               {item.tag_name}
                             </span>
-                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            <span>{renderFormattedDate(item.published_at)}</span>
                             {index === 0 && (
                               <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
                                 New

web/components/core/activity.tsx

@@ -23,7 +23,7 @@ import {
   UsersIcon,
 } from "lucide-react";
 // helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { IIssueActivity } from "types";
@@ -607,9 +607,7 @@ const activityDetails: {
         return (
           <>
             set the start date to{" "}
-            <span className="font-medium text-custom-text-100">
+            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
-              {renderShortDateWithYearFormat(activity.new_value)}
-            </span>
             {showIssue && (
               <>
                 {" "}
@@ -656,9 +654,7 @@ const activityDetails: {
         return (
           <>
             set the due date to{" "}
-            <span className="font-medium text-custom-text-100">
+            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
-              {renderShortDateWithYearFormat(activity.new_value)}
-            </span>
             {showIssue && (
               <>
                 {" "}

web/components/core/filters/date-filter-modal.tsx

@@ -10,7 +10,7 @@ import { Button } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
 
 type Props = {
   title: string;
@@ -39,8 +39,9 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   const handleFormSubmit = (formData: TFormValues) => {
     const { filterType, date1, date2 } = formData;
 
-    if (filterType === "range") onSelect([`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`]);
+    if (filterType === "range")
-    else onSelect([`${renderDateFormat(date1)};${filterType}`]);
+      onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
+    else onSelect([`${renderFormattedPayloadDate(date1)};${filterType}`]);
 
     handleClose();
   };
@@ -121,9 +122,9 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                   {watch("filterType") === "range" && (
                     <h6 className="text-xs flex items-center gap-1">
                       <span className="text-custom-text-200">After:</span>
-                      <span>{renderShortDateWithYearFormat(watch("date1"))}</span>
+                      <span>{renderFormattedDate(watch("date1"))}</span>
                       <span className="text-custom-text-200 ml-1">Before:</span>
-                      {!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
+                      {!isInvalid && <span>{renderFormattedDate(watch("date2"))}</span>}
                     </h6>
                   )}
                   <div className="flex justify-end gap-4">

web/components/core/sidebar/progress-chart.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-
+import { eachDayOfInterval } from "date-fns";
 // ui
 import { LineGraph } from "components/ui";
 // helpers
-import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 //types
 import { TCompletionChartDistribution } from "types";
 
@@ -47,7 +47,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
   }));
 
   const generateXAxisTickValues = () => {
-    const dates = getDatesInRange(startDate, endDate);
+    const dates = eachDayOfInterval({ start: new Date(startDate), end: new Date(endDate) });
 
     const maxDates = 4;
     const totalDates = dates.length;

web/components/cycles/active-cycle-details.tsx

@@ -28,7 +28,7 @@ import { ViewIssueLabel } from "components/issues";
 // icons
 import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
 // helpers
-import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { getDateRangeStatus, findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { ICycle } from "types";
@@ -267,12 +267,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
               <div className="flex items-center justify-start gap-5 text-custom-text-200">
                 <div className="flex items-start gap-1">
                   <CalendarDays className="h-4 w-4" />
-                  <span>{renderShortDateWithYearFormat(startDate)}</span>
+                  <span>{renderFormattedDate(startDate)}</span>
                 </div>
                 <ArrowRight className="h-4 w-4 text-custom-text-200" />
                 <div className="flex items-start gap-1">
                   <Target className="h-4 w-4" />
-                  <span>{renderShortDateWithYearFormat(endDate)}</span>
+                  <span>{renderFormattedDate(endDate)}</span>
                 </div>
               </div>
 

web/components/cycles/sidebar.tsx

@@ -24,7 +24,7 @@ import {
   findHowManyDaysLeft,
   getDateRangeStatus,
   isDateGreaterThanToday,
-  renderDateFormat,
+  renderFormattedPayloadDate,
   renderShortDate,
   renderShortMonthDate,
 } from "helpers/date-time.helper";
@@ -128,8 +128,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
         if (isDateValidForExistingCycle) {
           submitChanges({
-            start_date: renderDateFormat(`${watch("start_date")}`),
+            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-            end_date: renderDateFormat(`${watch("end_date")}`),
+            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
           });
           setToastAlert({
             type: "success",
@@ -155,8 +155,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
       if (isDateValid) {
         submitChanges({
-          start_date: renderDateFormat(`${watch("start_date")}`),
+          start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-          end_date: renderDateFormat(`${watch("end_date")}`),
+          end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
         });
         setToastAlert({
           type: "success",
@@ -196,8 +196,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
         if (isDateValidForExistingCycle) {
           submitChanges({
-            start_date: renderDateFormat(`${watch("start_date")}`),
+            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-            end_date: renderDateFormat(`${watch("end_date")}`),
+            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
           });
           setToastAlert({
             type: "success",
@@ -223,8 +223,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
       if (isDateValid) {
         submitChanges({
-          start_date: renderDateFormat(`${watch("start_date")}`),
+          start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-          end_date: renderDateFormat(`${watch("end_date")}`),
+          end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
         });
         setToastAlert({
           type: "success",

web/components/exporter/single-export.tsx

@@ -2,7 +2,7 @@ import { useState, FC } from "react";
 // ui
 import { Button } from "@plane/ui";
 // helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IExportData } from "types";
 
@@ -50,7 +50,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
           </span>
         </h4>
         <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
-          <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
+          <span>{renderFormattedDate(service.created_at)}</span>|
           <span>Exported by {service?.initiated_by_detail?.display_name}</span>
         </div>
       </div>

web/components/gantt-chart/blocks/blocks-display.tsx

@@ -4,7 +4,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 // helpers
 import { ChartDraggable } from "../helpers/draggable";
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { IBlockUpdateData, IGanttBlock } from "../types";
 
@@ -60,8 +60,8 @@ export const GanttChartBlocks: FC<{
 
     // call the block update handler with the updated dates
     blockUpdateHandler(block.data, {
-      start_date: renderDateFormat(updatedStartDate),
+      start_date: renderFormattedPayloadDate(updatedStartDate) ?? undefined,
-      target_date: renderDateFormat(updatedTargetDate),
+      target_date: renderFormattedPayloadDate(updatedTargetDate) ?? undefined,
     });
   };
 

web/components/inbox/issue-card.tsx

@@ -6,7 +6,7 @@ import { Tooltip, PriorityIcon } from "@plane/ui";
 // icons
 import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
 // helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IInboxIssue } from "types";
 // constants
@@ -43,13 +43,10 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
           <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
             <PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
           </Tooltip>
-          <Tooltip
+          <Tooltip tooltipHeading="Created on" tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}>
-            tooltipHeading="Created on"
-            tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
-          >
             <div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
               <CalendarDays size={12} strokeWidth={1.5} />
-              <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
+              <span>{renderFormattedDate(issue.created_at ?? "")}</span>
             </div>
           </Tooltip>
         </div>

web/components/inbox/main-content.tsx

@@ -13,9 +13,10 @@ import { InboxIssueActivity } from "components/inbox";
 // ui
 import { Loader, StateGroupIcon } from "@plane/ui";
 // helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IInboxIssue, IIssue } from "types";
+// constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 
 const defaultValues: Partial<IInboxIssue> = {
@@ -195,13 +196,12 @@ export const InboxMainContent: React.FC = observer(() => {
                   <Clock size={18} strokeWidth={2} />
                   {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
                     <p>
-                      This issue was snoozed till{" "}
+                      This issue was snoozed till {renderFormattedDate(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
-                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
                     </p>
                   ) : (
                     <p>
                       This issue has been snoozed till{" "}
-                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
+                      {renderFormattedDate(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
                     </p>
                   )}
                 </>

web/components/integration/single-import.tsx

@@ -3,7 +3,7 @@ import { CustomMenu } from "@plane/ui";
 // icons
 import { Trash2 } from "lucide-react";
 // helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IImporterService } from "types";
 // constants
@@ -39,7 +39,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
         </span>
       </h4>
       <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
-        <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
+        <span>{renderFormattedDate(service.created_at)}</span>|
         <span>Imported by {service.initiated_by_detail.display_name}</span>
       </div>
     </div>

web/components/issues/activity.tsx

@@ -9,7 +9,7 @@ import { CommentCard } from "components/issues/comment";
 // ui
 import { Loader, Tooltip } from "@plane/ui";
 // helpers
-import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
+import { render24HourFormatTime, renderFormattedDate, timeAgo } from "helpers/date-time.helper";
 // types
 import { IIssueActivity, IIssueComment } from "types";
 import { History } from "lucide-react";
@@ -114,7 +114,7 @@ export const IssueActivitySection: React.FC<Props> = ({
                         )}{" "}
                         {message}{" "}
                         <Tooltip
-                          tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
+                          tooltipContent={`${renderFormattedDate(activityItem.created_at)}, ${render24HourFormatTime(
                             activityItem.created_at
                           )}`}
                         >

web/components/issues/attachment/attachments.tsx

@@ -15,7 +15,7 @@ import { ProjectMemberService } from "services/project";
 import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
-import { renderLongDateFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper";
 // type
 import { IIssueAttachment } from "types";
@@ -70,7 +70,7 @@ export const IssueAttachments = () => {
                     <Tooltip
                       tooltipContent={`${
                         people?.find((person) => person.member.id === file.updated_by)?.member.display_name ?? ""
-                      } uploaded on ${renderLongDateFormat(file.updated_at)}`}
+                      } uploaded on ${renderFormattedDate(file.updated_at)}`}
                     >
                       <span>
                         <AlertCircle className="h-3 w-3" />

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -7,10 +7,11 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
-// constants
+// types
-import { MONTHS_LIST } from "constants/calendar";
 import { IIssue } from "types";
 import { IGroupedIssues, IIssueResponse } from "store/issues/types";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   date: ICalendarDate;

web/components/issues/issue-layouts/filters/applied-filters/date.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { renderLongDateFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // constants
 import { DATE_FILTER_OPTIONS } from "constants/filters";
@@ -28,7 +28,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
       if (dateParts.length === 2) {
         const [date, time] = dateParts;
 
-        dateLabel = `${capitalizeFirstLetter(time)} ${renderLongDateFormat(date)}`;
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
       }
     }
 

web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx

@@ -11,7 +11,7 @@ import useKeypress from "hooks/use-keypress";
 import useProjectDetails from "hooks/use-project-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 // helpers
@@ -116,8 +116,8 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
     const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
       ...(prePopulatedData ?? {}),
       ...formData,
-      start_date: renderDateFormat(new Date()),
+      start_date: renderFormattedPayloadDate(new Date()),
-      target_date: renderDateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
+      target_date: renderFormattedPayloadDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
     });
 
     try {

web/components/issues/issue-layouts/properties/date.tsx

@@ -12,7 +12,7 @@ import { Tooltip } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 
 export interface IIssuePropertyDate {
   value: any;
@@ -79,7 +79,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                     selected={value ? new Date(value) : new Date()}
                     onChange={(val: any) => {
                       if (onChange && val) {
-                        onChange(renderDateFormat(val));
+                        onChange(renderFormattedPayloadDate(val));
                         close();
                       }
                     }}

web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx

@@ -3,7 +3,7 @@ import React from "react";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // helpers
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -20,7 +20,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
   return (
     <>
       <div className="flex items-center justify-center text-xs h-full w-full">
-        {renderLongDetailDateFormat(issue.created_at)}
+        {renderFormattedDate(issue.created_at)}
       </div>
 
       {isExpanded &&

web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx

@@ -3,7 +3,7 @@ import React from "react";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // helpers
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -22,7 +22,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
   return (
     <>
       <div className="flex items-center justify-center text-xs h-full w-full">
-        {renderLongDetailDateFormat(issue.updated_at)}
+        {renderFormattedDate(issue.updated_at)}
       </div>
 
       {isExpanded &&

web/components/issues/issue-peek-overview/activity/card.tsx

@@ -7,7 +7,7 @@ import { Tooltip } from "@plane/ui";
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { IssueCommentCard } from "./comment-card";
 // helpers
-import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
+import { render24HourFormatTime, renderFormattedDate, timeAgo } from "helpers/date-time.helper";
 
 interface IssueActivityCard {
   workspaceSlug: string;
@@ -102,7 +102,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
                           )}{" "}
                           {message}{" "}
                           <Tooltip
-                            tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
+                            tooltipContent={`${renderFormattedDate(activityItem.created_at)}, ${render24HourFormatTime(
                               activityItem.created_at
                             )}`}
                           >

web/components/issues/select/date.tsx

@@ -4,8 +4,7 @@ import { Popover, Transition } from "@headlessui/react";
 import { CalendarDays, X } from "lucide-react";
 // react-datepicker
 import DatePicker from "react-datepicker";
-// import "react-datepicker/dist/react-datepicker.css";
+import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 type Props = {
   label: string;
@@ -35,7 +34,7 @@ export const IssueDateSelect: FC<Props> = ({ label, maxDate, minDate, onChange,
               {value ? (
                 <>
                   <CalendarDays className="h-3 w-3 flex-shrink-0" />
-                  <span>{renderShortDateWithYearFormat(value)}</span>
+                  <span>{renderFormattedDate(value)}</span>
                   <button onClick={() => onChange(null)}>
                     <X className="h-3 w-3 flex-shrink-0" />
                   </button>
@@ -69,7 +68,7 @@ export const IssueDateSelect: FC<Props> = ({ label, maxDate, minDate, onChange,
                   selected={value ? new Date(value) : null}
                   onChange={(val) => {
                     if (!val) onChange("");
-                    else onChange(renderDateFormat(val));
+                    else onChange(renderFormattedPayloadDate(val));
 
                     close();
                   }}

web/components/issues/view-select/due-date.tsx

@@ -6,7 +6,7 @@ import { CalendarDays } from "lucide-react";
 import {
   findHowManyDaysLeft,
   renderShortDate,
-  renderShortDateWithYearFormat,
+  renderFormattedDate,
   renderShortMonthDate,
 } from "helpers/date-time.helper";
 // types
@@ -43,7 +43,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   return (
     <Tooltip
       tooltipHeading="Due date"
-      tooltipContent={issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"}
+      tooltipContent={issue.target_date ? renderFormattedDate(issue.target_date) ?? "N/A" : "N/A"}
       position={tooltipPosition}
     >
       <div

web/components/issues/view-select/start-date.tsx

@@ -3,7 +3,7 @@ import { CustomDatePicker } from "components/ui";
 import { Tooltip } from "@plane/ui";
 import { CalendarDays } from "lucide-react";
 // helpers
-import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper";
+import { renderShortDate, renderFormattedDate, renderShortMonthDate } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -37,7 +37,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
   return (
     <Tooltip
       tooltipHeading="Start date"
-      tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
+      tooltipContent={issue.start_date ? renderFormattedDate(issue.start_date) ?? "N/A" : "N/A"}
       position={tooltipPosition}
     >
       <div className={`group flex-shrink-0 max-w-[6.5rem] ${className}`}>

web/components/modules/sidebar.tsx

@@ -19,7 +19,7 @@ import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, MoveRight, Plus
 // helpers
 import {
   isDateGreaterThanToday,
-  renderDateFormat,
+  renderFormattedPayloadDate,
   renderShortDate,
   renderShortMonthDate,
 } from "helpers/date-time.helper";
@@ -175,8 +175,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
       }
 
       submitChanges({
-        start_date: renderDateFormat(`${watch("start_date")}`),
+        start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-        target_date: renderDateFormat(`${watch("target_date")}`),
+        target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
       });
       setToastAlert({
         type: "success",
@@ -200,8 +200,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
       }
 
       submitChanges({
-        start_date: renderDateFormat(`${watch("start_date")}`),
+        start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-        target_date: renderDateFormat(`${watch("target_date")}`),
+        target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
       });
       setToastAlert({
         type: "success",

web/components/notifications/notification-card.tsx

@@ -13,9 +13,8 @@ import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from
 import {
   formatDateDistance,
   render12HourFormatTime,
-  renderLongDateFormat,
   renderShortDate,
-  renderShortDateWithYearFormat,
+  renderFormattedDate,
 } from "helpers/date-time.helper";
 // type
 import type { IUserNotification } from "types";
@@ -112,7 +111,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               {notification.data.issue_activity.field !== "None" ? (
                 notification.data.issue_activity.field !== "comment" ? (
                   notification.data.issue_activity.field === "target_date" ? (
-                    renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
+                    renderFormattedDate(notification.data.issue_activity.new_value)
                   ) : notification.data.issue_activity.field === "attachment" ? (
                     "the issue"
                   ) : notification.data.issue_activity.field === "description" ? (
@@ -233,7 +232,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
 
                   markSnoozeNotification(notification.id, item.value).then(() => {
                     setToastAlert({
-                      title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
+                      title: `Notification snoozed till ${renderFormattedDate(item.value)}`,
                       type: "success",
                     });
                   });

web/components/profile/sidebar.tsx

@@ -14,7 +14,7 @@ import { Loader, Tooltip } from "@plane/ui";
 // icons
 import { ChevronDown, Pencil } from "lucide-react";
 // helpers
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // fetch-keys
 import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
@@ -48,7 +48,7 @@ export const ProfileSidebar = () => {
   const userDetails = [
     {
       label: "Joined on",
-      value: renderLongDetailDateFormat(userProjectsData?.user_data.date_joined ?? ""),
+      value: renderFormattedDate(userProjectsData?.user_data.date_joined ?? ""),
     },
     {
       label: "Timezone",

web/components/project/form.tsx

@@ -1,5 +1,8 @@
 import { FC } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
 import { ImagePickerPopover } from "components/core";
@@ -8,14 +11,13 @@ import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 import { IProject, IWorkspace } from "types";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // constants
 import { NETWORK_CHOICES } from "constants/project";
 // services
 import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
-import { useMobxStore } from "lib/mobx/store-provider";
 
 export interface IProjectDetailsForm {
   project: IProject;
@@ -25,10 +27,14 @@ export interface IProjectDetailsForm {
 
 const projectService = new ProjectService();
 
-export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
+export const ProjectDetailsForm: FC<IProjectDetailsForm> = observer((props) => {
   const { project, workspaceSlug, isAdmin } = props;
   // store
-  const { project: projectStore, trackEvent: { postHogEventTracker }, workspace: { currentWorkspace } } = useMobxStore();
+  const {
+    project: projectStore,
+    trackEvent: { postHogEventTracker },
+    workspace: { currentWorkspace },
+  } = useMobxStore();
   // toast
   const { setToastAlert } = useToast();
   // form data
@@ -63,12 +69,12 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       .updateProject(workspaceSlug.toString(), project.id, payload)
       .then((res) => {
         postHogEventTracker(
-          'PROJECT_UPDATED',
+          "PROJECT_UPDATED",
           { ...res, state: "SUCCESS" },
           {
             isGrouping: true,
             groupType: "Workspace_metrics",
-            gorupId: res.workspace
+            gorupId: res.workspace,
           }
         );
         setToastAlert({
@@ -79,14 +85,14 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       })
       .catch((error) => {
         postHogEventTracker(
-          'PROJECT_UPDATED',
+          "PROJECT_UPDATED",
           {
-            state: "FAILED"
+            state: "FAILED",
           },
           {
             isGrouping: true,
             groupType: "Workspace_metrics",
-            gorupId: currentWorkspace?.id!
+            gorupId: currentWorkspace?.id!,
           }
         );
         setToastAlert({
@@ -295,11 +301,11 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               {isSubmitting ? "Updating Project..." : "Update Project"}
             </Button>
             <span className="text-sm text-custom-sidebar-text-400 italic">
-              Created on {renderShortDateWithYearFormat(project?.created_at)}
+              Created on {renderFormattedDate(project?.created_at)}
             </span>
           </>
         </div>
       </div>
     </form>
   );
-};
+});

web/components/ui/date.tsx

@@ -5,8 +5,7 @@ import { Popover, Transition } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 // icons
 import { CalendarDays, X } from "lucide-react";
-// import "react-datepicker/dist/react-datepicker.css";
+import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 type Props = {
   value: string | null;
@@ -25,7 +24,7 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label, minDate, m
           {value ? (
             <>
               <CalendarDays className="h-3 w-3 flex-shrink-0" />
-              <span>{renderShortDateWithYearFormat(value)}</span>
+              <span>{renderFormattedDate(value)}</span>
               <button onClick={() => onChange(null)}>
                 <X className="h-3 w-3" />
               </button>
@@ -52,7 +51,7 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label, minDate, m
               selected={value ? new Date(value) : null}
               onChange={(val) => {
                 if (!val) onChange("");
-                else onChange(renderDateFormat(val));
+                else onChange(renderFormattedPayloadDate(val));
 
                 if (closeOnSelect) close();
               }}

web/components/ui/datepicker.tsx

@@ -2,7 +2,7 @@
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 
 type Props = {
   renderAs?: "input" | "button";
@@ -45,7 +45,7 @@ export const CustomDatePicker: React.FC<Props> = ({
     selected={value ? new Date(value) : null}
     onChange={(val) => {
       if (!val) onChange(null);
-      else onChange(renderDateFormat(val));
+      else onChange(renderFormattedPayloadDate(val));
     }}
     onCalendarOpen={handleOnOpen}
     onCalendarClose={handleOnClose}

web/components/ui/product-updates-modal.tsx

@@ -12,7 +12,7 @@ import { Loader } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { renderLongDateFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 
 type Props = {
   isOpen: boolean;
@@ -68,7 +68,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                             <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
                               {item.tag_name}
                             </span>
-                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            <span>{renderFormattedDate(item.published_at)}</span>
                             {index === 0 && (
                               <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
                                 New

web/components/ui/range-datepicker.tsx

@@ -2,7 +2,7 @@
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 
 type Props = {
   renderAs?: "input" | "button";
@@ -38,7 +38,7 @@ export const CustomRangeDatePicker: React.FC<Props> = ({
     selected={value ? new Date(value) : null}
     onChange={(val) => {
       if (!val) onChange(null);
-      else onChange(renderDateFormat(val));
+      else onChange(renderFormattedPayloadDate(val));
     }}
     className={`${
       renderAs === "input"

web/components/web-hooks/utils.ts

@@ -1,4 +1,4 @@
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { IWebhook, IWorkspace } from "types";
 
 export const getCurrentHookAsCSV = (
@@ -8,8 +8,8 @@ export const getCurrentHookAsCSV = (
 ) => ({
   id: webhook?.id || "",
   url: webhook?.url || "",
-  created_at: renderDateFormat(webhook?.created_at),
+  created_at: renderFormattedPayloadDate(webhook?.created_at ?? ""),
-  updated_at: renderDateFormat(webhook?.updated_at),
+  updated_at: renderFormattedPayloadDate(webhook?.updated_at ?? ""),
   is_active: webhook?.is_active?.toString() || "",
   secret_key: secretKey || "",
   project: webhook?.project?.toString() || "",

web/components/workspace/activity-graph.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 // ui
 import { Tooltip } from "@plane/ui";
 // helpers
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { IUserActivity } from "types";
 // constants
@@ -35,7 +35,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
     const date = new Date(year, month, 1);
 
     while (date.getMonth() === month && date < new Date()) {
-      dates.push(renderDateFormat(new Date(date)));
+      dates.push(renderFormattedPayloadDate(new Date(date)) || "");
       date.setDate(date.getDate() + 1);
     }
 
@@ -100,9 +100,9 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
               return (
                 <Tooltip
                   key={`${date}-${index}`}
-                  tooltipContent={`${
+                  tooltipContent={`${isActive ? isActive.activity_count : 0} activities on ${renderFormattedDate(
-                    isActive ? isActive.activity_count : 0
+                    date
-                  } activities on ${renderShortDateWithYearFormat(date)}`}
+                  )}`}
                 >
                   <div
                     className={`${date === "" ? "pointer-events-none opacity-0" : ""} h-4 w-4 rounded ${

web/components/workspace/issues-list.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { AlertTriangle } from "lucide-react";
 import { LayersIcon, Loader } from "@plane/ui";
 // helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { IIssueLite } from "types";
@@ -66,9 +66,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
                           {dateDifference} {dateDifference > 1 ? "days" : "day"}
                         </h5>
                         <h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
-                        <h5 className="cursor-default">
+                        <h5 className="cursor-default">{renderFormattedDate(new Date(date?.toString() ?? ""))}</h5>
-                          {renderShortDateWithYearFormat(new Date(date?.toString() ?? ""))}
-                        </h5>
                       </div>
                     </span>
                   </Link>

web/helpers/date-time.helper.ts

@@ -1,10 +1,5 @@
 import { format } from "date-fns";
 
-export const addDays = ({ date, days }: { date: Date; days: number }): Date => {
-  date.setDate(date.getDate() + days);
-  return date;
-};
-
 export const renderDateFormat = (date: string | Date | null | undefined, dayFirst: boolean = false) => {
   if (!date) return "N/A";
 
@@ -25,13 +20,6 @@ export const renderShortNumericDateFormat = (date: string | Date) =>
     month: "short",
   });
 
-export const renderLongDetailDateFormat = (date: string | Date) =>
-  new Date(date).toLocaleDateString("en-UK", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
-
 export const findHowManyDaysLeft = (date: string | Date) => {
   const today = new Date();
   const eventDate = new Date(date);
@@ -39,21 +27,6 @@ export const findHowManyDaysLeft = (date: string | Date) => {
   return Math.ceil(timeDiff / (1000 * 3600 * 24));
 };
 
-export const getDatesInRange = (startDate: string | Date, endDate: string | Date) => {
-  startDate = new Date(startDate);
-  endDate = new Date(endDate);
-
-  const date = new Date(startDate.getTime());
-  const dates = [];
-
-  while (date <= endDate) {
-    dates.push(new Date(date));
-    date.setDate(date.getDate() + 1);
-  }
-
-  return dates;
-};
-
 export const timeAgo = (time: any) => {
   switch (typeof time) {
     case "number":
@@ -137,39 +110,6 @@ export const formatDateDistance = (date: string | Date) => {
   }
 };
 
-export const formatLongDateDistance = (date: string | Date) => {
-  const today = new Date();
-  const eventDate = new Date(date);
-  const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
-  const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
-
-  if (days < 1) {
-    const hours = Math.ceil(timeDiff / (1000 * 3600));
-    if (hours < 1) {
-      const minutes = Math.ceil(timeDiff / (1000 * 60));
-      if (minutes < 1) {
-        return "Just now";
-      } else {
-        return `${minutes} minutes`;
-      }
-    } else {
-      return `${hours} hours`;
-    }
-  } else if (days < 7) {
-    if (days === 1) return `${days} day`;
-    return `${days} days`;
-  } else if (days < 30) {
-    if (Math.floor(days / 7) === 1) return `${Math.floor(days / 7)} week`;
-    return `${Math.floor(days / 7)} weeks`;
-  } else if (days < 365) {
-    if (Math.floor(days / 30) === 1) return `${Math.floor(days / 30)} month`;
-    return `${Math.floor(days / 30)} months`;
-  } else {
-    if (Math.floor(days / 365) === 1) return `${Math.floor(days / 365)} year`;
-    return `${Math.floor(days / 365)} years`;
-  }
-};
-
 export const getDateRangeStatus = (startDate: string | null | undefined, endDate: string | null | undefined) => {
   if (!startDate || !endDate) return "draft";
 
@@ -182,19 +122,6 @@ export const getDateRangeStatus = (startDate: string | null | undefined, endDate
   else return "completed";
 };
 
-export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {
-  if (!date || date === "") return null;
-
-  date = new Date(date);
-
-  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-  const day = date.getDate();
-  const month = months[date.getMonth()];
-  const year = date.getFullYear();
-
-  return isNaN(date.getTime()) ? placeholder ?? "N/A" : ` ${month} ${day}, ${year}`;
-};
-
 export const renderShortDate = (date: string | Date, placeholder?: string) => {
   if (!date || date === "") return null;
 
@@ -260,107 +187,6 @@ export const isDateGreaterThanToday = (dateStr: string) => {
   return date > today;
 };
 
-export const renderLongDateFormat = (dateString: string | Date) => {
-  const date = new Date(dateString);
-  const day = date.getDate();
-  const year = date.getFullYear();
-  const monthNames = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-  const monthIndex = date.getMonth();
-  const monthName = monthNames[monthIndex];
-  const suffixes = ["st", "nd", "rd", "th"];
-  let suffix = "";
-  if (day === 1 || day === 21 || day === 31) {
-    suffix = suffixes[0];
-  } else if (day === 2 || day === 22) {
-    suffix = suffixes[1];
-  } else if (day === 3 || day === 23) {
-    suffix = suffixes[2];
-  } else {
-    suffix = suffixes[3];
-  }
-  return `${day}${suffix} ${monthName} ${year}`;
-};
-
-/**
- *
- * @returns {Array} Array of time objects with label and value as keys
- */
-
-export const getTimestampAfterCurrentTime = (): Array<{
-  label: string;
-  value: Date;
-}> => {
-  const current = new Date();
-  const time = [];
-  for (let i = 0; i < 24; i++) {
-    const newTime = new Date(current.getTime() + i * 60 * 60 * 1000);
-    time.push({
-      label: newTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-      value: newTime,
-    });
-  }
-  return time;
-};
-
-/**
- * @returns {Array} Array of date objects with label and value as keys
- * @description Returns an array of date objects starting from current date to 7 days after
- */
-
-export const getDatesAfterCurrentDate = (): Array<{
-  label: string;
-  value: Date;
-}> => {
-  const current = new Date();
-  const date = [];
-  for (let i = 0; i < 7; i++) {
-    const newDate = new Date(Math.round(current.getTime() / (30 * 60 * 1000)) * 30 * 60 * 1000);
-    date.push({
-      label: newDate.toLocaleDateString([], {
-        day: "numeric",
-        month: "long",
-        year: "numeric",
-      }),
-      value: newDate,
-    });
-  }
-  return date;
-};
-
-/**
- * @returns {boolean} true if date is valid
- * @description Returns true if date is valid
- * @param {string} date
- * @example checkIfStringIsDate("2021-01-01") // true
- * @example checkIfStringIsDate("2021-01-32") // false
- */
-
-export const checkIfStringIsDate = (date: string): boolean => new Date(date).toString() !== "Invalid Date";
-
-// return an array of dates starting from 12:00 to 23:30 with 30 minutes interval as dates
-export const getDatesWith30MinutesInterval = (): Array<Date> => {
-  const dates = [];
-  const current = new Date();
-  for (let i = 0; i < 24; i++) {
-    const newDate = new Date(current.getTime() + i * 60 * 60 * 1000);
-    dates.push(newDate);
-  }
-  return dates;
-};
-
 export const getAllTimeIn30MinutesInterval = (): Array<{
   label: string;
   value: string;
@@ -416,8 +242,6 @@ export const findTotalDaysInRange = (startDate: Date | string, endDate: Date | s
   return diffInDays;
 };
 
-export const getUserTimeZoneFromWindow = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
-
 /**
  * @returns {number} week number of date
  * @description Returns week number of date

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -20,7 +20,7 @@ import { Spinner } from "@plane/ui";
 // assets
 import emptyPage from "public/empty-state/page.svg";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { NextPageWithLayout } from "types/app";
 import { IPage, IIssue } from "types";
@@ -59,7 +59,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   const { user } = useUser();
 
-  const { handleSubmit, reset, setValue, watch, getValues, control } = useForm<IPage>({
+  const { handleSubmit, setValue, watch, getValues, control } = useForm<IPage>({
     defaultValues: { name: "", description_html: "" },
   });
 
@@ -112,7 +112,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     return issue as IIssue;
   };
 
-  const issueWidgetClickAction = (issueId: string, issueTitle: string) => {
+  const issueWidgetClickAction = (issueId: string) => {
     const url = new URL(router.asPath, window.location.origin);
     const params = new URLSearchParams(url.search);
 
@@ -156,7 +156,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     if (pageDetails?.description_html) {
       setLocalIssueDescription({ id: pageId as string, description_html: pageDetails.description_html });
     }
-  }, [pageDetails?.description_html]);
+  }, [pageDetails?.description_html, pageId]);
 
   function createObjectFromArray(keys: string[], options: any): any {
     return keys.reduce((obj, key) => {
@@ -176,7 +176,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     const commonSwrOptions: MutatorOptions = {
       revalidate: true,
       populateCache: false,
-      rollbackOnError: (e) => {
+      rollbackOnError: () => {
         onErrorAction();
         return true;
       },
@@ -255,7 +255,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     mutatePageDetailsHelper(
       pageService.archivePage(workspaceSlug.toString(), projectId.toString(), pageId.toString()),
       {
-        archived_at: renderDateFormat(new Date()),
+        archived_at: renderFormattedPayloadDate(new Date()),
       },
       ["description_html"],
       () =>
@@ -407,7 +407,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
                 <Controller
                   name="description_html"
                   control={control}
-                  render={({ field: { value, onChange } }) => (
+                  render={({ field: { onChange } }) => (
                     <DocumentEditorWithRef
                       isSubmitting={isSubmitting}
                       documentDetails={{

web/store/issues/project-issues/base-issue.store.ts

@@ -10,7 +10,7 @@ import { IIssueResponse } from "../types";
 // constants
 import { ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 
 export interface IIssueBaseStore {
   groupedIssues(
@@ -201,7 +201,7 @@ export class IssueBaseStore implements IIssueBaseStore {
     if (Array.isArray(value)) {
       if (value.length) return value;
       else return ["None"];
-    } else if (isDate) return [renderDateFormat(value) || "None"];
+    } else if (isDate) return [renderFormattedPayloadDate(value ?? "") || "None"];
     else return [value || "None"];
   }
 }

web/store/page.store.ts

@@ -6,7 +6,7 @@ import isThisWeek from "date-fns/isThisWeek";
 import { ProjectService } from "services/project";
 import { PageService } from "services/page.service";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { RootStore } from "./root";
 import { IPage, IRecentPages } from "types";
@@ -329,7 +329,7 @@ export class PageStore implements IPageStore {
             ...this.archivedPages,
             [projectId]: [
               ...this.archivedPages[projectId],
-              { ...archivedPage, archived_at: renderDateFormat(new Date()) },
+              { ...archivedPage, archived_at: renderFormattedPayloadDate(new Date()) },
             ],
           };
         });