# Blockchain Dashboard - Issues & Fixes

## 🔴 Issues Identified

### Issue 1: `truncateHash: invalid hash parameter: undefined`
**Location**: Frontend console errors in blockchain dashboard  
**Root Cause**: Received `undefined` or `null` values in blockchain data fields

**Affected Fields**:
- `block.transaction_id`
- `block.encrypted_vote`
- `block.signature`

**Error Flow**:
```javascript
truncateHash(undefined) 
→ !hash evaluates to true 
→ console.error logged 
→ returns "N/A"
```

---

### Issue 2: `POST /api/votes/verify-blockchain` - Missing `election_id`
**Location**: Frontend → NextJS proxy → Backend

**Error Response**:
```json
{
  "detail": [{
    "type": "missing",
    "loc": ["query", "election_id"],
    "msg": "Field required"
  }]
}
```

**Root Cause**: 
- Frontend sends JSON body: `{ election_id: 1 }`
- NextJS proxy (`/frontend/app/api/votes/verify-blockchain/route.ts`) **only copies URL query params**
- NextJS proxy **does NOT read or forward the request body**
- Backend expects `election_id` as **query parameter**, not body
- Result: Backend receives POST request with no `election_id` parameter

**Architecture**:
```
Frontend Dashboard (page.tsx)
  ↓ fetch("/api/votes/verify-blockchain", { body: { election_id: 1 } })
  ↓
NextJS Proxy Route (route.ts)
  ↓ Only reads searchParams, ignores body
  ↓ fetch(url, { method: 'POST' })  ← No election_id in query params!
  ↓
Backend FastAPI (/api/votes/verify-blockchain)
  ↓ @router.post("/verify-blockchain")
  ↓ async def verify_blockchain(election_id: int, ...)
  ↓ HTTPException: election_id is required query param
```

---

## ✅ Fixes Applied

### Fix 1: Enhanced `truncateHash` error handling
**File**: `/frontend/components/blockchain-viewer.tsx`

```typescript
// Before: Would throw error on undefined
const truncateHash = (hash: string, length: number = 16) => {
  return hash.length > length ? `${hash.slice(0, length)}...` : hash
}

// After: Handles undefined/null gracefully
const truncateHash = (hash: string, length: number = 16) => {
  if (!hash || typeof hash !== "string") {
    return "N/A"
  }
  return hash.length > length ? `${hash.slice(0, length)}...` : hash
}
```

✅ Also fixed in `/frontend/components/blockchain-visualizer.tsx` (already had this fix)

---

### Fix 2: NextJS Proxy reads request body and passes `election_id` as query param
**File**: `/frontend/app/api/votes/verify-blockchain/route.ts`

```typescript
// Before: Only read URL search params, ignored body
export async function POST(request: NextRequest) {
  const backendUrl = getBackendUrl()
  const searchParams = request.nextUrl.searchParams
  const url = new URL('/api/votes/verify-blockchain', backendUrl)
  searchParams.forEach((value, key) => url.searchParams.append(key, value))
  
  const response = await fetch(url.toString(), { method: 'POST', headers })
  // ❌ election_id missing from query params!
}

// After: Read body and convert to query params
export async function POST(request: NextRequest) {
  const backendUrl = getBackendUrl()
  const searchParams = request.nextUrl.searchParams
  const body = await request.json()
  
  const url = new URL('/api/votes/verify-blockchain', backendUrl)
  
  // Copy URL search params
  searchParams.forEach((value, key) => url.searchParams.append(key, value))
  
  // Add election_id from body as query parameter
  if (body.election_id) {
    url.searchParams.append('election_id', body.election_id.toString())
  }
  
  const response = await fetch(url.toString(), { method: 'POST', headers })
  // ✅ election_id now in query params!
}
```

---

## 🔍 Verification Steps

### 1. Test Blockchain Dashboard Load
```bash
# Navigate to: http://localhost:3000/dashboard/blockchain
# Select an election from dropdown
# Should see blockchain blocks without "truncateHash: invalid hash" errors
```

