# 🔔 NOTIFICATION STANDARDS

## 📋 STANDAR NOTIFIKASI UNTUK SEMUA KOMPONEN

### 🎯 ATURAN WAJIB (SELALU DIINGAT)

#### ✅ POSISI: SELALU `top`
```javascript
position: 'top'  // WAJIB untuk semua notifikasi
```

#### ✅ TIMEOUT: Sesuai Jenis
```javascript
timeout: 3000  // Success notifications (3 detik)
timeout: 4000  // Error notifications (4 detik)  
timeout: 2000  // Info notifications (2 detik)
```

#### ✅ CLOSE BUTTON: Selalu Ada
```javascript
actions: [
  {
    icon: 'close',
    color: 'white',
    round: true,
    handler: () => {}
  }
]
```

## 🎨 TEMPLATE STANDAR

### ✅ Success Notification (Hijau)
```javascript
$q.notify({
  type: 'positive',
  message: 'Operasi berhasil',
  position: 'top',
  timeout: 3000,
  actions: [
    {
      icon: 'close',
      color: 'white',
      round: true,
      handler: () => {}
    }
  ]
})
```

### ❌ Error Notification (Merah)
```javascript
$q.notify({
  type: 'negative',
  message: 'Terjadi kesalahan',
  position: 'top',
  timeout: 4000,
  actions: [
    {
      icon: 'close',
      color: 'white',
      round: true,
      handler: () => {}
    }
  ]
})
```

### ℹ️ Info Notification (Biru)
```javascript
$q.notify({
  type: 'info',
  message: 'Informasi penting',
  position: 'top',
  timeout: 2000
})
```

## 📱 IMPLEMENTASI SAAT INI

### ✅ Komponen yang Sudah Diupdate:

#### 1. **LoginPage.vue**
- ✅ Success: `position: 'top'`
- ✅ Error: `position: 'top'`
- ✅ Info: `position: 'top'`

#### 2. **LoginPageSimple.vue**
- ✅ Success: `position: 'top'`
- ✅ Error: `position: 'top'`
- ✅ Info: `position: 'top'`

#### 3. **MainLayout.vue**
- ✅ Logout: `position: 'top'`
- ✅ Dark Mode: `position: 'top'`

#### 4. **ChangePasswordPage.vue**
- ✅ Success: `position: 'top'`
- ✅ Error: `position: 'top'`

#### 5. **AddFuelPage.vue**
- ✅ Success: `position: 'top'`
- ✅ Error: `position: 'top'`

#### 6. **AddGeofencePage.vue**
- ✅ Success: `position: 'top'`
- ✅ Error: `position: 'top'`

### ⚠️ Komponen yang Perlu Diupdate (Future):
- GeofenceManagementPage.vue
- DataPage.vue
- DataFullPage.vue
- PetaPage.vue
- PlaybackPage.vue

## 🎯 CONTOH PENGGUNAAN

### Login Success:
```javascript
$q.notify({
  type: 'positive',
  message: `Login berhasil! Selamat datang, ${username}.`,
  position: 'top',
  timeout: 3000,
  actions: [
    {
      icon: 'close',
      color: 'white',
      round: true,
      handler: () => {}
    }
  ]
})
```

### Logout Success:
```javascript
$q.notify({
  type: 'positive',
  message: 'Berhasil logout',
  position: 'top',
  timeout: 3000,
  actions: [
    {
      icon: 'close',
      color: 'white',
      round: true,
      handler: () => {}
    }
  ]
})
```

### Form Validation Error:
```javascript
$q.notify({
  type: 'negative',
  message: 'Username dan password wajib diisi',
  position: 'top',
  timeout: 4000,
  actions: [
    {
      icon: 'close',
      color: 'white',
      round: true,
      handler: () => {}
    }
  ]
})
```

## 🔍 ALASAN STANDARISASI

### 1. **Konsistensi UX**
- Semua notifikasi muncul di tempat yang sama
- User tidak bingung mencari notifikasi
- Pengalaman yang seragam di seluruh aplikasi

### 2. **Visibility**
- Posisi `top` lebih terlihat
- Tidak tertutup oleh elemen UI lain
- Mudah dibaca di semua ukuran layar

### 3. **Accessibility**
- Close button memberikan kontrol kepada user
- Timeout mencegah notifikasi menumpuk
- Konsisten dengan standar UI modern

### 4. **Mobile Friendly**
- Posisi top bekerja baik di mobile
- Tidak mengganggu navigasi bawah
- Mudah dijangkau untuk close

## 🚫 YANG TIDAK BOLEH DILAKUKAN

### ❌ Jangan Gunakan Posisi Lain:
```javascript
// JANGAN GUNAKAN INI
position: 'bottom'
position: 'center'
position: 'left'
position: 'right'
// SELALU GUNAKAN: position: 'top'
```

### ❌ Jangan Lupa Timeout:
```javascript
// JANGAN GUNAKAN INI
$q.notify({
  type: 'positive',
  message: 'Success'
  // Missing timeout - notifikasi tidak hilang otomatis
})
```

### ❌ Jangan Lupa Close Button:
```javascript
// JANGAN GUNAKAN INI untuk Success/Error
$q.notify({
  type: 'positive',
  message: 'Success',
  position: 'top',
  timeout: 3000
  // Missing actions - user tidak bisa close manual
})
```

## 📋 CHECKLIST UNTUK DEVELOPER

Sebelum commit, pastikan notifikasi memiliki:

- [ ] `position: 'top'` ✅
- [ ] `timeout: 3000` (success) atau `4000` (error) ✅
- [ ] `actions` dengan close button ✅
- [ ] `type` yang sesuai (`positive`, `negative`, `info`) ✅
- [ ] `message` yang jelas dan informatif ✅

## 🎉 MANFAAT STANDARISASI

1. **Konsistensi**: Semua notifikasi terlihat dan berperilaku sama
2. **Maintainability**: Mudah diupdate dan dipelihara
3. **User Experience**: Pengalaman yang predictable dan nyaman
4. **Professional**: Aplikasi terlihat lebih polish dan profesional
5. **Accessibility**: Mudah diakses dan dikontrol oleh user

---

**AUTHOR**: Rodhi  
**DATE**: 2026-01-19  
**STATUS**: ✅ Standards Established

🔔 **INGAT: SELALU GUNAKAN `position: 'top'` UNTUK SEMUA NOTIFIKASI!**