Update AppImage

AppImage/components/system-logs.tsx

@@ -7,6 +7,7 @@ import { Input } from "./ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 import { ScrollArea } from "./ui/scroll-area"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet"
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
 import { Calendar } from "./ui/calendar"
@@ -20,6 +21,7 @@ import {
   XCircle,
   Database,
   Activity,
+  HardDrive,
   CalendarIcon,
   RefreshCw,
   Bell,
@@ -100,18 +102,18 @@ export function SystemLogs() {
   const [selectedLog, setSelectedLog] = useState<SystemLog | null>(null)
   const [selectedEvent, setSelectedEvent] = useState<Event | null>(null)
   const [selectedBackup, setSelectedBackup] = useState<Backup | null>(null)
-  const [selectedNotification, setSelectedNotification] = useState<Notification | null>(null) // Added
+  const [selectedNotification, setSelectedNotification] = useState<Notification | null>(null)
   const [isLogModalOpen, setIsLogModalOpen] = useState(false)
   const [isEventModalOpen, setIsEventModalOpen] = useState(false)
   const [isBackupModalOpen, setIsBackupModalOpen] = useState(false)
-  const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false) // Added
+  const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false)
 
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
   const [dateFilter, setDateFilter] = useState("now")
   const [customDays, setCustomDays] = useState("1")
   const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
