Merge branch 'feature/multi-bill-edit' into develop

app/[locale]/home/multi-bill-edit/[year]/[month]/BillToggleBadge.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react"
+import { Bill } from "@/app/lib/db-types"
+import { TicketIcon } from "@heroicons/react/24/outline"
+
+export interface BillBadgeProps {
+    locationId: string,
+    bill: Pick<Bill, 'name' | 'paid' | 'hasAttachment' | 'proofOfPayment'>,
+    onClick?: () => void
+};
+
+export const BillToggleBadge:FC<BillBadgeProps> = ({ bill: { name, paid, hasAttachment, proofOfPayment }, onClick}) => {
+
+    const className = `badge badge-lg ${paid?"badge-success":" badge-outline"} ${ !paid && hasAttachment ? "btn-outline btn-success" : "" }  cursor-pointer`;
+
+    return (
+        <div className={className} onClick={onClick}>
+            {name}
+            {
+                proofOfPayment?.uploadedAt ? 
+                <TicketIcon className="h-[1em] w-[1em]  inline-block ml-1" /> : null
+            }
+        </div>
+    );
+}

app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { FC, useState } from "react";
+import { BillingLocation, YearMonth } from "../../../../../lib/db-types";
+import { formatYearMonth } from "../../../../../lib/format";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { updateMonth } from "../../../../../lib/actions/monthActions";
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { BillToggleBadge } from "./BillToggleBadge";
+
+export interface MultiBillEditProps {
+    locations: BillingLocation[];
+    year: number;
+    month: number;
+}
+
+interface BillState {
+    locationId: string;
+    billId: string;
+    paid: boolean;
+}
+
+export const MultiBillEdit: FC<MultiBillEditProps> = ({ locations, year, month }) => {
+    const t = useTranslations("multi-bill-edit");
+    const router = useRouter();
+
+    const [isSaving, setIsSaving] = useState(false);
+
+    const [billStates, setBillStates] = useState<BillState[]>(() =>
+        locations.flatMap(location =>
+            location.bills.map(bill => ({
+                locationId: location._id,
+                billId: bill._id,
+                paid: bill.paid,
+            }))
+        )
+    );
+
+    const [allPaidMode, setAllPaidMode] = useState(() =>
+        billStates.length > 0 && billStates.every(bill => bill.paid)
+    );
+
+    // Toggle individual bill paid status
+    const handleBillToggle = (locationId: string, billId: string) => {
+        setBillStates(prevStates =>
+            prevStates.map(state =>
+                state.locationId === locationId && state.billId === billId
+                    ? { ...state, paid: !state.paid }
+                    : state
+            )
+        );
+    };
+
+    // Toggle all bills paid status
+    const handleSetAllAsPayed = () => {
+        const newPaidState = !allPaidMode;
+        setAllPaidMode(newPaidState);
+        setBillStates(prevStates =>
+            prevStates.map(state => ({ ...state, paid: newPaidState }))
+        );
+    };
+
+    // Save changes to database
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            const updates = billStates.map(state => ({
+                locationId: state.locationId,
+                billId: state.billId,
+                paid: state.paid,
+            }));
+
+            await updateMonth({ year, month }, updates);
+
+        } catch (error) {
+            console.error('Error saving bill updates:', error);
+            toast.error(t("save-error-message"), { theme: "dark" });
+            setIsSaving(false);
+        }
+    };
+
+    // Cancel and return to home page
+    const handleCancel = () => {
+        router.push(`/home?year=${year}`);
+    };
+
+    // Get bill state for a specific bill
+    const getBillState = (locationId: string, billId: string): boolean => {
+        const state = billStates.find(
+            s => s.locationId === locationId && s.billId === billId
+        );
+        return state?.paid ?? false;
+    };
+
+    const yearMonth: YearMonth = { year, month };
+
+    return (
+        <div className={`collapse bg-base-200 my-1 sm:min-w-[25em] border-2 border-neutral`}>
+            <h1 className="text-xl font-medium text-white collapse-title ml-1">{formatYearMonth(yearMonth)}</h1>
+            <div className="absolute cursor-pointer top-4 right-[20px]">
+                <BillToggleBadge locationId={"dummy"}
+                    bill={{ paid:allPaidMode, name: allPaidMode ? t("set-all-as-unpaid-button") : t("set-all-as-paid-button"), hasAttachment: false, proofOfPayment: undefined }}
+                    onClick={handleSetAllAsPayed}
+                    />
+            </div>
+            <div className="p-[16px] pt-0">
+                {locations.map(location => (
+                    <div key={location._id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral mb-2">
+                        <div className="card-body">
+                            <h2 className="card-title text-[1rem]">
+                                {formatYearMonth(yearMonth)} {location.name}
+                            </h2>
+                            <div className="space-y-4 mt-[-.5rem]">
+                                {location.bills.length > 0 ? (
+                                    <div className="flex flex-wrap gap-2 mt-2">
+                                        {location.bills.map(bill => {
+                                            const isPaid = getBillState(location._id, bill._id);
+                                            return (
+                                                <BillToggleBadge
+                                                    key={bill._id}
+                                                    locationId={location._id}
+                                                    bill={{ ...bill, paid: isPaid }}
+                                                    onClick={() => handleBillToggle(location._id, bill._id)}
+                                                />
+                                            );
+                                        })}
+                                    </div>
+                                ) : (
+                                    <p className="text-sm text-gray-500">{t("no-bills-message")}</p>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+                {/* Action buttons */}
+                <div className="pt-4">
+                    <button
+                        onClick={handleSave}
+                        className="btn btn-primary ml-3"
+                        disabled={isSaving}
+                    >
+                        {isSaving ? (
+                            <>
+                                <span className="loading loading-spinner loading-sm"></span>
+                                {t("saving-button")}
+                            </>
+                        ) : (
+                            t("save-button")
+                        )}
+                    </button>
+                    <button
+                        onClick={handleCancel}
+                        className="btn btn-neutral ml-3"
+                        disabled={isSaving}
+                    >
+                        {t("cancel-button")}
+                    </button>
+                </div>
+            </div>
+            <ToastContainer />
+        </div>
+    );
+};

app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { InboxStackIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline';
+import { useTranslations } from 'next-intl';
+import { YearMonth } from '../../../../../lib/db-types';
+import Link from 'next/link';
+
+export interface MultiBillEditButtonProps {
+  yearMonth: YearMonth;
+}
+
+export const MultiBillEditButton: React.FC<MultiBillEditButtonProps> = ({ yearMonth }) => {
+  
+  const t = useTranslations("home-page.multi-bill-edit-button");
+
+  return (
+    <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
+      <Link href={`/home/multi-bill-edit/${yearMonth.year}/${yearMonth.month}`} className="card-body tooltip self-center" data-tip={t("tooltip")} data-umami-event="add-new-location">
+        <span className='flex self-center'>
+          <Square3Stack3DIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
+          <span className="ml-1 self-center text-xs text-left leading-[1.2em] w-[5.5em]">{t("tooltip")}</span>
+        </span>
+      </Link>
+    </div>
+  );
+};

app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditPage.tsx

@@ -0,0 +1,16 @@
+import { notFound } from 'next/navigation';
+import { MultiBillEdit } from '@/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit';
+import { getLocationsByMonth } from '@/app/lib/actions/monthActions';
+
+export default async function MultiBillEditPage({ year, month }: { year: number; month: number }) {
+
+    const locations = await getLocationsByMonth({ year, month });
+
+    if (!locations || locations.length === 0) {
+        return(notFound());
+    }
+
+    const result = <MultiBillEdit locations={locations} year={year} month={month} />;
+
+    return (result);
+}

app/[locale]/home/multi-bill-edit/[year]/[month]/not-found.tsx

@@ -0,0 +1,6 @@
+import { NotFoundPage } from '@/app/ui/NotFoundPage';
+ 
+const MultiBillEditNotFound = () =>
+<NotFoundPage title="404 Month Not Found" description="Could not find the requested month." />;
+
+export default MultiBillEditNotFound;

app/[locale]/home/multi-bill-edit/[year]/[month]/page.tsx

@@ -0,0 +1,21 @@
+import { Suspense } from 'react';
+import MultiBillEditPage from './MultiBillEditPage';
+import { Main } from '@/app/ui/Main';
+
+const MultiBillEditSkeleton = () => (
+    <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-base-300">
+        <span className="loading loading-spinner loading-lg"></span>
+        <p className="mt-4">Loading...</p>
+    </div>
+);
+
+export default async function Page({ params }: { params: { year: string; month: string } }) {
+
+    return (
+        <Main>
+            <Suspense fallback={<MultiBillEditSkeleton />}>
+                <MultiBillEditPage year={parseInt(params.year)} month={parseInt(params.month)} />
+            </Suspense>
+        </Main>
+    );
+}

app/lib/actions/monthActions.ts

@@ -5,7 +5,9 @@ import { ObjectId } from 'mongodb';
 import { Bill, BillingLocation, YearMonth } from '../db-types';
 import { AuthenticatedUser } from '../types/next-auth';
 import { withUser } from '../auth';
-import { unstable_noStore as noStore } from 'next/cache';
+import { unstable_noStore as noStore, unstable_noStore, revalidatePath } from 'next/cache';
+import { getLocale } from 'next-intl/server';
+import { gotoHomeWithMessage } from './navigationActions';
 
 /**
  * Server-side action which adds a new month to the database
@@ -82,3 +84,137 @@ export const fetchAvailableYears = withUser(async (user:AuthenticatedUser) => {
 
     return(sortedYears);
 })
+
+/**
+ * Fetches all locations for a specific month for the authenticated user
+ * Only projects essential fields needed for the multi-bill-edit page
+ * @param yearMonth - The year and month to fetch
+ * @returns Array of locations with minimal bill data
+ */
+export const getLocationsByMonth = withUser(async (user: AuthenticatedUser, yearMonth: YearMonth) => {
+    
+    unstable_noStore();
+
+    const { id: userId } = user;
+    const dbClient = await getDbClient();
+
+    // Use aggregation pipeline to calculate hasAttachment field
+    const locations = await dbClient.collection<BillingLocation>("lokacije")
+        .aggregate([
+            {
+                $match: {
+                    userId,
+                    yearMonth: {
+                        year: yearMonth.year,
+                        month: yearMonth.month,
+                    }
+                }
+            },
+            {
+                $addFields: {
+                    _id: { $toString: "$_id" },
+                    bills: {
+                        $map: {
+                            input: "$bills",
+                            as: "bill",
+                            in: {
+                                _id: { $toString: "$$bill._id" },
+                                name: "$$bill.name",
+                                paid: "$$bill.paid",
+                                hasAttachment: { $ne: ["$$bill.attachment", null] },
+                                proofOfPayment: "$$bill.proofOfPayment",
+                            },
+                        },
+                    }
+                }
+            },
+            {
+                $project: {
+                    "_id": 1,
+                    "name": 1,
+                    "yearMonth.year": 1,
+                    "yearMonth.month": 1,
+                    "bills._id": 1,
+                    "bills.name": 1,
+                    "bills.paid": 1,
+                    "bills.hasAttachment": 1,
+                    "bills.proofOfPayment.uploadedAt": 1,
+                }
+            },
+            {
+                $sort: {
+                    name: 1,
+                },
+            },
+        ])
+        .toArray();
+
+    return locations as Array<BillingLocation>;
+});
+
+/**
+ * Updates the paid status of bills for locations in a specific month
+ * @param yearMonth - The year and month to update
+ * @param updates - Array of updates with locationId, billId, and paid status
+ * @returns Success status
+ */
+export const updateMonth = withUser(async (
+    user: AuthenticatedUser,
+    yearMonth: YearMonth,
+    updates: Array<{ locationId: string; billId: string; paid: boolean }>
+) => {
+    unstable_noStore();
+
+    const { id: userId } = user;
+    const dbClient = await getDbClient();
+
+    // Group updates by location to minimize database operations
+    const updatesByLocation = updates.reduce((acc, update) => {
+        if (!acc[update.locationId]) {
+            acc[update.locationId] = [];
+        }
+        acc[update.locationId].push(update);
+        return acc;
+    }, {} as Record<string, typeof updates>);
+
+    // Perform bulk updates
+    const updatePromises = Object.entries(updatesByLocation).map(
+        async ([locationId, locationUpdates]) => {
+            // For each bill update in this location
+            const billUpdatePromises = locationUpdates.map(({ billId, paid }) =>
+                dbClient.collection<BillingLocation>("lokacije").updateOne(
+                    {
+                        _id: locationId,
+                        userId, // Ensure the location belongs to the authenticated user
+                        yearMonth: {
+                            year: yearMonth.year,
+                            month: yearMonth.month,
+                        },
+                        'bills._id': billId,
+                    },
+                    {
+                        $set: {
+                            'bills.$.paid': paid,
+                        },
+                    }
+                )
+            );
+
+            return Promise.all(billUpdatePromises);
+        }
+    );
+
+    await Promise.all(updatePromises);
+
+    // Revalidate the home page and multi-edit page to show fresh data
+    revalidatePath('/home');
+    revalidatePath(`/home/multi-bill-edit/${yearMonth.year}/${yearMonth.month}`);
+
+    // Redirect to home page with year and month parameters, including success message
+    if (yearMonth) {
+        const locale = await getLocale();
+        await gotoHomeWithMessage(locale, 'bill-multi-edit-saved', yearMonth);
+    }
+
+    return { success: true };
+});

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 (

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>

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>

app/ui/MonthLocationList.tsx

@@ -12,6 +12,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useTranslations } from "next-intl";
+import { MultiBillEditButton } from "../[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton";
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
     const {year, month} = yearMonth;
@@ -27,7 +28,8 @@ export interface MonthLocationListProps {
         [key: string]: {
             yearMonth: YearMonth;
             locations: BillingLocation[];
-            monthlyExpense: number;
+            payedTotal: number;
+            unpaidTotal: number;
         };
     };
     userSettings?: UserSettings | null;
@@ -83,6 +85,12 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
             params.delete('locationDeleted');
             messageShown = true;
         }
+
+        if (search.get('bill-multi-edit-saved') === 'true') {
+            toast.success(t("bill-multi-edit-save-success-message"), { theme: "dark" });
+            params.delete('bill-multi-edit-saved');
+            messageShown = true;
+        }
     }, [search, router, t]);
 
     if(!availableYears || !months) {
@@ -93,7 +101,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 +125,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} />)
@@ -127,6 +135,7 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
                         <div className="flex gap-2 justify-center">
                         <AddLocationButton yearMonth={yearMonth} />
                         <PrintButton yearMonth={yearMonth} />
+                        <MultiBillEditButton yearMonth={yearMonth} />
                         </div>
                     </MonthCard>
                 )

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>

messages/en.json

@@ -58,10 +58,14 @@
     "add-month-button": {
       "tooltip": "Add next mont"
     },
+    "multi-bill-edit-button": {
+      "tooltip": "Multi Bills Edit"
+    },
     "location-card": {
       "edit-card-tooltip": "Edit realestate",
       "add-bill-button-tooltip": "Add a new bill",
-      "payed-total-label": "Payed total:",
+      "total-due-label": "Total due:",
+      "total-payed-label": "Total payed:",
       "link-copy-message": "Link copied to clipboard",
       "monthly-statement-legend": "Monthly statement",
       "seen-by-tenant-label": "seen by tenant",
@@ -81,7 +85,8 @@
       "revolut-link-text": "Pay with Revolut"
     },
     "month-card": {
-      "payed-total-label": "Total monthly expenditure:",
+      "total-due-label": "Monthly due total:",
+      "total-payed-label": "Monthly payed total:",
       "print-codes-tooltip": "Print 2D codes",
       "print-codes-label": "Print codes"
     },
@@ -101,7 +106,8 @@
     "bill-saved-message": "Bill saved successfully",
     "bill-deleted-message": "Bill deleted successfully",
     "location-saved-message": "Location saved successfully",
-    "location-deleted-message": "Location deleted successfully"
+    "location-deleted-message": "Location deleted successfully",
+    "bill-multi-edit-save-success-message": "Changes saved successfully"
   },
   "bill-delete-form": {
     "text": "Please confirm deletion of bill \"<strong>{bill_name}</strong>\" at \"<strong>{location_name}</strong>\".",
@@ -151,7 +157,6 @@
     "location-name-legend": "Realestate name",
     "location-name-placeholder": "enter realestate name",
     "notes-placeholder": "notes",
-
     "proof-of-payment-attachment-type--legend": "Proof of Payment",
     "proof-of-payment-attachment-type--info": "Here you can choose how the tenant can provide proof of payment for utilities. Select the option that best matches the payment arrangement you have agreed upon.",
     "proof-of-payment-attachment-type--option--label": "Tenant provides ...",
@@ -162,24 +167,20 @@
     "proof-of-payment-attachment-type--option--combined--hint": "💡 with the selected option you might also want to activate <strong>payment instructions</strong> - see above",
     "proof-of-payment-attachment-type--option--per-bill": "✂️ separate proof of payment for each bill",
     "proof-of-payment-attachment-type--option--per-bill--tooltip": "The selected option is useful if the tenant pays utilities directly to individual service providers",
-
     "tenant-payment-instructions-legend": "PAYMENT INSTRUCTIONS",
     "tenant-payment-instructions-code-info": "When the tenant opens the link to the statement for the given month, the application can show payment instructions for utility costs to your IBAN, as well as a 2D code they can scan.",
-
     "tenant-payment-instructions-method--legend": "Show payment instructions to tenant:",
     "tenant-payment-instructions-method--none": "⛔ do not show payment instructions",
     "tenant-payment-instructions-method--iban": "🏛️ payment via IBAN",
     "tenant-payment-instructions-method--iban-disabled": "payment via IBAN - disabled in app settings",
     "tenant-payment-instructions-method--revolut": "🅡 payment via Revolut",
     "tenant-payment-instructions-method--revolut-disabled": "payment via Revolut - disabled in app settings",
-
     "iban-payment--tenant-name-label": "Tenant First and Last Name",
     "iban-payment--tenant-name-placeholder": "enter tenant's first and last name",
     "iban-payment--tenant-street-label": "Tenant Street and House Number",
     "iban-payment--tenant-street-placeholder": "enter tenant's street",
     "iban-payment--tenant-town-label": "Tenant Postal Code and Town",
     "iban-payment--tenant-town-placeholder": "enter tenant's town",
-
     "auto-utility-bill-forwarding-legend": "Automatic utility bill forwarding",
     "auto-utility-bill-forwarding-info": "This option enables automatic forwarding of utility bills to the tenant via email according to the selected forwarding strategy.",
     "auto-utility-bill-forwarding-toggle-label": "forward utility bills",
@@ -220,12 +221,10 @@
   },
   "user-settings-form": {
     "title": "User settings",
-
     "iban-payment-instructions--legend": "Payment to Your IBAN",
     "iban-payment-instructions--intro-title": "What does this option do?",
     "iban-payment-instructions--intro-message": "By activating this option, the monthly statement sent to the tenant will contain payment details and a 2D barcode allowing a direct payment to your bank account.",
     "iban-payment-instructions--toggle-label": "enable IBAN payment instructions",
-
     "iban-form-title": "Payment Information for IBAN",
     "iban-owner-name-label": "Your First and Last Name",
     "iban-owner-name-placeholder": "enter your first and last name",
@@ -235,22 +234,17 @@
     "iban-owner-town-placeholder": "enter your postal code and town",
     "iban-owner-iban-label": "IBAN",
     "iban-owner-iban-placeholder": "enter your IBAN for receiving payments",
-
-
     "revolut-form-title": "Payment Information for Revolut",
     "revolut-payment-instructions--legend": "Payment to Your Revolut Profile",
     "revolut-payment-instructions--intro-title": "What does this option do?",
     "revolut-payment-instructions--intro-message": "By activating this option, the monthly statement sent to the tenant will contain a link allowing a direct payment to your Revolut account.",
     "revolut-payment-instructions--toggle-label": "enable Revolut payment instructions",
-
     "revolut-profile-label": "Revolut profile name",
     "revolut-profile-placeholder": "enter your Revolut profile name for receiving payments",
     "revolut-profile-tooltip": "You can find your Revolut profile name in the Revolut app under your user profile. It is displayed below your name and starts with the '@' symbol (e.g., '@john123').",
     "revolut-profile--test-link-label": "Test your Revolut link:",
     "revolut-profile--test-link-text": "Pay with Revolut",
-
     "payment-additional-notes": "IMPORTANT: For the payment instructions to be displayed to the tenant, you must also enable this option in the property's settings.",
-
     "general-settings-legend": "General Settings",
     "currency-label": "Currency",
     "save-button": "Save",
@@ -269,5 +263,20 @@
   },
   "info-box": {
     "default-title": "What is this option for?"
+  },
+  "multi-bill-edit": {
+    "title": "Multi Bill Edit",
+    "loading-message": "Loading...",
+    "error-title": "Error",
+    "no-locations-title": "No Locations",
+    "no-locations-message": "No locations found for the selected month",
+    "no-bills-message": "No bills",
+    "set-all-as-paid-button": "Mark all as paid",
+    "set-all-as-unpaid-button": "Mark all as unpaid",
+    "save-button": "Save",
+    "saving-button": "Saving...",
+    "cancel-button": "Cancel",
+    "back-to-home-button": "Back to Home",
+    "save-error-message": "Error saving changes"
   }
 }

