From 8b1baae8cc7a1880d2098294c7c9a81e28672fe9 Mon Sep 17 00:00:00 2001
From: desartstudio95 <desartstudiopro@gmail.com>
Date: Thu, 7 May 2026 00:13:56 +0200
Subject: [PATCH] feat(SignalHistory): Add date filtering for signals

Introduces start and end date input fields to the SignalHistory component, allowing users to filter displayed signals by date range. This improves the usability and relevance of historical signal data.
---
 src/components/SignalHistory.tsx | 60 ++++++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/components/SignalHistory.tsx b/src/components/SignalHistory.tsx
index 93938f9..e026a4b 100644
--- a/src/components/SignalHistory.tsx
+++ b/src/components/SignalHistory.tsx
@@ -8,6 +8,8 @@ import { auth, db, handleFirestoreError, OperationType } from '../lib/firebase';
 export const SignalHistory: React.FC = () => {
   const [signals, setSignals] = useState<Signal[]>([]);
   const [loading, setLoading] = useState(true);
+  const [startDate, setStartDate] = useState<string>('');
+  const [endDate, setEndDate] = useState<string>('');
 
   useEffect(() => {
     if (!auth.currentUser) return;
@@ -45,25 +47,71 @@ export const SignalHistory: React.FC = () => {
     );
   }
 
+  const filteredSignals = signals.filter(signal => {
+    if (!startDate && !endDate) return true;
+    
+    const signalDate = new Date(signal.timestamp);
+    if (startDate) {
+      const start = new Date(startDate);
+      // We parse 'YYYY-MM-DD' dynamically. new Date('YYYY-MM-DD') returns midnight UTC. But let's be careful with local timezones.
+      const [year, month, day] = startDate.split('-').map(Number);
+      const localStart = new Date(year, month - 1, day, 0, 0, 0, 0);
+      if (signalDate < localStart) return false;
+    }
+    
+    if (endDate) {
+      const [year, month, day] = endDate.split('-').map(Number);
+      const localEnd = new Date(year, month - 1, day, 23, 59, 59, 999);
+      if (signalDate > localEnd) return false;
+    }
+    
+    return true;
+  });
+
   return (
     <div className="space-y-6">
-      <header className="flex items-center justify-between">
+      <header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
         <h1 className="text-xl font-black italic tracking-tighter text-white flex items-center gap-3 uppercase">
           <Clock size={20} className="text-brand-red" />
           Histórico de Sinais
         </h1>
-        <span className="bg-brand-gray px-4 py-2 rounded-full text-zinc-400 text-sm font-bold border border-white/5">
-          {signals.length} Sinais
-        </span>
+        <div className="flex flex-col sm:flex-row gap-3 items-center">
+          <div className="flex flex-wrap sm:flex-nowrap bg-brand-gray/50 rounded-lg p-1 border border-white/5 items-center">
+            <input 
+              type="date" 
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              className="bg-transparent text-sm text-zinc-300 outline-none px-2 py-1 [color-scheme:dark]"
+            />
+            <span className="text-zinc-600 px-2 py-1">-</span>
+            <input 
+              type="date" 
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              className="bg-transparent text-sm text-zinc-300 outline-none px-2 py-1 [color-scheme:dark]"
+            />
+            {(startDate || endDate) && (
+              <button 
+                onClick={() => { setStartDate(''); setEndDate(''); }}
+                className="text-xs text-brand-red px-2 hover:bg-brand-red/10 rounded py-1 ml-1"
+              >
+                Limpar
+              </button>
+            )}
+          </div>
+          <span className="bg-brand-gray px-4 py-2 rounded-full text-zinc-400 text-sm font-bold border border-white/5 whitespace-nowrap">
+            {filteredSignals.length} Sinais
+          </span>
+        </div>
       </header>
 
       <div className="grid grid-cols-1 gap-4">
-        {signals.length === 0 ? (
+        {filteredSignals.length === 0 ? (
           <div className="glass-card p-12 text-center text-zinc-500">
             Nenhum sinal encontrado. Comece realizando um novo scan.
           </div>
         ) : (
-          signals.map((signal) => (
+          filteredSignals.map((signal) => (
             <div key={signal.id} className="glass-card p-4 flex flex-col md:flex-row md:items-center gap-6 group hover:border-white/20 transition-all">
               <div className={cn(
                 "w-12 h-12 rounded-xl flex items-center justify-center shrink-0",