fix: Replace dateUtils with dateTimeParsing utility for date formatting across components

Author: x0sina

dashboard/src/components/charts/area-costume-chart.tsx

@@ -9,7 +9,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { EmptyState } from './empty-state'
 import { Button } from '@/components/ui/button'
 import { Clock, History, Cpu, MemoryStick } from 'lucide-react'
-import { dateUtils } from '@/utils/dateFormatter'
+import { formatOffsetDateTime } from '@/utils/dateTimeParsing'
 import { useTheme } from 'next-themes'
 import {
   buildPeriodOptions,
@@ -164,7 +164,7 @@ export function AreaCostumeChart({ nodeId, currentStats, realtimeStats }: AreaCo
             time: timeStr,
             cpu: cpuUsage,
             ram: ramUsage,
-            _period_start: dateUtils.toSystemTimezoneISO(now),
+            _period_start: formatOffsetDateTime(now),
           },
         ]
 

dashboard/src/components/common/date-picker.tsx

@@ -12,6 +12,7 @@ import { Input } from '@/components/ui/input'
 import { useTranslation } from 'react-i18next'
 import { Calendar as PersianCalendar } from '@/components/ui/persian-calendar'
 import { formatDateByLocale, formatDateShort, isDateDisabled } from '@/utils/datePickerUtils'
+import { formatOffsetDateTime, toUnixSeconds } from '@/utils/dateTimeParsing'
 import { useIsMobile } from '@/hooks/use-mobile'
 import { useTheme } from '@/components/common/theme-provider'
 import { DATE_PICKER_PREFERENCE_KEY, getDatePickerPreference, type DatePickerPreference } from '@/utils/userPreferenceStorage'
@@ -110,29 +111,6 @@ export interface DatePickerProps {
   side?: DatePickerSide
 }
 
