Add automatic rent notification feature to LocationEditForm

- Add rentDueNotification toggle to enable automatic rent notifications
- Add rentDueDay selector (1-28) for specifying when rent is due
- Extract tenant email to independent section shown when either autoBillFwd or rentDueNotification is enabled
- Update email validation to be mandatory when any automatic notification is active
- Update database schema to persist rentDueNotification and rentDueDay fields
- Add all database operations to handle new fields with proper defaults
- Add localization strings for English and Croatian

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

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

app/lib/actions/locationActions.ts

@@ -21,6 +21,8 @@ export type State = {
         autoBillFwd?: string[];
         tenantEmail?: string[];
         billFwdStrategy?: string[];
+        rentDueNotification?: string[];
+        rentDueDay?: string[];
     };
     message?:string | null;
 };
@@ -39,6 +41,8 @@ const FormSchema = (t:IntlTemplateFn) => z.object({
     autoBillFwd: z.boolean().optional().nullable(),
     tenantEmail: z.string().email(t("tenant-email-invalid")).optional().or(z.literal("")).nullable(),
     billFwdStrategy: z.enum(["when-payed", "when-attached"]).optional().nullable(),
+    rentDueNotification: z.boolean().optional().nullable(),
+    rentDueDay: z.coerce.number().min(1).max(31).optional().nullable(),
     addToSubsequentMonths: z.boolean().optional().nullable(),
     updateScope: z.enum(["current", "subsequent", "all"]).optional().nullable(),
   })
@@ -64,7 +68,7 @@ const FormSchema = (t:IntlTemplateFn) => z.object({
     path: ["tenantLastName"],
   })
   .refine((data) => {
-    if (data.autoBillFwd) {
+    if (data.autoBillFwd || data.rentDueNotification) {
       return !!data.tenantEmail && data.tenantEmail.trim().length > 0;
     }
     return true;
@@ -95,6 +99,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
         autoBillFwd: formData.get('autoBillFwd') === 'on',
         tenantEmail: formData.get('tenantEmail') || null,
         billFwdStrategy: formData.get('billFwdStrategy') as "when-payed" | "when-attached" | undefined,
+        rentDueNotification: formData.get('rentDueNotification') === 'on',
+        rentDueDay: formData.get('rentDueDay') || null,
         addToSubsequentMonths: formData.get('addToSubsequentMonths') === 'on',
         updateScope: formData.get('updateScope') as "current" | "subsequent" | "all" | undefined,
     });
@@ -116,6 +122,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
         autoBillFwd,
         tenantEmail,
         billFwdStrategy,
+        rentDueNotification,
+        rentDueDay,
         addToSubsequentMonths,
         updateScope,
     } = validatedFields.data;
@@ -155,6 +163,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                         autoBillFwd: autoBillFwd || false,
                         tenantEmail: tenantEmail || null,
                         billFwdStrategy: billFwdStrategy || "when-payed",
+                        rentDueNotification: rentDueNotification || false,
+                        rentDueDay: rentDueDay || null,
                     }
                 }
             );
@@ -182,6 +192,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                         autoBillFwd: autoBillFwd || false,
                         tenantEmail: tenantEmail || null,
                         billFwdStrategy: billFwdStrategy || "when-payed",
+                        rentDueNotification: rentDueNotification || false,
+                        rentDueDay: rentDueDay || null,
                     }
                 }
             );
@@ -202,6 +214,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                         autoBillFwd: autoBillFwd || false,
                         tenantEmail: tenantEmail || null,
                         billFwdStrategy: billFwdStrategy || "when-payed",
+                        rentDueNotification: rentDueNotification || false,
+                        rentDueDay: rentDueDay || null,
                     }
                 }
             );
@@ -220,6 +234,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
             autoBillFwd: autoBillFwd || false,
             tenantEmail: tenantEmail || null,
             billFwdStrategy: billFwdStrategy || "when-payed",
+            rentDueNotification: rentDueNotification || false,
+            rentDueDay: rentDueDay || null,
             yearMonth: yearMonth,
             bills: [],
         });
@@ -290,6 +306,8 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
                         autoBillFwd: autoBillFwd || false,
                         tenantEmail: tenantEmail || null,
                         billFwdStrategy: billFwdStrategy || "when-payed",
+                        rentDueNotification: rentDueNotification || false,
+                        rentDueDay: rentDueDay || null,
                         yearMonth: { year: monthData.year, month: monthData.month },
                         bills: [],
                     });

app/lib/db-types.ts

@@ -55,6 +55,10 @@ export interface BillingLocation {
     tenantEmail?: string | null;
     /** (optional) bill forwarding strategy */
     billFwdStrategy?: "when-payed" | "when-attached" | null;
+    /** (optional) whether to automatically send rent notification */
+    rentDueNotification?: boolean | null;
+    /** (optional) day of month when rent is due (1-31) */
+    rentDueDay?: number | null;
 };
 
 export enum BilledTo {

app/ui/LocationEditForm.tsx

@@ -38,6 +38,11 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
         location?.autoBillFwd ?? false
     );
 
