From 802558510fbebb32304cb1d8c52969fd284e6abc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Thu, 7 May 2026 15:55:43 -0300
Subject: [PATCH] fix: override native browser date input format to explicitly
 show DD/MM/YY in custom period selector

---
 src/components/DateRangePicker.tsx | 56 +++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/components/DateRangePicker.tsx b/src/components/DateRangePicker.tsx
index c0b94da..39e0fca 100644
--- a/src/components/DateRangePicker.tsx
+++ b/src/components/DateRangePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Calendar, RefreshCw, ChevronDown } from 'lucide-react';
 import type { DateRange } from '../types';
 
@@ -33,6 +33,8 @@ const REFRESH_OPTIONS = [
 
 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) => {
     return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
@@ -66,6 +68,20 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
     }
   };
 
+  const openPicker = (ref: React.RefObject<HTMLInputElement | null>) => {
+    if (ref.current) {
+      try {
+        if ('showPicker' in HTMLInputElement.prototype) {
+          ref.current.showPicker();
+        } else {
+          ref.current.focus();
+        }
+      } catch (e) {
+        ref.current.focus();
+      }
+    }
+  };
+
   return (
     <div className="flex flex-wrap items-center gap-3">
       {/* Date Presets Dropdown */}
@@ -88,21 +104,35 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
                 <div className="flex flex-col gap-1.5">
                   <div className="flex items-center justify-between gap-2">
                     <span className="text-xs font-medium text-dark-text w-6">De:</span>
-                    <input 
-                      type="date" 
-                      value={formatDateForInput(dateRange.start)}
-                      onChange={handleStartChange}
-                      className="bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary w-full cursor-pointer"
-                    />
+                    <div 
+                      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>
+                      <input 
+                        ref={startRef}
+                        type="date" 
+                        value={formatDateForInput(dateRange.start)}
+                        onChange={handleStartChange}
+                        className="absolute inset-0 opacity-0 cursor-pointer"
+                      />
+                    </div>
                   </div>
                   <div className="flex items-center justify-between gap-2">
                     <span className="text-xs font-medium text-dark-text w-6">Até:</span>
-                    <input 
-                      type="date" 
-                      value={formatDateForInput(dateRange.end)}
-                      onChange={handleEndChange}
-                      className="bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary w-full cursor-pointer"
-                    />
+                    <div 
+                      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>
+                      <input 
+                        ref={endRef}
+                        type="date" 
+                        value={formatDateForInput(dateRange.end)}
+                        onChange={handleEndChange}
+                        className="absolute inset-0 opacity-0 cursor-pointer"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>