# PWA & DataTables Installation Checklist

## Step-by-Step Installation Guide

### 1. Install DataTables Package
```bash
cd C:\laragon\www\cek\dok_tambak\TAMBAK\TRANSAKSI\laravel-tambak
composer require yajra/laravel-datatables-oracle
```

### 2. Publish DataTables Provider
```bash
php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"
```

### 3. Clear Application Cache
```bash
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
```

### 4. Create PWA Icons
Create the following icon files and place them in `public/` folder:

**Required Icons:**
- `icon-192.png` - 192x192 pixels (for PWA)
- `icon-512.png` - 512x512 pixels (for PWA)
- `favicon-16.png` - 16x16 pixels (for browser tab)
- `favicon-32.png` - 32x32 pixels (for browser tab)

**Icon Design Tips:**
- Use a simple shrimp/fishing-related icon
- Background color: #2563eb (blue) or transparent
- Keep it simple and recognizable at small sizes
- Use PNG format with transparency

**Temporary Solution:**
If you don't have icons yet, the app will still work but show default browser icons.

### 5. Run Database Migrations (if not already done)
```bash
php artisan migrate
```

### 6. Seed RBAC Permissions (if not already done)
```bash
php artisan db:seed --class=RBACSeeder
```

### 7. Start Development Server
```bash
php artisan serve
```

### 8. Test the Application

#### Test 1: Basic Functionality
1. Open browser to: `http://localhost:8000`
2. Login with your credentials
3. Navigate to Dashboard
4. Verify all menu items are visible

#### Test 2: DataTables Integration
1. Go to **Cek Anco** menu
2. Verify table loads with data
3. Test search functionality
4. Test column sorting
5. Test pagination (10, 25, 50, 100)
6. Test export buttons (Copy, CSV, Excel, PDF, Print)

Repeat for:
- **Pakan** menu
- **Sampling** menu
- **Cek Air** menu

#### Test 3: PWA Features
1. Open browser DevTools (F12)
2. Go to **Console** tab
3. Look for: "SW registered" message
4. Go to **Application** tab
5. Check **Service Workers** - verify it's active
6. Check **Manifest** - verify it's loaded

#### Test 4: Offline Mode
1. Open DevTools > **Network** tab
2. Check **Offline** checkbox
3. Refresh the page
4. Verify offline indicator appears at top
5. Verify cached content still displays

#### Test 5: PWA Install
1. Wait 5 seconds on any page
2. Look for "Install Tambak App" popup at bottom-right
3. Click "Install" button (Chrome/Edge only)
4. Confirm installation
5. App should open in standalone mode

### 9. Verify Routes
Check that all these routes are working:

**Data Tables AJAX Routes:**
- `GET /cek-anco/data` - Cek Anco DataTables
- `GET /pakan/data` - Pakan DataTables
- `GET /sampling/data` - Sampling DataTables
- `GET /cek-air/data` - Cek Air DataTables

**Regular Routes:**
- `GET /` - Redirects to dashboard
- `GET /dashboard` - Dashboard page
- `GET /cek-anco` - Cek Anco page
- `GET /pakan` - Pakan page
- `GET /sampling` - Sampling page
- `GET /cek-air` - Cek Air page
- `GET /kematian` - Kematian page
- `GET /panen` - Panen page

### 10. Common Issues & Solutions

#### Issue: DataTables not loading
**Solution:**
```bash
composer dump-autoload
php artisan optimize:clear
```

#### Issue: Service worker not registering
**Solution:**
- Ensure you're using HTTPS or localhost
- Clear browser cache
- Check that `public/service-worker.js` exists

#### Issue: PWA install prompt not showing
**Solution:**
```javascript
// Run in browser console to reset
localStorage.removeItem('pwaInstallDismissed');
// Then refresh and wait 5 seconds
```

#### Issue: AJAX errors in DataTables
**Solution:**
- Check browser Network tab for failing requests
- Verify `/data` routes exist: `php artisan route:list | grep data`
- Check CSRF token is being sent
- Verify user is logged in

#### Issue: Export buttons not working
**Solution:**
- Check browser console for errors
- Verify DataTables Buttons plugin is loaded
- Try different browser (Chrome recommended)

## Post-Installation Configuration

