chore: date and time standardization all across the platform.

web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx

@@ -1,11 +1,10 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
-import { renderShortDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // constants
 import { NETWORK_CHOICES } from "constants/project";
 
@@ -37,15 +36,15 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
                 <h6 className="text-custom-text-200">Start Date</h6>
                 <span>
                   {cycleDetails.start_date && cycleDetails.start_date !== ""
-                    ? renderShortDate(cycleDetails.start_date)
+                    ? renderFormattedDate(cycleDetails.start_date)
                     : "No start date"}
                 </span>
               </div>
               <div className="flex items-center gap-2 text-xs">
                 <h6 className="text-custom-text-200">Target Date</h6>
                 <span>
                   {cycleDetails.end_date && cycleDetails.end_date !== ""
-                    ? renderShortDate(cycleDetails.end_date)
+                    ? renderFormattedDate(cycleDetails.end_date)
                     : "No end date"}
                 </span>
               </div>
@@ -63,15 +62,15 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
                 <h6 className="text-custom-text-200">Start Date</h6>
                 <span>
                   {moduleDetails.start_date && moduleDetails.start_date !== ""
-                    ? renderShortDate(moduleDetails.start_date)
+                    ? renderFormattedDate(moduleDetails.start_date)
                     : "No start date"}
                 </span>
               </div>
               <div className="flex items-center gap-2 text-xs">
                 <h6 className="text-custom-text-200">Target Date</h6>
                 <span>
                   {moduleDetails.target_date && moduleDetails.target_date !== ""
-                    ? renderShortDate(moduleDetails.target_date)
+                    ? renderFormattedDate(moduleDetails.target_date)
                     : "No end date"}
                 </span>
               </div>

web/components/analytics/custom-analytics/sidebar/sidebar.tsx

@@ -14,7 +14,7 @@ import { Button, LayersIcon } from "@plane/ui";
 // icons
 import { CalendarDays, Download, RefreshCw } from "lucide-react";
 // helpers
-import { renderShortDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "types";
 // fetch-keys
@@ -156,7 +156,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
           {isProjectLevel && (
             <div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
               <CalendarDays className="h-3.5 w-3.5" />
-              {renderShortDate(
+              {renderFormattedDate(
                 (cycleId
                   ? cycleDetails?.created_at
                   : moduleId

web/components/api-token/modal/create-token-modal.tsx

@@ -48,7 +48,7 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
     const csvData = {
       Title: data.label,
       Description: data.description,
-      Expiry: data.expired_at ? renderFormattedDate(data.expired_at) : "Never expires",
+      Expiry: data.expired_at ? renderFormattedDate(data.expired_at)?.replace(",", " ") ?? "" : "Never expires",
       "Secret key": data.token ?? "",
     };
 

web/components/api-token/token-list-item.tsx

@@ -5,7 +5,7 @@ import { DeleteApiTokenModal } from "components/api-token";
 // ui
 import { Tooltip } from "@plane/ui";
 // helpers
-import { renderFormattedDate, timeAgo } from "helpers/date-time.helper";
+import { renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper";
 // types
 import { IApiToken } from "types/api_token";
 
@@ -49,7 +49,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
               ? token.expired_at
                 ? `Expires ${renderFormattedDate(token.expired_at!)}`
                 : "Never expires"
-              : `Expired ${timeAgo(token.expired_at)}`}
+              : `Expired ${calculateTimeAgo(token.expired_at)}`}
           </p>
         </div>
       </div>

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

@@ -1,7 +1,5 @@
 import React from "react";
-
 import useSWR from "swr";
-
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -12,7 +10,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 +67,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

@@ -22,7 +22,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";
@@ -597,7 +597,7 @@ const activityDetails: {
           <>
             set the start date to{" "}
             <span className="font-medium text-custom-text-100">
-              {renderShortDateWithYearFormat(activity.new_value)}
+              {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
               <>
@@ -646,7 +646,7 @@ const activityDetails: {
           <>
             set the due date to{" "}
             <span className="font-medium text-custom-text-100">
-              {renderShortDateWithYearFormat(activity.new_value)}
+              {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
               <>

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

@@ -2,15 +2,14 @@ import { Fragment } from "react";
 import { Controller, useForm } from "react-hook-form";
 import DatePicker from "react-datepicker";
 import { Dialog, Transition } from "@headlessui/react";
-
 // components
 import { DateFilterSelect } from "./date-filter-select";
 // ui
 import { Button } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
 
 type Props = {
   title: string;
@@ -39,8 +38,8 @@ 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`]);
-    else onSelect([`${renderDateFormat(date1)};${filterType}`]);
+    if (filterType === "range") onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
+    else onSelect([`${renderFormattedPayloadDate(date1)};${filterType}`]);
 
     handleClose();
   };
@@ -121,9 +120,9 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                   {watch("filterType") === "range" && (
                     <h6 className="flex items-center gap-1 text-xs">
                       <span className="text-custom-text-200">After:</span>
-                      <span>{renderShortDateWithYearFormat(watch("date1"))}</span>
+                      <span>{renderFormattedDate(watch("date1"))}</span>
                       <span className="ml-1 text-custom-text-200">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/links-list.tsx

@@ -3,7 +3,7 @@ import { ExternalLinkIcon, Tooltip } from "@plane/ui";
 // icons
 import { Pencil, Trash2, LinkIcon } from "lucide-react";
 // helpers
-import { timeAgo } from "helpers/date-time.helper";
+import { calculateTimeAgo } from "helpers/date-time.helper";
 // types
 import { ILinkDetails, UserAuth } from "types";
 // hooks
@@ -89,7 +89,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
           </div>
           <div className="px-5">
             <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
-              Added {timeAgo(link.created_at)}
+              Added {calculateTimeAgo(link.created_at)}
               <br />
               by{" "}
               {link.created_by_detail.is_bot

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 { renderFormattedDateWithoutYear } from "helpers/date-time.helper";
 //types
 import { TCompletionChartDistribution } from "types";
 
@@ -42,25 +42,25 @@ const DashedLine = ({ series, lineGenerator, xScale, yScale }: any) =>
 
 const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, totalIssues }) => {
   const chartData = Object.keys(distribution).map((key) => ({
-    currentDate: renderShortNumericDateFormat(key),
+    currentDate: renderFormattedDateWithoutYear(key),
     pending: distribution[key],
   }));
 
   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;
 
-    if (totalDates <= maxDates) return dates.map((d) => renderShortNumericDateFormat(d));
+    if (totalDates <= maxDates) return dates.map((d) => renderFormattedDateWithoutYear(d));
     else {
       const interval = Math.ceil(totalDates / maxDates);
       const limitedDates = [];
 
-      for (let i = 0; i < totalDates; i += interval) limitedDates.push(renderShortNumericDateFormat(dates[i]));
+      for (let i = 0; i < totalDates; i += interval) limitedDates.push(renderFormattedDateWithoutYear(dates[i]));
 
-      if (!limitedDates.includes(renderShortNumericDateFormat(dates[totalDates - 1])))
-        limitedDates.push(renderShortNumericDateFormat(dates[totalDates - 1]));
+      if (!limitedDates.includes(renderFormattedDateWithoutYear(dates[totalDates - 1])))
+        limitedDates.push(renderFormattedDateWithoutYear(dates[totalDates - 1]));
 
       return limitedDates;
     }

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 { renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { renderFormattedDate, findHowManyDaysLeft } 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/cycles-board-card.tsx

@@ -10,7 +10,7 @@ import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon }
 // icons
 import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // helpers
-import { findHowManyDaysLeft, renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICycle, TCycleGroups } from "types";
@@ -53,8 +53,6 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
 
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
-  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
-
   const cycleTotalIssues =
     cycle.backlog_issues +
     cycle.unstarted_issues +
@@ -228,8 +226,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
             <div className="flex items-center justify-between">
               {isDateValid ? (
                 <span className="text-xs text-custom-text-300">
-                  {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
-                  {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                  {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
                 </span>
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>

web/components/cycles/cycles-list-item.tsx

@@ -1,7 +1,6 @@
 import { FC, MouseEvent, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 // stores
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
@@ -13,7 +12,7 @@ import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarG
 // icons
 import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
 // helpers
-import { findHowManyDaysLeft, renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICycle, TCycleGroups } from "types";
@@ -64,8 +63,6 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
 
   const renderDate = cycle.start_date || cycle.end_date;
 
-  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
-
   const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
 
   const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
@@ -204,10 +201,8 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
             </div>
 
             {renderDate && (
-              <span className="flex w-28 items-center justify-center gap-2 text-xs text-custom-text-300">
-                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
-                {" - "}
-                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              <span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300">
+                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
               </span>
             )}
 

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

@@ -1,9 +1,8 @@
 import { useRouter } from "next/router";
-
 // ui
 import { Tooltip, ContrastIcon } from "@plane/ui";
 // helpers
-import { renderShortDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { ICycle } from "types";
 
@@ -35,7 +34,7 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
           <div className="space-y-1">
             <h5>{data?.name}</h5>
             <div>
-              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.end_date ?? "")}
+              {renderFormattedDate(data?.start_date ?? "")} to {renderFormattedDate(data?.end_date ?? "")}
             </div>
           </div>
         }