messages/hr.json

@@ -58,10 +58,14 @@
     "add-month-button": {
       "tooltip": "Dodaj idući mjesec"
     },
+    "multi-bill-edit-button": {
+      "tooltip": "Izmjena više računa"
+    },
     "location-card": {
       "edit-card-tooltip": "Izmjeni nekretninu",
       "add-bill-button-tooltip": "Dodaj novi račun",
-      "payed-total-label": "Ukupno plaćeno:",
+      "total-due-label": "Ukupno neplaćeno:",
+      "total-payed-label": "Ukupno plaćeno:",
       "link-copy-message": "Link kopiran na clipboard",
       "monthly-statement-legend": "Obračun",
       "seen-by-tenant-label": "viđeno od strane podstanara",
@@ -81,7 +85,8 @@
       "revolut-link-text": "Plati pomoću Revoluta"
     },
     "month-card": {
-      "payed-total-label": "Ukupni mjesečni trošak:",
+      "total-due-label": "Ukupno neplaćeno u mjesecu:",
+      "total-payed-label": "Ukupno plaćeno u mjesecu:",
       "print-codes-tooltip": "Ispis 2d kodova",
       "print-codes-label": "Ispis kodova"
     },
@@ -101,7 +106,10 @@
     "bill-saved-message": "Račun uspješno spremljen",
     "bill-deleted-message": "Račun uspješno obrisan",
     "location-saved-message": "Nekretnina uspješno spremljena",
