# Tank Visualization - Realtime Monitor

## 📊 Deskripsi
Halaman visualisasi tangki timbun secara realtime dengan tampilan grafis yang interaktif. Setiap tangki ditampilkan dengan level cairan yang menyesuaikan data aktual dari database ATG (Automatic Tank Gauge).

## ✨ Fitur Utama

### 1. Visualisasi Tangki 3D
- **Tampilan Grafis Tangki**: Setiap tangki ditampilkan sebagai wadah vertikal dengan level cairan
- **Animasi Level**: Cairan bergerak smooth saat data berubah (transition 1 detik)
- **Wave Effect**: Efek gelombang di permukaan cairan untuk efek realistis
- **Color Coding**: Warna cairan sesuai dengan jenis produk:
  - 🟡 **Pertalite**: Gold/Kuning (#FFD700)
  - ⚫ **BioSolar B40**: Abu-abu (#808080)
  - 🔵 **Pertamax**: Biru (#0000FF)
  - ⚫ **Avtur**: Hitam (#000000)
  - 🔴 **Dex/Dexlite**: Merah (#FF0000)
  - 🟢 **Default**: Hijau (#00a65a)

### 2. Informasi Real-time per Tangki
- **Tank ID**: Nomor identifikasi tangki
- **Status**: 
  - ⬆️ **Receive**: Tangki sedang menerima produk (hijau)
  - ⬇️ **Sale**: Tangki sedang mengeluarkan produk (kuning)
  - ➖ **Idle**: Tangki tidak ada aktivitas (abu-abu)
  - 🔧 **Cleaning**: Tangki sedang dibersihkan (merah)
- **Product**: Nama produk dalam tangki
- **Volume**: Volume cairan dalam Liter
- **Level**: Level aktual vs maksimum (dengan warna indikator)
  - 🟢 Hijau: < 75%
  - 🟡 Kuning: 75-90%
  - 🔴 Merah: > 90%
- **Temperature**: Suhu produk (°C)
- **Density**: Densitas produk

### 3. Persentase Level
- Ditampilkan di tengah tangki dengan badge putih
- Update otomatis sesuai data aktual
- Format: XX.X%

### 4. Alert System
- **High Level Warning**: Tangki dengan level ≥90% akan beranimasi pulse (kedip-kedip)
- **Visual Indicator**: Badge level berubah warna sesuai threshold

### 5. Auto Refresh
- ⏰ Refresh otomatis setiap **30 detik**
- 🔄 Tombol refresh manual tersedia
- 🕐 Timestamp "Last Update" di header

## 🗂️ Struktur File

```
rwl/
├── module/
│   └── report/
│       ├── atg_view_table.php      # Tabel view (sudah ada)
│       └── atg_view_visual.php     # Visualisasi grafik (BARU)
├── media.php                        # Sidebar menu (updated)
└── content.php                      # Router (updated)
```

## 🔗 Akses Halaman

### Via Menu Sidebar
1. Login ke dashboard RWL
2. Buka menu **"ATG Monitor"**
3. Klik **"View Grafik"** (dengan ikon pompa bensin hijau)

### Via URL Langsung
```
http://localhost/dsp-report/rwl/media.php?module=atg_view_visual
```

Untuk hosting:
```
https://dsp-report.web.id/rwl/media.php?module=atg_view_visual
```

## 📊 Sumber Data

### Query Database
Menggunakan query yang sama dengan halaman tabel (`atg_view_table.php`):

```sql
WITH LatestData AS (
    SELECT Point_Tag, Product_Code, Tank_Level, 
           CAST(Temperature AS DECIMAL(16,0)) as Temperature,
           STR(Density, 25, 3) as Density, 
           CAST(Volume_Net AS DECIMAL(16,0)) as Volume_Net, 
           time_stamp
    FROM ATG.dbo.fm_tank_dataSynchronization 
    WHERE time_stamp = (SELECT MAX(time_stamp) 
                       FROM ATG.dbo.fm_tank_dataSynchronization 
                       WHERE CONVERT(date,time_stamp) = CONVERT(date, getdate()))
),
PreviousData AS (
    SELECT Point_Tag, Tank_Level as Previous_Tank_Level
    FROM (
        SELECT Point_Tag, Tank_Level,
               ROW_NUMBER() OVER (PARTITION BY Point_Tag ORDER BY Time_Stamp DESC) as rn
        FROM ATG.dbo.fm_tank_dataSynchronization
    ) ranked
    WHERE rn = 5
)
SELECT a.Point_Tag, a.Product_Code, a.Tank_Level, a.Temperature,
       a.Density, a.Volume_Net, a.time_stamp, b.max_level,
       ISNULL(p.Previous_Tank_Level, a.Tank_Level) as Previous_Tank_Level
FROM LatestData a 
INNER JOIN ATG.dbo.tank_description b ON b.Point_Tag = a.Point_Tag
LEFT JOIN PreviousData p ON p.Point_Tag = a.Point_Tag
ORDER BY a.Point_Tag
```

### Database Connection
- **Database**: ATG (SQL Server)
- **Server**: 103.133.223.212 (RWL)
- **Tables Used**:
  - `ATG.dbo.fm_tank_dataSynchronization` - Data real-time tangki
  - `ATG.dbo.tank_description` - Deskripsi dan kapasitas tangki

## 🎨 Design & Layout

### Grid System
- Responsive grid layout dengan auto-fit
- Minimum width: 250px per tangki
- Gap antar tangki: 20px
- Otomatis menyesuaikan jumlah kolom berdasarkan lebar layar

### Responsive Breakpoints
- **Desktop** (>768px): Multi-kolom grid
- **Tablet** (768px): Grid dengan width 200px
- **Mobile** (<576px): Single column (1 tangki per baris)

### Visual Elements
1. **Tank Container**:
   - Border radius: 10px
   - Box shadow untuk efek 3D
   - Hover effect: Naik 5px dengan shadow lebih besar

2. **Tank Outline**:
   - Width: 120px
   - Height: 200px
   - Border: 3px solid
   - Gradient background untuk efek kedalaman

3. **Liquid Animation**:
   - Smooth transition: 1s ease-in-out
   - Wave animation: 3s infinite
   - Box shadow inset untuk efek kedalaman cairan

## 🔧 Teknologi

### Frontend
- **HTML5**: Struktur markup
- **CSS3**: Styling dan animasi
  - CSS Grid Layout
  - Flexbox
  - CSS Animations (keyframes)
  - Media Queries
- **JavaScript**: Interaktivitas
  - Auto-refresh timer
  - Timestamp update
  - Loading overlay
  - DOM manipulation

### Backend
- **PHP 8.2**: Server-side processing
- **SQL Server**: Database queries via sqlsrv extension

### Libraries/Frameworks
- **AdminLTE 3**: Dashboard template
- **Bootstrap 4**: CSS framework
- **Font Awesome 5**: Icons

## 📱 Fitur Responsif

### Mobile Optimization
- Single column layout di layar kecil
- Touch-friendly button sizes
- Readable font sizes
- Optimized tank visualization size

### Performance
- Efficient CSS animations (GPU-accelerated)
- Minimal JavaScript overhead
- Optimized SQL query dengan CTE
- Auto-cleanup untuk prevent memory leaks

## 🚀 Cara Penggunaan

### 1. Monitoring Normal
- Buka halaman View Grafik
- Lihat semua tangki dalam satu layar
- Monitor level, status, dan informasi lainnya

### 2. Manual Refresh
- Klik tombol "Refresh" di header
- Data akan di-refresh dengan loading overlay

### 3. Auto Monitoring
- Biarkan halaman terbuka
- Sistem akan auto-refresh setiap 30 detik
- Timestamp akan update setiap detik

### 4. Alert Monitoring
- Perhatikan tangki yang berkedip (level tinggi)
- Badge merah menandakan level >90%
- Badge kuning untuk level 75-90%

## ⚙️ Konfigurasi

### Ubah Interval Auto-Refresh
Edit di `atg_view_visual.php`:
```javascript
// Default: 30 detik (30000 ms)
setInterval(() => {
    refreshVisualization();
}, 30000); // Ubah angka ini
```

### Ubah Threshold Alert
Edit di bagian PHP:
```php
// Level tinggi
if ($percentage >= 90) {
    $levelColor = 'danger';
} elseif ($percentage >= 75) {
    $levelColor = 'warning';
}
```

### Ubah Warna Produk
Edit di bagian color mapping:
```php
if (strpos($product, 'pertalite') !== false) {
    $color = '#FFD700'; // Ubah warna di sini
}
```

## 🐛 Troubleshooting

### Tangki Tidak Muncul
- Cek koneksi database SQL Server
- Pastikan query berhasil dijalankan
- Cek error log PHP

### Data Tidak Update
- Refresh manual
- Cek timestamp "Last Update"
- Pastikan auto-refresh timer berjalan (cek console)

### Layout Berantakan
- Clear browser cache
- Cek responsive breakpoint
- Pastikan CSS ter-load dengan benar

### Animasi Tidak Jalan
- Pastikan browser support CSS3 animations
- Cek console untuk JavaScript errors
- Disable browser extensions yang block animations

## 📈 Future Enhancements

Fitur yang bisa ditambahkan di masa depan:
- [ ] Export data ke PDF/Excel
- [ ] Historical chart per tangki (line graph)
- [ ] Notification system untuk level critical
- [ ] Filter tangki by product
- [ ] Search/filter functionality
- [ ] Dark mode toggle
- [ ] Sound alert untuk level tinggi
- [ ] Comparison view (side-by-side dates)

## 📝 Changelog

### Version 1.0.0 (29 Oktober 2025)
- ✅ Initial release
- ✅ Visualisasi tangki dengan liquid animation
- ✅ Real-time data display
- ✅ Auto-refresh setiap 30 detik
- ✅ Responsive design
- ✅ Status indicators
- ✅ High level alert animation
- ✅ Color coding by product type

## 👨‍💻 Developer Notes

### Code Structure
File dibuat dengan struktur:
1. **PHP Section**: Query data dan loop untuk generate HTML
2. **HTML Section**: Struktur markup untuk setiap tangki
3. **CSS Section**: Styling dan animations
4. **JavaScript Section**: Interactivity dan auto-refresh

### Best Practices Applied
- ✅ SQL injection prevention (menggunakan prepared statements jika diperlukan)
- ✅ XSS prevention (htmlspecialchars untuk output)
- ✅ Responsive design
- ✅ Progressive enhancement
- ✅ Clean code structure
- ✅ Comments untuk maintainability

### Testing Checklist
- [ ] Test di Chrome/Edge
- [ ] Test di Firefox
- [ ] Test di Safari
- [ ] Test di mobile devices
- [ ] Test auto-refresh functionality
- [ ] Test manual refresh
- [ ] Test dengan data kosong
- [ ] Test dengan banyak tangki (>10)
- [ ] Test responsiveness
- [ ] Test animations

## 📞 Support

Jika ada pertanyaan atau issue:
1. Cek dokumentasi ini terlebih dahulu
2. Cek error log di browser console (F12)
3. Cek PHP error log di server
4. Hubungi developer system

---

**Created**: 29 Oktober 2025  
**Last Updated**: 29 Oktober 2025  
**Version**: 1.0.0  
**Module**: RWL - ATG Monitor - View Grafik
