From c5cf1ca07a9b4e9405085bedf70fc32998a7ea40 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 28 Nov 2024 12:25:24 +0530
Subject: [PATCH] fix: use formatDate(with user timezone), formatAsTimeAgo from
 frappeui

---
 .../src/components/Activities/Activities.vue     | 16 ++++------------
 .../src/components/Activities/AttachmentArea.vue | 10 ++--------
 frontend/src/components/Activities/CallArea.vue  |  6 +++---
 .../src/components/Activities/CommentArea.vue    |  4 ++--
 frontend/src/components/Activities/EmailArea.vue |  4 ++--
 frontend/src/components/Activities/NoteArea.vue  |  4 ++--
 frontend/src/components/Activities/TaskArea.vue  |  6 +++---
 .../src/components/Activities/WhatsAppArea.vue   |  6 +++---
 .../FilesUploader/FilesUploaderArea.vue          |  4 ++--
 .../src/components/ListViews/TasksListView.vue   |  6 +++---
 frontend/src/components/SLASection.vue           |  6 +++---
 frontend/src/pages/Contact.vue                   |  5 ++---
 frontend/src/pages/Contacts.vue                  |  4 ++--
 frontend/src/pages/Deals.vue                     |  9 ++++-----
 frontend/src/pages/EmailTemplates.vue            |  4 ++--
 frontend/src/pages/Leads.vue                     | 14 ++++----------
 frontend/src/pages/MobileContact.vue             |  5 ++---
 frontend/src/pages/MobileOrganization.vue        |  7 +++----
 frontend/src/pages/Notes.vue                     |  4 ++--
 frontend/src/pages/Organization.vue              |  7 +++----
 frontend/src/pages/Organizations.vue             | 10 ++--------
 frontend/src/pages/Tasks.vue                     |  4 ++--
 frontend/src/utils/callLog.js                    |  9 ++-------
 frontend/src/utils/index.js                      | 12 ++++--------
 24 files changed, 63 insertions(+), 103 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index a7e434e9..af749119 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -204,7 +204,7 @@
               />
             </div>
             <div class="ml-auto whitespace-nowrap">
-              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+              <Tooltip :text="formatDate(activity.creation)">
                 <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
@@ -290,7 +290,7 @@
             </div>
 
             <div class="ml-auto whitespace-nowrap">
-              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+              <Tooltip :text="formatDate(activity.creation)">
                 <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
@@ -353,9 +353,7 @@
               </div>
 
               <div class="ml-auto whitespace-nowrap">
-                <Tooltip
-                  :text="dateFormat(activity.creation, dateTooltipFormat)"
-                >
+                <Tooltip :text="formatDate(activity.creation)">
                   <div class="text-sm text-ink-gray-5">
                     {{ __(timeAgo(activity.creation)) }}
                   </div>
@@ -481,13 +479,7 @@ import CommunicationArea from '@/components/CommunicationArea.vue'
 import WhatsappTemplateSelectorModal from '@/components/Modals/WhatsappTemplateSelectorModal.vue'
 import AllModals from '@/components/Activities/AllModals.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import {
-  timeAgo,
-  dateFormat,
-  dateTooltipFormat,
-  secondsToDuration,
-  startCase,
-} from '@/utils'
+import { timeAgo, formatDate, secondsToDuration, startCase } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
diff --git a/frontend/src/components/Activities/AttachmentArea.vue b/frontend/src/components/Activities/AttachmentArea.vue
index 4a956d16..52f4abb5 100644
--- a/frontend/src/components/Activities/AttachmentArea.vue
+++ b/frontend/src/components/Activities/AttachmentArea.vue
@@ -32,7 +32,7 @@
           </div>
         </div>
         <div class="flex flex-col items-end gap-2 flex-shrink-0">
-          <Tooltip :text="dateFormat(attachment.creation, dateTooltipFormat)">
+          <Tooltip :text="formatDate(attachment.creation)">
             <div class="text-sm text-ink-gray-5">
               {{ __(timeAgo(attachment.creation)) }}
             </div>
