feat: add separate unpaid and paid bill totals to location cards

- Display both unpaid and paid bill amounts in LocationCard and MonthCard
- Rename variables for clarity: totalUnpaid, totalPayed, unpaidTotal, payedTotal
- ViewLocationCard uses totalAmount for tenant bills (regardless of payment status)
- Update Croatian translations: "Ukupno neplaćeno" (unpaid), "Ukupno plaćeno" (paid)
- Add ShoppingCartIcon for unpaid amounts, BanknotesIcon for paid amounts
- Update HomePage to calculate and pass both totals to month cards

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-18 14:59:11 +01:00
parent c817c9be05
commit e9ade045d8
7 changed files with 52 additions and 27 deletions

View File

@@ -86,7 +86,7 @@ export const ViewLocationCard: FC<ViewLocationCardProps> = ({ location, userSett
};
// sum all the billAmounts (only for bills billed to tenant)
const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0);
const totalAmount = bills.reduce((acc, bill) => (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant ? acc + (bill.payedAmount ?? 0) : acc, 0);
const { hub3aText, paymentParams } = useMemo(() => {
@@ -100,7 +100,7 @@ export const ViewLocationCard: FC<ViewLocationCardProps> = ({ location, userSett
const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0, 19);
const paymentParams: PaymentParams = {
Iznos: (monthlyExpense / 100).toFixed(2).replace(".", ","),
Iznos: (totalAmount / 100).toFixed(2).replace(".", ","),
ImePlatitelja: tenantName ?? "",
AdresaPlatitelja: tenantStreet ?? "",
SjedistePlatitelja: tenantTown ?? "",
@@ -132,9 +132,9 @@ export const ViewLocationCard: FC<ViewLocationCardProps> = ({ location, userSett
}
</div>
{
monthlyExpense > 0 ?
totalAmount > 0 ?
<p className="text-[1.2rem]">
{t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, userSettings?.currency)}</strong>
{t("total-due-label")} <strong>{formatCurrency(totalAmount, userSettings?.currency)}</strong>
</p>
: null
}
@@ -160,7 +160,7 @@ export const ViewLocationCard: FC<ViewLocationCardProps> = ({ location, userSett
}
{
userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ? (() => {
const revolutPaymentUrl = `https://revolut.me/${userSettings.ownerRevolutProfileName?.replace('@', '')}?amount=${(monthlyExpense).toFixed(0)}&currency=${userSettings.currency}`;
const revolutPaymentUrl = `https://revolut.me/${userSettings.ownerRevolutProfileName?.replace('@', '')}?amount=${(totalAmount).toFixed(0)}&currency=${userSettings.currency}`;
return (
<>
<p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>