finance/frontend: fix: updated the pages and layouts to be compatible with the backend

1 files changed, 44 insertions, 3 deletions

diff --git a/frontend/src/app/(main)/loans/page.tsx b/frontend/src/app/(main)/loans/page.tsx
index 07c1428..ef263fd 100644
--- a/frontend/src/app/(main)/loans/page.tsx
+++ b/frontend/src/app/(main)/loans/page.tsx
@@ -13,6 +13,8 @@ import { loanApi, Loan, LoanInput } from '@/lib/api';
 export default function LoansPage() {
   const queryClient = useQueryClient();
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [loanToDelete, setLoanToDelete] = useState<number | null>(null);
   const [selectedLoan, setSelectedLoan] = useState<Loan | null>(null);
 
   // Form state
@@ -29,7 +31,15 @@ export default function LoansPage() {
     queryKey: ['loans'],
     queryFn: async () => {
       const response = await loanApi.getLoans();
-      return response.loans as Loan[];
+      console.log('API Response:', response); // Debug the response structure
+      
+      // The response might be the array directly rather than nested under a 'loans' property
+      if (Array.isArray(response)) {
+        return response as Loan[];
+      }
+      
+      // Or it might be nested under a 'loans' or 'data' property
+      return (response.loans || response.data || []) as Loan[];
     }
   });
 
@@ -51,6 +61,8 @@ export default function LoansPage() {
     mutationFn: (id: number) => loanApi.deleteLoan(id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['loans'] });
+      setIsDeleteDialogOpen(false);
+      setLoanToDelete(null);
     }
   });
 
@@ -92,8 +104,13 @@ export default function LoansPage() {
   };
 
   const handleDeleteLoan = (id: number) => {
-    if (window.confirm('Are you sure you want to delete this loan?')) {
-      deleteLoanMutation.mutate(id);
+    setLoanToDelete(id);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const confirmDeleteLoan = () => {
+    if (loanToDelete !== null) {
+      deleteLoanMutation.mutate(loanToDelete);
     }
   };
 
@@ -221,6 +238,30 @@ export default function LoansPage() {
         </Dialog>
       </div>
 
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Confirm Deletion</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <p>Are you sure you want to delete this loan? This action cannot be undone.</p>
+          </div>
+          <div className="flex justify-end space-x-2">
+            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button 
+              variant="destructive" 
+              onClick={confirmDeleteLoan}
+              disabled={deleteLoanMutation.isPending}
+            >
+              {deleteLoanMutation.isPending ? 'Deleting...' : 'Delete Loan'}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       {data && data.length > 0 ? (
         <Card>
           <CardHeader>