# 📱 Mobile App UI Mockup & Flow

## 1. Login Screen

```
┌─────────────────────────────┐
│ 🔔 ⁓⁓⁓              ⋯ BFI │  ← Header (Safe Area)
├─────────────────────────────┤
│                             │
│                             │
│         [Logo 56x56]        │ ← Login Section
│                             │
│      MASUK SISTEM           │
│  Sistem Perpustakaan...     │
│                             │
│  ┌─────────────────────┐    │
│  │ 📧 Email            │    │ ← Form Fields
│  │ nama@perusahaan...  │    │
│  └─────────────────────┘    │
│                             │
│  ┌─────────────────────┐    │
│  │ 🔒 Password         │    │
│  │ • • • • • • • •     │    │
│  └─────────────────────┘    │
│                             │
│  [    MASUK        ]        │ ← CTA Button
│                             │
│  ❌ Error message (if any)  │
│                             │
│                             │
├─────────────────────────────┤
│      [No tabs]              │
└─────────────────────────────┘

Dimensions: 375 x 667 (iPhone SE)
Safe Area: Supported
Scrollable: Yes
```

## 2. Dashboard Screen

```
┌─────────────────────────────┐
│ 📱 BFI     Masuk 12:34   ⋮  │  ← Header with time & menu
├─────────────────────────────┤
│                             │
│  IKHTISAR                   │
│  ┌──────────┐  ┌──────────┐ │
│  │    12    │  │    03    │ │  ← Stats Cards
│  │  File    │  │ Folder   │ │
│  └──────────┘  └──────────┘ │
│                             │
│  FILE TERBARU               │
│  ┌──────────┐  ┌──────────┐ │
│  │ 📄       │  │ 📄       │ │
│  │ Laporan  │  │ Panduan  │ │  ← 2-Column Grid
│  │ Keuangan │  │ Karyawan │ │
│  │ 2.4 MB   │  │ 5.3 MB   │ │
│  └──────────┘  └──────────┘ │
│  ┌──────────┐  ┌──────────┐ │
│  │ 📊       │  │ 📈       │ │
│  │ Data     │  │ Pitch    │ │
│  │ Penjualan│  │ Deck     │ │
│  │ 1.2 MB   │  │ 8.9 MB   │ │
│  └──────────┘  └──────────┘ │
│                             │
│  ⚠️ Swipe up untuk lebih    │
│                             │
├─────────────────────────────┤
│  🏠  📁  👤                  │  ← Bottom Tab Bar
│ DASHBOARD  FILE  PROFIL     │  (Safe area inset)
└─────────────────────────────┘

Dimensions: 375 x 667
Safe Area: Bottom (gesture area)
Scrollable: Content only
Tabs: Fixed at bottom
```

## 3. File Manager Tab

```
┌─────────────────────────────┐
│ 📱 BFI     Masuk 12:34   ⋮  │
├─────────────────────────────┤
│                             │
│  📁 FOLDER & FILE LIST      │
│                             │
│  📂 Laporan Keuangan        │
│     └─ Laporan Q3.docx      │
│     └─ Data 2026.xlsx       │
│     └─ Budget Plan.pptx     │
│                             │
│  📂 Panduan SOP & HRD       │
│     └─ Panduan Karyawan.pdf │
│     └─ Policy Manual.docx   │
│                             │
│  📂 Presentasi Proyek       │
│     └─ Pitch Deck.pptx      │
│     └─ Overview.pptx        │
│                             │
│  [Search bar or sort]       │
│                             │
├─────────────────────────────┤
│  🏠  📁  👤                  │
│ DASHBOARD  FILE  PROFIL     │
└─────────────────────────────┘

Tab Active: FILE (highlighted)
Scrollable: Full content
Can tap folder to expand
Can tap file to preview
```

## 4. Profile / Logout Tab

