fixed issue in order cancellation

app/routes/app.invoices.tsx

@@ -3,6 +3,7 @@ import { Link, useLoaderData, useNavigation, useFetcher } from "react-router";
 
 import { authenticate } from "../shopify.server";
 import db from "../db.server";
+import { buildRepresentativeInvoiceMap } from "../services/invoice/representativeInvoice";
 
 interface RecentOrder {
   id: string; // gid
@@ -102,10 +103,13 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       },
       orderBy: [{ version: "desc" }, { createdAt: "desc" }],
     });
-    const latestByOrder = new Map<string, (typeof invoices)[number]>();
-    for (const inv of invoices) {
-      if (!latestByOrder.has(inv.orderId)) latestByOrder.set(inv.orderId, inv);
-    }
+    // Pick the representative invoice per order. `invoices` is sorted by
+    // version desc, but a cancelled invoice can carry a HIGHER version than
+    // the current active one (cancel-and-reissue bumps versions), so a naive
+    // "first row wins" would surface a stale cancelled invoice and hide the
+    // live one. Prefer the latest non-cancelled invoice; only fall back to a
+    // cancelled row when no active invoice exists.
+    const latestByOrder = buildRepresentativeInvoiceMap(invoices);
 
     orders = nodes.map((n) => {
       const inv = latestByOrder.get(n.id);