feat: add multi-select action toolbar for bulk invoice operations (#506)

Author: favourawaku

src/app/api/invoices/bulk/route.ts

@@ -3,15 +3,23 @@ import { NextRequest, NextResponse } from "next/server";
 /**
  * PATCH /api/invoices/bulk
  *
- * Bulk archive/unarchive operation endpoint.
- * Accepts up to 200 invoice IDs per request with archive status.
+ * Bulk operation endpoint for archive, delete, and tag operations.
+ * Accepts up to 200 invoice IDs per request.
+ *
+ * Request body:
+ * - invoiceIds: string[] (required)
+ * - action: 'archive' | 'delete' | 'tag' (required)
+ * - archived?: boolean (for archive action)
+ * - tags?: string[] (for tag action)
  */
 export async function PATCH(request: NextRequest) {
   try {
     const body = await request.json();
-    const { invoiceIds, archived } = body as {
+    const { invoiceIds, action, archived, tags } = body as {
       invoiceIds: string[];
-      archived: boolean;
+      action: string;
+      archived?: boolean;
+      tags?: string[];
     };
 
     // Validate inputs
@@ -29,23 +37,53 @@ export async function PATCH(request: NextRequest) {
       );
     }
 
-    if (typeof archived !== "boolean") {
+    if (!["archive", "delete", "tag"].includes(action)) {
       return NextResponse.json(
-        { error: "archived must be a boolean" },
+        { error: "action must be 'archive', 'delete', or 'tag'" },
         { status: 400 },
       );
     }
 
-    // TODO: Implement actual database storage of archived status
-    // For now, this endpoint validates the request and returns success.
-    // In production, store archived status in database alongside invoice data.
+    if (action === "archive" && typeof archived !== "boolean") {
+      return NextResponse.json(
+        { error: "archived must be a boolean for archive action" },
+        { status: 400 },
+      );
+    }
+
+    if (action === "tag" && !Array.isArray(tags)) {
+      return NextResponse.json(
+        { error: "tags must be an array for tag action" },
+        { status: 400 },
+      );
+    }
+
+    // TODO: Implement actual database operations
+    // For now, validate the request and return success.
+    // In production:
+    // - archive: Update archived status in database
+    // - delete: Mark invoices as deleted or remove them
+    // - tag: Apply tags to invoices
+
+    let message = "";
+    switch (action) {
+      case "archive":
+        message = `${invoiceIds.length} invoices ${archived ? "archived" : "unarchived"}`;
+        break;
+      case "delete":
+        message = `${invoiceIds.length} invoices deleted`;
+        break;
+      case "tag":
+        message = `${invoiceIds.length} invoices tagged with: ${tags?.join(", ")}`;
+        break;
+    }
 
     return NextResponse.json(
       {
         success: true,
         count: invoiceIds.length,
-        archived,
-        message: `${invoiceIds.length} invoices ${archived ? "archived" : "unarchived"}`,
+        action,
+        message,
       },
       { status: 200 },
     );

src/components/DashboardClient.tsx

@@ -20,6 +20,8 @@ import { formatAmount } from "@stellar-split/sdk";
 import type { Invoice } from "@stellar-split/sdk";
 import { useInfiniteInvoices } from "@/hooks/useInfiniteInvoices";
 import InvoiceListSentinel from "@/components/InvoiceListSentinel";
+import { useInvoiceSelection } from "@/hooks/useInvoiceSelection";
+import BulkActionToolbar from "@/components/invoice/BulkActionToolbar";
 import {
   DASHBOARD_PRESETS,
   SORT_OPTIONS,
@@ -81,6 +83,18 @@ export default function DashboardClient() {
   const { unreadCount } = useActivityFeed();
   const [splitMetaMap, setSplitMetaMap] = useState<Record<string, { installments?: { dueDate: number; status: string }[] }>>({});
 
+  // Multi-select state management
+  const {
+    selectedIds,
+    isSelecting,
+    toggleSelecting,
+    toggleInvoice,
+    selectAll,
+    deselectAll,
+    isSelected,
+    selectedCount,
+  } = useInvoiceSelection();
+
   // ── URL mutation helpers ────────────────────────────────────────────────────
 
   const pushParams = useCallback(
@@ -110,6 +124,47 @@ export default function DashboardClient() {
   const isFiltered =
     statuses.length > 0 || dateFrom || dateTo || sort !== "newest" || !!tag;
 
+  const handleBulkArchive = async () => {
+    try {
+      const response = await fetch("/api/invoices/bulk", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          invoiceIds: Array.from(selectedIds),
+          action: "archive",
+          archived: true,
+        }),
+      });
+
+      if (response.ok) {
+        deselectAll();
+        // Optionally refresh the invoice list
+      }
+    } catch (error) {
+      console.error("Bulk archive failed:", error);
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    try {
+      const response = await fetch("/api/invoices/bulk", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          invoiceIds: Array.from(selectedIds),
+          action: "delete",
+        }),
+      });
+
+      if (response.ok) {
+        deselectAll();
+        // Optionally refresh the invoice list
+      }
+    } catch (error) {
+      console.error("Bulk delete failed:", error);
+    }
+  };
+
   // ── Data fetching ───────────────────────────────────────────────────────────
   const [activePreset, setActivePreset] = useState<DashboardPresetId>("all");
   const [shareQRInvoiceId, setShareQRInvoiceId] = useState<string | null>(null);
@@ -566,6 +621,24 @@ export default function DashboardClient() {
               </button>
             </>
           )}
+          {!isSelecting && !compareMode && !reminderSelect && (
+            <button
+              onClick={toggleSelecting}
+              className="min-h-11 px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-sm font-semibold transition-colors"
+              aria-label="Enable multi-select mode"
+            >
+              Select
+            </button>
+          )}
+          {isSelecting && (
+            <button
+              onClick={toggleSelecting}
+              className="min-h-11 px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm font-semibold transition-colors text-gray-300"
+              aria-label="Exit multi-select mode"
+            >
+              Cancel Selection
+            </button>
+          )}
           <Link
             href="/invoice/new"
             className="min-h-11 inline-flex items-center px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold transition-colors"
@@ -753,14 +826,44 @@ export default function DashboardClient() {
             const isReminderSelected = reminderSelected.has(inv.id);
             const isCompareSelectable = compareMode;
             const isCompareSelected = compareSelected.has(inv.id);
+            const isMultiSelectable = isSelecting;
+            const isMultiSelected = isSelected(inv.id);
 
             const card = (
               <InvoiceCard invoice={inv} displayNumber={getOrAssignDisplayNumber(inv.id)} tags={tagsByInvoice[inv.id] ?? []} />
             );
 
             return (
               <div key={inv.id}>
-                {isSelectable ? (
+                {isMultiSelectable ? (
+                  <button
+                    type="button"
+                    onClick={() => toggleInvoice(inv.id)}
+                    aria-pressed={isMultiSelected}
+                    aria-label={`${isMultiSelected ? "Deselect" : "Select"} Invoice #${inv.id}`}
+                    className={`w-full text-left rounded-xl ring-2 transition-all ${
+                      isMultiSelected
+                        ? "ring-indigo-500"
+                        : "ring-transparent hover:ring-gray-600"
+                    }`}
+                  >
+                    <div className="relative">
+                      {isMultiSelected && (
+                        <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}
+                        displayNumber={getOrAssignDisplayNumber(inv.id)}
+                        tags={tagsByInvoice[inv.id] ?? []}
+                      />
+                    </div>
+                  </button>
+                ) : isSelectable ? (
                   <button
                     type="button"
                     onClick={() => toggleSelect(inv.id)}
@@ -928,6 +1031,21 @@ export default function DashboardClient() {
         onClose={() => setShareQRInvoiceId(null)}
       />
 
+      {isSelecting && selectedCount > 0 && (
+        <BulkActionToolbar
+          selectedCount={selectedCount}
+          selectedIds={selectedIds}
+          totalVisible={visibleInvoices.length}
+          onSelectAll={() => selectAll(visibleInvoices.map(inv => inv.id))}
+          onDeselectAll={deselectAll}
+          onArchive={handleBulkArchive}
+          onDelete={handleBulkDelete}
+          onTag={() => {
+            // TODO: Implement tagging dialog
+          }}
+        />
+      )}
+
       <ActivityFeed open={feedOpen} />
     </>
   );

src/components/invoice/BulkActionToolbar.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2, Archive, Tag, X } from "lucide-react";
+
+interface Props {
+  selectedCount: number;
+  selectedIds: Set<string>;
+  totalVisible: number;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  onArchive: () => Promise<void>;
+  onDelete: () => Promise<void>;
+  onTag: () => void;
+}
+
+export default function BulkActionToolbar({
+  selectedCount,
+  selectedIds,
+  totalVisible,
+  onSelectAll,
+  onDeselectAll,
+  onArchive,
+  onDelete,
+  onTag,
+}: Props) {
+  const [processing, setProcessing] = useState(false);
+
+  const handleArchive = async () => {
+    setProcessing(true);
+    try {
+      await onArchive();
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!window.confirm(`Delete ${selectedCount} invoice(s)? This cannot be undone.`)) {
+      return;
+    }
+    setProcessing(true);
+    try {
+      await onDelete();
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-40 bg-gray-900 border-t border-gray-700 shadow-lg">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between gap-4">
+        <div className="flex items-center gap-4 flex-1">
+          <div className="text-sm font-medium text-gray-300">
+            {selectedCount} of {totalVisible} selected
+          </div>
+
+          {selectedCount > 0 && totalVisible > selectedCount && (
+            <button
+              onClick={onSelectAll}
+              className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors underline"
+            >
+              Select all {totalVisible}
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onTag}
+            disabled={processing}
+            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 text-sm font-medium transition-colors disabled:opacity-50 text-gray-300"
+            aria-label="Tag selected invoices"
+          >
+            <Tag size={16} />
+            <span className="hidden sm:inline">Tag</span>
+          </button>
+
+          <button
+            onClick={handleArchive}
+            disabled={processing}
+            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 text-sm font-medium transition-colors disabled:opacity-50 text-gray-300"
+            aria-label="Archive selected invoices"
+          >
+            <Archive size={16} />
+            <span className="hidden sm:inline">Archive</span>
+          </button>
+
+          <button
+            onClick={handleDelete}
+            disabled={processing}
+            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-red-900/30 hover:bg-red-900/50 text-sm font-medium transition-colors disabled:opacity-50 text-red-400"
+            aria-label="Delete selected invoices"
+          >
+            <Trash2 size={16} />
+            <span className="hidden sm:inline">Delete</span>
+          </button>
+
+          <button
+            onClick={onDeselectAll}
+            disabled={processing}
+            className="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors disabled:opacity-50"
+            aria-label="Close toolbar"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}