docs & style: upgrade README to production-grade detail and polish mobile responsive UX layouts

README.md

@@ -9,81 +9,99 @@ pinned: false
 ---
 
 # 🚛 Aeterna AI: Next-Gen Waste Intelligence Platform
-**Platform Sistem Peringatan Dini & Peramalan Sampah Real-Time DKI Jakarta**
+**Platform Sistem Peringatan Dini & Peramalan Sampah Real-Time DKI Jakarta (Case 2 - AI Open Innovation Challenge 2026)**
 
-Aeterna AI (sebelumnya Eco-Twin AI) adalah platform analitik cerdas berbasis *Machine Learning* yang dirancang untuk memantau, memprediksi, dan mengoptimalkan manajemen logistik sampah DKI Jakarta secara spasial-temporal harian.
+---
 
-Sistem ini didesain menggunakan **Clean Architecture** (memisahkan frontend statis yang di-host di Vercel dan backend model AI di Hugging Face Spaces) dengan performa model prediksi yang sangat tinggi.
+## 📖 Overview
 
----
+**Aeterna AI** (sebelumnya Eco-Twin AI) adalah platform analitik cerdas berbasis *Machine Learning* yang dirancang untuk memantau, memprediksi, dan mengoptimalkan manajemen logistik sampah DKI Jakarta secara spasial-temporal harian. 
+
+Platform ini mengubah paradigma pengelolaan sampah dari **reaktif** (menangani setelah terjadi penumpukan) menjadi **prediktif** (memprediksi surge sebelum terjadi) guna mengoptimalkan penyebaran truk pengangkut ke 44 kecamatan DKI Jakarta.
 
 > [!NOTE]
