Polish user management and filters

src/components/DateRangePicker.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
-import { Calendar } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Calendar, ChevronDown } from 'lucide-react';
 import { DateRange } from '../types';
 
 interface DateRangePickerProps {
@@ -8,9 +8,22 @@ interface DateRangePickerProps {
 }
 
 export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
   const startRef = useRef<HTMLInputElement>(null);
   const endRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
   const formatDateForInput = (date: Date) => {
     // Format to local YYYY-MM-DD to avoid timezone shifts
     const year = date.getFullYear();
@@ -23,6 +36,23 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onC
     return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit', timeZone: 'America/Sao_Paulo' });
   };
 
+  const startOfDay = (date: Date) => {
+    const result = new Date(date);
+    result.setHours(0, 0, 0, 0);
+    return result;
+  };
+
+  const endOfDay = (date: Date) => {
+    const result = new Date(date);
+    result.setHours(23, 59, 59, 999);
+    return result;
+  };
+
+  const setRange = (start: Date, end: Date) => {
+    onChange({ start: startOfDay(start), end: endOfDay(end) });
+    setIsOpen(false);
+  };
+
   const parseLocalDate = (value: string) => {
     // Split "YYYY-MM-DD" and create date in local timezone to avoid UTC midnight shift
     if (!value) return null;
@@ -33,16 +63,14 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onC
   const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newStart = parseLocalDate(e.target.value);
     if (newStart && !isNaN(newStart.getTime())) {
-      onChange({ ...dateRange, start: newStart });
+      onChange({ ...dateRange, start: startOfDay(newStart) });
     }
   };
 
   const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newEnd = parseLocalDate(e.target.value);
     if (newEnd && !isNaN(newEnd.getTime())) {
-      // Set to end of day to ensure the query includes the whole day
-      newEnd.setHours(23, 59, 59, 999);
-      onChange({ ...dateRange, end: newEnd });
+      onChange({ ...dateRange, end: endOfDay(newEnd) });
     }
   };
 
@@ -60,44 +88,146 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onC
     }
   };
 
