# Visual Guide: New UI Flow

## 🎯 Complete User Journey

### Step 1: Landing Page - Document Search

```
┌─────────────────────────────────────────────┐
│      🏛️ PLAGIS Document Viewer              │
│  Property Land and Geographic Info System   │
└─────────────────────────────────────────────┘

        ┌───────────────────────────────┐
        │                               │
        │   🔍 Enter Document Number    │
        │                               │
        │   Enter the document number   │
        │   to view all transactions    │
        │                               │
        │   ┌─────────────────────────┐ │
        │   │ e.g., PL11089, BP703... │ │  ← Input field
        │   └─────────────────────────┘ │
        │                               │
        │   [ 🔎 Search Document ]      │  ← Button
        │                               │
        └───────────────────────────────┘
```

**What happens**: User types "PL11089" and clicks search.

---

### Step 2: Transaction List Page

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

┌─────────┐  ┌─────────┐  ┌─────────┐
│    3    │  │   49    │  │   49    │  ← Summary Cards
│Transact.│  │  Pages  │  │ Images  │
└─────────┘  └─────────┘  └─────────┘

┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐
│      📁          │  │      📇          │  │       📜         │
│  Property File   │  │  History Card    │  │  Land Form 7     │  ← Transaction Cards
│                  │  │                  │  │                  │
│ ID: 10...13791   │  │ ID: 10...13787   │  │ ID: 10...13800   │
│                  │  │                  │  │                  │
│ Pages     Images │  │ Pages     Images │  │ Pages     Images │
│   46    |   46   │  │   1     |   1    │  │   2     |   2    │
└──────────────────┘  └──────────────────┘  └──────────────────┘
      ↑                     ↑                     ↑
   Clickable            Clickable             Clickable
```

**What happens**: 
- Shows 3 different transaction types
- Each card displays:
  - Icon (based on type)
  - Transaction name
  - Document ID
  - Page count
  - Available images
- User clicks "Property File" (46 pages)

---

### Step 3: PDF Viewer

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

**What happens**: 
- PDF loads in fullscreen viewer
- All 46 pages available to scroll
- Back button returns to transaction list
- Can select another transaction type

---

## 🎨 Visual Elements

### Color Scheme

**Primary Gradient**: Purple to Blue (`#667eea` → `#764ba2`)
```
███████████  ← Headers, buttons, active elements
```

**Secondary Colors**:
- White (`#ffffff`) - Background, cards
- Gray (`#6c757d`) - Text, metadata
- Green (`#11998e`) - Success states
- Red (`#dc3545`) - Errors

### Card Interactions

**Normal State**:
```
┌──────────────────┐
│      📁          │  Border: Light gray
│  Property File   │  Background: White
└──────────────────┘
```

**Hover State**:
```
╔══════════════════╗  ← Purple border
║      📁          ║  ← Slight elevation
║  Property File   ║  ← Shadow effect
╚══════════════════╝
```

**Selected State**:
```
╔══════════════════╗
║▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓║  ← Gradient background
║      📁          ║  ← Purple border
║  Property File   ║
╚══════════════════╝
```

---

## 📱 Responsive Design

### Desktop View (> 768px)
```
┌──────────────────────────────────────────────────┐
│  [Card 1]  [Card 2]  [Card 3]                    │  ← 3 columns
└──────────────────────────────────────────────────┘
```

### Mobile View (< 768px)
```
┌────────────┐
│  [Card 1]  │  ← 1 column
├────────────┤
│  [Card 2]  │
├────────────┤
│  [Card 3]  │
└────────────┘
```

---

## 🔄 Loading States

### Searching
```
┌───────────────────┐
│    ┌───────┐      │
│    │  ◐◐◐  │      │  ← Spinner
│    └───────┘      │
│   Searching...    │
└───────────────────┘
```

### Loading PDF
```
┌───────────────────┐
│    ┌───────┐      │
│    │  ◐◐◐  │      │  ← Spinner
│    └───────┘      │
│ Loading document..│
└───────────────────┘
```

---

## ⚡ Performance Indicators

### Response Headers (Developer View)

**PDF Already Exists**:
```http
HTTP/1.1 200 OK
X-Document-Number: PL11089
X-Document-ID: 10000000013791
X-Page-Count: 46
X-Was-Converted: false  ← No conversion needed! Fast! 🚀
```

**Conversion Required**:
```http
HTTP/1.1 200 OK
X-Document-Number: PL11089
X-Document-ID: 10000000013791
X-Page-Count: 46
X-Was-Converted: true  ← Converted from .bin
```

---

## 🎭 Icon Mapping

