Improve payment description formatting in ViewLocationCard

Changes:
- Renamed destructured 'name' to 'locationName' for clarity
- Added locationNameTrimmed_max20 to limit location name to 19 chars
- Updated PozivNaBroj to use formatYearMonth() helper
- Updated OpisPlacanja with trimmed location name and formatYearMonth()
- Added comment documenting 35 character max length constraint
- Updated card title to use renamed locationName variable

This ensures payment descriptions fit within HUB-3A barcode constraints.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-22 22:49:21 +01:00
parent 4db56f8383
commit 54ab3fa375

View File

@@ -16,13 +16,15 @@ export interface ViewLocationCardProps {
export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettings}) => { export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettings}) => {
const { _id, name, yearMonth, bills, tenantName, tenantStreet, tenantTown } = location; const { _id, name: locationName, yearMonth, bills, tenantName, tenantStreet, tenantTown } = location;
const t = useTranslations("home-page.location-card"); const t = useTranslations("home-page.location-card");
// sum all the billAmounts (only for bills billed to tenant) // 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); const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0);
const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0,19);
const paymentParams:PaymentParams = { const paymentParams:PaymentParams = {
Iznos: (monthlyExpense/100).toFixed(2).replace(".",","), Iznos: (monthlyExpense/100).toFixed(2).replace(".",","),
ImePlatitelja: tenantName ?? "", ImePlatitelja: tenantName ?? "",
@@ -33,15 +35,15 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
SjedistePrimatelja: userSettings?.ownerTown ?? "", SjedistePrimatelja: userSettings?.ownerTown ?? "",
IBAN: userSettings?.ownerIBAN ?? "", IBAN: userSettings?.ownerIBAN ?? "",
ModelPlacanja: "HR00", ModelPlacanja: "HR00",
PozivNaBroj: `${yearMonth.year}-${yearMonth.month.toString().padStart(2,"0")}`, PozivNaBroj: formatYearMonth(yearMonth),
SifraNamjene: "", SifraNamjene: "",
OpisPlacanja: `Režije-${name}-${yearMonth.month.toString().padStart(2,"0")}`, OpisPlacanja: `Režije-${locationNameTrimmed_max20}-${formatYearMonth(yearMonth)}`, // max length 35 = "Režije-" (7) + locationName (20) + "-" (1) + "YYYY-MM" (7)
}; };
return( 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 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"> <div className="card-body">
<h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {name}</h2> <h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {locationName}</h2>
<div className="card-actions mt-[1em] mb-[1em]"> <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} />) bills.filter(bill => (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant).map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)