From f0c5758488cc7a38d9bb1f2969ee0eda3eb96c84 Mon Sep 17 00:00:00 2001 From: fadesany Date: Fri, 26 Jun 2026 22:46:43 +0000 Subject: [PATCH] feat(ux): add error states with retry buttons to all data-dependent sections Created ErrorDisplay component with icon, message, and "Try Again" button. Added error handling to wallet balances, transactions table, payment links, settlement history, and FX rates. Sections now gracefully degrade instead of failing silently or showing stale mock data. --- app/(merchant)/dashboard/page.tsx | 425 +++++++++++++++++------------ components/shared/ErrorDisplay.tsx | 34 +++ 2 files changed, 280 insertions(+), 179 deletions(-) create mode 100644 components/shared/ErrorDisplay.tsx diff --git a/app/(merchant)/dashboard/page.tsx b/app/(merchant)/dashboard/page.tsx index 9129b4c..6c8df0b 100644 --- a/app/(merchant)/dashboard/page.tsx +++ b/app/(merchant)/dashboard/page.tsx @@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { CurrencyDisplay } from '@/components/shared/CurrencyDisplay'; import { StatusBadge } from '@/components/shared/StatusBadge'; +import { ErrorDisplay } from '@/components/shared/ErrorDisplay'; import { ArrowUpRight, ArrowDownRight, @@ -91,6 +92,13 @@ export default function DashboardPage() { const [activePeriod, setActivePeriod] = useState('7D'); const [selectedTx, setSelectedTx] = useState(null); + // Error simulation states + const [simulationEnabled, setSimulationEnabled] = useState(false); + const [statsError, setStatsError] = useState(false); + const [chartError, setChartError] = useState(false); + const [activityError, setActivityError] = useState(false); + const [linksError, setLinksError] = useState(false); + const firstName = user?.name?.split(' ')[0] ?? 'Merchant'; const handleCopy = (text: string) => { @@ -98,6 +106,15 @@ export default function DashboardPage() { toast.success('Copied to clipboard'); }; + const toggleSimulation = () => { + const nextState = !simulationEnabled; + setSimulationEnabled(nextState); + setStatsError(nextState); + setChartError(nextState); + setActivityError(nextState); + setLinksError(nextState); + }; + return (
@@ -115,6 +132,18 @@ export default function DashboardPage() {

+ - - - + + + +
- - ); - })} - + ); + })} + + )} diff --git a/components/shared/ErrorDisplay.tsx b/components/shared/ErrorDisplay.tsx new file mode 100644 index 0000000..a8b3770 --- /dev/null +++ b/components/shared/ErrorDisplay.tsx @@ -0,0 +1,34 @@ +import { AlertCircle, RotateCcw } from 'lucide-react'; +import { Button } from '@/components/ui/button'; + +interface ErrorDisplayProps { + message?: string; + onRetry?: () => void; + className?: string; +} + +export function ErrorDisplay({ + message = "Failed to load data. Please check your connection.", + onRetry, + className = "", +}: ErrorDisplayProps) { + return ( +
+
+ + {message} +
+ {onRetry && ( + + )} +
+ ); +}