# Quick Start: New UI with Optimized PDF Handling

## What's New

### ✨ Features

1. **Two-Page Flow**:
   - **Page 1**: Enter document number
   - **Page 2**: View all transactions (document types) as beautiful cards
   - **Page 3**: View PDF in fullscreen viewer

2. **Smart PDF Handling**:
   - ✅ If images are already PDF → Serve directly (no conversion!)
   - ✅ If images are .bin → Convert to PDF
   - ✅ Caches PDFs for faster loading
   - ✅ Headers show if file was converted or not

3. **Dynamic Transaction Types**:
   - Fetched from backend (`lr_dictionary` table)
   - Shows icons based on transaction type
   - Displays page count and available images
   - Click any card to view that transaction

4. **Better Performance**:
   - No unnecessary conversions
   - Cached PDFs reused
   - Improved file discovery algorithm

## How to Use

### Step 1: Start the API Server

```bash
cd /home/katie/Desktop/PLAGIS_AUMENTUM

# Start the API (if not already running)
python3 aumentum_api.py
```

Server will start at: `http://localhost:8001`

### Step 2: Open the New UI

```bash
# Option 1: Simple Python HTTP server
cd /home/katie/Desktop/PLAGIS_AUMENTUM/web_frontend
python3 -m http.server 8080

# Option 2: Direct file open
# Just open index_v2.html in your browser
```

Open in browser: `http://localhost:8080/index_v2.html`

Or directly: `file:///home/katie/Desktop/PLAGIS_AUMENTUM/web_frontend/index_v2.html`

### Step 3: Test the Flow

1. **Enter Document Number**:
   - Type: `PL11089` (or any document number)
   - Click "Search Document"

2. **View Transactions**:
   - You'll see cards for each transaction type:
     - 📁 Property File (46 pages)
     - 📇 History Card (1 page)
     - 📜 Land Form 7 (2 pages)
   - Each card shows:
     - Document icon
     - Transaction type name
     - Document ID
     - Page count
     - Available images

3. **Click a Transaction**:
   - Click any card (e.g., "Property File")
   - PDF viewer opens
   - See header with:
     - Document number
     - Transaction type
     - Page count
     - "Was Converted" indicator

## API Endpoints Used

### 1. Search Documents (Page 1 → Page 2)

```
GET /documents/by-document-number-enhanced?document_number=PL11089
```

**Response**:
```json
{
  "document_number": "PL11089",
  "total_document_ids": 3,
  "documents": [
    {
      "document_id": 10000000013787,
      "document_type": 111,
      "document_type_label": "History Card",
      "page_count": 1,
      "available_images": 1,
      "has_content": true
    },
    ...
  ]
}
```

### 2. Get PDF (Page 2 → Page 3)

```
GET /documents/pdf-by-document-number-optimized?document_number=PL11089&document_id=10000000013791
```

**Response Headers**:
- `X-Document-Number`: PL11089
- `X-Document-ID`: 10000000013791
- `X-Page-Count`: 46
- `X-Was-Converted`: true/false ← Tells you if conversion happened!

## Testing Scenarios

### Scenario 1: Document with .bin Files

```bash
# Document with JPEG .bin files that need conversion
# API will convert to PDF
curl "http://localhost:8001/documents/pdf-by-document-number-optimized?document_number=PL11089&document_id=10000000013791" \
  -I | grep "X-Was-Converted"

# Expected: X-Was-Converted: true
```

### Scenario 2: Document with PDF Files

```bash
# If your upload uses PDFs directly (your Node-RED route)
# API will serve directly without conversion
curl "http://localhost:8001/documents/pdf-by-document-number-optimized?document_number=YOUR_PDF_DOC&document_id=XXXXX" \
  -I | grep "X-Was-Converted"

# Expected: X-Was-Converted: false
```

### Scenario 3: Multiple Document IDs