-    "location-deleted-message": "Nekretnina uspješno obrisana"
+    "location-deleted-message": "Nekretnina uspješno obrisana",
+    "bill-multi-edit-save-success-message": "Promjene uspješno spremljene",
+    "bill-multi-edit-save-error-message": "Greška pri spremanju promjena",
+    "bill-multi-edit-load-error-message": "Greška pri učitavanju podataka"
   },
   "bill-delete-form": {
     "text": "Molim potvrdi brisanje računa \"<strong>{bill_name}</strong>\" koji pripada nekretnini \"<strong>{location_name}</strong>\".",
@@ -150,7 +158,6 @@
     "location-name-legend": "Realestate name",
     "location-name-placeholder": "unesite naziv nekretnine",
     "notes-placeholder": "bilješke",
-
     "proof-of-payment-attachment-type--legend": "Potvrda o uplati",
     "proof-of-payment-attachment-type--info": "Ovdje možete odabrati na koji način na koji podstanar može priložiti potvrdu o uplati režija. Izaberite način koji najbolje odgovara načinu na koji ste dogovorili plaćanje režija.",
     "proof-of-payment-attachment-type--option--label": "Podstanar prilaže ...",
@@ -161,10 +168,8 @@
     "proof-of-payment-attachment-type--option--combined--hint": "💡 za odabranu opciju dobro je uključiti i <strong>prikaz uputa za uplatu</strong> - vidi gore",
     "proof-of-payment-attachment-type--option--per-bill": "✂️ zasebna potvrda za svaki račun",
     "proof-of-payment-attachment-type--option--per-bill--tooltip": "Odabrana opcija je korisna ako podstanar plaća režije izravno pojedinačnim davateljima usluga",
-
     "tenant-payment-instructions-legend": "Upute za uplatu",
     "tenant-payment-instructions-code-info": "Kada podstanar otvori poveznicu na obračun za zadani mjesec aplikacija mu može prikazati upute za uplatu troškova režija na vaš IBAN ili Revolut.",
-
     "tenant-payment-instructions-method--legend": "Podstanaru prikaži upute za uplatu:",
     "tenant-payment-instructions-method--none": "⛔ ne prikazuj upute za uplatu",
     "tenant-payment-instructions-method--iban": "🏛️ uplata na IBAN",
@@ -172,7 +177,6 @@
     "tenant-payment-instructions-method--revolut": "🅡 uplata na Revolut",
     "tenant-payment-instructions-method--revolut-disabled": "uplata na Revolut - onemogućeno u app postavkama",
     "tenant-payment-instructions-method--disabled-message": "Ova opcija je nedostupna zato što nije omogućena u postavkama aplikacije.",
-
     "iban-payment--form-title": "Informacije za uplatu na IBAN",
     "iban-payment--tenant-name-label": "Ime i prezime podstanara",
     "iban-payment--tenant-name-placeholder": "unesite ime i prezime podstanara",
@@ -180,7 +184,6 @@
     "iban-payment--tenant-street-placeholder": "unesite ulicu podstanara",
     "iban-payment--tenant-town-label": "Poštanski broj i Grad podstanara",
     "iban-payment--tenant-town-placeholder": "unesite poštanski broj i grad podstanara",
-
     "auto-utility-bill-forwarding-legend": "AUTOMATSKO PROSLJEĐIVANJE REŽIJA",
     "auto-utility-bill-forwarding-info": "Ova opcija omogućuje automatsko prosljeđivanje režija podstanaru putem emaila u skladu s odabranom strategijom.",
     "auto-utility-bill-forwarding-toggle-label": "proslijedi režije automatski",
@@ -221,11 +224,9 @@
   },
   "user-settings-form": {
     "title": "Korisničke postavke",
-    
     "iban-payment-instructions--legend": "Uplata na vaš IBAN",
     "iban-payment-instructions--intro-message": "Aktiviranjem ove opcije, mjesečni obračun poslan podstanaru sadržavati će podatke za uplatu i 2D barkod putem kojeg će podstanar moći izvršiti izravnu uplatu sredstava na bankovni račun.",
     "iban-payment-instructions--toggle-label": "omogući IBAN uplatu",
-
     "iban-form-title": "Informacije za uplatu na IBAN",
     "iban-owner-name-label": "Vaše ime i prezime",
     "iban-owner-name-placeholder": "unesite svoje ime i prezime",
@@ -235,18 +236,15 @@
     "iban-owner-town-placeholder": "unesite poštanski broj i grad",
     "iban-owner-iban-label": "IBAN",
     "iban-owner-iban-placeholder": "IBAN putem kojeg ćete primate uplate",
-
     "revolut-payment-instructions--legend": "Uplata na vaš Revolut profil",
     "revolut-payment-instructions--intro-message": "Aktiviranjem ove opcije, mjesečni obračun poslan podstanaru sadržavati će link putem kojeg će podstanar moći izvršiti izravnu uplatu sredstava na vaš Revolut račun.",
     "revolut-payment-instructions--toggle-label": "omogući Revolut uplatu",
-
     "revolut-form-title": "Info za uplatu na Revolut",
     "revolut-profile-label": "Naziv vašeg Revolut profila",
     "revolut-profile-placeholder": "profil putem kojeg ćete primati uplate",
     "revolut-profile-tooltip": "Naziv vašeg Revolut profila možete pronaći u aplikaciji Revolut u korisničkom profilu. Prikazan je ispod vašeg imena i prezimena - počinje sa znakom '@' (npr: '@ivan123').",
     "revolut-profile--test-link-label": "Testiraj svoju Revolut poveznicu:",
     "revolut-profile--test-link-text": "Plati pomoću Revoluta",
-
     "general-settings-legend": "Opće postavke",
     "currency-label": "Valuta",
     "save-button": "Spremi",
@@ -266,5 +264,20 @@
   },
   "info-box": {
     "default-title": "Čemu služi ova opcija?"
+  },
+  "multi-bill-edit": {
+    "title": "Masovna izmjena računa",
+    "loading-message": "Učitavanje...",
+    "error-title": "Greška",
+    "no-locations-title": "Nema lokacija",
+    "no-locations-message": "Nisu pronađene lokacije za odabrani mjesec",
+    "no-bills-message": "Nema računa",
+    "set-all-as-paid-button": "Označi sve kao plaćeno",
+    "set-all-as-unpaid-button": "Označi sve kao neplaćeno",
+    "save-button": "Spremi",
+    "saving-button": "Spremanje...",
+    "cancel-button": "Odustani",
+    "back-to-home-button": "Povratak na početnu",
+    "save-error-message": "Greška pri spremanju promjena"
   }
 }