refactor(date-picker, user-modal): enhance date handling and improve mobile responsiveness

Author: x0sina

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 { useIsMobile } from '@/hooks/use-mobile'
 
 export type DatePickerMode = 'single' | 'range'
 
@@ -147,6 +148,7 @@ export function DatePicker({
 }: DatePickerProps) {
   const { t, i18n } = useTranslation()
   const isPersianLocale = i18n.language === 'fa'
+  const isMobile = useIsMobile()
   const [internalOpen, setInternalOpen] = useState(false)
   const [internalDate, setInternalDate] = useState<Date | undefined>(date || undefined)
   const [internalRange, setInternalRange] = useState<DateRange | undefined>(
@@ -198,7 +200,11 @@ export function DatePicker({
         selectedDate = new Date(now)
       }
 
-      selectedDate.setHours(now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds())
+      if (internalDate && !showTime) {
+        selectedDate.setHours(internalDate.getHours(), internalDate.getMinutes(), internalDate.getSeconds(), internalDate.getMilliseconds())
+      } else {
+        selectedDate.setHours(now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds())
+      }
 
       setInternalDate(selectedDate)
       const value = useUtcTimestamp ? Math.floor(selectedDate.getTime() / 1000) : getLocalISOTime(selectedDate)
@@ -208,7 +214,7 @@ export function DatePicker({
         setIsOpen(false)
       }, 0)
     },
-    [onDateChange, onFieldChange, fieldName, useUtcTimestamp, minDate],
+    [onDateChange, onFieldChange, fieldName, useUtcTimestamp, minDate, internalDate, showTime],
   )
 
   const handleDateSelectWrapper = useCallback(
@@ -285,7 +291,7 @@ export function DatePicker({
 
   // Single date mode
   if (mode === 'single') {
-    const displayDate = internalDate || (date ? new Date(date) : null)
+    const displayDate = internalDate || (date ? new Date(date) : undefined)
     const timeValue = displayDate
       ? `${String(displayDate.getHours()).padStart(2, '0')}:${String(displayDate.getMinutes()).padStart(2, '0')}`
       : ''
@@ -330,7 +336,8 @@ export function DatePicker({
           </PopoverTrigger>
           <PopoverContent
             className="w-auto p-0"
-            align="start"
+            align="end"
+            side={isMobile ? 'bottom' : 'left'}
             onInteractOutside={() => {
               setIsOpen(false)
             }}
@@ -339,12 +346,12 @@ export function DatePicker({
             {isPersianLocale ? (
               <PersianCalendar
                 mode="single"
-                selected={displayDate || undefined}
+                selected={displayDate}
                 onSelect={handleDateSelectWrapper}
                 disabled={dateDisabled}
                 captionLayout="dropdown"
                 defaultMonth={displayDate || now}
-                startMonth={minDate || new Date(now.getFullYear(), now.getMonth(), 1)}
+                startMonth={minDate || new Date(now.getFullYear(), 0, 1)}
                 endMonth={maxDate || new Date(now.getFullYear() + 15, 11, 31)}
                 formatters={{
                   formatMonthDropdown: date => date.toLocaleString('fa-IR', { month: 'short' }),
@@ -353,12 +360,12 @@ export function DatePicker({
             ) : (
               <Calendar
                 mode="single"
-                selected={displayDate || undefined}
+                selected={displayDate}
                 onSelect={handleDateSelectWrapper}
                 disabled={dateDisabled}
                 captionLayout="dropdown"
                 defaultMonth={displayDate || now}
-                startMonth={minDate || new Date(now.getFullYear(), now.getMonth(), 1)}
+                startMonth={minDate || new Date(now.getFullYear(), 0, 1)}
                 endMonth={maxDate || new Date(now.getFullYear() + 15, 11, 31)}
                 formatters={{
                   formatMonthDropdown: date => date.toLocaleString('default', { month: 'short' }),
@@ -367,7 +374,7 @@ export function DatePicker({
             )}
             {showTime && (
               <>
-                <div className="hidden lg:flex items-center gap-1 flex-wrap border-t p-2">
+                <div dir="ltr" className="hidden lg:flex items-center gap-1 flex-wrap border-t p-2">
                   {[
                     { label: '+7d', days: 7 },
                     { label: '+1m', days: 30 },
@@ -457,7 +464,7 @@ export function DatePicker({
             )}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="end">
+        <PopoverContent className="w-auto p-0" align="start" side="bottom" sideOffset={4} collisionPadding={8}>
           {isPersianLocale ? (
             <PersianCalendar
               mode="range"

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

@@ -1,5 +1,4 @@
 import GroupsSelector from '@/components/common/groups-selector'
-
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
@@ -116,11 +115,11 @@ const ExpiryDateField = ({
       if (date) {
         // Use the same logic as centralized DatePicker
         const value = useUtcTimestamp ? Math.floor(date.getTime() / 1000) : getLocalISOTime(date)
-        field.onChange(value)
-        handleFieldChange(fieldName, value)
+          field.onChange(value)
+          handleFieldChange(fieldName, value)
       } else {
-        field.onChange('')
-        handleFieldChange(fieldName, undefined)
+          field.onChange('')
+          handleFieldChange(fieldName, undefined)
       }
     },
     [field, handleFieldChange, useUtcTimestamp, fieldName],
@@ -161,14 +160,14 @@ const ExpiryDateField = ({
     <FormItem className="flex flex-1 flex-col">
       <FormLabel className='mb-0.5'>{label}</FormLabel>
       <div className="space-y-2 lg:!mt-0">
-        <div className="flex lg:hidden items-center gap-1 flex-wrap">
+        <div dir="ltr" className="flex lg:hidden items-center gap-1 flex-wrap">
           {shortcuts.map(({ label, days }) => (
             <Button
               key={label}
               type="button"
               variant="ghost"
               size="sm"
-              className="h-5 px-1.5 text-[10px] text-muted-foreground hover:text-foreground"
+              className="h-7 px-2.5 text-xs text-muted-foreground hover:text-foreground"
               onClick={(e) => {
                 e.preventDefault()
                 e.stopPropagation()
@@ -397,9 +396,6 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
         }
       }
     } else if (typeof value === 'number') {
-      if (value <= 0) {
-        return null
-      }
       try {
         const dayjsDate = dateUtils.toDayjs(value)
         if (dayjsDate.isValid()) {
@@ -564,21 +560,14 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
         handleFieldChange('on_hold_expire_duration', defaultDuration)
       }
       // Clear expire field when switching to on_hold status
-      form.setValue('expire', '')
-      handleFieldChange('expire', undefined)
+      form.setValue('expire', undefined)
       form.clearErrors('expire')
     } else {
       // Clear on_hold fields when switching away from on_hold status
       form.setValue('on_hold_expire_duration', undefined)
       form.clearErrors('on_hold_expire_duration')
       form.setValue('on_hold_timeout', undefined)
       form.clearErrors('on_hold_timeout')
-      const currentExpire = form.getValues('expire')
-      if (currentExpire === null || currentExpire === undefined || currentExpire === '' || (typeof currentExpire === 'number' && currentExpire <= 0)) {
-        form.setValue('expire', '')
-        handleFieldChange('expire', undefined)
-        form.clearErrors('expire')
-      }
     }
   }, [status, form, t, handleFieldChange])
 
@@ -2117,4 +2106,4 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
       {/* Subscription Clients Modal */}
     </Dialog>
   )
-}
+}