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.
This commit is contained in:
desartstudio95
2026-05-07 00:13:56 +02:00
parent 175723475a
commit 8b1baae8cc
+54 -6
View File
@@ -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",