-/**
- * Helper function to get local ISO time string with timezone offset
- */
-const getLocalISOTime = (date: Date): string => {
-  // Create a properly formatted ISO string with timezone offset
-  const tzOffset = -date.getTimezoneOffset()
-  const offsetSign = tzOffset >= 0 ? '+' : '-'
-  const pad = (num: number) => Math.abs(num).toString().padStart(2, '0')
-
-  const offsetHours = pad(Math.floor(Math.abs(tzOffset) / 60))
-  const offsetMinutes = pad(Math.abs(tzOffset) % 60)
-
-  // Get the local date/time components without timezone conversion
-  const year = date.getFullYear()
-  const month = pad(date.getMonth() + 1)
-  const day = pad(date.getDate())
-  const hours = pad(date.getHours())
-  const minutes = pad(date.getMinutes())
-  const seconds = pad(date.getSeconds())
-
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${offsetSign}${offsetHours}:${offsetMinutes}`
-}
-
 /**
  * Centralized Date Picker Component
  * Supports both single date and date range selection modes
@@ -243,7 +221,7 @@ export function DatePicker({
       }
 
       setInternalDate(selectedDate)
-      const value = useUtcTimestamp ? Math.floor(selectedDate.getTime() / 1000) : getLocalISOTime(selectedDate)
+      const value = useUtcTimestamp ? toUnixSeconds(selectedDate) : formatOffsetDateTime(selectedDate)
       onDateChange(selectedDate)
       onFieldChange?.(fieldName, value)
       setTimeout(() => {
@@ -274,7 +252,7 @@ export function DatePicker({
           newDate.setTime(now.getTime())
         }
 
-        const value = useUtcTimestamp ? Math.floor(newDate.getTime() / 1000) : getLocalISOTime(newDate)
+        const value = useUtcTimestamp ? toUnixSeconds(newDate) : formatOffsetDateTime(newDate)
         setInternalDate(newDate)
         onDateChange(newDate)
         onFieldChange?.(fieldName, value)

dashboard/src/components/dashboard/data-usage-chart.tsx

@@ -7,10 +7,9 @@ import { useGetUsersUsage, useGetUsage, Period, UserUsageStatsList, NodeUsageSta
 import { useMemo, useState, useEffect } from 'react'
 import { SearchXIcon, TrendingUp, TrendingDown } from 'lucide-react'
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../ui/select'
-import { dateUtils } from '@/utils/dateFormatter'
-import dayjs from '@/lib/dayjs'
 import { useAdmin } from '@/hooks/use-admin'
 import useDirDetection from '@/hooks/use-dir-detection'
+import { formatPeriodLabelForPeriod, formatTooltipDate, getChartQueryRangeFromShortcut, getXAxisIntervalForShortcut } from '@/utils/chart-period-utils'
 
 type PeriodOption = {
   label: string
@@ -40,48 +39,13 @@ const PERIOD_KEYS = [
   { key: 'all', period: 'day' as Period, allTime: true },
 ]
 
-const toChartPeriodStart = (periodStart: string | Date) => dateUtils.toSystemTimezoneDayjs(periodStart)
-
-const transformUsageData = (apiData: { stats: (UserUsageStat | NodeUsageStat)[] }, periodOption: PeriodOption, isNodeUsage: boolean = false, locale: string = 'en') => {
+const transformUsageData = (apiData: { stats: (UserUsageStat | NodeUsageStat)[] }, period: Period, isNodeUsage: boolean = false, locale: string = 'en') => {
   if (!apiData?.stats || !Array.isArray(apiData.stats)) {
     return []
   }
 
   return apiData.stats.map((stat: UserUsageStat | NodeUsageStat) => {
-    const d = toChartPeriodStart(stat.period_start)
-
-    let displayLabel = ''
-    if (periodOption.hours) {
-      displayLabel = d.format('HH:mm')
-    } else if (periodOption.period === 'day') {
-      // Always format day labels from period_start to keep bucket labels stable.
-      if (locale === 'fa') {
-        const localDate = new Date(d.year(), d.month(), d.date(), 0, 0, 0)
-        displayLabel = localDate.toLocaleString('fa-IR', {
-          month: '2-digit',
-          day: '2-digit',
-        })
-      } else {
-        const localDate = new Date(d.year(), d.month(), d.date(), 0, 0, 0)
-        displayLabel = localDate.toLocaleString('en-US', {
-          month: '2-digit',
-          day: '2-digit',
-        })
-      }
-    } else {
-      // For other periods (month, etc.), show date format
-      if (locale === 'fa') {
-        displayLabel = d.toDate().toLocaleString('fa-IR', {
-          month: '2-digit',
-          day: '2-digit',
-        })
-      } else {
-        displayLabel = d.toDate().toLocaleString('en-US', {
-          month: '2-digit',
-          day: '2-digit',
-        })
-      }
-    }
+    const displayLabel = formatPeriodLabelForPeriod(stat.period_start, period, locale)
 
     const traffic = isNodeUsage ? ((stat as NodeUsageStat).uplink || 0) + ((stat as NodeUsageStat).downlink || 0) : (stat as UserUsageStat).total_traffic || 0
 
@@ -104,57 +68,7 @@ function CustomBarTooltip({ active, payload, period }: TooltipProps<number, stri
   const { t, i18n } = useTranslation()
   if (!active || !payload || !payload.length) return null
   const data = payload[0].payload
-  // Use period_start if available (from transformUsageData), otherwise parse the display label
-  const d = data.period_start ? toChartPeriodStart(data.period_start) : dateUtils.toDayjs(data.date)
-
-  let formattedDate
-  if (i18n.language === 'fa') {
-    try {
-      if (period === 'day') {
-        const localDate = new Date(d.year(), d.month(), d.date(), 0, 0, 0)
-        formattedDate = localDate.toLocaleDateString('fa-IR', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-        })
-      } else {
-        formattedDate = d
-          .toDate()
-          .toLocaleString('fa-IR', {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-          })
-          .replace(',', '')
-      }
-    } catch {
-      formattedDate = period === 'day' ? d.format('YYYY/MM/DD') : d.format('YYYY/MM/DD HH:mm')
-    }
-  } else {
-    if (period === 'day') {
-      const localDate = new Date(d.year(), d.month(), d.date(), 0, 0, 0)
-      formattedDate = localDate.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-      })
-    } else {
-      formattedDate = d
-        .toDate()
-        .toLocaleString('en-US', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: false,
-        })
-        .replace(',', '')
-    }
-  }
+  const formattedDate = data.period_start ? formatTooltipDate(data.period_start, period ?? Period.hour, i18n.language) : String(data.date ?? '')
 
   const isRTL = i18n.language === 'fa'
 
@@ -208,43 +122,28 @@ const DataUsageChart = ({ admin_username }: { admin_username?: string }) => {
     })
   }, [PERIOD_OPTIONS])
 
-  const { startDate, endDate } = useMemo(() => {
-    const now = dayjs()
-    let start: dayjs.Dayjs
-    if (periodOption.allTime) {
-      start = dayjs('2000-01-01T00:00:00Z')
-    } else if (periodOption.hours) {
-      start = now.subtract(periodOption.hours, 'hour')
-    } else if (periodOption.days) {
-      const daysToSubtract = periodOption.days === 7 ? 6 : periodOption.days === 3 ? 2 : periodOption.days === 1 ? 0 : periodOption.days
-      start = now.subtract(daysToSubtract, 'day').startOf('day')
-    } else if (periodOption.months) {
-      start = now.subtract(periodOption.months, 'month').startOf('day')
-    } else {
-      start = now
-    }
-    return { startDate: dateUtils.toSystemTimezoneISO(start.toDate()), endDate: dateUtils.toSystemTimezoneISO(now.toDate()) }
-  }, [periodOption])
+  const queryRange = useMemo(() => getChartQueryRangeFromShortcut(periodOption.value, new Date(), { minuteForOneHour: true }), [periodOption.value])
+  const activePeriod = queryRange.period
 
   const shouldUseNodeUsage = is_sudo && !admin_username
 
   const nodeUsageParams = useMemo(
     () => ({
-      period: periodOption.period,
-      start: startDate,
-      end: dateUtils.toSystemTimezoneISO(dateUtils.toSystemTimezoneDayjs(endDate).endOf('day').toDate()),
+      period: activePeriod,
+      start: queryRange.startDate,
+      end: queryRange.endDate,
     }),
-    [periodOption.period, startDate, endDate],
+    [activePeriod, queryRange.startDate, queryRange.endDate],
   )
 
   const userUsageParams = useMemo(
     () => ({
       ...(admin_username ? { admin: [admin_username] } : {}),
-      period: periodOption.period,
-      start: startDate,
-      end: dateUtils.toSystemTimezoneISO(dateUtils.toSystemTimezoneDayjs(endDate).endOf('day').toDate()),
+      period: activePeriod,
+      start: queryRange.startDate,
+      end: queryRange.endDate,
     }),
-    [admin_username, periodOption.period, startDate, endDate],
+    [admin_username, activePeriod, queryRange.startDate, queryRange.endDate],
   )
 
   const { data: nodeData, isLoading: isLoadingNodes } = useGetUsage(nodeUsageParams, {
@@ -274,7 +173,7 @@ const DataUsageChart = ({ admin_username }: { admin_username?: string }) => {
     }
   }
 
-  const chartData = useMemo(() => transformUsageData({ stats: statsArr }, periodOption, shouldUseNodeUsage, i18n.language), [statsArr, periodOption, shouldUseNodeUsage, i18n.language])
+  const chartData = useMemo(() => transformUsageData({ stats: statsArr }, activePeriod, shouldUseNodeUsage, i18n.language), [statsArr, activePeriod, shouldUseNodeUsage, i18n.language])
 
   const trend = useMemo(() => {
     if (!chartData || chartData.length < 2) return null
@@ -295,25 +194,7 @@ const DataUsageChart = ({ admin_username }: { admin_username?: string }) => {
     return formatBytes(totalBytes, 2)
   }, [chartData])
 
-  const xAxisInterval = useMemo(() => {
-    // For hours (24h), show approximately 8 labels
-    if (periodOption.hours) {
-      const targetLabels = 8
-      return Math.max(1, Math.floor(chartData.length / targetLabels))
-    }
-
-    if (periodOption.months || periodOption.allTime) {
-      const targetLabels = 5
-      return Math.max(1, Math.floor(chartData.length / targetLabels))
-    }
-
-    if (periodOption.days && periodOption.days > 7) {
-      const targetLabels = periodOption.days === 30 ? 10 : 8
-      return Math.max(1, Math.floor(chartData.length / targetLabels))
-    }
-
-    return 0
-  }, [periodOption.hours, periodOption.months, periodOption.allTime, periodOption.days, chartData.length])
+  const xAxisInterval = useMemo(() => getXAxisIntervalForShortcut(periodOption.value, chartData.length, { minuteForOneHour: true }), [periodOption.value, chartData.length])
 
   return (
     <Card className="flex h-full flex-col justify-between overflow-hidden">
@@ -399,7 +280,7 @@ const DataUsageChart = ({ admin_username }: { admin_username?: string }) => {
                 tickFormatter={(value: string): string => value || ''}
               />
               <YAxis dataKey={'traffic'} tickLine={false} tickMargin={4} axisLine={false} width={40} tickFormatter={val => formatBytes(val, 0, true).toString()} tick={{ fontSize: 10 }} />
-              <ChartTooltip cursor={false} content={<CustomBarTooltip period={periodOption.period} />} />
+              <ChartTooltip cursor={false} content={<CustomBarTooltip period={activePeriod} />} />
               <Bar dataKey="traffic" radius={6} maxBarSize={48}>
                 {chartData.map((_, index: number) => (
                   <Cell key={`cell-${index}`} fill={index === activeIndex ? 'hsl(var(--muted-foreground))' : 'hsl(var(--primary))'} />

dashboard/src/components/dialogs/user-modal.tsx

@@ -26,6 +26,7 @@ import {
   type UserResponse,
   type UsersResponse,
 } from '@/service/api'
+import { formatOffsetDateTime, parseDateInput, toDisplayDate, toUnixSeconds } from '@/utils/dateTimeParsing'
 import { dateUtils, useRelativeExpiryDate } from '@/utils/dateFormatter'
 import { formatBytes, gbToBytes } from '@/utils/formatByte'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
@@ -61,29 +62,6 @@ const templateModifySchema = z.object({
   user_template_id: z.number(),
 })
 
-
-// Helper function to get local ISO time string with timezone offset
-// This is kept for backward compatibility with normalizeExpire function
-function getLocalISOTime(date: Date): string {
-  // Create a properly formatted ISO string with timezone offset
-  const tzOffset = -date.getTimezoneOffset()
-  const offsetSign = tzOffset >= 0 ? '+' : '-'
-  const pad = (num: number) => Math.abs(num).toString().padStart(2, '0')
-
-  const offsetHours = pad(Math.floor(Math.abs(tzOffset) / 60))
-  const offsetMinutes = pad(Math.abs(tzOffset) % 60)
-
-  // Get the local date/time components without timezone conversion
-  const year = date.getFullYear()
-  const month = pad(date.getMonth() + 1)
-  const day = pad(date.getDate())
-  const hours = pad(date.getHours())
-  const minutes = pad(date.getMinutes())
-  const seconds = pad(date.getSeconds())
-
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${offsetSign}${offsetHours}:${offsetMinutes}`
-}
-
 // Add this new component before the UserModal component
 const ExpiryDateField = ({
   field,
@@ -112,7 +90,7 @@ const ExpiryDateField = ({
     (date: Date | undefined) => {
       if (date) {
         // Use the same logic as centralized DatePicker
-        const value = useUtcTimestamp ? Math.floor(date.getTime() / 1000) : getLocalISOTime(date)
+        const value = useUtcTimestamp ? toUnixSeconds(date) : formatOffsetDateTime(date)
         field.onChange(value)
         handleFieldChange(fieldName, value)
       } else {
@@ -462,24 +440,24 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
       if (value === '') {
         return null
       } else {
-        // Use the same dateUtils.toDayjs logic as other components
         try {
-          const dayjsDate = dateUtils.toDayjs(value.trim())
+          const trimmedValue = value.trim()
+          const dayjsDate = parseDateInput(trimmedValue)
           if (dayjsDate.isValid()) {
-            return dayjsDate.toDate()
+            return toDisplayDate(trimmedValue)
           }
         } catch (error) {
-          // If dayjs parsing fails, return null
+          // Ignore invalid values and return null.
         }
       }
     } else if (typeof value === 'number') {
       try {
-        const dayjsDate = dateUtils.toDayjs(value)
+        const dayjsDate = parseDateInput(value)
         if (dayjsDate.isValid()) {
-          return dayjsDate.toDate()
+          return toDisplayDate(value)
         }
       } catch (error) {
-        // If dayjs parsing fails, return null
+        // Ignore invalid values and return null.
       }
     }
     return null
@@ -730,14 +708,14 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
 
     // For Date objects, convert to appropriate format
     if (expire instanceof Date) {
-      return useUtcTimestamp ? Math.floor(expire.getTime() / 1000) : getLocalISOTime(expire)
+      return useUtcTimestamp ? toUnixSeconds(expire) : formatOffsetDateTime(expire)
     }
 
-    // For strings and numbers, use the same dateUtils logic as other components
+    // For strings and numbers, normalize via centralized parser.
     try {
-      const dayjsDate = dateUtils.toDayjs(expire)
+      const dayjsDate = parseDateInput(expire)
       if (dayjsDate.isValid()) {
-        return useUtcTimestamp ? Math.floor(dayjsDate.toDate().getTime() / 1000) : getLocalISOTime(dayjsDate.toDate())
+        return useUtcTimestamp ? toUnixSeconds(expire) : formatOffsetDateTime(expire)
       }
     } catch (error) {
       // If dayjs parsing fails, return undefined