# 📱 BFI Mobile App - Dokumentasi

## Gambaran Umum
Mobile app view untuk BFI (Sistem Perpustakaan Dokumen Internal) yang dirancang khusus untuk perangkat mobile dengan pengalaman seperti aplikasi native.

## 🎯 Fitur Utama

### Alur Pengguna
1. **Buka Link Utama** → Deteksi mobile otomatis
2. **Langsung ke Login** → Tanpa landing page (untuk mobile)
3. **Dashboard** → Setelah login berhasil
4. **Logout** → Kembali ke halaman login

### Komponen

#### 1. **Header** (Sticky)
- Logo & Brand Name
- Responsive terhadap safe area (notch, punch-hole)
- Action buttons (menu profil)

#### 2. **Content Area** (Scrollable)
- Login View (form login)
- Dashboard View (file terbaru, statistik)
- File View (pencarian dan daftar file berdasarkan folder)
- Profile View (identitas, role, izin, dan logout)
- Dynamic tab switching

#### 3. **Bottom Tab Navigation**
- Dashboard
- File Manager (cari dan buka pratinjau file)
- Profile
- Full-height safe area support

## 🔧 Setup & Instalasi

### Prerequisites
```bash
Node.js 14+
npm 6+
Express.js 5+
```

### Konfigurasi Server
File `/server.js` sudah memiliki route:
```javascript
app.get('/mobile-app', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'mobile-app.html'));
});
```

### Start Server
```bash
npm start
# Server berjalan di http://localhost:3200 (sesuai .env PORT)
```

### Akses Mobile App
```
Desktop: http://localhost:3200/mobile-app
Mobile: Buka http://[IP]:3200/ → Otomatis redirect ke mobile app
```

## 📱 Responsive & Device Support

### Breakpoints
- **Mobile First**: Dioptimalkan untuk layar < 768px
- **Landscape**: Mendukung orientasi landscape
- **Notch/Safe Area**: Support untuk iPhone X dan lebih baru
- **Bottom Inset**: Mendukung gesture area di Android

### Device Testing
```
iOS: Safari, Chrome
Android: Chrome, Firefox, Samsung Browser
iPad/Tablet: Desktop view tetap aktif
```

## 🔐 Autentikasi

### Login Flow
1. User input email + password
2. Firebase Authentication memverifikasi email + password atau Google sign-in
3. Firebase ID token dikirim ke `/api/auth/session` untuk memeriksa akses aplikasi
4. Server hanya memberikan akses setelah email terverifikasi dan akun disetujui Admin
5. Aplikasi menampilkan dashboard setelah sesi diterima server

Pendaftaran mandiri tersedia melalui tombol **Daftar akun** di halaman login.
Firebase membuat akun email/password dan mengirim tautan verifikasi. Pendaftaran
tidak langsung memberi akses aplikasi; akun baru dibuat berstatus menunggu
persetujuan Admin ketika pertama kali login. Login Google, pembuatan akun oleh
Super Admin di Settings, dan reset password juga menggunakan Firebase
Authentication. Data role dan persetujuan akses tetap dikelola oleh server.

Saat dibuka kembali, aplikasi memeriksa ID token Firebase agar sesi yang sudah
aktif tidak meminta login ulang.

### Session Management (Firebase)
Firebase ID token digunakan untuk sesi aplikasi dan diperiksa oleh server.
Logout juga menutup sesi Firebase di browser.
```javascript
// Auto-verify session on app load
POST /api/auth/session
Headers: { Authorization: 'Bearer <token>' }

// Logout
POST /api/auth/logout
Headers: { Authorization: 'Bearer <token>' }
```

### Token Storage
```javascript
localStorage.setItem('firebaseIdToken', token);
localStorage.setItem('isLoggedIn', 'true');

// On logout
localStorage.removeItem('firebaseIdToken');
localStorage.removeItem('isLoggedIn');
```

## 🎨 UI/UX Design

### Color Scheme
- **Primary**: #2457d6 (Blue)
- **Background**: #ffffff (White)
- **Text**: #17243b (Dark)
- **Muted**: #66758b (Gray)
- **Border**: #e8edf5 (Light Gray)

