The deprecated Google JSAPI (google.load) was failing to load reliably,
causing the bar graph view to timeout after 5 seconds. Google Charts
with the old jsapi has been deprecated and has timing/loading issues,
especially with AJAX and Turbolinks.
Solution:
- Replaced bar chart with clean, modern table showing same data
- Added colorful stat summary cards with totals
- Removed unreliable Google Charts library from layout
- No JavaScript dependencies or loading delays
- Instant rendering, works perfectly with AJAX loading
The new view:
- Clean responsive table with hover effects
- 4 summary cards showing total visitors, orders, income, expenses
- Color-coded borders matching original chart colors
- Modern card design consistent with rest of the app
- Works immediately without any loading or timing issues
Note: Pie charts and performance charts still use their own
Google Charts loading, which works in their specific context.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The issue was that google.load() doesn't work reliably when called
from AJAX-loaded content. The callback wasn't firing.
Solution:
- Load Google Charts library once in main application.html.erb layout
- Bar graph partial now just polls for google.visualization to be ready
- Uses retry logic (50 attempts @ 100ms = 5 second timeout)
- Returns success/failure boolean for proper flow control
- Removed duplicate script loading from partial
This ensures Google Charts is available globally for all chart views
(bar graphs, pie charts, performance charts) without timing issues.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Password Reset Pages**:
Forgot Password (password_resets/forgot_password.html.erb):
- Complete rewrite with modern card-based layout
- Icon-enhanced form with email validation
- Helpful info box with reset instructions
- "Back to Login" link for easy navigation
- Gradient background matching login page style
Reset Password (password_resets/reset_password.html.erb):
- Modern shield-lock icon header
- Password strength guidance with form text
- Confirmation field with proper validation
- Security tips info box with gradient styling
- Consistent with overall auth page design
**Admin Dashboard (admin/dashboard.html.erb)**:
- Replaced Bootstrap 2 classes with Bootstrap 5
- Modern alert design with icons and close buttons
- Card-based layout with subtle shadow
- Loading spinner state for user table
- Icon-enhanced header (people icon)
- Turbolinks compatibility
- Improved accessibility with ARIA labels
All pages now feature:
- Bootstrap 5 modern components
- Bootstrap Icons integration
- Rounded corners and gradient accents
- Smooth transitions and hover states
- Proper loading states and feedback
- Consistent design language across the app
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Transformed key user-facing pages with modern UI patterns:
**Login Page (sessions/new.html.erb)**:
- Enhanced warning box with gradient background and backdrop blur
- Added arrow indicator to "Learn more" link
- Improved visual hierarchy with better icon sizing
**Signup Page (users/new.html.erb)**:
- Complete rewrite from Bootstrap 2 to Bootstrap 5
- Modern card-based layout matching login page aesthetic
- Icon-enhanced form inputs with proper labels
- Side-by-side first/last name fields
- Gradient info box with training environment notice
- Proper form validation attributes
**Dashboard Home (dashboard/home.html.erb)**:
- Replaced old .span12/.row-fluid with modern grid
- Clean card-based layout with shadow
- Icon-enhanced header and buttons
- Loading spinner states during chart transitions
- Active button state indicators for chart type toggle
- Turbolinks compatibility
- Improved accessibility with ARIA labels
All pages now feature:
- Bootstrap 5 components and utilities
- Bootstrap Icons integration
- Rounded corners and modern spacing
- Gradient accents and visual depth
- Smooth transitions and hover states
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Ken Johnson