From cfa6a4c5b70b70622d72b812d4d0919927865817 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Sun, 7 Dec 2025 16:35:08 +0100
Subject: [PATCH] Add proof of payment display to BillEditForm
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/ui/BillEditForm.tsx | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index 912e10c..ab68d3e 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -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>);