Issue #5: [Enhancement] Add error boundaries to the dashboard layout to prevent full-page crashes

[GoodnessJohn]

Description:

The dashboard layout (
layout.tsx
) has no React error boundary. If any child component throws an unhandled error during render (e.g., a malformed API response causes a type error, or a chart component receives null data), the entire dashboard becomes a blank page with no recovery option.

This is especially risky given that API responses are currently mocked and will eventually be replaced with real data that may have edge cases.

Fix: Add a DashboardErrorBoundary component that:

Catches render errors for the dashboard subtree
Displays a friendly error UI with a "Try again" button that resets the boundary
Optionally logs the error to a monitoring service (Sentry, etc.)
// src/components/shared/error-boundary.tsx
"use client"
import { Component, ReactNode } from "react"

export class DashboardErrorBoundary extends Component<
{ children: ReactNode },
{ hasError: boolean; error?: Error }

{
state = { hasError: false }
static getDerivedStateFromError(error: Error) { return { hasError: true, error } }
render() {
if (this.state.hasError) return <ErrorState message="Something went wrong" onRetry={() => this.setState({ hasError: false })} />
return this.props.children
}
}
Wrap individual dashboard sections (not just the root layout) for granular recovery.

Acceptance criteria:

DashboardErrorBoundary component created with reset functionality
Applied to the dashboard layout wrapping

Applied individually to high-risk sections (charts, transaction list)
Error state shows a user-friendly message, not a blank page
Error detail logged to console (and optionally to a monitoring service)