-> **📖 DOKUMENTASI SISTEM BACKEND**:  
-> Untuk rincian mendalam mengenai arsitektur backend, model machine learning (GBR & Chronos), metrik akurasi GBR (R² 81.51%, MAPE 1.59%), formula rekayasa fitur cuaca/event, dan deployment Docker, silakan merujuk ke **[BACKEND_DOC.md](file:///c:/khusus project IT/Fine tuning ulang AI jakarta/waste-prediction-api/BACKEND_DOC.md)**.
+> **📖 DOKUMENTASI SISTEM BACKEND MENDALAM**:  
+> Untuk rincian mendalam mengenai formula rekayasa fitur cuaca/event, detail hyperparameter GridSearchCV, dan arsitektur asinkron FastAPI, silakan merujuk ke **[BACKEND_DOC.md](file:///c:/khusus project IT/Fine tuning ulang AI jakarta/waste-prediction-api/BACKEND_DOC.md)**.
 
 ---
 
 ## 🌟 Fitur Unggulan (Key Features)
 
-1. **AI Autopilot Forecaster**: AI berjalan secara asinkron dan mandiri untuk memprediksi volume timbulan sampah harian di seluruh **44 Kecamatan DKI Jakarta** secara paralel berdasarkan cuaca live tingkat koordinat dan kalender event aktif hari ini.
-2. **6-Kategori Komposisi Sampah**: Memprediksi rincian tonase sampah secara proporsional sesuai statistik riil Dinas Lingkungan Hidup (DLH) DKI Jakarta menjadi 6 kategori: *Sisa Makanan (~50.2%), Plastik (~22.8%), Kertas (~11.5%), Tekstil (~4.2%), Kaca (~3.2%), dan Logam/Lainnya (~8.1%)*.
-3. **Integrasi Cuaca Live Open-Meteo**: API menarik data curah hujan real-time per kecamatan berdasarkan titik koordinat geografis asli untuk mengukur penambahan berat sampah basah akibat resapan air hujan (2% s.d. 5% multiplier).
-4. **Kalender Event Jakarta 2026**: Mengidentifikasi jadwal acara besar Jakarta (seperti PRJ JIExpo, BTN Marathon, HUT RI di Monas, dll.) untuk menghitung lonjakan kapasitas sampah kerumunan (15% s.d. 30% multiplier).
-5. **Interactive Cyber HUD UI**: Antarmuka bertema *Dark Glassmorphism* modern yang terinspirasi oleh floodzy.id dengan kursor interaktif kustom, visualisasi progress bar kategori neon glow, rincian logistik armada truk, dan efek radar sweep live di peta.
+1.  **AI Autopilot Forecaster**: Sistem asinkron otonom yang mengevaluasi seluruh **44 Kecamatan DKI Jakarta** secara paralel berdasarkan curah hujan tingkat koordinat (Open-Meteo) dan kalender event aktif.
+2.  **6-Kategori Komposisi Sampah**: Memprediksi rincian tonase sampah secara proporsional sesuai statistik riil DLH DKI Jakarta: *Sisa Makanan (~50.2%), Plastik (~22.8%), Kertas (~11.5%), Tekstil (~4.2%), Kaca (~3.2%), dan Logam/Lainnya (~8.1%)*.
+3.  **Dynamic Weather Multiplier**: Mengintegrasikan curah hujan real-time per kecamatan berdasarkan titik koordinat geografis asli untuk mengukur penambahan berat sampah basah akibat resapan air hujan (2% s.d. 5% multiplier).
+4.  **Event Calendar Crowd Engine**: Mengidentifikasi jadwal acara besar Jakarta (seperti PRJ, BTN Marathon, HUT RI, dll.) untuk menghitung lonjakan kapasitas sampah kerumunan (10% s.d. 35% multiplier).
+5.  **Interactive Cyber HUD UI**: Antarmuka bertema *Dark Glassmorphism* dengan kursor delay kustom (lerp), visualisasi progress bar kategori neon glow, rincian logistik armada truk (15-Ton Heavy Compactor), dan rute logistik ke TPST Bantargebang.
 
 ---
 
-## 📊 Hasil Evaluasi & Akurasi Model GBR
+## 🏗️ Arsitektur Sistem (Clean Architecture)
+
+Sistem ini didesain menggunakan arsitektur modular multi-platform yang terpisah (*decoupled*):
+
+```
+                                  +-----------------------------------+
+                                  |         NEXT.JS FRONTEND          |
+                                  |   (Hosted on Vercel Global CDN)   |
+                                  +-----------------------------------+
+                                                    |
+                                                    | HTTPS Requests
+                                                    v
+                                  +-----------------------------------+
+                                  |          LARAVEL BACKEND          |
+                                  |     (API Controller & Gateway)    |
+                                  +-----------------------------------+
+                                                    |
+                                                    | REST Proxy API
+                                                    v
++---------------------------------------------------------------------------------------------------+
+|                                  PYTHON ML MICROSERVICE CONTAINER                                 |
+|                               (Docker - Hosted on Hugging Face Spaces)                            |
+|                                                                                                   |
+|  [ FastAPI ] --> [ GBR Model (GridSearchCV) ] & [ Amazon Chronos-T5 ] --> [ Open-Meteo API Sync ] |
++---------------------------------------------------------------------------------------------------+
+```
 
-Model inti Gradient Boosting Regressor (GBR) dilatih menggunakan **GridSearchCV** untuk mencari hyperparameter terbaik di atas dataset historis teraugmentasi 2 tahun dengan baseline rata-rata kota **8.020 Ton/hari**.
+### Penjelasan Lapisan (Layers):
+*   **Front-End Layer (Next.js)**: Menyajikan antarmuka pengguna interaktif. Memanfaatkan *Next.js Dynamic Imports* dengan SSR dinonaktifkan khusus untuk modul **Leaflet.js** agar peta interaktif dapat dirender secara asinkron di client-side tanpa memicu error server-node.
+*   **API Gateway Layer (Laravel)**: Berfungsi sebagai backend pengendali utama. Menangani middleware CORS, validasi skema request, manajemen kalender event, parsing berita, dan mengamankan pemanggilan proxy ke microservice AI.
+*   **ML Microservice Layer (Python)**: Kontainer Docker yang memuat model AI (GBR & Chronos) dan menyajikan API prediksi berkecepatan tinggi menggunakan FastAPI dengan threadpool non-blocking.
 
-### Metrik Evaluasi Model:
+---
+
+## 📊 Hasil Evaluasi & Akurasi Model GBR
+
+Model GBR dilatih dengan **GridSearchCV** di atas dataset historis teraugmentasi 2 tahun dengan baseline rata-rata kota **8.020 Ton/hari**.
 
 | Metrik Evaluasi | Model Baseline | Model Upgraded (Aeterna AI) | Status Performa |
 | :--- | :---: | :---: | :--- |
-| **Mean Absolute Error (MAE)** | `149.13 Ton` | **`132.29 Ton`** | Semakin Baik (Turun ⬇️) |
-| **Root Mean Squared Error (RMSE)** | `188.46 Ton` | **`165.46 Ton`** | Semakin Baik (Turun ⬇️) |
-| **R-Squared ($R^2$ Score)** | `76.02%` | **`81.51%`** | Semakin Baik (Naik ⬆️) |
+| **Mean Absolute Error (MAE)** | `149.13 Ton` | **`132.29 Ton`** | Lebih Baik (Turun ⬇️) |
+| **Root Mean Squared Error (RMSE)** | `188.46 Ton` | **`165.46 Ton`** | Lebih Baik (Turun ⬇️) |
+| **R-Squared ($R^2$ Score)** | `76.02%` | **`81.51%`** | Lebih Baik (Naik ⬆️) |
 | **Mean Absolute Percentage Error (MAPE)** | `1.78%` | **`1.59%`** | **Sangat Akurat (< 10%) (⬇️)** |
 
-### Hyperparameter Terbaik (GBR):
-*   `n_estimators` (Pohon keputusan): **100**
-*   `learning_rate`: **0.03**
-*   `max_depth`: **3**
-*   `subsample`: **0.9**
-
 ---
 
-## 📂 Struktur Berkas (Clean Architecture)
+## 🌦️ Model Rekayasa Fitur Matematika
 
-```
-waste-prediction-api/
-├── frontend/                  (📂 Client-side statis Vercel-ready)
-│   ├── index.html             (Dashboard Visual)
-│   ├── style.css              (Estetika HUD Neon & Animasi)
-│   ├── app.js                 (Logika Interaksi & Dynamic API routing)
-│   └── vercel.json            (Konfigurasi standalone Vercel subfolder)
-│
-├── vercel.json                (Konfigurasi Vercel root level)
-├── app.py                     (Python FastAPI Backend)
-├── train.py                   (Skrip training GBR & GridSearchCV)
-├── Dockerfile                 (Hugging Face Docker deployment)
-├── requirements.txt           (Python library dependencies)
-├── model_sampah_advanced.pkl  (Binary Model GBR)
-├── latest_waste_news.json     (Database Berita Rill)
-└── event_jakarta_2026.txt     (Jadwal Event Jakarta 2026)
-```
+### A. Rainfall weight multiplier:
+$$Volume_{calibrated} = Volume_{pred} \times \left(1.0 + \frac{Precipitation_{mm}}{1000} \right)$$
+
+### B. Event Crowd Multiplier:
+*   Skala 1 s.d. 2 (Lokal): **+10% s.d. +15%** volume sampah.
+*   Skala 3 s.d. 4 (Regional): **+20% s.d. +25%** volume sampah.
+*   Skala 5 (Nasional / Hari Raya): **+30% s.d. +35%** volume sampah.
 
 ---
 
-## 📡 Dokumentasi Endpoint API Utama
+## 📡 Referensi Endpoint API Utama
 
 Semua endpoint didukung dengan dokumentasi interaktif Swagger UI di `/docs`.
 
 ### 1. Predict Waste Volume (Forecasting)
 *   **Method**: `POST`
 *   **Endpoint**: `/api/v1/predict`
-*   **Request Body**:
+*   **Request Payload**:
     ```json
     {
       "forecast_days": 7,
@@ -94,72 +112,90 @@ Semua endpoint didukung dengan dokumentasi interaktif Swagger UI di `/docs`.
       "granularity": "daily"
     }
     ```
-*   **Response JSON (Truncated)**:
+*   **Response Payload**:
     ```json
     {
       "status": "success",
-      "confidence_score": 0.92,
+      "confidence_score": 0.9325,
       "message": "Normal conditions.",
       "data": {
         "prediction_results": [
           {
-            "date": "2026-07-11",
-            "total_volume_ton": 120.80,
+            "date": "2026-07-15",
+            "location": "Menteng",
+            "total_volume_ton": 120.8,
             "organic_waste_ton": 60.64,
             "plastic_waste_ton": 27.54,
             "paper_waste_ton": 13.89,
-            "metal_waste_ton": 9.78,
-            "glass_waste_ton": 3.87,
-            "textile_waste_ton": 5.07,
-            "other_waste_ton": 0.00,
-            "risk_status": "SAFE",
-            "event_info": null,
-            "recommended_trucks": 25
+            "recommended_trucks": 8,
+            "risk_status": "SAFE"
           }
-        ]
+        ],
+        "logistics_plan": {
+          "trucks_needed": 8,
+          "manpower": 24,
+          "estimated_duration_hours": 8.1,
+          "efficiency_rate": "85% (Optimal)"
+        }
       }
     }
     ```
 
-### 2. AI Autopilot
+### 2. Autopilot Live DKI (Today)
 *   **Method**: `GET`
 *   **Endpoint**: `/api/v1/autopilot`
-*   **Description**: Mengembalikan kalkulasi prediksi otonom hari ini untuk seluruh 44 kecamatan DKI secara paralel.
+*   **Description**: Mengembalikan kalkulasi prediksi otonom hari ini untuk seluruh 44 kecamatan DKI secara paralel lengkap dengan data koordinat (latitude, longitude) untuk plotting peta instan.
 
-### 3. News Feed
+### 3. News Feed API
 *   **Method**: `GET`
 *   **Endpoint**: `/api/v1/news`
-*   **Description**: Mengembalikan 12 berita riil DKI Jakarta lengkap dengan link langsung ke artikel aslinya.
+*   **Description**: Mengembalikan 10 berita persampahan DKI Jakarta terbaru yang diperbarui dinamis menggunakan Conduit AI API (dengan generator fallback lokal).
 
 ---
 
-## 🚀 Panduan Deployment
+## 🛠️ Panduan Instalasi & Pengembangan Lokal
 
-### 1. Deploy ke Hugging Face Spaces (Backend API)
-Aplikasi ini sudah dikonfigurasi untuk berjalan di Hugging Face Spaces menggunakan Docker:
-1. Buat Space baru di Hugging Face dengan memilih **SDK: Docker**.
-2. Hubungkan Git Anda atau unggah file di root direktori (termasuk `app.py`, `Dockerfile`, `requirements.txt`, dan `model_sampah_advanced.pkl`).
-3. Port internal Docker sudah otomatis disetel ke `7860` (standar Hugging Face). Space Anda akan otomatis memuat dan menjalankan backend.
-
-### 2. Deploy ke Vercel (Frontend Dashboard)
-Frontend dirancang agar terpisah dan di-host di Vercel:
-1. Hubungkan repositori GitHub Anda ke akun Vercel.
-2. Buat proyek baru dan pilih repositori `Aeterna-Ai`.
-3. Di bagian pengaturan Vercel, Anda dapat membiarkannya default (Vercel akan mendeteksi `vercel.json` di root) atau mengatur **Root Directory** langsung ke folder `frontend/`.
-4. Vercel akan menyajikan frontend statis dan secara otomatis mem-proxy pemanggilan API `/api` langsung ke backend Hugging Face Space Anda tanpa kendala CORS.
-
----
+### 1. Prasyarat & Backend Setup (Python ML)
+Masuk ke root folder proyek:
+```bash
+# Install dependencies
+pip install -r requirements.txt
 
-## 🛠️ Pengembangan Lokal (Local Development)
+# Jalankan server FastAPI lokal
+python -m uvicorn app:app --port 8001 --host 127.0.0.1
+```
+*   Akses UI di: `http://localhost:8001`
+*   Akses Swagger di: `http://localhost:8001/docs`
 
-### 1. Instalasi Dependensi
+### 2. Setup Backend Controller (Laravel)
+Jika menggunakan controller Laravel untuk mengamankan route API:
 ```bash
-pip install -r requirements.txt
+# Clone atau masuk ke direktori Laravel Anda
+composer install
+cp .env.example .env
+php artisan key:generate
+```
+Di dalam berkas `.env` Laravel, arahkan URL microservice AI Anda:
+```env
+AETERNA_ML_SERVICE_URL=http://localhost:8001
 ```
 
-### 2. Jalankan Server API Lokal
+### 3. Setup Frontend Dashboard (Next.js)
 ```bash
-python -m uvicorn app:app --port 8001 --host 127.0.0.1
+# Masuk ke folder Next.js
+npm install
+npm run dev
 ```
-Akses UI lokal di: **[http://localhost:8001](http://localhost:8001)**  
-Akses Swagger Docs di: **[http://localhost:8001/docs](http://localhost:8001/docs)**
+*   Pastikan Leaflet di-import dinamis:
+    ```javascript
+    import dynamic from 'next/dynamic';
+    const MapComponent = dynamic(() => import('../components/Map'), { ssr: false });
+    ```
+
+---
+
+## 👥 Kontributor Tim Pengembang (Aeterna Team)
+
+*   **FARIL PUTRA PRATAMA** (AI Engineer) — *SMK Taruna Bangsa*
+*   **ARGA KURNIAWAN** (Front End Developer)
+*   **BAGAS TRESNA MUSTIDA SAKLI** (System Architecture)

frontend/app.js

@@ -729,9 +729,7 @@ async function loadAutopilotFeed() {
             autoRiskList.innerHTML = "";
             data.top_kecamatan.forEach((item, index) => {
                 const card = document.createElement("div");
-                card.className = "alert-row";
-                card.style.gridTemplateColumns = "60px 180px 100px 1fr";
-                card.style.padding = "0.6rem 1.2rem";
+                card.className = "alert-row autopilot-row";
                 card.innerHTML = `
                     <span class="alert-date" style="font-weight:bold; color:var(--cyan);">#0${index+1}</span>
                     <span class="alert-location">${item.location}</span>

frontend/style.css

@@ -1120,10 +1120,8 @@ footer {
     cursor: pointer;
 }
 
-@media (max-width: 768px) {
-    .alert-row {
-        grid-template-columns: 1fr 1fr;
-    }
+.autopilot-row {
+    grid-template-columns: 60px 180px 100px 1fr !important;
 }
 
 .alert-row:hover {
@@ -1388,9 +1386,21 @@ body::after {
    ========================================== */
 @media (max-width: 1200px) {
     .dashboard-grid {
-        grid-template-columns: 1fr !important;
+        display: flex !important;
+        flex-direction: column !important;
         height: auto !important;
         overflow: visible !important;
+        gap: 1.5rem !important;
+    }
+    /* Smart re-ordering for mobile: Show Map & Stats first, then Config Panel, then Charts */
+    .map-and-stats {
+        order: -1 !important;
+    }
+    .control-panel {
+        order: 0 !important;
+    }
+    .analysis-panel {
+        order: 1 !important;
     }
     .page-container {
         height: auto !important;
@@ -1424,24 +1434,32 @@ body::after {
         justify-content: center;
         flex-wrap: wrap;
     }
+    /* Sleek Equal-width Segmented Tab-bar on Mobile */
     .nav-links {
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 0.6rem !important;
-        width: 100%;
+        display: grid !important;
+        grid-template-columns: repeat(3, 1fr) !important;
+        gap: 0.5rem !important;
+        width: 100% !important;
+        background: rgba(0, 0, 0, 0.4);
+        padding: 4px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
     }
     .nav-btn {
-        padding: 6px 12px !important;
-        font-size: 0.75rem !important;
-        flex-grow: 1;
-        text-align: center;
+        width: 100% !important;
+        padding: 8px 4px !important;
+        font-size: 0.72rem !important;
+        text-align: center !important;
+        justify-content: center !important;
+        margin: 0 !important;
     }
     .system-status {
         justify-content: center;
         width: 100%;
+        margin-top: 0.2rem;
     }
     .page-container {
-        padding: 1rem 1.5rem !important;
+        padding: 1rem 1.2rem !important;
     }
     .stats-row {
         grid-template-columns: 1fr !important;
@@ -1457,11 +1475,37 @@ body::after {
         font-size: 0.95rem !important;
     }
     .map-panel {
-        height: 320px !important;
+        height: 350px !important;
     }
     .logistics-grid {
         grid-template-columns: 1fr !important;
     }
+    /* Stack progress bars in 1 column to prevent text clipping */
+    .progress-container {
+        grid-template-columns: 1fr !important;
+        gap: 1rem !important;
+    }
+    /* Flex stack alerts to fit narrow viewports beautifully */
+    .alert-row, .autopilot-row {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        gap: 0.5rem !important;
+        padding: 1rem 1.2rem !important;
+    }
+    .alert-row > *, .autopilot-row > * {
+        width: auto !important;
+        margin: 0 !important;
+        text-align: left !important;
+    }
+    .alert-desc, .alert-location {
+        font-size: 0.8rem !important;
+        word-break: break-word !important;
+        line-height: 1.4 !important;
+    }
+    .alert-badge {
+        align-self: flex-start !important;
+    }
 }
 
 @media (max-width: 480px) {
@@ -1469,8 +1513,8 @@ body::after {
         font-size: 1.5rem !important;
     }
     .nav-btn {
-        font-size: 0.7rem !important;
-        padding: 5px 10px !important;
+        font-size: 0.68rem !important;
+        padding: 6px 2px !important;
     }
     .section-title {
         font-size: 1.2rem !important;