Refactor: renamed AccountForm to UserSettingsForm and update related actions and translations

app/[locale]/account/page.tsx

@@ -1,15 +1,15 @@
 import { FC, Suspense } from 'react';
 import { Main } from '@/app/ui/Main';
-import { AccountForm, AccountFormSkeleton } from '@/app/ui/AccountForm';
+import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/AppSettingsForm';
-import { getUserProfile } from '@/app/lib/actions/userProfileActions';
+import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
 
 const AccountPage: FC = async () => {
-    const profile = await getUserProfile();
+    const userSettings = await getUserSettings();
 
     return (
         <Main>
             <div className="flex flex-col items-center">
-                <AccountForm profile={profile} />
+                <UserSettingsForm userSettings={userSettings} />
             </div>
         </Main>
     );
@@ -21,7 +21,7 @@ const Page: FC = () => {
             <Main>
                 <div className="flex flex-col items-center">
                     <div className="h-8 w-48 skeleton mb-4"></div>
-                    <AccountFormSkeleton />
+                    <UserSettingsFormSkeleton />
                 </div>
             </Main>
         }>

app/lib/actions/userSettingsActions.ts

@@ -2,7 +2,7 @@
 
 import { z } from 'zod';
 import { getDbClient } from '../dbClient';
-import { UserProfile } from '../db-types';
+import { UserSettings } from '../db-types';
 import { withUser } from '@/app/lib/auth';
 import { AuthenticatedUser } from '../types/next-auth';
 import { unstable_noStore as noStore } from 'next/cache';
@@ -25,7 +25,7 @@ export type State = {
 };
 
 /**
- * Schema for validating user profile form fields
+ * Schema for validating user settings form fields
  */
 const FormSchema = (t: IntlTemplateFn) => z.object({
     firstName: z.string().optional(),
@@ -87,27 +87,27 @@ const FormSchema = (t: IntlTemplateFn) => z.object({
 });
 
 /**
- * Get user profile
+ * Get user settings
  */
-export const getUserProfile = withUser(async (user: AuthenticatedUser) => {
+export const getUserSettings = withUser(async (user: AuthenticatedUser) => {
     noStore();
 
     const dbClient = await getDbClient();
     const { id: userId } = user;
 
-    const profile = await dbClient.collection<UserProfile>("users")
+    const userSettings = await dbClient.collection<UserSettings>("userSettings")
         .findOne({ userId });
 
-    return profile;
+    return userSettings;
 });
 
 /**
- * Update user profile
+ * Update user settings
  */
-export const updateUserProfile = withUser(async (user: AuthenticatedUser, prevState: State, formData: FormData) => {
+export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevState: State, formData: FormData) => {
     noStore();
 
-    const t = await getTranslations("settings-form.validation");
+    const t = await getTranslations("user-settings-form.validation");
 
     const validatedFields = FormSchema(t).safeParse({
         firstName: formData.get('firstName') || undefined,
@@ -131,11 +131,11 @@ export const updateUserProfile = withUser(async (user: AuthenticatedUser, prevSt
     // Normalize IBAN: remove spaces and convert to uppercase
     const normalizedIban = iban ? iban.replace(/\s/g, '').toUpperCase() : null;
 
-    // Update the user profile in MongoDB
+    // Update the user settings in MongoDB
     const dbClient = await getDbClient();
     const { id: userId } = user;
 
-    const userProfile: UserProfile = {
+    const userSettings: UserSettings = {
         userId,
         firstName: firstName || null,
         lastName: lastName || null,
@@ -144,18 +144,18 @@ export const updateUserProfile = withUser(async (user: AuthenticatedUser, prevSt
         show2dCodeInMonthlyStatement: show2dCodeInMonthlyStatement ?? false,
     };
 
-    await dbClient.collection<UserProfile>("users")
+    await dbClient.collection<UserSettings>("userSettings")
         .updateOne(
             { userId },
-            { $set: userProfile },
+            { $set: userSettings },
             { upsert: true }
         );
 
-    revalidatePath('/account');
+    revalidatePath('/settings');
 
     // Get current locale and redirect to home with success message
     const locale = await getLocale();
-    await gotoHomeWithMessage(locale, 'profileSaved');
+    await gotoHomeWithMessage(locale, 'user-settings-saved-message');
 
     // This return is needed for TypeScript, but won't be reached due to redirect
     return {

app/lib/db-types.ts

@@ -14,8 +14,8 @@ export interface YearMonth {
     month: number;
 };
 
-/** User profile data */
+/** User settings data */
-export interface UserProfile {
+export interface UserSettings {
     /** user's ID */
     userId: string;
     /** first name */

app/ui/AppSettingsForm.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { FC, useState } from "react";
-import { UserProfile } from "../lib/db-types";
+import { UserSettings } from "../lib/db-types";
-import { updateUserProfile } from "../lib/actions/userProfileActions";
+import { updateUserSettings } from "../lib/actions/userSettingsActions";
 import { useFormState, useFormStatus } from "react-dom";
 import { useLocale, useTranslations } from "next-intl";
 import Link from "next/link";
@@ -10,27 +10,27 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import { formatIban } from "../lib/formatStrings";
 import { InfoBox } from "./InfoBox";
 
-export type AccountFormProps = {
+export type UserSettingsFormProps = {
-    profile: UserProfile | null;
+    userSettings: UserSettings | null;
 }
 
 type FormFieldsProps = {
-    profile: UserProfile | null;
+    userSettings: UserSettings | null;
     errors: any;
     message: string | null;
 }
 
-const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
+const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
     const { pending } = useFormStatus();
-    const t = useTranslations("settings-form");
+    const t = useTranslations("user-settings-form");
     const locale = useLocale();
 
     // Track current form values for real-time validation
     const [formValues, setFormValues] = useState({
-        firstName: profile?.firstName ?? "",
+        firstName: userSettings?.firstName ?? "",
-        lastName: profile?.lastName ?? "",
+        lastName: userSettings?.lastName ?? "",
-        address: profile?.address ?? "",
+        address: userSettings?.address ?? "",
-        iban: formatIban(profile?.iban) ?? "",
+        iban: formatIban(userSettings?.iban) ?? "",
     });
 
     const handleInputChange = (field: keyof typeof formValues, value: string) => {
@@ -43,7 +43,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
 
     // Track whether to generate 2D code for tenant (use persisted value from database)
     const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
-        profile?.show2dCodeInMonthlyStatement ?? false
+        userSettings?.show2dCodeInMonthlyStatement ?? false
     );
 
     return (
@@ -78,7 +78,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
                             type="text"
                             placeholder={t("first-name-placeholder")}
                             className="input input-bordered w-full placeholder:text-gray-600"
-                            defaultValue={profile?.firstName ?? ""}
+                            defaultValue={userSettings?.firstName ?? ""}
                             onChange={(e) => handleInputChange("firstName", e.target.value)}
                             disabled={pending}
                         />
@@ -102,7 +102,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
                             type="text"
                             placeholder={t("last-name-placeholder")}
                             className="input input-bordered w-full placeholder:text-gray-600"
-                            defaultValue={profile?.lastName ?? ""}
+                            defaultValue={userSettings?.lastName ?? ""}
                             onChange={(e) => handleInputChange("lastName", e.target.value)}
                             disabled={pending}
                         />
@@ -125,7 +125,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
                             name="address"
                             className="textarea textarea-bordered w-full placeholder:text-gray-600"
                             placeholder={t("address-placeholder")}
-                            defaultValue={profile?.address ?? ""}
+                            defaultValue={userSettings?.address ?? ""}
                             onChange={(e) => handleInputChange("address", e.target.value)}
                             disabled={pending}
                         ></textarea>
@@ -149,7 +149,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
                             type="text"
                             placeholder={t("iban-placeholder")}
                             className="input input-bordered w-full placeholder:text-gray-600"
-                            defaultValue={formatIban(profile?.iban)}
+                            defaultValue={formatIban(userSettings?.iban)}
                             onChange={(e) => handleInputChange("iban", e.target.value)}
                             disabled={pending}
                         />
@@ -191,10 +191,10 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
     );
 };
 
-export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
+export const UserSettingsForm: FC<UserSettingsFormProps> = ({ userSettings }) => {
     const initialState = { message: null, errors: {} };
-    const [state, dispatch] = useFormState(updateUserProfile, initialState);
+    const [state, dispatch] = useFormState(updateUserSettings, initialState);
-    const t = useTranslations("settings-form");
+    const t = useTranslations("user-settings-form");
 
     return (
         <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
@@ -202,7 +202,7 @@ export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
                 <h2 className="card-title"><SettingsIcon className="w-6 h-6" /> {t("title")}</h2>
                 <form action={dispatch}>
                     <FormFields
-                        profile={profile}
+                        userSettings={userSettings}
                         errors={state.errors}
                         message={state.message ?? null}
                     />
@@ -212,7 +212,7 @@ export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
     );
 };
 
-export const AccountFormSkeleton: FC = () => {
+export const UserSettingsFormSkeleton: FC = () => {
     return (
         <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
             <div className="card-body">

app/ui/MonthLocationList.tsx

@@ -52,9 +52,9 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
         const params = new URLSearchParams(search.toString());
         let messageShown = false;
 
-        if (search.get('profileSaved') === 'true') {
+        if (search.get('userSettingsSaved') === 'true') {
-            toast.success(t("profile-saved-message"), { theme: "dark" });
+            toast.success(t("user-settings-saved-message"), { theme: "dark" });
-            params.delete('profileSaved');
+            params.delete('userSettingsSaved');
             messageShown = true;
         }
 

app/ui/UserSettingsForm.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { FC, useState } from "react";
+import { UserSettings } from "../lib/db-types";
+import { updateUserSettings } from "../lib/actions/userSettingsActions";
+import { useFormState, useFormStatus } from "react-dom";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { formatIban } from "../lib/formatStrings";
+import { InfoBox } from "./InfoBox";
+
+export type UserSettingsFormProps = {
+    userSettings: UserSettings | null;
+}
+
+type FormFieldsProps = {
+    userSettings: UserSettings | null;
+    errors: any;
+    message: string | null;
+}
+
+const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
+    const { pending } = useFormStatus();
+    const t = useTranslations("user-settings-form");
+    const locale = useLocale();
+
+    // Track current form values for real-time validation
+    const [formValues, setFormValues] = useState({
+        firstName: userSettings?.firstName ?? "",
+        lastName: userSettings?.lastName ?? "",
+        address: userSettings?.address ?? "",
+        iban: formatIban(userSettings?.iban) ?? "",
+    });
+
+    const handleInputChange = (field: keyof typeof formValues, value: string) => {
+        setFormValues(prev => ({ ...prev, [field]: value }));
+    };
+
+    // Check if any required field is missing (clean IBAN of spaces for validation)
+    const cleanedIban = formValues.iban.replace(/\s/g, '');
+    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !cleanedIban;
+
+    // Track whether to generate 2D code for tenant (use persisted value from database)
+    const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
+        userSettings?.show2dCodeInMonthlyStatement ?? false
+    );
+
+    return (
+        <>
+            <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
+                <legend className="fieldset-legend font-semibold uppercase">{t("tenant-2d-code-legend")}</legend>
+
+                <InfoBox className="p-1 mb-1">{t("info-box-message")}</InfoBox>
+
+                <fieldset className="fieldset">
+                    <label className="label cursor-pointer justify-start gap-3">
+                        <input
+                            type="checkbox"
+                            name="generateTenantCode"
+                            className="toggle toggle-primary"
+                            checked={show2dCodeInMonthlyStatement}
+                            onChange={(e) => setShow2dCodeInMonthlyStatement(e.target.checked)}
+                        />
+                        <legend className="fieldset-legend">{t("tenant-2d-code-toggle-label")}</legend>
+                    </label>
+                </fieldset>
+
+                {show2dCodeInMonthlyStatement && (
+                <>
+                    <div className="form-control w-full">
+                        <label className="label">
+                            <span className="label-text">{t("first-name-label")}</span>
+                        </label>
+                        <input
+                            id="firstName"
+                            name="firstName"
+                            type="text"
+                            placeholder={t("first-name-placeholder")}
+                            className="input input-bordered w-full placeholder:text-gray-600"
+                            defaultValue={userSettings?.firstName ?? ""}
+                            onChange={(e) => handleInputChange("firstName", e.target.value)}
+                            disabled={pending}
+                        />
+                        <div id="firstName-error" aria-live="polite" aria-atomic="true">
+                            {errors?.firstName &&
+                                errors.firstName.map((error: string) => (
+                                    <p className="mt-2 text-sm text-red-500" key={error}>
+                                        {error}
+                                    </p>
+                                ))}
+                        </div>
+                    </div>
+
+                    <div className="form-control w-full">
+                        <label className="label">
+                            <span className="label-text">{t("last-name-label")}</span>
+                        </label>
+                        <input
+                            id="lastName"
+                            name="lastName"
+                            type="text"
+                            placeholder={t("last-name-placeholder")}
+                            className="input input-bordered w-full placeholder:text-gray-600"
+                            defaultValue={userSettings?.lastName ?? ""}
+                            onChange={(e) => handleInputChange("lastName", e.target.value)}
+                            disabled={pending}
+                        />
+                        <div id="lastName-error" aria-live="polite" aria-atomic="true">
+                            {errors?.lastName &&
+                                errors.lastName.map((error: string) => (
+                                    <p className="mt-2 text-sm text-red-500" key={error}>
+                                        {error}
+                                    </p>
+                                ))}
+                        </div>
+                    </div>
+
+                    <div className="form-control w-full">
+                        <label className="label">
+                            <span className="label-text">{t("address-label")}</span>
+                        </label>
+                        <textarea
+                            id="address"
+                            name="address"
+                            className="textarea textarea-bordered w-full placeholder:text-gray-600"
+                            placeholder={t("address-placeholder")}
+                            defaultValue={userSettings?.address ?? ""}
+                            onChange={(e) => handleInputChange("address", e.target.value)}
+                            disabled={pending}
+                        ></textarea>
+                        <div id="address-error" aria-live="polite" aria-atomic="true">
+                            {errors?.address &&
+                                errors.address.map((error: string) => (
+                                    <p className="mt-2 text-sm text-red-500" key={error}>
+                                        {error}
+                                    </p>
+                                ))}
+                        </div>
+                    </div>
+
+                    <div className="form-control w-full">
+                        <label className="label">
+                            <span className="label-text">{t("iban-label")}</span>
+                        </label>
+                        <input
+                            id="iban"
+                            name="iban"
+                            type="text"
+                            placeholder={t("iban-placeholder")}
+                            className="input input-bordered w-full placeholder:text-gray-600"
+                            defaultValue={formatIban(userSettings?.iban)}
+                            onChange={(e) => handleInputChange("iban", e.target.value)}
+                            disabled={pending}
+                        />
+                        <div id="iban-error" aria-live="polite" aria-atomic="true">
+                            {errors?.iban &&
+                                errors.iban.map((error: string) => (
+                                    <p className="mt-2 text-sm text-red-500" key={error}>
+                                        {error}
+                                    </p>
+                                ))}
+                        </div>
+                    </div>
+                    <InfoBox className="p-1 mt-1">{t("additional-notes")}</InfoBox>
+                    </>
+                )}
+            </fieldset>
+
+            <div id="general-error" aria-live="polite" aria-atomic="true">
+                {message && (
+                    <p className="mt-2 text-sm text-red-500">
+                        {message}
+                    </p>
+                )}
+            </div>
+
+            <div className="pt-4">
+                <button className="btn btn-primary w-[5.5em]" disabled={pending}>
+                    {pending ? (
+                        <span className="loading loading-spinner loading-sm"></span>
+                    ) : (
+                        t("save-button")
+                    )}
+                </button>
+                <Link className={`btn btn-neutral w-[5.5em] ml-3 ${pending ? "btn-disabled" : ""}`} href={`/${locale}`}>
+                    {t("cancel-button")}
+                </Link>
+            </div>
+        </>
+    );
+};
+
+export const UserSettingsForm: FC<UserSettingsFormProps> = ({ userSettings }) => {
+    const initialState = { message: null, errors: {} };
+    const [state, dispatch] = useFormState(updateUserSettings, initialState);
+    const t = useTranslations("user-settings-form");
+
+    return (
+        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <h2 className="card-title"><SettingsIcon className="w-6 h-6" /> {t("title")}</h2>
+                <form action={dispatch}>
+                    <FormFields
+                        userSettings={userSettings}
+                        errors={state.errors}
+                        message={state.message ?? null}
+                    />
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export const UserSettingsFormSkeleton: FC = () => {
+    return (
+        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <div className="h-8 w-32 skeleton mb-4"></div>
+                <div className="input w-full skeleton"></div>
+                <div className="input w-full skeleton mt-4"></div>
+                <div className="textarea w-full h-24 skeleton mt-4"></div>
+                <div className="input w-full skeleton mt-4"></div>
+                <div className="pt-4">
+                    <div className="btn skeleton w-24"></div>
+                </div>
+            </div>
+        </div>
+    );
+};

messages/en.json

@@ -74,7 +74,7 @@
       "empty-state-title": "No Barcode Data Found",
       "empty-state-message": "No bills with 2D barcodes found for {yearMonth}"
     },
-    "profile-saved-message": "Profile updated successfully",
+    "user-settings-saved-message": "User settings updated successfully",
     "bill-saved-message": "Bill saved successfully",
     "bill-deleted-message": "Bill deleted successfully",
     "location-saved-message": "Location saved successfully",
@@ -164,8 +164,8 @@
       "validation-failed": "Validation failed. Please check the form and try again."
     }
   },
-  "settings-form": {
+  "user-settings-form": {
-    "title": "Settings",
+    "title": "User settings",
     "info-box-message": "By activating this option, a 2D barcode will be included in the monthly statement sent to the tenant, allowing them to make a direct payment to your bank account.",
     "tenant-2d-code-legend": "TENANT 2D CODE",
     "tenant-2d-code-toggle-label": "include 2D code in monthly statements",

messages/hr.json

@@ -74,7 +74,7 @@
       "empty-state-title": "Nema Podataka o Barkodovima",
       "empty-state-message": "Nema računa s 2D barkodovima za {yearMonth}"
     },
-    "profile-saved-message": "Profil uspješno ažuriran",
+    "user-settings-saved-message": "Korisničke postavke uspješno ažurirane",
     "bill-saved-message": "Račun uspješno spremljen",
     "bill-deleted-message": "Račun uspješno obrisan",
     "location-saved-message": "Nekretnina uspješno spremljena",
@@ -163,8 +163,8 @@
       "validation-failed": "Validacija nije uspjela. Molimo provjerite formu i pokušajte ponovno."
     }
   },
-  "settings-form": {
+  "user-settings-form": {
-    "title": "Postavke",
+    "title": "Korisničke postavke",
     "info-box-message": "Ako uključite ovu opciji na mjesečnom obračunu koji se šalje podstanaru biti će prikazan 2D bar kod, putem kojeg će moći izvršiti izravnu uplatu na vaš bankovni račun.",
     "tenant-2d-code-legend": "2D BARKOD ZA PODSTANARA",
     "tenant-2d-code-toggle-label": "prikazuj 2D barkod u mjesečnom obračunu",