feat(frontend): resolve last day of month for date range

Author: stampaaaron

apps/frontend/package.json

@@ -23,6 +23,7 @@
     "@quassel/ui": "workspace:*",
     "@tanstack/react-query": "^5.59.20",
     "@tanstack/react-router": "^1.81.4",
+    "date-fns": "^4.1.0",
     "nanostores": "^0.11.3",
     "openapi-fetch": "^0.13.0",
     "openapi-react-query": "^0.2.4",

apps/frontend/src/components/questionnaire/PeriodForm.tsx

@@ -3,6 +3,7 @@ import { Button, Flex, MonthPicker, Stack, TextInput } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { components } from "../../api.gen";
+import { endOfMonth } from "date-fns";
 
 type FormValues = {
   title: string;
@@ -27,9 +28,17 @@ export const messages = i18n("periodForm", {
 });
 
 export function PeriodForm({ onSave, actionLabel }: PeriodFormProps) {
-  const f = useForm<FormValues>({ mode: "uncontrolled" });
   const t = useStore(messages);
 
+  const f = useForm<FormValues>({
+    mode: "uncontrolled",
+    transformValues(values) {
+      values.range[1] = endOfMonth(values.range[1]);
+
+      return values;
+    },
+  });
+
   return (
     <form onSubmit={f.onSubmit((values) => onSave(mapValues(values)))}>
       <Stack>