From e410aea127297f3b30b85455cdd603ff8f9a3000 Mon Sep 17 00:00:00 2001
From: TheMythologist <leekaixuan2001@gmail.com>
Date: Sun, 1 Mar 2026 15:16:08 -0800
Subject: [PATCH] refactor: shift loan state to URL search parameter

---
 src/components/loans/LoansTable.tsx | 32 +++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/loans/LoansTable.tsx b/src/components/loans/LoansTable.tsx
index 05c2eed..78ca269 100644
--- a/src/components/loans/LoansTable.tsx
+++ b/src/components/loans/LoansTable.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useTransition, useMemo } from "react";
+import { useState, useTransition, useMemo, useEffect } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import { format } from "date-fns";
 import { Eye, CheckCircle, AlertCircle, Clock, XCircle, Search, Trash2, Package } from "lucide-react";
 import { toast } from "sonner";
@@ -54,6 +55,8 @@ interface LoansTableProps {
 }
 
 export function LoansTable({ data, items }: LoansTableProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
   const [selectedLoan, setSelectedLoan] = useState<LoanWithDetails | null>(null);
   const [isPending, startTransition] = useTransition();
   const [search, setSearch] = useState("");
@@ -62,6 +65,19 @@ export function LoansTable({ data, items }: LoansTableProps) {
   const [deletingRefNo, setDeletingRefNo] = useState<number | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  // Auto-open dialog when id search parameter is present in the URL
+  useEffect(() => {
+    const idParam = searchParams.get("id");
+    if (idParam) {
+      const loan = data.find(l => l.refNo === Number(idParam));
+      if (loan) {
+        setSelectedLoan(loan)
+      } else {
+        router.replace("/loans", { scroll: false });
+      };
+    }
+  }, [searchParams, data, router]);
+
   // Helper to check if a loan item has insufficient stock for approval
   const getItemAvailability = (itemId: number, requestedQty: number) => {
     const itemInfo = items.find(i => i.itemId === itemId);
@@ -243,7 +259,7 @@ export function LoansTable({ data, items }: LoansTableProps) {
               </TableRow>
             ) : (
               filteredData.map((loan) => (
-                <TableRow key={loan.refNo} className="cursor-pointer hover:bg-muted/50" onClick={() => setSelectedLoan(loan)}>
+                <TableRow key={loan.refNo} className="cursor-pointer hover:bg-muted/50" onClick={() => router.replace(`/loans?id=${loan.refNo}`, { scroll: false })}>
                   <TableCell className="font-medium">#{loan.refNo}</TableCell>
                   <TableCell>
                     <div className="flex flex-col">
@@ -284,7 +300,7 @@ export function LoansTable({ data, items }: LoansTableProps) {
                       <TooltipProvider>
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <Button size="icon" variant="ghost" onClick={(e) => { e.stopPropagation(); setSelectedLoan(loan); }}>
+                            <Button size="icon" variant="ghost" onClick={(e) => { e.stopPropagation(); router.replace(`/loans?id=${loan.refNo}`, { scroll: false }); }}>
                               <Eye className="h-4 w-4" />
                             </Button>
                           </TooltipTrigger>
@@ -359,7 +375,15 @@ export function LoansTable({ data, items }: LoansTableProps) {
       </div>
 
       {/* Details Modal */}
-      <Dialog open={!!selectedLoan} onOpenChange={(open) => !open && setSelectedLoan(null)}>
+      <Dialog open={!!selectedLoan} onOpenChange={(open) => {
+        if (!open) {
+          setSelectedLoan(null);
+          // Remove id search parameter from URL when dialog is closed
+          if (searchParams.has("id")) {
+            router.replace("/loans", { scroll: false });
+          }
+        }
+      }}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
             <div className="flex justify-between items-center pr-8">