### 1. Update App Name (Optional)
Edit `public/manifest.json`:
```json
{
    "name": "Your App Name",
    "short_name": "App",
    ...
}
```

### 2. Update Theme Color (Optional)
Edit `public/manifest.json`:
```json
{
    "theme_color": "#yourcolor",
    ...
}
```

Edit `resources/views/layouts/app_pwa.blade.php`:
```html
<meta name="theme-color" content="#yourcolor">
```

### 3. Customize Service Worker Cache (Optional)
Edit `public/service-worker.js`:
```javascript
const ASSETS = [
    // Add more routes to cache
    '/your-route',
    '/api/your-endpoint',
];
```

### 4. Adjust DataTables Defaults (Optional)
Edit each view's DataTables initialization:
```javascript
$('#table').DataTable({
    pageLength: 25,        // Default rows per page
    lengthMenu: [10, 25, 50, 100, 250],  // Page size options
    order: [[1, 'desc']],  // Default sort column
    // ... other options
});
```

## Performance Tuning

### For Large Datasets (1000+ records):

1. **Add Database Indexes:**
```sql
-- Add indexes to frequently queried columns
ALTER TABLE tcek_anco ADD INDEX idx_tanggal (tanggal);
ALTER TABLE tpakan ADD INDEX idx_tanggal (tanggal);
ALTER TABLE tsampling ADD INDEX idx_tanggal (tanggal);
ALTER TABLE tcek_air ADD INDEX idx_tanggal (tanggal);
```

2. **Optimize Controller Queries:**
```php
// Select only needed columns
->select('id', 'kolam', 'tanggal', 'field1', 'field2')
```

3. **Enable Query Cache:**
```bash
php artisan config:cache
php artisan route:cache
```

## Security Checklist

- [ ] CSRF protection enabled (default in Laravel)
- [ ] Authentication middleware applied
- [ ] SQL injection protection (Eloquent ORM)
- [ ] XSS protection (Blade templating)
- [ ] CORS configured (if needed)
- [ ] Rate limiting enabled (if needed)
- [ ] Input validation on all forms
- [ ] File upload restrictions (if applicable)

## Browser Testing Matrix

| Feature | Chrome | Edge | Firefox | Safari |
|---------|--------|------|---------|--------|
| DataTables | ✅ | ✅ | ✅ | ✅ |
| PWA Install | ✅ | ✅ | ✅ | Partial |
| Service Worker | ✅ | ✅ | ✅ | ✅ |
| Offline Mode | ✅ | ✅ | ✅ | ✅ |
| Export to PDF | ✅ | ✅ | ✅ | ⚠️ |
| Export to Excel | ✅ | ✅ | ✅ | ✅ |

## Next Steps After Installation

1. **Create PWA Icons** - Design and upload icon files
2. **Test on Mobile** - Try on actual mobile devices
3. **Configure HTTPS** - Required for PWA in production
4. **Customize Theme** - Adjust colors and branding
5. **Add More Features** - Implement push notifications, etc.
6. **Performance Testing** - Test with large datasets
7. **User Training** - Train users on new features

## Help & Support

If you encounter issues:

1. **Check Logs:**
   ```bash
   tail -f storage/logs/laravel.log
   ```

2. **Clear Caches:**
   ```bash
   php artisan optimize:clear
   ```

3. **Verify Installation:**
   ```bash
   php artisan about
   composer show yajra/laravel-datatables-oracle
   ```

4. **Test Database Connection:**
   ```bash
   php artisan db:show
   ```

5. **Check Routes:**
   ```bash
   php artisan route:list | grep -E "(data|pakan|anco|sampling)"
   ```

## Success Criteria

✅ **Installation is successful when:**
- All pages load without errors
- DataTables displays data with pagination
- Export buttons work (CSV, Excel, PDF)
- Search and sorting work in tables
- Service worker is registered (check console)
- Offline indicator appears when offline
- PWA install prompt shows after 5 seconds
- App can be installed to home screen (Chrome/Edge)
- All forms submit successfully
- No JavaScript errors in console
- No PHP errors in logs

---

**Last Updated:** 2024
**Version:** 1.0
**Documentation:** See `PWA_DATATABLES_IMPLEMENTATION.md` for detailed information