feat: add first day of week user setting (#1249)

* feat: add first day of week user setting

* fix: add missing migrations

* fix: format and test issues

* fix: deepsource issue

* refactor: rename first-day-of-week procedure

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_first-day-of-week.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Button, Group, Radio, Stack } from "@mantine/core";
+import dayjs from "dayjs";
+import localeData from "dayjs/plugin/localeData";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
+
+dayjs.extend(localeData);
+
+interface FirstDayOfWeekProps {
+  user: RouterOutputs["user"]["getById"];
+}
+
+const weekDays = dayjs.weekdays(false);
+
+export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.changeFirstDayOfWeek.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync(`/manage/users/${user.id}`);
+    },
+    onSuccess(_, variables) {
+      form.setInitialValues({
+        firstDayOfWeek: variables.firstDayOfWeek,
+      });
+      showSuccessNotification({
+        message: t("user.action.changeFirstDayOfWeek.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: t("user.action.changeFirstDayOfWeek.notification.error.message"),
+      });
+    },
+  });
+  const form = useZodForm(validation.user.firstDayOfWeek, {
+    initialValues: {
+      firstDayOfWeek: user.firstDayOfWeek,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate({
+      id: user.id,
+      ...values,
+    });
+  };
+
+  const inputProps = form.getInputProps("firstDayOfWeek");
+  const onChange = inputProps.onChange as (value: number) => void;
+  const value = (inputProps.value as number).toString();
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="md">
+        <Radio.Group {...inputProps} value={value} onChange={(value) => onChange(parseInt(value))}>
+          <Group mt="xs">
+            <Radio value="1" label={weekDays[1]} />
+            <Radio value="6" label={weekDays[6]} />
+            <Radio value="0" label={weekDays[0]} />
+          </Group>
+        </Radio.Group>
+
+        <Group justify="end">
+          <Button type="submit" color="teal" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = z.infer<typeof validation.user.firstDayOfWeek>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -13,6 +13,7 @@ import { createMetaTitle } from "~/metadata";
 import { canAccessUserEditPage } from "../access";
 import { ChangeHomeBoardForm } from "./_components/_change-home-board";
 import { DeleteUserButton } from "./_components/_delete-user-button";
+import { FirstDayOfWeek } from "./_components/_first-day-of-week";
 import { UserProfileAvatarForm } from "./_components/_profile-avatar-form";
 import { UserProfileForm } from "./_components/_profile-form";
 
@@ -93,6 +94,11 @@ export default async function EditUserPage({ params }: Props) {
         />
       </Stack>
 
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.firstDayOfWeek")}</Title>
+        <FirstDayOfWeek user={user} />
+      </Stack>
+
       {isCredentialsUser && (
         <DangerZoneRoot>
           <DangerZoneItem