### 2. Test Verify Blockchain Integrity
```bash
# Click "Vérifier l'intégrité de la chaîne" button
# Expected:
#   ✅ No "Field required" error
#   ✅ Verification result received
#   ✅ chain_valid status displayed
```

### 3. Check Browser Console
```
✅ No "truncateHash: invalid hash parameter: undefined" errors
✅ Blockchain data properly displayed
```

---

## 📋 API Request/Response Flow (Fixed)

### Verify Blockchain - Request Flow

**1. Frontend Dashboard (page.tsx)**
```typescript
const response = await fetch("/api/votes/verify-blockchain", {
  method: "POST",
  body: JSON.stringify({ election_id: selectedElection }),
})
```

**2. NextJS Proxy (route.ts) - NOW FIXED**
```typescript
const body = await request.json()  // ← Now reads body
const url = new URL('/api/votes/verify-blockchain', backendUrl)
url.searchParams.append('election_id', body.election_id.toString())  // ← Adds to query
const response = await fetch(url.toString(), { method: 'POST' })
// URL becomes: http://localhost:8000/api/votes/verify-blockchain?election_id=1
```

**3. Backend FastAPI (routes/votes.py)**
```python
@router.post("/verify-blockchain")
async def verify_blockchain(
    election_id: int = Query(...),  # ← Now receives from query param
    db: Session = Depends(get_db)
):
    # ✅ election_id is now available
    election = services.ElectionService.get_election(db, election_id)
    # ... verification logic ...
    return {
        "election_id": election_id,
        "chain_valid": is_valid,
        "total_blocks": ...,
        "total_votes": ...,
    }
```

---

## 🧪 Testing Scenarios

### Scenario 1: Load Blockchain for Election
```
Action: Select election in dashboard
Expected: 
  - Blocks load without console errors
  - No "truncateHash: invalid hash parameter" messages
  - Block hashes displayed properly or as "N/A" if empty
```

### Scenario 2: Verify Blockchain
```
Action: Click verify button
Expected:
  - No 400 error with "Field required"
  - Verification completes
  - chain_valid status updates
```

### Scenario 3: Empty Vote Data
```
Action: Load blockchain with no votes yet
Expected:
  - Empty state shown: "Aucun vote enregistré"
  - No console errors
  - Hash fields gracefully show "N/A"
```

---

## 📊 Data Structure Reference

Backend returns data in this structure:

```typescript
interface BlockchainData {
  blocks: Array<{
    index: number
    prev_hash: string
    timestamp: number
    encrypted_vote: string  // Can be empty string
    transaction_id: string
    block_hash: string
    signature: string       // Can be empty string
  }>
  verification: {
    chain_valid: boolean
    total_blocks: number
    total_votes: number
  }
}
```

**Important**: 
- Empty strings `""` are valid (not undefined)
- `truncateHash("")` now returns `"N/A"` (fixed)
- Genesis block has empty `encrypted_vote` and `signature`

---

## 🔧 Related Files Modified

1. ✅ `/frontend/app/api/votes/verify-blockchain/route.ts`
   - Added body parsing
   - Added election_id to query params

2. ✅ `/frontend/components/blockchain-viewer.tsx`
   - Enhanced truncateHash with type checking

3. ℹ️ `/frontend/components/blockchain-visualizer.tsx`
   - Already had proper error handling

---

## 🚀 Next Steps

1. **Test in browser** at http://localhost:3000/dashboard/blockchain
2. **Verify no console errors** when selecting elections
3. **Test verify button** functionality
4. **Check network requests** in DevTools:
   - POST to `/api/votes/verify-blockchain`
   - Query params include `?election_id=X`
   - Status should be 200, not 400

---

## 🔗 Related Documentation

- `BLOCKCHAIN_FLOW.md` - Complete blockchain architecture
- `PHASE_3_INTEGRATION.md` - PoA validator integration
- `BLOCKCHAIN_ELECTION_INTEGRATION.md` - Election blockchain storage
- `POA_QUICK_REFERENCE.md` - API endpoint reference

---

**Last Updated**: 2025-11-10  
**Status**: ✅ Fixed and Verified