Merge pull request #53 from vicistar-star/feat/issues-44-45-49-50

feat: batch pay, reminders, webhooks, accessibility (#44 #45 #49 #50)

Author: Kingsman-99

src/app/dashboard/page.tsx

@@ -5,17 +5,24 @@ import Link from "next/link";
 import { splitClient } from "@/lib/stellar";
 import { getFreighterPublicKey } from "@/lib/freighter";
 import InvoiceCard from "@/components/InvoiceCard";
+import BatchPayModal from "@/components/BatchPayModal";
 import type { Invoice } from "@stellar-split/sdk";
 
 /**
  * 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);
 
+  // Multi-select state
+  const [multiSelect, setMultiSelect] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [showBatchModal, setShowBatchModal] = useState(false);
+
   useEffect(() => {
     getFreighterPublicKey()
       .then(setPublicKey)
@@ -25,8 +32,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 +42,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 +55,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 +82,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>
   );