┌─────────────────────────────────────────────────────────────────────┐
│                    OFFLINE QUEUE SYSTEM FLOW                        │
└─────────────────────────────────────────────────────────────────────┘

┌──────────────┐
│ User Action  │ (Clock-in, Clock-out, Breadcrumb, etc.)
└──────┬───────┘
       │
       ▼
┌─────────────────────────────────────────────────────────────────────┐
│                         queuedFetch()                               │
│  Smart wrapper that replaces standard fetch()                      │
└──────┬──────────────────────────────────────────────────────────────┘
       │
       ├─────────── Online? ──────────┐
       │                              │
       ▼ YES                          ▼ NO
┌─────────────────┐           ┌─────────────────┐
│  Try fetch()    │           │ Queue Request   │
│  to server      │           │ Immediately     │
└────┬────────────┘           └────┬────────────┘
     │                             │
     ├─ Success? ─┐                │
     │            │                │
     ▼ YES        ▼ NO             │
┌──────────┐  ┌──────────┐        │
│ Return   │  │ Queue It │        │
│ Response │  └────┬─────┘        │
└──────────┘       │              │
                   └──────┬───────┘
                          │
                          ▼
                   ┌──────────────────────┐
                   │  localStorage Queue  │
                   │  {                   │
                   │    id, url, method,  │
                   │    body, priority,   │
                   │    retries, type     │
                   │  }                   │
                   └──────────────────────┘
                          │
                          ▼
                   ┌──────────────────────┐
                   │ Show Offline Banner  │
                   │ "X pending requests" │
                   └──────────────────────┘
                          │
                          │ Wait for connection...
                          │
                          ▼
                   ┌──────────────────────┐
                   │ "online" event fires │
                   └──────┬───────────────┘
                          │
                          ▼
                   ┌──────────────────────┐
                   │   syncQueue()        │
                   │   • Sort by priority │
                   │   • Process each     │
                   └──────┬───────────────┘
                          │
                          ├─────────┬─────────┐
                          ▼         ▼         ▼
                    ┌─────────┐ ┌────────┐ ┌────────┐
                    │ High    │ │ Normal │ │ Low    │
                    │Priority │ │Priority│ │Priority│
                    │(clock)  │ │(bread) │ │(other) │
                    └────┬────┘ └───┬────┘ └───┬────┘
                         └──────────┴──────────┘
                                    │
                          ┌─────────▼─────────┐
                          │  Retry fetch()    │
                          │  to server        │
                          └─────────┬─────────┘
                                    │
                    ┌───────────────┼───────────────┐
                    │               │               │
                    ▼ SUCCESS       ▼ FAIL          ▼
            ┌──────────────┐ ┌──────────────┐     
            │ Remove from  │ │ Increment    │     
            │ queue        │ │ retry count  │     
            │              │ │              │     
            │ Show green   │ │ Retries < 3? │     
            │ notification │ └─────┬────┬───┘     
            └──────────────┘       │    │         
                                   │    │         
                            YES ◄──┘    └──► NO   
                             │               │    
                             │               ▼    
                             │         ┌──────────┐
                             │         │ Drop it  │
                             │         │ Show red │
                             │         │ notif    │
                             │         └──────────┘
                             ▼               
                      ┌──────────────┐       
                      │ Keep in queue│       
                      │ for retry    │       
                      └──────────────┘       


┌─────────────────────────────────────────────────────────────────────┐
│                         PRIORITY SYSTEM                             │
└─────────────────────────────────────────────────────────────────────┘

HIGH PRIORITY (processed first):
  🔴 Clock-in    → Critical for time tracking
  🔴 Clock-out   → Critical for payroll

NORMAL PRIORITY:
  🟡 Breadcrumbs → Important but can wait
  🟡 Forms       → User submissions
  🟡 Data ops    → General operations


┌─────────────────────────────────────────────────────────────────────┐
│                      VISUAL INDICATORS                              │
└─────────────────────────────────────────────────────────────────────┘

OFFLINE BANNER (top of page):
  ╔═══════════════════════════════════════════════════════════╗
  ║  📡  Offline - Changes will sync when connected (5 pending)║
  ╚═══════════════════════════════════════════════════════════╝

SYNC NOTIFICATION (bottom-right):
  ┌──────────────────────────┐
  │ ✓ Synced clockin        │  (green background)
  └──────────────────────────┘

  ┌──────────────────────────┐
  │ ✗ Failed to sync clockin│  (red background)
  └──────────────────────────┘


┌─────────────────────────────────────────────────────────────────────┐
│                     FIELD WORKER SCENARIO                           │
└─────────────────────────────────────────────────────────────────────┘

Time    Location        Connection   Action              Queue
────────────────────────────────────────────────────────────────────
08:00   Office          Online ✅    Clock-in            [] (sent)
08:30   En route        Online ✅    Breadcrumb x3       [] (sent)
09:00   Remote site     Offline ❌   Breadcrumb          [1]
09:15   Remote site     Offline ❌   Breadcrumb          [1,2]
09:30   Remote site     Offline ❌   Breadcrumb          [1,2,3]
17:00   Remote site     Offline ❌   Clock-out           [1,2,3,4]
17:30   En route        Online ✅    Auto-sync!          [4,3,2,1]
17:31   En route        Online ✅    Sync complete       []

Result: ✅ All data saved, no loss!


┌─────────────────────────────────────────────────────────────────────┐
│                         CONFIGURATION                               │
└─────────────────────────────────────────────────────────────────────┘

js/offline-queue.js:

  retryAttempts = 3           // Max retries per request
  retryDelay = 2000           // 2 seconds between retries
  syncInterval = 30000        // Periodic sync every 30 seconds
  delayBetweenRequests = 200  // 200ms to prevent server overload

localStorage:

  Key: 'offline_request_queue'
  Value: [
    {
      id: 'req_123_abc',
      url: 'save_clockin.php',
      method: 'POST',
      headers: {...},
      body: {...},
      timestamp: 1234567890,
      retries: 0,
      priority: 'high',
      type: 'clockin'
    },
    ...
  ]