Fix remaining undefined array access error on blockchain visualization page.
When blockchainData exists but blocks is undefined, accessing .length would crash:
- "can't access property 'length', e is undefined"
CHANGES:
1. Blockchain page (blockchain/page.tsx):
- Ensure blocks array always exists when API data is fetched
- Provide fallback to empty array with verification object
- Add null check before accessing blocks.length in conditional render
This is the final fix for all frontend undefined array access issues.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix undefined variable crashes when accessing property 'length' on undefined:
- "can't access property 'length', e is undefined"
CHANGES:
1. Election detail page ([id]/page.tsx):
- Ensure candidates array exists when fetching election data
- Default to empty array if API returns undefined candidates
2. Active elections list page (active/page.tsx):
- Validate API response is an array before processing
- Ensure each election has candidates array with fallback
3. Blockchain visualizer (blockchain-visualizer.tsx):
- Add optional chaining check before accessing data.blocks
- Prevent crashes when data prop is undefined
All changes follow defensive programming practices:
- No more direct property access without null checks
- Array fallbacks ensure predictable behavior
- Optional chaining used consistently
This fixes the error that occurred when navigating to election pages.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created `/frontend/app/api/votes/check/route.ts` to handle GET requests for checking if a user has voted in a specific election.
- Added error handling for unauthorized access and missing election ID.
- Forwarded requests to the backend API and returned appropriate responses.
- Updated `/frontend/app/api/votes/history/route.ts` to fetch user's voting history with error handling.
- Ensured both endpoints utilize the authorization token for secure access.
- Fixed ElGamal class instantiation in votes.py (ElGamalEncryption instead of ElGamal)
- Fixed public key serialization in admin.py (use public_key_bytes property)
- Implemented database migration with SQL-based key generation
- Added vote deduplication endpoint: GET /api/votes/check
- Protected all array accesses with type validation in frontend
- Fixed vote parameter type handling (string to number conversion)
- Removed all debug console logs for production
- Created missing dynamic route for vote history details
Fixes:
- JavaScript error: "can't access property length, e is undefined"
- Vote deduplication not preventing form display
- Frontend data validation issues
- Missing dynamic routes
The blockchain page was calling /api/elections instead of
/api/elections/active, resulting in 404 Not Found errors.
The API returns an array directly, not wrapped in an object,
so updated response parsing to handle both formats.
This fixes 'Error fetching elections: Impossible de charger
les élections' error on the blockchain dashboard page.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Add next-themes dependency for theme management
- Create ThemeProvider wrapper for app root layout
- Set dark mode as default theme
- Create ThemeToggle component with Sun/Moon icons
- Add theme toggle to home page navigation
- Add theme toggle to dashboard header
- App now starts in dark mode with ability to switch to light mode
Styling uses existing Tailwind dark mode variables configured in
tailwind.config.ts and globals.css. All existing components automatically
support dark theme.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive blockchain viewer with:
- BlockchainViewer component: Display blocks in expandable cards
- Hash visualization: Show SHA-256 hashes for each block
- Chain verification: Visual integrity status and verification button
- Block details: Expand to see full block information
- Index, timestamp, previous hash, block hash
- Encrypted vote data, transaction ID
- Digital signatures
- Election selector: View blockchain for different elections
- Mock data: Demo blockchain included for testing
- Responsive design: Works on mobile and desktop
UI Features:
✓ Block expansion/collapse with icon indicators
✓ Genesis block highlighted with ⚡ icon
✓ Vote blocks marked with 🔒 icon
✓ Chain link visual indicators
✓ Hash truncation with full display on expand
✓ Status indicators: Chain valid/invalid
✓ Security information panel
✓ Statistics: Total blocks, votes, integrity status
Integration:
✓ Fetch elections list from API
✓ Fetch blockchain state for selected election
✓ Verify blockchain integrity
✓ Handle empty blockchain state
✓ Error handling with user feedback
✓ Loading states during API calls
Routes:
✓ /dashboard/blockchain - Main blockchain viewer
✓ Added to sidebar navigation
✓ 13 total routes now (added 1 new)
Frontend Build:
✓ No TypeScript errors
✓ Zero unused imports
✓ Production build successful
✓ All routes prerendered
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Core Integration:
- Create API client with TypeScript types for all endpoints
- Implement authentication context provider for user state management
- Add protected route component for dashboard access control
- Connect login/register pages to backend authentication endpoints
- Implement user session persistence with localStorage tokens
Authentication:
- Login page now connects to /api/auth/login endpoint
- Register page connects to /api/auth/register with validation
- Password strength requirements (min 8 chars)
- Form validation and error handling
- Automatic redirect to dashboard on successful auth
- Logout functionality with session cleanup
Protected Routes:
- Dashboard pages require authentication
- Non-authenticated users redirected to login
- Loading spinner during auth verification
- User name displayed in dashboard header
- Proper session management
Election/Vote APIs:
- Dashboard fetches active elections from /api/elections/active
- Display real election data with candidates count
- Handle loading and error states
- Skeleton loaders for better UX
Type Safety:
- Full TypeScript interfaces for all API responses
- Proper error handling with try-catch blocks
- API response types: AuthToken, VoterProfile, Election, Candidate, Vote, VoteHistory
Environment:
- API URL configurable via NEXT_PUBLIC_API_URL env variable
- Default to http://localhost:8000 for local development
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Migrate from React CRA to Next.js 15 with modern architecture
- Implement comprehensive shadcn/ui component library
- Create complete dashboard system with layouts and navigation
- Build authentication pages (login, register) with proper forms
- Implement vote management pages (active, upcoming, history, archives)
- Add user profile management with security settings
- Configure Tailwind CSS with custom dark theme (accent: #e8704b)
- Setup TypeScript with strict type checking
- Backup old React-based frontend to .backups/frontend-old
- All pages compile successfully and build passes linting
Pages created:
- Home page with hero section and features
- Authentication (login/register)
- Dashboard with stats and vote cards
- Vote management (active, upcoming, history, archives)
- User profile with form validation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
