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

Add proof of payment display to BillEditForm

Browse Source 
Added read-only proof of payment display in bill edit form:
- Shows download link when proofOfPaymentType is "per-bill" and proof exists
- Uses TicketIcon with teal color for visual distinction
- Links to /share/proof-of-payment/per-bill/ download route
- Handles housekeeping case (no display if filename missing)

This allows users to view and download existing proof of payment
while editing a bill, improving transparency and user experience.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-12-07 16:35:08 +01:00
parent b3e4e3591c
commit cfa6a4c5b7
1 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/ui/BillEditForm.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
import { DocumentIcon, TicketIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Bill, BilledTo, BillingLocation } from "../lib/db-types";
import React, { FC, useEffect } from "react";
import { useFormState } from "react-dom";
@@ -31,9 +31,9 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
const t = useTranslations("bill-edit-form");
const locale = useLocale();
const { _id: billID, name, paid, billedTo = BilledTo.Tenant, attachment, notes, payedAmount: initialPayedAmount } = bill ?? { _id: undefined, name: "", paid: false, notes: "" };
const { _id: billID, name, paid, billedTo = BilledTo.Tenant, attachment, notes, payedAmount: initialPayedAmount, proofOfPayment } = bill ?? { _id: undefined, name: "", paid: false, notes: "" };
const { yearMonth: { year: billYear, month: billMonth }, _id: locationID } = location;
const { yearMonth: { year: billYear, month: billMonth }, _id: locationID, proofOfPaymentType } = location;
const initialState = { message: null, errors: {} };
@@ -228,7 +228,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
))}
</div>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 mt-4">
<InfoBox>{t("billed-to-info")}</InfoBox>
<legend className="fieldset-legend font-semibold uppercase">{t("billed-to-legend")}</legend>
<select className="select select-bordered w-full" name="billedTo" defaultValue={billedToValue} onChange={billedTo_handleChange}>
@@ -237,6 +237,31 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
</select>
</fieldset>
{
// IF proof of payment type is "per-bill" and proof of payment was uploaded
proofOfPaymentType === "per-bill" && proofOfPayment?.uploadedAt ?
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-2 pt-0 mt-3 mb-3">
<legend className="fieldset-legend font-semibold uppercase">{t("upload-proof-of-payment-legend")}</legend>
{
// IF file name is available, show link to download
// ELSE it's not available that means that the uploaded file was purged by housekeeping
// -> don't show anything
proofOfPayment.fileName ? (
<div className="mt-3 ml-[-.5rem]">
<Link
href={`/share/proof-of-payment/per-bill/${locationID}-${billID}/`}
target="_blank"
className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
>
<TicketIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 text-teal-500" />
{decodeURIComponent(proofOfPayment.fileName)}
</Link>
</div>
) : null
}
</fieldset> : null
}
{/* Show toggle only when adding a new bill (not editing) */}
{!bill && (
<div className="form-control">
@@ -259,6 +284,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
</p>
}
</div>
</form>
</div>
</div>);