Merge branch 'main' into feat/network-status-indicator

Author: Kingsman-99

src/app/address-book/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  getAddressBook,
+  addEntry,
+  updateEntry,
+  removeEntry,
+  type AddressEntry,
+} from "@/lib/addressBook";
+
+/**
+ * Address Book page — manage saved Stellar addresses with nicknames.
+ */
+export default function AddressBookPage() {
+  const [entries, setEntries] = useState<AddressEntry[]>([]);
+  const [nickname, setNickname] = useState("");
+  const [address, setAddress] = useState("");
+  const [editAddress, setEditAddress] = useState<string | null>(null);
+  const [editNickname, setEditNickname] = useState("");
+
+  useEffect(() => {
+    setEntries(getAddressBook());
+  }, []);
+
+  const handleAdd = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!nickname.trim() || !address.trim()) return;
+    const updated = addEntry({ nickname: nickname.trim(), address: address.trim() });
+    setEntries(updated);
+    setNickname("");
+    setAddress("");
+  };
+
+  const handleEdit = (addr: string) => {
+    const entry = entries.find((e) => e.address === addr);
+    if (!entry) return;
+    setEditAddress(addr);
+    setEditNickname(entry.nickname);
+  };
+
+  const handleSaveEdit = (addr: string) => {
+    const updated = updateEntry(addr, { nickname: editNickname.trim() });
+    setEntries(updated);
+    setEditAddress(null);
+  };
+
+  const handleRemove = (addr: string) => {
+    setEntries(removeEntry(addr));
+  };
+
+  return (
+    <main className="max-w-xl mx-auto px-6 py-16">
+      <h1 className="text-3xl font-bold mb-8">Address Book</h1>
+
+      {/* Add new entry */}
+      <form onSubmit={handleAdd} className="flex flex-col gap-3 mb-10">
+        <h2 className="text-lg font-semibold">Add Address</h2>
+        <input
+          type="text"
+          placeholder="Nickname"
+          value={nickname}
+          onChange={(e) => setNickname(e.target.value)}
+          required
+          className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+        <input
+          type="text"
+          placeholder="G... Stellar address"
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          required
+          className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+        <button
+          type="submit"
+          disabled={entries.length >= 50}
+          className="self-start px-5 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold transition-colors disabled:opacity-40"
+        >
+          {entries.length >= 50 ? "Limit reached (50)" : "Save Address"}
+        </button>
+      </form>
+
+      {/* Saved entries */}
+      {entries.length === 0 ? (
+        <p className="text-sm text-gray-400">No saved addresses yet.</p>
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {entries.map((entry) => (
+            <li
+              key={entry.address}
+              className="flex items-center gap-3 bg-gray-900 rounded-lg px-4 py-3"
+            >
+              {editAddress === entry.address ? (
+                <div className="flex flex-1 gap-2 items-center">
+                  <input
+                    type="text"
+                    value={editNickname}
+                    onChange={(e) => setEditNickname(e.target.value)}
+                    className="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    autoFocus
+                  />
+                  <button
+                    onClick={() => handleSaveEdit(entry.address)}
+                    className="px-3 py-1 rounded bg-indigo-600 hover:bg-indigo-500 text-xs font-semibold transition-colors"
+                  >
+                    Save
+                  </button>
+                  <button
+                    onClick={() => setEditAddress(null)}
+                    className="px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-xs transition-colors"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              ) : (
+                <>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-semibold text-gray-200">{entry.nickname}</p>
+                    <p className="text-xs text-gray-400 font-mono truncate">{entry.address}</p>
+                  </div>
+                  <button
+                    onClick={() => handleEdit(entry.address)}
+                    aria-label={`Edit ${entry.nickname}`}
+                    className="text-xs text-gray-400 hover:text-indigo-300 transition-colors"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    onClick={() => handleRemove(entry.address)}
+                    aria-label={`Remove ${entry.nickname}`}
+                    className="text-xs text-gray-400 hover:text-red-400 transition-colors"
+                  >
+                    Remove
+                  </button>
+                </>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}

src/app/dashboard/page.tsx

@@ -4,17 +4,46 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { splitClient } from "@/lib/stellar";
 import { getFreighterPublicKey } from "@/lib/freighter";
+import { formatAmount } from "@stellar-split/sdk";
 import InvoiceCard from "@/components/InvoiceCard";
+import BatchPayModal from "@/components/BatchPayModal";
 import type { Invoice } from "@stellar-split/sdk";
 
+function exportCSV(invoices: Invoice[], from: string, to: string) {
+  const fromTs = from ? new Date(from).getTime() / 1000 : 0;
+  const toTs = to ? new Date(to).getTime() / 1000 : Infinity;
+  const rows = invoices.filter((inv) => inv.deadline >= fromTs && inv.deadline <= toTs);
+  const header = "ID,Status,Total (USDC),Funded (USDC),Deadline,Recipient Count";
+  const lines = rows.map((inv) => {
+    const total = inv.recipients.reduce((s, r) => s + r.amount, 0n);
+    const deadline = new Date(inv.deadline * 1000).toISOString().slice(0, 10);
+    return [inv.id, inv.status, formatAmount(total), formatAmount(inv.funded), deadline, inv.recipients.length].join(",");
+  });
+  const csv = [header, ...lines].join("\n");
+  const url = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "invoices.csv";
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
 /**
  * Dashboard — lists invoices where the connected wallet is creator or recipient.
+ * Supports multi-select mode for batch payments.
  */
 export default function DashboardPage() {
   const [publicKey, setPublicKey] = useState<string | null>(null);
   const [invoices, setInvoices] = useState<Invoice[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [exportFrom, setExportFrom] = useState("");
+  const [exportTo, setExportTo] = useState("");
+
+  // Multi-select state
+  const [multiSelect, setMultiSelect] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [showBatchModal, setShowBatchModal] = useState(false);
 
   useEffect(() => {
     getFreighterPublicKey()
@@ -25,8 +54,6 @@ export default function DashboardPage() {
   useEffect(() => {
     if (!publicKey) return;
 
-    // Fetch invoices 1–50 and filter by creator or recipient.
-    // In production this would use an indexer; here we scan a range.
     const fetchInvoices = async () => {
       setLoading(true);
       const results: Invoice[] = [];
@@ -37,7 +64,6 @@ export default function DashboardPage() {
           const isRecipient = inv.recipients.some((r) => r.address === publicKey);
           if (isCreator || isRecipient) results.push(inv);
         } catch {
-          // Invoice doesn't exist — stop scanning.
           break;
         }
       }
@@ -51,6 +77,23 @@ export default function DashboardPage() {
     });
   }, [publicKey]);
 
+  const toggleSelect = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const exitMultiSelect = () => {
+    setMultiSelect(false);
+    setSelected(new Set());
+  };
+
+  const pendingInvoices = invoices.filter((inv) => inv.status === "Pending");
+  const selectedInvoices = invoices.filter((inv) => selected.has(inv.id));
+
   if (error) {
     return (
       <main className="max-w-2xl mx-auto px-6 py-20 text-center">
@@ -61,28 +104,107 @@ export default function DashboardPage() {
 
   return (
     <main className="max-w-3xl mx-auto px-6 py-16">
-      <div className="flex items-center justify-between mb-10">
+      <div className="flex items-center justify-between mb-10 flex-wrap gap-3">
         <h1 className="text-3xl font-bold">Dashboard</h1>
-        <Link
-          href="/invoice/new"
-          className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold transition-colors"
-        >
-          + New Invoice
-        </Link>
+        <div className="flex gap-2 flex-wrap">
+          {!multiSelect && pendingInvoices.length > 0 && (
+            <button
+              onClick={() => setMultiSelect(true)}
+              className="px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm font-semibold transition-colors"
+              aria-label="Enter multi-select mode to pay multiple invoices"
+            >
+              Pay Multiple
+            </button>
+          )}
+          {multiSelect && (
+            <>
+              <button
+                onClick={exitMultiSelect}
+                className="px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm font-semibold transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => setShowBatchModal(true)}
+                disabled={selected.size === 0}
+                className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold transition-colors disabled:opacity-50"
+                aria-label={`Pay ${selected.size} selected invoice${selected.size !== 1 ? "s" : ""}`}
+              >
+                Pay Selected ({selected.size})
+              </button>
+            </>
+          )}
+          <Link
+            href="/invoice/new"
+            className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold transition-colors"
+          >
+            + New Invoice
+          </Link>
+        </div>
       </div>
 
+      {multiSelect && (
+        <p className="text-sm text-gray-400 mb-4" role="status">
+          Select pending invoices to pay in a single transaction.
+        </p>
+      )}
+
       {loading ? (
         <p className="text-gray-400">Loading invoices…</p>
       ) : invoices.length === 0 ? (
         <p className="text-gray-400">No invoices found. Create your first one!</p>
       ) : (
-        <div className="flex flex-col gap-4">
-          {invoices.map((inv) => (
-            <Link key={inv.id} href={`/invoice/${inv.id}`}>
-              <InvoiceCard invoice={inv} />
-            </Link>
-          ))}
-        </div>
+        <ul className="flex flex-col gap-4" aria-label="Invoice list">
+          {invoices.map((inv) => {
+            const isSelectable = multiSelect && inv.status === "Pending";
+            const isSelected = selected.has(inv.id);
+
+            return (
+              <li key={inv.id}>
+                {isSelectable ? (
+                  <button
+                    type="button"
+                    onClick={() => toggleSelect(inv.id)}
+                    aria-pressed={isSelected}
+                    aria-label={`${isSelected ? "Deselect" : "Select"} Invoice #${inv.id}`}
+                    className={`w-full text-left rounded-xl ring-2 transition-all ${
+                      isSelected
+                        ? "ring-indigo-500"
+                        : "ring-transparent hover:ring-gray-600"
+                    }`}
+                  >
+                    <div className="relative">
+                      {isSelected && (
+                        <span
+                          aria-hidden="true"
+                          className="absolute top-3 right-3 w-5 h-5 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs font-bold z-10"
+                        >
+                          ✓
+                        </span>
+                      )}
+                      <InvoiceCard invoice={inv} />
+                    </div>
+                  </button>
+                ) : (
+                  <Link href={`/invoice/${inv.id}`} aria-label={`View Invoice #${inv.id}`}>
+                    <InvoiceCard invoice={inv} />
+                  </Link>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {showBatchModal && publicKey && selectedInvoices.length > 0 && (
+        <BatchPayModal
+          invoices={selectedInvoices}
+          publicKey={publicKey}
+          onClose={() => {
+            setShowBatchModal(false);
+            exitMultiSelect();
+          }}
+        />
       )}
     </main>
   );