f0ccac3f68
Updated all components to respect the billedToTenant flag: - LocationCard: Filter bills display and monthlyExpense calculation - ViewLocationCard: Filter bills display and monthlyExpense calculation - HomePage: Update monthlyExpense calculations for month grouping - printActions: Filter barcode print data to only include tenant bills All filtering uses (bill.billedToTenant ?? true) for backward compatibility with existing bills that don't have this property set. This ensures users only see and calculate expenses for bills that are the tenant's responsibility. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
2.9 KiB
TypeScript
60 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { Cog8ToothIcon, PlusCircleIcon, ShareIcon } 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";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { toast, useToast } from "react-toastify";
|
|
|
|
export interface LocationCardProps {
|
|
location: BillingLocation
|
|
}
|
|
|
|
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
|
|
|
|
const t = useTranslations("home-page.location-card");
|
|
const currentLocale = useLocale();
|
|
|
|
// sum all the billAmounts (only for bills billed to tenant)
|
|
const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedToTenant ?? true)) ? acc + (bill.payedAmount ?? 0) : acc, 0);
|
|
|
|
const handleCopyLinkClick = () => {
|
|
// copy URL to clipboard
|
|
const url = `${window.location.origin}/${currentLocale}/share/location/${_id}`;
|
|
navigator.clipboard.writeText(url);
|
|
|
|
// use NextJS toast to notiy user that the link was copied
|
|
toast.success(t("link-copy-message"), {theme: "dark"});
|
|
}
|
|
|
|
return(
|
|
<div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
|
|
<div className="card-body">
|
|
<Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
|
|
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
|
|
</Link>
|
|
<h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
|
|
<div className="card-actions">
|
|
{
|
|
bills.filter(bill => bill.billedToTenant ?? true).map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
|
|
}
|
|
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
|
|
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block" /><span className="ml-1 text-xs ml-[0.2rem]">{t("add-bill-button-tooltip")}</span>
|
|
</Link>
|
|
</div>
|
|
{
|
|
monthlyExpense > 0 ?
|
|
<p>
|
|
{ t("payed-total-label") } <strong>${formatCurrency(monthlyExpense)}</strong>
|
|
</p>
|
|
: null
|
|
}
|
|
|
|
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block hover:text-red-500" title="create sharable link" style={{ position: "absolute", bottom: ".6em", right: "1.2em" }} onClick={handleCopyLinkClick} />
|
|
</div>
|
|
</div>);
|
|
}; |