# Updated UI Flow with Transaction Numbers

## Visual Flow

### Step 1: Search by Document Number
```
┌─────────────────────────────────────┐
│  🔍 Enter Document Number           │
│                                     │
│  ┌───────────────────────────────┐ │
│  │ PL11089                       │ │ ← User enters document number
│  └───────────────────────────────┘ │
│                                     │
│  [ 🔎 Search Document ]             │
└─────────────────────────────────────┘
```

**User Action**: Enters "PL11089" and clicks Search

---

### Step 2: View Transaction Numbers & Types

```
┌──────────────────────────────────────────────────────────────┐
│  📋 Document Transactions              [ PL11089 ]  ← Back   │
└──────────────────────────────────────────────────────────────┘

Summary:
┌──────────┐  ┌──────────┐  ┌──────────┐
│    3     │  │    49    │  │    49    │
│Transaction│  │  Pages   │  │  Images  │
└──────────┘  └──────────┘  └──────────┘

Transaction Cards:

┌────────────────────────────┐  ┌────────────────────────────┐
│           📁               │  │           📇               │
│                            │  │                            │
│  Transaction # 10...13791  │  │  Transaction # 10...13787  │
│  Property File             │  │  History Card              │
│  Document: PL11089         │  │  Document: PL11089         │
│                            │  │                            │
│  Pages    │    Images      │  │  Pages    │    Images      │
│    46     │      46        │  │    1      │      1         │
└────────────────────────────┘  └────────────────────────────┘
          ↑ Click                         ↑ Click

┌────────────────────────────┐
│           📜               │
│                            │
│  Transaction # 10...13800  │
│  Land Form 7               │
│  Document: PL11089         │
│                            │
│  Pages    │    Images      │
│    2      │      2         │
└────────────────────────────┘
          ↑ Click
```

**Key Information Displayed**:
- **Transaction Number** (Document ID): `10000000013791`
- **Transaction Type**: `Property File`
- **Document Number**: `PL11089`
- **Pages**: `46`
- **Images**: `46`

**User Action**: Clicks on "Transaction #10000000013791" card

---

### Step 3: View PDF

```
┌─────────────────────────────────────────────────────────────────┐
│  PL11089 • Transaction #10000000013791          ← Back to List  │
│  Property File • 46 pages                                       │
└─────────────────────────────────────────────────────────────────┘
│                                                                   │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │                                                             │  │
│  │                                                             │  │
│  │                    PDF CONTENT                              │  │
│  │                    (46 pages)                               │  │
│  │                                                             │  │
│  │                                                             │  │
│  │                                                             │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                   │
└───────────────────────────────────────────────────────────────────┘
```

**Header Shows**:
- Document Number: `PL11089`
- Transaction Number: `10000000013791`
- Transaction Type: `Property File`
- Page Count: `46 pages`

---

## Complete Flow Diagram

```
┌─────────────────────────┐
│   Enter Document Number │
│        PL11089          │
└───────────┬─────────────┘
            │
            ↓
┌───────────────────────────────────────────────────────┐
│  Query Database: lr_source_document                   │
│  WHERE document_number = 'PL11089'                    │
└───────────┬───────────────────────────────────────────┘
            │
            ↓
┌───────────────────────────────────────────────────────┐
│  Returns Multiple Transaction Records:                │
│                                                        │
│  1. Transaction #10000000013787 (Type 111)            │
│  2. Transaction #10000000013791 (Type 103)            │
│  3. Transaction #10000000013800 (Type 127)            │
└───────────┬───────────────────────────────────────────┘
            │
            ↓
┌───────────────────────────────────────────────────────┐
│  Join with lr_dictionary to get Transaction Types:    │
│                                                        │
│  1. #10000000013787 → "History Card"                  │
│  2. #10000000013791 → "Property File"                 │
│  3. #10000000013800 → "Land Form 7"                   │
└───────────┬───────────────────────────────────────────┘
            │
            ↓
┌───────────────────────────────────────────────────────┐
│  Display 3 Transaction Cards                          │
│  Each showing:                                         │
│  - Transaction Number (Document ID)                   │
│  - Transaction Type (from lr_dictionary)              │
│  - Document Number (PL11089)                          │
│  - Page Count & Image Count                           │
└───────────┬───────────────────────────────────────────┘
            │
            ↓
   ┌────────┴────────┐
   │  User Clicks    │
   │  Transaction    │
   │  Card           │
   └────────┬────────┘
            │
            ↓
┌───────────────────────────────────────────────────────┐
│  Call: /pdf-by-document-number-optimized              │
│  ?document_number=PL11089                             │
│  &document_id=10000000013791                          │
└───────────┬───────────────────────────────────────────┘
            │
            ↓
┌───────────────────────────────────────────────────────┐
│  Backend:                                              │
│  1. Find images for THIS transaction only             │
│  2. Check if files are PDF or .bin                    │
│  3. Serve PDFs directly OR convert .bin               │
│  4. Stream PDF to browser                             │
└───────────┬───────────────────────────────────────────┘
            │
            ↓
┌───────────────────────────────────────────────────────┐
│  Display PDF in Fullscreen Viewer                     │
│  Header shows:                                         │
│  - Document Number: PL11089                           │
│  - Transaction Number: 10000000013791                 │
│  - Transaction Type: Property File                    │
│  - Page Count: 46 pages                               │
└───────────────────────────────────────────────────────┘
```

