Merge pull request #454 from shariquerik/timezone

fix: Timezone support in Date & DateTime fields

crm/www/crm.py

@@ -3,7 +3,7 @@
 
 from __future__ import unicode_literals
 import frappe
-from frappe.utils import cint
+from frappe.utils import add_user_info, cint, get_system_timezone
 from frappe.utils.telemetry import capture
 
 no_cache = 1
@@ -33,10 +33,25 @@ def get_boot():
             "site_name": frappe.local.site,
             "read_only_mode": frappe.flags.read_only,
             "csrf_token": frappe.sessions.get_csrf_token(),
-            "setup_complete": cint(frappe.get_system_settings("setup_complete"))
+            "setup_complete": cint(frappe.get_system_settings("setup_complete")),
+            "timezone": {
+                "system": get_system_timezone(),
+                "user": get_user_info()
+                .get(frappe.session.user, {})
+                .get("time_zone", None)
+                or get_system_timezone(),
+            }
         }
     )
 
 
+def get_user_info():
+    # get info for current user
+    user_info = frappe._dict()
+    add_user_info(frappe.session.user, user_info)
+
+    return user_info
+
+
 def get_default_route():
     return "/crm"

frappe-ui

@@ -1 +1 @@
-Subproject commit 82150c9591a36abc5dc8667ae5873651d4b2cc0d
+Subproject commit 5a4f3c8d4f12efba37b9a83a51a59b53fa758be0

frontend/package.json

@@ -14,7 +14,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.86",
+    "frappe-ui": "^0.1.89",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",

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
+                <Tooltip :text="formatDate(activity.creation)">
-                  :text="dateFormat(activity.creation, dateTooltipFormat)"
-                >
                   <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 {
+import { timeAgo, formatDate, secondsToDuration, startCase } from '@/utils'
-  timeAgo,
-  dateFormat,
-  dateTooltipFormat,
-  secondsToDuration,
-  startCase,
-} from '@/utils'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'

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 {
+import { formatDate, timeAgo, convertSize, isImage } from '@/utils'
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
-  convertSize,
-  isImage,
-} from '@/utils'
 
 const props = defineProps({
   attachments: Array,

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({

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,
 })

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({

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'
 

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, 'EEE, MMM d, yyyy | hh:mm a')"
               >
                 <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 a') }}</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'

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, 'EEE, MMM d, yyyy')">
               <div class="text-2xs">
-                {{ dateFormat(whatsapp.creation, 'hh:mm a') }}
+                {{ formatDate(whatsapp.creation, 'hh:mm a') }}
               </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'

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])

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, 'EEE, MMM d, yyyy | hh:mm a')"
           >
             <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 a') }}
               </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,

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(

frontend/src/components/SectionFields.vue

@@ -96,15 +96,9 @@
           />
           <FormControl
             v-else-if="
-              ['email', 'number', 'date', 'password', 'textarea'].includes(
+              ['email', 'number', 'password', 'textarea'].includes(field.type)
-                field.type,
-              )
             "
             class="form-control"
-            :class="{
-              '[&_input]:text-ink-gray-4':
-                field.type === 'date' && !data[field.name],
-            }"
             :type="field.type"
             :value="data[field.name]"
             :placeholder="field.placeholder"
@@ -154,6 +148,24 @@
             @change="(data) => emit('update', field.name, data)"
             :onCreate="field.create"
           />
+          <div v-else-if="field.type === 'datetime'" class="form-control">
+            <DateTimePicker
+              icon-left=""
+              :value="data[field.name]"
+              :placeholder="field.placeholder"
+              placement="left-start"
+              @change="(data) => emit('update', field.name, data)"
+            />
+          </div>
+          <div v-else-if="field.type === 'date'" class="form-control">
+            <DatePicker
+              icon-left=""
+              :value="data[field.name]"
+              :placeholder="field.placeholder"
+              placement="left-start"
+              @change="(data) => emit('update', field.name, data)"
+            />
+          </div>
           <FormControl
             v-else
             class="form-control"
@@ -190,7 +202,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { usersStore } from '@/stores/users'
-import { Tooltip } from 'frappe-ui'
+import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({

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,
+  formatDate,
-  dateTooltipFormat,
   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)),
     },
   }

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])),
         }
       }

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,
+  formatDate,
-  dateTooltipFormat,
   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])

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]),
         }
       }

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 {
+import { formatDate, timeAgo, website, formatTime } from '@/utils'
-  dateFormat,
-  dateTooltipFormat,
-  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])

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,
+  formatDate,
-  dateTooltipFormat,
   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)),
     },
   }

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,
+  formatDate,
-  dateTooltipFormat,
   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)),
     },
   }

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'
 

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,
+  formatDate,
-  dateTooltipFormat,
   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)),
     },
   }

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 {
+import { formatDate, timeAgo, website, formatNumberIntoCurrency } from '@/utils'
-  dateFormat,
-  dateTooltipFormat,
-  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])),
         }
       }

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') {

frontend/src/utils/callLog.js

@@ -1,9 +1,4 @@
-import {
+import { secondsToDuration, formatDate, timeAgo } from '@/utils'
-  secondsToDuration,
-  dateFormat,
-  dateTooltipFormat,
-  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])),
     }
   }

frontend/src/utils/index.js

@@ -1,9 +1,9 @@
 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 { useTimeAgo } from '@vueuse/core'
+import { toast, convertToUserTimezone } from 'frappe-ui'
 import { h } from 'vue'
 
 export function createToast(options) {
@@ -38,17 +38,14 @@ export function formatTime(seconds) {
   return formattedTime.trim()
 }
 
-export function dateFormat(date, format) {
+export function formatDate(date, format = 'EEE, MMM d, yyyy h:mm a') {
-  const _format = format || 'DD-MM-YYYY HH:mm:ss'
+  return convertToUserTimezone(date, format)
-  return useDateFormat(date, _format).value
 }
 
 export function timeAgo(date) {
   return useTimeAgo(date).value
 }
 
-export const dateTooltipFormat = 'ddd, MMM D, YYYY h:mm A'
-
 export function taskStatusOptions(action, data) {
   return ['Backlog', 'Todo', 'In Progress', 'Done', 'Canceled'].map(
     (status) => {