From c0f8a1fda9ecd17a5765e9c47a8f3c2000ef8991 Mon Sep 17 00:00:00 2001
From: Feyisara2108 <ayokomi2108@gmail.com>
Date: Mon, 30 Mar 2026 04:37:23 +0100
Subject: [PATCH 1/3] feat(frontend): add defaulted loan recovery UI

---
 .../src/app/[locale]/loans/[loanId]/page.tsx  | 127 +++++++++++---
 frontend/src/app/[locale]/loans/page.tsx      | 163 ++++++++++++++----
 frontend/src/app/hooks/useApi.ts              |   2 +-
 3 files changed, 239 insertions(+), 53 deletions(-)

diff --git a/frontend/src/app/[locale]/loans/[loanId]/page.tsx b/frontend/src/app/[locale]/loans/[loanId]/page.tsx
index a62b078b..92bed0fc 100644
--- a/frontend/src/app/[locale]/loans/[loanId]/page.tsx
+++ b/frontend/src/app/[locale]/loans/[loanId]/page.tsx
@@ -2,13 +2,15 @@
 
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { ChevronRight, Clock, Wallet } from "lucide-react";
+import { AlertTriangle, ChevronRight, Clock, ExternalLink, Wallet } from "lucide-react";
 import { LoanDetailSkeleton } from "../../../components/skeletons/LoanDetailSkeleton";
 import { useLoan } from "../../../hooks/useApi";
 import { RepaymentProgress } from "../../../components/ui/RepaymentProgress";
 import { LoanTimeline } from "../../../components/ui/LoanTimeline";
 import { TxHashLink } from "../../../components/ui/TxHashLink";
 
+const SUPPORT_URL = "https://t.me/+DOylgFv1jyJlNzM0";
+
 function formatCurrency(value: number) {
   return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(value);
 }
@@ -63,29 +65,29 @@ export default function LoanDetailsPage() {
   }
 
   const latestTxHash = loan.events.find((event) => Boolean(event.txHash))?.txHash;
-  // Some API responses include nextPaymentDeadline in the extended loan object
   const nextDeadline = (loan as unknown as { nextPaymentDeadline?: string }).nextPaymentDeadline;
   const daysRemaining = getDaysRemaining(nextDeadline);
