Add billedToTenant property to Bill interface with UI support

Added new boolean property to track whether a bill should be paid by the tenant.

Changes:
- Added billedToTenant property to Bill interface in db-types.ts
- Added checkbox UI control in BillEditForm for billedToTenant
- Added state management and change handler for the checkbox
- Added i18n translations (EN: "Billed to tenant", HR: "Plaća podstanar")
- Set default value to true for new bills

Note: Server action implementation pending - property not yet persisted to database.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-17 13:18:15 +01:00
parent c3ca55eedf
commit 0ae5140487
4 changed files with 21 additions and 4 deletions

View File

@@ -38,6 +38,8 @@ export interface Bill {
name: string; name: string;
/** is the bill paid */ /** is the bill paid */
paid: boolean; paid: boolean;
/** true if tenant to cover the bill */
billedToTenant: boolean;
/** payed amount amount in cents */ /** payed amount amount in cents */
payedAmount?: number | null; payedAmount?: number | null;
/** attached document (optional) */ /** attached document (optional) */

View File

@@ -29,7 +29,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
const t = useTranslations("bill-edit-form"); const t = useTranslations("bill-edit-form");
const locale = useLocale(); const locale = useLocale();
const { _id: billID, name, paid, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" }; const { _id: billID, name, paid, billedToTenant, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, billedToTenant:true, notes:"" };
const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location; const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
@@ -40,10 +40,16 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
const [ isScanningPDF, setIsScanningPDF ] = React.useState<boolean>(false); const [ isScanningPDF, setIsScanningPDF ] = React.useState<boolean>(false);
const [ state, dispatch ] = useFormState(handleAction, initialState); const [ state, dispatch ] = useFormState(handleAction, initialState);
const [ isPaid, setIsPaid ] = React.useState<boolean>(paid); const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
const [ isBilledToTenant, setIsBilledToTenant ] = React.useState<boolean>(billedToTenant);
const [ payedAmount, setPayedAmount ] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount/100}` : "" ); const [ payedAmount, setPayedAmount ] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount/100}` : "" );
const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage); const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
const [ barcodeResults, setBarcodeResults ] = React.useState<Array<DecodeResult> | null>(null); const [ barcodeResults, setBarcodeResults ] = React.useState<Array<DecodeResult> | null>(null);
const billedToTenant_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsBilledToTenant(event.target.checked);
}
const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsPaid(event.target.checked); setIsPaid(event.target.checked);
} }
@@ -202,9 +208,16 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
))} ))}
</div> </div>
<div className="form-control mt-4">
<label className="label cursor-pointer">
<span className="label-text">{t("billed-to-tenant")}</span>
<input type="checkbox" name="billedToTenant" className="toggle toggle-primary" checked={isBilledToTenant} onChange={billedToTenant_handleChange} />
</label>
</div>
{/* Show toggle only when adding a new bill (not editing) */} {/* Show toggle only when adding a new bill (not editing) */}
{!bill && ( {!bill && (
<div className="form-control mt-4"> <div className="form-control">
<label className="label cursor-pointer"> <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" /> <input type="checkbox" name="addToSubsequentMonths" className="toggle toggle-primary" />

View File

@@ -103,7 +103,8 @@
"form-error-message": "Form validation error. Please check the form and try again." "form-error-message": "Form validation error. Please check the form and try again."
}, },
"attachment": "Attachment", "attachment": "Attachment",
"back-button": "Back" "back-button": "Back",
"billed-to-tenant": "Billed to tenant"
}, },
"location-delete-form": { "location-delete-form": {
"text": "Please confirm deletion of realestate \"<strong>{name}</strong>\".", "text": "Please confirm deletion of realestate \"<strong>{name}</strong>\".",

View File

@@ -102,7 +102,8 @@
"form-error-message": "Forma nije ispravno popunjena. Molimo provjeri, pa pokušaj ponovno" "form-error-message": "Forma nije ispravno popunjena. Molimo provjeri, pa pokušaj ponovno"
}, },
"attachment": "Privitak", "attachment": "Privitak",
"back-button": "Nazad" "back-button": "Nazad",
"billed-to-tenant": "Plaća podstanar"
}, },
"location-delete-form": { "location-delete-form": {
"text": "Molim potvrdi brisanje nekretnine \"<strong>{name}</strong>\".", "text": "Molim potvrdi brisanje nekretnine \"<strong>{name}</strong>\".",