@@ -79,13 +79,7 @@ import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
 import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
 import { globalStore } from '@/stores/global'
 import { call, Tooltip } from 'frappe-ui'
-import {
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
-  convertSize,
-  isImage,
-} from '@/utils'
+import { formatDate, timeAgo, convertSize, isImage } from '@/utils'
 
 const props = defineProps({
   attachments: Array,
diff --git a/frontend/src/components/Activities/CallArea.vue b/frontend/src/components/Activities/CallArea.vue
index d76ff040..b5b23f58 100644
--- a/frontend/src/components/Activities/CallArea.vue
+++ b/frontend/src/components/Activities/CallArea.vue
@@ -17,7 +17,7 @@
         }}</span>
       </div>
       <div class="ml-auto whitespace-nowrap">
-        <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+        <Tooltip :text="formatDate(activity.creation)">
           <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
@@ -56,7 +56,7 @@
         </div>
       </div>
       <div class="flex items-center flex-wrap gap-2">
-        <Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
+        <Badge :label="formatDate(activity.creation, 'MMM d, EEEE')">
           <template #prefix>
             <CalendarIcon class="size-3" />
           </template>
@@ -97,7 +97,7 @@ import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import AudioPlayer from '@/components/Activities/AudioPlayer.vue'
 import { statusLabelMap, statusColorMap } from '@/utils/callLog.js'
-import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { Avatar, Badge, Tooltip } from 'frappe-ui'
 
 const props = defineProps({
diff --git a/frontend/src/components/Activities/CommentArea.vue b/frontend/src/components/Activities/CommentArea.vue
index a082cb0a..f4708719 100644
--- a/frontend/src/components/Activities/CommentArea.vue
+++ b/frontend/src/components/Activities/CommentArea.vue
@@ -12,7 +12,7 @@
         </span>
       </div>
       <div class="ml-auto whitespace-nowrap">
-        <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+        <Tooltip :text="formatDate(activity.creation)">
           <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
@@ -38,7 +38,7 @@
 import UserAvatar from '@/components/UserAvatar.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
 import { Tooltip } from 'frappe-ui'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate } from '@/utils'
 const props = defineProps({
   activity: Object,
 })
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
index 63869b47..40662d64 100644
--- a/frontend/src/components/Activities/EmailArea.vue
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -22,7 +22,7 @@
           variant="subtle"
           :theme="status.color"
         />
-        <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+        <Tooltip :text="formatDate(activity.creation)">
           <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
@@ -92,7 +92,7 @@ import ReplyAllIcon from '@/components/Icons/ReplyAllIcon.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
 import EmailContent from '@/components/Activities/EmailContent.vue'
 import { Badge, Tooltip } from 'frappe-ui'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate } from '@/utils'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Activities/NoteArea.vue b/frontend/src/components/Activities/NoteArea.vue
index 1b5e1ef2..7028f05a 100644
--- a/frontend/src/components/Activities/NoteArea.vue
+++ b/frontend/src/components/Activities/NoteArea.vue
@@ -41,7 +41,7 @@
           {{ getUser(note.owner).full_name }}
         </div>
       </div>
-      <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
+      <Tooltip :text="formatDate(note.modified)">
         <div class="truncate text-sm text-ink-gray-7">
           {{ __(timeAgo(note.modified)) }}
         </div>
@@ -51,7 +51,7 @@
 </template>
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate } from '@/utils'
 import { Tooltip, Dropdown, TextEditor } from 'frappe-ui'
 import { usersStore } from '@/stores/users'
 
diff --git a/frontend/src/components/Activities/TaskArea.vue b/frontend/src/components/Activities/TaskArea.vue
index 80425722..c20df9f0 100644
--- a/frontend/src/components/Activities/TaskArea.vue
+++ b/frontend/src/components/Activities/TaskArea.vue
@@ -19,11 +19,11 @@
             </div>
             <div v-if="task.due_date">
               <Tooltip
