fix timezone issues and add support for timezone user setting

resources/js/utils/time.ts

@@ -4,12 +4,19 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import isToday from 'dayjs/plugin/isToday';
 import isYesterday from 'dayjs/plugin/isYesterday';
 import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { getUserTimezone } from '@/utils/useUser';
 
 dayjs.extend(relativeTime);
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
 dayjs.extend(duration);
 dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export function getDayJsInstance() {
+    return dayjs;
+}
 
 export function formatHumanReadableDuration(duration: number): string {
     return dayjs.duration(duration, 's').format('HH[h] mm[min]');
@@ -21,14 +28,35 @@ export function calculateDifference(start: string, end: string | null) {
     }
     return dayjs(end).diff(dayjs(start), 'second');
 }
+
+/**
+ * Returns a formatted time.
+ * @param date - A UTC date time string.
+ */
 export function formatTime(date: string) {
-    return dayjs(date).utc().format('HH:mm');
+    return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm');
 }
 
+export function getLocalizedDayJs(timestamp: string | null) {
+    return dayjs.utc(timestamp).tz(getUserTimezone());
+}
+
+export function getLocalizedDateFromTimestamp(timestamp: string) {
+    return getLocalizedDayJs(timestamp).format('YYYY-MM-DD');
+}
+
+/*
+ * Returns a formatted date.
+ * @param date - date in the format of 'YYYY-MM-DD'
+ */
 export function formatDate(date: string): string {
-    return dayjs(date).utc().format('DD.MM.YYYY');
+    return dayjs(date).format('DD.MM.YYYY');
 }
 
+/*
+ * Returns a human readable date format.
+ * @param date - date in the format of 'YYYY-MM-DD'
+ */
 export function formatHumanReadableDate(date: string) {
     if (dayjs(date).isToday()) {
         return 'Today';

resources/js/utils/useUser.ts

@@ -14,4 +14,8 @@ function getCurrentOrganizationId() {
     return page.props.auth.user.current_team_id;
 }
 
-export { getCurrentOrganizationId, getCurrentUserId };
+function getUserTimezone() {
+    return page.props.auth.user.timezone;
+}
+
+export { getCurrentOrganizationId, getCurrentUserId, getUserTimezone };