93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import { LocationCard } from './ui/LocationCard';
|
|
import { MonthTitle } from './ui/MonthTitle';
|
|
import { AddMonthButton } from './ui/AddMonthButton';
|
|
import { AddLocationButton } from './ui/AddLocationButton';
|
|
import { PageFooter } from './ui/PageFooter';
|
|
import { isAuthErrorMessage } from '@/app/lib/auth';
|
|
import { fetchAllLocations } from './lib/locationActions';
|
|
|
|
const getNextYearMonth = (yearMonth:number) => {
|
|
return(yearMonth % 100 === 12 ? yearMonth + 89 : yearMonth + 1);
|
|
}
|
|
|
|
const formatCurrency = (amount:number) => {
|
|
// format number wirh 2 decimal places and a thousand separator
|
|
const formattedAmount = amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
|
|
return(formattedAmount);
|
|
}
|
|
|
|
|
|
export const Page = async () => {
|
|
|
|
const locations = await fetchAllLocations();
|
|
|
|
if(isAuthErrorMessage(locations)) {
|
|
return (
|
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
|
<p className="text-center text-2xl text-red-500">{locations.message}</p>
|
|
</main>);
|
|
}
|
|
|
|
// if the database is in it's initial state, show the add location button for the current month
|
|
if(locations.length === 0) {
|
|
const currentYearMonth = new Date().getFullYear() * 100 + new Date().getMonth() + 1;
|
|
return (
|
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
|
<MonthTitle yearMonth={currentYearMonth} />
|
|
<AddLocationButton yyyymm={currentYearMonth} />
|
|
<PageFooter />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
let monthlyExpense = 0;
|
|
|
|
return (
|
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
|
<AddMonthButton nextYearMonth={getNextYearMonth(locations[0].yearMonth)} />
|
|
{
|
|
locations.map((location, ix, array) => {
|
|
|
|
const isFirstLocationInMonth = ix === 0 || location.yearMonth !== array[ix-1].yearMonth;
|
|
const isLastLocationInMonth = location.yearMonth !== array[ix+1]?.yearMonth;
|
|
const isLastLocationOfFirstMonth = isLastLocationInMonth && location.yearMonth === array[0].yearMonth;
|
|
|
|
if(isFirstLocationInMonth) {
|
|
monthlyExpense = 0;
|
|
}
|
|
|
|
monthlyExpense += location.bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
|
|
|
|
return (
|
|
<>
|
|
{
|
|
// show month title above the first LocationCard in the month
|
|
isFirstLocationInMonth ?
|
|
<MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
|
|
}
|
|
<LocationCard key={`${location._id}`} location={location} />
|
|
{
|
|
// show AddLocationButton as a last item in the firts month
|
|
isLastLocationOfFirstMonth ?
|
|
<AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={location.yearMonth} /> : null
|
|
}
|
|
{
|
|
isLastLocationInMonth && monthlyExpense>0 ?
|
|
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
|
<span className="card-body self-center">
|
|
<p>
|
|
Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense/100) }</strong>
|
|
</p>
|
|
</span>
|
|
</div> : null
|
|
}
|
|
</>
|
|
)
|
|
})
|
|
}
|
|
<PageFooter />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Page; |