From 0ae514048715f39f830b2e45bf48d2b410bc9a91 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 17 Nov 2025 13:18:15 +0100
Subject: [PATCH] Add billedToTenant property to Bill interface with UI support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/lib/db-types.ts     |  2 ++
 app/ui/BillEditForm.tsx | 17 +++++++++++++++--
 messages/en.json        |  3 ++-
 messages/hr.json        |  3 ++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/lib/db-types.ts b/app/lib/db-types.ts
index d9d6cc8..bf2caef 100644
--- a/app/lib/db-types.ts
+++ b/app/lib/db-types.ts
@@ -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) */
diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index 29a61a1..09581d3 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -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" />
diff --git a/messages/en.json b/messages/en.json
index 90aef68..cbe7c4b 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -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>\".",
diff --git a/messages/hr.json b/messages/hr.json
index bc3cae3..17364e6 100644
--- a/messages/hr.json
+++ b/messages/hr.json
@@ -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>\".",