371333802a
Implements client-side PDF417 barcode rendering with React component. Uses useEffect to prevent hydration mismatch by generating barcodes only after component mount. Integrates barcode display in location cards. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
41 lines
1.8 KiB
TypeScript
41 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { FC } from "react";
|
|
import { BilledTo, BillingLocation } from "../lib/db-types";
|
|
import { formatYearMonth } from "../lib/format";
|
|
import { formatCurrency } from "../lib/formatStrings";
|
|
import { useTranslations } from "next-intl";
|
|
import { ViewBillBadge } from "./ViewBillBadge";
|
|
import { Pdf417Barcode } from "./Pdf417Barcode";
|
|
|
|
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.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? 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.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant).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
|
|
}
|
|
<Pdf417Barcode />
|
|
</div>
|
|
</div>);
|
|
}; |