Update AppImage

AppImage/components/system-logs.tsx

@@ -113,6 +113,7 @@ export function SystemLogs() {
   const [dateFilter, setDateFilter] = useState("now")
   const [customDays, setCustomDays] = useState("1")
   const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
 
   const getApiUrl = (endpoint: string) => {
     if (typeof window !== "undefined") {
@@ -452,6 +453,14 @@ export function SystemLogs() {
     return twoYearsAgo
   }
 
+  const handleApplyDateRange = async () => {
+    if (dateRange?.from && dateRange?.to) {
+      setIsDatePickerOpen(false)
+      // Fetch logs with the selected date range
+      await fetchSystemLogs()
+    }
+  }
+
   if (loading && logs.length === 0) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -626,7 +635,7 @@ export function SystemLogs() {
                 </Select>
 
                 {dateFilter === "custom" && (
-                  <Popover>
+                  <Popover open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
                     <PopoverTrigger asChild>
                       <Button
                         variant="outline"
@@ -647,6 +656,7 @@ export function SystemLogs() {
                       </Button>
                     </PopoverTrigger>
                     <PopoverContent className="w-auto p-0" align="start">
+                      <div className="space-y-3">
                         <Calendar
                           initialFocus
                           mode="range"
@@ -656,6 +666,16 @@ export function SystemLogs() {
                           numberOfMonths={2}
                           disabled={(date) => date > new Date() || date < getMinDate()}
                         />
+                        <div className="px-3 pb-3 border-t border-border pt-3">
+                          <Button
+                            onClick={handleApplyDateRange}
+                            disabled={!dateRange?.from || !dateRange?.to}
+                            className="w-full"
+                          >
+                            Apply Filter
+                          </Button>
+                        </div>
+                      </div>
                     </PopoverContent>
                   </Popover>
                 )}

AppImage/components/ui/calendar.tsx

@@ -27,19 +27,27 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
-        head_row: "flex",
+        head_row: "grid grid-cols-7 gap-1",
-        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem] flex items-center justify-center",
-        row: "flex w-full mt-2",
+        row: "grid grid-cols-7 gap-1 mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: cn(
+          "h-9 w-9 text-center text-sm p-0 relative",
+          "[&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "[&:has([aria-selected].day-range-start)]:rounded-l-md",
+          "[&:has([aria-selected].day-range-middle)]:bg-accent/50",
+          "[&:has([aria-selected])]:bg-accent",
+          "focus-within:relative focus-within:z-20",
+        ),
         day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
-        day_range_end: "day-range-end",
+        day_range_end: "day-range-end rounded-r-md",
+        day_range_start: "day-range-start rounded-l-md",
         day_selected:
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
+        day_today: "bg-accent text-accent-foreground font-bold",
         day_outside:
           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
         day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_range_middle: "aria-selected:bg-accent/50 aria-selected:text-accent-foreground rounded-none",
         day_hidden: "invisible",
         ...classNames,
       }}