+  const today = startOfDay(new Date());
+  const shortcuts = [
+    {
+      label: 'Hoje',
+      onClick: () => setRange(today, today),
+    },
+    {
+      label: 'Ontem',
+      onClick: () => {
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        setRange(yesterday, yesterday);
+      },
+    },
+    {
+      label: 'Últimos 7 dias',
+      onClick: () => {
+        const start = new Date(today);
+        start.setDate(today.getDate() - 6);
+        setRange(start, today);
+      },
+    },
+    {
+      label: 'Últimos 30 dias',
+      onClick: () => {
+        const start = new Date(today);
+        start.setDate(today.getDate() - 29);
+        setRange(start, today);
+      },
+    },
+    {
+      label: 'Este Mês',
+      onClick: () => setRange(new Date(today.getFullYear(), today.getMonth(), 1), today),
+    },
+    {
+      label: 'Mês Passado',
+      onClick: () => setRange(
+        new Date(today.getFullYear(), today.getMonth() - 1, 1),
+        new Date(today.getFullYear(), today.getMonth(), 0)
+      ),
+    },
+    {
+      label: 'Últimos 90 dias',
+      onClick: () => {
+        const start = new Date(today);
+        start.setDate(today.getDate() - 89);
+        setRange(start, today);
+      },
+    },
+    {
+      label: 'Este Ano',
+      onClick: () => setRange(new Date(today.getFullYear(), 0, 1), today),
+    },
+    {
+      label: 'Todo o Período',
+      onClick: () => setRange(new Date(0), today),
+    },
+  ];
+
   return (
-    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-dark-border transition-colors">
-      <Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
-      <div className="flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
-        
-        {/* Start Date */}
-        <div 
-          className="relative cursor-pointer hover:text-brand-yellow transition-colors"
-          onClick={() => openPicker(startRef)}
-        >
-          {formatShortDate(dateRange.start)}
-          <input
-            ref={startRef}
-            type="date"
-            value={formatDateForInput(dateRange.start)}
-            onChange={handleStartChange}
-            className="absolute opacity-0 w-0 h-0 overflow-hidden"
-          />
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setIsOpen(open => !open)}
+        className="flex min-w-[224px] items-center justify-between gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm font-medium text-zinc-700 outline-none transition-all hover:border-zinc-300 focus:ring-2 focus:ring-brand-yellow/20 dark:border-dark-border dark:bg-dark-bg dark:text-zinc-200 dark:hover:border-dark-border"
+      >
+        <span className="flex items-center gap-2">
+          <Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
+          <span>{formatShortDate(dateRange.start)} - {formatShortDate(dateRange.end)}</span>
+        </span>
+        <ChevronDown size={14} className={`text-zinc-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-full z-50 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-2xl dark:border-dark-border dark:bg-dark-card">
+          <div className="p-4">
+            <div className="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-zinc-500 dark:text-dark-muted">
+              Período Customizado
+            </div>
+
+            <div className="space-y-2">
+              <div className="grid grid-cols-[26px_1fr] items-center gap-2">
+                <label className="text-xs font-medium text-zinc-700 dark:text-dark-text">De:</label>
+                <button
+                  type="button"
+                  onClick={() => openPicker(startRef)}
+                  className="relative h-7 rounded-lg border border-zinc-200 bg-zinc-50 px-3 text-center text-xs text-zinc-800 dark:border-dark-border dark:bg-dark-input dark:text-dark-text"
+                >
+                  {formatShortDate(dateRange.start)}
+                  <input
+                    ref={startRef}
+                    type="date"
+                    value={formatDateForInput(dateRange.start)}
+                    onChange={handleStartChange}
+                    className="absolute inset-0 h-full w-full opacity-0"
+                    tabIndex={-1}
+                  />
+                </button>
+              </div>
+
+              <div className="grid grid-cols-[26px_1fr] items-center gap-2">
+                <label className="text-xs font-medium text-zinc-700 dark:text-dark-text">Até:</label>
+                <button
+                  type="button"
+                  onClick={() => openPicker(endRef)}
+                  className="relative h-7 rounded-lg border border-zinc-200 bg-zinc-50 px-3 text-center text-xs text-zinc-800 dark:border-dark-border dark:bg-dark-input dark:text-dark-text"
+                >
+                  {formatShortDate(dateRange.end)}
+                  <input
+                    ref={endRef}
+                    type="date"
+                    value={formatDateForInput(dateRange.end)}
+                    onChange={handleEndChange}
+                    className="absolute inset-0 h-full w-full opacity-0"
+                    tabIndex={-1}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t border-zinc-100 p-4 dark:border-dark-border">
+            <div className="mb-2 text-xs font-bold uppercase tracking-[0.18em] text-zinc-500 dark:text-dark-muted">
+              Atalhos
+            </div>
+            <div className="space-y-1">
+              {shortcuts.map(shortcut => (
+                <button
+                  key={shortcut.label}
+                  type="button"
+                  onClick={shortcut.onClick}
+                  className="block w-full rounded-lg px-0 py-1.5 text-left text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-dark-muted dark:hover:text-dark-text"
+                >
+                  {shortcut.label}
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
-
-        <span className="text-zinc-400 dark:text-dark-muted font-normal text-xs">até</span>
-
-        {/* End Date */}
-        <div 
-          className="relative cursor-pointer hover:text-brand-yellow transition-colors"
-          onClick={() => openPicker(endRef)}
-        >
-          {formatShortDate(dateRange.end)}
-          <input
-            ref={endRef}
-            type="date"
-            value={formatDateForInput(dateRange.end)}
-            onChange={handleEndChange}
-            className="absolute opacity-0 w-0 h-0 overflow-hidden"
-          />
-        </div>
-
-      </div>
+      )}
     </div>
   );
-};
+};