refactor: standardized date format throughout the platform (#1461)

apps/app/components/core/feeds.tsx

@@ -19,7 +19,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // helpers
-import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import RemirrorRichTextEditor from "components/rich-text-editor";
@@ -187,7 +187,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
             activity.new_value && activity.new_value !== ""
               ? activity.new_value
               : activity.old_value;
-          value = renderShortNumericDateFormat(date as string);
+          value = renderShortDateWithYearFormat(date as string);
         } else if (activity.field === "description") {
           value = "description";
         } else if (activity.field === "attachment") {

apps/app/components/cycles/sidebar.tsx

@@ -35,7 +35,7 @@ import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helpe
 import {
   isDateGreaterThanToday,
   renderDateFormat,
-  renderShortDate,
+  renderShortDateWithYearFormat,
 } from "helpers/date-time.helper";
 // types
 import { ICurrentUserResponse, ICycle } from "types";
@@ -315,7 +315,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
                           <span>
-                            {renderShortDate(
+                            {renderShortDateWithYearFormat(
                               new Date(
                                 `${watch("start_date") ? watch("start_date") : cycle?.start_date}`
                               ),
@@ -366,7 +366,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           <CalendarDaysIcon className="h-3 w-3" />
 
                           <span>
-                            {renderShortDate(
+                            {renderShortDateWithYearFormat(
                               new Date(
                                 `${watch("end_date") ? watch("end_date") : cycle?.end_date}`
                               ),

apps/app/components/inbox/inbox-issue-card.tsx

@@ -14,7 +14,7 @@ import {
   XCircleIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import type { IInboxIssue } from "types";
 // constants
@@ -72,12 +72,12 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               </div>
             </Tooltip>
             <Tooltip
-              tooltipHeading="Created at"
+              tooltipHeading="Created on"
-              tooltipContent={`${renderShortNumericDateFormat(issue.created_at ?? "")}`}
+              tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
             >
               <div className="flex items-center gap-1 rounded border border-brand-base shadow-sm text-xs px-2 py-[0.19rem] text-brand-secondary">
                 <CalendarDaysIcon className="h-3.5 w-3.5" />
-                <span>{renderShortNumericDateFormat(issue.created_at ?? "")}</span>
+                <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
               </div>
             </Tooltip>
           </div>

apps/app/components/inbox/inbox-main-content.tsx

@@ -33,7 +33,7 @@ import {
   XCircleIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import type { IInboxIssue, IIssue } from "types";
 // fetch-keys
@@ -252,13 +252,17 @@ export const InboxMainContent: React.FC = () => {
                   {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
                     <p>
                       This issue was snoozed till{" "}
-                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      {renderShortDateWithYearFormat(
+                        issueDetails.issue_inbox[0].snoozed_till ?? ""
+                      )}
                       .
                     </p>
                   ) : (
                     <p>
                       This issue has been snoozed till{" "}
-                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      {renderShortDateWithYearFormat(
+                        issueDetails.issue_inbox[0].snoozed_till ?? ""
+                      )}
                       .
                     </p>
                   )}

apps/app/components/issues/activity.tsx

@@ -26,7 +26,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // helpers
-import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import { ICurrentUserResponse, IIssueComment, IIssueLabels } from "types";
@@ -299,7 +299,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
               activityItem.new_value && activityItem.new_value !== ""
                 ? activityItem.new_value
                 : activityItem.old_value;
-            value = renderShortNumericDateFormat(date as string);
+            value = renderShortDateWithYearFormat(date as string);
           } else if (activityItem.field === "description") {
             value = "description";
           } else if (activityItem.field === "attachment") {

apps/app/components/issues/select/date.tsx

@@ -5,7 +5,7 @@ import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 type Props = {
   value: string | null;
@@ -20,7 +20,7 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
           <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
             {value ? (
               <>
-                <span className="text-brand-base">{value}</span>
+                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>

apps/app/components/issues/view-select/due-date.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 // ui
 import { CustomDatePicker, Tooltip } from "components/ui";
 // helpers
-import { findHowManyDaysLeft } from "helpers/date-time.helper";
+import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // services
 import trackEventServices from "services/track-event.service";
 // types
@@ -32,7 +32,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   return (
     <Tooltip
       tooltipHeading="Due Date"
-      tooltipContent={issue.target_date ?? "N/A"}
+      tooltipContent={
+        issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"
+      }
       position={tooltipPosition}
     >
       <div

apps/app/components/modules/sidebar.tsx

@@ -34,7 +34,7 @@ import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
 import { ExclamationIcon } from "components/icons";
 import { LinkIcon } from "@heroicons/react/20/solid";
 // helpers
-import { renderDateFormat, renderShortDate } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICurrentUserResponse, IIssue, IModule, ModuleLink } from "types";
@@ -228,7 +228,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
                           <span>
-                            {renderShortDate(new Date(`${module.start_date}`), "Start date")}
+                            {renderShortDateWithYearFormat(
+                              new Date(`${module.start_date}`),
+                              "Start date"
+                            )}
                           </span>
                         </Popover.Button>
 
@@ -279,7 +282,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           <CalendarDaysIcon className="h-3 w-3 " />
 
                           <span>
-                            {renderShortDate(new Date(`${module?.target_date}`), "End date")}
+                            {renderShortDateWithYearFormat(
+                              new Date(`${module?.target_date}`),
+                              "End date"
+                            )}
                           </span>
                         </Popover.Button>
 

apps/app/components/project/single-project-card.tsx

@@ -22,7 +22,7 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import type { IFavoriteProject, IProject } from "types";
@@ -202,13 +202,13 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
             </Link>
             <div className="flex h-full items-end justify-between">
               <Tooltip
-                tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
+                tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
                 position="bottom"
                 theme="dark"
               >
                 <div className="flex cursor-default items-center gap-1.5 text-xs">
                   <CalendarDaysIcon className="h-4 w-4" />
-                  {renderShortNumericDateFormat(project.created_at)}
+                  {renderShortDateWithYearFormat(project.created_at)}
                 </div>
               </Tooltip>
               {hasJoined ? (

apps/app/components/ui/date.tsx

@@ -5,7 +5,7 @@ import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 type Props = {
   value: string | null;
@@ -21,7 +21,7 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
           <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
             {value ? (
               <>
-                <span className="text-brand-base">{value}</span>
+                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>

apps/app/components/ui/datepicker.tsx

@@ -38,9 +38,9 @@ export const CustomDatePicker: React.FC<Props> = ({
     }}
     className={`${
       renderAs === "input"
-        ? "block px-3 py-2 text-sm focus:outline-none"
+        ? "block px-2 py-2 text-sm focus:outline-none"
         : renderAs === "button"
-        ? `px-3 py-1 text-xs shadow-sm ${
+        ? `px-2 py-1 text-xs shadow-sm ${
             disabled ? "" : "hover:bg-brand-surface-2"
           } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
         : ""
@@ -49,7 +49,7 @@ export const CustomDatePicker: React.FC<Props> = ({
     } ${
       noBorder ? "" : "border border-brand-base"
     } w-full rounded-md bg-transparent caret-transparent ${className}`}
-    dateFormat="dd-MM-yyyy"
+    dateFormat="MMM dd, yyyy"
     isClearable={isClearable}
     disabled={disabled}
   />

apps/app/components/views/single-view-item.tsx

@@ -18,7 +18,7 @@ import { VIEWS_LIST } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
 // helpers
 import { truncateText } from "helpers/string.helper";
-import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, renderShortTime } from "helpers/date-time.helper";
 
 type Props = {
   view: IView;
@@ -107,7 +107,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                   <Tooltip
                     tooltipContent={`Last updated at ${renderShortTime(
                       view.updated_at
-                    )} ${renderShortDate(view.updated_at)}`}
+                    )} ${renderShortDateWithYearFormat(view.updated_at)}`}
                   >
                     <p className="text-sm text-brand-secondary">
                       {renderShortTime(view.updated_at)}

apps/app/components/workspace/activity-graph.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 // ui
 import { Tooltip } from "components/ui";
 // helpers
-import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IUserActivity } from "types";
 // constants
@@ -109,7 +109,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                   key={`${date}-${index}`}
                   tooltipContent={`${
                     isActive ? isActive.activity_count : 0
-                  } activities on ${renderShortNumericDateFormat(date)}`}
+                  } activities on ${renderShortDateWithYearFormat(date)}`}
                   theme="dark"
                 >
                   <div

apps/app/helpers/date-time.helper.ts

@@ -114,7 +114,7 @@ export const getDateRangeStatus = (
   }
 };
 
-export const renderShortDateWithYearFormat = (date: string | Date) => {
+export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {
   if (!date || date === "") return null;
 
   date = new Date(date);
@@ -136,7 +136,8 @@ export const renderShortDateWithYearFormat = (date: string | Date) => {
   const day = date.getDate();
   const month = months[date.getMonth()];
   const year = date.getFullYear();
-  return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`;
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : ` ${month} ${day}, ${year}`;
 };
 
 export const renderShortDate = (date: string | Date, placeholder?: string) => {