Add tenant information fields to LocationEditForm

Added optional tenant fields (first name, last name, email) to billing locations
with a toggle to enable/disable 2D barcode generation for tenants.

Changes:
- Added generateTenantCode, tenantFirstName, tenantLastName, and tenantEmail
  fields to BillingLocation interface
- Updated LocationEditForm with toggle control and conditional tenant fields
- Implemented conditional validation: tenant names required when generateTenantCode is true
- Updated updateOrAddLocation action to persist tenant data across all update operations
- Added localization strings for tenant fields and validation messages (Croatian/English)

The generateTenantCode flag is persisted in the database and controls visibility
of tenant name fields. When enabled, both first and last names become mandatory.

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

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

app/lib/actions/locationActions.ts

@@ -14,7 +14,11 @@ import { getTranslations, getLocale } from "next-intl/server";
 export type State = {
     errors?: {
         locationName?: string[];
-        locationNotes?: string[],
+        locationNotes?: string[];
+        generateTenantCode?: string[];
+        tenantFirstName?: string[];
+        tenantLastName?: string[];
+        tenantEmail?: string[];
     };
     message?:string | null;
 };
@@ -27,11 +31,34 @@ const FormSchema = (t:IntlTemplateFn) => z.object({
     _id: z.string(),
     locationName: z.coerce.string().min(1, t("location-name-required")),
     locationNotes: z.string(),
+    generateTenantCode: z.boolean().optional().nullable(),
+    tenantFirstName: z.string().optional().nullable(),
+    tenantLastName: z.string().optional().nullable(),
+    tenantEmail: z.string().optional().nullable(),
     addToSubsequentMonths: z.boolean().optional().nullable(),
     updateScope: z.enum(["current", "subsequent", "all"]).optional().nullable(),
   })
   // dont include the _id field in the response
-  .omit({ _id: true });
+  .omit({ _id: true })
+  // Add conditional validation: if generateTenantCode is true, tenant names are required
+  .refine((data) => {
+    if (data.generateTenantCode) {
+      return !!data.tenantFirstName && data.tenantFirstName.trim().length > 0;
+    }
+    return true;
+  }, {
+    message: t("tenant-first-name-required"),
+    path: ["tenantFirstName"],
+  })
+  .refine((data) => {
+    if (data.generateTenantCode) {
+      return !!data.tenantLastName && data.tenantLastName.trim().length > 0;
+    }
+    return true;
+  }, {
+    message: t("tenant-last-name-required"),
+    path: ["tenantLastName"],
+  });
 
 /**
  * Server-side action which adds or updates a bill
@@ -49,6 +76,10 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
     const validatedFields = FormSchema(t).safeParse({
         locationName: formData.get('locationName'),
         locationNotes: formData.get('locationNotes'),
+        generateTenantCode: formData.get('generateTenantCode') === 'on',
+        tenantFirstName: formData.get('tenantFirstName') || null,
+        tenantLastName: formData.get('tenantLastName') || null,
+        tenantEmail: formData.get('tenantEmail') || null,
         addToSubsequentMonths: formData.get('addToSubsequentMonths') === 'on',
         updateScope: formData.get('updateScope') as "current" | "subsequent" | "all" | undefined,
     });
@@ -57,13 +88,17 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
     if(!validatedFields.success) {
         return({
             errors: validatedFields.error.flatten().fieldErrors,
-            message: "Missing Fields",
+            message: t("validation-failed"),
         });
     }
 
     const {
         locationName,
         locationNotes,
+        generateTenantCode,
+        tenantFirstName,
+        tenantLastName,
+        tenantEmail,
         addToSubsequentMonths,
         updateScope,
     } = validatedFields.data;
@@ -97,6 +132,10 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                     $set: {
                         name: locationName,
                         notes: locationNotes,
+                        generateTenantCode: generateTenantCode || false,
+                        tenantFirstName: tenantFirstName || null,
+                        tenantLastName: tenantLastName || null,
+                        tenantEmail: tenantEmail || null,
                     }
                 }
             );
@@ -108,9 +147,9 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                     name: currentLocation.name,
                     $or: [
                         { "yearMonth.year": { $gt: currentLocation.yearMonth.year } },
-                        { 
+                        {
-                            "yearMonth.year": currentLocation.yearMonth.year, 
+                            "yearMonth.year": currentLocation.yearMonth.year,
-                            "yearMonth.month": { $gte: currentLocation.yearMonth.month } 
+                            "yearMonth.month": { $gte: currentLocation.yearMonth.month }
                         }
                     ]
                 },
@@ -118,6 +157,10 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                     $set: {
                         name: locationName,
                         notes: locationNotes,
+                        generateTenantCode: generateTenantCode || false,
+                        tenantFirstName: tenantFirstName || null,
+                        tenantLastName: tenantLastName || null,
+                        tenantEmail: tenantEmail || null,
                     }
                 }
             );
@@ -132,6 +175,10 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                     $set: {
                         name: locationName,
                         notes: locationNotes,
+                        generateTenantCode: generateTenantCode || false,
+                        tenantFirstName: tenantFirstName || null,
+                        tenantLastName: tenantLastName || null,
+                        tenantEmail: tenantEmail || null,
                     }
                 }
             );
@@ -144,6 +191,10 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
             userEmail,
             name: locationName,
             notes: locationNotes,
+            generateTenantCode: generateTenantCode || false,
+            tenantFirstName: tenantFirstName || null,
+            tenantLastName: tenantLastName || null,
+            tenantEmail: tenantEmail || null,
             yearMonth: yearMonth,
             bills: [],
         });
@@ -208,6 +259,10 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                         userEmail,
                         name: locationName,
                         notes: locationNotes,
+                        generateTenantCode: generateTenantCode || false,
+                        tenantFirstName: tenantFirstName || null,
+                        tenantLastName: tenantLastName || null,
+                        tenantEmail: tenantEmail || null,
                         yearMonth: { year: monthData.year, month: monthData.month },
                         bills: [],
                     });

app/lib/db-types.ts

@@ -43,6 +43,14 @@ export interface BillingLocation {
     bills: Bill[];
     /** (optional) notes */
     notes: string|null;
