Rename firstName to ownerName with updated validation

- Renamed firstName to ownerName in UserSettings interface
- Updated UserSettingsForm field to accept full name (first and last)
- Set maximum length to 25 characters for owner name field
- Updated all database operations to use ownerName
- Changed English label from "First Name" to "Your First and Last Name"
- Updated Croatian translations to match (Vaše ime i prezime)
- Updated form validation schema and error messages
- Removed old lastName-related translations
- Updated ViewLocationCard to use ownerName for recipient

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/lib/actions/userSettingsActions.ts

@@ -14,7 +14,7 @@ import * as IBAN from 'iban';
 
 export type State = {
     errors?: {
-        firstName?: string[];
+        ownerName?: string[];
         street?: string[];
         town?: string[];
         iban?: string[];
@@ -29,7 +29,7 @@ export type State = {
  * Schema for validating user settings form fields
  */
 const FormSchema = (t: IntlTemplateFn) => z.object({
-    firstName: z.string().optional(),
+    ownerName: z.string().max(25).optional(),
     street: z.string().optional(),
     town: z.string().optional(),
     iban: z.string()
@@ -48,12 +48,12 @@ const FormSchema = (t: IntlTemplateFn) => z.object({
 })
 .refine((data) => {
     if (data.show2dCodeInMonthlyStatement) {
-        return !!data.firstName && data.firstName.trim().length > 0;
+        return !!data.ownerName && data.ownerName.trim().length > 0;
     }
     return true;
 }, {
-    message: t("first-name-required"),
-    path: ["firstName"],
+    message: t("owner-name-required"),
+    path: ["ownerName"],
 })
 .refine((data) => {
     if (data.show2dCodeInMonthlyStatement) {
@@ -136,7 +136,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
     const t = await getTranslations("user-settings-form.validation");
 
     const validatedFields = FormSchema(t).safeParse({
-        firstName: formData.get('firstName') || undefined,
+        ownerName: formData.get('ownerName') || undefined,
         street: formData.get('street') || undefined,
         town: formData.get('town') || undefined,
         iban: formData.get('iban') || undefined,
@@ -153,7 +153,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
         };
     }
 
-    const { firstName, street, town, iban, currency, show2dCodeInMonthlyStatement } = validatedFields.data;
+    const { ownerName, street, town, iban, currency, show2dCodeInMonthlyStatement } = validatedFields.data;
 
     // Normalize IBAN: remove spaces and convert to uppercase
     const normalizedIban = iban ? iban.replace(/\s/g, '').toUpperCase() : null;
@@ -164,7 +164,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
 
     const userSettings: UserSettings = {
         userId,
-        firstName: firstName || null,
+        ownerName: ownerName || null,
         street: street || null,
         town: town || null,
         iban: normalizedIban,

app/lib/db-types.ts

@@ -18,8 +18,8 @@ export interface YearMonth {
 export interface UserSettings {
     /** user's ID */
     userId: string;
-    /** first name */
-    firstName?: string | null;
+    /** owner name */
+    ownerName?: string | null;
     /** street */
     street?: string | null;
     /** town */

app/ui/UserSettingsForm.tsx

@@ -27,7 +27,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
 
     // Track current form values for real-time validation
     const [formValues, setFormValues] = useState({
-        firstName: userSettings?.firstName ?? "",
+        ownerName: userSettings?.ownerName ?? "",
         street: userSettings?.street ?? "",
         town: userSettings?.town ?? "",
         iban: formatIban(userSettings?.iban) ?? "",
@@ -40,7 +40,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
 
     // 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.street || !formValues.town || !cleanedIban || !formValues.currency;
+    const hasMissingData = !formValues.ownerName || !formValues.street || !formValues.town || !cleanedIban || !formValues.currency;
 
     // Track whether to generate 2D code for tenant (use persisted value from database)
     const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
@@ -71,21 +71,22 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                 <>
                     <div className="form-control w-full">
                         <label className="label">
-                            <span className="label-text">{t("first-name-label")}</span>
+                            <span className="label-text">{t("owner-name-label")}</span>
                         </label>
                         <input
-                            id="firstName"
-                            name="firstName"
+                            id="ownerName"
+                            name="ownerName"
                             type="text"
-                            placeholder={t("first-name-placeholder")}
+                            maxLength={25}
+                            placeholder={t("owner-name-placeholder")}
                             className="input input-bordered w-full placeholder:text-gray-600"
-                            defaultValue={userSettings?.firstName ?? ""}
-                            onChange={(e) => handleInputChange("firstName", e.target.value)}
+                            defaultValue={userSettings?.ownerName ?? ""}
+                            onChange={(e) => handleInputChange("ownerName", e.target.value)}
                             disabled={pending}
                         />
-                        <div id="firstName-error" aria-live="polite" aria-atomic="true">
-                            {errors?.firstName &&
-                                errors.firstName.map((error: string) => (
+                        <div id="ownerName-error" aria-live="polite" aria-atomic="true">
+                            {errors?.ownerName &&
+                                errors.ownerName.map((error: string) => (
                                     <p className="mt-2 text-sm text-red-500" key={error}>
                                         {error}
                                     </p>

app/ui/ViewLocationCard.tsx

@@ -28,7 +28,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
         ImePlatitelja: tenantName ?? "",
         AdresaPlatitelja: tenantStreet ?? "",
         SjedistePlatitelja: tenantTown ?? "",
-        Primatelj: userSettings?.firstName ?? "",
+        Primatelj: userSettings?.ownerName ?? "",
         AdresaPrimatelja: userSettings?.street ?? "",
         SjedistePrimatelja: userSettings?.town ?? "",
         IBAN: userSettings?.iban ?? "",