```
┌─────────────────────────────┐
│ 📱 BFI     Masuk 12:34   ⋮  │
├─────────────────────────────┤
│                             │
│  👤 PROFIL SAYA             │
│                             │
│  ┌──────────────────────┐   │
│  │  Nama: Admin User    │   │
│  │  Email: admin@wli... │   │
│  │  Role: Super Admin   │   │
│  └──────────────────────┘   │
│                             │
│  AKSES & PERMISSION         │
│  ✓ Dashboard               │
│  ✓ Chat dengan AI          │
│  ✓ File Manager            │
│  ✓ Upload Files            │
│  ✓ Quick Chat              │
│  ✓ Activity Logs           │
│  ✓ Configuration           │
│                             │
│  [  Ganti Password  ]       │
│                             │
│  [  KELUAR AKUN    ]        │
│   (Danger button)           │
│                             │
├─────────────────────────────┤
│  🏠  📁  👤                  │
│ DASHBOARD  FILE  PROFIL     │
└─────────────────────────────┘

Tab Active: PROFIL (highlighted)
Action: Tap "KELUAR AKUN" → Confirm dialog
```

## 5. Logout Confirmation

```
┌─────────────────────────────┐
│  Confirmation Dialog        │
│                             │
│  ⚠️  Keluar dari akun?      │
│                             │
│  admin@wli.co.id            │
│                             │
│  Anda akan logout dari      │
│  akun dan kembali ke       │
│  halaman login.             │
│                             │
│  [  BATAL  ]  [  KELUAR  ]  │
│                             │
└─────────────────────────────┘

Modal: Centered
Actions: Cancel or Confirm
On Confirm: Logout & redirect to login
```

## 6. Error State (Login Failed)

```
┌─────────────────────────────┐
│ 🔔 ⁓⁓⁓              ⋯ BFI │
├─────────────────────────────┤
│                             │
│         [Logo 56x56]        │
│      MASUK SISTEM           │
│                             │
│  ┌─────────────────────┐    │
│  │ 📧 Email            │    │
│  │ admin@wli.co.id     │    │
│  └─────────────────────┘    │
│                             │
│  ┌─────────────────────┐    │
│  │ 🔒 Password         │    │
│  │ • • • • • • • •     │    │
│  └─────────────────────┘    │
│                             │
│  ┌──────────────────────┐   │
│  │ ❌ Email not found   │   │ ← Error Box
│  │ or access not        │   │
│  │ approved yet.        │   │
│  └──────────────────────┘   │
│                             │
│  [    MASUK        ]        │
│                             │
├─────────────────────────────┤
│      [No tabs]              │
└─────────────────────────────┘

Error Color: #c41d19
Background: #fff1f0
Border: #f7d4d0
```

## 7. Loading State (Dashboard Load)

```
┌─────────────────────────────┐
│ 📱 BFI     Masuk 12:34   ⋮  │
├─────────────────────────────┤
│                             │
│                             │
│         Loading...          │
│                             │
│      ◐ (spinner)            │ ← Loading indicator
│                             │
│     Memuat data...          │
│                             │
│                             │
│                             │
├─────────────────────────────┤
│  🏠  📁  👤                  │
│ DASHBOARD  FILE  PROFIL     │
└─────────────────────────────┘

Spinner: CSS animation
Message: Informative
Duration: Until data loads
```

## 8. Empty State (No Files)

```
┌─────────────────────────────┐
│ 📱 BFI     Masuk 12:34   ⋮  │
├─────────────────────────────┤
│                             │
│  IKHTISAR                   │
│  ┌──────────┐  ┌──────────┐ │
│  │    0     │  │    0     │ │
│  │  File    │  │ Folder   │ │
│  └──────────┘  └──────────┘ │
│                             │
│  FILE TERBARU               │
│                             │
│                             │
│      📄                      │
│  Belum ada file             │ ← Empty State
│  File terbaru akan          │
│  tampil di sini             │
│                             │
│                             │
│                             │
├─────────────────────────────┤
│  🏠  📁  👤                  │
│ DASHBOARD  FILE  PROFIL     │
└─────────────────────────────┘

Icon: Large & light
Text: Helpful & actionable
Spacing: Centered
```

## 9. Landscape Mode (Rotated)

