From 371ce48aa4c21d05faab0a4a80d0ec3860db3720 Mon Sep 17 00:00:00 2001
From: arandomogg <ogstevynn@gmail.com>
Date: Sat, 30 May 2026 02:52:35 +0100
Subject: [PATCH] feat: telemetry consent, webhook delivery log panel,
 responsive tables, offline tx prep

---
 admin-dashboard/app/admin/dashboard/page.tsx  |   8 +-
 .../components/dashboard/ResponsiveTables.tsx |   1 +
 .../components/dashboard/StatusBadge.tsx      |  15 +-
 .../dashboard/WebhookDeliveryLog.tsx          | 261 ++++++++++--------
 .../lib/webhook-delivery-logs-data.test.ts    |  71 +++++
 .../lib/webhook-delivery-logs-data.ts         | 102 ++++---
 client/src/index.ts                           |  11 +
 client/src/offline-tx.ts                      | 130 +++++++++
 .../testUtils/__tests__/offline-tx.test.ts    | 130 +++++++++
 9 files changed, 577 insertions(+), 152 deletions(-)
 create mode 100644 admin-dashboard/lib/webhook-delivery-logs-data.test.ts
 create mode 100644 client/src/offline-tx.ts
 create mode 100644 client/src/testUtils/__tests__/offline-tx.test.ts

diff --git a/admin-dashboard/app/admin/dashboard/page.tsx b/admin-dashboard/app/admin/dashboard/page.tsx
index 297b8317..3f8edfdf 100644
--- a/admin-dashboard/app/admin/dashboard/page.tsx
+++ b/admin-dashboard/app/admin/dashboard/page.tsx
@@ -16,6 +16,7 @@ import { getFeeMultiplierData } from "@/lib/fee-multiplier-data";
 import { FeeEstimatorWidget } from "@/components/dashboard/FeeEstimatorWidget";
 import { ExpenseBreakdown } from "@/components/dashboard/ExpenseBreakdown";
 import { getExpenseBreakdownData } from "@/lib/expense-breakdown-data";