---

## Real Example with PL11089

### Input
```
Document Number: PL11089
```

### Database Query Result
```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
    },
    {
      "document_id": 10000000013791,
      "document_type": 103,
      "document_type_label": "Property File",
      "page_count": 46,
      "available_images": 46
    },
    {
      "document_id": 10000000013800,
      "document_type": 127,
      "document_type_label": "Land Form 7 (Right of Occupancy Title)",
      "page_count": 2,
      "available_images": 2
    }
  ]
}
```

### UI Display

**Card 1:**
```
┌────────────────────────────┐
│           📇               │
│                            │
│  Transaction # 10000000013787  ← Transaction Number
│  History Card                  ← Transaction Type
│  Document: PL11089             ← Document Number
│                            │
│  Pages: 1  │  Images: 1   │
└────────────────────────────┘
```

**Card 2:**
```
┌────────────────────────────┐
│           📁               │
│                            │
│  Transaction # 10000000013791  ← Transaction Number
│  Property File                 ← Transaction Type
│  Document: PL11089             ← Document Number
│                            │
│  Pages: 46  │  Images: 46 │
└────────────────────────────┘
```

**Card 3:**
```
┌────────────────────────────┐
│           📜               │
│                            │
│  Transaction # 10000000013800  ← Transaction Number
│  Land Form 7                   ← Transaction Type
│  Document: PL11089             ← Document Number
│                            │
│  Pages: 2  │  Images: 2   │
└────────────────────────────┘
```

---

## Key Clarifications

### What is a "Transaction"?

In your system:
- **Document Number** (e.g., PL11089) = Property identifier
- **Transaction** = A specific record/document type associated with that property
- **Transaction Number** = Document ID (unique identifier: 10000000013791)
- **Transaction Type** = What kind of document it is (Property File, History Card, etc.)

### Example:
- **Property**: PL11089 has multiple transactions (documents)
- **Transaction 1**: #10000000013787 - History Card (1 page)
- **Transaction 2**: #10000000013791 - Property File (46 pages)
- **Transaction 3**: #10000000013800 - Land Form 7 (2 pages)

Each transaction can be:
- Indexing and Scanning
- Application of RofO (Right of Occupancy)
- Property File
- History Card
- Site Plans
- Certificates
- etc.

---

## Updated Card Layout

```
┌─────────────────────────────────────┐
│         Icon (📁 📇 📜 etc.)        │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ Transaction # 10000000013791│   │ ← Large, prominent
│  └─────────────────────────────┘   │
│                                     │
│  Property File                      │ ← Transaction Type
│  Document: PL11089                  │ ← Document Number
│                                     │
│  ─────────────────────────────      │
│                                     │
│  Pages: 46      Images: 46          │ ← Metadata
│                                     │
└─────────────────────────────────────┘
```

---

## Test the Updated UI

1. **Open** `http://localhost:8080/index_v2.html`
2. **Enter** `PL11089`
3. **See** 3 cards with:
   - Transaction #10000000013787 - History Card
   - Transaction #10000000013791 - Property File  
   - Transaction #10000000013800 - Land Form 7
4. **Click** Transaction #10000000013791
5. **View** PDF viewer showing:
   - "PL11089 • Transaction #10000000013791"
   - "Property File • 46 pages"

---

## Summary

✅ **Document Number**: PL11089 (shown in search and cards)  
✅ **Transaction Numbers**: 10000000013787, 10000000013791, 10000000013800 (prominent display)  
✅ **Transaction Types**: History Card, Property File, Land Form 7 (from database)  
✅ **Click to View**: Click any transaction → View its specific PDF  

**The flow now clearly shows both transaction numbers AND types!** 🎉