### Typography
- **Font**: Inter (Google Fonts)
- **Sizes**: 0.7rem - 1.8rem
- **Weights**: 400, 500, 600, 700

### Touch Interactions
- Minimum 44x44px tap targets
- Visual feedback (.active states)
- No double-tap zoom
- Smooth transitions (0.2s ease)

## 📊 Dashboard Features

### Stats Section
- Total Files Count
- Total Folders Count

### Recent Files Grid
- 2-column layout on mobile
- File icon + name + size
- Klik untuk membuka pratinjau
- Empty state handling

### File & Profile Tabs
- File dapat dicari berdasarkan nama, judul yang disarankan, dan tag, lalu dikelompokkan menurut folder yang bisa diakses.
- Jumlah folder di dashboard dihitung dari data API, bukan nilai tetap.
- Profil menampilkan nama, email, role, dan izin akun; logout dilakukan melalui tombol khusus.

## 🚀 Deployment

### Production Checklist
- [ ] Verify `/mobile-app` route in server.js
- [ ] Test manifest.json loading
- [ ] Verify API endpoints (/api/auth/*, /api/files)
- [ ] Test offline behavior (service worker optional)
- [ ] Verify SSL/HTTPS (for PWA)
- [ ] Test on real devices (iOS + Android)

### PWA Installation
App dapat diinstal sebagai PWA (Progressive Web App):
1. Buka di mobile browser
2. Tap "Add to Home Screen" / "Install App"
3. App akan berjalan fullscreen seperti native app

**Manifest file**: `/public/manifest.json`

## 🔗 File Struktur
```
public/
├── mobile-app.html       # Main mobile app
├── login.html            # Desktop login (legacy)
├── dashboard.html        # Desktop dashboard (legacy)
├── index.html            # Landing page (with mobile redirect)
├── manifest.json         # PWA manifest
├── style.css             # Shared styles
└── landing.css           # Landing page styles

server.js                  # Express server dengan route /mobile-app
```

## 🐛 Troubleshooting

### Issue: App tidak auto-redirect ke mobile
**Solution**: Check `index.html` memiliki mobile detection script:
```javascript
const isMobile = /Android|webOS|iPhone|iPad|iPod/i.test(navigator.userAgent) || window.innerWidth < 768;
if (isMobile) window.location.href = '/mobile-app';
```

### Issue: Login gagal
**Check**:
1. Firebase Web configuration tersedia di `/api/config/firebase`
2. Provider Email/Password atau Google aktif di Firebase Authentication
3. Email telah diverifikasi dan akun telah disetujui Admin
4. Periksa pesan Firebase Authentication di browser console

### Issue: Tab navigation tidak berfungsi
**Check**:
1. Event listeners attached ke `.tab-btn`
2. `data-tab` attribute pada buttons
3. Console error messages

### Issue: Styling tidak apply
**Check**:
1. Safe area inset CSS values
2. Mobile viewport meta tag
3. Browser DevTools - Check CSS rules
4. Clear browser cache (Ctrl+Shift+Delete)

## 📝 API Endpoints Required

### Authentication
```
POST /api/auth/session
Headers: Authorization Bearer <token>
Response: { user, role, permissions }

POST /api/auth/logout
Headers: Authorization Bearer <token>
```

### File Management
The mobile dashboard loads both `/api/files` and `/api/folders` using the active
Bearer token. The folder response is used for the dashboard count and grouping
files in the File tab.

```
GET /api/files
Headers: Authorization Bearer <token>
Response: [ { id, filename, size, uploadTime, ... } ]
```

## 🎯 Best Practices

### Performance
- Lazy load file previews
- Minimize HTTP requests
- Use localStorage for session token
- Avoid layout shifts (CLS)

### Security
- HTTPS only in production
- Validate tokens server-side
- Don't store sensitive data in localStorage
- CORS properly configured

### Accessibility
- Proper ARIA labels
- Semantic HTML
- Color contrast (WCAG AA)
- Keyboard navigation support

## 📞 Support
Untuk bug report atau feature request, hubungi tim development.

---
**Last Updated**: 6 Oktober 2026  
**Version**: 1.0.0