+import { TelemetryConsentSettings } from "@/components/dashboard/TelemetryConsentSettings";
 
 export default async function AdminDashboard() {
   const session = await auth();
@@ -113,8 +114,13 @@ export default async function AdminDashboard() {
           <FeeEstimatorWidget />
         </section>
 
+        <section className="mt-6">
+          <TelemetryConsentSettings />
+        </section>
+
         {/* Tables */}
         <section className="mt-6 space-y-6">
+          <div className="flex flex-wrap gap-3">
             <Link
               href="/admin/billing"
               className="inline-flex min-h-11 items-center justify-center rounded-full border border-primary/30 bg-primary/10 px-6 text-sm font-black text-primary transition hover:shadow-lg hover:-translate-y-0.5"
@@ -159,4 +165,4 @@ export default async function AdminDashboard() {
       </main>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/admin-dashboard/components/dashboard/ResponsiveTables.tsx b/admin-dashboard/components/dashboard/ResponsiveTables.tsx
index 80089e05..541a21f2 100644
--- a/admin-dashboard/components/dashboard/ResponsiveTables.tsx
+++ b/admin-dashboard/components/dashboard/ResponsiveTables.tsx
@@ -122,6 +122,7 @@ export function TransactionsTable({
 
               return (
                 <FragmentRow key={transaction.id}>
+                  <tr className="align-top">
                     <td className="px-5 py-4">
                       <div className="font-semibold text-slate-900">{transaction.amount}</div>
                       <div className="text-xs text-slate-500 md:hidden">{transaction.asset}</div>
diff --git a/admin-dashboard/components/dashboard/StatusBadge.tsx b/admin-dashboard/components/dashboard/StatusBadge.tsx
index 464b76c8..5ec0d56d 100644
--- a/admin-dashboard/components/dashboard/StatusBadge.tsx
+++ b/admin-dashboard/components/dashboard/StatusBadge.tsx
@@ -1,17 +1,20 @@
 "use client";
 
-import type { TransactionStatus } from "@/components/dashboard/types";
+import type { TransactionStatus, WebhookDeliveryStatus } from "@/components/dashboard/types";
 import { Pulse } from "@/components/ui/motion";
 
 type BadgeTone = "green" | "amber" | "slate" | "red";
 
-function getTone(status: TransactionStatus | "active" | "inactive"): BadgeTone {
+type AllowedStatus = TransactionStatus | WebhookDeliveryStatus | "active" | "inactive";
+
+function getTone(status: AllowedStatus): BadgeTone {
   switch (status) {
     case "success":
     case "active":
       return "green";
     case "pending":
     case "submitted":
+    case "retrying":
       return "amber";
     case "failed":
       return "red";
@@ -20,16 +23,14 @@ function getTone(status: TransactionStatus | "active" | "inactive"): BadgeTone {
   }
 }
 
-function isPendingStatus(
-  status: TransactionStatus | "active" | "inactive"
-): boolean {
-  return status === "pending" || status === "submitted";
+function isPendingStatus(status: AllowedStatus): boolean {
+  return status === "pending" || status === "submitted" || status === "retrying";
 }
 
 export function StatusBadge({
   status,
 }: {
-  status: TransactionStatus | "active" | "inactive";
+  status: AllowedStatus;
 }) {
   const toneClassName = {
     green:
diff --git a/admin-dashboard/components/dashboard/WebhookDeliveryLog.tsx b/admin-dashboard/components/dashboard/WebhookDeliveryLog.tsx
index 61a697b7..bfec2801 100644
--- a/admin-dashboard/components/dashboard/WebhookDeliveryLog.tsx
+++ b/admin-dashboard/components/dashboard/WebhookDeliveryLog.tsx
@@ -60,41 +60,45 @@ interface WebhookDeliveryLogProps {
   onQueryChange: (query: Partial<WebhookDeliveryQuery>) => void;
 }
 
+function DrawerSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h5 className="mb-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+        {title}
+      </h5>
+      {children}
+    </div>
+  );
+}
+
+function JsonBlock({ value }: { value: Record<string, unknown> | Record<string, string> }) {
+  return (
+    <pre className="max-h-48 overflow-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">
+      {JSON.stringify(value, null, 2)}
+    </pre>
+  );
+}
+
 export function WebhookDeliveryLogTable({
   data,
   onPageChange,
   onQueryChange,
 }: WebhookDeliveryLogProps) {
-  const [showPayload, setShowPayload] = useState<string | null>(null);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
 
-  const getStatusVariant = (status: WebhookDeliveryStatus) => {
-    switch (status) {
-      case "success":
-        return "success";
-      case "failed":
-        return "error";
-      case "pending":
-        return "warning";
-      case "retrying":
-        return "info";
-      default:
-        return "default";
-    }
-  };
-
-  const formatTimestamp = (timestamp: string) => {
-    return new Date(timestamp).toLocaleString();
-  };
+  const formatTimestamp = (timestamp: string) =>
+    new Date(timestamp).toLocaleString();
 
   const filteredRows = useMemo(() => {
     let rows = [...data.rows];
 
     if (data.search) {
+      const q = data.search.toLowerCase();
       rows = rows.filter(
         (row) =>
-          row.tenantName?.toLowerCase().includes(data.search.toLowerCase()) ||
-          row.tenantId.toLowerCase().includes(data.search.toLowerCase()) ||
-          row.webhookUrl.toLowerCase().includes(data.search.toLowerCase())
+          row.tenantName?.toLowerCase().includes(q) ||
+          row.tenantId.toLowerCase().includes(q) ||
+          row.webhookUrl.toLowerCase().includes(q),
       );
     }
 
@@ -138,7 +142,6 @@ export function WebhookDeliveryLogTable({
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          {/* Search */}
           <div className="space-y-2">
             <label className="text-sm font-medium">Search</label>
             <Input
@@ -148,7 +151,6 @@ export function WebhookDeliveryLogTable({
             />
           </div>
 
-          {/* Status Filter */}
           <div className="space-y-2">
             <label className="text-sm font-medium">Status</label>
             <div className="flex flex-wrap gap-2">
@@ -165,7 +167,6 @@ export function WebhookDeliveryLogTable({
             </div>
           </div>
 
-          {/* Event Type Filter */}
           <div className="space-y-2">
             <label className="text-sm font-medium">Event Type</label>
             <div className="flex flex-wrap gap-2">
@@ -182,12 +183,13 @@ export function WebhookDeliveryLogTable({
             </div>
           </div>
 
-          {/* Sort */}
           <div className="space-y-2">
             <label className="text-sm font-medium">Sort By</label>
             <select
               value={data.sort}
-              onChange={(e) => onQueryChange({ sort: e.target.value as WebhookDeliverySort })}
+              onChange={(e) =>
+                onQueryChange({ sort: e.target.value as WebhookDeliverySort })
+              }
               className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
             >
               {SORT_OPTIONS.map((sort) => (
@@ -200,7 +202,7 @@ export function WebhookDeliveryLogTable({
         </CardContent>
       </Card>
 
-      {/* Results Summary */}
+      {/* Results summary */}
       <div className="flex items-center justify-between">
         <p className="text-sm text-muted-foreground">
           Showing {filteredRows.length} of {data.totalRows} delivery logs
@@ -217,102 +219,143 @@ export function WebhookDeliveryLogTable({
                 <tr>
                   <th className="px-4 py-3 text-left text-sm font-medium">Timestamp</th>
                   <th className="px-4 py-3 text-left text-sm font-medium">Tenant</th>
-                  <th className="px-4 py-3 text-left text-sm font-medium">Event Type</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium">Event</th>
                   <th className="px-4 py-3 text-left text-sm font-medium">Status</th>
                   <th className="px-4 py-3 text-left text-sm font-medium">Attempts</th>
                   <th className="px-4 py-3 text-left text-sm font-medium">Response</th>
-                  <th className="px-4 py-3 text-left text-sm font-medium">Webhook URL</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium hidden md:table-cell">
+                    Webhook URL
+                  </th>
                   <th className="px-4 py-3 text-left text-sm font-medium">Actions</th>
                 </tr>
               </thead>
               <tbody>
-                {filteredRows.map((row) => (
-                  <tr key={row.id} className="border-b hover:bg-muted/25">
-                    <td className="px-4 py-3 text-sm">
-                      <div className="space-y-1">
-                        <div>{formatTimestamp(row.createdAt)}</div>
-                        {row.nextRetryAt && (
-                          <div className="text-xs text-muted-foreground">
-                            Next retry: {formatTimestamp(row.nextRetryAt)}
+                {filteredRows.map((row) => {
+                  const isOpen = expandedRow === row.id;
+
+                  return (
+                    <>
+                      <tr key={row.id} className="border-b hover:bg-muted/25">
+                        <td className="px-4 py-3 text-sm">
+                          <div>{formatTimestamp(row.createdAt)}</div>
+                          {row.nextRetryAt && (
+                            <div className="text-xs text-muted-foreground">
+                              Next retry: {formatTimestamp(row.nextRetryAt)}
+                            </div>
+                          )}
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          <div className="font-medium">{row.tenantName ?? row.tenantId}</div>
+                          <div className="text-xs text-muted-foreground">{row.tenantId}</div>
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          {EVENT_TYPE_OPTIONS.find((o) => o.value === row.eventType)?.label ??
+                            row.eventType}
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          <StatusBadge status={row.status} />
+                        </td>
+                        <td className="px-4 py-3 text-sm text-center">
+                          {row.attempts}/{row.maxAttempts}
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          {row.responseCode !== null ? (
+                            <div>
+                              <div
+                                className={`font-medium ${
+                                  row.responseCode >= 200 && row.responseCode < 300
+                                    ? "text-green-600"
+                                    : "text-red-600"
+                                }`}
+                              >
+                                {row.responseCode}
+                              </div>
+                              {row.responseMessage && (
+                                <div className="max-w-32 truncate text-xs text-muted-foreground">
+                                  {row.responseMessage}
+                                </div>
+                              )}
+                            </div>
+                          ) : (
+                            <span className="text-muted-foreground">—</span>
+                          )}
+                        </td>
+                        <td className="hidden px-4 py-3 text-sm md:table-cell">
+                          <div className="max-w-48 truncate" title={row.webhookUrl}>
+                            {row.webhookUrl}
                           </div>
-                        )}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm">
-                      <div className="space-y-1">
-                        <div className="font-medium">{row.tenantName || row.tenantId}</div>
-                        <div className="text-xs text-muted-foreground">{row.tenantId}</div>
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm">
-                      {EVENT_TYPE_OPTIONS.find(opt => opt.value === row.eventType)?.label || row.eventType}
-                    </td>
-                    <td className="px-4 py-3 text-sm">
-                      <StatusBadge status={row.status} variant={getStatusVariant(row.status)} />
-                    </td>
-                    <td className="px-4 py-3 text-sm">
-                      <div className="text-center">
-                        {row.attempts}/{row.maxAttempts}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm">
-                      {row.responseCode ? (
-                        <div className="space-y-1">
-                          <div className={`font-medium ${
-                            row.responseCode >= 200 && row.responseCode < 300 
-                              ? 'text-green-600' 
-                              : 'text-red-600'
-                          }`}>
-                            {row.responseCode}
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          <div className="flex items-center gap-2">
+                            <CopyButton value={row.id} label="Copy ID" />
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() =>
+                                setExpandedRow(isOpen ? null : row.id)
+                              }
+                              aria-expanded={isOpen}
+                            >
+                              {isOpen ? "Hide" : "Details"}
+                            </Button>
                           </div>
-                          {row.responseMessage && (
-                            <div className="text-xs text-muted-foreground max-w-32 truncate">
-                              {row.responseMessage}
+                        </td>
+                      </tr>
+
+                      {/* Expandable details drawer */}
+                      {isOpen && (
+                        <tr key={`${row.id}-drawer`} className="bg-muted/10">
+                          <td colSpan={8} className="px-4 py-5">
+                            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+                              <DrawerSection title="Request Payload">
+                                {Object.keys(row.requestPayload).length > 0 ? (
+                                  <JsonBlock value={row.requestPayload} />
+                                ) : (
+                                  <p className="text-xs text-muted-foreground">No request payload</p>
+                                )}
+                              </DrawerSection>
+
+                              <DrawerSection title="Response Headers">
+                                {Object.keys(row.responseHeaders).length > 0 ? (
+                                  <JsonBlock value={row.responseHeaders} />
+                                ) : (
+                                  <p className="text-xs text-muted-foreground">No response headers</p>
+                                )}
+                              </DrawerSection>
+
+                              <DrawerSection title="Event Payload">
+                                <JsonBlock value={row.payload} />
+                              </DrawerSection>
                             </div>
-                          )}
-                        </div>
-                      ) : (
-                        <span className="text-muted-foreground">-</span>
+
+                            <div className="mt-4 flex flex-wrap items-center gap-4 border-t pt-3 text-xs text-muted-foreground">
+                              <span>
+                                <span className="font-medium text-foreground">Delivery ID:</span>{" "}
+                                {row.id}
+                              </span>
+                              <span>
+                                <span className="font-medium text-foreground">Webhook URL:</span>{" "}
+                                {row.webhookUrl}
+                              </span>
+                              {row.nextRetryAt && (
+                                <span>
+                                  <span className="font-medium text-foreground">
+                                    Next Retry:
+                                  </span>{" "}
+                                  {formatTimestamp(row.nextRetryAt)}
+                                </span>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
                       )}
-                    </td>
-                    <td className="px-4 py-3 text-sm">
-                      <div className="max-w-48 truncate" title={row.webhookUrl}>
-                        {row.webhookUrl}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm">
-                      <div className="flex items-center gap-2">
-                        <CopyButton text={row.id} label="Copy ID" />
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setShowPayload(showPayload === row.id ? null : row.id)}
-                        >
-                          {showPayload === row.id ? "Hide" : "Payload"}
-                        </Button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
+                    </>
+                  );
+                })}
               </tbody>
             </table>
           </div>
 
-          {/* Payload Details */}
-          {showPayload && (
-            <div className="border-t bg-muted/25 p-4">
-              <h4 className="mb-2 text-sm font-medium">Payload Details</h4>
-              <pre className="max-h-64 overflow-auto rounded bg-background p-3 text-xs">
-                {JSON.stringify(
-                  filteredRows.find((row) => row.id === showPayload)?.payload,
-                  null,
-                  2
-                )}
-              </pre>
-            </div>
-          )}
-
-          {/* Empty State */}
           {filteredRows.length === 0 && (
             <div className="py-12 text-center">
               <p className="text-muted-foreground">No webhook delivery logs found</p>
diff --git a/admin-dashboard/lib/webhook-delivery-logs-data.test.ts b/admin-dashboard/lib/webhook-delivery-logs-data.test.ts
new file mode 100644
index 00000000..b5f4b2c7
--- /dev/null
+++ b/admin-dashboard/lib/webhook-delivery-logs-data.test.ts
@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { getWebhookDeliveryLogsData } from "./webhook-delivery-logs-data.ts";
+
+test("getWebhookDeliveryLogsData returns sample source by default", async () => {
+  const result = await getWebhookDeliveryLogsData();
+  assert.equal(result.source, "sample");
+});
+
+test("getWebhookDeliveryLogsData returns the first page of rows", async () => {
+  const result = await getWebhookDeliveryLogsData(1, 2);
+  assert.equal(result.rows.length, 2);
+  assert.equal(result.page, 1);
+  assert.equal(result.pageSize, 2);
+  assert.equal(result.totalRows, 5);
+  assert.equal(result.totalPages, 3);
+});
+
+test("getWebhookDeliveryLogsData paginates correctly", async () => {
+  const page1 = await getWebhookDeliveryLogsData(1, 3);
+  const page2 = await getWebhookDeliveryLogsData(2, 3);
+
+  assert.equal(page1.rows.length, 3);
+  assert.equal(page2.rows.length, 2);
+  assert.notEqual(page1.rows[0].id, page2.rows[0].id);
+});
+
+test("getWebhookDeliveryLogsData rows include requestPayload and responseHeaders", async () => {
+  const { rows } = await getWebhookDeliveryLogsData(1, 10);
+
+  for (const row of rows) {
+    assert.ok(
+      typeof row.requestPayload === "object" && row.requestPayload !== null,
+      `row ${row.id} missing requestPayload`,
+    );
+    assert.ok(
+      typeof row.responseHeaders === "object" && row.responseHeaders !== null,
+      `row ${row.id} missing responseHeaders`,
+    );
+  }
+});
+
+test("getWebhookDeliveryLogsData reflects provided sort and search in response", async () => {
+  const result = await getWebhookDeliveryLogsData(
+    1,
+    10,
+    "acme",
+    "time_asc",
+    [],
+    [],
+    [],
+  );
+  assert.equal(result.sort, "time_asc");
+  assert.equal(result.search, "acme");
+});
+
+test("getWebhookDeliveryLogsData returns empty rows for out-of-range page", async () => {
+  const result = await getWebhookDeliveryLogsData(999, 10);
+  assert.equal(result.rows.length, 0);
+  assert.equal(result.page, 999);
+});
+
+test("getWebhookDeliveryLogsData sample contains all expected delivery statuses", async () => {
+  const { rows } = await getWebhookDeliveryLogsData(1, 10);
+  const statuses = new Set(rows.map((r) => r.status));
+
+  assert.ok(statuses.has("success"), "expected at least one success row");
+  assert.ok(statuses.has("failed"), "expected at least one failed row");
+  assert.ok(statuses.has("pending"), "expected at least one pending row");
+  assert.ok(statuses.has("retrying"), "expected at least one retrying row");
+});
diff --git a/admin-dashboard/lib/webhook-delivery-logs-data.ts b/admin-dashboard/lib/webhook-delivery-logs-data.ts
index c0f4bbf9..334f96d7 100644
--- a/admin-dashboard/lib/webhook-delivery-logs-data.ts
+++ b/admin-dashboard/lib/webhook-delivery-logs-data.ts
@@ -1,6 +1,5 @@
 import type { WebhookDeliveryPageData, WebhookDeliveryLog } from "@/components/dashboard/types";
 
-// Sample data for development - replace with actual API call
 const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
   {
     id: "whdl_1234567890",
@@ -13,6 +12,11 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
     maxAttempts: 3,
     responseCode: 200,
     responseMessage: "OK",
+    requestPayload: {
+      event: "tx.success",
+      tenantId: "tenant_001",
+      timestamp: "2024-03-28T10:30:00Z",
+    },
     payload: {
       event: "tx.success",
       data: {
@@ -20,12 +24,16 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
         tenantId: "tenant_001",
         amount: "100",
         asset: "XLM",
-        timestamp: "2024-03-28T10:30:00Z"
-      }
+        timestamp: "2024-03-28T10:30:00Z",
+      },
+    },
+    responseHeaders: {
+      "content-type": "application/json",
+      "x-request-id": "req_abc123",
     },
     createdAt: "2024-03-28T10:30:15Z",
     updatedAt: "2024-03-28T10:30:15Z",
-    nextRetryAt: null
+    nextRetryAt: null,
   },
   {
     id: "whdl_1234567891",
@@ -38,18 +46,27 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
     maxAttempts: 3,
     responseCode: 500,
     responseMessage: "Internal Server Error",
+    requestPayload: {
+      event: "tx.failed",
+      tenantId: "tenant_002",
+      timestamp: "2024-03-28T10:25:00Z",
+    },
     payload: {
       event: "tx.failed",
       data: {
         transactionHash: "def456...",
         tenantId: "tenant_002",
         error: "Insufficient balance",
-        timestamp: "2024-03-28T10:25:00Z"
-      }
+        timestamp: "2024-03-28T10:25:00Z",
+      },
+    },
+    responseHeaders: {
+      "content-type": "text/plain",
+      "x-error-code": "INTERNAL_ERROR",
     },
     createdAt: "2024-03-28T10:25:30Z",
     updatedAt: "2024-03-28T10:30:30Z",
-    nextRetryAt: "2024-03-28T10:35:30Z"
+    nextRetryAt: "2024-03-28T10:35:30Z",
   },
   {
     id: "whdl_1234567892",
@@ -62,18 +79,26 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
     maxAttempts: 3,
     responseCode: 404,
     responseMessage: "Not Found",
+    requestPayload: {
+      event: "balance.low",
+      tenantId: "tenant_003",
+      timestamp: "2024-03-28T10:20:00Z",
+    },
     payload: {
       event: "balance.low",
       data: {
         tenantId: "tenant_003",
         currentBalance: "50.5",
         threshold: "100",
-        timestamp: "2024-03-28T10:20:00Z"
-      }
+        timestamp: "2024-03-28T10:20:00Z",
+      },
+    },
+    responseHeaders: {
+      "content-type": "text/html",
     },
     createdAt: "2024-03-28T10:20:45Z",
     updatedAt: "2024-03-28T10:25:45Z",
-    nextRetryAt: null
+    nextRetryAt: null,
   },
   {
     id: "whdl_1234567893",
@@ -86,6 +111,11 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
     maxAttempts: 3,
     responseCode: null,
     responseMessage: null,
+    requestPayload: {
+      event: "tx.success",
+      tenantId: "tenant_001",
+      timestamp: "2024-03-28T10:35:00Z",
+    },
     payload: {
       event: "tx.success",
       data: {
@@ -93,12 +123,13 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
         tenantId: "tenant_001",
         amount: "250",
         asset: "XLM",
-        timestamp: "2024-03-28T10:35:00Z"
-      }
+        timestamp: "2024-03-28T10:35:00Z",
+      },
     },
+    responseHeaders: {},
     createdAt: "2024-03-28T10:35:10Z",
     updatedAt: "2024-03-28T10:35:10Z",
-    nextRetryAt: "2024-03-28T10:35:40Z"
+    nextRetryAt: "2024-03-28T10:35:40Z",
   },
   {
     id: "whdl_1234567894",
@@ -111,6 +142,11 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
     maxAttempts: 3,
     responseCode: 200,
     responseMessage: "OK",
+    requestPayload: {
+      event: "tx.success",
+      tenantId: "tenant_004",
+      timestamp: "2024-03-28T10:15:00Z",
+    },
     payload: {
       event: "tx.success",
       data: {
@@ -118,13 +154,17 @@ const SAMPLE_WEBHOOK_DELIVERY_LOGS: WebhookDeliveryLog[] = [
         tenantId: "tenant_004",
         amount: "75",
         asset: "XLM",
-        timestamp: "2024-03-28T10:15:00Z"
-      }
+        timestamp: "2024-03-28T10:15:00Z",
+      },
+    },
+    responseHeaders: {
+      "content-type": "application/json",
+      "x-request-id": "req_jkl012",
     },
     createdAt: "2024-03-28T10:15:20Z",
     updatedAt: "2024-03-28T10:15:20Z",
-    nextRetryAt: null
-  }
+    nextRetryAt: null,
+  },
 ];
 
 export async function getWebhookDeliveryLogsData(
@@ -134,16 +174,9 @@ export async function getWebhookDeliveryLogsData(
   sort: string = "time_desc",
   statusFilter: string[] = [],
   eventTypeFilter: string[] = [],
-  tenantFilter: string[] = []
+  tenantFilter: string[] = [],
 ): Promise<WebhookDeliveryPageData> {
   try {
-    // In a real implementation, this would call your backend API
-    // const response = await fetch(
-    //   `/api/admin/webhooks/delivery-logs?page=${page}&pageSize=${pageSize}&search=${encodeURIComponent(search)}&sort=${sort}&statusFilter=${statusFilter.join(',')}&eventTypeFilter=${eventTypeFilter.join(',')}&tenantFilter=${tenantFilter.join(',')}`
-    // );
-    // const data = await response.json();
-
-    // For now, return sample data
     const startIndex = (page - 1) * pageSize;
     const endIndex = startIndex + pageSize;
     const rows = SAMPLE_WEBHOOK_DELIVERY_LOGS.slice(startIndex, endIndex);
@@ -154,29 +187,28 @@ export async function getWebhookDeliveryLogsData(
       pageSize,
       totalRows: SAMPLE_WEBHOOK_DELIVERY_LOGS.length,
       totalPages: Math.ceil(SAMPLE_WEBHOOK_DELIVERY_LOGS.length / pageSize),
-      sort: sort as any,
+      sort: sort as WebhookDeliveryPageData["sort"],
       search,
-      statusFilter: statusFilter as any,
-      eventTypeFilter: eventTypeFilter as any,
+      statusFilter: statusFilter as WebhookDeliveryPageData["statusFilter"],
+      eventTypeFilter: eventTypeFilter as WebhookDeliveryPageData["eventTypeFilter"],
       tenantFilter,
-      source: "sample"
+      source: "sample",
     };
   } catch (error) {
     console.error("Failed to fetch webhook delivery logs:", error);
-    
-    // Return empty data on error
+
     return {
       rows: [],
       page,
       pageSize,
       totalRows: 0,
       totalPages: 0,
-      sort: sort as any,
+      sort: sort as WebhookDeliveryPageData["sort"],
       search,
-      statusFilter: statusFilter as any,
-      eventTypeFilter: eventTypeFilter as any,
+      statusFilter: statusFilter as WebhookDeliveryPageData["statusFilter"],
+      eventTypeFilter: eventTypeFilter as WebhookDeliveryPageData["eventTypeFilter"],
       tenantFilter,
-      source: "sample"
+      source: "sample",
     };
   }
 }
diff --git a/client/src/index.ts b/client/src/index.ts
index 0bb3e4dc..77b0afb5 100644
--- a/client/src/index.ts
+++ b/client/src/index.ts
@@ -577,6 +577,17 @@ export type { TelemetryConfig, TelemetryData } from "./telemetry";
 
 export { FluidQueue } from "./queue";
 export type { QueuedTransaction, FluidQueueCallbacks } from "./queue";
+
+export {
+  prepareOfflineTransaction,
+  getPendingOfflineTransactions,
+  removePreparedTransaction,
+  clearPreparedTransactions,
+  getPendingCount,
+  validatePreparedTransaction,
+  OFFLINE_TX_STORAGE_KEY,
+} from "./offline-tx";
+export type { OfflinePreparedTransaction, OfflinePrepareOptions } from "./offline-tx";
 export {
   buildFeeBumpTransaction,
   createHorizonServer,
diff --git a/client/src/offline-tx.ts b/client/src/offline-tx.ts
new file mode 100644
index 00000000..d9d9c2f2
--- /dev/null
+++ b/client/src/offline-tx.ts
@@ -0,0 +1,130 @@
+import { toTransactionXdr, fromTransactionXdr } from "./stellarCompatibility";
+
+export interface OfflinePreparedTransaction {
+  id: string;
+  signedXdr: string;
+  preparedAt: number;
+  submit: boolean;
+  networkPassphrase: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface OfflinePrepareOptions {
+  submit?: boolean;
+  metadata?: Record<string, unknown>;
+  now?: number;
+}
+
+const STORAGE_KEY = "fluid_offline_prepared_txns";
+
+function generateId(): string {
+  return `fluid_offline_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function readStorage(storage: Pick<Storage, "getItem">): OfflinePreparedTransaction[] {
+  try {
+    const raw = storage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeStorage(
+  storage: Pick<Storage, "setItem">,
+  items: OfflinePreparedTransaction[],
+): void {
+  storage.setItem(STORAGE_KEY, JSON.stringify(items));
+}
+
+/**
+ * Prepares a fully signed transaction XDR for offline storage.
+ *
+ * Call this while offline (or any time before submission). The returned
+ * record is persisted to the provided storage and can later be retrieved
+ * with {@link getPendingOfflineTransactions} for submission when back online.
+ *
+ * @param signedXdr - A fully signed transaction in XDR base-64 format.
+ * @param networkPassphrase - The Stellar network passphrase used to sign.
+ * @param storage - Any Storage-like adapter (e.g. localStorage).
+ * @param options - Optional submit flag, metadata, and clock override for testing.
+ */
+export function prepareOfflineTransaction(
+  signedXdr: string,
+  networkPassphrase: string,
+  storage: Pick<Storage, "getItem" | "setItem">,
+  options: OfflinePrepareOptions = {},
+): OfflinePreparedTransaction {
+  const item: OfflinePreparedTransaction = {
+    id: generateId(),
+    signedXdr,
+    preparedAt: options.now ?? Date.now(),
+    submit: options.submit ?? false,
+    networkPassphrase,
+    metadata: options.metadata,
+  };
+
+  const existing = readStorage(storage);
+  writeStorage(storage, [...existing, item]);
+
+  return item;
+}
+
+/**
+ * Returns all pending offline-prepared transactions from storage.
+ */
+export function getPendingOfflineTransactions(
+  storage: Pick<Storage, "getItem">,
+): OfflinePreparedTransaction[] {
+  return readStorage(storage);
+}
+
+/**
+ * Removes a single prepared transaction from storage by its ID.
+ */
+export function removePreparedTransaction(
+  id: string,
+  storage: Pick<Storage, "getItem" | "setItem">,
+): void {
+  const items = readStorage(storage).filter((item) => item.id !== id);
+  writeStorage(storage, items);
+}
+
+/**
+ * Removes all prepared transactions from storage.
+ */
+export function clearPreparedTransactions(
+  storage: Pick<Storage, "setItem">,
+): void {
+  storage.setItem(STORAGE_KEY, JSON.stringify([]));
+}
+
+/**
+ * Returns the number of pending offline transactions stored.
+ */
+export function getPendingCount(storage: Pick<Storage, "getItem">): number {
+  return readStorage(storage).length;
+}
+
+/**
+ * Validates that a stored XDR can be parsed back with the expected network
+ * passphrase. Returns true when the XDR is well-formed, false otherwise.
+ *
+ * @param item - A prepared transaction record.
+ * @param stellarSdk - The Stellar SDK instance to use for parsing.
+ */
+export function validatePreparedTransaction(
+  item: OfflinePreparedTransaction,
+  stellarSdk: unknown,
+): boolean {
+  try {
+    fromTransactionXdr(stellarSdk, item.signedXdr, item.networkPassphrase);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export { STORAGE_KEY as OFFLINE_TX_STORAGE_KEY };
diff --git a/client/src/testUtils/__tests__/offline-tx.test.ts b/client/src/testUtils/__tests__/offline-tx.test.ts
new file mode 100644
index 00000000..6b68bab6
--- /dev/null
+++ b/client/src/testUtils/__tests__/offline-tx.test.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import {
+  prepareOfflineTransaction,
+  getPendingOfflineTransactions,
+  removePreparedTransaction,
+  clearPreparedTransactions,
+  getPendingCount,
+  OFFLINE_TX_STORAGE_KEY,
+} from "../../offline-tx";
+
+function makeStorage() {
+  const store = new Map<string, string>();
+  return {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => { store.set(key, value); },
+    store,
+  };
+}
+
+const TESTNET = "Test SDF Network ; September 2015";
+const FAKE_XDR = "AAAAAQAAAABZ2a3Hfake==";
+
+describe("prepareOfflineTransaction", () => {
+  it("persists a record to storage and returns it", () => {
+    const storage = makeStorage();
+    const now = 1_700_000_000_000;
+
+    const record = prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { now });
+
+    expect(record.signedXdr).toBe(FAKE_XDR);
+    expect(record.networkPassphrase).toBe(TESTNET);
+    expect(record.preparedAt).toBe(now);
+    expect(record.submit).toBe(false);
+    expect(typeof record.id).toBe("string");
+    expect(record.id.startsWith("fluid_offline_")).toBe(true);
+    expect(storage.store.has(OFFLINE_TX_STORAGE_KEY)).toBe(true);
+  });
+
+  it("sets submit flag from options", () => {
+    const storage = makeStorage();
+    const record = prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { submit: true });
+    expect(record.submit).toBe(true);
+  });
+
+  it("stores optional metadata", () => {
+    const storage = makeStorage();
+    const meta = { note: "payment to alice", ref: "PAY-001" };
+    const record = prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { metadata: meta });
+    expect(record.metadata).toEqual(meta);
+  });
+
+  it("accumulates multiple records without overwriting", () => {
+    const storage = makeStorage();
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { now: 1 });
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { now: 2 });
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { now: 3 });
+
+    const pending = getPendingOfflineTransactions(storage);
+    expect(pending).toHaveLength(3);
+    const timestamps = pending.map((r) => r.preparedAt);
+    expect(timestamps).toContain(1);
+    expect(timestamps).toContain(2);
+    expect(timestamps).toContain(3);
+  });
+});
+
+describe("getPendingOfflineTransactions", () => {
+  it("returns empty array when storage is empty", () => {
+    const storage = makeStorage();
+    expect(getPendingOfflineTransactions(storage)).toEqual([]);
+  });
+
+  it("returns empty array when storage contains invalid JSON", () => {
+    const storage = makeStorage();
+    storage.setItem(OFFLINE_TX_STORAGE_KEY, "not-json");
+    expect(getPendingOfflineTransactions(storage)).toEqual([]);
+  });
+
+  it("returns empty array when storage contains non-array JSON", () => {
+    const storage = makeStorage();
+    storage.setItem(OFFLINE_TX_STORAGE_KEY, JSON.stringify({ oops: true }));
+    expect(getPendingOfflineTransactions(storage)).toEqual([]);
+  });
+});
+
+describe("getPendingCount", () => {
+  it("returns 0 for empty storage", () => {
+    expect(getPendingCount(makeStorage())).toBe(0);
+  });
+
+  it("reflects the number of stored transactions", () => {
+    const storage = makeStorage();
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage);
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage);
+    expect(getPendingCount(storage)).toBe(2);
+  });
+});
+
+describe("removePreparedTransaction", () => {
+  it("removes only the record with the given id", () => {
+    const storage = makeStorage();
+    const a = prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { now: 1 });
+    const b = prepareOfflineTransaction(FAKE_XDR, TESTNET, storage, { now: 2 });
+
+    removePreparedTransaction(a.id, storage);
+
+    const pending = getPendingOfflineTransactions(storage);
+    expect(pending).toHaveLength(1);
+    expect(pending[0].id).toBe(b.id);
+  });
+
+  it("is a no-op for an id that does not exist", () => {
+    const storage = makeStorage();
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage);
+    removePreparedTransaction("no-such-id", storage);
+    expect(getPendingCount(storage)).toBe(1);
+  });
+});
+
+describe("clearPreparedTransactions", () => {
+  it("empties all stored transactions", () => {
+    const storage = makeStorage();
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage);
+    prepareOfflineTransaction(FAKE_XDR, TESTNET, storage);
+
+    clearPreparedTransactions(storage);
+
+    expect(getPendingCount(storage)).toBe(0);
+  });
+});