From 25865cfae4056eb22f690f14d5d5290586287477 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Sun, 7 Dec 2025 16:04:09 +0100
Subject: [PATCH] BillBage: implemented proof-of-payment indicator

---
 app/ui/BillBadge.tsx     | 19 +++++++++++++++----
 app/ui/ViewBillBadge.tsx | 20 +++++++++++++-------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/ui/BillBadge.tsx b/app/ui/BillBadge.tsx
index 9496098..73f52d2 100644
--- a/app/ui/BillBadge.tsx
+++ b/app/ui/BillBadge.tsx
@@ -1,13 +1,24 @@
 import { FC } from "react"
 import { Bill } from "@/app/lib/db-types"
 import Link from "next/link"
+import { TicketIcon } from "@heroicons/react/24/outline"
 
 export interface BillBadgeProps {
     locationId: string,
     bill: Bill
 };
 
-export const BillBadge:FC<BillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, hasAttachment }}) =>
-<Link href={`/home/bill/${locationId}-${billId}/edit`} className={`badge badge-lg ${paid?"badge-success":" badge-outline"} ${ !paid && hasAttachment ? "btn-outline btn-success" : "" }  cursor-pointer`}>
-    {name}
-</Link>;
\ No newline at end of file
+export const BillBadge:FC<BillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, hasAttachment, proofOfPayment }}) => {
+
+    const className = `badge badge-lg ${paid?"badge-success":" badge-outline"} ${ !paid && hasAttachment ? "btn-outline btn-success" : "" }  cursor-pointer`;
+
+    return (
+        <Link href={`/home/bill/${locationId}-${billId}/edit`} className={className}>
+            {name}
+            {
+                proofOfPayment?.uploadedAt ? 
+                <TicketIcon className="h-[1em] w-[1em]  inline-block ml-1" /> : null
+            }
+        </Link>
+    );
+}
\ No newline at end of file
diff --git a/app/ui/ViewBillBadge.tsx b/app/ui/ViewBillBadge.tsx
index 672a96b..47a2c2c 100644
--- a/app/ui/ViewBillBadge.tsx
+++ b/app/ui/ViewBillBadge.tsx
@@ -1,7 +1,7 @@
-import { FC } from "react"
-import { Bill } from "@/app/lib/db-types"
-import Link from "next/link"
-import { DocumentIcon, TicketIcon } from "@heroicons/react/24/outline";
+import { FC } from "react";
+import { Bill } from "@/app/lib/db-types";
+import Link from "next/link";
+import { TicketIcon } from "@heroicons/react/24/outline";
 import { useLocale } from "next-intl";
 
 export interface ViewBillBadgeProps {
@@ -9,13 +9,19 @@ export interface ViewBillBadgeProps {
     bill: Bill
 };
 
-export const ViewBillBadge: FC<ViewBillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, attachment } }) => {
+export const ViewBillBadge: FC<ViewBillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, attachment, proofOfPayment } }) => {
 
     const currentLocale = useLocale();
 
+    const className = `badge badge-lg p-[1em] ${paid ? "badge-success" : " badge-outline"} ${!paid && !!attachment ? "btn-outline btn-success" : ""}  cursor-pointer`;
+
     return (
-        <Link href={`/${currentLocale}//share/bill/${locationId}-${billId}`} className={`badge badge-lg p-[1em] ${paid ? "badge-success" : " badge-outline"} ${!paid && !!attachment ? "btn-outline btn-success" : ""}  cursor-pointer`}>
-            <TicketIcon className="h-[1em] w-[1em]  inline-block mr-1" /> {name}
+        <Link href={`/${currentLocale}//share/bill/${locationId}-${billId}`} className={className}>
+            {name}
+            {
+                proofOfPayment?.uploadedAt ? 
+                <TicketIcon className="h-[1em] w-[1em] inline-block ml-1" /> : null
+            }
         </Link>
     );
 }
\ No newline at end of file