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

added location total to UI

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-09 10:51:05 +01:00
parent c0b108bc65
commit c76a69df5b
3 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/lib/formatStrings.ts Normal file
View File

@@ -0,0 +1,6 @@
export const formatCurrency = (amount:number) => {
// format number wirh 2 decimal places and a thousand separator
const formattedAmount = (amount/100).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
return(formattedAmount);
}

8
app/page.tsx
View File

@@ -5,18 +5,12 @@ import { AddLocationButton } from './ui/AddLocationButton';
import { PageFooter } from './ui/PageFooter';
import { isAuthErrorMessage } from '@/app/lib/auth';
import { fetchAllLocations } from './lib/locationActions';
import { formatCurrency } from './lib/formatStrings';
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();

48
app/ui/LocationCard.tsx
View File

@@ -5,25 +5,39 @@ import { FC } from "react";
import { BillBadge } from "./BillBadge";
import { BillingLocation } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
import { formatCurrency } from "../lib/formatStrings";
export interface LocationCardProps {
location: BillingLocation
}
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) =>
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
</a>
<h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions">
{
bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
}
<a href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
</a>
</div>
</div>
</div>;
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
// sum all the billAmounts
const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
return(
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
</a>
<h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions">
{
bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
}
<a href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
</a>
</div>
{
monthlyExpense > 0 ?
<p>
Payed total: <strong>{ formatCurrency(monthlyExpense) }</strong>
</p>
: null
}
</div>
</div>);
};