style: unify filter UI, add custom to-from date picker, and ensure all buttons use pointer cursors

src/components/DateRangePicker.tsx

@@ -38,13 +38,41 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
     return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
   };
 
+  const formatDateForInput = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const parseLocalDate = (value: string) => {
+    if (!value) return null;
+    const [year, month, day] = value.split('-');
+    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+  };
+
+  const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newStart = parseLocalDate(e.target.value);
+    if (newStart && !isNaN(newStart.getTime())) {
+      onChange({ ...dateRange, start: newStart });
+    }
+  };
+
+  const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newEnd = parseLocalDate(e.target.value);
+    if (newEnd && !isNaN(newEnd.getTime())) {
+      newEnd.setHours(23, 59, 59, 999);
+      onChange({ ...dateRange, end: newEnd });
+    }
+  };
+
   return (
     <div className="flex flex-wrap items-center gap-3">
       {/* Date Presets Dropdown */}
       <div className="relative">
         <button 
           onClick={() => setIsPresetOpen(!isPresetOpen)}
-          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"
+          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>
@@ -54,7 +82,31 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
         {isPresetOpen && (
           <>
             <div className="fixed inset-0 z-10" onClick={() => setIsPresetOpen(false)}></div>
-            <div className="absolute right-0 mt-2 w-48 bg-dark-card border border-dark-border rounded-xl shadow-xl z-20 py-2 max-h-64 overflow-y-auto">
+            <div className="absolute right-0 mt-2 w-56 bg-dark-card border border-dark-border rounded-xl shadow-xl z-20 py-2 max-h-[32rem] overflow-y-auto">
+              <div className="px-4 pb-3 pt-1 border-b border-dark-border mb-2 flex flex-col gap-2">
+                <span className="text-xs font-bold text-dark-muted uppercase tracking-widest">Período Customizado</span>
+                <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>
+                  <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>
+                </div>
+              </div>
+              <span className="px-4 text-xs font-bold text-dark-muted uppercase tracking-widest mb-1 block">Atalhos</span>
               {PRESETS.map((preset) => (
                 <button
                   key={preset.label}
@@ -62,7 +114,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
                     onChange(preset.getRange());
                     setIsPresetOpen(false);
                   }}
-                  className="w-full text-left px-4 py-2 text-sm text-dark-muted hover:text-dark-text hover:bg-dark-input transition-colors"
+                  className="w-full text-left px-4 py-2 text-sm text-dark-muted hover:text-dark-text hover:bg-dark-input transition-colors cursor-pointer"
                 >
                   {preset.label}
                 </button>
@@ -77,7 +129,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
         <div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden">
           <button 
             onClick={onManualRefresh}
-            className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border"
+            className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border cursor-pointer"
             title="Atualizar Agora"
           >
             <RefreshCw size={16} className="text-brand-primary" />