# 👁️ Hide N/A Fields Update

**Tanggal:** 20/01/2026  
**Status:** ✅ IMPLEMENTED  
**Author:** Rodhi

## 📝 Request

User meminta untuk menyembunyikan field yang menampilkan 'N/A' di CustomerAssetPage.vue:

> "jika hasilnya 'N/A' sembunyikan"

## ✅ Implementation

### Before (Menampilkan 'N/A'):
```vue
<div>Tahun: {{ vehicle.tahun || 'N/A' }}</div>
<div class="row items-center q-mt-xs">
  <span>Muatan: {{ vehicle.muatan || 'N/A' }}</span>
</div>
<div>Arah: {{ vehicle.Arah || 'N/A' }}</div>
```

### After (Sembunyikan jika N/A):
```vue
<div v-if="vehicle.tahun && vehicle.tahun !== '' && vehicle.tahun !== 'N/A'">
  Tahun: {{ vehicle.tahun }}
</div>

<div v-if="vehicle.muatan && vehicle.muatan !== '' && vehicle.muatan !== 'N/A'" 
     class="row items-center q-mt-xs">
  <span>Muatan: {{ vehicle.muatan }}</span>
  <div v-if="vehicle.warna" class="q-ml-sm" :style="colorStyle"></div>
</div>

<div v-if="vehicle.Arah && vehicle.Arah !== '' && vehicle.Arah !== 'N/A'">
  Arah: {{ vehicle.Arah }}
</div>
```

## 🔧 Conditional Logic

### Kondisi untuk Menampilkan Field:
```javascript
v-if="vehicle.fieldName && vehicle.fieldName !== '' && vehicle.fieldName !== 'N/A'"
```

### Penjelasan:
- `vehicle.fieldName` - Field exists dan truthy (bukan null/undefined)
- `!== ''` - Bukan string kosong
- `!== 'N/A'` - Bukan placeholder value 'N/A'

## 📊 Field Categories

### Field yang Selalu Tampil (Required):
- ✅ **License** - Nomor plat (selalu ada)
- ✅ **StatusMesin** - Status mesin (selalu ada)
- ✅ **jenis** - Jenis kendaraan (tetap tampil meski kosong)
- ✅ **groups** - Driver/Group (tetap tampil meski kosong)
- ✅ **Waktu** - Waktu GPS (selalu ada)
- ✅ **Kecepatan** - Kecepatan (selalu ada, bisa 0)

### Field yang Conditional (Optional):
- 👁️ **Tahun** - Tahun kendaraan (hide jika kosong/N/A)
- 👁️ **Muatan** - Jenis muatan (hide jika kosong/N/A)
- 👁️ **Arah** - Arah mata angin (hide jika kosong/N/A)

## 🎯 Benefits

| Benefit | Description |
|---------|-------------|
| **Cleaner UI** | Tidak ada lagi teks "N/A" yang mengotori interface |
| **Space Efficiency** | Cards menggunakan ruang vertikal lebih sedikit |
| **Better UX** | User hanya melihat informasi yang relevan |
| **Professional Look** | Interface terlihat lebih rapi dan profesional |

## 🧪 Test Scenarios

### Scenario 1: Vehicle dengan Data Lengkap
- **tahun:** "2011" → **Display:** "Tahun: 2011"
- **muatan:** "Batubara" → **Display:** "Muatan: Batubara" + color box
- **Arah:** "Timur" → **Display:** "Arah: Timur"

### Scenario 2: Vehicle dengan Data Kosong
- **tahun:** "" atau null → **Display:** Field tidak tampil
- **muatan:** "" atau null → **Display:** Field tidak tampil
- **Arah:** "" atau null → **Display:** Field tidak tampil

### Scenario 3: Mixed Data
- Vehicle A: tahun="2015", muatan="", Arah="Utara" → Show: Tahun, Arah | Hide: Muatan
- Vehicle B: tahun="", muatan="CPO", Arah="" → Show: Muatan | Hide: Tahun, Arah
- Vehicle C: tahun="", muatan="", Arah="" → Hide: All optional fields

## 🚀 Testing

1. **Login:** http://localhost:5173/login (dayansgi/dayansgi123)
2. **Navigate:** http://localhost:5173/asset
3. **Verify:** 
   - No "N/A" text visible
   - Different cards show different fields
   - Cards with complete data show more fields
   - Cards with missing data show fewer fields

## ✅ Status

**IMPLEMENTED - READY FOR TESTING**

Field dengan nilai 'N/A' sekarang disembunyikan untuk UI yang lebih bersih dan profesional.