improvement: time period dropdown added to appropriate dashboard charts.

frontend/src/components/ui/today/TodayChartPeriodSelect.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
+import type { TodayChartPeriod } from '@/components/today/chart-periods';
+
+type TodayChartPeriodSelectProps = {
+  value: TodayChartPeriod;
+  options: readonly TodayChartPeriod[];
+  onChange: (period: TodayChartPeriod) => void;
+  disabled?: boolean;
+  id?: string;
+};
+
+export function TodayChartPeriodSelect({
+  value,
+  options,
+  onChange,
+  disabled = false,
+  id,
+}: TodayChartPeriodSelectProps) {
+  const t = useTranslations('today');
+
+  const labelFor = (period: TodayChartPeriod) => {
+    switch (period) {
+      case 'month':
+        return t('periodMonth');
+      case 'year':
+        return t('periodYear');
+      default:
+        return t('periodWeek');
+    }
+  };
+
+  return (
+    <select
+      id={id}
+      value={value}
+      disabled={disabled}
+      aria-label={t('periodSelectAria')}
+      className={`${FORM_SELECT_CLASS} max-w-[7.5rem] shrink-0 py-0.5 text-xs`}
+      onChange={(event) => onChange(event.target.value as TodayChartPeriod)}
+    >
+      {options.map((period) => (
+        <option key={period} value={period}>
+          {labelFor(period)}
+        </option>
+      ))}
+    </select>
+  );
+}