Merge pull request #21 from newrelic/NR-506774-update-ui

feat: update dashboard UI with new features

Author: jgoddard19

frontend_service/.claude.md

@@ -0,0 +1,357 @@
+# ReliBank Frontend - Context for Claude
+
+## Project Overview
+
+This is a **demo banking application** built to showcase New Relic's observability capabilities. It's intentionally designed with specific behaviors to generate interesting telemetry data. This is NOT a production-ready banking app.
+
+**Key Point**: Many "bugs" are actually intentional demo features. Always check the README before "fixing" things.
+
+---
+
+## Tech Stack
+
+- **Framework**: React Router v7 in **SPA mode** (`ssr: false`)
+- **UI**: Material-UI (MUI)
+- **State**: React Context API (LoginContext for auth, PageContext for page data)
+- **Build**: Vite
+- **Language**: TypeScript
+- **Deployment**: Kubernetes with Skaffold
+
+---
+
+## Project Structure
+
+```
+frontend_service/
+├── app/
+│   ├── root.tsx                    # Root layout, LoginContext provider, auth logic
+│   ├── routes/
+│   │   ├── login.tsx               # Login page (path: /)
+│   │   ├── dashboard.tsx           # Main dashboard with accounts
+│   │   ├── support.tsx             # Support/chatbot page
+│   │   └── settings.tsx            # Settings page
+│   ├── components/
+│   │   ├── layout/
+│   │   │   ├── AppLayout.tsx       # Main layout wrapper (Header + Sidebar + Footer)
+│   │   │   ├── Header.tsx          # Top bar with username + notifications
+│   │   │   ├── Sidebar.tsx         # Left nav menu
+│   │   │   └── Footer.tsx          # Bottom disclaimer
+│   │   └── dashboard/
+│   │       └── TransferCard.tsx    # Fund transfer component
+│   └── types/
+│       └── user.ts                 # TypeScript interfaces
+├── react-router.config.ts          # IMPORTANT: ssr: false (SPA mode)
+└── vite.config.ts                  # Proxy config for backend services
+```
+
+---
+
+## Important: This is SPA Mode, Not SSR
+
+**Configuration**: `react-router.config.ts` has `ssr: false`
+
+This means:
+- No server-side rendering
+- No hydration issues (all rendering happens client-side)
+- Build output only contains `build/client/` (no server bundle)
+- Don't use SSR terminology in code or docs
+
+---
+
+## Authentication Flow
+
+### Normal Flow:
+1. User visits `/` (login page)
+2. User logs in → auth data saved to `sessionStorage`
+3. `LoginContext` updates with `userData` (array of account objects)
+4. Navigate to `/dashboard`
+
+### State Management:
+- **Location**: `app/root.tsx` in the `Layout` component
+- **Context**: `LoginContext` provides:
+  - `isAuthenticated: boolean`
+  - `userData: UserAccount[] | null` (array of checking/savings accounts)
+  - `handleLogin(data): void`
+  - `handleLogout(): void`
+  - `setUserData(data): void`
+- **Persistence**: Syncs with `sessionStorage` automatically
+- **Key Pattern**: State initializes to `null`, loads from sessionStorage in `useEffect`
+
+### User Data Structure:
+```typescript
+userData = [
+  { name: 'Alice Checking', account_type: 'checking', balance: 8500.25, routing_number: '123456789' },
+  { name: 'Alice Savings', account_type: 'savings', balance: 4000.25, routing_number: '987654321' }
+]
+```
+
+---
+
+## 🚨 Demo-Specific Behaviors (DO NOT "FIX")
+
+These are **intentional** for New Relic demos:
+
+### 1. No Frontend Overdraft Validation
+**Location**: `app/components/dashboard/TransferCard.tsx`
+
+Users can transfer more than their balance. The frontend allows it, backend rejects it.
+
+**Purpose**: Demonstrates backend validation errors and New Relic error telemetry.
+
+**Don't**: Add `if (amount > balance) { showError(); return; }`
+
+### 2. No Rollback on Transfer Errors
+**Location**: `app/components/dashboard/TransferCard.tsx`
+
+When a transfer fails:
+- UI updates balances immediately (optimistic update)
+- API fails → error displays BUT balances stay incorrect
+- No rollback to original state
+
+**Purpose**: Visually shows impact of errors, makes errors more obvious in demos.
+
+**Don't**: Add rollback logic like `setUserData(originalUserData)` in catch blocks.
+
+### 3. Mock Data Fallback
+**Location**: `app/routes/dashboard.tsx` (line 243)
+
+```typescript
+const userData = contextUserData || demoUserData;
+```
+
+Dashboard uses demo data if no auth exists. This is intentional for development.
+
+### 4. Broken Theme Toggle Button
+**Location**: `app/components/layout/Header.tsx`
+
+A light/dark mode toggle button in the header that intentionally throws a JavaScript error when clicked.
+
+**Purpose**: Demonstrates frontend error tracking, New Relic Browser error reporting, and client-side error handling.
+
+**Behavior**:
+- Button is visible in the header (sun/moon icon)
+- Clicking it throws: `Error: Theme toggle is not implemented`
+- Error is reported to New Relic Browser with context
+- Shows impact of uncaught JavaScript errors on user experience
+
+**Don't**: Implement actual theme switching unless explicitly updating demo scenarios.
+
+---
+
+## Development
+
+### Running the App
+
+**Must run from parent directory**:
+```bash
+cd /path/to/relibank  # Parent directory!
+skaffold dev
+```
+
+**NOT from**:
+```bash
+cd frontend_service  # Wrong! skaffold.yaml is in parent
+```
+
+The app runs at: `http://localhost:3000/`
+
+### Debugging with kubectl
+
+**Always use kubectl for debugging pods** - it's faster and more direct than parsing skaffold logs:
+
+```bash
+# Check pod status
+kubectl get pods -n relibank | grep frontend
+
+# View logs (last 30 lines)
+kubectl logs -n relibank deployment/frontend-service --tail=30
+
+# Follow logs in real-time
+kubectl logs -n relibank deployment/frontend-service -f
+
+# Check all pods
+kubectl get pods -n relibank
+```
+
+When debugging issues after a rebuild, use `kubectl logs` to see what's happening in the pod directly instead of reading through skaffold output files.
+
+### Backend Services
+
+Vite proxies requests to Kubernetes services:
+- `/accounts-service/*` → accounts-service:5002
+- `/chatbot-service/*` → chatbot-service:5003
+- `/bill-pay-service/*` → bill-pay-service:5000
+
+### Environment Variables
+
+New Relic config (required):
+```bash
+VITE_NEW_RELIC_ACCOUNT_ID
+VITE_NEW_RELIC_BROWSER_APPLICATION_ID
+VITE_NEW_RELIC_LICENSE_KEY
+```
+
+### Development Optimizations
+
+**Cache-Busting for Skaffold Rebuilds**
+
+The app includes no-cache meta tags in `app/root.tsx` to prevent stale JS errors after Skaffold rebuilds:
+
+```html
+<meta httpEquiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+<meta httpEquiv="Pragma" content="no-cache" />
+<meta httpEquiv="Expires" content="0" />
+```
+
+**Why:** When Skaffold rebuilds the container, browsers may cache the old `index.html` which references old JS file hashes that no longer exist. This causes errors like "Failed to fetch module" or blank pages.
+
+**Solution:** These headers force the browser to always fetch fresh HTML/JS files. While this adds a small performance overhead, it ensures smooth development. Can be safely removed if needed in the future.
+
+**Vite Dependency Pre-optimization**
+
+Icons used across different pages are pre-optimized in `vite.config.ts` to prevent page reloads on first navigation:
+
+```typescript
+optimizeDeps: {
+  include: [
+    '@mui/icons-material/Send',      // Support page
+    '@mui/icons-material/Logout',    // Header
+    '@mui/icons-material/Dashboard', // Dashboard page
+    // ... other icons
+  ]
+}
+```
+
+**Why:** Without pre-optimization, navigating to a page for the first time triggers Vite to optimize its dependencies, causing a page reload. Pre-optimizing prevents this issue.
+
+---
+
+## Common Tasks
+
+### Testing Error Scenarios
+
+To test transfer failures for demos:
+```bash
+# Scale down bill-pay service
+kubectl scale deployment bill-pay-service -n relibank --replicas=0
+
+# Try transfer in UI → will fail but balances stay incorrect
+
+# Restore service
+kubectl scale deployment bill-pay-service -n relibank --replicas=1
+```
+
+### Debugging Auth Issues
+
+If user shows "Loading..." or username doesn't display:
+1. Check console for `[Layout]` and `[Header]` logs
+2. Check `sessionStorage.getItem('userData')` in browser console
+3. Verify component is inside `<LoginContext.Provider>`
+4. Check that `userData` is an array with account objects
+
+### Getting Username
+
+```typescript
+// userData is an array of accounts
+const userName = userData[0].name.split(' ')[0];  // "Alice" from "Alice Checking"
+```
+
+---
+
+## Things to Avoid
+
+### ❌ Don't Do:
+1. **Enable SSR** - Keep `ssr: false` in config
+2. **Add overdraft validation** - Intentionally missing for demos
+3. **Add transfer rollback logic** - Intentionally missing for demos
+4. **Remove mock data fallback** - Useful for development
+5. **Run skaffold from frontend_service/** - Must run from parent directory
+6. **Use SSR terminology** - This is SPA mode
+7. **"Fix" demo behaviors** - They're intentional features
+
+### ✅ Do:
+1. **Read the README** before making changes
+2. **Check if "bugs" are intentional** (see Demo Behaviors section)
+3. **Test with backend services running** (via skaffold)
+4. **Keep state initialization in useEffect** (not during render)
+5. **Sync state to sessionStorage** (use existing patterns)
+
+---
+
+## Page Layouts
+
+### Login Page (`/`)
+- Minimal layout (no sidebar/header)
+- Just the login form centered on screen
+- Uses separate theme from authenticated pages
+
+### Authenticated Pages (`/dashboard`, `/support`, `/settings`)
+- Full AppLayout with:
+  - Left sidebar (navigation)
+  - Top header (username + notifications + logout)
+  - Main content area (route component)
+  - Footer (disclaimer)
+
+**Layout Decision Logic**: In `root.tsx`, based on `location.pathname === '/'`
+
+### Dashboard Grid Layout Structure
+
+The dashboard (`/dashboard`) uses a 12-column Material-UI Grid with the following layout:
+
+**Hero Section (White Background)**
+- Full-width white background section extending edge-to-edge
+- Contains "Account Summary" title and balance cards
+- Content has px: 48 horizontal padding to align with header and other content
+
+**Grid Structure:**
+1. **Row 1** (4-4-4): Three balance overview cards
+   - Total Balance
+   - Checking Account
+   - Savings Account
+
+2. **Row 2** (4-8): Transfer card + Line chart
+   - Transfer Funds card (4 cols)
+   - Spending over 6 months line chart (8 cols)
+
+3. **Row 3** (6-6): Two charts side by side
+   - Spending categories pie chart (6 cols)
+   - Account balance trends stacked bar chart (6 cols)
+
+4. **Row 4** (12): Full-width Recent Transactions table
+
+**Consistent Padding:**
+- Header: px: 48, py: 2
+- Dashboard hero section content: px: 48
+- Dashboard main content: px: 48, pb: 3
+- Support page: px: 48, py: 3
+
+---
+
+## New Relic Integration
+
+The app includes New Relic Browser agent:
+- Script injected in `root.tsx` via `dangerouslySetInnerHTML`
+- Config read from environment variables
+- Template file: `app/nr.js`
+- Placeholders replaced at build time by `generate_nrjs_file.sh`
+
+Errors are automatically reported to New Relic (including transfer failures).
+
+---
+
+## Additional Notes
+
+- **Material-UI Grid**: Uses `size` prop (not `xs`/`md` - newer MUI version)
+- **Routing**: React Router v7 conventions (routes in `app/routes/`)
+- **No Redux**: State management via Context API only
+- **Docker**: Multi-stage build, runs on port 3000
+- **Demo App**: Not production-ready, missing many security features
+
+---
+
+## When in Doubt
+
+1. Check `README.md` for detailed architecture
+2. Check demo behaviors section (don't "fix" intentional bugs)
+3. Ask user before major changes to auth/state logic
+4. Test in the actual Kubernetes environment (skaffold dev)

frontend_service/Dockerfile

@@ -28,11 +28,12 @@ RUN ./generate_nrjs_file.sh
 ENV HOST=0.0.0.0
 ENV PORT=3000
 
+# Pre-build to optimize Vite dependencies cache
+# This prevents the race condition where chunks aren't ready on first page load
+RUN npm run build
+
 # Expose the port
 EXPOSE 3000
 
-# We don't need to run the build step for development
-# RUN npm run build
-
 # Set the command to run the development server
 CMD ["npm", "run", "dev"]