feat(auto-invest): configuration panel in investor settings (#476)

app/(dashboard)/seller/publish/success/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
-export default function PublishSuccessPage() {
+function PublishSuccessContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const invoiceId = searchParams.get("invoiceId");
@@ -54,3 +54,15 @@ export default function PublishSuccessPage() {
     </main>
   );
 }
+
+/**
+ * `useSearchParams` requires a Suspense boundary so this route can still be
+ * statically prerendered. The content is client-only anyway.
+ */
+export default function PublishSuccessPage() {
+  return (
+    <Suspense fallback={null}>
+      <PublishSuccessContent />
+    </Suspense>
+  );
+}

app/(dashboard)/settings/page.tsx

@@ -2,15 +2,21 @@ import Link from "next/link";
 import { CurrencySettings } from "@/components/settings/CurrencySettings";
 import { RestartTourSettings } from "@/components/settings/RestartTourSettings";
 import { NetworkSelector } from "@/components/network/NetworkSelector";
+import { AutoInvestSettingsPanel } from "@/components/investor/AutoInvestSettingsPanel";
 
 // #437 — general settings page; hosts the display-currency toggle.
 // #443 — Stellar network selector.
+// #476 — auto-invest rule configuration panel.
 export default function SettingsPage() {
   return (
     <main className="container mx-auto max-w-2xl space-y-6 px-4 py-8">
       <h1 className="text-2xl font-semibold">Settings</h1>
       <CurrencySettings />
       <NetworkSelector />
+      <section id="auto-invest" className="space-y-3">
+        <h2 className="text-lg font-semibold">Auto-invest</h2>
+        <AutoInvestSettingsPanel />
+      </section>
       <RestartTourSettings />
       <Link
         href="/settings/notifications"

app/admin/invoices/__tests__/page.test.tsx

@@ -154,6 +154,7 @@ describe("Admin Invoices Page", () => {
     });
 
     fireEvent.click(screen.getByTestId("approve-btn-inv-101"));
+    fireEvent.click(screen.getByTestId("confirm-action-btn"));
 
     await waitFor(() => {
       expect(api.approveAdminInvoice).toHaveBeenCalledWith("inv-101", adminToken);
@@ -194,6 +195,7 @@ describe("Admin Invoices Page", () => {
 
     expect(confirmBtn).not.toBeDisabled();
     fireEvent.click(confirmBtn);
+    fireEvent.click(screen.getByTestId("confirm-action-btn"));
 
     await waitFor(() => {
       expect(api.rejectAdminInvoice).toHaveBeenCalledWith("inv-101", "Invalid documentation", adminToken);

app/marketplace/__tests__/marketplace-taxonomy.test.tsx

@@ -12,6 +12,12 @@ vi.mock("@/components/marketplace/InvestorDemandMetrics", () => ({
     InvestorDemandMetrics: () => null,
 }));
 
+// The featured carousel repeats invoice titles above the grid; these tests
+// assert on the grid, so rendering it twice makes text queries ambiguous.
+vi.mock("@/components/marketplace/FeaturedInvoicesCarousel", () => ({
+    FeaturedInvoicesCarousel: () => null,
+}));
+
 vi.mock("@tanstack/react-query", async () => {
   const actual = await vi.importActual("@tanstack/react-query");
   return {

app/marketplace/compare/page.tsx

@@ -2,11 +2,11 @@
 
 import Link from "next/link";
 import { usePageTitle } from "@/hooks/usePageTitle";
-import { MAX_COMPARE_INVOICES, useComparison } from "@/components/marketplace/InvoiceComparisonContext";
+import { ComparisonProvider, MAX_COMPARE_INVOICES, useComparison } from "@/components/marketplace/InvoiceComparisonContext";
 import { InvoiceComparisonTable } from "@/components/marketplace/InvoiceComparisonTable";
 import { Button } from "@/components/ui/button";
 
-export default function ComparePage() {
+function ComparePageContent() {
   const { compareInvoices, clearComparison } = useComparison();
   usePageTitle("Compare invoices");
 
@@ -52,3 +52,12 @@ export default function ComparePage() {
     </main>
   );
 }
+
+/** The compare view reads the shared selection, so it needs the provider. */
+export default function ComparePage() {
+  return (
+    <ComparisonProvider>
+      <ComparePageContent />
+    </ComparisonProvider>
+  );
+}

app/marketplace/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState, useEffect } from "react";
+import { Suspense, useCallback, useMemo, useRef, useState, useEffect } from "react";
 import { useSearchParams, useRouter, usePathname } from "next/navigation";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { fetchInvoices, resolveInvoiceCategory, type Invoice, type InvoiceCategory } from "@/lib/api";
@@ -166,6 +166,14 @@ function InvoiceRow({ invoice }: { invoice: Invoice }) {
 }
 
 export default function MarketplacePage() {
+  return (
+    <Suspense fallback={null}>
+      <MarketplacePageContent />
+    </Suspense>
+  );
+}
+
+function MarketplacePageContent() {
   usePageTitle("Browse Invoices");
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -944,3 +952,4 @@ export default function MarketplacePage() {
     </ComparisonProvider>
   );
 }
+

app/marketplace/swaps/page.tsx

@@ -57,7 +57,9 @@ export default function AtomicSwapPage() {
             <div className="grid gap-6 lg:grid-cols-3">
               <div className="lg:col-span-2">
                 <AtomicSwapForm
-                  onSubmit={(proposal) => createMutation.mutateAsync(proposal)}
+                  onSubmit={async (proposal) => {
+                    await createMutation.mutateAsync(proposal);
+                  }}
                   isSubmitting={createMutation.isPending}
                 />
               </div>

components/admin/AdminUsersTable.tsx

@@ -664,7 +664,9 @@ export function AdminUsersTable() {
                 onClick={() =>
                   suspendMutation.mutate({
                     wallet: suspendTarget.wallet,
-                    suspended: suspendTarget.suspended,
+                    // `suspendTarget` is the user's current row, so the action
+                    // is the inverse of its current suspended state.
+                    suspended: !suspendTarget.suspended,
                   })
                 }
                 disabled={suspendMutation.isPending}

components/admin/__tests__/AdminInvoicesReview.drawer.test.tsx

@@ -9,6 +9,7 @@ import { toast } from "sonner";
 
 vi.mock("sonner", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
 vi.mock("@/context/AuthContext", () => ({ useAuth: () => ({ jwt: "tok" }) }));
+vi.mock("@/lib/api");
 vi.mock("@/components/invoices/DocumentPreview", () => ({
   DocumentPreview: () => <div data-testid="document-preview" />,
 }));
@@ -132,7 +133,12 @@ describe("AdminInvoicesReview — issue #280", () => {
   });
 
   it("rolls back the optimistic removal when approval fails", async () => {
-    mockedApprove.mockRejectedValue(new Error("Network failure"));
+    let rejectApprove!: (error: Error) => void;
+    mockedApprove.mockReturnValue(
+      new Promise((_resolve, reject) => {
+        rejectApprove = reject;
+      }) as never,
+    );
 
     render(<AdminInvoicesReview />, { wrapper: createWrapper() });
     await waitFor(() => screen.getByTestId(`approve-btn-inv-1`));
@@ -146,6 +152,7 @@ describe("AdminInvoicesReview — issue #280", () => {
     });
 
     // …then is restored after the API error (optimistic rollback).
+    rejectApprove(new Error("Network failure"));
     await waitFor(() => {
       expect(screen.getByTestId(`invoice-row-inv-1`)).toBeTruthy();
     });

components/dashboard/InvestorDashboard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { format } from "date-fns";
-import { TrendingUp, DollarSign, FileText, Clock, ExternalLink, Plus, BarChart2 } from "lucide-react";
+import { TrendingUp, DollarSign, FileText, Clock, ExternalLink, Plus, BarChart2, Bot } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -120,7 +120,7 @@ export function InvestorDashboard() {
         </Card>
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-3">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <Button asChild className="h-20 flex-col gap-2">
           <Link href="/marketplace">
             <BarChart2 className="h-8 w-8" />
@@ -142,6 +142,13 @@ export function InvestorDashboard() {
             <span className="text-sm text-muted-foreground">Track your watchlist</span>
           </Link>
         </Button>
+        <Button asChild variant="outline" className="h-20 flex-col gap-2">
+          <Link href="/settings#auto-invest">
+            <Bot className="h-8 w-8" />
+            <span className="font-semibold">Auto-invest</span>
+            <span className="text-sm text-muted-foreground">Configure automatic investing</span>
+          </Link>
+        </Button>
       </div>
     </div>
   );

components/dashboard/SellerInvoiceTabs.tsx

@@ -235,7 +235,7 @@ export function SellerInvoiceTabs({
                 : "text-muted-foreground hover:bg-muted"
             }`}
           >
-            {TAB_LABELS[tab]}
+            {TAB_LABELS[tab]}{" "}
             <span className="ml-1.5 text-xs opacity-80">({counts[tab]})</span>
           </button>
         ))}

components/dashboard/__tests__/PositionCard.test.tsx

@@ -2,6 +2,16 @@ import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { PositionCard, formatSharePercent } from "../PositionCard";
 import type { InvestmentPosition } from "@/lib/portfolio";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+function renderWithClient(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
+  );
+}
 
 // PositionCard renders PositionTransferModal for every "active" position
 // (issue #119); this file only exercises PositionCard's own rendering, so
@@ -45,7 +55,7 @@ describe("formatSharePercent", () => {
 
 describe("PositionCard", () => {
   it("renders committed XLM and share percentage correctly", () => {
-    render(<PositionCard position={makePosition({ committed_amount: 3000, share_percent: 30 })} />);
+    renderWithClient(<PositionCard position={makePosition({ committed_amount: 3000, share_percent: 30 })} />);
 
     expect(screen.getByTestId("position-committed")).toHaveTextContent(
       "3,000.00 XLM committed"
@@ -54,33 +64,33 @@ describe("PositionCard", () => {
   });
 
   it("renders 100% share without crashing", () => {
-    render(<PositionCard position={makePosition({ share_percent: 100 })} />);
+    renderWithClient(<PositionCard position={makePosition({ share_percent: 100 })} />);
 
     expect(screen.getByTestId("position-share")).toHaveTextContent("100%");
   });
 
   it("renders a dash placeholder when share percentage is null", () => {
-    render(<PositionCard position={makePosition({ share_percent: null })} />);
+    renderWithClient(<PositionCard position={makePosition({ share_percent: null })} />);
 
     expect(screen.getByTestId("position-share")).toHaveTextContent("—");
   });
 
   it("formats XLM amount with two decimal places", () => {
-    render(<PositionCard position={makePosition({ committed_amount: 1234.5 })} />);
+    renderWithClient(<PositionCard position={makePosition({ committed_amount: 1234.5 })} />);
 
     expect(screen.getByTestId("position-committed")).toHaveTextContent(
       "1,234.50 XLM committed"
     );
   });
 
   it("rounds share percentage to two decimal places in the UI", () => {
-    render(<PositionCard position={makePosition({ share_percent: 12.345 })} />);
+    renderWithClient(<PositionCard position={makePosition({ share_percent: 12.345 })} />);
 
     expect(screen.getByTestId("position-share")).toHaveTextContent("12.35%");
   });
 
   it("renders Top Up button for active positions with remaining capacity", () => {
-    render(
+    renderWithClient(
       <PositionCard
         position={makePosition({
           status: "active",
@@ -93,7 +103,7 @@ describe("PositionCard", () => {
   });
 
   it("does not render Top Up button for settled positions", () => {
-    render(
+    renderWithClient(
       <PositionCard
         position={makePosition({
           status: "settled",
@@ -106,7 +116,7 @@ describe("PositionCard", () => {
   });
 
   it("does not render Top Up button when remaining capacity is zero", () => {
-    render(
+    renderWithClient(
       <PositionCard
         position={makePosition({
           status: "active",

components/help/HelpCentre.tsx

@@ -20,17 +20,23 @@ const CATEGORY_LABELS: Record<HelpArticleCategory, string> = {
   technical: "Technical",
 };
 
-function HelpArticleAccordionItem({ article }: { article: HelpArticle }) {
+function HelpArticleAccordionItem({
+  article,
+  testIdPrefix = "help-article",
+}: {
+  article: HelpArticle;
+  testIdPrefix?: string;
+}) {
   const [open, setOpen] = useState(false);
-  const bodyId = `help-article-body-${article.id}`;
+  const bodyId = `${testIdPrefix}-body-${article.id}`;
 
   return (
     <div>
       <button
         type="button"
         aria-expanded={open}
         aria-controls={bodyId}
-        data-testid={`help-article-toggle-${article.id}`}
+        data-testid={`${testIdPrefix}-toggle-${article.id}`}
         onClick={() => setOpen((prev) => !prev)}
         className="flex w-full items-center justify-between py-3 text-left text-sm font-medium hover:text-primary"
       >
@@ -44,7 +50,7 @@ function HelpArticleAccordionItem({ article }: { article: HelpArticle }) {
         <div
           id={bodyId}
           role="region"
-          data-testid={`help-article-body-${article.id}`}
+          data-testid={`${testIdPrefix}-body-${article.id}`}
           className="pb-3 text-sm text-muted-foreground"
         >
           {article.body}
@@ -117,14 +123,20 @@ export function HelpCentre() {
           <h2 className="text-lg font-semibold mb-2">Most viewed</h2>
           <div className="divide-y rounded-md border px-4" data-testid="help-most-viewed">
             {mostViewed.map((article) => (
-              <HelpArticleAccordionItem key={article.id} article={article} />
+              <HelpArticleAccordionItem
+                key={article.id}
+                article={article}
+                testIdPrefix="help-most-viewed-article"
+              />
             ))}
           </div>
         </section>
       )}
 
       {HELP_CENTRE_CATEGORIES.map((category) => {
-        const articles = filtered.filter((article) => article.category === category);
+        const articles = filtered.filter(
+          (article) => article.category === category,
+        );
         if (articles.length === 0) return null;
 
         return (