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>
2025-12-18 14:59:11 +01:00
parent c817c9be05
commit e9ade045d8
7 changed files with 52 additions and 27 deletions
--- a/app/ui/HomePage.tsx
+++ b/app/ui/HomePage.tsx
@@ -51,7 +51,8 @@ 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 ? acc + (bill.payedAmount ?? 0) : acc, 0)
+          unpaidTotal: locationsInMonth.unpaidTotal + location.bills.reduce((acc, bill) => !bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0),
+          payedTotal: locationsInMonth.payedTotal + location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
        }
      })
    }
@@ -61,13 +62,15 @@ export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
      [key]: {
        yearMonth: location.yearMonth,
        locations: [location],
-        monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
+        unpaidTotal: location.bills.reduce((acc, bill) => !bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0),
+        payedTotal: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
      }
    });
  }, {} as {[key:string]:{
    yearMonth: YearMonth,
    locations: BillingLocation[],
-    monthlyExpense: number
+    unpaidTotal: number,
+    payedTotal: number
  } });

 return (
--- a/app/ui/LocationCard.tsx
+++ b/app/ui/LocationCard.tsx
@@ -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>
--- a/app/ui/MonthCard.tsx
+++ b/app/ui/MonthCard.tsx
@@ -9,13 +9,14 @@ import { useTranslations } from "next-intl";
 export interface MonthCardProps {
    yearMonth: YearMonth,
    children?: React.ReactNode,
-    monthlyExpense:number,
+    unpaidTotal: number,
+    payedTotal: number,
    currency?: string | null,
    expanded?:boolean,
    onToggle: (yearMonth:YearMonth) => void
 }

-export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, currency, expanded, onToggle }) => {
+export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, unpaidTotal, payedTotal, currency, expanded, onToggle }) => {

  const elRef = useRef<HTMLDivElement>(null);
  const t = useTranslations("home-page.month-card");
@@ -37,9 +38,15 @@ export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpen
      <div className={`collapse-title text-xl font-medium ${expanded ? "text-white" : ""}`}>
        {`${formatYearMonth(yearMonth)}`}
        {
-          monthlyExpense>0 ?
+          unpaidTotal>0 ?
            <p className="text-xs font-medium">
-              {t("payed-total-label")} <strong>{ formatCurrency(monthlyExpense, currency ?? "EUR") }</strong>
+              {t("total-due-label")} <strong>{ formatCurrency(unpaidTotal, currency ?? "EUR") }</strong>
+            </p> : null
+        }
+        {
+          payedTotal>0 ?
+            <p className="text-xs font-medium">
+              {t("total-payed-label")} <strong>{ formatCurrency(payedTotal, currency ?? "EUR") }</strong>
            </p> : null
        }
      </div>
--- a/app/ui/MonthLocationList.tsx
+++ b/app/ui/MonthLocationList.tsx
@@ -27,7 +27,8 @@ export interface MonthLocationListProps {
        [key: string]: {
            yearMonth: YearMonth;
            locations: BillingLocation[];
-            monthlyExpense: number;
+            payedTotal: number;
+            unpaidTotal: number;
        };
    };
    userSettings?: UserSettings | null;
@@ -93,7 +94,7 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
      
        return(
            <>
-            <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0} currency={userSettings?.currency} onToggle={() => {}} expanded={true} >
+            <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} unpaidTotal={0} payedTotal={0} currency={userSettings?.currency} onToggle={() => {}} expanded={true} >
                <AddLocationButton yearMonth={currentYearMonth} />
            </MonthCard>
        </>)
@@ -117,8 +118,8 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
    return(<>
            <AddMonthButton yearMonth={getNextYearMonth(monthsArray[0][1].locations[0].yearMonth)} />
            {
-                monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) =>
-                    <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} currency={userSettings?.currency} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
+                monthsArray.map(([monthKey, { yearMonth, locations, unpaidTotal, payedTotal }], monthIx) =>
+                    <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} unpaidTotal={unpaidTotal} payedTotal={payedTotal} currency={userSettings?.currency} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
                        {
                            yearMonth.month === expandedMonth ?
                                locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} currency={userSettings?.currency} />)
--- a/app/ui/ViewLocationCard.tsx
+++ b/app/ui/ViewLocationCard.tsx
@@ -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>