From e978a5c2bf88ebeab4b000bf58e671fd54a21d5c Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 8 Dec 2025 01:17:03 +0100
Subject: [PATCH] feat: add debug logging and improve proof-of-payment icon
 styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Add console.log statements for shareId validation failures in locationActions
- Replace DocumentIcon with TicketIcon for proof-of-payment downloads (consistency)
- Add teal color to all proof-of-payment icons for visual distinction
- Adjust vertical alignment of icons for better visual alignment with text

Debug logging helps troubleshoot:
- shareId extraction failures
- Checksum validation failures
- Location not found errors

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/lib/actions/locationActions.ts | 5 +++++
 app/ui/BillEditForm.tsx            | 2 +-
 app/ui/ViewBillCard.tsx            | 2 +-
 app/ui/ViewLocationCard.tsx        | 5 +++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/lib/actions/locationActions.ts b/app/lib/actions/locationActions.ts
index 28125e5..489b787 100644
--- a/app/lib/actions/locationActions.ts
+++ b/app/lib/actions/locationActions.ts
@@ -659,12 +659,14 @@ export const uploadUtilBillsProofOfPayment = async (
         // 1. EXTRACT AND VALIDATE CHECKSUM (stateless, fast)
         const extracted = extractShareId(shareId);
         if (!extracted) {
+            console.log('shareID extraction failed');
             return { success: false, error: 'Invalid share link' };
         }
 
         const { locationId: locationID, checksum } = extracted;
 
         if (!validateShareChecksum(locationID, checksum)) {
+            console.log('shareID checksum validation failed');
             return { success: false, error: 'Invalid share link' };
         }
 
@@ -803,6 +805,7 @@ export async function validateShareAccess(
   // 1. Extract locationId and checksum from combined ID
   const extracted = extractShareId(shareId);
   if (!extracted) {
+    console.log('shareID extraction failed');
     return { valid: false, error: 'Invalid share link' };
   }
 
@@ -810,6 +813,7 @@ export async function validateShareAccess(
 
   // 2. Validate checksum FIRST (before DB query - stateless validation)
   if (!validateShareChecksum(locationId, checksum)) {
+    console.log('shareID checksum validation failed');
     return { valid: false, error: 'Invalid share link' };
   }
 
@@ -821,6 +825,7 @@ export async function validateShareAccess(
   );
 
   if (!location) {
+    console.log('Location not found for shareID');
     return { valid: false, error: 'Invalid share link' };
   }
 
diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index ab68d3e..3ef6355 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -253,7 +253,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
                                                 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" />
+                                                <TicketIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 mt-[-.2em] text-teal-500" />
                                                 {decodeURIComponent(proofOfPayment.fileName)}
                                             </Link>
                                         </div>
diff --git a/app/ui/ViewBillCard.tsx b/app/ui/ViewBillCard.tsx
index cdaeab6..8a6e1ef 100644
--- a/app/ui/ViewBillCard.tsx
+++ b/app/ui/ViewBillCard.tsx
@@ -134,7 +134,7 @@ export const ViewBillCard: FC<ViewBillCardProps> = ({ location, bill, shareId })
                                             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" />
+                                            <TicketIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 mt-[-.1em] text-teal-500" />
                                             { decodeURIComponent(proofOfPaymentFilename) }
                                         </Link>
                                     </div>
diff --git a/app/ui/ViewLocationCard.tsx b/app/ui/ViewLocationCard.tsx
index 6d1db4c..d7ed6cc 100644
--- a/app/ui/ViewLocationCard.tsx
+++ b/app/ui/ViewLocationCard.tsx
@@ -10,9 +10,10 @@ import { ViewBillBadge } from "./ViewBillBadge";
 import { Pdf417Barcode } from "./Pdf417Barcode";
 import { EncodePayment, PaymentParams } from "hub-3a-payment-encoder";
 import Link from "next/link";
-import { DocumentIcon, LinkIcon } from "@heroicons/react/24/outline";
+import { LinkIcon } from "@heroicons/react/24/outline";
 import { uploadUtilBillsProofOfPayment } from "../lib/actions/locationActions";
 import QRCode from "react-qr-code";
+import { TicketIcon } from "@heroicons/react/24/solid";
 
 export interface ViewLocationCardProps {
     location: BillingLocation;
@@ -199,7 +200,7 @@ export const ViewLocationCard: FC<ViewLocationCardProps> = ({ location, userSett
                                             target="_blank"
                                             className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
                                         >
-                                            <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                                            <TicketIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 mt-[-.1em] text-teal-500" />
                                             {decodeURIComponent(attachmentFilename)}
                                         </Link>
                                     </div>