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>
39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { FC } from "react";
|
|
import { BillingLocation } from "../lib/db-types";
|
|
import { formatYearMonth } from "../lib/format";
|
|
import { formatCurrency } from "../lib/formatStrings";
|
|
import { useTranslations } from "next-intl";
|
|
import { ViewBillBadge } from "./ViewBillBadge";
|
|
|
|
export interface ViewLocationCardProps {
|
|
location: BillingLocation
|
|
}
|
|
|
|
export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
|
|
|
|
const t = useTranslations("home-page.location-card");
|
|
|
|
// 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);
|
|
|
|
return(
|
|
<div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[350px] bg-base-100 border-1 border-neutral my-1">
|
|
<div className="card-body">
|
|
<h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {name}</h2>
|
|
<div className="card-actions mt-[1em] mb-[1em]">
|
|
{
|
|
bills.filter(bill => bill.billedToTenant ?? true).map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
|
|
}
|
|
</div>
|
|
{
|
|
monthlyExpense > 0 ?
|
|
<p className="text-[1.2rem]">
|
|
{ t("payed-total-label") } <strong>${formatCurrency(monthlyExpense)}</strong>
|
|
</p>
|
|
: null
|
|
}
|
|
</div>
|
|
</div>);
|
|
}; |