add date ranges

Author: alrocar

apps/web/src/components/tools/auth0/dashboard.tsx

@@ -9,7 +9,7 @@ import { AuthMechChart, AuthMechDataPoint } from './auth-mech-chart'
 import { DailySignupsChart, DailySignupsDataPoint } from './daily-signups-chart'
 import { DailyLoginFailsChart, DailyLoginFailsDataPoint } from './daily-login-fails-chart'
 import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker'
-import { startOfDay, endOfDay } from 'date-fns'
+import { startOfDay, endOfDay, format } from 'date-fns'
 
 interface ConversionData {
     new_signups: number
@@ -79,9 +79,9 @@ export default function Auth0Dashboard() {
         async function fetchMetrics() {
             if (!token) return
 
-            const fromDate = dateRange.from.toISOString()
-            const toDate = dateRange.to.toISOString()
-            const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
+            const fromDate = format(dateRange.from, "yyyy-MM-dd HH:mm:ss")
+            const toDate = format(dateRange.to, "yyyy-MM-dd HH:mm:ss")
+            const thirtyDaysAgo = format(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), "yyyy-MM-dd HH:mm:ss")
 
             try {
                 const [

apps/web/src/components/ui/date-range-picker.tsx

@@ -34,14 +34,12 @@ export function DateRangePicker({
   className,
   initialDateRange,
 }: DateRangePickerProps) {
+  const [dateRange, setDateRange] = useState<DateRange>(initialDateRange)
   const [isOpen, setIsOpen] = useState(false)
-  const [dateRange, setDateRange] = useState<DateRange>(
-    initialDateRange || {
-      from: subDays(new Date(), 7),
-      to: new Date(),
-    }
-  )
+  const [tempDate, setTempDate] = useState<Date | null>(null)
   const [compareLastPeriod, setCompareLastPeriod] = useState(false)
+  const [fromInput, setFromInput] = useState(format(initialDateRange.from, "yyyy-MM-dd HH:mm:ss"))
+  const [toInput, setToInput] = useState(format(initialDateRange.to, "yyyy-MM-dd HH:mm:ss"))
 
   const handleRangeSelect = (range: DateRange | undefined) => {
     if (range?.from && range?.to) {
@@ -61,21 +59,27 @@ export function DateRangePicker({
   }
 
   const handleFromChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newDate = new Date(e.target.value.replace('UTC ', ''))
-    if (!isNaN(newDate.getTime())) {
-      setDateRange(prev => ({ 
-        ...prev, 
-        from: startOfDay(newDate)
+    const value = e.target.value
+    setFromInput(value)
+    
+    const date = new Date(value)
+    if (!isNaN(date.getTime())) {
+      setDateRange(prev => ({
+        ...prev,
+        from: startOfDay(date)
       }))
     }
   }
 
   const handleToChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newDate = new Date(e.target.value.replace('UTC ', ''))
-    if (!isNaN(newDate.getTime())) {
-      setDateRange(prev => ({ 
-        ...prev, 
-        to: endOfDay(newDate)
+    const value = e.target.value
+    setToInput(value)
+    
+    const date = new Date(value)
+    if (!isNaN(date.getTime())) {
+      setDateRange(prev => ({
+        ...prev,
+        to: endOfDay(date)
       }))
     }
   }
@@ -126,35 +130,41 @@ export function DateRangePicker({
               <div className="space-y-2">
                 <div>
                   <Label className="text-sm">From</Label>
-                  <div className="mt-1">
+                  <div className="flex items-center">
+                    <span className="mr-2 text-sm text-muted-foreground">UTC</span>
                     <Input
                       type="text"
-                      value={`UTC ${format(dateRange.from, "yyyy-MM-dd HH:mm:ss")}`}
+                      value={fromInput}
                       onChange={handleFromChange}
                       className="rounded-md text-sm"
+                      placeholder="YYYY-MM-DD HH:mm:ss"
                     />
                   </div>
                 </div>
 
                 <div>
                   <div className="flex justify-between items-center">
                     <Label className="text-sm">To</Label>
-                    <div className="flex-1 text-right">
-                      <Button
-                        variant="link"
-                        className="h-auto p-0 text-xs text-black hover:text-black/80"
-                        onClick={() => setDateRange({ ...dateRange, to: new Date() })}
-                      >
-                        Set to latest
-                      </Button>
-                    </div>
+                    <Button
+                      variant="link"
+                      className="h-auto p-0 text-xs text-black hover:text-black/80"
+                      onClick={() => {
+                        const now = new Date()
+                        setToInput(format(now, "yyyy-MM-dd HH:mm:ss"))
+                        setDateRange(prev => ({ ...prev, to: now }))
+                      }}
+                    >
+                      Set to latest
+                    </Button>
                   </div>
-                  <div className="mt-1">
+                  <div className="flex items-center">
+                    <span className="mr-2 text-sm text-muted-foreground">UTC</span>
                     <Input
                       type="text"
-                      value={`UTC ${format(dateRange.to, "yyyy-MM-dd HH:mm:ss")}`}
+                      value={toInput}
                       onChange={handleToChange}
                       className="rounded-md text-sm"
+                      placeholder="YYYY-MM-DD HH:mm:ss"
                     />
                   </div>
                 </div>