-  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
 
   const getApiUrl = (endpoint: string) => {
     if (typeof window !== "undefined") {
@@ -125,11 +127,11 @@ export function SystemLogs() {
   }, [])
 
   useEffect(() => {
-    if (dateFilter !== "custom") {
+    if (dateFilter !== "now" && dateFilter !== "custom") {
-      // Reload logs when non-custom filter changes
+      // Reload logs when a predefined time range is selected
       fetchSystemLogs().then(setLogs)
     }
-  }, [dateFilter, customDays])
+  }, [dateFilter])
 
   const fetchAllData = async () => {
     try {
@@ -167,25 +169,17 @@ export function SystemLogs() {
     }
   }
 
+  const handleApplyDateRange = async () => {
+    if (dateRange?.from && dateRange?.to) {
+      setIsCalendarOpen(false)
+      const logsRes = await fetchSystemLogs()
+      setLogs(logsRes)
+    }
+  }
+
   const fetchSystemLogs = async (): Promise<SystemLog[]> => {
     try {
-      let apiUrl = getApiUrl("/api/logs")
+      const apiUrl = getApiUrl("/api/logs")
-
-      const params = new URLSearchParams()
-
-      if (dateFilter === "custom" && dateRange?.from && dateRange?.to) {
-        params.append("from_date", format(dateRange.from, "yyyy-MM-dd"))
-        params.append("to_date", format(dateRange.to, "yyyy-MM-dd"))
-      } else if (dateFilter !== "now") {
-        const daysAgo = dateFilter === "custom" ? Number.parseInt(customDays) : Number.parseInt(dateFilter)
-        params.append("since_days", daysAgo.toString())
-      }
-
-      if (params.toString()) {
-        apiUrl += `?${params.toString()}`
-      }
-
-      console.log("[v0] Fetching logs from:", apiUrl)
 
       const response = await fetch(apiUrl, {
         method: "GET",
@@ -474,23 +468,6 @@ export function SystemLogs() {
     return twoYearsAgo
   }
 
-  const handleApplyDateRange = async () => {
-    if (dateRange?.from && dateRange?.to) {
-      console.log("[v0] Applying date range filter:", dateRange)
-      setIsDatePickerOpen(false)
-      setLoading(true)
-      try {
-        const newLogs = await fetchSystemLogs()
-        setLogs(newLogs)
-        console.log("[v0] Loaded", newLogs.length, "logs for date range")
-      } catch (error) {
-        console.error("[v0] Error loading logs for date range:", error)
-      } finally {
-        setLoading(false)
-      }
-    }
-  }
-
   if (loading && logs.length === 0) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -665,7 +642,7 @@ export function SystemLogs() {
                 </Select>
 
                 {dateFilter === "custom" && (
-                  <Popover open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
+                  <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
                     <PopoverTrigger asChild>
                       <Button
                         variant="outline"
@@ -686,25 +663,23 @@ export function SystemLogs() {
                       </Button>
                     </PopoverTrigger>
                     <PopoverContent className="w-auto p-0" align="start">
-                      <div className="space-y-3">
+                      <Calendar
-                        <Calendar
+                        initialFocus
-                          initialFocus
+                        mode="range"
-                          mode="range"
+                        defaultMonth={dateRange?.from}
-                          defaultMonth={dateRange?.from}
+                        selected={dateRange}
-                          selected={dateRange}
+                        onSelect={setDateRange}
-                          onSelect={setDateRange}
+                        numberOfMonths={2}
-                          numberOfMonths={2}
+                        disabled={(date) => date > new Date() || date < getMinDate()}
-                          disabled={(date) => date > new Date() || date < getMinDate()}
+                      />
-                        />
+                      <div className="p-3 border-t border-border">
-                        <div className="px-3 pb-3 border-t border-border pt-3">
+                        <Button
-                          <Button
+                          onClick={handleApplyDateRange}
-                            onClick={handleApplyDateRange}
+                          disabled={!dateRange?.from || !dateRange?.to}
-                            disabled={!dateRange?.from || !dateRange?.to}
+                          className="w-full"
-                            className="w-full"
+                        >
-                          >
+                          Apply Filter
-                            Apply Filter
+                        </Button>
-                          </Button>
-                        </div>
                       </div>
                     </PopoverContent>
                   </Popover>
@@ -817,14 +792,12 @@ export function SystemLogs() {
                             {event.type}
                             {event.vmid && ` (VM/CT ${event.vmid})`}
                           </div>
-                          <div className="text-xs text-muted-foreground font-mono whitespace-nowrap">
+                          <div className="text-xs text-muted-foreground whitespace-nowrap">{event.duration}</div>
-                            {event.starttime}
-                          </div>
                         </div>
-                        <div className="text-sm text-foreground mb-1 line-clamp-2">{event.message}</div>
                         <div className="text-xs text-muted-foreground truncate">
                           Node: {event.node} • User: {event.user}
                         </div>
+                        <div className="text-xs text-muted-foreground mt-1">{event.starttime}</div>
                       </div>
                     </div>
                   ))}
@@ -832,7 +805,7 @@ export function SystemLogs() {
                   {events.length === 0 && (
                     <div className="text-center py-8 text-muted-foreground">
                       <Activity className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                      <p>No events found</p>
+                      <p>No recent events found</p>
                     </div>
                   )}
                 </div>
@@ -841,32 +814,64 @@ export function SystemLogs() {
 
             {/* Backups Tab */}
             <TabsContent value="backups" className="space-y-4">
-              <ScrollArea className="h-[600px] w-full rounded-md border border-border">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                <Card className="bg-card/50 border-border">
+                  <CardContent className="pt-6">
+                    <div className="text-2xl font-bold text-cyan-500">{backupStats.qemu}</div>
+                    <p className="text-xs text-muted-foreground mt-1">QEMU Backups</p>
+                  </CardContent>
+                </Card>
+                <Card className="bg-card/50 border-border">
+                  <CardContent className="pt-6">
+                    <div className="text-2xl font-bold text-orange-500">{backupStats.lxc}</div>
+                    <p className="text-xs text-muted-foreground mt-1">LXC Backups</p>
+                  </CardContent>
+                </Card>
+                <Card className="bg-card/50 border-border">
+                  <CardContent className="pt-6">
+                    <div className="text-2xl font-bold text-foreground">{formatBytes(backupStats.totalSize)}</div>
+                    <p className="text-xs text-muted-foreground mt-1">Total Size</p>
+                  </CardContent>
+                </Card>
+              </div>
+
+              <ScrollArea className="h-[500px] w-full rounded-md border border-border">
                 <div className="space-y-2 p-4">
                   {backups.map((backup, index) => (
                     <div
                       key={index}
-                      className="flex flex-col md:flex-row md:items-start space-y-2 md:space-y-0 md:space-x-4 p-3 rounded-lg bg-card/50 border border-border/50 hover:bg-card/80 transition-colors cursor-pointer"
+                      className="flex items-start space-x-4 p-3 rounded-lg bg-card/50 border border-border/50 hover:bg-card/80 transition-colors cursor-pointer"
                       onClick={() => {
                         setSelectedBackup(backup)
                         setIsBackupModalOpen(true)
                       }}
                     >
                       <div className="flex-shrink-0">
-                        <Badge variant="outline" className={getBackupTypeColor(backup.volid)}>
+                        <HardDrive className="h-5 w-5 text-blue-500" />
-                          {getBackupTypeLabel(backup.volid)}
-                        </Badge>
                       </div>
 
                       <div className="flex-1 min-w-0">
-                        <div className="flex items-center justify-between mb-1">
+                        <div className="flex items-center justify-between mb-1 gap-2 flex-wrap">
-                          <div className="text-sm font-medium text-foreground truncate">{backup.storage}</div>
+                          <div className="flex items-center gap-2 flex-wrap">
-                          <div className="text-xs text-muted-foreground font-mono whitespace-nowrap">
+                            <Badge variant="outline" className={getBackupTypeColor(backup.volid)}>
-                            {backup.created}
+                              {getBackupTypeLabel(backup.volid)}
+                            </Badge>
+                            <Badge variant="outline" className={getBackupStorageColor(backup.volid)}>
+                              {getBackupStorageLabel(backup.volid)}
+                            </Badge>
                           </div>
+                          <Badge
+                            variant="outline"
+                            className="bg-green-500/10 text-green-500 border-green-500/20 whitespace-nowrap"
+                          >
+                            {backup.size_human}
+                          </Badge>
+                        </div>
+                        <div className="text-xs text-muted-foreground mb-1 truncate">Storage: {backup.storage}</div>
+                        <div className="text-xs text-muted-foreground flex items-center">
+                          <Calendar className="h-3 w-3 mr-1 flex-shrink-0" />
+                          <span className="truncate">{backup.created}</span>
                         </div>
-                        <div className="text-sm text-foreground mb-1 line-clamp-2">{backup.volid}</div>
-                        <div className="text-xs text-muted-foreground truncate">Size: {backup.size_human}</div>
                       </div>
                     </div>
                   ))}
@@ -894,22 +899,23 @@ export function SystemLogs() {
                         setIsNotificationModalOpen(true)
                       }}
                     >
-                      <div className="flex-shrink-0">
+                      <div className="flex-shrink-0 flex items-center gap-2">
+                        {getNotificationIcon(notification.type)}
                         <Badge variant="outline" className={getNotificationTypeColor(notification.type)}>
-                          {getNotificationIcon(notification.type)}
                           {notification.type.toUpperCase()}
                         </Badge>
                       </div>
 
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center justify-between mb-1">
-                          <div className="text-sm font-medium text-foreground truncate">{notification.service}</div>
+                          <div className="text-xs text-muted-foreground font-mono whitespace-nowrap ml-2">
-                          <div className="text-xs text-muted-foreground font-mono whitespace-nowrap">
                             {notification.timestamp}
                           </div>
                         </div>
                         <div className="text-sm text-foreground mb-1 line-clamp-2">{notification.message}</div>
-                        <div className="text-xs text-muted-foreground truncate">Source: {notification.source}</div>
+                        <div className="text-xs text-muted-foreground truncate">
+                          Service: {notification.service} • Source: {notification.source}
+                        </div>
                       </div>
                     </div>
                   ))}
@@ -926,6 +932,236 @@ export function SystemLogs() {
           </Tabs>
         </CardContent>
       </Card>
+
+      <Dialog open={isLogModalOpen} onOpenChange={setIsLogModalOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              Log Details
+            </DialogTitle>
+            <DialogDescription>Complete information about this log entry</DialogDescription>
+          </DialogHeader>
+          {selectedLog && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Level</div>
+                  <Badge variant="outline" className={getLevelColor(selectedLog.level)}>
+                    {getLevelIcon(selectedLog.level)}
+                    {selectedLog.level.toUpperCase()}
+                  </Badge>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Service</div>
+                  <div className="text-sm text-foreground break-words">{selectedLog.service}</div>
+                </div>
+                <div className="sm:col-span-2">
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Timestamp</div>
+                  <div className="text-sm text-foreground font-mono break-words">{selectedLog.timestamp}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Source</div>
+                  <div className="text-sm text-foreground break-words">{selectedLog.source}</div>
+                </div>
+                {selectedLog.pid && (
+                  <div>
+                    <div className="text-sm font-medium text-muted-foreground mb-1">Process ID</div>
+                    <div className="text-sm text-foreground font-mono">{selectedLog.pid}</div>
+                  </div>
+                )}
+                {selectedLog.hostname && (
+                  <div className="sm:col-span-2">
+                    <div className="text-sm font-medium text-muted-foreground mb-1">Hostname</div>
+                    <div className="text-sm text-foreground break-words">{selectedLog.hostname}</div>
+                  </div>
+                )}
+              </div>
+              <div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">Message</div>
+                <div className="p-4 rounded-lg bg-muted/50 border border-border">
+                  <pre className="text-sm text-foreground whitespace-pre-wrap break-words">{selectedLog.message}</pre>
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isEventModalOpen} onOpenChange={setIsEventModalOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Activity className="h-5 w-5" />
+              Event Details
+            </DialogTitle>
+            <DialogDescription>Complete information about this event</DialogDescription>
+          </DialogHeader>
+          {selectedEvent && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Status</div>
+                  <Badge variant="outline" className={getLevelColor(selectedEvent.level)}>
+                    {getLevelIcon(selectedEvent.level)}
+                    {selectedEvent.status}
+                  </Badge>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Type</div>
+                  <div className="text-sm text-foreground break-words">{selectedEvent.type}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Node</div>
+                  <div className="text-sm text-foreground">{selectedEvent.node}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">User</div>
+                  <div className="text-sm text-foreground break-words">{selectedEvent.user}</div>
+                </div>
+                {selectedEvent.vmid && (
+                  <div>
+                    <div className="text-sm font-medium text-muted-foreground mb-1">VM/CT ID</div>
+                    <div className="text-sm text-foreground font-mono">{selectedEvent.vmid}</div>
+                  </div>
+                )}
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Duration</div>
+                  <div className="text-sm text-foreground">{selectedEvent.duration}</div>
+                </div>
+                <div className="sm:col-span-2">
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Start Time</div>
+                  <div className="text-sm text-foreground break-words">{selectedEvent.starttime}</div>
+                </div>
+                <div className="sm:col-span-2">
+                  <div className="text-sm font-medium text-muted-foreground mb-1">End Time</div>
+                  <div className="text-sm text-foreground break-words">{selectedEvent.endtime}</div>
+                </div>
+              </div>
+              <div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">UPID</div>
+                <div className="p-4 rounded-lg bg-muted/50 border border-border">
+                  <pre className="text-sm text-foreground font-mono whitespace-pre-wrap break-all">
+                    {selectedEvent.upid}
+                  </pre>
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isBackupModalOpen} onOpenChange={setIsBackupModalOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Database className="h-5 w-5" />
+              Backup Details
+            </DialogTitle>
+            <DialogDescription>Complete information about this backup</DialogDescription>
+          </DialogHeader>
+          {selectedBackup && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Type</div>
+                  <Badge variant="outline" className={getBackupTypeColor(selectedBackup.volid)}>
+                    {getBackupTypeLabel(selectedBackup.volid)}
+                  </Badge>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Storage Type</div>
+                  <Badge variant="outline" className={getBackupStorageColor(selectedBackup.volid)}>
+                    {getBackupStorageLabel(selectedBackup.volid)}
+                  </Badge>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Storage</div>
+                  <div className="text-sm text-foreground break-words">{selectedBackup.storage}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Size</div>
+                  <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                    {selectedBackup.size_human}
+                  </Badge>
+                </div>
+                {selectedBackup.vmid && (
+                  <div>
+                    <div className="text-sm font-medium text-muted-foreground mb-1">VM/CT ID</div>
+                    <div className="text-sm text-foreground font-mono">{selectedBackup.vmid}</div>
+                  </div>
+                )}
+                <div className="sm:col-span-2">
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Created</div>
+                  <div className="text-sm text-foreground break-words">{selectedBackup.created}</div>
+                </div>
+              </div>
+              <div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">Volume ID</div>
+                <div className="p-4 rounded-lg bg-muted/50 border border-border">
+                  <pre className="text-sm text-foreground font-mono whitespace-pre-wrap break-all">
+                    {selectedBackup.volid}
+                  </pre>
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isNotificationModalOpen} onOpenChange={setIsNotificationModalOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Bell className="h-5 w-5" />
+              Notification Details
+            </DialogTitle>
+            <DialogDescription>Complete information about this notification</DialogDescription>
+          </DialogHeader>
+          {selectedNotification && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Type</div>
+                  <Badge variant="outline" className={getNotificationTypeColor(selectedNotification.type)}>
+                    {selectedNotification.type.toUpperCase()}
+                  </Badge>
+                </div>
+                <div className="sm:col-span-2">
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Timestamp</div>
+                  <div className="text-sm text-foreground font-mono break-words">{selectedNotification.timestamp}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Service</div>
+                  <div className="text-sm text-foreground break-words">{selectedNotification.service}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Source</div>
+                  <div className="text-sm text-foreground break-words">{selectedNotification.source}</div>
+                </div>
+              </div>
+              <div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">Message</div>
+                <div className="p-4 rounded-lg bg-muted/50 border border-border max-h-[300px] overflow-y-auto">
+                  <pre className="text-sm text-foreground whitespace-pre-wrap break-words">
+                    {selectedNotification.message}
+                  </pre>
+                </div>
+              </div>
+              <div className="flex justify-end">
+                <Button
+                  variant="outline"
+                  onClick={() => handleDownloadNotificationLog(selectedNotification)}
+                  className="border-border w-full sm:w-auto"
+                >
+                  <Download className="h-4 w-4 mr-2" />
+                  Download Complete Message
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

AppImage/components/ui/calendar.tsx

@@ -22,31 +22,24 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-8 w-8 bg-background p-0 hover:bg-accent hover:text-accent-foreground border-border",
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
-        head_row: "grid grid-cols-7 gap-1",
+        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem] flex items-center justify-center",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "grid grid-cols-7 gap-1 mt-2",
+        row: "flex w-full mt-2",
-        cell: cn(
+        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",
-          "h-9 w-9 text-center text-sm p-0 relative flex items-center justify-center",
-          "[&: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-primary/20",
-          "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 rounded-r-md",
+        day_range_end: "day-range-end",
-        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 font-bold",
+        day_today: "bg-accent text-accent-foreground",
         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-primary/20 aria-selected:text-foreground rounded-none",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}