# Apex Dashboard Theme - Implementation Guide

## 🎨 Overview

Apex Dashboard theme telah berhasil diterapkan ke Sistem Tambak dengan integrasi lengkap:
- ✅ Modern UI/UX design
- ✅ Responsive mobile-first
- ✅ Chart.js integration
- ✅ DataTables dengan custom styling
- ✅ PWA support
- ✅ Dark/Light mode ready
- ✅ Smooth animations

## 📁 File Structure

```
resources/views/
├── layouts/
│   └── apex.blade.php              # Apex Dashboard layout utama
├── dashboard.blade.php             # Dashboard dengan charts
├── pakan/
│   └── index.blade.php             # Contoh module dengan Apex theme
└── [modules lain]                  # Update ke @extends('layouts.apex')
```

## 🎯 Fitur Utama

### 1. **Modern Sidebar Navigation**
- Fixed sidebar dengan smooth animations
- Active state indicators
- Icon untuk setiap menu
- Mobile responsive (auto hide on mobile)
- Toggle button untuk show/hide

### 2. **Statistics Cards**
- 4 stat cards di dashboard
- Icon dengan color coding
- Hover effects
- Real-time data updates
- Responsive grid layout

### 3. **Charts Integration**
- **Line Chart** untuk konsumsi pakan 7 hari terakhir
- **Bar Chart** untuk kualitas air mingguan
- Chart.js untuk rendering
- Responsive dan interaktif
- Custom color scheme

### 4. **DataTables Styling**
- Custom header dengan rounded corners
- Smooth hover effects
- Modern pagination
- Export buttons (Copy, CSV, Excel, PDF, Print)
- Indonesian language support
- Responsive design

### 5. **Modal Forms**
- Modern modal design
- Smooth slide-in animation
- Clean form layouts
- Better UX

### 6. **Alert Messages**
- Color-coded alerts
- Icon integration
- Smooth animations
- Auto-dismiss ready

## 🎨 Color Scheme

```css
Primary:    #435ebe (Blue)
Secondary:  #6c757d (Gray)
Success:    #00ca94 (Green)
Info:       #0d6efd (Light Blue)
Warning:    #ffc107 (Yellow)
Danger:     #fd7e14 (Orange)
Light:      #f9f9fd (Off-white)
Dark:       #0b1434 (Navy)
```

## 📱 Responsive Breakpoints

- **Desktop**: > 1024px (Sidebar always visible)
- **Tablet**: 768px - 1024px (Sidebar collapsible)
- **Mobile**: < 768px (Sidebar hidden by default)

## 🚀 Quick Start

### 1. Install Dependencies
```bash
composer install
```

### 2. Clear Cache
```bash
php artisan optimize:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
```

### 3. Run Server
```bash
php artisan serve --host=tambak.local --port=8000
```

### 4. Access Application
```
http://tambak.local:8000
```

## 🔄 Update Existing Views

Untuk mengubah view yang ada ke Apex theme:

### Step 1: Ubah Layout
Di bagian atas setiap file view:

**DARI:**
```blade
@extends('layouts.app_pwa')
```

**MENJADI:**
```blade
@extends('layouts.apex')
```

### Step 2: Update Stat Cards (Kalau Ada)

**DARI:**
```blade
<div class="grid grid-cols-3">
    <div class="stat-card">
        <p class="stat-label">Total</p>
        <p class="stat-value">{{ $total }}</p>
    </div>
</div>
```

**MENJADI:**
```blade
<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-icon primary">
            <!-- Icon SVG -->
        </div>
        <div class="stat-label">Total</div>
        <div class="stat-value">{{ $total }}</div>
    </div>
</div>
```

### Step 3: Update Buttons (Opsional)

Tombol sudah otomatis terstyling dengan Apex theme. Tidak perlu ubah.

## 📊 Charts Configuration

### Feed Consumption Chart (Dashboard)
```javascript
type: 'line'
data: Konsumsi pakan 7 hari terakhir
color: Primary blue (#435ebe)
```

### Water Quality Chart (Dashboard)
```javascript
type: 'bar'
data: pH dan DO mingguan
colors: Primary blue & Success green
```

### Custom Charts di Module Lain

Tambahkan ini di bagian `@push('scripts')`:

```blade
@push('scripts')
<script>
$(document).ready(function() {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line', // atau 'bar', 'pie', 'doughnut'
        data: {
            labels: ['Label 1', 'Label 2', 'Label 3'],
            datasets: [{
                label: 'Dataset 1',
                data: [{{ $data1 }}, {{ $data2 }}, {{ $data3 }}],
                borderColor: '#435ebe',
                backgroundColor: 'rgba(67, 94, 190, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
@endpush
```

## 🎯 Customization

### Ubah Color Theme

Edit `resources/views/layouts/apex.blade.php`, bagian `:root`:

```css
:root {
    --primary: #435ebe;        /* Ganti dengan warna primary */
    --success: #00ca94;        /* Ganti dengan warna success */
    --warning: #ffc107;        /* Ganti dengan warna warning */
    --danger: #fd7e14;         /* Ganti dengan warna danger */
}
```

### Ubah Sidebar Width