+  const isDefaulted = loan.status === "defaulted";
+  const penaltyFees = Math.max(loan.totalOwed - (loan.principal + loan.accruedInterest), 0);
+  const collateralSeized = loan.events.some((event) => event.type === "Seized");
 
   return (
     <section className="space-y-6">
-      {/* Breadcrumb */}
       <nav
         aria-label="Breadcrumb"
         className="flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400"
       >
-        <Link href="/" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition">
+        <Link href="/" className="transition hover:text-zinc-900 dark:hover:text-zinc-100">
           Home
         </Link>
         <ChevronRight className="h-3.5 w-3.5" />
-        <Link href="/loans" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition">
+        <Link href="/loans" className="transition hover:text-zinc-900 dark:hover:text-zinc-100">
           Loans
         </Link>
         <ChevronRight className="h-3.5 w-3.5" />
         <span className="font-medium text-zinc-900 dark:text-zinc-50">Loan #{loanId}</span>
       </nav>
 
-      {/* Header */}
       <header className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm shadow-zinc-200/50 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-none">
         <p className="text-sm font-semibold uppercase tracking-[0.2em] text-indigo-600">
           Borrower Portal
@@ -95,7 +97,6 @@ export default function LoanDetailsPage() {
           Track repayment timing, lender terms, and the current outstanding balance for this loan.
         </p>
 
-        {/* Loan metadata row */}
         <div className="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-zinc-500 dark:text-zinc-400">
           {loan.interestRate > 0 && (
             <span>
@@ -122,10 +123,67 @@ export default function LoanDetailsPage() {
             </span>
           )}
         </div>
+
+        {isDefaulted && (
+          <div className="mt-5 rounded-2xl border border-amber-300 bg-amber-50 p-5 dark:border-amber-900/60 dark:bg-amber-950/20">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+              <div className="flex items-start gap-3">
+                <div className="rounded-full bg-amber-100 p-2 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">
+                  <AlertTriangle className="h-5 w-5" />
+                </div>
+                <div>
+                  <p className="text-sm font-semibold uppercase tracking-wide text-amber-800 dark:text-amber-300">
+                    Defaulted loan
+                  </p>
+                  <p className="mt-2 text-sm leading-6 text-amber-900/85 dark:text-amber-100/85">
+                    This loan has entered default. Review the recovery details below and contact support if you need a repayment plan review or want to raise a dispute.
+                  </p>
+                </div>
+              </div>
+              <a
+                href={SUPPORT_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 rounded-full bg-amber-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-amber-500"
+              >
+                Contact Support
+                <ExternalLink className="h-4 w-4" />
+              </a>
+            </div>
+
+            <div className="mt-4 grid gap-3 sm:grid-cols-3">
+              <div className="rounded-xl bg-white p-4 dark:bg-zinc-950/70">
+                <p className="text-xs font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300">
+                  Outstanding amount
+                </p>
+                <p className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+                  {formatCurrency(loan.totalOwed)}
+                </p>
+              </div>
+              <div className="rounded-xl bg-white p-4 dark:bg-zinc-950/70">
+                <p className="text-xs font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300">
+                  Penalty fees
+                </p>
+                <p className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+                  {formatCurrency(penaltyFees)}
+                </p>
+              </div>
+              <div className="rounded-xl bg-white p-4 dark:bg-zinc-950/70">
+                <p className="text-xs font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300">
+                  Collateral seizure status
+                </p>
+                <p className="mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-50">
+                  {collateralSeized
+                    ? "Collateral has been seized."
+                    : "Collateral is still in review while recovery options are evaluated."}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
       </header>
 
       <div className="grid gap-4 lg:grid-cols-[1.3fr_0.7fr]">
-        {/* Main content */}
         <article className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm shadow-zinc-200/50 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-none">
           <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">Repayment plan</h2>
 
@@ -163,9 +221,7 @@ export default function LoanDetailsPage() {
           </div>
         </article>
 
-        {/* Sidebar */}
         <aside className="space-y-4">
-          {/* Due date countdown */}
           {loan.status === "active" && daysRemaining !== null && (
             <div className="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm shadow-zinc-200/50 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-none">
               <div className="flex items-center gap-2 text-zinc-700 dark:text-zinc-300">
@@ -199,17 +255,43 @@ export default function LoanDetailsPage() {
             </div>
           )}
 
-          {/* Action panel */}
           <div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm shadow-zinc-200/50 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-none">
-            <div className="rounded-2xl bg-indigo-50 p-5 dark:bg-indigo-500/10">
-              <div className="flex items-center gap-3 text-indigo-700 dark:text-indigo-300">
+            <div className={`rounded-2xl p-5 ${
+              isDefaulted
+                ? "bg-amber-50 text-amber-900 dark:bg-amber-500/10 dark:text-amber-100"
+                : "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-200"
+            }`}>
+              <div className="flex items-center gap-3">
                 <Wallet className="h-5 w-5" />
-                <h2 className="text-lg font-semibold">Next action</h2>
+                <h2 className="text-lg font-semibold">{isDefaulted ? "Recovery options" : "Next action"}</h2>
               </div>
-              <p className="mt-3 text-sm leading-6 text-indigo-700/80 dark:text-indigo-200">
-                Make a repayment before the next due date to keep your score trending upward.
+              <p className="mt-3 text-sm leading-6">
+                {isDefaulted
+                  ? "Support can help review repayment options, dispute next steps, and explain what happens to your collateral."
+                  : "Make a repayment before the next due date to keep your score trending upward."}
               </p>
-              {loan.status !== "repaid" && (
+              {isDefaulted ? (
+                <div className="mt-4 flex flex-wrap gap-2">
+                  <a
+                    href={SUPPORT_URL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-2 rounded-full bg-amber-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-amber-500"
+                  >
+                    Contact Support
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                  <a
+                    href={SUPPORT_URL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-2 rounded-full border border-amber-300 px-4 py-2 text-sm font-semibold text-amber-900 transition hover:bg-amber-100 dark:border-amber-800 dark:text-amber-200 dark:hover:bg-amber-950/30"
+                  >
+                    Open Dispute Flow
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                </div>
+              ) : loan.status !== "repaid" ? (
                 <Link
                   href={`/repay/${loanId}`}
                   className="mt-4 inline-flex items-center gap-2 rounded-full bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-500"
@@ -217,27 +299,26 @@ export default function LoanDetailsPage() {
                   Make Payment
                   <ChevronRight className="h-4 w-4" />
                 </Link>
-              )}
+              ) : null}
 
               {latestTxHash && (
                 <div className="mt-3">
-                  <p className="mb-1 text-xs font-medium text-indigo-700/70 dark:text-indigo-300/70">
-                    Latest transaction
-                  </p>
+                  <p className="mb-1 text-xs font-medium opacity-75">Latest transaction</p>
                   <TxHashLink txHash={latestTxHash} />
                 </div>
               )}
             </div>
           </div>
 
-          {/* Collateral status */}
           <div className="rounded-3xl border border-zinc-200 bg-white p-5 shadow-sm shadow-zinc-200/50 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-none">
             <h2 className="text-sm font-semibold text-zinc-900 dark:text-zinc-50">
               Collateral status
             </h2>
             <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
               {loan.status === "defaulted"
-                ? "Collateral has been seized."
+                ? collateralSeized
+                  ? "Collateral has been seized."
+                  : "Collateral remains locked while the default review is in progress."
                 : loan.status === "repaid"
                   ? "Collateral released — loan fully repaid."
                   : "Collateral is held in escrow for the duration of this loan."}
diff --git a/frontend/src/app/[locale]/loans/page.tsx b/frontend/src/app/[locale]/loans/page.tsx
index b5b7c202..b372a284 100644
--- a/frontend/src/app/[locale]/loans/page.tsx
+++ b/frontend/src/app/[locale]/loans/page.tsx
@@ -2,7 +2,15 @@
 
 import { useMemo, useState } from "react";
 import Link from "next/link";
-import { ArrowRight, CalendarRange, CircleDollarSign, ShieldCheck } from "lucide-react";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CalendarRange,
+  CircleDollarSign,
+  ExternalLink,
+  ShieldAlert,
+  ShieldCheck,
+} from "lucide-react";
 import { ErrorBoundary } from "../../components/global_ui/ErrorBoundary";
 import { LoansListSkeleton } from "../../components/skeletons/LoansListSkeleton";
 import { useBorrowerLoans } from "../../hooks/useApi";
@@ -11,6 +19,7 @@ import { useWalletStore, selectWalletAddress } from "../../stores/useWalletStore
 import { useTranslations, useLocale } from "next-intl";
 
 const PAGE_SIZE = 6;
+const SUPPORT_URL = "https://t.me/+DOylgFv1jyJlNzM0";
 
 function formatCurrency(value: number) {
   return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(value);
@@ -23,6 +32,10 @@ function getLoanDisplayStatus(status: string, nextPaymentDeadline: string, now:
   return new Date(nextPaymentDeadline).getTime() < now ? "defaulted" : "active";
 }
 
+function getPenaltyFees(totalOwed: number, principal: number, accruedInterest: number) {
+  return Math.max(totalOwed - (principal + accruedInterest), 0);
+}
+
 export default function LoansPage() {
   const t = useTranslations("Loans");
   const locale = useLocale();
@@ -36,6 +49,7 @@ export default function LoansPage() {
     const enriched = (loans || []).map((loan) => ({
       ...loan,
       displayStatus: getLoanDisplayStatus(loan.status, loan.nextPaymentDeadline, now),
+      penaltyFees: getPenaltyFees(loan.totalOwed, loan.principal, loan.accruedInterest),
     }));
 
     if (activeTab === "all") {
@@ -168,35 +182,126 @@ export default function LoansPage() {
             </div>
           ) : (
             <div className="space-y-3">
-              {paginatedLoans.map((loan) => (
-                <article
-                  key={loan.id}
-                  className="flex flex-col gap-4 rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800 md:flex-row md:items-center md:justify-between"
-                >
-                  <div>
-                    <p className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
-                      {t("loanNumber", { id: loan.id })}
-                    </p>
-                    <p className="text-sm text-zinc-500 dark:text-zinc-400">{loan.borrower}</p>
-                  </div>
-                  <div className="flex flex-wrap items-center gap-3 text-sm">
-                    <LoanStatusBadge status={loan.displayStatus} />
-                    <span className="text-zinc-600 dark:text-zinc-400">
-                      {formatCurrency(loan.totalOwed)}
-                    </span>
-                    <span className="text-zinc-600 dark:text-zinc-400">
-                      {t("due", { date: new Date(loan.nextPaymentDeadline).toLocaleDateString() })}
-                    </span>
-                  </div>
-                  <Link
-                    href={`/${locale}/loans/${loan.id}`}
-                    className="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
+              {paginatedLoans.map((loan) => {
+                const isDefaulted = loan.displayStatus === "defaulted";
+                const seizureStatus = loan.status === "defaulted"
+                  ? "Collateral seizure review has started."
+                  : "Collateral remains locked while support reviews recovery options.";
+
+                return (
+                  <article
+                    key={loan.id}
+                    className={`flex flex-col gap-4 rounded-2xl border p-4 md:flex-row md:items-center md:justify-between ${
+                      isDefaulted
+                        ? "border-amber-300 bg-amber-50/80 shadow-sm shadow-amber-100 dark:border-amber-900/60 dark:bg-amber-950/20 dark:shadow-none"
+                        : "border-zinc-200 dark:border-zinc-800"
+                    }`}
                   >
-                    {t("viewDetails")}
-                    <ArrowRight className="h-4 w-4" />
-                  </Link>
-                </article>
-              ))}
+                    <div className="space-y-3">
+                      <div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <p className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+                            {t("loanNumber", { id: loan.id })}
+                          </p>
+                          <LoanStatusBadge status={loan.displayStatus} />
+                        </div>
+                        <p className="text-sm text-zinc-500 dark:text-zinc-400">{loan.borrower}</p>
+                      </div>
+
+                      {isDefaulted ? (
+                        <div className="space-y-3 rounded-2xl border border-amber-200 bg-white/80 p-4 dark:border-amber-900/50 dark:bg-zinc-950/40">
+                          <div className="flex items-start gap-3">
+                            <div className="rounded-full bg-amber-100 p-2 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">
+                              <AlertTriangle className="h-4 w-4" />
+                            </div>
+                            <div>
+                              <p className="text-sm font-semibold text-amber-900 dark:text-amber-200">
+                                Recovery options available
+                              </p>
+                              <p className="mt-1 text-sm text-amber-800/80 dark:text-amber-200/80">
+                                This loan is in default. Review the outstanding balance, confirm collateral status, and contact support to discuss repayment or dispute options.
+                              </p>
+                            </div>
+                          </div>
+
+                          <div className="grid gap-3 sm:grid-cols-3">
+                            <div className="rounded-xl bg-amber-50 p-3 dark:bg-amber-500/10">
+                              <p className="text-xs font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300">
+                                Outstanding amount
+                              </p>
+                              <p className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+                                {formatCurrency(loan.totalOwed)}
+                              </p>
+                            </div>
+                            <div className="rounded-xl bg-amber-50 p-3 dark:bg-amber-500/10">
+                              <p className="text-xs font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300">
+                                Penalty fees
+                              </p>
+                              <p className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+                                {formatCurrency(loan.penaltyFees)}
+                              </p>
+                            </div>
+                            <div className="rounded-xl bg-amber-50 p-3 dark:bg-amber-500/10">
+                              <p className="text-xs font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300">
+                                Collateral status
+                              </p>
+                              <p className="mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-50">
+                                {seizureStatus}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex flex-wrap items-center gap-3 text-sm">
+                          <span className="text-zinc-600 dark:text-zinc-400">
+                            {formatCurrency(loan.totalOwed)}
+                          </span>
+                          <span className="text-zinc-600 dark:text-zinc-400">
+                            {t("due", { date: new Date(loan.nextPaymentDeadline).toLocaleDateString() })}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex flex-col gap-3 md:items-end">
+                      {isDefaulted ? (
+                        <>
+                          <div className="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-900 dark:bg-amber-500/15 dark:text-amber-200">
+                            <ShieldAlert className="h-3.5 w-3.5" />
+                            Defaulted loans need manual review
+                          </div>
+                          <div className="flex flex-wrap gap-2 md:justify-end">
+                            <Link
+                              href={`/${locale}/loans/${loan.id}`}
+                              className="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
+                            >
+                              View Recovery Options
+                              <ArrowRight className="h-4 w-4" />
+                            </Link>
+                            <a
+                              href={SUPPORT_URL}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="inline-flex items-center gap-2 rounded-full border border-amber-300 bg-white px-4 py-2 text-sm font-semibold text-amber-900 transition hover:bg-amber-100 dark:border-amber-800 dark:bg-zinc-950 dark:text-amber-200 dark:hover:bg-amber-950/30"
+                            >
+                              Contact Support
+                              <ExternalLink className="h-4 w-4" />
+                            </a>
+                          </div>
+                        </>
+                      ) : (
+                        <Link
+                          href={`/${locale}/loans/${loan.id}`}
+                          className="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
+                        >
+                          {t("viewDetails")}
+                          <ArrowRight className="h-4 w-4" />
+                        </Link>
+                      )}
+                    </div>
+                  </article>
+                );
+              })}
             </div>
           )}
 
diff --git a/frontend/src/app/hooks/useApi.ts b/frontend/src/app/hooks/useApi.ts
index e07dc08b..17b43c31 100644
--- a/frontend/src/app/hooks/useApi.ts
+++ b/frontend/src/app/hooks/useApi.ts
@@ -158,7 +158,7 @@ export interface BorrowerLoan {
   totalOwed: number;
   totalRepaid: number;
   nextPaymentDeadline: string;
-  status: "active" | "pending" | "repaid";
+  status: "active" | "pending" | "repaid" | "defaulted";
   borrower: string;
   approvedAt?: string;
 }

From fb4106032f1bb86efa0204da588d75ef954c0160 Mon Sep 17 00:00:00 2001
From: Feyisara2108 <ayokomi2108@gmail.com>
Date: Mon, 30 Mar 2026 05:23:48 +0100
Subject: [PATCH 2/3] style: format defaulted loan pages

---
 .../src/app/[locale]/loans/[loanId]/page.tsx  | 28 +++++++++++++------
 frontend/src/app/[locale]/loans/page.tsx      | 24 +++++++++++-----
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/[locale]/loans/[loanId]/page.tsx b/frontend/src/app/[locale]/loans/[loanId]/page.tsx
index 92bed0fc..ce4b2976 100644
--- a/frontend/src/app/[locale]/loans/[loanId]/page.tsx
+++ b/frontend/src/app/[locale]/loans/[loanId]/page.tsx
@@ -17,6 +17,7 @@ function formatCurrency(value: number) {
 
 function formatDate(iso: string | undefined) {
   if (!iso) return "—";
+
   return new Date(iso).toLocaleDateString(undefined, {
     year: "numeric",
     month: "short",
@@ -92,7 +93,9 @@ export default function LoanDetailsPage() {
         <p className="text-sm font-semibold uppercase tracking-[0.2em] text-indigo-600">
           Borrower Portal
         </p>
-        <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-50">Loan #{loanId}</h1>
+        <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-50">
+          Loan #{loanId}
+        </h1>
         <p className="mt-2 max-w-2xl text-sm text-zinc-500 dark:text-zinc-400">
           Track repayment timing, lender terms, and the current outstanding balance for this loan.
         </p>
@@ -136,7 +139,8 @@ export default function LoanDetailsPage() {
                     Defaulted loan
                   </p>
                   <p className="mt-2 text-sm leading-6 text-amber-900/85 dark:text-amber-100/85">
-                    This loan has entered default. Review the recovery details below and contact support if you need a repayment plan review or want to raise a dispute.
+                    This loan has entered default. Review the recovery details below and contact
+                    support if you need a repayment plan review or want to raise a dispute.
                   </p>
                 </div>
               </div>
@@ -185,7 +189,9 @@ export default function LoanDetailsPage() {
 
       <div className="grid gap-4 lg:grid-cols-[1.3fr_0.7fr]">
         <article className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm shadow-zinc-200/50 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-none">
-          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">Repayment plan</h2>
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+            Repayment plan
+          </h2>
 
           <div className="mt-5 grid gap-4 sm:grid-cols-2">
             {[
@@ -256,14 +262,18 @@ export default function LoanDetailsPage() {
           )}
 
           <div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm shadow-zinc-200/50 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-none">
-            <div className={`rounded-2xl p-5 ${
-              isDefaulted
-                ? "bg-amber-50 text-amber-900 dark:bg-amber-500/10 dark:text-amber-100"
-                : "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-200"
-            }`}>
+            <div
+              className={`rounded-2xl p-5 ${
+                isDefaulted
+                  ? "bg-amber-50 text-amber-900 dark:bg-amber-500/10 dark:text-amber-100"
+                  : "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-200"
+              }`}
+            >
               <div className="flex items-center gap-3">
                 <Wallet className="h-5 w-5" />
-                <h2 className="text-lg font-semibold">{isDefaulted ? "Recovery options" : "Next action"}</h2>
+                <h2 className="text-lg font-semibold">
+                  {isDefaulted ? "Recovery options" : "Next action"}
+                </h2>
               </div>
               <p className="mt-3 text-sm leading-6">
                 {isDefaulted
diff --git a/frontend/src/app/[locale]/loans/page.tsx b/frontend/src/app/[locale]/loans/page.tsx
index b372a284..1eb526a3 100644
--- a/frontend/src/app/[locale]/loans/page.tsx
+++ b/frontend/src/app/[locale]/loans/page.tsx
@@ -29,6 +29,7 @@ function getLoanDisplayStatus(status: string, nextPaymentDeadline: string, now:
   if (status !== "active") {
     return status;
   }
+
   return new Date(nextPaymentDeadline).getTime() < now ? "defaulted" : "active";
 }
 
@@ -39,7 +40,9 @@ function getPenaltyFees(totalOwed: number, principal: number, accruedInterest: n
 export default function LoansPage() {
   const t = useTranslations("Loans");
   const locale = useLocale();
-  const [activeTab, setActiveTab] = useState<"all" | "active" | "repaid" | "defaulted">("all");
+  const [activeTab, setActiveTab] = useState<"all" | "active" | "repaid" | "defaulted">(
+    "all",
+  );
   const [page, setPage] = useState(1);
   const [now] = useState(() => Date.now());
   const address = useWalletStore(selectWalletAddress);
@@ -184,9 +187,10 @@ export default function LoansPage() {
             <div className="space-y-3">
               {paginatedLoans.map((loan) => {
                 const isDefaulted = loan.displayStatus === "defaulted";
-                const seizureStatus = loan.status === "defaulted"
-                  ? "Collateral seizure review has started."
-                  : "Collateral remains locked while support reviews recovery options.";
+                const seizureStatus =
+                  loan.status === "defaulted"
+                    ? "Collateral seizure review has started."
+                    : "Collateral remains locked while support reviews recovery options.";
 
                 return (
                   <article
@@ -205,7 +209,9 @@ export default function LoansPage() {
                           </p>
                           <LoanStatusBadge status={loan.displayStatus} />
                         </div>
-                        <p className="text-sm text-zinc-500 dark:text-zinc-400">{loan.borrower}</p>
+                        <p className="text-sm text-zinc-500 dark:text-zinc-400">
+                          {loan.borrower}
+                        </p>
                       </div>
 
                       {isDefaulted ? (
@@ -219,7 +225,9 @@ export default function LoansPage() {
                                 Recovery options available
                               </p>
                               <p className="mt-1 text-sm text-amber-800/80 dark:text-amber-200/80">
-                                This loan is in default. Review the outstanding balance, confirm collateral status, and contact support to discuss repayment or dispute options.
+                                This loan is in default. Review the outstanding balance, confirm
+                                collateral status, and contact support to discuss repayment or
+                                dispute options.
                               </p>
                             </div>
                           </div>
@@ -257,7 +265,9 @@ export default function LoansPage() {
                             {formatCurrency(loan.totalOwed)}
                           </span>
                           <span className="text-zinc-600 dark:text-zinc-400">
-                            {t("due", { date: new Date(loan.nextPaymentDeadline).toLocaleDateString() })}
+                            {t("due", {
+                              date: new Date(loan.nextPaymentDeadline).toLocaleDateString(),
+                            })}
                           </span>
                         </div>
                       )}

From 4bac1d40953e7a745578583c128cbff73c53d560 Mon Sep 17 00:00:00 2001
From: Feyisara2108 <ayokomi2108@gmail.com>
Date: Mon, 30 Mar 2026 05:46:19 +0100
Subject: [PATCH 3/3] test(backend): align event indexer test with bulk score
 updates

---
 backend/src/__tests__/eventIndexer.test.ts | 70 ++++++++++------------
 1 file changed, 32 insertions(+), 38 deletions(-)

diff --git a/backend/src/__tests__/eventIndexer.test.ts b/backend/src/__tests__/eventIndexer.test.ts
index 269bd317..cd280bd1 100644
--- a/backend/src/__tests__/eventIndexer.test.ts
+++ b/backend/src/__tests__/eventIndexer.test.ts
@@ -9,6 +9,7 @@ const mockGetScoreConfig = jest.fn(() => ({
   repaymentDelta: 15,
   defaultPenalty: 50,
 }));
+const mockUpdateUserScoresBulk = jest.fn<() => Promise<void>>().mockResolvedValue(undefined);
 
 jest.unstable_mockModule("../db/connection.js", () => ({
   query: mockQuery,
@@ -32,6 +33,10 @@ jest.unstable_mockModule("../services/sorobanService.js", () => ({
   sorobanService: { getScoreConfig: mockGetScoreConfig },
 }));
 
+jest.unstable_mockModule("../services/scoresService.js", () => ({
+  updateUserScoresBulk: mockUpdateUserScoresBulk,
+}));
+
 jest.unstable_mockModule("../utils/logger.js", () => ({
   default: {
     info: jest.fn(),
@@ -126,7 +131,6 @@ describe("EventIndexer", () => {
     const borrowerRepaid = makeAddress();
     const borrowerDefaulted = makeAddress();
     const insertedLoanEvents: unknown[][] = [];
-    const scoreUpdates: unknown[][] = [];
 
     mockQuery.mockImplementation(async (sql: string, params: unknown[] = []) => {
       if (sql === "BEGIN" || sql === "COMMIT") {
@@ -138,11 +142,6 @@ describe("EventIndexer", () => {
         return { rows: [{ event_id: params[0] }], rowCount: 1 };
       }
 
-      if (sql.includes("INSERT INTO scores")) {
-        scoreUpdates.push(params);
-        return { rows: [], rowCount: 1 };
-      }
-
       return { rows: [], rowCount: 0 };
     });
 
@@ -208,10 +207,13 @@ describe("EventIndexer", () => {
     expect(insertedLoanEvents[3]?.[2]).toBe(9);
     expect(insertedLoanEvents[3]?.[3]).toBe(borrowerDefaulted);
 
-    expect(scoreUpdates).toEqual([
-      [borrowerRepaid, 515, 15],
-      [borrowerDefaulted, 450, -50],
-    ]);
+    expect(mockUpdateUserScoresBulk).toHaveBeenCalledTimes(1);
+    expect(mockUpdateUserScoresBulk).toHaveBeenCalledWith(
+      new Map([
+        [borrowerRepaid, 15],
+        [borrowerDefaulted, -50],
+      ]),
+    );
     expect(mockGetScoreConfig).toHaveBeenCalledTimes(2);
     expect(mockDispatch).toHaveBeenCalledTimes(4);
     expect(mockBroadcast).toHaveBeenCalledTimes(4);
@@ -236,10 +238,6 @@ describe("EventIndexer", () => {
         };
       }
 
-      if (sql.includes("INSERT INTO scores")) {
-        return { rows: [], rowCount: 1 };
-      }
-
       return { rows: [], rowCount: 0 };
     });
 
@@ -269,6 +267,8 @@ describe("EventIndexer", () => {
     expect(mockBroadcast).toHaveBeenCalledTimes(1);
     expect(mockCreateNotification).toHaveBeenCalledTimes(1);
     expect(mockGetScoreConfig).toHaveBeenCalledTimes(1);
+    expect(mockUpdateUserScoresBulk).toHaveBeenCalledTimes(1);
+    expect(mockUpdateUserScoresBulk).toHaveBeenCalledWith(new Map([[borrower, 15]]));
   });
 
   it("initializes missing indexer state and persists the last indexed ledger during polling", async () => {
@@ -279,9 +279,8 @@ describe("EventIndexer", () => {
         return { rows: [], rowCount: 0 };
       }
 
-      if (sql.includes("INSERT INTO indexer_state")) {
-        stateWrites.push(Number(params[0] ?? 0));
-        return { rows: [], rowCount: 1 };
+      if (sql.includes("INSERT INTO indexer_state") && params.length === 0) {
+        return { rows: [{ last_indexed_ledger: 0 }], rowCount: 1 };
       }
 
       if (sql.includes("UPDATE indexer_state")) {
@@ -289,37 +288,32 @@ describe("EventIndexer", () => {
         return { rows: [], rowCount: 1 };
       }
 
-      if (sql === "BEGIN" || sql === "COMMIT") {
-        return { rows: [], rowCount: 0 };
-      }
-
-      if (sql.includes("INSERT INTO loan_events")) {
-        return { rows: [{ event_id: params[0] }], rowCount: 1 };
-      }
-
       return { rows: [], rowCount: 0 };
     });
 
     const indexer = new EventIndexer({
       rpcUrl: "https://rpc.test",
       contractId: "CINDEXERTEST",
+      pollIntervalMs: 5,
+      batchSize: 50,
     });
 
-    (indexer as { running: boolean }).running = true;
-    (indexer as {
-      rpc: {
-        getLatestLedger: () => Promise<{ sequence: number }>;
-        getEvents: () => Promise<{ events: unknown[] }>;
-      };
-    }).rpc = {
-      getLatestLedger: jest.fn().mockResolvedValue({ sequence: 15 }),
-      getEvents: jest.fn().mockResolvedValue({
-        events: [makeRawEvent({ id: "evt-poll", ledger: 15, type: "LoanRequested" })],
-      }),
+    const processChunk = jest
+      .spyOn(indexer as unknown as { processChunk: (start: number, end: number) => Promise<unknown> }, "processChunk")
+      .mockResolvedValue({
+        lastProcessedLedger: 25,
+        fetchedEvents: 0,
+        insertedEvents: 0,
+      });
+
+    (indexer as { rpc: { getLatestLedger: () => Promise<{ sequence: number }> } }).rpc = {
+      getLatestLedger: jest.fn().mockResolvedValue({ sequence: 25 }),
     };
 
-    await (indexer as { pollOnce: () => Promise<void> }).pollOnce();
+    await indexer.start();
+    indexer.stop();
 
-    expect(stateWrites).toEqual([0, 15]);
+    expect(processChunk).toHaveBeenCalledWith(1, 25);
+    expect(stateWrites).toContain(25);
   });
 });