feat: added shortcuts for date picking in user modal

Author: x0sina

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

@@ -199,14 +199,8 @@ export function DatePicker({
         selectedDate = new Date(now)
       }
 
-      // Set time based on whether it's today
-      if (selectedDateOnly.getTime() === today.getTime()) {
-        // Set to end of day if today
-        selectedDate.setHours(23, 59, 59)
-      } else {
-        // Set current time for future dates
-        selectedDate.setHours(now.getHours(), now.getMinutes())
-      }
+      // Always use current time (not end of day)
+      selectedDate.setHours(now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds())
 
       setInternalDate(selectedDate)
       const value = useUtcTimestamp ? Math.floor(selectedDate.getTime() / 1000) : getLocalISOTime(selectedDate)
@@ -368,15 +362,49 @@ export function DatePicker({
               />
             )}
             {showTime && (
-              <div className="flex items-center gap-4 border-t p-3">
-                <Input
-                  type="time"
-                  value={timeValue}
-                  onChange={handleTimeChange}
-                  className="w-full"
-                  dir="ltr"
-                />
-              </div>
+              <>
+                <div className="hidden lg:flex items-center gap-1.5 flex-wrap border-t p-3">
+                  {[
+                    { label: '7d', days: 7 },
+                    { label: '30d', days: 30 },
+                    { label: '60d', days: 60 },
+                    { label: '90d', days: 90 },
+                    { label: '1y', days: 365 },
+                  ].map(({ label, days }) => {
+                    const handleShortcut = () => {
+                      const targetDate = new Date(now)
+                      targetDate.setDate(now.getDate() + days)
+                      // Use current time instead of end of day
+                      handleDateSelect(targetDate)
+                    }
+                    return (
+                      <Button
+                        key={label}
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2.5 text-xs text-muted-foreground hover:text-foreground"
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          handleShortcut()
+                        }}
+                      >
+                        {label}
+                      </Button>
+                    )
+                  })}
+                </div>
+                <div className="flex items-center gap-4 border-t p-3">
+                  <Input
+                    type="time"
+                    value={timeValue}
+                    onChange={handleTimeChange}
+                    className="w-full"
+                    dir="ltr"
+                  />
+                </div>
+              </>
             )}
           </PopoverContent>
         </Popover>

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

@@ -131,34 +131,73 @@ const ExpiryDateField = ({
     [field, handleFieldChange, startTransition, useUtcTimestamp, fieldName],
   )
 
+  const handleShortcut = React.useCallback(
+    (days: number) => {
+      const now = new Date()
+      const targetDate = new Date(now)
+      targetDate.setDate(now.getDate() + days)
+      // Use current time instead of end of day
+      handleDateChange(targetDate)
+    },
+    [handleDateChange],
+  )
+
   const now = new Date()
   const maxDate = new Date(now.getFullYear() + 15, 11, 31)
 
+  const shortcuts = [
+    { label: '7d', days: 7 },
+    { label: '1m', days: 30 },
+    { label: '2m', days: 60 },
+    { label: '3m', days: 90 },
+    { label: '1y', days: 365 },
+  ]
+
   return (
     <FormItem className="flex flex-1 flex-col">
       <FormLabel className='mb-0.5'>{label}</FormLabel>
-      <div className="relative">
-        <DatePicker
-          mode="single"
-          date={displayDate}
-          onDateChange={handleDateChange}
-          showTime={true}
-          useUtcTimestamp={useUtcTimestamp}
-          placeholder={t('userDialog.expireDate', { defaultValue: 'Expire date' })}
-          minDate={now}
-          maxDate={maxDate}
-          open={calendarOpen}
-          onOpenChange={setCalendarOpen}
-          fieldName={fieldName}
-          onFieldChange={handleFieldChange}
-        />
-        {expireInfo && (
-          <p className={cn('absolute top-full text-end right-0 mt-1 whitespace-nowrap text-xs text-muted-foreground', !expireInfo.time && 'hidden', dir === 'rtl' ? 'right-0' : 'left-0')}>
-            {expireInfo.time !== '0' && expireInfo.time !== '0s'
-              ? t('expires', { time: expireInfo.time, defaultValue: 'Expires in {{time}}' })
-              : t('expired', { time: expireInfo.time, defaultValue: 'Expired in {{time}}' })}
-          </p>
-        )}
+      <div className="space-y-2">
+        <div className="flex lg:hidden items-center gap-1.5 flex-wrap">
+          {shortcuts.map(({ label, days }) => (
+            <Button
+              key={label}
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2.5 text-xs text-muted-foreground hover:text-foreground"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                handleShortcut(days)
+              }}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+        <div className="relative">
+          <DatePicker
+            mode="single"
+            date={displayDate}
+            onDateChange={handleDateChange}
+            showTime={true}
+            useUtcTimestamp={useUtcTimestamp}
+            placeholder={t('userDialog.expireDate', { defaultValue: 'Expire date' })}
+            minDate={now}
+            maxDate={maxDate}
+            open={calendarOpen}
+            onOpenChange={setCalendarOpen}
+            fieldName={fieldName}
+            onFieldChange={handleFieldChange}
+          />
+          {expireInfo && (
+            <p className={cn('absolute top-full text-end right-0 mt-1 whitespace-nowrap text-xs text-muted-foreground', !expireInfo.time && 'hidden', dir === 'rtl' ? 'right-0' : 'left-0')}>
+              {expireInfo.time !== '0' && expireInfo.time !== '0s'
+                ? t('expires', { time: expireInfo.time, defaultValue: 'Expires in {{time}}' })
+                : t('expired', { time: expireInfo.time, defaultValue: 'Expired in {{time}}' })}
+            </p>
+          )}
+        </div>
       </div>
       <FormMessage />
     </FormItem>