From f56182e50d2ffcedac78b39f83932117833e0c5c Mon Sep 17 00:00:00 2001
From: chuks68 <valentinesomtochukwu68@gmail.com>
Date: Tue, 21 Jul 2026 15:40:48 -0400
Subject: [PATCH] Add responsive card layout for SettlementTable with mobile
 view and extend tests for card layout

---
 src/components/SettlementTable.test.tsx |  17 ++
 src/components/SettlementTable.tsx      | 211 +++++++++++++++---------
 2 files changed, 151 insertions(+), 77 deletions(-)

diff --git a/src/components/SettlementTable.test.tsx b/src/components/SettlementTable.test.tsx
index 0204453..376c1cb 100644
--- a/src/components/SettlementTable.test.tsx
+++ b/src/components/SettlementTable.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect } from "vitest";
 import { render, screen, fireEvent, within } from "@testing-library/react";
 import { SettlementTable } from "./SettlementTable";
 import { Settlement } from "@/lib/types";
+import { formatAmount } from "@/lib/format";
 
 function settlement(overrides: Partial<Settlement>): Settlement {
   return {
@@ -77,3 +78,19 @@ describe("SettlementTable sorting", () => {
     expect(header).toHaveAttribute("aria-sort", "descending");
   });
 });
+
+describe("SettlementTable mobile layout", () => {
+  it("renders a card for each settlement with correct data", () => {
+    render(<SettlementTable settlements={settlements} />);
+    const cards = screen.getAllByTestId("settlement-card");
+    expect(cards).toHaveLength(settlements.length);
+    settlements.forEach((s) => {
+      const card = screen.getByText(`Settlement #${s.id}`).closest("div");
+      expect(card).toBeInTheDocument();
+      expect(within(card!).getByText(s.anchor)).toBeInTheDocument();
+      expect(within(card!).getByText(s.asset)).toBeInTheDocument();
+      expect(within(card!).getByText(formatAmount(s.amount))).toBeInTheDocument();
+      expect(within(card!).getByText(formatAmount(s.fee))).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/SettlementTable.tsx b/src/components/SettlementTable.tsx
index e39b0d2..acd45e5 100644
--- a/src/components/SettlementTable.tsx
+++ b/src/components/SettlementTable.tsx
@@ -43,86 +43,143 @@ export function SettlementTable({
   );
 
   return (
-    <table className="w-full text-left text-sm">
-      <thead>
-        <tr className="border-b border-zinc-800 text-zinc-400">
-          <th className="py-2 font-medium">#</th>
-          <SortableHeader
-            label="Anchor"
-            sortKey="anchor"
-            sort={sort}
-            onSort={requestSort}
-          />
-          <th className="py-2 font-medium">Asset</th>
-          <SortableHeader
-            label="Amount"
-            sortKey="amount"
-            sort={sort}
-            onSort={requestSort}
-          />
-          <th className="py-2 font-medium">Fee</th>
-          <SortableHeader
-            label="Status"
-            sortKey="status"
-            sort={sort}
-            onSort={requestSort}
-          />
-          {actionable ? <th className="py-2" /> : null}
-        </tr>
-      </thead>
-      <tbody>
+    <>
+      {/* Table view for larger screens */}
+      <table className="hidden sm:table w-full text-left text-sm">
+        <thead>
+          <tr className="border-b border-zinc-800 text-zinc-400">
+            <th className="py-2 font-medium">#</th>
+            <SortableHeader
+              label="Anchor"
+              sortKey="anchor"
+              sort={sort}
+              onSort={requestSort}
+            />
+            <th className="py-2 font-medium">Asset</th>
+            <SortableHeader
+              label="Amount"
+              sortKey="amount"
+              sort={sort}
+              onSort={requestSort}
+            />
+            <th className="py-2 font-medium">Fee</th>
+            <SortableHeader
+              label="Status"
+              sortKey="status"
+              sort={sort}
+              onSort={requestSort}
+            />
+            {actionable ? <th className="py-2" /> : null}
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((s) => (
+            <tr key={s.id} className="border-b border-zinc-900">
+              <td className="py-2 text-zinc-500">
+                <Link href={`/settlements/${s.id}`} className="hover:underline">
+                  {s.id}
+                </Link>
+              </td>
+              <td className="py-2 font-mono text-xs text-zinc-300">{s.anchor}</td>
+              <td className="py-2 font-mono text-zinc-100">{s.asset}</td>
+              <td className="py-2 text-zinc-200">{formatAmount(s.amount)}</td>
+              <td className="py-2 text-zinc-400">{formatAmount(s.fee)}</td>
+              <td className="py-2">
+                <StatusBadge status={s.status} />
+              </td>
+              {actionable ? (
+                <td className="py-2 text-right">
+                  {s.status === "pending" ? (
+                    <span className="flex justify-end gap-2">
+                      {onExecute ? (
+                        <button
+                          onClick={() => onExecute(s.id)}
+                          className="rounded-md px-2 py-1 text-xs text-emerald-400 hover:text-emerald-300"
+                        >
+                          Execute
+                        </button>
+                      ) : null}
+                      {onCancel ? (
+                        <button
+                          onClick={() => onCancel(s.id)}
+                          className="rounded-md px-2 py-1 text-xs text-red-400 hover:text-red-300"
+                        >
+                          Cancel
+                        </button>
+                      ) : null}
+                    </span>
+                  ) : null}
+                </td>
+              ) : null}
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          <tr className="border-t border-zinc-800 font-medium">
+            <td className="py-2 text-zinc-300" colSpan={3}>
+              Total (visible rows)
+            </td>
+            <td className="py-2 text-zinc-100">{formatAmount(totals.amount)}</td>
+            <td className="py-2 text-zinc-300">{formatAmount(totals.fee)}</td>
+            <td />
+            {actionable ? <td /> : null}
+          </tr>
+        </tfoot>
+      </table>
+
+      {/* Card view for small screens */}
+      <div className="block sm:hidden space-y-4">
         {sorted.map((s) => (
-          <tr key={s.id} className="border-b border-zinc-900">
-            <td className="py-2 text-zinc-500">
-              <Link href={`/settlements/${s.id}`} className="hover:underline">
-                {s.id}
+          <div key={s.id} data-testid="settlement-card" className="border border-zinc-800 rounded p-4 bg-zinc-900">
+            <div className="flex justify-between items-center mb-2">
+              <Link href={`/settlements/${s.id}`} className="text-zinc-500 hover:underline font-medium">
+                Settlement #{s.id}
               </Link>
-            </td>
-            <td className="py-2 font-mono text-xs text-zinc-300">{s.anchor}</td>
-            <td className="py-2 font-mono text-zinc-100">{s.asset}</td>
-            <td className="py-2 text-zinc-200">{formatAmount(s.amount)}</td>
-            <td className="py-2 text-zinc-400">{formatAmount(s.fee)}</td>
-            <td className="py-2">
               <StatusBadge status={s.status} />
-            </td>
-            {actionable ? (
-              <td className="py-2 text-right">
-                {s.status === "pending" ? (
-                  <span className="flex justify-end gap-2">
-                    {onExecute ? (
-                      <button
-                        onClick={() => onExecute(s.id)}
-                        className="rounded-md px-2 py-1 text-xs text-emerald-400 hover:text-emerald-300"
-                      >
-                        Execute
-                      </button>
-                    ) : null}
-                    {onCancel ? (
-                      <button
-                        onClick={() => onCancel(s.id)}
-                        className="rounded-md px-2 py-1 text-xs text-red-400 hover:text-red-300"
-                      >
-                        Cancel
-                      </button>
-                    ) : null}
-                  </span>
-                ) : null}
-              </td>
-            ) : null}
-          </tr>
+            </div>
+            <div className="grid grid-cols-2 gap-2 text-sm">
+              <div className="font-medium text-zinc-400">Anchor</div>
+              <div className="font-mono text-zinc-300">{s.anchor}</div>
+              <div className="font-medium text-zinc-400">Asset</div>
+              <div className="font-mono text-zinc-100">{s.asset}</div>
+              <div className="font-medium text-zinc-400">Amount</div>
+              <div className="text-zinc-200">{formatAmount(s.amount)}</div>
+              <div className="font-medium text-zinc-400">Fee</div>
+              <div className="text-zinc-400">{formatAmount(s.fee)}</div>
+            </div>
+            {actionable && s.status === "pending" && (
+              <div className="mt-2 flex justify-end gap-2">
+                {onExecute && (
+                  <button
+                    onClick={() => onExecute(s.id)}
+                    className="rounded-md px-2 py-1 text-xs text-emerald-400 hover:text-emerald-300"
+                  >
+                    Execute
+                  </button>
+                )}
+                {onCancel && (
+                  <button
+                    onClick={() => onCancel(s.id)}
+                    className="rounded-md px-2 py-1 text-xs text-red-400 hover:text-red-300"
+                  >
+                    Cancel
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
         ))}
-      </tbody>
-      <tfoot>
-        <tr className="border-t border-zinc-800 font-medium">
-          <td className="py-2 text-zinc-300" colSpan={3}>
-            Total (visible rows)
-          </td>
-          <td className="py-2 text-zinc-100">{formatAmount(totals.amount)}</td>
-          <td className="py-2 text-zinc-300">{formatAmount(totals.fee)}</td>
-          <td />
-          {actionable ? <td /> : null}
-        </tr>
-      </tfoot>
-    </table>
+        {/* Totals card */}
+        <div className="border border-zinc-800 rounded p-4 bg-zinc-900">
+          <div className="font-medium text-zinc-400 mb-1">Total (visible rows)</div>
+          <div className="grid grid-cols-2 gap-2 text-sm">
+            <div className="font-medium text-zinc-400">Amount</div>
+            <div className="text-zinc-100">{formatAmount(totals.amount)}</div>
+            <div className="font-medium text-zinc-400">Fee</div>
+            <div className="text-zinc-300">{formatAmount(totals.fee)}</div>
+          </div>
+        </div>
+      </div>
+    </>
   );
 }