knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace billedToTenant boolean with billedTo enum

Browse Source 
Migrated from boolean checkbox to enum-based radio buttons for better
flexibility and clarity in tracking bill payment responsibility.

Changes:
- Added BilledTo enum with values 'tenant' and 'landlord'
- Replaced Bill.billedToTenant (boolean) with Bill.billedTo (enum)
- Updated BillEditForm to use radio buttons instead of checkbox
- Updated billActions to handle billedTo enum values
- Updated all display filtering to use enum comparison
- Updated printActions barcode filtering
- Updated translations for radio button labels (en/hr)

The billedTo property is optional for backward compatibility -
undefined values default to BilledTo.Tenant, maintaining current
behavior where only tenant bills are displayed and calculated.

🤖 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:48:28 +01:00
parent f0ccac3f68
commit 1605eec5fb
9 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/ui/BillEditForm.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Bill, BillingLocation } from "../lib/db-types";
import { Bill, BilledTo, BillingLocation } from "../lib/db-types";
import React, { FC } from "react";
import { useFormState } from "react-dom";
import { updateOrAddBill } from "../lib/actions/billActions";
@@ -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, billedToTenant = true, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
const { _id: billID, name, paid, billedTo = BilledTo.Tenant, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
@@ -40,14 +40,14 @@ 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 [ billedToValue, setBilledToValue ] = React.useState<BilledTo>(billedTo);
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 billedTo_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setBilledToValue(event.target.value as BilledTo);
}
const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -209,10 +209,33 @@ 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 className="label">
<span className="label-text">{t("billed-to-label")}</span>
</label>
<div className="flex gap-4">
<label className="label cursor-pointer gap-2">
<input
type="radio"
name="billedTo"
value={BilledTo.Tenant}
className="radio radio-primary"
checked={billedToValue === BilledTo.Tenant}
onChange={billedTo_handleChange}
/>
<span className="label-text">{t("billed-to-tenant-option")}</span>
</label>
<label className="label cursor-pointer gap-2">
<input
type="radio"
name="billedTo"
value={BilledTo.Landlord}
className="radio radio-primary"
checked={billedToValue === BilledTo.Landlord}
onChange={billedTo_handleChange}
/>
<span className="label-text">{t("billed-to-landlord-option")}</span>
</label>
</div>
</div>
{/* Show toggle only when adding a new bill (not editing) */}

6
app/ui/HomePage.tsx
View File

@@ -1,6 +1,6 @@
import { fetchAllLocations } from '@/app/lib/actions/locationActions';
import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
import { BillingLocation, YearMonth } from '@/app/lib/db-types';
import { BilledTo, BillingLocation, YearMonth } from '@/app/lib/db-types';
import { FC } from 'react';
import { MonthLocationList } from '@/app/ui/MonthLocationList';
@@ -49,7 +49,7 @@ export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
[key]: {
yearMonth: location.yearMonth,
locations: [...locationsInMonth.locations, location],
monthlyExpense: locationsInMonth.monthlyExpense + location.bills.reduce((acc, bill) => (bill.paid && (bill.billedToTenant ?? true)) ? acc + (bill.payedAmount ?? 0) : acc, 0)
monthlyExpense: locationsInMonth.monthlyExpense + location.bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0)
}
})
}
@@ -59,7 +59,7 @@ export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
[key]: {
yearMonth: location.yearMonth,
locations: [location],
monthlyExpense: location.bills.reduce((acc, bill) => (bill.paid && (bill.billedToTenant ?? true)) ? acc + (bill.payedAmount ?? 0) : acc, 0)
monthlyExpense: location.bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0)
}
});
}, {} as {[key:string]:{

6
app/ui/LocationCard.tsx
View File

@@ -3,7 +3,7 @@
import { Cog8ToothIcon, PlusCircleIcon, ShareIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { BillBadge } from "./BillBadge";
import { BillingLocation } from "../lib/db-types";
import { BilledTo, BillingLocation } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
import { formatCurrency } from "../lib/formatStrings";
import Link from "next/link";
@@ -20,7 +20,7 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
const currentLocale = useLocale();
// sum all the billAmounts (only for bills billed to tenant)
const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedToTenant ?? true)) ? acc + (bill.payedAmount ?? 0) : acc, 0);
const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0);
const handleCopyLinkClick = () => {
// copy URL to clipboard
@@ -40,7 +40,7 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
<h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions">
{
bills.filter(bill => bill.billedToTenant ?? true).map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
bills.filter(bill => (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant).map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
}
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block" /><span className="ml-1 text-xs ml-[0.2rem]">{t("add-bill-button-tooltip")}</span>

6
app/ui/ViewLocationCard.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { FC } from "react";
import { BillingLocation } from "../lib/db-types";
import { BilledTo, BillingLocation } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
import { formatCurrency } from "../lib/formatStrings";
import { useTranslations } from "next-intl";
@@ -16,7 +16,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, nam
const t = useTranslations("home-page.location-card");
// sum all the billAmounts (only for bills billed to tenant)
const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedToTenant ?? true)) ? acc + (bill.payedAmount ?? 0) : acc, 0);
const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0);
return(
<div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[350px] bg-base-100 border-1 border-neutral my-1">
@@ -24,7 +24,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, nam
<h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions mt-[1em] mb-[1em]">
{
bills.filter(bill => bill.billedToTenant ?? true).map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
bills.filter(bill => (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant).map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
}
</div>
{