apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-31 19:45:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: Refactor connector popup to include new components for active and all connectors, enhance indexing configuration view, and improve date range selection functionality.

Browse source
This commit is contained in:
Anish Sarkar 2025-12-30 20:07:15 +05:30
parent 2898192ac4
commit 32b4a09c0e
11 changed files with 1298 additions and 930 deletions
Download patch file Download diff file Expand all files Collapse all files

140
surfsense_web/components/assistant-ui/connector-popup/date-range-selector.tsx Normal file
View file

@ -0,0 +1,140 @@
"use client";
import { format, subDays, subYears } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import type { FC } from "react";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
interface DateRangeSelectorProps {
startDate: Date | undefined;
endDate: Date | undefined;
onStartDateChange: (date: Date | undefined) => void;
onEndDateChange: (date: Date | undefined) => void;
}
export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
startDate,
endDate,
onStartDateChange,
onEndDateChange,
}) => {
const handleLast30Days = () => {
const today = new Date();
onStartDateChange(subDays(today, 30));
onEndDateChange(today);
};
const handleLastYear = () => {
const today = new Date();
onStartDateChange(subYears(today, 1));
onEndDateChange(today);
};
const handleClearDates = () => {
onStartDateChange(undefined);
onEndDateChange(undefined);
};
return (
<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
<h3 className="font-medium mb-4">Select Date Range</h3>
<p className="text-sm text-muted-foreground mb-6">
Choose how far back you want to sync your data. You can always re-index later with different dates.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{/* Start Date */}
<div className="space-y-2">
<Label htmlFor="start-date">Start Date</Label>
<Popover>
<PopoverTrigger asChild>
<Button
id="start-date"
variant="outline"
className={cn(
"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
!startDate && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{startDate ? format(startDate, "PPP") : "Default (1 year ago)"}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 z-[100]" align="start">
<Calendar
mode="single"
selected={startDate}
onSelect={onStartDateChange}
disabled={(date) => date > new Date()}
/>
</PopoverContent>
</Popover>
</div>
{/* End Date */}
<div className="space-y-2">
<Label htmlFor="end-date">End Date</Label>
<Popover>
<PopoverTrigger asChild>
<Button
id="end-date"
variant="outline"
className={cn(
"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
!endDate && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{endDate ? format(endDate, "PPP") : "Default (Today)"}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 z-[100]" align="start">
<Calendar
mode="single"
selected={endDate}
onSelect={onEndDateChange}
disabled={(date) => date > new Date() || (startDate ? date < startDate : false)}
/>
</PopoverContent>
</Popover>
</div>
</div>
{/* Quick date range buttons */}
<div className="flex flex-wrap gap-2 mt-4">
<Button
type="button"
variant="outline"
size="sm"
onClick={handleClearDates}
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
>
Clear Dates
</Button>
<Button
type="button"
variant="outline"
size="sm"
onClick={handleLast30Days}
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
>
Last 30 Days
</Button>
<Button
type="button"
variant="outline"
size="sm"
onClick={handleLastYear}
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
>
Last Year
</Button>
</div>
</div>
);
};