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;
/** is the bill paid */
paid: boolean;
/** true if tenant to cover the bill */
billedToTenant: boolean;
/** payed amount amount in cents */
payedAmount?: number | null;
/** attached document (optional) */

View File

@@ -29,7 +29,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
const t = useTranslations("bill-edit-form");
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;
@@ -40,10 +40,16 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
const [ isScanningPDF, setIsScanningPDF ] = React.useState<boolean>(false);
const [ state, dispatch ] = useFormState(handleAction, initialState);
const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
const [ isBilledToTenant, setIsBilledToTenant ] = React.useState<boolean>(billedToTenant);
const [ payedAmount, setPayedAmount ] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount/100}` : "" );
const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
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>) => {
setIsPaid(event.target.checked);
}
@@ -202,9 +208,16 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
))}
</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) */}
{!bill && (
<div className="form-control mt-4">
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text">{t("add-to-subsequent-months")}</span>
<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."
},
"attachment": "Attachment",
"back-button": "Back"
"back-button": "Back",
"billed-to-tenant": "Billed to tenant"
},
"location-delete-form": {
"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"
},
"attachment": "Privitak",
"back-button": "Nazad"
"back-button": "Nazad",
"billed-to-tenant": "Plaća podstanar"
},
"location-delete-form": {
"text": "Molim potvrdi brisanje nekretnine \"<strong>{name}</strong>\".",