Add upload proof of payment feature to ViewLocationCard component

app/ui/ViewLocationCard.tsx

@@ -8,6 +8,8 @@ import { useTranslations } from "next-intl";
 import { ViewBillBadge } from "./ViewBillBadge";
 import { Pdf417Barcode } from "./Pdf417Barcode";
 import { PaymentParams } from "hub-3a-payment-encoder";
+import Link from "next/link";
+import { DocumentIcon } from "@heroicons/react/24/outline";
 
 export interface ViewLocationCardProps {
     location: BillingLocation;
@@ -75,6 +77,17 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
                     </>
                     : null
                 }
+                <Link href={`/proof-of-payment/locationID/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-4'>
+                    <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                    potvrda-o-uplati.pdf
+                    {/*decodeURIComponent(attachment.fileName)*/}
+                </Link>
+                <div className="form-control w-full mb-4">
+                    <label className="label">
+                        <span className="label-text">{t("upload-proof-of-payment-label")}</span>
+                    </label>
+                    <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered grow file-input-s my-2 block max-w-[17em] md:max-w-[80em] break-words"  />
+                </div>
             </div>
         </div>);
 };

messages/en.json

@@ -67,7 +67,8 @@
       "payment-model-label": "Payment model:",
       "payment-reference-label": "Reference number:",
       "payment-purpose-code-label": "Purpose code:",
-      "payment-description-label": "Payment description:"
+      "payment-description-label": "Payment description:",
+      "upload-proof-of-payment-label": "Upload proof of payment:"
     },
     "month-card": {
       "payed-total-label": "Total monthly expenditure:",

messages/hr.json

@@ -67,7 +67,8 @@
       "payment-model-label": "Model plaćanja:",
       "payment-reference-label": "Poziv na broj:",
       "payment-purpose-code-label": "Šifra namjene:",
-      "payment-description-label": "Opis plaćanja:"
+      "payment-description-label": "Opis plaćanja:",
+      "upload-proof-of-payment-label": "Priložite potvrdu o uplati:"
     },
     "month-card": {
       "payed-total-label": "Ukupni mjesečni trošak:",