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

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

Browse Source 
- 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:
Nikola Derežić
2025-12-18 14:59:11 +01:00
parent c817c9be05
commit e9ade045d8
7 changed files with 52 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/ui/LocationCard.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon } from "@heroicons/react/24/outline";
import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { BillBadge } from "./BillBadge";
import { BillingLocation } from "../lib/db-types";
@@ -9,7 +9,6 @@ import { formatCurrency } from "../lib/formatStrings";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { toast } from "react-toastify";
import { get } from "http";
import { generateShareLink } from "../lib/actions/locationActions";
export interface LocationCardProps {
@@ -31,8 +30,9 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
const t = useTranslations("home-page.location-card");
const currentLocale = useLocale();
// sum all the paid bill amounts (regardless of who pays)
const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
// sum all the unpaid and paid bill amounts (regardless of who pays)
const totalUnpaid = bills.reduce((acc, bill) => !bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
const totalPayed = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
const handleCopyLinkClick = async () => {
// copy URL to clipboard
@@ -69,17 +69,27 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
</Link>
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline hover:text-red-500" title="create sharable link" onClick={handleCopyLinkClick} />
</div>
{ monthlyExpense > 0 || seenByTenantAt || utilBillsProofOfPayment?.uploadedAt ?
{ totalUnpaid > 0 || totalPayed > 0 || seenByTenantAt || utilBillsProofOfPayment?.uploadedAt ?
<>
<div className="flex ml-1">
<div className="divider divider-horizontal p-0 m-0"></div>
<div className="card rounded-box grid grow place-items-left place-items-top p-0">
{
monthlyExpense > 0 ?
totalUnpaid > 0 ?
<div className="flex ml-1">
<span className="w-5 min-w-5 mr-2"><ShoppingCartIcon className="mt-[.1rem]" /></span>
<span>
{t("total-due-label")}&nbsp;<strong>{formatCurrency(totalUnpaid, currency ?? "EUR")}</strong>
</span>
</div>
: null
}
{
totalPayed > 0 ?
<div className="flex ml-1">
<span className="w-5 min-w-5 mr-2"><BanknotesIcon className="mt-[.1rem]" /></span>
<span>
{t("payed-total-label")}&nbsp;<strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
{t("total-payed-label")}&nbsp;<strong>{formatCurrency(totalPayed, currency ?? "EUR")}</strong>
<CheckCircleIcon className="h-5 w-5 ml-1 mt-[-.2rem] text-success inline-block" />
</span>
</div>