Files
evidencija-rezija/app/ui/HomePage.tsx
Nikola Derežić e9ade045d8 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

81 lines
2.6 KiB
TypeScript

import { fetchAllLocations } from '@/app/lib/actions/locationActions';
import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
import { BillingLocation, YearMonth } from '@/app/lib/db-types';
import { FC } from 'react';
import { MonthLocationList } from '@/app/ui/MonthLocationList';
export interface HomePageProps {
searchParams?: {
year?: string;
month?: string;
};
}
export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
let availableYears: number[];
// const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
// await asyncTimout(5000);
try {
availableYears = await fetchAvailableYears();
} catch (error:any) {
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<p className="text-center text-2xl text-red-500">{error.message}</p>
</main>);
}
// if the database is in it's initial state, show the add location button for the current month
if(availableYears.length === 0) {
return (<MonthLocationList />);
}
const currentYear = Number(searchParams?.year) || new Date().getFullYear();
const locations = await fetchAllLocations(currentYear);
const userSettings = await getUserSettings();
// group locations by month
const months = locations.reduce((acc, location) => {
const {year, month} = location.yearMonth;
const key = `${year}-${month}`;
const locationsInMonth = acc[key];
if(locationsInMonth) {
return({
...acc,
[key]: {
yearMonth: location.yearMonth,
locations: [...locationsInMonth.locations, location],
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)
}
})
}
return({
...acc,
[key]: {
yearMonth: location.yearMonth,
locations: [location],
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[],
unpaidTotal: number,
payedTotal: number
} });
return (
<MonthLocationList availableYears={availableYears} months={months} userSettings={userSettings} />
);
}
export default HomePage;