```
┌──────────────────────────────────────────┐
│ 📱 BFI  12:34   ⋮                        │
├──────────────────────────────────────────┤
│                                          │
│ ┌────────┐ ┌────────┐ ┌────────┐        │
│ │ 📄     │ │ 📄     │ │ 📄     │        │
│ │ File 1 │ │ File 2 │ │ File 3 │  ← 3-column
│ │ 2.4MB  │ │ 5.3MB  │ │ 1.2MB  │        │
│ └────────┘ └────────┘ └────────┘        │
│                                          │
│ ┌────────┐ ┌────────┐ ┌────────┐        │
│ │ 📊     │ │ 📈     │ │ ...    │        │
│ │ File 4 │ │ File 5 │ │        │        │
│ │ 8.9MB  │ │ 3.2MB  │ │        │        │
│ └────────┘ └────────┘ └────────┘        │
│                                          │
├──────────────────────────────────────────┤
│  🏠  📁  👤                               │
│DASHBOARD  FILE  PROFIL                   │
└──────────────────────────────────────────┘

Layout: Adaptive (3 columns landscape)
Header: Compact
Tabs: Still at bottom
Safe area: Respected on sides
```

## 10. iPhone X with Notch

```
   ┌─────────────────────┐
   │ ◼◼ 9:41    🔋⚡📶  │  ← Status bar (OS)
┌──┴─────────────────────┴──┐
│ 📱 BFI     Masuk   12:34   │  ← App header (safe area)
├──────────────────────────┐ │
│                          │ │
│  IKHTISAR                │ │
│  ┌──────┐  ┌──────┐     │ │
│  │ 12   │  │ 03   │     │ │
│  │ File │  │Folder│     │ │
│  └──────┘  └──────┘     │ │
│                          │ │
│  FILE TERBARU            │ │
│  ┌──────┐  ┌──────┐     │ │
│  │ 📄   │  │ 📄   │     │ │
│  │ File1│  │ File2│     │ │
│  └──────┘  └──────┘     │ │
│                          │ │
│  ⚠️ Scroll untuk lebih   │ │
│                          │ │
├──────────────────────────┤ │
│  🏠  📁  👤              │ │
│DASHBOARD FILE PROFIL     │ │
└──────────────────────────┘ │
   │                          │
   │    ◀  ◼  ▶  (gesture)   │  ← Gesture area
   └──────────────────────────┘

Safe Area:
- Top: 44px (notch area)
- Bottom: 34px (gesture bar)
- Left/Right: 0px
- Respects viewport-fit=cover
```

## User Flow Diagram

```
START
  │
  ▼
[Open URL in Mobile Browser]
  │
  ├─ Desktop (width > 768px)?
  │  └─> Show Landing Page
  │
  └─ Mobile (width < 768px)?
     └─> [Redirect to /mobile-app]
        │
        ▼
        [Check localStorage.isLoggedIn]
        │
        ├─ true?
        │  └─> [Verify Session /api/auth/session]
        │     ├─ Valid?
        │     │  └─> [Show Dashboard]
        │     │     ├─ Load Files /api/files
        │     │     ├─ Show Stats
        │     │     ├─ Show Recent Files
        │     │     └─ Tab Navigation
        │     │
        │     └─ Invalid?
        │        └─> [Clear Storage → Show Login]
        │
        └─ false?
           └─> [Show Login Form]
              │
              ▼
              [User Input Email + Password]
              │
              ▼
              [Sign in with Firebase Authentication]
              │
              ├─ Firebase sign-in succeeds?
              │  └─> [Send Firebase ID token to /api/auth/session]
              │     ├─ Approved → [Redirect to Dashboard]
              │     └─ Pending → [Show approval status]
              │
              └─ Fail (401/400)?
                 └─> [Show Error Message]
                    └─> [Stay on Login Form]

LOGOUT FLOW:
[User Tap Profile Tab]
  └─> [Confirm Dialog]
     ├─ Cancel?
     │  └─> [Stay on Dashboard]
     │
     └─ Confirm?
        └─> [POST /api/auth/logout]
           └─> [Clear localStorage]
              └─> [Show Login Form]

END
```

---

**Viewport Sizes for Testing**:
- iPhone SE: 375 x 667
- iPhone 12: 390 x 844
- iPhone 12 Pro Max: 428 x 926
- Pixel 5: 393 x 851
- Galaxy S20: 360 x 800
- iPad: 768 x 1024
- iPad Pro: 1024 x 1366

**Safe Area Testing**:
- iPhone X: notch top
- iPhone 12 Pro Max: notch top + home indicator bottom
- Android with gesture: gesture area bottom
- Landscape: side notches on some devices