Updated the load invoice to see the old history of patient

api/invoices.py

@@ -1,4 +1,4 @@
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException
 from sqlalchemy.orm import Session
 from datetime import datetime
 from typing import Optional, List
@@ -73,18 +73,22 @@ def get_invoice(invoice_id: int, db: Session = Depends(get_db)):
         raise HTTPException(status_code=404, detail="Invoice not found")
         
     return {
+        "id": invoice.id,
         "invoice_no": invoice.invoice_number,
-        "doctor": invoice.doctor_name,
-        "clinic": invoice.clinic_name,
-        "patient": invoice.patient_name,
-        "total": invoice.total_amount,
         "date": invoice.date,
+        "doctor_name": invoice.doctor_name,
+        "clinic_name": invoice.clinic_name,
+        "patient_name": invoice.patient_name,
+        "shade": invoice.shade,
+        "total_amount": invoice.total_amount,
+        "received_amount": invoice.received_amount,
+        "remaining_balance": invoice.remaining_balance,
         "items": [
             {
                 "description": item.description,
                 "quantity": item.quantity,
-                "price": item.price_per_unit,
-                "subtotal": item.total_price
+                "price_per_unit": item.price_per_unit,
+                "total_price": item.total_price
             } for item in invoice.items
         ]
     }
@@ -97,8 +101,10 @@ def get_all_invoices(db: Session = Depends(get_db)):
         "id": inv.id,
         "invoice_no": inv.invoice_number,
         "doctor_name": inv.doctor_name,
+        "clinic_name": inv.clinic_name,
         "patient_name": inv.patient_name,
         "total_amount": inv.total_amount,
+        "received_amount": inv.received_amount,
         "date": inv.date
     } for inv in invoices]
 
@@ -110,4 +116,4 @@ def delete_invoice(invoice_id: int, db: Session = Depends(get_db)):
         raise HTTPException(status_code=404, detail="Invoice not found")
     db.delete(db_invoice)
     db.commit()
-    return {"message": "Deleted successfully"}
+    return {"message": "Deleted successfully"}

frontend/js/app.js

@@ -144,7 +144,50 @@ var App = (function() {
     function print() { _preparePrint(); window.print(); }
     function downloadPDF() { _preparePrint(); window.print(); }
     function exportExcel() { console.log("Exporting..."); }
-    function loadEdit(id) { console.log("Loading ID:", id); }
+    async function loadEdit(id) {
+        try {
+            if (!id || isNaN(id)) {
+                if (typeof showToast === 'function') showToast("❌ Invalid invoice id", "error");
+                return;
+            }
+            // Give immediate feedback and switch view
+            if (typeof showPage === "function") showPage("invoice");
+            if (typeof showToast === 'function') showToast("Loading invoice...", "info");
+            if (typeof dbGet !== 'function') throw new Error("dbGet function not found. Check db.js");
+            const inv = await dbGet(id);
+
+            _currentId = inv.id || id;
+            if (document.getElementById("inv-number")) {
+                document.getElementById("inv-number").value = inv.invoice_no || "Auto-Generated";
+            }
+            if (document.getElementById("inv-date")) {
+                const dateStr = inv.date ? String(inv.date).split("T")[0] : "";
+                document.getElementById("inv-date").value = dateStr;
+            }
+
+            const doctorEl = document.getElementById("doctor-name");
+            const clinicEl = document.getElementById("clinic");
+            const patientEl = document.getElementById("patient");
+            const shadeEl = document.getElementById("shade");
+            const receivedEl = document.getElementById("received-input");
+
+            if (doctorEl) doctorEl.value = inv.doctor_name || "";
+            if (clinicEl) clinicEl.value = inv.clinic_name || "";
+            if (patientEl) patientEl.value = inv.patient_name || "";
+            if (shadeEl) shadeEl.value = inv.shade || "";
+            if (receivedEl) receivedEl.value = (inv.received_amount || 0);
+
+            if (typeof Rows !== 'undefined' && typeof Rows.load === 'function') {
+                Rows.load(inv.items || []);
+            }
+
+            if (typeof updateHeaderBadge === 'function') updateHeaderBadge();
+            showPage("invoice");
+        } catch (err) {
+            console.error("Load Error:", err);
+            if (typeof showToast === 'function') showToast("❌ Load failed. Check console.", "error");
+        }
+    }
 
     // ── Boot ──
     document.addEventListener("DOMContentLoaded", async function() {

frontend/js/db.js

@@ -48,6 +48,25 @@ async function dbAll() {
     }
 }
 
+/* Load one invoice by id from Neon */
+async function dbGet(id) {
+    try {
+        const response = await fetch(`${API_URL}/${id}`);
+        if (!response.ok) {
+            let detail = "";
+            try {
+                const err = await response.json();
+                detail = err.detail ? ` (${err.detail})` : "";
+            } catch (e) {}
+            throw new Error(`Could not fetch invoice${detail}`);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Fetch One Error:", error);
+        throw error;
+    }
+}
+
 /* Delete one invoice by id from Neon */
 async function dbDelete(id) {
     try {
@@ -60,4 +79,4 @@ async function dbDelete(id) {
         console.error("Delete Error:", error);
         throw error;
     }
-}
+}

frontend/js/history.js

@@ -5,6 +5,7 @@
 var History = (function() {
 
   var _allInvoices = [];   // cache of loaded invoices
+  var _boundClicks = false;
 
   /* Format PKR */
   function _fmt(n) { return fmt(n); }
@@ -29,8 +30,8 @@ var History = (function() {
           '<div style="font-size:0.75rem;color:var(--green);text-align:right;margin-top:2px">Rcvd: ' + _fmt(inv.received_amount || 0) + '</div>',
         '</div>',
         '<div class="hist-actions">',
-          '<button class="btn-xs btn-xs-blue" onclick="App.loadEdit(' + inv.id + ')">✏️ Load</button>',
-          '<button class="btn-xs btn-xs-red"  onclick="History.deleteInvoice(' + inv.id + ')">🗑️</button>',
+          '<button class="btn-xs btn-xs-blue" data-action="load" data-id="' + inv.id + '">✏️ Load</button>',
+          '<button class="btn-xs btn-xs-red"  data-action="delete" data-id="' + inv.id + '">🗑️</button>',
         '</div>',
       '</div>',
     ].join("");
@@ -84,6 +85,9 @@ var History = (function() {
   function _render(list) {
     var container = document.getElementById("hist-list");
     var count     = document.getElementById("history-count");
+    if (!container || !count) return;
+
+    _bindClicks();
     count.textContent = list.length + " invoice" + (list.length !== 1 ? "s" : "");
 
     if (list.length === 0) {
@@ -94,6 +98,27 @@ var History = (function() {
     }
   }
 
+  function _bindClicks() {
+    if (_boundClicks) return;
+    document.addEventListener("click", function(e) {
+      var btn = e.target.closest("button[data-action]");
+      if (!btn) return;
+      var id = parseInt(btn.getAttribute("data-id"), 10);
+      var action = btn.getAttribute("data-action");
+      if (action === "load") {
+        if (typeof showToast === "function") showToast("Loading invoice...", "info");
+        if (typeof App !== "undefined" && typeof App.loadEdit === "function") {
+          App.loadEdit(id);
+        } else if (typeof showToast === "function") {
+          showToast("Load handler missing", "error");
+        }
+      } else if (action === "delete") {
+        deleteInvoice(id);
+      }
+    });
+    _boundClicks = true;
+  }
+
   return { load: load, filter: filter, deleteInvoice: deleteInvoice, getById: getById };
 
-})();
+})();