ChatGPT Prompt to Build a React Dashboard Layout With Sidebar and Charts

ROLE
You are a senior React developer building a reusable authentication flow.

CONTEXT
Framework: [REACT_VERSION, e.g. React 18]
Routing library: [ROUTING_LIBRARY_AND_VERSION, e.g. React Router v6]
Backend auth endpoints: [LOGIN_ENDPOINT], [LOGOUT_ENDPOINT], [SESSION_CHECK_ENDPOINT]
Token storage method: [TOKEN_STORAGE_METHOD, e.g. httpOnly cookie set by the server]
Styling approach: [STYLING_APPROACH, e.g. Tailwind CSS]

TASK
Generate the following, using functional components and hooks:
1. An AuthContext and AuthProvider that exposes the current user, a loading flag, and login/logout functions.
2. A login form component that calls the login function and displays validation and API errors.
3. A ProtectedRoute component that redirects unauthenticated users to [LOGIN_ROUTE_PATH], preserving the originally requested URL for post-login redirect.
4. On initial app load, verify any existing session before rendering protected routes, showing a loading indicator during the check.

CONSTRAINTS
- Do not render protected page content until the session check has completed.
- Handle network and 401 errors from the auth endpoints gracefully, with user-facing messages.
- Keep components small and composable; do not put API calls directly inside UI components.

OUTPUT FORMAT
Provide each file separately with a filename comment at the top, followed by a 2-3 sentence summary of how the pieces connect together.

ROLE: You are a frontend developer converting a design image into a React component.

CONTEXT: I'm attaching a design screenshot/mockup. Tech stack: [REACT VERSION, STYLING APPROACH e.g. Tailwind/CSS Modules/styled-components, COMPONENT LIBRARY IF ANY]

TASK:
1. First, describe what you see in the image: overall layout, spacing, typography (font sizes/weights), colors, and any visible interactive states
2. Flag anything you're uncertain about (illegible text, ambiguous spacing, colors that are hard to read precisely) instead of guessing silently
3. Then write the React component matching this description, split into: component structure (JSX), styling, and any props needed to make it reusable

CONSTRAINTS:
- Match the layout and spacing as closely as possible to what's visible in the image
- Use [STYLING APPROACH] only, no inline styles unless the project convention requires it
- Make the component accept props for any content that would realistically vary (text, images, links)
- [ANY ADDITIONAL CONSTRAINT, e.g. must be accessible, must support dark mode]

OUTPUT FORMAT:
1. A short description of the design (layout, spacing, typography, colors, flagged uncertainties)
2. The complete component code in a fenced code block
3. A one-line note on anything that will need visual verification once rendered

ROLE: You are a senior frontend engineer writing accessible React components.

TASK:
Build a reusable Modal component in React with [TYPESCRIPT / JAVASCRIPT].

FUNCTIONAL REQUIREMENTS:
- Opens and closes based on an `isOpen` prop and `onClose` callback
- Renders via [REACT PORTAL / INLINE] into [TARGET DOM NODE OR DESCRIPTION]
- Closes on Escape key press
- Closes on clicking the overlay background (but not when clicking inside the modal content)

ACCESSIBILITY REQUIREMENTS:
- Traps keyboard focus inside the modal while it is open
- Returns focus to the element that triggered the modal when it closes
- Uses `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` pointing to the modal title
- Prevents background content from being read by screen readers while the modal is open

STYLING:
- [UNSTYLED WITH CLASS NAMES / USE TAILWIND / MATCH THIS DESIGN SYSTEM: DESCRIBE]

OUTPUT FORMAT:
Provide the complete component code in a single file, followed by a short usage example showing how to open the modal from a parent component.