```bash
# Without document_id - should fail
curl "http://localhost:8001/documents/pdf-by-document-number-optimized?document_number=PL11089"

# Expected: Error "Multiple document IDs found. Please specify document_id."

# With document_id - should work
curl "http://localhost:8001/documents/pdf-by-document-number-optimized?document_number=PL11089&document_id=10000000013791" \
  -o test.pdf
```

## Comparing Old vs New

| Feature | Old UI (`index.html`) | New UI (`index_v2.html`) |
|---------|----------------------|--------------------------|
| **Flow** | Single page | Two-page (search → transactions) |
| **Transaction Selection** | All types shown at once | Click to select |
| **PDF Optimization** | Always converts | Serves PDFs directly if available |
| **Visual Design** | Good | Better (gradient cards, animations) |
| **Performance** | Slower (always converts) | Faster (smart caching) |

## Performance Metrics

Test conversion vs direct serving:

```bash
# Test conversion time (.bin files)
time curl "http://localhost:8001/documents/pdf-by-document-number-optimized?document_number=PL11089&document_id=10000000013791" \
  -o test_converted.pdf

# Test direct serving (if PDFs exist)
time curl "http://localhost:8001/documents/pdf-by-document-number-optimized?document_number=PL11089&document_id=10000000013791" \
  -o test_cached.pdf

# Second request should be instant (cached)
```

Expected results:
- First request with .bin conversion: 2-5 seconds
- Second request (cached): < 0.1 seconds
- Direct PDF serving: < 0.5 seconds

## Configuration

### Change API URL

Edit `index_v2.html`, line ~690:

```javascript
const API_BASE_URL = 'http://localhost:8001';  // Change this
```

### Enable Debug Logging

Open browser console (F12) to see:
- Document search requests
- Transaction card generation
- PDF loading status
- Conversion indicators

## Troubleshooting

### 1. "No transactions found"

```bash
# Check if document exists
curl "http://localhost:8001/documents/by-document-number-enhanced?document_number=PL11089"
```

### 2. "Multiple document IDs found"

This is expected! The new flow lets user choose which transaction type to view.
Just click the transaction card you want.

### 3. PDF Won't Load

Check browser console for errors:

```bash
# Test endpoint directly
curl "http://localhost:8001/documents/pdf-by-document-number-optimized?document_number=PL11089&document_id=10000000013791" \
  -v -o test.pdf
```

### 4. Slow Performance

Clear cache:

```bash
# Clear all cached PDFs
curl -X DELETE "http://localhost:8001/cache/clear-all"

# Clear specific document
curl -X DELETE "http://localhost:8001/documents/PL11089/cache"
```

## Integration with Your Upload Route

Your Node-RED upload endpoint:

```javascript
POST ${nodeRedURL}/api/cm/upload_content/${props.titleId}
```

**How it works now**:

1. **Upload** (your route):
   - Files uploaded to contentstore (as .bin or .pdf)
   - Database records created with `document_number` = `titleId`
   - Alfresco creates `content_url` (store://...)

2. **Retrieval** (new optimized endpoint):
   - Checks if file is PDF → serves directly
   - Checks if file is .bin → converts to PDF
   - Uses improved algorithm to find correct files

**No changes needed to your upload route!** 🎉

## Next Steps

1. ✅ Test with `PL11089`
2. ✅ Try different document numbers
3. ✅ Check performance (converted vs cached)
4. ✅ Verify images match Aumentum Web Access
5. ✅ Test with documents uploaded via your Node-RED route

## Summary

| Component | Status | Notes |
|-----------|--------|-------|
| **New UI** | ✅ Ready | Two-page flow with transaction cards |
| **Optimized Endpoint** | ✅ Ready | Serves PDFs directly when possible |
| **Smart Detection** | ✅ Ready | Checks file type before conversion |
| **Caching** | ✅ Ready | Faster subsequent requests |
| **Upload Route** | ✅ No changes needed | Works with existing Node-RED upload |

**Ready to test!** 🚀