Fixed realtime page.

src/components/common/DateDisplay.tsx

@@ -0,0 +1,28 @@
+import { Icon, Row, Text } from '@umami/react-zen';
+import { differenceInDays, isSameDay } from 'date-fns';
+import { useLocale } from '@/components/hooks';
+import { Icons } from '@/components/icons';
+import { formatDate } from '@/lib/date';
+
+export function DateDisplay({ startDate, endDate }) {
+  const { locale } = useLocale();
+  const isSingleDate = differenceInDays(endDate, startDate) === 0;
+
+  return (
+    <Row gap="3" alignItems="center" wrap="nowrap">
+      <Icon>
+        <Icons.Calendar />
+      </Icon>
+      <Text wrap="nowrap">
+        {isSingleDate ? (
+          <>{formatDate(startDate, 'PP', locale)}</>
+        ) : (
+          <>
+            {formatDate(startDate, 'PP', locale)}
+            {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'PP', locale)}`}
+          </>
+        )}
+      </Text>
+    </Row>
+  );
+}

src/components/common/FilterButtons.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen';
+import { ToggleGroup, ToggleGroupItem, Box } from '@umami/react-zen';
 
 export interface FilterButtonsProps {
   items: { id: string; label: string }[];
@@ -16,12 +16,18 @@ export function FilterButtons({ items, value, onChange }: FilterButtonsProps) {
   };
 
   return (
-    <ToggleGroup value={[selected]} onChange={e => handleChange(e[0])}>
-      {items.map(({ id, label }) => (
-        <ToggleGroupItem key={id} id={id}>
-          {label}
-        </ToggleGroupItem>
-      ))}
-    </ToggleGroup>
+    <Box>
+      <ToggleGroup
+        value={[selected]}
+        onChange={e => handleChange(e[0])}
+        disallowEmptySelection={true}
+      >
+        {items.map(({ id, label }) => (
+          <ToggleGroupItem key={id} id={id}>
+            {label}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    </Box>
   );
 }