# GLOBAL CSS UTILITIES - Responsive Layout Indonesia
**AUTHOR**: Rodhi  
**DATE**: 2026-01-19  
**FILE**: `frontend/src/css/app.scss`

## 📋 OVERVIEW
CSS global utilities untuk responsive layout yang konsisten di seluruh aplikasi, dengan fokus pada format Indonesia dan user experience yang optimal.

## 🎯 LOKASI FILE GLOBAL CSS
```
frontend/src/css/app.scss
```

File ini adalah tempat yang tepat untuk CSS global karena:
- ✅ Otomatis di-import oleh Quasar
- ✅ Berlaku untuk semua komponen
- ✅ Mendukung SCSS syntax
- ✅ Hot reload saat development

## 📱 RESPONSIVE BREAKPOINTS

### Desktop (≥1024px)
```scss
@media (min-width: 1024px) {
  .row > .col-md-3 {
    height: auto !important;
    width: 23.5% !important;
  }
}
```

### Tablet (768px - 1023px)
```scss
@media (min-width: 768px) and (max-width: 1023px) {
  .row > .col-md-3 {
    width: 48% !important;
    margin-bottom: 16px;
  }
}
```

### Mobile (≤767px)
```scss
@media (max-width: 767px) {
  .row > .col-md-3,
  .row > .col-md-4,
  .row > .col-md-6 {
    width: 100% !important;
    margin-bottom: 16px;
  }
}
```

## 🎨 UTILITY CLASSES

### Layout Utilities
```scss
.full-width          // width: 100%
.flex-center         // Flex center alignment
.text-ellipsis       // Text overflow ellipsis
```

### Indonesian Formatting
```scss
.number-id           // Tabular numbers, right-aligned
.currency-id         // Currency formatting, bold
```

### Statistics Cards
```scss
.stats-card          // Hover effects for stats cards
.stats-cards         // Container for stats cards
```

## 🔧 PENGGUNAAN DI KOMPONEN

### 1. Statistics Cards Layout
```vue
<template>
  <div class="stats-cards">
    <div class="row q-gutter-md">
      <div class="col-12 col-md-3">
        <q-card class="stats-card">
          <q-card-section>
            <div class="currency-id">{{ formatCurrency(total) }}</div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>
```

### 2. Form Layout
```vue
<template>
  <div class="form-row">
    <div class="row q-gutter-md">
      <div class="col-12 col-md-3">
        <q-select />
      </div>
      <div class="col-12 col-md-3">
        <q-input />
      </div>
    </div>
  </div>
</template>
```

### 3. Number Formatting
```vue
<template>
  <div class="number-id">{{ formatNumber(1500000.50, 2) }}</div>
  <div class="currency-id">{{ formatCurrency(1500000.50) }}</div>
</template>
```

## 📊 RESPONSIVE BEHAVIOR

### Desktop (≥1024px)
- Statistics cards: 4 kolom (23.5% width each)
- Form fields: Sesuai col-md-* classes
- Tables: Full width dengan scroll horizontal

### Tablet (768px-1023px)
- Statistics cards: 2 kolom (48% width each)
- Form fields: 2 kolom atau full width
- Tables: Responsive dengan font size normal

### Mobile (≤767px)
- Statistics cards: 1 kolom (100% width)
- Form fields: 1 kolom (100% width)
- Tables: Compact dengan font size 14px
- Padding reduced untuk space efficiency

## 🌙 DARK MODE SUPPORT

Semua utility classes mendukung dark mode:
```scss
.body--dark {
  .stats-card:hover {
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
  }
  
  .number-id,
  .currency-id {
    color: #ffffff !important;
  }
}
```

## 🎯 KOMPONEN YANG MENGGUNAKAN

### ✅ Sudah Menggunakan
- `DataFuelPage.vue` - Statistics cards layout
- `TotalKmPage.vue` - Statistics cards layout
- `OverSpeedPage.vue` - Statistics cards layout
- `AddFuelPage.vue` - Form layout
- `AddGeofencePage.vue` - Form layout

### 📝 Cara Menerapkan di Komponen Baru
1. Gunakan class `stats-cards` untuk container statistics
2. Gunakan class `form-row` untuk form layout
3. Gunakan class `number-id` atau `currency-id` untuk formatting
4. Gunakan class `stats-card` untuk hover effects

## 🔧 CUSTOMIZATION

### Menambah Breakpoint Baru
```scss
@media (min-width: 1440px) {
  .row > .col-xl-2 {
    width: 16.66% !important;
  }
}
```

### Menambah Utility Class Baru
```scss
.text-center-mobile {
  @media (max-width: 767px) {
    text-align: center !important;
  }
}
```

## 📱 TESTING RESPONSIVE

### Manual Testing
1. **Desktop**: Resize browser ke ≥1024px
2. **Tablet**: Resize browser ke 768px-1023px  
3. **Mobile**: Resize browser ke ≤767px
4. **Chrome DevTools**: Test dengan device presets

### Test URLs
- http://localhost:5173/data-fuel
- http://localhost:5173/add-fuel
- http://localhost:5173/total-km
- http://localhost:5173/over-speed

## 🎨 BEST PRACTICES

### 1. Konsistensi Layout
```vue
<!-- ✅ Good -->
<div class="stats-cards">
  <div class="row q-gutter-md">
    <div class="col-12 col-md-3">
      <q-card class="stats-card">
        <!-- content -->
      </q-card>
    </div>
  </div>
</div>

<!-- ❌ Avoid -->
<div class="row">
  <div class="col-3">
    <q-card>
      <!-- content -->
    </q-card>
  </div>
</div>
```

### 2. Indonesian Number Formatting
```vue
<!-- ✅ Good -->
<div class="currency-id">{{ formatCurrency(value) }}</div>
<div class="number-id">{{ formatNumber(value, 2) }}</div>

<!-- ❌ Avoid -->
<div>Rp {{ value.toLocaleString() }}</div>
```

### 3. Responsive Design
```vue
<!-- ✅ Good -->
<div class="col-12 col-md-3">
  <!-- Responsive dari mobile ke desktop -->
</div>

<!-- ❌ Avoid -->
<div class="col-3">
  <!-- Tidak responsive -->
</div>
```

## 🔍 TROUBLESHOOTING

### Issue: Layout tidak responsive
**Solution**: Pastikan menggunakan `col-12 col-md-*` pattern

### Issue: Statistics cards tidak rata
**Solution**: Gunakan container `stats-cards` dan `row q-gutter-md`

### Issue: Dark mode tidak bekerja
**Solution**: Pastikan parent element memiliki class `body--dark`

## 📝 CHANGELOG

### 2026-01-19
- ✅ Added responsive utilities untuk desktop, tablet, mobile
- ✅ Added Indonesian formatting utilities
- ✅ Added statistics cards styling
- ✅ Added dark mode support
- ✅ Added form layout utilities

---

**LOCATION**: `frontend/src/css/app.scss` (Global CSS file)  
**USAGE**: Otomatis tersedia di semua komponen Vue  
**MAINTENANCE**: Update file ini untuk CSS global baru