feat(ocr) - icn added,

apps/Backend/src/services/paymentService.ts

@@ -220,6 +220,7 @@ export const fullOcrPaymentService = {
                 totalDue: billed,
                 status: "PENDING", // updatePayment will fix it
                 notes: `OCR import from ${row.sourceFile ?? "Unknown file"}`,
+                icn: row.icn ?? "",
               },
             });
 

apps/Frontend/src/components/payments/payment-edit-modal.tsx

@@ -290,6 +290,12 @@ export default function PaymentEditModal({
                     ? formatDateToHumanReadable(serviceLines[0]?.procedureDate)
                     : formatDateToHumanReadable(payment.createdAt)}
               </span>
+
+              {payment.icn ? (
+                <span className="bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full font-medium">
+                  ICN : {payment.icn}
+                </span>
+              ) : null}
             </div>
           </div>
 

apps/Frontend/src/components/payments/payment-ocr-block.tsx

@@ -22,6 +22,7 @@ type Row = { __id: number } & Record<string, string | number | null>;
 
 export default function PaymentOCRBlock() {
   // UI state
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
   const [uploadedImages, setUploadedImages] = React.useState<File[]>([]);
   const [isDragging, setIsDragging] = React.useState(false);
   const [isExtracting, setIsExtracting] = React.useState(false);
@@ -257,9 +258,12 @@ export default function PaymentOCRBlock() {
               setIsDragging(true);
             }}
             onDragLeave={() => setIsDragging(false)}
-            onClick={() =>
-              document.getElementById("image-upload-input")?.click()
-            }
+            onClick={() => {
+              if (fileInputRef.current) {
+                fileInputRef.current.value = ""; // ✅ reset before opening
+                fileInputRef.current.click();
+              }
+            }}
           >
             {uploadedImages.length ? (
               <div className="space-y-4">
@@ -312,17 +316,20 @@ export default function PaymentOCRBlock() {
               </div>
             )}
             <input
+              ref={fileInputRef}
               id="image-upload-input"
               type="file"
               accept="image/*"
-              onChange={handleImageSelect}
+              onChange={(e) => {
+                handleImageSelect(e);
+                e.currentTarget.value = "";
+              }}
               className="hidden"
               multiple
             />
           </div>
 
           {/* Extract */}
-
           <div className="flex justify-end gap-4">
             <Button
               className="w-full h-12 gap-2"

apps/Frontend/src/components/payments/payments-recent-table.tsx

@@ -751,7 +751,7 @@ export default function PaymentsRecentTable({
         isOpen={isDeletePaymentOpen}
         onConfirm={handleConfirmDeletePayment}
         onCancel={() => setIsDeletePaymentOpen(false)}
-        entityName={`ClaimID : ${currentPayment?.claimId}`}
+        entityName={`PaymentID : ${currentPayment?.id}`}
       />
 
       {isEditPaymentOpen && currentPayment && (