fix: wrap seller dashboard stats panel in error boundary (#27)

app/(auth)/connect-wallet/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Wallet } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { useStellarWallet } from "@/hooks/useStellarWallet";
+
+export default function ConnectWalletPage() {
+  const router = useRouter();
+  const { isConnected, isConnecting, connect } = useStellarWallet();
+
+  useEffect(() => {
+    if (isConnected) {
+      router.replace("/marketplace");
+    }
+  }, [isConnected, router]);
+
+  return (
+    <main className="container mx-auto flex min-h-[60vh] max-w-md items-center justify-center px-4 py-8">
+      <Card className="w-full">
+        <CardHeader className="text-center">
+          <h1 className="text-xl font-bold">Connect Your Wallet</h1>
+          <p className="text-sm text-muted-foreground">
+            Connect a Stellar wallet to access your dashboard.
+          </p>
+        </CardHeader>
+        <CardContent className="flex justify-center">
+          <Button onClick={connect} disabled={isConnecting}>
+            <Wallet className="mr-2 h-4 w-4" />
+            {isConnecting ? "Connecting..." : "Connect Wallet"}
+          </Button>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

app/(dashboard)/seller/page.tsx

@@ -1,9 +1,37 @@
 "use client";
 
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { usePageLoadPerformanceLog } from "@/hooks/usePageLoadPerformanceLog";
+import { useStellarWallet } from "@/hooks/useStellarWallet";
+import { SellerDashboard } from "@/components/dashboard";
+import { Button } from "@/components/ui/button";
 
 export default function SellerDashboardPage() {
   usePageLoadPerformanceLog("seller_dashboard");
+  const router = useRouter();
+  const { isConnected, isInitializing } = useStellarWallet();
 
-  return null;
+  useEffect(() => {
+    if (!isInitializing && !isConnected) {
+      router.replace("/connect-wallet");
+    }
+  }, [isInitializing, isConnected, router]);
+
+  if (isInitializing || !isConnected) {
+    return null;
+  }
+
+  return (
+    <main className="container mx-auto px-4 py-8">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">Seller Dashboard</h1>
+        <Button asChild>
+          <Link href="/seller/publish">Publish Invoice</Link>
+        </Button>
+      </div>
+      <SellerDashboard />
+    </main>
+  );
 }

components/dashboard/SellerDashboard.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { InvoiceStatusBadge } from "@/components/invoices/InvoiceStatusBadge";
+import { FundingProgressBar } from "@/components/invoices/FundingProgressBar";
+import { useSellerDashboard } from "@/hooks/useSellerDashboard";
+import { ErrorBoundary } from "@/components/invoices/ErrorBoundary";
+import { Button } from "@/components/ui/button";
+
+function formatXlm(amount: number): string {
+  return `${amount.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })} XLM`;
+}
+
+function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <p className="text-sm text-muted-foreground">{label}</p>
+        <p className="text-2xl font-bold">{value}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function StatCardSkeleton() {
+  return (
+    <Card>
+      <CardContent className="pt-6 space-y-2">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-7 w-20" />
+      </CardContent>
+    </Card>
+  );
+}
+
+function InvoiceRowSkeleton() {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="h-5 w-16" />
+        </div>
+        <Skeleton className="h-4 w-32 mt-1" />
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="h-3 w-full" />
+      </CardContent>
+    </Card>
+  );
+}
+
+function StatsPanel({ data }: { data: NonNullable<ReturnType<typeof useSellerDashboard>["data"]> }) {
+  return (
+    <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+      <StatCard label="Total Invoices" value={data.total_invoices.toString()} />
+      <StatCard label="Total Funded" value={data.total_funded.toString()} />
+      <StatCard label="Total Settled" value={data.total_settled.toString()} />
+      <StatCard label="XLM Raised" value={formatXlm(data.total_raised)} />
+    </div>
+  );
+}
+
+export function SellerDashboard() {
+  const { data, isLoading } = useSellerDashboard();
+
+  if (isLoading || !data) {
+    return (
+      <div className="space-y-6" data-testid="seller-dashboard-loading">
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <StatCardSkeleton key={i} />
+          ))}
+        </div>
+        <div className="space-y-4">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <InvoiceRowSkeleton key={i} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <ErrorBoundary
+        fallback={(retry) => (
+          <div className="flex flex-col items-center justify-center p-6 border rounded-md bg-muted/50 gap-2">
+            <p className="text-sm text-muted-foreground">Dashboard stats unavailable — try refreshing</p>
+            <Button variant="outline" size="sm" onClick={retry}>Retry</Button>
+          </div>
+        )}
+      >
+        <StatsPanel data={data} />
+      </ErrorBoundary>
+
+      <div className="space-y-4">
+        <h2 className="text-lg font-semibold">Invoice Breakdown</h2>
+        {data.invoices.length === 0 ? (
+          <p className="py-12 text-center text-muted-foreground">
+            You haven&apos;t published any invoices yet.
+          </p>
+        ) : (
+          data.invoices.map((invoice) => (
+            <Card key={invoice.id}>
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold">{invoice.title}</h3>
+                  <InvoiceStatusBadge status={invoice.status} />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Face value: {formatXlm(invoice.amount)}
+                </p>
+              </CardHeader>
+              <CardContent>
+                <FundingProgressBar
+                  raised={invoice.raised}
+                  target={invoice.amount}
+                  investorCount={invoice.investor_count}
+                />
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

components/dashboard/index.ts

@@ -2,4 +2,5 @@ export { KycStatusBanner } from "./KycStatusBanner";
 export type { KycStatus } from "./KycStatusBanner";
 export { NotificationPreferences } from "./NotificationPreferences";
 export { KycSubmissionForm } from "./KycSubmissionForm";
+export { SellerDashboard } from "./SellerDashboard";
 

hooks/useSellerDashboard.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { fetchSellerDashboard } from "@/lib/api";
+
+export const SELLER_DASHBOARD_QUERY_KEY = ["seller-dashboard"] as const;
+
+export function useSellerDashboard() {
+  return useQuery({
+    queryKey: SELLER_DASHBOARD_QUERY_KEY,
+    queryFn: fetchSellerDashboard,
+  });
+}

hooks/useStellarWallet.ts

@@ -13,6 +13,7 @@ interface WalletState {
   network: Network | null;
   isConnected: boolean;
   isConnecting: boolean;
+  isInitializing: boolean;
   connect: () => Promise<void>;
   disconnect: () => void;
   refreshNetwork: () => Promise<void>;
@@ -22,6 +23,7 @@ export function useStellarWallet(): WalletState {
   const [address, setAddress] = useState<string | null>(null);
   const [network, setNetwork] = useState<Network | null>(null);
   const [isConnecting, setIsConnecting] = useState(false);
+  const [isInitializing, setIsInitializing] = useState(true);
 
   useEffect(() => {
     async function init() {
@@ -31,6 +33,7 @@ export function useStellarWallet(): WalletState {
         const net = await getNetwork();
         setNetwork(net);
       }
+      setIsInitializing(false);
     }
     init();
   }, []);
@@ -63,6 +66,7 @@ export function useStellarWallet(): WalletState {
     network,
     isConnected: address !== null,
     isConnecting,
+    isInitializing,
     connect,
     disconnect,
     refreshNetwork,

lib/api/index.ts

@@ -67,6 +67,20 @@ export async function fetchNotificationPreferences(): Promise<NotificationPrefer
   return res.json();
 }
 
+export interface SellerDashboardData {
+  total_invoices: number;
+  total_funded: number;
+  total_settled: number;
+  total_raised: number;
+  invoices: Invoice[];
+}
+
+export async function fetchSellerDashboard(): Promise<SellerDashboardData> {
+  const res = await fetch(`${API_BASE}/seller/analytics`);
+  if (!res.ok) throw new Error("Failed to fetch seller dashboard");
+  return res.json();
+}
+
 export async function submitKyc(data: FormData): Promise<{ success: boolean }> {
   const res = await fetch(`${API_BASE}/kyc/submit`, {
     method: "POST",