```css
.sidebar {
    width: 260px;  /* Ganti dengan lebar yang diinginkan */
}
```

Lalu update main-content margin:

```css
.main-content {
    margin-left: 260px;  /* Samakan dengan sidebar width */
}
```

### Tambah Menu Baru ke Sidebar

Di `layouts/apex.blade.php`, bagian sidebar-nav:

```blade
<div class="nav-section">
    <p class="nav-section-title">Menu Baru</p>
    <a href="{{ url('/module-baru') }}" class="nav-item">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <!-- Icon SVG di sini -->
        </svg>
        <span>Nama Module</span>
    </a>
</div>
```

## 🖼️ Icons

Apex theme menggunakan inline SVG untuk icons. Icon resource:
- Heroicons: https://heroicons.com/
- Feather Icons: https://feathericons.com/

Format yang digunakan:
```blade
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="..."/>
</svg>
```

## 📱 PWA Integration

Apex theme sudah terintegrasi dengan PWA:
- Service worker registration
- Offline detection
- Install prompt
- App shortcuts

Untuk menonaktifkan PWA, comment out bagian ini di layout:
```blade
<!-- Comment ini -->
<!-- <script>
    if ('serviceWorker' in navigator) {
        // ...
    }
</script> -->
```

## 🧪 Testing

### Test Responsive Design
1. Buka browser DevTools (F12)
2. Klik "Toggle device toolbar" (Ctrl + Shift + M)
3. Test di berbagai ukuran:
   - Mobile: 375px, 414px
   - Tablet: 768px, 1024px
   - Desktop: 1920px

### Test Charts
1. Buka dashboard
2. Pastikan charts muncul
3. Hover untuk melihat tooltips
4. Test responsive

### Test DataTables
1. Buka module apa saja (pakan, cek-anco, dll)
2. Test search
3. Test sorting
4. Test pagination
5. Test export buttons

### Test PWA
1. Buka DevTools → Application
2. Cek Manifest loaded
3. Cek Service Worker registered
4. Test offline mode

## 🐛 Troubleshooting

### Charts Tidak Muncul

**Problem:** Charts tidak terlihat

**Solution:**
- Pastikan Chart.js terload: cek console untuk error
- Pastikan canvas element ada di DOM
- Cek apakah data tersedia di controller

### DataTables Styling Berantakan

**Problem:** DataTables tidak sesuai dengan Apex theme

**Solution:**
- Clear browser cache
- Clear Laravel cache: `php artisan view:clear`
- Pastikan menggunakan `@extends('layouts.apex')`

### Sidebar Tidak Toggle di Mobile

**Problem:** Sidebar tidak bisa di-show/hide di mobile

**Solution:**
- Cek JavaScript console untuk error
- Pastikan jQuery terload
- Test sidebar toggle button

### Stat Cards Tidak Responsive

**Problem:** Stat cards tidak wrap dengan benar di mobile

**Solution:**
- Pastikan menggunakan `stat-grid` class, bukan `grid grid-cols-3`
- Cek CSS media queries

## 📚 Resources

### Documentation
- Chart.js: https://www.chartjs.org/docs/
- DataTables: https://datatables.net/
- Laravel 12: https://laravel.com/docs/12.x

### Templates & Examples
Lihat file yang sudah diupdate:
- `resources/views/layouts/apex.blade.php` - Layout utama
- `resources/views/dashboard.blade.php` - Dashboard dengan charts
- `resources/views/pakan/index.blade.php` - Contoh module

## 🔄 Migration Checklist

Untuk meng-update semua views ke Apex theme:

- [ ] Update `layouts.apex.blade.php` ✅ (Sudah)
- [ ] Update `dashboard.blade.php` ✅ (Sudah)
- [ ] Update `pakan/index.blade.php` ✅ (Sudah)
- [ ] Update `cek-anco/index.blade.php`
- [ ] Update `cek-air/index.blade.php`
- [ ] Update `sampling/index.blade.php`
- [ ] Update `kematian/index.blade.php`
- [ ] Update `panen/index.blade.php`

## 🎨 Next Enhancements

### Fitur yang Bisa Ditambahkan:
1. **Dark Mode Toggle** - Switch between light/dark themes
2. **More Charts** - Pie charts untuk distribusi
3. **Real-time Updates** - WebSocket untuk live data
4. **Advanced Filters** - Date range, custom filters
5. **Export Customization** - Custom export templates
6. **Notifications** - In-app notifications
7. **Advanced Analytics** - More comprehensive charts

## 🚀 Performance Tips

1. **Minify CSS/JS** - Production only
2. **Lazy Load Charts** - Load charts saat scroll
3. **Optimize Images** - Compress images
4. **Cache Queries** - Cache database queries
5. **CDN for Static Assets** - Use CDN for production

## 📞 Support

Kalau ada masalah:
1. Cek browser console untuk JavaScript errors
2. Cek Laravel logs: `storage/logs/laravel.log`
3. Clear cache: `php artisan optimize:clear`
4. Test di browser lain (Chrome, Firefox, Edge)

---

**Version:** 1.0
**Last Updated:** 2024
**Status:** Production Ready ✅