From ddd80d8c9ba3eac04b78a4b9d0b529f6e400dc3e Mon Sep 17 00:00:00 2001
From: Ajidokwu Sabo <realjaiboi70@gmail.com>
Date: Tue, 28 Jul 2026 18:41:57 +0100
Subject: [PATCH 1/4] feat: add memo input with byte counter and validation
 (#484)

---
 src/components/invoice/MemoInput.tsx | 57 ++++++++++++++++++++++++++++
 src/lib/stellar.ts                   |  1 +
 2 files changed, 58 insertions(+)
 create mode 100644 src/components/invoice/MemoInput.tsx

diff --git a/src/components/invoice/MemoInput.tsx b/src/components/invoice/MemoInput.tsx
new file mode 100644
index 0000000..6ffafd9
--- /dev/null
+++ b/src/components/invoice/MemoInput.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { MEMO_MAX_BYTES } from "@/lib/stellar";
+
+interface MemoInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export default function MemoInput({
+  value,
+  onChange,
+  disabled = false,
+  placeholder = "Add a memo (optional)",
+}: MemoInputProps) {
+  const byteLength = new TextEncoder().encode(value).length;
+  const isAtLimit = byteLength >= MEMO_MAX_BYTES;
+  const isOverLimit = byteLength > MEMO_MAX_BYTES;
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div>
+      <label htmlFor="memo-input" className="block text-sm font-medium text-gray-300 mb-1">
+        Memo
+      </label>
+      <textarea
+        id="memo-input"
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        placeholder={placeholder}
+        rows={2}
+        className={`w-full min-h-16 bg-gray-900 border rounded-lg px-4 py-2 text-sm text-gray-100 focus:outline-none focus:ring-2 disabled:opacity-70 resize-none ${
+          isOverLimit
+            ? "border-red-600 focus:ring-red-500"
+            : "border-gray-700 focus:ring-indigo-500"
+        }`}
+      />
+      <div className="flex items-center justify-between mt-2">
+        <span className="text-xs text-gray-500">
+          {byteLength} / {MEMO_MAX_BYTES} bytes
+        </span>
+        {isAtLimit && (
+          <span className={`text-xs font-medium ${isOverLimit ? "text-red-400" : "text-yellow-400"}`}>
+            {isOverLimit ? "Exceeds limit" : "At limit"}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/stellar.ts b/src/lib/stellar.ts
index 0a8b695..7c78dac 100644
--- a/src/lib/stellar.ts
+++ b/src/lib/stellar.ts
@@ -9,6 +9,7 @@ import { NETWORK_PASSPHRASE } from "./freighter";
 
 let _client: StellarSplitClient | null = null;
 
+export const MEMO_MAX_BYTES = 28;
 export const RPC_URL = process.env.NEXT_PUBLIC_RPC_URL ?? "https://soroban-testnet.stellar.org";
 const HORIZON_URL =
   process.env.NEXT_PUBLIC_HORIZON_URL ??

From 2e2e0668bb2191ef28c0da123401d3a583a984fd Mon Sep 17 00:00:00 2001
From: Ajidokwu Sabo <realjaiboi70@gmail.com>
Date: Tue, 28 Jul 2026 18:42:46 +0100
Subject: [PATCH 2/4] feat: add responsive data table component with invoice
 and split summary tables (#482)

---
 src/components/invoice/InvoiceTable.tsx      |  63 +++++++++++
 src/components/invoice/SplitSummaryTable.tsx | 106 +++++++++++++++++++
 src/components/ui/DataTable.tsx              |  24 +++++
 3 files changed, 193 insertions(+)
 create mode 100644 src/components/invoice/InvoiceTable.tsx
 create mode 100644 src/components/invoice/SplitSummaryTable.tsx
 create mode 100644 src/components/ui/DataTable.tsx

diff --git a/src/components/invoice/InvoiceTable.tsx b/src/components/invoice/InvoiceTable.tsx
new file mode 100644
index 0000000..6abc399
--- /dev/null
+++ b/src/components/invoice/InvoiceTable.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { formatAmount, truncateAddress } from "@stellar-split/sdk";
+import DataTable from "@/components/ui/DataTable";
+
+interface TableRecipient {
+  address: string;
+  amount: bigint;
+}
+
+interface InvoiceTableProps {
+  recipients: TableRecipient[];
+  assetCode?: string;
+}
+
+export default function InvoiceTable({
+  recipients,
+  assetCode = "XLM",
+}: InvoiceTableProps) {
+  if (!recipients || recipients.length === 0) {
+    return <p className="text-sm text-gray-400">No recipients</p>;
+  }
+
+  return (
+    <DataTable className="text-sm border-collapse">
+      <thead>
+        <tr className="border-b border-gray-700">
+          <th
+            className="text-left px-4 py-2 font-semibold text-gray-300"
+            style={{ minWidth: "120px" }}
+          >
+            Address
+          </th>
+          <th
+            className="text-right px-4 py-2 font-semibold text-gray-300"
+            style={{ minWidth: "100px" }}
+          >
+            Amount
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {recipients.map((recipient, idx) => (
+          <tr key={idx} className="border-b border-gray-800 hover:bg-gray-900/50">
+            <td
+              className="px-4 py-3 font-mono text-gray-400 truncate"
+              title={recipient.address}
+              style={{ minWidth: "120px" }}
+            >
+              {truncateAddress(recipient.address)}
+            </td>
+            <td
+              className="px-4 py-3 text-right text-gray-200 font-mono"
+              style={{ minWidth: "100px" }}
+            >
+              {formatAmount(recipient.amount)} {assetCode}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </DataTable>
+  );
+}
diff --git a/src/components/invoice/SplitSummaryTable.tsx b/src/components/invoice/SplitSummaryTable.tsx
new file mode 100644
index 0000000..e6cabdf
--- /dev/null
+++ b/src/components/invoice/SplitSummaryTable.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { truncateAddress } from "@stellar-split/sdk";
+import DataTable from "@/components/ui/DataTable";
+
+interface SplitRecipient {
+  address: string;
+  sharePercent: number;
+  grossAmount: number;
+  effectiveTaxAmount: number;
+  netAmount: number;
+}
+
+interface SplitSummaryTableProps {
+  lines: SplitRecipient[];
+  assetCode?: string;
+}
+
+function formatAmount(value: number): string {
+  return value.toFixed(7);
+}
+
+export default function SplitSummaryTable({
+  lines,
+  assetCode = "USDC",
+}: SplitSummaryTableProps) {
+  if (!lines || lines.length === 0) {
+    return <p className="text-sm text-gray-400">No split lines</p>;
+  }
+
+  return (
+    <DataTable className="text-sm border-collapse">
+      <thead>
+        <tr className="border-b border-gray-700">
+          <th
+            className="text-left px-4 py-2 font-semibold text-gray-300"
+            style={{ minWidth: "120px" }}
+          >
+            Recipient
+          </th>
+          <th
+            className="text-center px-4 py-2 font-semibold text-gray-300"
+            style={{ minWidth: "80px" }}
+          >
+            Share %
+          </th>
+          <th
+            className="text-right px-4 py-2 font-semibold text-gray-300"
+            style={{ minWidth: "100px" }}
+          >
+            Gross
+          </th>
+          <th
+            className="text-right px-4 py-2 font-semibold text-orange-400"
+            style={{ minWidth: "100px" }}
+          >
+            Tax
+          </th>
+          <th
+            className="text-right px-4 py-2 font-semibold text-indigo-300"
+            style={{ minWidth: "100px" }}
+          >
+            Net
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {lines.map((line, idx) => (
+          <tr key={idx} className="border-b border-gray-800 hover:bg-gray-900/50">
+            <td
+              className="px-4 py-3 font-mono text-gray-400 truncate"
+              title={line.address}
+              style={{ minWidth: "120px" }}
+            >
+              {truncateAddress(line.address)}
+            </td>
+            <td
+              className="px-4 py-3 text-center text-gray-200 font-mono"
+              style={{ minWidth: "80px" }}
+            >
+              {line.sharePercent.toFixed(2)}%
+            </td>
+            <td
+              className="px-4 py-3 text-right text-gray-200 font-mono"
+              style={{ minWidth: "100px" }}
+            >
+              {formatAmount(line.grossAmount)} {assetCode}
+            </td>
+            <td
+              className="px-4 py-3 text-right text-orange-400 font-mono"
+              style={{ minWidth: "100px" }}
+            >
+              -{formatAmount(line.effectiveTaxAmount)} {assetCode}
+            </td>
+            <td
+              className="px-4 py-3 text-right text-indigo-300 font-mono"
+              style={{ minWidth: "100px" }}
+            >
+              {formatAmount(line.netAmount)} {assetCode}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </DataTable>
+  );
+}
diff --git a/src/components/ui/DataTable.tsx b/src/components/ui/DataTable.tsx
new file mode 100644
index 0000000..cfe57e8
--- /dev/null
+++ b/src/components/ui/DataTable.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+
+interface DataTableProps {
+  children: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}
+
+export default function DataTable({
+  children,
+  className = "",
+  containerClassName = "",
+}: DataTableProps) {
+  return (
+    <div
+      className={`overflow-x-auto ${containerClassName}`}
+      style={{ WebkitOverflowScrolling: "touch" }}
+    >
+      <table className={`min-w-full ${className}`}>{children}</table>
+    </div>
+  );
+}

From 346064903b77a3579d63dd099944448b06147934 Mon Sep 17 00:00:00 2001
From: Ajidokwu Sabo <realjaiboi70@gmail.com>
Date: Tue, 28 Jul 2026 18:43:59 +0100
Subject: [PATCH 3/4] feat: add debounced invoice search with match
 highlighting (#483)

---
 src/app/api/invoices/route.ts              |  18 ++-
 src/components/invoice/HighlightedText.tsx |  26 ++++
 src/components/invoice/InvoiceSearch.tsx   | 143 +++++++++++++++++++++
 src/hooks/useDebounce.ts                   |  17 +++
 4 files changed, 202 insertions(+), 2 deletions(-)
 create mode 100644 src/components/invoice/HighlightedText.tsx
 create mode 100644 src/components/invoice/InvoiceSearch.tsx
 create mode 100644 src/hooks/useDebounce.ts

diff --git a/src/app/api/invoices/route.ts b/src/app/api/invoices/route.ts
index b130980..c8959b4 100644
--- a/src/app/api/invoices/route.ts
+++ b/src/app/api/invoices/route.ts
@@ -4,11 +4,13 @@ import { splitClient } from "@/lib/stellar";
 const PAGE_SIZE = 20;
 
 /**
- * GET /api/invoices?cursor=<id>&limit=20&publicKey=<address>
+ * GET /api/invoices?cursor=<id>&limit=20&publicKey=<address>&q=<query>
  *
  * Cursor-paginated invoice list. `cursor` is the exclusive lower bound —
  * the first page omits it, subsequent pages pass the last invoice id returned.
  *
+ * With `q` parameter, performs case-insensitive prefix matching on title and memo.
+ *
  * Response shape:
  *   { invoices: Invoice[], nextCursor: string | null }
  *
@@ -19,6 +21,7 @@ export async function GET(request: NextRequest) {
   const publicKey = searchParams.get("publicKey");
   const cursorParam = searchParams.get("cursor");
   const limitParam = searchParams.get("limit");
+  const q = searchParams.get("q")?.trim().toLowerCase() || "";
 
   if (!publicKey) {
     return NextResponse.json(
@@ -49,8 +52,19 @@ export async function GET(request: NextRequest) {
       const mine =
         inv.creator === publicKey ||
         inv.recipients.some((r) => r.address === publicKey);
+
       if (mine) {
-        results.push(inv);
+        if (q) {
+          const memo = (inv as any).memo as string | undefined;
+          const matchesQuery =
+            (inv.title || "").toLowerCase().startsWith(q) ||
+            (memo || "").toLowerCase().startsWith(q);
+          if (matchesQuery) {
+            results.push(inv);
+          }
+        } else {
+          results.push(inv);
+        }
       }
     } catch {
       // splitClient throws when invoice id does not exist — treat as end of list
diff --git a/src/components/invoice/HighlightedText.tsx b/src/components/invoice/HighlightedText.tsx
new file mode 100644
index 0000000..ca23bd7
--- /dev/null
+++ b/src/components/invoice/HighlightedText.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+interface HighlightedTextProps {
+  text: string;
+  query: string;
+}
+
+export default function HighlightedText({ text, query }: HighlightedTextProps) {
+  if (!query) return <>{text}</>;
+
+  const parts = text.split(new RegExp(`(${query})`, "gi"));
+
+  return (
+    <>
+      {parts.map((part, idx) =>
+        part.toLowerCase() === query.toLowerCase() ? (
+          <mark key={idx} className="bg-yellow-200 dark:bg-yellow-700 no-underline">
+            {part}
+          </mark>
+        ) : (
+          part
+        )
+      )}
+    </>
+  );
+}
diff --git a/src/components/invoice/InvoiceSearch.tsx b/src/components/invoice/InvoiceSearch.tsx
new file mode 100644
index 0000000..c388dc3
--- /dev/null
+++ b/src/components/invoice/InvoiceSearch.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { getFreighterPublicKey } from "@/lib/freighter";
+import { useDebounce } from "@/hooks/useDebounce";
+import HighlightedText from "@/components/invoice/HighlightedText";
+import type { Invoice } from "@stellar-split/sdk";
+
+const DEBOUNCE_DELAY_MS = 300;
+
+interface InvoiceSearchProps {
+  onSelectInvoice?: (invoice: Invoice) => void;
+}
+
+export default function InvoiceSearch({ onSelectInvoice }: InvoiceSearchProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("q") || "";
+
+  const [inputValue, setInputValue] = useState(initialQuery);
+  const [results, setResults] = useState<Invoice[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [publicKey, setPublicKey] = useState<string | null>(null);
+
+  const debouncedQuery = useDebounce(inputValue, DEBOUNCE_DELAY_MS);
+
+  useEffect(() => {
+    getFreighterPublicKey()
+      .then(setPublicKey)
+      .catch(() => setPublicKey(null));
+  }, []);
+
+  const performSearch = useCallback(async () => {
+    if (!debouncedQuery || !publicKey) {
+      setResults([]);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `/api/invoices?publicKey=${encodeURIComponent(publicKey)}&q=${encodeURIComponent(debouncedQuery)}`
+      );
+
+      if (!response.ok) {
+        throw new Error("Search failed");
+      }
+
+      const data = await response.json();
+      setResults(data.invoices || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Search error");
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [debouncedQuery, publicKey]);
+
+  useEffect(() => {
+    performSearch();
+  }, [debouncedQuery, performSearch]);
+
+  const handleClear = () => {
+    setInputValue("");
+    setResults([]);
+    setError(null);
+  };
+
+  const handleSelectInvoice = (invoice: Invoice) => {
+    onSelectInvoice?.(invoice);
+    router.push(`/invoice/${invoice.id}`);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Search invoices by title or memo..."
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+        {inputValue && (
+          <button
+            onClick={handleClear}
+            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-200 text-xs font-medium"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+
+      {error && (
+        <div className="text-sm text-red-400 bg-red-950/40 border border-red-800 rounded-lg px-3 py-2">
+          {error}
+        </div>
+      )}
+
+      {loading && (
+        <div className="text-sm text-gray-400">Searching…</div>
+      )}
+
+      {!loading && inputValue && results.length === 0 && !error && (
+        <div className="text-sm text-gray-400">
+          No results for "<span className="font-medium">{inputValue}</span>"
+        </div>
+      )}
+
+      {results.length > 0 && (
+        <ul className="space-y-2">
+          {results.map((invoice) => (
+            <li key={invoice.id}>
+              <button
+                onClick={() => handleSelectInvoice(invoice)}
+                className="w-full text-left px-4 py-3 rounded-lg bg-gray-800/40 hover:bg-gray-700/40 border border-gray-700 hover:border-gray-600 transition-colors"
+              >
+                <div className="font-medium text-gray-100">
+                  <HighlightedText
+                    text={invoice.title || `Invoice #${invoice.id}`}
+                    query={inputValue}
+                  />
+                </div>
+                {(invoice as any).memo && (
+                  <div className="text-xs text-gray-400 mt-1">
+                    <HighlightedText
+                      text={(invoice as any).memo}
+                      query={inputValue}
+                    />
+                  </div>
+                )}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..3cfd87d
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delayMs: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delayMs);
+
+    return () => clearTimeout(handler);
+  }, [value, delayMs]);
+
+  return debouncedValue;
+}

From 8f6eb9052b30b218c78c5dea944f104cbb3618fa Mon Sep 17 00:00:00 2001
From: Ajidokwu Sabo <realjaiboi70@gmail.com>
Date: Tue, 28 Jul 2026 18:44:39 +0100
Subject: [PATCH 4/4] feat: add split builder with percentage and fixed amount
 mode toggle (#485)

---
 src/components/invoice/SplitBuilder.tsx | 280 ++++++++++++++++++++++++
 1 file changed, 280 insertions(+)
 create mode 100644 src/components/invoice/SplitBuilder.tsx

diff --git a/src/components/invoice/SplitBuilder.tsx b/src/components/invoice/SplitBuilder.tsx
new file mode 100644
index 0000000..70de405
--- /dev/null
+++ b/src/components/invoice/SplitBuilder.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { RecipientLine, SplitMeta } from "@/hooks/useSplitCalculator";
+import { useSplitCalculator, defaultRecipientLine } from "@/hooks/useSplitCalculator";
+
+const STROOP_SCALE = 1e7;
+
+type SplitMode = "percent" | "fixed";
+
+interface SplitBuilderProps {
+  initialTotal?: number;
+  initialAssetCode?: "XLM" | "USDC";
+  initialRecipients?: RecipientLine[];
+  splitMeta?: SplitMeta;
+  onSplitMetaChange?: (meta: SplitMeta) => void;
+  readOnly?: boolean;
+}
+
+interface RecipientWithAmount extends RecipientLine {
+  fixedAmount?: number;
+}
+
+export default function SplitBuilder({
+  initialTotal = 0,
+  initialAssetCode = "USDC",
+  initialRecipients,
+  splitMeta: externalSplitMeta,
+  onSplitMetaChange,
+  readOnly = false,
+}: SplitBuilderProps) {
+  const [mode, setMode] = useState<SplitMode>("percent");
+  const [totalAmount, setTotalAmount] = useState<string>(
+    externalSplitMeta ? String(externalSplitMeta.totalAmount) : String(initialTotal)
+  );
+  const [assetCode, setAssetCode] = useState<"XLM" | "USDC">(
+    externalSplitMeta?.assetCode ?? initialAssetCode
+  );
+  const [recipients, setRecipients] = useState<RecipientWithAmount[]>(() => {
+    if (externalSplitMeta?.recipients?.length) {
+      return externalSplitMeta.recipients;
+    }
+    if (initialRecipients?.length) {
+      return initialRecipients;
+    }
+    return [];
+  });
+
+  const parsedTotal = Math.max(0, parseFloat(totalAmount) || 0);
+
+  const result = useSplitCalculator(parsedTotal, recipients, assetCode);
+
+  useEffect(() => {
+    if (!onSplitMetaChange) return;
+    const meta: SplitMeta = {
+      totalAmount: parsedTotal,
+      assetCode,
+      recipients,
+    };
+    onSplitMetaChange(meta);
+  }, [parsedTotal, assetCode, recipients, onSplitMetaChange]);
+
+  const handleSwitchMode = useCallback((newMode: SplitMode) => {
+    if (readOnly || newMode === mode) return;
+
+    setRecipients((prev) => {
+      if (newMode === "fixed" && mode === "percent") {
+        return prev.map((r) => ({
+          ...r,
+          fixedAmount: (parsedTotal * (r.sharePercent || 0)) / 100,
+        }));
+      } else if (newMode === "percent" && mode === "fixed") {
+        return prev.map((r) => {
+          const fixedAmount = r.fixedAmount || 0;
+          const sharePercent = parsedTotal > 0 ? (fixedAmount / parsedTotal) * 100 : 0;
+          return { ...r, sharePercent };
+        }));
+      }
+      return prev;
+    });
+
+    setMode(newMode);
+  }, [mode, readOnly, parsedTotal]);
+
+  const updateRecipient = (index: number, patch: Partial<RecipientWithAmount>) => {
+    if (readOnly) return;
+    setRecipients((prev) =>
+      prev.map((r, i) => (i === index ? { ...r, ...patch } : r))
+    );
+  };
+
+  const addRecipient = () => {
+    if (readOnly) return;
+    const newRecipient = defaultRecipientLine();
+    if (mode === "fixed") {
+      (newRecipient as RecipientWithAmount).fixedAmount = 0;
+    }
+    setRecipients((prev) => [...prev, newRecipient]);
+  };
+
+  const removeRecipient = (index: number) => {
+    if (readOnly) return;
+    setRecipients((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const allocatedAmount = recipients.reduce(
+    (sum, r) => sum + (r.fixedAmount || 0),
+    0
+  );
+  const remainingAmount = Math.max(0, parsedTotal - allocatedAmount);
+
+  const STROOP_TOLERANCE = 1; // 1 stroop = 1e-7
+  const allocationError = Math.abs(remainingAmount * STROOP_SCALE - Math.round(remainingAmount * STROOP_SCALE));
+  const isBalanced = allocationError < STROOP_TOLERANCE || parsedTotal === 0;
+  const canSubmit = isBalanced || mode === "percent";
+
+  return (
+    <section className="mb-8 bg-gray-800/40 border border-gray-700 rounded-xl p-5">
+      <div className="flex items-center justify-between mb-5">
+        <h2 className="text-lg font-semibold text-white">Split Builder</h2>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => handleSwitchMode("percent")}
+            disabled={readOnly}
+            className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
+              mode === "percent"
+                ? "bg-indigo-600 text-white"
+                : "bg-gray-700 hover:bg-gray-600 text-gray-200"
+            }`}
+          >
+            % Percentage
+          </button>
+          <button
+            type="button"
+            onClick={() => handleSwitchMode("fixed")}
+            disabled={readOnly}
+            className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
+              mode === "fixed"
+                ? "bg-indigo-600 text-white"
+                : "bg-gray-700 hover:bg-gray-600 text-gray-200"
+            }`}
+          >
+            XLM Amount
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-5">
+        <div>
+          <label htmlFor="builder-total" className="block text-sm font-medium text-gray-300 mb-1">
+            Total Invoice Amount
+          </label>
+          <input
+            id="builder-total"
+            type="number"
+            step="0.0000001"
+            min="0"
+            placeholder="0.0000000"
+            value={totalAmount}
+            onChange={(e) => !readOnly && setTotalAmount(e.target.value)}
+            disabled={readOnly}
+            className="w-full min-h-11 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-70"
+          />
+        </div>
+        <div>
+          <label htmlFor="builder-asset" className="block text-sm font-medium text-gray-300 mb-1">
+            Asset
+          </label>
+          <select
+            id="builder-asset"
+            value={assetCode}
+            onChange={(e) => !readOnly && setAssetCode(e.target.value as "XLM" | "USDC")}
+            disabled={readOnly}
+            className="w-full min-h-11 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-70"
+          >
+            <option value="USDC">USDC</option>
+            <option value="XLM">XLM</option>
+          </select>
+        </div>
+      </div>
+
+      {mode === "fixed" && !isBalanced && (
+        <div role="alert" className="mb-4 text-sm text-red-400 bg-red-950/40 border border-red-800 rounded-lg px-3 py-2">
+          Allocation does not match invoice total within tolerance
+        </div>
+      )}
+
+      {mode === "fixed" && (
+        <div className="mb-4 text-sm text-gray-300 bg-gray-900/60 border border-gray-700 rounded-lg px-3 py-2">
+          Remaining Unallocated: <span className="font-mono font-semibold">{remainingAmount.toFixed(7)} {assetCode}</span>
+        </div>
+      )}
+
+      <div className="space-y-3 mb-5">
+        {recipients.length === 0 && !readOnly && (
+          <p className="text-sm text-gray-500 text-center py-6">
+            No recipients yet. Click "+ Add Recipient" to begin.
+          </p>
+        )}
+
+        {recipients.map((line, index) => (
+          <div key={index} className="bg-gray-900/60 border border-gray-700 rounded-lg p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-medium text-gray-400">Recipient #{index + 1}</span>
+              {!readOnly && (
+                <button
+                  type="button"
+                  onClick={() => removeRecipient(index)}
+                  className="text-xs text-red-400 hover:text-red-300 transition-colors"
+                >
+                  Remove
+                </button>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-gray-400 mb-1">Address</label>
+              <input
+                type="text"
+                value={line.address}
+                onChange={(e) => updateRecipient(index, { address: e.target.value })}
+                disabled={readOnly}
+                placeholder="G..."
+                className="w-full min-h-9 bg-gray-950 border border-gray-700 rounded-md px-3 py-1.5 text-xs font-mono text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-70"
+              />
+            </div>
+
+            {mode === "percent" ? (
+              <div>
+                <label className="block text-xs font-medium text-gray-400 mb-1">
+                  Share %
+                </label>
+                <input
+                  type="number"
+                  step="0.0001"
+                  min="0"
+                  max="100"
+                  value={line.sharePercent}
+                  onChange={(e) =>
+                    updateRecipient(index, { sharePercent: parseFloat(e.target.value) || 0 })
+                  }
+                  disabled={readOnly}
+                  className="w-full min-h-9 bg-gray-950 border border-gray-700 rounded-md px-3 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-70"
+                />
+              </div>
+            ) : (
+              <div>
+                <label className="block text-xs font-medium text-gray-400 mb-1">
+                  Amount ({assetCode})
+                </label>
+                <input
+                  type="number"
+                  step="0.0000001"
+                  min="0"
+                  value={line.fixedAmount || 0}
+                  onChange={(e) =>
+                    updateRecipient(index, { fixedAmount: parseFloat(e.target.value) || 0 })
+                  }
+                  disabled={readOnly}
+                  className="w-full min-h-9 bg-gray-950 border border-gray-700 rounded-md px-3 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-70"
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {!readOnly && (
+        <button
+          type="button"
+          onClick={addRecipient}
+          className="w-full px-3 py-1.5 text-xs font-medium rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition-colors"
+        >
+          + Add Recipient
+        </button>
+      )}
+    </section>
+  );
+}