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>
This commit is contained in:
Knee Cola
@@ -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,
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -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: [],
|
||||
});
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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,44 +20,145 @@ 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 &&
|
||||
<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" />
|
||||
</Link>
|
||||
<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" />
|
||||
</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) => (
|
||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||
{error}
|
||||
</p>
|
||||
))}
|
||||
state.errors.locationName.map((error: string) => (
|
||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||
{error}
|
||||
</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) => (
|
||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||
{error}
|
||||
</p>
|
||||
))}
|
||||
state.errors.locationNotes.map((error: string) => (
|
||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||
{error}
|
||||
</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 */}
|
||||
@@ -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">
|
||||
{state.message}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-red-500">
|
||||
{state.message}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
@@ -108,9 +209,8 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
|
||||
)
|
||||
}
|
||||
|
||||
export const LocationEditFormSkeleton:FC = () =>
|
||||
{
|
||||
return(
|
||||
export const LocationEditFormSkeleton: 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 id="locationName" className="input w-full skeleton"></div>
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user