url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed the date filter component

Browse Source
This commit is contained in:
Tola Leng
2025-05-29 20:10:03 +08:00
parent c17d902b9a
commit d4d4040cc8
1 changed files with 21 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/services/DateRangeFilter.tsx
+21 -32
View File
@@ -14,18 +14,17 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { format, subDays, subHours, subMonths, subWeeks, subYears } from "date-fns"; import { format } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react"; import { Calendar as CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export type DateRangeOption = '60min' | '24h' | '7d' | '30d' | '1y' | 'custom'; export type DateRangeOption = '24h' | '7d' | '30d' | '1y' | 'custom';
interface DateRangeFilterProps { interface DateRangeFilterProps {
onRangeChange: (startDate: Date, endDate: Date, option: DateRangeOption) => void; onRangeChange: (startDate: Date, endDate: Date, option: DateRangeOption) => void;
selectedOption?: DateRangeOption; selectedOption?: DateRangeOption;
} }
// Define a proper type for the date range
interface DateRange { interface DateRange {
from: Date | undefined; from: Date | undefined;
to: Date | undefined; to: Date | undefined;
@@ -45,57 +44,48 @@ export function DateRangeFilter({ onRangeChange, selectedOption = '24h' }: DateR
const now = new Date(); const now = new Date();
let startDate: Date; let startDate: Date;
let endDate: Date = new Date(now.getTime() + (5 * 60 * 1000)); // Add 5 minutes buffer to future
switch (option) { switch (option) {
case '60min':
// Ensure we're getting exactly 60 minutes ago
startDate = new Date(now.getTime() - 60 * 60 * 1000);
console.log(`60min option selected: ${startDate.toISOString()} to ${now.toISOString()}`);
break;
case '24h': case '24h':
startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000); startDate = new Date(now.getTime() - (24 * 60 * 60 * 1000));
break; break;
case '7d': case '7d':
startDate = subDays(now, 7); startDate = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));
break; break;
case '30d': case '30d':
startDate = subDays(now, 30); startDate = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));
break; break;
case '1y': case '1y':
startDate = subYears(now, 1); startDate = new Date(now.getTime() - (365 * 24 * 60 * 60 * 1000));
break; break;
case 'custom': case 'custom':
// Don't trigger onRangeChange for custom until both dates are selected
setIsCalendarOpen(true); setIsCalendarOpen(true);
return; return;
default: default:
startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000); startDate = new Date(now.getTime() - (24 * 60 * 60 * 1000)); // Default to 24 hours
} }
console.log(`DateRangeFilter: Option changed to ${option}, date range: ${startDate.toISOString()} to ${now.toISOString()}`); console.log(`DateRangeFilter: ${option} selected, range: ${startDate.toISOString()} to ${endDate.toISOString()}`);
onRangeChange(startDate, now, option); onRangeChange(startDate, endDate, option);
}; };
// Handle custom date range selection
const handleCustomRangeSelect = (range: DateRange | undefined) => { const handleCustomRangeSelect = (range: DateRange | undefined) => {
if (!range) { if (!range || !range.from || !range.to) {
return; return;
} }
setCustomDateRange(range); setCustomDateRange(range);
if (range.from && range.to) { const startOfDay = new Date(range.from);
// Ensure that we have both from and to dates before triggering the change startOfDay.setHours(0, 0, 0, 0);
const startOfDay = new Date(range.from);
startOfDay.setHours(0, 0, 0, 0); const endOfDay = new Date(range.to);
endOfDay.setHours(23, 59, 59, 999);
const endOfDay = new Date(range.to);
endOfDay.setHours(23, 59, 59, 999); console.log(`Custom range: ${startOfDay.toISOString()} to ${endOfDay.toISOString()}`);
onRangeChange(startOfDay, endOfDay, 'custom');
console.log(`DateRangeFilter: Custom range selected: ${startOfDay.toISOString()} to ${endOfDay.toISOString()}`); setIsCalendarOpen(false);
onRangeChange(startOfDay, endOfDay, 'custom');
setIsCalendarOpen(false);
}
}; };
return ( return (
@@ -105,7 +95,6 @@ export function DateRangeFilter({ onRangeChange, selectedOption = '24h' }: DateR
<SelectValue placeholder="Select time range" /> <SelectValue placeholder="Select time range" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="60min">Last 60 minutes</SelectItem>
<SelectItem value="24h">Last 24 hours</SelectItem> <SelectItem value="24h">Last 24 hours</SelectItem>
<SelectItem value="7d">Last 7 days</SelectItem> <SelectItem value="7d">Last 7 days</SelectItem>
<SelectItem value="30d">Last 30 days</SelectItem> <SelectItem value="30d">Last 30 days</SelectItem>
@@ -153,4 +142,4 @@ export function DateRangeFilter({ onRangeChange, selectedOption = '24h' }: DateR
)} )}
</div> </div>
); );
} }