proposal-system/web/src/components/ErrorBoundary.tsx

import React from 'react';
import { Box, Button, Typography } from '@mui/material';

interface Props {
  children: React.ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

export default class ErrorBoundary extends React.Component<Props, State> {
  state: State = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error('ErrorBoundary caught:', error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return (
        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: 2, p: 4 }}>
          <Typography variant="h5">Something went wrong</Typography>
          <Typography color="text.secondary" sx={{ maxWidth: 480, textAlign: 'center' }}>
            An unexpected error occurred. Please try refreshing the page.
          </Typography>
          <Button variant="contained" onClick={() => window.location.assign('/')}>
            Return to Dashboard
          </Button>
        </Box>
      );
    }

    return this.props.children;
  }
}