Fix date range picker presets

src/components/DateRangePicker.tsx

@@ -11,15 +11,15 @@ interface DateRangePickerProps {
 }
 
 const PRESETS = [
-  { label: 'Hoje', getRange: () => { const d = new Date(); d.setHours(0,0,0,0); return { start: d, end: new Date() }; } },
+  { label: 'Hoje', getRange: () => rangeForDay(new Date()) },
-  { label: 'Ontem', getRange: () => { const d = new Date(); d.setDate(d.getDate() - 1); d.setHours(0,0,0,0); const end = new Date(d); end.setHours(23,59,59,999); return { start: d, end }; } },
+  { label: 'Ontem', getRange: () => { const d = new Date(); d.setDate(d.getDate() - 1); return rangeForDay(d); } },
-  { label: 'Últimos 7 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); start.setHours(0,0,0,0); return { start, end }; } },
+  { label: 'Últimos 7 dias', getRange: () => rangeForLastDays(7) },
-  { label: 'Últimos 30 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 30); start.setHours(0,0,0,0); return { start, end }; } },
+  { label: 'Últimos 30 dias', getRange: () => rangeForLastDays(30) },
-  { label: 'Este Mês', getRange: () => { const end = new Date(); const start = new Date(end.getFullYear(), end.getMonth(), 1); return { start, end }; } },
+  { label: 'Este Mês', getRange: () => { const end = endOfDay(new Date()); const start = startOfDay(new Date(end.getFullYear(), end.getMonth(), 1)); return { start, end }; } },
   { label: 'Mês Passado', getRange: () => { const d = new Date(); const start = new Date(d.getFullYear(), d.getMonth() - 1, 1); const end = new Date(d.getFullYear(), d.getMonth(), 0, 23, 59, 59, 999); return { start, end }; } },
-  { label: 'Últimos 90 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 90); start.setHours(0,0,0,0); return { start, end }; } },
+  { label: 'Últimos 90 dias', getRange: () => rangeForLastDays(90) },
-  { label: 'Este Ano', getRange: () => { const end = new Date(); const start = new Date(end.getFullYear(), 0, 1); return { start, end }; } },
+  { label: 'Este Ano', getRange: () => { const end = endOfDay(new Date()); const start = startOfDay(new Date(end.getFullYear(), 0, 1)); return { start, end }; } },
-  { label: 'Todo o Período', getRange: () => { const end = new Date(); const start = new Date(2000, 0, 1); return { start, end }; } },
+  { label: 'Todo o Período', getRange: () => { const end = endOfDay(new Date()); const start = startOfDay(new Date(2000, 0, 1)); return { start, end }; } },
 ];
 
 const REFRESH_OPTIONS = [
@@ -31,13 +31,37 @@ const REFRESH_OPTIONS = [
   { label: '5m', value: 300000 },
 ];
 
+const startOfDay = (date: Date) => {
+  const nextDate = new Date(date);
+  nextDate.setHours(0, 0, 0, 0);
+  return nextDate;
+};
+
+const endOfDay = (date: Date) => {
+  const nextDate = new Date(date);
+  nextDate.setHours(23, 59, 59, 999);
+  return nextDate;
+};
+
+const rangeForDay = (date: Date) => ({
+  start: startOfDay(date),
+  end: endOfDay(date),
+});
+
+const rangeForLastDays = (days: number) => {
+  const end = endOfDay(new Date());
+  const start = startOfDay(end);
+  start.setDate(start.getDate() - Math.max(days - 1, 0));
+  return { start, end };
+};
+
 const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange, refreshInterval, setRefreshInterval, onManualRefresh }) => {
   const [isPresetOpen, setIsPresetOpen] = useState(false);
   const startRef = useRef<HTMLInputElement>(null);
   const endRef = useRef<HTMLInputElement>(null);
 
-  const formatShortDate = (date: Date) => {
+  const formatDisplayDate = (date: Date) => {
-    return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
+    return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
   };
 
   const formatDateForInput = (date: Date) => {
@@ -56,15 +80,18 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
   const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newStart = parseLocalDate(e.target.value);
     if (newStart && !isNaN(newStart.getTime())) {
-      onChange({ ...dateRange, start: newStart });
+      const start = startOfDay(newStart);
+      const end = dateRange.end < start ? endOfDay(start) : dateRange.end;
+      onChange({ start, end });
     }
   };
 
   const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newEnd = parseLocalDate(e.target.value);
     if (newEnd && !isNaN(newEnd.getTime())) {
-      newEnd.setHours(23, 59, 59, 999);
+      const end = endOfDay(newEnd);
-      onChange({ ...dateRange, end: newEnd });
+      const start = dateRange.start > end ? startOfDay(end) : dateRange.start;
+      onChange({ start, end });
     }
   };
 
@@ -91,7 +118,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
           className="flex items-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
         >
           <Calendar size={16} className="text-dark-muted shrink-0" />
-          <span>{formatShortDate(dateRange.start)} - {formatShortDate(dateRange.end)}</span>
+          <span>{formatDisplayDate(dateRange.start)} - {formatDisplayDate(dateRange.end)}</span>
           <ChevronDown size={14} className="text-dark-muted ml-1" />
         </button>
 
@@ -108,7 +135,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
                       className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
                       onClick={() => openPicker(startRef)}
                     >
-                      <span className="w-full text-center">{formatShortDate(dateRange.start)}</span>
+                      <span className="w-full text-center">{formatDisplayDate(dateRange.start)}</span>
                       <input 
                         ref={startRef}
                         type="date" 
@@ -124,7 +151,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
                       className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
                       onClick={() => openPicker(endRef)}
                     >
-                      <span className="w-full text-center">{formatShortDate(dateRange.end)}</span>
+                      <span className="w-full text-center">{formatDisplayDate(dateRange.end)}</span>
                       <input 
                         ref={endRef}
                         type="date"