knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve LocationCard monthly statement section with proof of payment link

Browse Source 
Changes:
- Added utilBillsProofOfPaymentAttachment to LocationCard component
- Updated monthly statement fieldset to show when proof of payment exists
- Added visual indicators with icons:
  - CheckCircleIcon next to payed total amount
  - EyeIcon for "seen by tenant" status (changed from CheckCircleIcon)
  - LinkIcon for proof of payment download link
- Added download link for proof of payment with success indicator
- Code formatting improvements and removed console.log
- Updated translations to lowercase:
  - English: "Seen by tenant" -> "seen by tenant"
  - Croatian: "Viđeno od strane podstanara" -> "viđeno od strane podstanara"
- Added Croatian translation:
  - "download-proof-of-payment-label": "potvrda-o-uplati.pdf"

The monthly statement section now displays proof of payment status
with a download link when available.

🤖 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-23 00:10:58 +01:00
parent dbe2b08e1c
commit a254ca5430
3 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/ui/LocationCard.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon } from "@heroicons/react/24/outline";
import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, DocumentIcon, EnvelopeIcon, LinkIcon, EyeIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { BillBadge } from "./BillBadge";
import { BillingLocation } from "../lib/db-types";
@@ -15,10 +15,8 @@ export interface LocationCardProps {
currency?: string | null;
}
export const LocationCard:FC<LocationCardProps> = ({location, currency}) => {
const { _id, name, yearMonth, bills, seenByTenant } = location;
console.log("seenByTenant:", seenByTenant);
export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
const { _id, name, yearMonth, bills, seenByTenant, utilBillsProofOfPaymentAttachment } = location;
const t = useTranslations("home-page.location-card");
const currentLocale = useLocale();
@@ -32,11 +30,11 @@ export const LocationCard:FC<LocationCardProps> = ({location, currency}) => {
navigator.clipboard.writeText(url);
// use NextJS toast to notiy user that the link was copied
toast.success(t("link-copy-message"), {theme: "dark"});
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">
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" />
@@ -52,24 +50,37 @@ export const LocationCard:FC<LocationCardProps> = ({location, currency}) => {
</div>
{ monthlyExpense > 0 || seenByTenant ?
{monthlyExpense > 0 || seenByTenant || utilBillsProofOfPaymentAttachment ?
<fieldset className="card card-compact card-bordered border-1 border-neutral p-3 mt-2 mr-[3.5rem]">
<legend className="fieldset-legend px-2 text-sm font-semibold uppercase">{t("monthly-statement-legend")}</legend>
{
monthlyExpense > 0 ?
<div className="flex items-center gap-2">
<BanknotesIcon className="h-5 w-5" />
{ t("payed-total-label") } <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
</div>
: null
<div className="flex items-center gap-2 ml-4">
<BanknotesIcon className="h-5 w-5" />
{t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
<CheckCircleIcon className="h-5 w-5 text-success" />
</div>
: null
}
{seenByTenant && (
<div className="flex items-center gap-2 mt-2">
<CheckCircleIcon className="h-5 w-5 text-success" />
<div className="flex items-center gap-2 mt-2 ml-4">
<EyeIcon className="h-5 w-5" />
<span className="text-sm">{t("seen-by-tenant-label")}</span>
<CheckCircleIcon className="h-5 w-5 text-success" />
</div>
)}
{(
<Link
href={`/share/proof-of-payment/${_id}/`}
target="_blank"
className="flex items-center gap-2 mt-2 ml-4"
>
<LinkIcon className="h-5 w-5" />
<span className="text-sm">{t("download-proof-of-payment-label")}</span>
<CheckCircleIcon className="h-5 w-5 text-success" />
</Link>
)}
</fieldset> : null
}

2
messages/en.json
View File

@@ -57,7 +57,7 @@
"payed-total-label": "Payed total:",
"link-copy-message": "Link copied to clipboard",
"monthly-statement-legend": "Monthly statement",
"seen-by-tenant-label": "Seen by tenant",
"seen-by-tenant-label": "seen by tenant",
"payment-info-header": "You can pay the utility bills for this month using the following information:",
"payment-amount-label": "Amount:",
"payment-recipient-label": "Recipient:",

3
messages/hr.json
View File

@@ -57,7 +57,8 @@
"payed-total-label": "Ukupno plaćeno:",
"link-copy-message": "Link kopiran na clipboard",
"monthly-statement-legend": "Obračun",
"seen-by-tenant-label": "Viđeno od strane podstanara",
"seen-by-tenant-label": "viđeno od strane podstanara",
"download-proof-of-payment-label": "potvrda-o-uplati.pdf",
"payment-info-header": "Režije za ovaj mjesec možete uplatiti koristeći slijedeće podatke:",
"payment-amount-label": "Iznos:",
"payment-recipient-label": "Primatelj:",