+    /** (optional) whether to generate 2D code for tenant */
+    generateTenantCode?: boolean | null;
+    /** (optional) tenant first name */
+    tenantFirstName?: string | null;
+    /** (optional) tenant last name */
+    tenantLastName?: string | null;
+    /** (optional) tenant email */
+    tenantEmail?: string | null;
 };
 
 export enum BilledTo {

app/ui/LocationEditForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { TrashIcon } from "@heroicons/react/24/outline";
-import { FC } from "react";
+import { FC, useState } from "react";
 import { BillingLocation, YearMonth } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
@@ -20,51 +20,152 @@ export type LocationEditFormProps = {
     yearMonth: YearMonth
 }
 
-export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
+export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth }) => {
-{
     const initialState = { message: null, errors: {} };
     const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
-    const [ state, dispatch ] = useFormState(handleAction, initialState);
+    const [state, dispatch] = useFormState(handleAction, initialState);
     const t = useTranslations("location-edit-form");
     const locale = useLocale();
 
+    // Track whether to generate 2D code for tenant (use persisted value from database)
+    const [generateTenantCode, setGenerateTenantCode] = useState(
+        location?.generateTenantCode ?? false
+    );
+
+    // Track tenant field values for real-time validation
+    const [tenantFields, setTenantFields] = useState({
+        tenantFirstName: location?.tenantFirstName ?? "",
+        tenantLastName: location?.tenantLastName ?? "",
+        tenantEmail: location?.tenantEmail ?? "",
+    });
+
+    const handleTenantFieldChange = (field: keyof typeof tenantFields, value: string) => {
+        setTenantFields(prev => ({ ...prev, [field]: value }));
+    };
+
     let { year, month } = location ? location.yearMonth : yearMonth;
 
-    return(
+    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">
                 <form action={dispatch}>
                     {
-                        location && 
+                        location &&
-                            <Link href={`/${locale}/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip={t("delete-tooltip")}>
+                        <Link href={`/${locale}/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip={t("delete-tooltip")}>
-                                <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
+                            <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
-                            </Link>
+                        </Link>
                     }
                     <input id="locationName" name="locationName" type="text" placeholder={t("location-name-placeholder")} className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
                     <div id="status-error" aria-live="polite" aria-atomic="true">
                         {state.errors?.locationName &&
-                        state.errors.locationName.map((error: string) => (
+                            state.errors.locationName.map((error: string) => (
-                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                <p className="mt-2 text-sm text-red-500" key={error}>
-                            {error}
+                                    {error}
-                            </p>
+                                </p>
-                        ))}
+                            ))}
                     </div>
 
                     <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block h-[8em]" placeholder={t("notes-placeholder")} defaultValue={location?.notes ?? ""}></textarea>
                     <div id="status-error" aria-live="polite" aria-atomic="true">
                         {state.errors?.locationNotes &&
-                        state.errors.locationNotes.map((error: string) => (
+                            state.errors.locationNotes.map((error: string) => (
-                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                <p className="mt-2 text-sm text-red-500" key={error}>
-                            {error}
+                                    {error}
-                            </p>
+                                </p>
-                        ))}
+                            ))}
+                    </div>
+
+                    <div className="form-control mt-4">
+                        <label className="label cursor-pointer justify-start gap-3">
+                            <input
+                                type="checkbox"
+                                name="generateTenantCode"
+                                className="toggle toggle-primary"
+                                checked={generateTenantCode}
+                                onChange={(e) => setGenerateTenantCode(e.target.checked)}
+                            />
+                            <span className="label-text">{t("generate-tenant-code")}</span>
+                        </label>
+                    </div>
+
+                    {generateTenantCode && (
+                        <>
+                            <div className="form-control w-full">
+                                <label className="label">
+                                    <span className="label-text">{t("tenant-first-name-label")}</span>
+                                </label>
+                                <input
+                                    id="tenantFirstName"
+                                    name="tenantFirstName"
+                                    type="text"
+                                    placeholder={t("tenant-first-name-placeholder")}
+                                    className="input input-bordered w-full placeholder:text-gray-600"
+                                    defaultValue={location?.tenantFirstName ?? ""}
+                                    onChange={(e) => handleTenantFieldChange("tenantFirstName", e.target.value)}
+                                />
+                                <div id="tenantFirstName-error" aria-live="polite" aria-atomic="true">
+                                    {state.errors?.tenantFirstName &&
+                                        state.errors.tenantFirstName.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("tenant-last-name-label")}</span>
+                                </label>
+                                <input
+                                    id="tenantLastName"
+                                    name="tenantLastName"
+                                    type="text"
+                                    placeholder={t("tenant-last-name-placeholder")}
+                                    className="input input-bordered w-full placeholder:text-gray-600"
+                                    defaultValue={location?.tenantLastName ?? ""}
+                                    onChange={(e) => handleTenantFieldChange("tenantLastName", e.target.value)}
+                                />
+                                <div id="tenantLastName-error" aria-live="polite" aria-atomic="true">
+                                    {state.errors?.tenantLastName &&
+                                        state.errors.tenantLastName.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("tenant-email-label")}</span>
+                        </label>
+                        <input
+                            id="tenantEmail"
+                            name="tenantEmail"
+                            type="email"
+                            placeholder={t("tenant-email-placeholder")}
+                            className="input input-bordered w-full placeholder:text-gray-600"
+                            defaultValue={location?.tenantEmail ?? ""}
+                            onChange={(e) => handleTenantFieldChange("tenantEmail", e.target.value)}
+                        />
+                        <div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
+                            {state.errors?.tenantEmail &&
+                                state.errors.tenantEmail.map((error: string) => (
+                                    <p className="mt-2 text-sm text-red-500" key={error}>
+                                        {error}
+                                    </p>
+                                ))}
+                        </div>
                     </div>
 
                     {/* Show different options for add vs edit operations */}
                     {!location ? (
                         <div className="form-control">
                             <label className="label cursor-pointer">
-                                <span className="label-text">{t("add-to-subsequent-months")}</span> 
+                                <span className="label-text">{t("add-to-subsequent-months")}</span>
                                 <input type="checkbox" name="addToSubsequentMonths" className="toggle toggle-primary" />
                             </label>
                         </div>
@@ -93,9 +194,9 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
                     <div id="status-error" aria-live="polite" aria-atomic="true">
                         {
                             state.message &&
-                                <p className="mt-2 text-sm text-red-500">
+                            <p className="mt-2 text-sm text-red-500">
-                                    {state.message}
+                                {state.message}
-                                </p>
+                            </p>
                         }
                     </div>
                     <div className="pt-4">
@@ -108,9 +209,8 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
     )
 }
 
-export const LocationEditFormSkeleton:FC = () =>
+export const LocationEditFormSkeleton: FC = () => {
-{
+    return (
-    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 id="locationName" className="input w-full skeleton"></div>

messages/en.json

@@ -124,6 +124,14 @@
   "location-edit-form": {
     "location-name-placeholder": "Realestate name",
     "notes-placeholder": "Notes",
+    "generate-tenant-code": "Generate 2D code for tenant",
+    "tenant-first-name-label": "Tenant First Name",
+    "tenant-first-name-placeholder": "Enter tenant's first name",
+    "tenant-last-name-label": "Tenant Last Name",
+    "tenant-last-name-placeholder": "Enter tenant's last name",
+    "tenant-email-label": "Tenant Email",
+    "tenant-email-placeholder": "Enter tenant's email",
+    "warning-missing-tenant-names": "Warning: Tenant first and last name are missing. The 2D barcode will not be displayed to the tenant when they open the shared link until both fields are filled in.",
     "save-button": "Save",
     "cancel-button": "Cancel",
     "delete-tooltip": "Delete realestate",
@@ -133,7 +141,10 @@
     "update-subsequent-months": "current and all future months",
     "update-all-months": "all months",
     "validation": {
-      "location-name-required": "Relaestate name is required"
+      "location-name-required": "Relaestate name is required",
+      "tenant-first-name-required": "tenant first name is missing",
+      "tenant-last-name-required": "tenant last name is missing",
+      "validation-failed": "Validation failed. Please check the form and try again."
     }
   },
   "account-form": {

messages/hr.json

@@ -123,6 +123,14 @@
   "location-edit-form": {
     "location-name-placeholder": "Ime nekretnine",
     "notes-placeholder": "Bilješke",
+    "generate-tenant-code": "Generiraj 2D barkod za podstanara",
+    "tenant-first-name-label": "Ime podstanara",
+    "tenant-first-name-placeholder": "Unesite ime podstanara",
+    "tenant-last-name-label": "Prezime podstanara",
+    "tenant-last-name-placeholder": "Unesite prezime podstanara",
+    "tenant-email-label": "Email podstanara",
+    "tenant-email-placeholder": "Unesite email podstanara",
+    "warning-missing-tenant-names": "Upozorenje: Ime i prezime podstanara nedostaju. 2D barkod neće biti prikazan podstanaru kada otvori podijeljenu poveznicu dok oba polja ne budu popunjena.",
     "save-button": "Spremi",
     "cancel-button": "Odbaci",
     "delete-tooltip": "Brisanje nekretnine",
@@ -132,7 +140,10 @@
     "update-subsequent-months": "trenutni i svi budući mjeseci",
     "update-all-months": "svi mjeseci",
     "validation": {
-      "location-name-required": "Ime nekretnine je obavezno"
+      "location-name-required": "Ime nekretnine je obavezno",
+      "tenant-first-name-required": "nedostaje ime podstanara",
+      "tenant-last-name-required": "nedostaje prezime podstanara",
+      "validation-failed": "Validacija nije uspjela. Molimo provjerite formu i pokušajte ponovno."
     }
   },
   "account-form": {