diff --git a/src/components/DateRangePicker.tsx b/src/components/DateRangePicker.tsx index 7538905..6f55eeb 100644 --- a/src/components/DateRangePicker.tsx +++ b/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: '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: 'Ú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 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: 'Este Mês', getRange: () => { const end = new Date(); const start = new Date(end.getFullYear(), end.getMonth(), 1); return { start, end }; } }, + { label: 'Hoje', getRange: () => rangeForDay(new Date()) }, + { label: 'Ontem', getRange: () => { const d = new Date(); d.setDate(d.getDate() - 1); return rangeForDay(d); } }, + { label: 'Últimos 7 dias', getRange: () => rangeForLastDays(7) }, + { label: 'Últimos 30 dias', getRange: () => rangeForLastDays(30) }, + { 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: 'Este Ano', getRange: () => { const end = new Date(); const start = 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: 'Últimos 90 dias', getRange: () => rangeForLastDays(90) }, + { 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 = 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 = ({ dateRange, onChange, refreshInterval, setRefreshInterval, onManualRefresh }) => { const [isPresetOpen, setIsPresetOpen] = useState(false); const startRef = useRef(null); const endRef = useRef(null); - const formatShortDate = (date: Date) => { - return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' }); + const formatDisplayDate = (date: Date) => { + 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 = ({ dateRange, onChange, const handleStartChange = (e: React.ChangeEvent) => { 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) => { const newEnd = parseLocalDate(e.target.value); if (newEnd && !isNaN(newEnd.getTime())) { - newEnd.setHours(23, 59, 59, 999); - onChange({ ...dateRange, end: newEnd }); + const end = endOfDay(newEnd); + const start = dateRange.start > end ? startOfDay(end) : dateRange.start; + onChange({ start, end }); } }; @@ -91,7 +118,7 @@ const DateRangePicker: React.FC = ({ 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" > - {formatShortDate(dateRange.start)} - {formatShortDate(dateRange.end)} + {formatDisplayDate(dateRange.start)} - {formatDisplayDate(dateRange.end)} @@ -108,7 +135,7 @@ const DateRangePicker: React.FC = ({ 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)} > - {formatShortDate(dateRange.start)} + {formatDisplayDate(dateRange.start)} = ({ 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)} > - {formatShortDate(dateRange.end)} + {formatDisplayDate(dateRange.end)}