44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
'client only';
|
|
|
|
import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
|
|
import { FC } from "react";
|
|
import { BillBadge } from "./BillBadge";
|
|
import { BillingLocation } from "../lib/db-types";
|
|
import { formatYearMonth } from "../lib/format";
|
|
import { formatCurrency } from "../lib/formatStrings";
|
|
import Link from "next/link";
|
|
|
|
export interface LocationCardProps {
|
|
location: BillingLocation
|
|
}
|
|
|
|
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 data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1">
|
|
<div className="card-body">
|
|
<Link 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" />
|
|
</Link>
|
|
<h2 className="card-title mr-[2em]">{formatYearMonth(yearMonth)} {name}</h2>
|
|
<div className="card-actions">
|
|
{
|
|
bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
|
|
}
|
|
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
|
|
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
|
|
</Link>
|
|
</div>
|
|
{
|
|
monthlyExpense > 0 ?
|
|
<p>
|
|
Payed total: <strong>{ formatCurrency(monthlyExpense) }</strong>
|
|
</p>
|
|
: null
|
|
}
|
|
</div>
|
|
</div>);
|
|
}; |