+    // Track whether to automatically send rent notification (use persisted value from database)
+    const [rentDueNotification, setrentDueNotification] = useState(
+        location?.rentDueNotification ?? false
+    );
+
     // Track tenant field values for real-time validation
     const [tenantFields, setTenantFields] = useState({
         tenantFirstName: location?.tenantFirstName ?? "",
@@ -168,38 +173,68 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                         </div>
 
                         {autoBillFwd && (
-                            <>
+                            <fieldset className="fieldset mt-2 p-2">
-                                <fieldset className="fieldset mt-2 p-2">
+                                <legend className="fieldset-legend">{t("utility-bill-forwarding-strategy-label")}</legend>
-                                    <legend className="fieldset-legend">{t("utility-bill-forwarding-strategy-label")}</legend>
+                                <select defaultValue={location?.billFwdStrategy ?? "when-payed"} className="select input-bordered w-full" name="billFwdStrategy">
-                                    <select defaultValue={location?.billFwdStrategy ?? "when-payed"} className="select input-bordered w-full" name="billFwdStrategy">
+                                    <option value="when-payed">{t("utility-bill-forwarding-when-payed")}</option>
-                                        <option value="when-payed">{t("utility-bill-forwarding-when-payed")}</option>
+                                    <option value="when-attached">{t("utility-bill-forwarding-when-attached")}</option>
-                                        <option value="when-attached">{t("utility-bill-forwarding-when-attached")}</option>
+                                </select>
-                                    </select>
+                            </fieldset>
-                                </fieldset>
-                                <fieldset className="fieldset mt-2 p-2">
-                                    <legend className="fieldset-legend">{t("tenant-email-label")}</legend>
-                                    <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>
-                                </fieldset>
-                            </>
                         )}
                     </fieldset>
 
+                    <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">{t("auto-rent-notification-legend")}</legend>
+                        <InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox>
+
+                        <div className="form-control">
+                            <label className="label cursor-pointer justify-start gap-3">
+                                <input
+                                    type="checkbox"
+                                    name="rentDueNotification"
+                                    className="toggle toggle-primary"
+                                    checked={rentDueNotification}
+                                    onChange={(e) => setrentDueNotification(e.target.checked)}
+                                />
+                                <span className="label-text">{t("auto-rent-notification-toggle-label")}</span>
+                            </label>
+                        </div>
+
+                        {rentDueNotification && (
+                            <fieldset className="fieldset mt-2 p-2">
+                                <legend className="fieldset-legend">{t("rent-due-day-label")}</legend>
+                                <select defaultValue={location?.rentDueDay ?? 1} className="select input-bordered w-full" name="rentDueDay">
+                                    {Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
+                                        <option key={day} value={day}>{day}</option>
+                                    ))}
+                                </select>
+                            </fieldset>
+                        )}
+                    </fieldset>
+
+                    {(autoBillFwd || rentDueNotification) && (
+                        <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">{t("tenant-email-legend")}</legend>
+                            <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>
+                        </fieldset>
+                    )}
+
                     {/* Show different options for add vs edit operations */}
                     {!location ? (
                         <div className="form-control">

messages/en.json

@@ -134,11 +134,15 @@
     "auto-utility-bill-forwarding-legend": "AUTOMATIC UTILITY BILL FORWARDING",
     "auto-utility-bill-forwarding-info": "This option enables automatic forwarding of utility bills to the tenant via email according to the selected forwarding strategy.",
     "auto-utility-bill-forwarding-toggle-label": "forward utility bills",
-    "tenant-email-label": "Tenant Email",
-    "tenant-email-placeholder": "Enter tenant's email",
     "utility-bill-forwarding-strategy-label": "Forward utility bills when ...",
     "utility-bill-forwarding-when-payed": "all items are marked as paid",
     "utility-bill-forwarding-when-attached": "a bill (PDF) is attached to all items",
+    "auto-rent-notification-legend": "AUTOMATIC RENT NOTIFICATION",
+    "auto-rent-notification-info": "This option enables automatic sending of monthly rent bill to the tenant via email on the specified day of the month.",
+    "auto-rent-notification-toggle-label": "send rent notification",
+    "rent-due-day-label": "Day of month when rent is due",
+    "tenant-email-legend": "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",

messages/hr.json

@@ -133,11 +133,15 @@
     "auto-utility-bill-forwarding-legend": "AUTOMATSKO PROSLJEĐIVANJE REŽIJA",
     "auto-utility-bill-forwarding-info": "Ova opcija omogućuje automatsko prosljeđivanje režija podstanaru putem emaila u skladu s odabranom strategijom.",
     "auto-utility-bill-forwarding-toggle-label": "proslijedi režije automatski",
-    "tenant-email-label": "Email podstanara",
-    "tenant-email-placeholder": "Unesite email podstanara",
     "utility-bill-forwarding-strategy-label": "Režije proslijedi kada...",
     "utility-bill-forwarding-when-payed": "sve stavke označim kao plaćene",
     "utility-bill-forwarding-when-attached": "za sve stavke priložim račun (PDF)",
+    "auto-rent-notification-legend": "AUTOMATSKA OBAVIJEST O NAJAMNINI",
+    "auto-rent-notification-info": "Ova opcija omogućuje automatsko slanje mjesečnog računa za najamninu podstanaru putem emaila na zadani dan u mjesecu.",
+    "auto-rent-notification-toggle-label": "pošalji obavijest o najamnini",
+    "rent-due-day-label": "Dan u mjesecu kada dospijeva najamnina",
+    "tenant-email-legend": "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",