-                :text="dateFormat(task.due_date, 'ddd, MMM D, YYYY | hh:mm a')"
+                :text="formatDate(task.due_date, 'E, MMM d, yyyy | hh:mm aaa')"
               >
                 <div class="flex gap-2">
                   <CalendarIcon />
-                  <div>{{ dateFormat(task.due_date, 'D MMM, hh:mm a') }}</div>
+                  <div>{{ formatDate(task.due_date, 'd MMM, hh:mm aaa') }}</div>
                 </div>
               </Tooltip>
             </div>
@@ -94,7 +94,7 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import DotIcon from '@/components/Icons/DotIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { dateFormat, taskStatusOptions } from '@/utils'
+import { formatDate, taskStatusOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { globalStore } from '@/stores/global'
 import { Tooltip, Dropdown } from 'frappe-ui'
diff --git a/frontend/src/components/Activities/WhatsAppArea.vue b/frontend/src/components/Activities/WhatsAppArea.vue
index b706e249..009bad2d 100644
--- a/frontend/src/components/Activities/WhatsAppArea.vue
+++ b/frontend/src/components/Activities/WhatsAppArea.vue
@@ -127,9 +127,9 @@
             />
           </div>
           <div class="-mb-1 flex shrink-0 items-end gap-1 text-ink-gray-5">
-            <Tooltip :text="dateFormat(whatsapp.creation, 'ddd, MMM D, YYYY')">
+            <Tooltip :text="formatDate(whatsapp.creation, 'E, MMM d, yyyy')">
               <div class="text-2xs">
-                {{ dateFormat(whatsapp.creation, 'hh:mm a') }}
+                {{ formatDate(whatsapp.creation, 'hh:mm aaa') }}
               </div>
             </Tooltip>
             <div v-if="whatsapp.type == 'Outgoing'">
@@ -173,7 +173,7 @@ import CheckIcon from '@/components/Icons/CheckIcon.vue'
 import DoubleCheckIcon from '@/components/Icons/DoubleCheckIcon.vue'
 import DocumentIcon from '@/components/Icons/DocumentIcon.vue'
 import ReactIcon from '@/components/Icons/ReactIcon.vue'
-import { dateFormat } from '@/utils'
+import { formatDate } from '@/utils'
 import { capture } from '@/telemetry'
 import { Tooltip, Dropdown, createResource } from 'frappe-ui'
 import { ref } from 'vue'
diff --git a/frontend/src/components/FilesUploader/FilesUploaderArea.vue b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
index 0cdc24b3..473ddb35 100644
--- a/frontend/src/components/FilesUploader/FilesUploaderArea.vue
+++ b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
@@ -126,7 +126,7 @@
 import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
 import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
 import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
-import { createToast, dateFormat, convertSize } from '@/utils'
+import { createToast, formatDate, convertSize } from '@/utils'
 import { FormControl, CircularProgressBar, createResource } from 'frappe-ui'
 import { ref, onMounted } from 'vue'
 
@@ -242,7 +242,7 @@ function captureImage() {
 }
 
 function uploadViaCamera() {
-  const nowDatetime = dateFormat(new Date(), 'YYYY_MM_DD_HH_mm_ss')
+  const nowDatetime = formatDate(new Date(), 'yyyy_MM_dd_HH_mm_ss')
   let filename = `capture_${nowDatetime}.png`
   urlToFile(cameraImage.value, filename, 'image/png').then((file) => {
     addFiles([file])
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index ee137baa..e41d02f8 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -40,12 +40,12 @@
       >
         <div v-if="column.key === 'due_date'">
           <Tooltip
-            :text="item && dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')"
+            :text="item && formatDate(item, 'E, MMM d, yyyy | hh:mm aaa')"
           >
             <div class="flex items-center gap-2 truncate text-base">
               <div><CalendarIcon /></div>
               <div v-if="item" class="truncate">
-                {{ dateFormat(item, 'D MMM, hh:mm a') }}
+                {{ formatDate(item, 'd MMM, hh:mm aaa') }}
               </div>
             </div>
           </Tooltip>
@@ -167,7 +167,7 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
-import { dateFormat } from '@/utils'
+import { formatDate } from '@/utils'
 import {
   Avatar,
   ListView,
diff --git a/frontend/src/components/SLASection.vue b/frontend/src/components/SLASection.vue
index 081066ec..9f31a862 100644
--- a/frontend/src/components/SLASection.vue
+++ b/frontend/src/components/SLASection.vue
@@ -43,7 +43,7 @@
 </template>
 <script setup>
 import { Dropdown, Tooltip } from 'frappe-ui'
-import { timeAgo, dateFormat, formatTime, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate, formatTime } from '@/utils'
 import { statusesStore } from '@/stores/statuses'
 import { capture } from '@/telemetry'
 import { computed, defineModel } from 'vue'
@@ -69,7 +69,7 @@ let slaSection = computed(() => {
     if (status == 'just now') {
       status = 'In less than a minute'
     }
-    tooltipText = dateFormat(data.value.response_by, dateTooltipFormat)
+    tooltipText = formatDate(data.value.response_by)
     if (new Date(data.value.response_by) < new Date()) {
       color = 'red'
       if (status == __('In less than a minute')) {
@@ -78,7 +78,7 @@ let slaSection = computed(() => {
     }
   } else if (['Fulfilled', 'Failed'].includes(status)) {
     status = __(status) + ' in ' + formatTime(data.value.first_response_time)
-    tooltipText = dateFormat(data.value.first_responded_on, dateTooltipFormat)
+    tooltipText = formatDate(data.value.first_responded_on)
   }
 
   sections.push(
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index b96ab5b1..ec4ec256 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -214,8 +214,7 @@ import DealsListView from '@/components/ListViews/DealsListView.vue'
 import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import {
-  dateFormat,
-  dateTooltipFormat,
+  formatDate,
   timeAgo,
   formatNumberIntoCurrency,
   createToast,
@@ -628,7 +627,7 @@ function getDealRowObject(deal) {
       ...(deal.deal_owner && getUser(deal.deal_owner)),
     },
     modified: {
-      label: dateFormat(deal.modified, dateTooltipFormat),
+      label: formatDate(deal.modified),
       timeAgo: __(timeAgo(deal.modified)),
     },
   }
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index c7d4a87c..d89f288d 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -81,7 +81,7 @@ import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { organizationsStore } from '@/stores/organizations.js'
-import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
 const { getOrganization } = organizationsStore()
@@ -122,7 +122,7 @@ const rows = computed(() => {
         }
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(contact[row], dateTooltipFormat),
+          label: formatDate(contact[row]),
           timeAgo: __(timeAgo(contact[row])),
         }
       }
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 70218cc3..aaa71e82 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -287,8 +287,7 @@ import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
 import { callEnabled } from '@/composables/settings'
 import {
-  dateFormat,
-  dateTooltipFormat,
+  formatDate,
   timeAgo,
   website,
   formatNumberIntoCurrency,
@@ -418,7 +417,7 @@ function parseRows(rows) {
               : 'orange'
         if (value == 'First Response Due') {
           value = __(timeAgo(deal.response_by))
-          tooltipText = dateFormat(deal.response_by, dateTooltipFormat)
+          tooltipText = formatDate(deal.response_by)
           if (new Date(deal.response_by) < new Date()) {
             color = 'red'
           }
@@ -445,7 +444,7 @@ function parseRows(rows) {
         }))
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(deal[row], dateTooltipFormat),
+          label: formatDate(deal[row]),
           timeAgo: __(timeAgo(deal[row])),
         }
       } else if (
@@ -455,7 +454,7 @@ function parseRows(rows) {
       ) {
         let field = row == 'response_by' ? 'response_by' : 'first_responded_on'
         _rows[row] = {
-          label: deal[field] ? dateFormat(deal[field], dateTooltipFormat) : '',
+          label: deal[field] ? formatDate(deal[field]) : '',
           timeAgo: deal[row]
             ? row == 'first_response_time'
               ? formatTime(deal[row])
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index b87ba9ec..5a20eb7b 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -75,7 +75,7 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import EmailTemplatesListView from '@/components/ListViews/EmailTemplatesListView.vue'
 import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
-import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { computed, ref } from 'vue'
 
 const emailTemplatesListView = ref(null)
@@ -100,7 +100,7 @@ const rows = computed(() => {
 
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(emailTemplate[row], dateTooltipFormat),
+          label: formatDate(emailTemplate[row]),
           timeAgo: timeAgo(emailTemplate[row]),
         }
       }
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 6bd4855a..37f9e860 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -307,13 +307,7 @@ import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { callEnabled } from '@/composables/settings'
-import {
-  dateFormat,
-  dateTooltipFormat,
-  timeAgo,
-  website,
-  formatTime,
-} from '@/utils'
+import { formatDate, timeAgo, website, formatTime } from '@/utils'
 import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, computed, reactive, h } from 'vue'
@@ -435,7 +429,7 @@ function parseRows(rows) {
               : 'orange'
         if (value == 'First Response Due') {
           value = __(timeAgo(lead.response_by))
-          tooltipText = dateFormat(lead.response_by, dateTooltipFormat)
+          tooltipText = formatDate(lead.response_by)
           if (new Date(lead.response_by) < new Date()) {
             color = 'red'
           }
@@ -462,7 +456,7 @@ function parseRows(rows) {
         }))
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(lead[row], dateTooltipFormat),
+          label: formatDate(lead[row]),
           timeAgo: __(timeAgo(lead[row])),
         }
       } else if (
@@ -472,7 +466,7 @@ function parseRows(rows) {
       ) {
         let field = row == 'response_by' ? 'response_by' : 'first_responded_on'
         _rows[row] = {
-          label: lead[field] ? dateFormat(lead[field], dateTooltipFormat) : '',
+          label: lead[field] ? formatDate(lead[field]) : '',
           timeAgo: lead[row]
             ? row == 'first_response_time'
               ? formatTime(lead[row])
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 2d5bd347..601c16c6 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -187,8 +187,7 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import {
-  dateFormat,
-  dateTooltipFormat,
+  formatDate,
   timeAgo,
   formatNumberIntoCurrency,
   createToast,
@@ -606,7 +605,7 @@ function getDealRowObject(deal) {
       ...(deal.deal_owner && getUser(deal.deal_owner)),
     },
     modified: {
-      label: dateFormat(deal.modified, dateTooltipFormat),
+      label: formatDate(deal.modified),
       timeAgo: __(timeAgo(deal.modified)),
     },
   }
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index af58203f..dd81e07c 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -181,8 +181,7 @@ import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
 import {
-  dateFormat,
-  dateTooltipFormat,
+  formatDate,
   timeAgo,
   formatNumberIntoCurrency,
   createToast,
@@ -468,7 +467,7 @@ function getDealRowObject(deal) {
       ...(deal.deal_owner && getUser(deal.deal_owner)),
     },
     modified: {
-      label: dateFormat(deal.modified, dateTooltipFormat),
+      label: formatDate(deal.modified),
       timeAgo: __(timeAgo(deal.modified)),
     },
   }
@@ -489,7 +488,7 @@ function getContactRowObject(contact) {
       logo: props.organization?.organization_logo,
     },
     modified: {
-      label: dateFormat(contact.modified, dateTooltipFormat),
+      label: formatDate(contact.modified),
       timeAgo: __(timeAgo(contact.modified)),
     },
   }
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 8aabd487..58f39dec 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -65,7 +65,7 @@
               {{ getUser(note.owner).full_name }}
             </div>
           </div>
-          <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
+          <Tooltip :text="formatDate(note.modified)">
             <div class="text-sm text-ink-gray-7">
               {{ __(timeAgo(note.modified)) }}
             </div>
@@ -110,7 +110,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { usersStore } from '@/stores/users'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, formatDate } from '@/utils'
 import { TextEditor, call, Dropdown, Tooltip, ListFooter } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index bec63239..04baa9e0 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -216,8 +216,7 @@ import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
 import {
-  dateFormat,
-  dateTooltipFormat,
+  formatDate,
   timeAgo,
   formatNumberIntoCurrency,
   createToast,
@@ -503,7 +502,7 @@ function getDealRowObject(deal) {
       ...(deal.deal_owner && getUser(deal.deal_owner)),
     },
     modified: {
-      label: dateFormat(deal.modified, dateTooltipFormat),
+      label: formatDate(deal.modified),
       timeAgo: __(timeAgo(deal.modified)),
     },
   }
@@ -524,7 +523,7 @@ function getContactRowObject(contact) {
       logo: props.organization?.organization_logo,
     },
     modified: {
-      label: dateFormat(contact.modified, dateTooltipFormat),
+      label: formatDate(contact.modified),
       timeAgo: __(timeAgo(contact.modified)),
     },
   }
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index e2cddb7b..0ddadcb5 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -78,13 +78,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
-import {
-  dateFormat,
-  dateTooltipFormat,
-  timeAgo,
-  website,
-  formatNumberIntoCurrency,
-} from '@/utils'
+import { formatDate, timeAgo, website, formatNumberIntoCurrency } from '@/utils'
 import { ref, computed } from 'vue'
 
 const organizationsListView = ref(null)
@@ -123,7 +117,7 @@ const rows = computed(() => {
         )
       } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(organization[row], dateTooltipFormat),
+          label: formatDate(organization[row]),
           timeAgo: __(timeAgo(organization[row])),
         }
       }
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 468afaee..7787d864 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -205,7 +205,7 @@ import TasksListView from '@/components/ListViews/TasksListView.vue'
 import KanbanView from '@/components/Kanban/KanbanView.vue'
 import TaskModal from '@/components/Modals/TaskModal.vue'
 import { usersStore } from '@/stores/users'
-import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { Tooltip, Avatar, TextEditor, Dropdown, call } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -261,7 +261,7 @@ function parseRows(rows) {
 
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(task[row], dateTooltipFormat),
+          label: formatDate(task[row]),
           timeAgo: __(timeAgo(task[row])),
         }
       } else if (row == 'assigned_to') {
diff --git a/frontend/src/utils/callLog.js b/frontend/src/utils/callLog.js
index 9b8ad118..54bf732a 100644
--- a/frontend/src/utils/callLog.js
+++ b/frontend/src/utils/callLog.js
@@ -1,9 +1,4 @@
-import {
-  secondsToDuration,
-  dateFormat,
-  dateTooltipFormat,
-  timeAgo,
-} from '@/utils'
+import { secondsToDuration, formatDate, timeAgo } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 
@@ -52,7 +47,7 @@ export function getCallLogDetail(row, log) {
     }
   } else if (['modified', 'creation'].includes(row)) {
     return {
-      label: dateFormat(log[row], dateTooltipFormat),
+      label: formatDate(log[row]),
       timeAgo: __(timeAgo(log[row])),
     }
   }
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 77ad91ee..5cd65afc 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -1,9 +1,8 @@
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
-import { useDateFormat, useTimeAgo } from '@vueuse/core'
 import { usersStore } from '@/stores/users'
 import { gemoji } from 'gemoji'
-import { toast } from 'frappe-ui'
+import { toast, convertToUserTimezone, formatAsTimeAgo } from 'frappe-ui'
 import { h } from 'vue'
 
 export function createToast(options) {
@@ -38,17 +37,14 @@ export function formatTime(seconds) {
   return formattedTime.trim()
 }
 
-export function dateFormat(date, format) {
-  const _format = format || 'DD-MM-YYYY HH:mm:ss'
-  return useDateFormat(date, _format).value
+export function formatDate(date, format = 'E, MMM d, yyyy h:mm a') {
+  return convertToUserTimezone(date, format)
 }
 
 export function timeAgo(date) {
-  return useTimeAgo(date).value
+  return formatAsTimeAgo(date)
 }
 
-export const dateTooltipFormat = 'ddd, MMM D, YYYY h:mm A'
-
 export function taskStatusOptions(action, data) {
   return ['Backlog', 'Todo', 'In Progress', 'Done', 'Canceled'].map(
     (status) => {