3 Commits

Author SHA1 Message Date
Alexis Bruneteau
f825a2392c feat: Implement dark theme for frontend with toggle
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>
2025-11-07 16:35:44 +01:00
Alexis Bruneteau
7bf7063203 feat: Create cool interactive blockchain visualization interface
New BlockchainVisualizer component with:

 Visual Design:
  • Dark mode gradient theme (slate/blue/purple)
  • Smooth animations on block load
  • Hover effects and transitions
  • Gradient backgrounds for cards
  • Professional color scheme

📊 Stats Dashboard:
  • Total blocks count card
  • Total votes registered card
  • Chain validation status card
  • Security score card
  • Each with unique icon and styling

🔗 Block Display:
  • Expandable block cards with chevron indicators
  • Genesis block with  icon (yellow)
  • Vote blocks with 🔒 icon (green)
  • Block index and transaction ID display
  • Hash preview on block header
  • Animated entrance (staggered timing)

🎨 Expanded Details:
  • Index, timestamp, and all hashes
  • Previous hash display
  • Block hash (highlighted in gradient)
  • Encrypted vote data
  • Transaction ID with copy button
  • Digital signature with copy button
  • Verification status indicators
  • Chain link visual indicators

📋 Interactive Features:
  • Copy-to-clipboard for all hashes
  • Visual feedback (green checkmark on copy)
  • Smooth expand/collapse animations
  • Hover effects on buttons
  • Responsive grid layout

🔐 Security Panel:
  • Information about immutability
  • Explanation of transparency
  • Description of encryption

🚀 Verification:
  • Beautiful gradient verification button
  • Loading state with spinner
  • Real-time status display

Performance:
  ✓ No TypeScript errors
  ✓ Build successful
  ✓ All 13 routes prerendered
  ✓ Production optimized
  ✓ File size: 5.82 kB

Design Features:
  ✓ Glassmorphism effects
  ✓ Smooth animations
  ✓ Professional color gradients
  ✓ Icons from lucide-react
  ✓ Responsive design
  ✓ Dark mode support
  ✓ Copy functionality
  ✓ Staggered animations

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 02:26:31 +01:00
Alexis Bruneteau
dde0164b27 feat: Implement Phase 4 - Blockchain Visualization
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>
2025-11-07 01:59:46 +01:00