# 📱 User Cards - Quick Status Change

Untuk user biasa, 4 cards stats berfungsi sebagai tombol untuk mengubah status kehadiran mereka.

---

## 🎯 Cara Kerja

### User Biasa (Non-Admin):

**Tampilan:**
```
┌─────────────┬─────────────┐
│      ✓      │             │
│    HADIR    │    CUTI     │
├─────────────┼─────────────┤
│             │             │
│ TUGAS LUAR  │ TIDAK HADIR │
└─────────────┴─────────────┘
```

**Fungsi:**
- ✓ = Status aktif saat ini
- Tap card untuk ubah ke status tersebut
- Card aktif: Highlight biru + scale 1.05
- Card tidak aktif: Normal + scale 1.0

**Interaksi:**
1. User tap card "CUTI"
2. Loading state (opacity 0.5)
3. API call update status
4. Toast notification "Status diubah ke CUTI"
5. Card "CUTI" sekarang highlight dengan ✓
6. Auto-refresh data

---

## 🎨 Visual States

### Card Colors (Individual):
- Card 1 (HADIR): Green gradient `rgba(16, 185, 129, 0.15)`
- Card 2 (CUTI): Yellow gradient `rgba(245, 158, 11, 0.15)`
- Card 3 (TUGAS LUAR): Cyan gradient `rgba(23, 162, 184, 0.15)`
- Card 4 (TIDAK HADIR): Red gradient `rgba(239, 68, 68, 0.15)`

### Active Card (Status Saat Ini):
- Background: `linear-gradient(135deg, rgba(47, 107, 255, 0.3), rgba(47, 107, 255, 0.15))`
- Border: `2px solid rgba(47, 107, 255, 0.6)`
- Transform: `scale(1.05)`
- Box-shadow: `0 8px 20px rgba(47, 107, 255, 0.4)`
- Content: `✓` (checkmark)

### Inactive Card:
- Background: Individual gradient color
- Border: `1px solid rgba(color, 0.2)`
- Transform: `scale(1.0)`
- Content: `` (empty)

### Hover State (Desktop):
- Transform: `translateY(-2px)`
- Box-shadow: `0 8px 16px rgba(0, 0, 0, 0.3)`

### Loading State:
- Opacity: `0.5`

---

## 💻 Code Logic

```javascript
// For non-admin users
if (currentUser && !isAdmin && userPositionIndex >= 0) {
    // Show checkmark on active status FIRST
    document.getElementById('stat-present').textContent = 
        userStatus === STATUS.PRESENT ? '✓' : '';
    document.getElementById('stat-cuti').textContent = 
        userStatus === STATUS.CUTI ? '✓' : '';
    document.getElementById('stat-tugas').textContent = 
        userStatus === STATUS.TUGAS_LUAR ? '✓' : '';
    document.getElementById('stat-absent').textContent = 
        userStatus === STATUS.ABSENT ? '✓' : '';
    
    // Make cards clickable
    statCards.forEach((card, index) => {
        card.style.cursor = 'pointer';
        
        // Determine status for this card
        let cardStatus;
        if (index === 0) cardStatus = STATUS.PRESENT;      // HADIR
        else if (index === 1) cardStatus = STATUS.CUTI;    // CUTI
        else if (index === 2) cardStatus = STATUS.TUGAS_LUAR; // TUGAS LUAR
        else cardStatus = STATUS.ABSENT;                   // TIDAK HADIR
        
        // Add/remove active class
        if (cardStatus === userStatus) {
            card.classList.add('active');
        } else {
            card.classList.remove('active');
        }
        
        // Add click handler
        newCard.addEventListener('click', async () => {
            if (isUpdating) return;
            
            // Don't do anything if already this status
            if (cardStatus === userStatus) {
                showToast('Status sudah ' + getBadgeText(cardStatus), 'info');
                return;
            }
            
            isUpdating = true;
            newCard.style.opacity = '0.5';
            
            const success = await updateAttendanceAPI(positionId, cardStatus);
            
            if (success) {
                showToast('Status diubah ke ' + getBadgeText(cardStatus), 'success');
                await loadDataFromAPI();
                renderAttendanceList();
            } else {
                showToast('Gagal mengubah status', 'error');
                newCard.style.opacity = '1';
            }
            
            isUpdating = false;
        });
    });
}
```

---

## 📋 Card Mapping

| Index | Status | Label | Color |
|-------|--------|-------|-------|
| 0 | `present` | HADIR | Green (#6ee7b7) |
| 1 | `cuti` | CUTI | Yellow (#fcd34d) |
| 2 | `tugas_luar` | TUGAS LUAR | Cyan (#4dd4e8) |
| 3 | `absent` | TIDAK HADIR | Red (#fca5a5) |

---

## 🔄 Status Change Flow

```
User taps card
    ↓
Check if already this status
    ├─→ Yes: Show toast "Status sudah X"
    └─→ No: Continue
        ↓
    Set loading state (opacity 0.5)
        ↓
    API call updateAttendanceAPI()
        ↓
    Success?
        ├─→ Yes: 
        │   ├─ Show toast "Status diubah ke X"
        │   ├─ Reload data
        │   └─ Re-render (highlight new card)
        └─→ No:
            ├─ Show toast "Gagal mengubah status"
            └─ Restore card state
```

---

## 🎯 Benefits

✅ **Quick Access**: 1 tap untuk ubah status  
✅ **Visual Feedback**: Jelas status mana yang aktif  
✅ **No Scrolling**: Semua opsi terlihat  
✅ **Touch Friendly**: Large tap targets  
✅ **Intuitive**: Tidak perlu cycle berkali-kali  

---

## 🧪 Testing

### Test User View:

1. **Login sebagai user**
   ```
   Username: kepala
   Password: password
   ```

2. **Verify cards:**
   - ✅ 4 cards terlihat
   - ✅ 1 card highlight dengan ✓
   - ✅ Cards lain normal

3. **Test tap card:**
   - Tap card "CUTI"
   - Verify loading state
   - Verify toast muncul
   - Verify card "CUTI" sekarang highlight
   - Verify ✓ pindah ke card "CUTI"

4. **Test tap card yang sama:**
   - Tap card yang sudah aktif
   - Verify toast "Status sudah X"
   - Verify tidak ada perubahan

---

## 📱 Admin vs User

### Admin View:
- Cards menampilkan angka total
- Cards tidak clickable
- List view menampilkan semua jabatan
- Bisa edit semua status via list

### User View:
- Cards menampilkan ✓ pada status aktif
- Cards clickable untuk ubah status
- List view TETAP DITAMPILKAN di bawah cards
- User bisa lihat status semua pejabat
- Hanya badge status sendiri yang clickable di list

---

## 🔧 Customization

### Change Card Order:

Edit `app-mobile.js`:
```javascript
// Change mapping
if (index === 0) cardStatus = STATUS.ABSENT;      // Card 1: TIDAK HADIR
else if (index === 1) cardStatus = STATUS.PRESENT; // Card 2: HADIR
// ... etc
```

### Disable Card Click:

```javascript
if (!isAdmin && someCondition) {
    card.style.cursor = 'not-allowed';
    card.style.opacity = '0.5';
    // Don't add click handler
}
```

---

**Version:** 1.1.0  
**Date:** 19 Feb 2026  
**Status:** ✅ Active  
**Changes:** Added individual card colors, attendance list now visible for all users