| Transaction Type | Icon | Example |
|-----------------|------|---------|
| Property File | 📁 | Property documents |
| History Card | 📇 | Historical records |
| Land Form 7 | 📜 | Title documents |
| Certificate | 🏆 | Certificates of Occupancy |
| Plan/Survey | 📐 | Site plans |
| Application | 📋 | Application forms |
| Letter | ✉️ | Correspondence |
| Receipt | 💳 | Payment receipts |
| Indexing/Scanning | 🗂️ | Scanned documents |

---

## 📊 Data Flow Diagram

```
User                     Frontend                  API                    Database/Files
 │                          │                       │                           │
 │ 1. Enter "PL11089"       │                       │                           │
 ├─────────────────────────>│                       │                           │
 │                          │                       │                           │
 │                          │ 2. GET /by-doc-number │                           │
 │                          ├──────────────────────>│                           │
 │                          │                       │                           │
 │                          │                       │ 3. Query lr_source_doc    │
 │                          │                       ├─────────────────────────> │
 │                          │                       │                           │
 │                          │                       │ 4. Return 3 doc records   │
 │                          │                       │<────────────────────────── │
 │                          │                       │                           │
 │                          │ 5. JSON response      │                           │
 │                          │<────────────────────── │                           │
 │                          │                       │                           │
 │ 6. Display 3 cards       │                       │                           │
 │<─────────────────────────│                       │                           │
 │                          │                       │                           │
 │ 7. Click "Property File" │                       │                           │
 ├─────────────────────────>│                       │                           │
 │                          │                       │                           │
 │                          │ 8. GET /pdf-optimized │                           │
 │                          ├──────────────────────>│                           │
 │                          │   +document_id        │                           │
 │                          │                       │                           │
 │                          │                       │ 9. Check if PDF           │
 │                          │                       ├─────────────────────────> │
 │                          │                       │                           │
 │                          │                       │ 10. Return PDF/bin        │
 │                          │                       │<────────────────────────── │
 │                          │                       │                           │
 │                          │                       │ 11. Convert if needed     │
 │                          │                       │    (or serve directly)    │
 │                          │                       │                           │
 │                          │ 12. Stream PDF        │                           │
 │                          │<────────────────────── │                           │
 │                          │                       │                           │
 │ 13. Display PDF          │                       │                           │
 │<─────────────────────────│                       │                           │
```

---

## 🎬 Animation Sequence

### Page Transition
```
Page 1 (Search)
    ↓ fade out (0.2s)
    ↓ slide up (0.2s)
Page 2 (Transactions)
    ↓ fade in (0.4s)
    ↓ cards appear sequentially
```

### Card Hover
```
Normal → Hover
  ↓
  │ Border color: gray → purple (0.3s)
  │ Shadow: none → 0 10px 30px (0.3s)
  │ Transform: translateY(0) → translateY(-5px) (0.3s)
  ↓
Elevated card with purple border
```

---

## 💡 Usage Tips

### For Users
1. **Quick Navigation**: Click document card OR "View" button
2. **Back Button**: Returns to previous page
3. **Multiple Views**: View different transaction types easily
4. **Status Indicators**: Green = available, Gray = no images

### For Developers
1. **Check Console** (F12): See API calls and responses
2. **Network Tab**: Monitor PDF loading times
3. **Response Headers**: Check `X-Was-Converted` for performance
4. **Cache Control**: Use DELETE endpoints to clear cache

---

## 🎯 Key Improvements Over Old UI

| Aspect | Old UI | New UI |
|--------|--------|--------|
| **Pages** | 1 page | 3 pages (better flow) |
| **Transaction Selection** | Mixed list | Individual cards |
| **Visual Hierarchy** | Flat | Organized sections |
| **Icons** | Generic | Type-specific |
| **Summary** | None | Statistics cards |
| **Navigation** | Limited | Back buttons |
| **Animations** | Basic | Smooth transitions |
| **Performance** | Always converts | Smart detection |

---

## 🚀 Quick Demo Script

1. Open `http://localhost:8080/index_v2.html`
2. Type: `PL11089`
3. Press Enter or click Search
4. **Page 2 appears** showing 3 transaction cards
5. Click the "📁 Property File" card (46 pages)
6. **Page 3 appears** with fullscreen PDF
7. Scroll through 46 pages
8. Click "← Back to Transactions"
9. **Page 2 reappears**
10. Try clicking "📇 History Card" (1 page)
11. See single-page PDF
12. Click "← Back to Transactions"
13. Click "← Back to Search"
14. Try another document number!

---

**Enjoy your upgraded UI!** 🎉