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:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user