feat(queryKey) : queryKey applied with one approach

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

@@ -3,9 +3,9 @@ import * as React from "react";
 
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Upload, Image as ImageIcon, X, Plus, Minus } from "lucide-react";
+import { Upload, Image as ImageIcon, X, Plus } from "lucide-react";
 import { useMutation } from "@tanstack/react-query";
-import { apiRequest } from "@/lib/queryClient";
+import { apiRequest, queryClient } from "@/lib/queryClient";
 import { toast } from "@/hooks/use-toast";
 
 import {
@@ -14,7 +14,8 @@ import {
   flexRender,
   ColumnDef,
 } from "@tanstack/react-table";
-import { convertOCRDate } from "@/utils/dateUtils";
+import { QK_PAYMENTS_RECENT_BASE } from "@/components/payments/payments-recent-table";
+import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
 
 // ---------------- Types ----------------
 
@@ -211,6 +212,20 @@ export default function PaymentOCRBlock() {
       if (!res.ok) throw new Error("Failed to save OCR payments");
 
       toast({ title: "Saved", description: "OCR rows saved successfully" });
+
+      // 🔄 REFRESH both tables (all pages/filters)
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: QK_PAYMENTS_RECENT_BASE }), // all recent payments
+        queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE }), // recent patients list
+      ]);
+
+      // ✅ CLEAR UI: remove files and table rows
+      setUploadedImages([]);
+      setRows([]);
+      setColumns([]);
+      setError(null);
+      setIsDragging(false);
+      if (fileInputRef.current) fileInputRef.current.value = "";
     } catch (err: any) {
       toast({
         title: "Error",

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

@@ -58,6 +58,22 @@ interface PaymentsRecentTableProps {
   patientId?: number;
 }
 
+// 🔑 exported base key (so others can invalidate all pages/filters)
+export const QK_PAYMENTS_RECENT_BASE = ["payments-recent"] as const;
+// 🔑 exported helper for specific pages/scopes
+export const qkPaymentsRecent = (opts: {
+  patientId?: number | null;
+  page: number;
+}) =>
+  opts.patientId
+    ? ([
+        ...QK_PAYMENTS_RECENT_BASE,
+        "patient",
+        opts.patientId,
+        opts.page,
+      ] as const)
+    : ([...QK_PAYMENTS_RECENT_BASE, "global", opts.page] as const);
+
 export default function PaymentsRecentTable({
   allowEdit,
   allowDelete,
@@ -94,17 +110,17 @@ export default function PaymentsRecentTable({
     }
   };
 
-  const getPaymentsQueryKey = () =>
-    patientId
-      ? ["payments-recent", "patient", patientId, currentPage]
-      : ["payments-recent", "global", currentPage];
+  const queryKey = qkPaymentsRecent({
+    patientId: patientId ?? undefined,
+    page: currentPage,
+  });
 
   const {
     data: paymentsData,
     isLoading,
     isError,
   } = useQuery<PaymentApiResponse>({
-    queryKey: getPaymentsQueryKey(),
+    queryKey,
     queryFn: async () => {
       const endpoint = patientId
         ? `/api/payments/patient/${patientId}?limit=${paymentsPerPage}&offset=${offset}`
@@ -141,8 +157,9 @@ export default function PaymentsRecentTable({
         description: "Payment updated successfully!",
       });
 
-      queryClient.invalidateQueries({
-        queryKey: getPaymentsQueryKey(),
+      // 🔄 refresh this table page
+      await queryClient.invalidateQueries({
+        queryKey: QK_PAYMENTS_RECENT_BASE,
       });
 
       // Fetch updated payment and set into local state
@@ -193,8 +210,8 @@ export default function PaymentsRecentTable({
         description: "Payment Status updated successfully!",
       });
 
-      queryClient.invalidateQueries({
-        queryKey: getPaymentsQueryKey(),
+      await queryClient.invalidateQueries({
+        queryKey: QK_PAYMENTS_RECENT_BASE,
       });
 
       // Fetch updated payment and set into local state
@@ -233,12 +250,14 @@ export default function PaymentsRecentTable({
       }
       return response.json();
     },
-    onSuccess: () => {
+    onSuccess: async () => {
       toast({
         title: "Success",
         description: "Payment updated successfully!",
       });
-      queryClient.invalidateQueries({ queryKey: getPaymentsQueryKey() });
+      await queryClient.invalidateQueries({
+        queryKey: QK_PAYMENTS_RECENT_BASE,
+      });
     },
     onError: (error: any) => {
       toast({
@@ -271,10 +290,10 @@ export default function PaymentsRecentTable({
       return;
     },
 
-    onSuccess: () => {
+    onSuccess: async () => {
       setIsDeletePaymentOpen(false);
-      queryClient.invalidateQueries({
-        queryKey: getPaymentsQueryKey(),
+      await queryClient.invalidateQueries({
+        queryKey: QK_PAYMENTS_RECENT_BASE,
       });
       toast({
         title: "Deleted",