chore: seminarhof customer project

apps/app/src/components/DateBar.tsx

@@ -0,0 +1,69 @@
+import { ActionIcon, Button, Group, TextInput, Tooltip } from '@pikku/mantine/core'
+import { m } from '@/i18n/messages'
+import { useLocale } from '@/i18n/config'
+
+export const todayIso = () => new Date().toISOString().slice(0, 10)
+
+export const shiftDate = (iso: string, days: number) => {
+  const d = new Date(iso + 'T00:00:00Z')
+  d.setUTCDate(d.getUTCDate() + days)
+  return d.toISOString().slice(0, 10)
+}
+
+export function DateBar({
+  date,
+  onChange,
+}: {
+  date: string
+  onChange: (next: string) => void
+}) {
+  useLocale()
+  const isToday = date === todayIso()
+  return (
+    <Group gap="xs" wrap="nowrap" align="center" data-testid="date-bar">
+      <Tooltip label={m.common_pages_staff_prev_day()}>
+        <ActionIcon
+          variant="default"
+          size="lg"
+          onClick={() => onChange(shiftDate(date, -1))}
+          aria-label={m.common_pages_staff_prev_day()}
+          data-testid="date-bar-prev"
+        >
+          ‹
+        </ActionIcon>
+      </Tooltip>
+      <TextInput
+        type="date"
+        size="sm"
+        value={date}
+        onChange={(e) => {
+          const v = e.currentTarget.value
+          if (v) onChange(v)
+        }}
+        data-testid="date-bar-input"
+        styles={{ input: { minWidth: 160 } }}
+      />
+      <Tooltip label={m.common_pages_staff_next_day()}>
+        <ActionIcon
+          variant="default"
+          size="lg"
+          onClick={() => onChange(shiftDate(date, 1))}
+          aria-label={m.common_pages_staff_next_day()}
+          data-testid="date-bar-next"
+        >
+          ›
+        </ActionIcon>
+      </Tooltip>
+      <Button
+        size="xs"
+        variant={isToday ? 'filled' : 'light'}
+        color="plum"
+        onClick={() => onChange(todayIso())}
+        disabled={isToday}
+        data-testid="date-bar-today"
+      >
+        {m.common_pages_staff_today()}
+      </Button>
+    </Group>
+  )
+}