[Refactor] Componentize Large React Files and Implement Error Boundaries

[basantnema31]

Description

Several page components within the src/ directory have grown quite large and complex, containing multiple concerns (data fetching, state management, and UI rendering) within a single file. Furthermore, if a child component throws an error during rendering, it currently crashes the entire React tree.

Proposed Solution

1. Extract UI Components: Break down large monolithic page components into smaller, reusable presentational components.
2. Implement Error Boundaries: Create a global <ErrorBoundary> component and wrap critical sections of the app (like dashboard panels or data feeds).
3. Fallback UI: Design a user-friendly fallback UI that displays when an error is caught, preventing a total white-screen crash.

Why this matters

Improves code maintainability and vastly improves the resilience of the application in production.

Suggested labels: gssoc, quality:clean, level:intermediate, type:refactor, area:frontend

[pari7maheshwari]

hey @basantnema31 i would like to work on this under gssoc'26.Can u assign it to me.

[Aditya948351]

@pari7maheshwari Thank you for your interest! However, the author of this issue (@basantnema31) provided a detailed proposal and receives priority. Assigned to @basantnema31! You can work on this!