Modernisasi Forecast Dashboard: Glassmorphism UI, SARIMA Model, and Backend Refactor

backend/config.py

@@ -0,0 +1,66 @@
+# config.py — Centralized configuration using pydantic-settings
+# .env hanya menyimpan DB credentials & secrets
+# Runtime config bisa diubah via API tanpa restart
+
+import os
+from pydantic_settings import BaseSettings
+from functools import lru_cache
+
+
+class Settings(BaseSettings):
+    """Database & secrets — loaded from .env file."""
+    DB_HOST: str = "localhost"
+    DB_PORT: int = 3306
+    DB_NAME: str = "sikomo_db"
+    DB_USER: str = "root"
+    DB_PASSWORD: str = ""
+    API_SECRET_KEY: str = "default-key"
+    DASHBOARD_PASSWORD: str = "Bandulan112"
+
+    @property
+    def DATABASE_URL(self) -> str:
+        return (
+            f"mysql+pymysql://{self.DB_USER}:{self.DB_PASSWORD}"
+            f"@{self.DB_HOST}:{self.DB_PORT}/{self.DB_NAME}"
+        )
+
+    class Config:
+        env_file = ".env"
+        extra = "ignore"
+
+
+@lru_cache()
+def get_settings() -> Settings:
+    return Settings()
+
+
+class RuntimeConfig:
+    """Runtime configuration — can be changed via dashboard API without restart."""
+
+    def __init__(self):
+        self.optuna_trials: int = int(os.getenv("OPTUNA_TRIALS", "30"))
+        self.model_dir: str = os.getenv("MODEL_DIR", "models")
+        self.forecast_days: int = int(os.getenv("FORECAST_DAYS", "7"))
+        self.default_schedules: str = os.getenv("DEFAULT_SCHEDULES", "0 1 * * *")
+
+    def to_dict(self) -> dict:
+        return {
+            "optuna_trials": self.optuna_trials,
+            "model_dir": self.model_dir,
+            "forecast_days": self.forecast_days,
+            "default_schedules": self.default_schedules,
+        }
+
+    def update(self, key: str, value: str):
+        allowed = {
+            "optuna_trials": lambda v: setattr(self, "optuna_trials", int(v)),
+            "model_dir": lambda v: setattr(self, "model_dir", v),
+            "forecast_days": lambda v: setattr(self, "forecast_days", int(v)),
+            "default_schedules": lambda v: setattr(self, "default_schedules", v),
+        }
+        if key not in allowed:
+            raise ValueError(f"Key '{key}' tidak diizinkan untuk diubah.")
+        allowed[key](value)
+
+
+runtime_config = RuntimeConfig()

backend/database.py

@@ -195,6 +195,44 @@ def update_komoditas_volatilitas(komoditas_id: int, volatile: int, skor: float):
             WHERE id=:kid
         """), {'v': volatile, 's': skor, 'kid': komoditas_id})
 
+
+def save_all_model_results(all_results: dict, best_meta: dict, komoditas_id: int, pasar_id: int):
+    """Save ALL model results to model_ml (not just best). Best gets is_active=1."""
+    engine = get_engine()
+    best_name = best_meta.get('nama_model', '')
+    with engine.begin() as conn:
+        # Deactivate old models for this komoditas
+        conn.execute(text(
+            "UPDATE model_ml SET is_active=0 WHERE komoditas_id=:kid"
+        ), {'kid': komoditas_id})
+        # Insert each model result
+        for model_name, metrics in all_results.items():
+            is_best = 1 if model_name == best_name or f"{model_name}_Tuned" == best_name else 0
+            conn.execute(text("""
+                INSERT INTO model_ml (
+                    komoditas_id, nama_model, versi, deskripsi, file_path,
+                    mape, rmse, mae, r2_score, confidence_level,
+                    stabilitas, status_validasi, catatan_validasi,
+                    tanggal_training, tanggal_evaluasi, is_active,
+                    created_at, updated_at
+                ) VALUES (
+                    :komoditas_id, :nama_model, '1.0', :deskripsi, '',
+                    :mape, :rmse, :mae, :r2_score, 0,
+                    '', 'otomatis', '',
+                    CURDATE(), CURDATE(), :is_active, NOW(), NOW()
+                )
+            """), {
+                'komoditas_id': komoditas_id,
+                'nama_model': model_name,
+                'deskripsi': f"Model {model_name} untuk komoditas ID {komoditas_id}",
+                'mape': round(metrics.get('mape', 0), 4),
+                'rmse': round(metrics.get('rmse', 0), 4),
+                'mae': round(metrics.get('mae', 0), 4),
+                'r2_score': round(metrics.get('r2', 0), 4),
+                'is_active': is_best,
+            })
+
+
 # ── READ untuk API response ───────────────────────────────────────────────────
 
 def get_prediksi_data(komoditas_id: int):
@@ -218,12 +256,24 @@ def get_prediksi_data(komoditas_id: int):
     """, engine).to_dict('records')
     harga_terkini = harga_terkini[0] if harga_terkini else None
 
+    # Best (active) model
     model = pd.read_sql(f"""
         SELECT * FROM model_ml WHERE komoditas_id={komoditas_id} AND is_active=1
         ORDER BY updated_at DESC LIMIT 1
     """, engine).to_dict('records')
     model = model[0] if model else None
 
+    # ALL models for comparison (latest run)
+    all_models = pd.read_sql(f"""
+        SELECT nama_model, mape, rmse, mae, r2_score, is_active,
+               tanggal_training, created_at
+        FROM model_ml WHERE komoditas_id={komoditas_id}
+          AND DATE(created_at) = (
+            SELECT DATE(MAX(created_at)) FROM model_ml WHERE komoditas_id={komoditas_id}
+          )
+        ORDER BY rmse ASC
+    """, engine).to_dict('records')
+
     ringkasan = pd.read_sql(f"""
         SELECT * FROM ringkasan_prediksi WHERE komoditas_id={komoditas_id}
         ORDER BY created_at DESC LIMIT 1
@@ -244,10 +294,11 @@ def get_prediksi_data(komoditas_id: int):
     """, engine).to_dict('records')
 
     return {
-        'komoditas'    : komoditas,
-        'harga_terkini': harga_terkini,
-        'model'        : model,
-        'ringkasan'    : ringkasan,
+        'komoditas'     : komoditas,
+        'harga_terkini' : harga_terkini,
+        'model'         : model,
+        'all_models'    : all_models,
+        'ringkasan'     : ringkasan,
         'prediksi_7hari': hasil,
-        'insights'     : insights,
+        'insights'      : insights,
     }

backend/logger.py

@@ -0,0 +1,61 @@
+# logger.py — In-memory log handler for realtime log streaming
+# Ported from Daily Scrapper architecture
+
+import logging
+from datetime import datetime
+from typing import List, Dict, Optional
+
+
+class MemoryLogHandler(logging.Handler):
+    """Stores log entries in memory for API consumption (realtime streaming)."""
+
+    def __init__(self, capacity: int = 500):
+        super().__init__()
+        self.capacity = capacity
+        self.logs: List[Dict] = []
+
+    def emit(self, record):
+        try:
+            msg = record.getMessage()
+            log_entry = {
+                "timestamp": datetime.fromtimestamp(record.created).isoformat(),
+                "level": record.levelname,
+                "source": record.name.split(".")[-1],
+                "message": msg,
+            }
+            self.logs.append(log_entry)
+            if len(self.logs) > self.capacity:
+                self.logs.pop(0)
+        except Exception:
+            self.handleError(record)
+
+    def get_logs(
+        self, limit: int = 100, level: Optional[str] = None
+    ) -> List[Dict]:
+        filtered = self.logs
+        if level and level.upper() != "ALL":
+            filtered = [l for l in filtered if l["level"] == level.upper()]
+        return filtered[-limit:]
+
+    def clear_logs(self):
+        self.logs.clear()
+
+
+# Singleton handler shared across all modules
+memory_handler = MemoryLogHandler()
+
+
+def get_app_logger(name: str) -> logging.Logger:
+    """Get a named logger that writes to both console and memory buffer."""
+    logger = logging.getLogger(f"app.{name}")
+    logger.setLevel(logging.INFO)
+    # Ensure memory handler is added only once
+    if not any(isinstance(h, MemoryLogHandler) for h in logger.handlers):
+        logger.addHandler(memory_handler)
+    # Also add console handler for local debugging
+    if not any(isinstance(h, logging.StreamHandler) and not isinstance(h, MemoryLogHandler) for h in logger.handlers):
+        console = logging.StreamHandler()
+        console.setLevel(logging.INFO)
+        console.setFormatter(logging.Formatter("%(asctime)s [%(levelname)s] %(name)s: %(message)s"))
+        logger.addHandler(console)
+    return logger

backend/main.py

@@ -1,26 +1,31 @@
-# main.py — FastAPI: endpoint training, forecasting, CRUD, scheduler, env
-import os, json
+# main.py — FastAPI: Refactored with modular config, logger, scheduler
+# Endpoints: forecast, CRUD, scheduler, logs, settings
+import os
+import threading
 from datetime import datetime
 from typing import Optional
-from fastapi import FastAPI, HTTPException, Depends, BackgroundTasks
+from fastapi import FastAPI, HTTPException, Depends, BackgroundTasks, Query
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
 from pydantic import BaseModel
-from dotenv import load_dotenv, set_key
-from apscheduler.schedulers.background import BackgroundScheduler
-
-load_dotenv()
 
+from config import get_settings, runtime_config
+from logger import get_app_logger, memory_handler
+from scheduler import forecast_scheduler
 from database import (
     get_all_komoditas, get_harga_harian, get_pasar_list,
     get_prediksi_data, save_model_ml, save_hasil_prediksi,
     save_ringkasan_prediksi, save_insight_prediksi,
-    update_komoditas_volatilitas, get_engine
+    update_komoditas_volatilitas, get_engine,
+    save_all_model_results,
 )
 from ml_pipeline import run_pipeline
 from sqlalchemy import text
 
+settings = get_settings()
+logger = get_app_logger("main")
+
 app = FastAPI(title="SIKOMO ML API")
 
 app.add_middleware(
@@ -32,214 +37,291 @@ app.add_middleware(
 
 # ── Auth ──────────────────────────────────────────────────────────────────────
 security = HTTPBearer()
-API_KEY  = os.getenv('API_SECRET_KEY', 'default-key')
 
 def verify_token(creds: HTTPAuthorizationCredentials = Depends(security)):
-    if creds.credentials != API_KEY:
+    if creds.credentials != settings.API_SECRET_KEY:
         raise HTTPException(status_code=401, detail="Unauthorized")
     return creds.credentials
 
-# ── Scheduler ─────────────────────────────────────────────────────────────────
-scheduler    = BackgroundScheduler()
-forecast_log = []   # in-memory log untuk SSE
+# ── State tracking ────────────────────────────────────────────────────────────
+running_tasks: dict = {}  # komoditas_id -> True/False
+stop_event = threading.Event()  # For aborting forecast
 
-def auto_forecast_job():
-    forecast_log.append(f"[{datetime.now()}] Auto forecast dimulai...")
+
+def run_forecast_for_komoditas(komoditas_id: int, komoditas_nama: str):
+    """Run forecast for a single komoditas. Tracks running state."""
+    if running_tasks.get(komoditas_id):
+        logger.warning(f"⚠️ {komoditas_nama} sudah sedang berjalan, skip.")
+        return
+
+    running_tasks[komoditas_id] = True
+    try:
+        if stop_event.is_set():
+            logger.warning(f"⛔ Forecast dihentikan sebelum {komoditas_nama}.")
+            return
+
+        df = get_harga_harian(komoditas_id)
+        if df.empty or len(df) < 60:
+            logger.warning(f"⚠️ {komoditas_nama}: data kurang ({len(df)} baris)")
+            return
+
+        price_cols = [c for c in df.columns if c != 'date']
+        target_col = price_cols[0]
+
+        pasar_df = get_pasar_list(komoditas_id)
+        pasar_id = int(pasar_df.iloc[0]['id']) if not pasar_df.empty else 1
+
+        def log_cb(msg):
+            logger.info(f"[{komoditas_nama}] {msg}")
+
+        result = run_pipeline(
+            komoditas_id=komoditas_id,
+            komoditas_nama=komoditas_nama,
+            df=df,
+            target_market=target_col,
+            pasar_id=pasar_id,
+            n_trials=runtime_config.optuna_trials,
+            forecast_days=runtime_config.forecast_days,
+            log_cb=log_cb,
+        )
+
+        # Save results to DB
+        meta = result['metadata']
+        labels = result['labels']
+        preds = result['predictions']
+        all_model_results = result.get('model_comparison', {})
+
+        # Save all model results (semua model, bukan hanya best)
+        save_all_model_results(all_model_results, meta, komoditas_id, pasar_id)
+
+        # Save best model specifically
+        model_id = save_model_ml(meta)
+        save_hasil_prediksi(preds, komoditas_id, pasar_id, model_id, meta)
+        save_ringkasan_prediksi({
+            'harga_min': labels['harga_min'],
+            'harga_max': labels['harga_max'],
+            'tren': labels['tren'],
+            'confidence_level': labels['confidence_level'],
+            'status_analisis': labels['status_analisis']['judul'],
+            'deskripsi_status': labels['status_analisis']['deskripsi'],
+            'tanggal_mulai': preds[0]['tanggal'],
+            'tanggal_akhir': preds[-1]['tanggal'],
+        }, komoditas_id, model_id)
+        save_insight_prediksi(labels['insights'], komoditas_id, model_id)
+        cv = meta.get('data_quality', {}).get('cv', 0)
+        update_komoditas_volatilitas(komoditas_id, 1 if cv >= 5 else 0, cv)
+
+        logger.info(f"✅ {komoditas_nama} selesai! Best: {meta['nama_model']} MAPE={meta['mape']:.2f}%")
+
+    except Exception as e:
+        logger.error(f"❌ {komoditas_nama} gagal: {e}")
+    finally:
+        running_tasks[komoditas_id] = False
+
+
+def auto_forecast_all():
+    """Run forecast for ALL komoditas (scheduled or manual run-all)."""
+    logger.info("🚀 Auto forecast semua komoditas dimulai...")
+    stop_event.clear()
     try:
         komoditas_list = get_all_komoditas()
-        for _, row in komoditas_list.iterrows():
+        total = len(komoditas_list)
+        for idx, (_, row) in enumerate(komoditas_list.iterrows()):
+            if stop_event.is_set():
+                logger.warning("⛔ Forecast dihentikan oleh user.")
+                break
+            logger.info(f"📦 [{idx+1}/{total}] Memproses {row['nama']}...")
             run_forecast_for_komoditas(int(row['id']), row['nama'])
-        forecast_log.append(f"[{datetime.now()}] Auto forecast selesai.")
+        logger.info("🏁 Auto forecast selesai.")
     except Exception as e:
-        forecast_log.append(f"[{datetime.now()}] ERROR: {e}")
+        logger.error(f"❌ Auto forecast error: {e}")
 
-def run_forecast_for_komoditas(komoditas_id: int, komoditas_nama: str):
-    df = get_harga_harian(komoditas_id)
-    if df.empty or len(df) < 60:
-        forecast_log.append(f"  ⚠️ {komoditas_nama}: data kurang")
-        return
 
-    # Kolom pertama non-date sebagai target, sisanya other
-    price_cols  = [c for c in df.columns if c != 'date']
-    target_col  = price_cols[0]
-
-    # Ambil pasar_id dari DB
-    pasar_df   = get_pasar_list(komoditas_id)
-    pasar_id   = int(pasar_df.iloc[0]['id']) if not pasar_df.empty else 1
-
-    def log_cb(msg): forecast_log.append(f"  [{komoditas_nama}] {msg}")
-
-    result = run_pipeline(
-        komoditas_id=komoditas_id,
-        komoditas_nama=komoditas_nama,
-        df=df,
-        target_market=target_col,
-        pasar_id=pasar_id,
-        n_trials=int(os.getenv('OPTUNA_TRIALS', 30)),
-        log_cb=log_cb,
-    )
-
-    # Simpan ke DB
-    meta     = result['metadata']
-    labels   = result['labels']
-    preds    = result['predictions']
-
-    model_id = save_model_ml(meta)
-    save_hasil_prediksi(preds, komoditas_id, pasar_id, model_id, meta)
-    save_ringkasan_prediksi({
-        'harga_min'       : labels['harga_min'],
-        'harga_max'       : labels['harga_max'],
-        'tren'            : labels['tren'],
-        'confidence_level': labels['confidence_level'],
-        'status_analisis' : labels['status_analisis']['judul'],
-        'deskripsi_status': labels['status_analisis']['deskripsi'],
-        'tanggal_mulai'   : preds[0]['tanggal'],
-        'tanggal_akhir'   : preds[-1]['tanggal'],
-    }, komoditas_id, model_id)
-    save_insight_prediksi(labels['insights'], komoditas_id, model_id)
-    cv = meta.get('data_quality', {}).get('cv', 0)
-    update_komoditas_volatilitas(komoditas_id, 1 if cv >= 5 else 0, cv)
+# Register forecast job with scheduler
+forecast_scheduler.set_forecast_job(auto_forecast_all)
 
-def start_scheduler():
-    hour   = int(os.getenv('AUTO_FORECAST_HOUR', 1))
-    minute = int(os.getenv('AUTO_FORECAST_MINUTE', 0))
-    if scheduler.get_jobs():
-        scheduler.remove_all_jobs()
-    if os.getenv('AUTO_FORECAST_ENABLED', 'false').lower() == 'true':
-        scheduler.add_job(auto_forecast_job, 'cron', hour=hour, minute=minute)
-        if not scheduler.running:
-            scheduler.start()
-
-start_scheduler()
-
-# ── Models / Pydantic ─────────────────────────────────────────────────────────
+
+# ── Startup ───────────────────────────────────────────────────────────────────
+@app.on_event("startup")
+async def startup_event():
+    logger.info("🎉 Memulai SIKOMO Forecast API Server...")
+    os.makedirs(runtime_config.model_dir, exist_ok=True)
+    forecast_scheduler.start_all(default_schedules=runtime_config.default_schedules)
+    logger.info("🚀 API Server siap menerima permintaan.")
+
+
+@app.on_event("shutdown")
+async def shutdown_event():
+    forecast_scheduler.stop_all()
+    logger.info("🛑 API Server dimatikan.")
+
+
+# ── Pydantic Models ──────────────────────────────────────────────────────────
 class ForecastRequest(BaseModel):
     komoditas_id: int
 
 class InsightUpdate(BaseModel):
-    konten : str
-    tipe   : str
-    ikon   : str
-    urutan : int
+    konten: str
+    tipe: str
+    ikon: str
+    urutan: int
 
 class RingkasanUpdate(BaseModel):
-    status_analisis  : Optional[str] = None
-    deskripsi_status : Optional[str] = None
-    tren             : Optional[str] = None
+    status_analisis: Optional[str] = None
+    deskripsi_status: Optional[str] = None
+    tren: Optional[str] = None
 
 class ModelUpdate(BaseModel):
-    deskripsi       : Optional[str] = None
+    deskripsi: Optional[str] = None
     catatan_validasi: Optional[str] = None
 
-class EnvUpdate(BaseModel):
-    key  : str
+class RuntimeConfigUpdate(BaseModel):
+    key: str
     value: str
 
-class SchedulerConfig(BaseModel):
-    enabled: bool
-    hour   : int = 1
-    minute : int = 0
+class ScheduleAdd(BaseModel):
+    cron_expression: str
+    label: Optional[str] = ""
+
 
-# ── Endpoints ─────────────────────────────────────────────────────────────────
+# ══════════════════════════════════════════════════════════════════════════════
+# ENDPOINTS
+# ══════════════════════════════════════════════════════════════════════════════
 
 @app.get("/health")
 def health():
     return {"status": "ok", "time": datetime.now().isoformat()}
 
-# AUTH
+# ── Auth ──────────────────────────────────────────────────────────────────────
 @app.post("/auth/login")
 def login(body: dict):
-    if body.get('password') != os.getenv('DASHBOARD_PASSWORD', 'Bandulan112'):
+    if body.get('password') != settings.DASHBOARD_PASSWORD:
         raise HTTPException(status_code=401, detail="Password salah")
-    return {"token": API_KEY}
+    return {"token": settings.API_SECRET_KEY}
+
+# ── Status & Logs (realtime) ─────────────────────────────────────────────────
+@app.get("/status", dependencies=[Depends(verify_token)])
+def get_status():
+    """Overall system status including scheduler and running tasks."""
+    sched = forecast_scheduler.get_status()
+    return {
+        **sched,
+        "running_tasks": {k: v for k, v in running_tasks.items() if v},
+        "any_forecast_running": any(running_tasks.values()),
+    }
 
-# KOMODITAS
+@app.get("/logs", dependencies=[Depends(verify_token)])
+def get_logs(limit: int = Query(200, le=500), level: Optional[str] = None):
+    """Get structured logs with optional level filter."""
+    return memory_handler.get_logs(limit=limit, level=level)
+
+# ── Komoditas ─────────────────────────────────────────────────────────────────
 @app.get("/komoditas", dependencies=[Depends(verify_token)])
 def list_komoditas():
     df = get_all_komoditas()
     return df.to_dict('records')
 
-# PREDIKSI DATA (untuk dashboard frontend)
+# ── Prediksi Data ─────────────────────────────────────────────────────────────
 @app.get("/prediksi/{komoditas_id}", dependencies=[Depends(verify_token)])
 def get_prediksi(komoditas_id: int):
     return get_prediksi_data(komoditas_id)
 
-# MANUAL FORECAST (trigger dari frontend)
+# ── Manual Forecast ───────────────────────────────────────────────────────────
 @app.post("/forecast/run", dependencies=[Depends(verify_token)])
 def run_forecast_manual(req: ForecastRequest, bg: BackgroundTasks):
+    """Run forecast for a SINGLE komoditas (not all)."""
+    if running_tasks.get(req.komoditas_id):
+        raise HTTPException(409, f"Komoditas ID {req.komoditas_id} sedang diproses.")
+
     komoditas_list = get_all_komoditas()
     row = komoditas_list[komoditas_list['id'] == req.komoditas_id]
     if row.empty:
         raise HTTPException(404, "Komoditas tidak ditemukan")
     nama = row.iloc[0]['nama']
+    stop_event.clear()
     bg.add_task(run_forecast_for_komoditas, req.komoditas_id, nama)
     return {"message": f"Forecast untuk {nama} dimulai di background."}
 
 @app.post("/forecast/run-all", dependencies=[Depends(verify_token)])
 def run_forecast_all(bg: BackgroundTasks):
-    bg.add_task(auto_forecast_job)
+    """Run forecast for ALL komoditas."""
+    if any(running_tasks.values()):
+        raise HTTPException(409, "Ada forecast yang sedang berjalan.")
+    stop_event.clear()
+    bg.add_task(auto_forecast_all)
     return {"message": "Forecast semua komoditas dimulai."}
 
-# LOG
-@app.get("/forecast/log", dependencies=[Depends(verify_token)])
-def get_log():
-    return {"log": forecast_log[-100:]}  # 100 baris terakhir
+@app.post("/forecast/stop", dependencies=[Depends(verify_token)])
+def stop_forecast():
+    """Abort running forecast."""
+    logger.warning("🛑 Menerima permintaan penghentian forecast...")
+    stop_event.set()
+    return {"success": True, "message": "Permintaan penghentian dikirim."}
 
-# SCHEDULER
-@app.get("/scheduler/status", dependencies=[Depends(verify_token)])
-def scheduler_status():
-    return {
-        "enabled": os.getenv('AUTO_FORECAST_ENABLED', 'false'),
-        "hour"   : os.getenv('AUTO_FORECAST_HOUR', '1'),
-        "minute" : os.getenv('AUTO_FORECAST_MINUTE', '0'),
-        "running": scheduler.running,
-        "jobs"   : [str(j) for j in scheduler.get_jobs()],
-    }
+# ── Scheduler (Multiple Schedules) ───────────────────────────────────────────
+@app.get("/schedules", dependencies=[Depends(verify_token)])
+def list_schedules():
+    return forecast_scheduler.list_schedules()
 
-@app.post("/scheduler/config", dependencies=[Depends(verify_token)])
-def update_scheduler(cfg: SchedulerConfig):
-    env_file = '.env'
-    set_key(env_file, 'AUTO_FORECAST_ENABLED', str(cfg.enabled).lower())
-    set_key(env_file, 'AUTO_FORECAST_HOUR',    str(cfg.hour))
-    set_key(env_file, 'AUTO_FORECAST_MINUTE',  str(cfg.minute))
-    os.environ['AUTO_FORECAST_ENABLED'] = str(cfg.enabled).lower()
-    os.environ['AUTO_FORECAST_HOUR']    = str(cfg.hour)
-    os.environ['AUTO_FORECAST_MINUTE']  = str(cfg.minute)
-    start_scheduler()
-    return {"message": "Scheduler diperbarui."}
-
-# ENV EDITOR
-@app.get("/env", dependencies=[Depends(verify_token)])
-def get_env():
-    """Baca .env untuk ditampilkan di dashboard (tanpa nilai sensitif diekspos mentah)."""
-    allowed = [
-        'DB_HOST','DB_PORT','DB_NAME','DB_USER',
-        'AUTO_FORECAST_ENABLED','AUTO_FORECAST_HOUR','AUTO_FORECAST_MINUTE',
-        'OPTUNA_TRIALS','MODEL_DIR',
-    ]
-    return {k: os.getenv(k, '') for k in allowed}
-
-@app.post("/env", dependencies=[Depends(verify_token)])
-def update_env(body: EnvUpdate):
-    allowed = [
-        'DB_HOST','DB_PORT','DB_NAME','DB_USER','DB_PASSWORD',
-        'AUTO_FORECAST_ENABLED','AUTO_FORECAST_HOUR','AUTO_FORECAST_MINUTE',
-        'OPTUNA_TRIALS','MODEL_DIR','API_SECRET_KEY',
-    ]
-    if body.key not in allowed:
-        raise HTTPException(400, f"Key '{body.key}' tidak diizinkan untuk diubah.")
-    set_key('.env', body.key, body.value)
-    os.environ[body.key] = body.value
-    return {"message": f"{body.key} berhasil diperbarui."}
-
-# CRUD INSIGHT
+@app.post("/schedules/add", dependencies=[Depends(verify_token)])
+def add_schedule(schedule: ScheduleAdd):
+    try:
+        job_id = forecast_scheduler.add_schedule(
+            schedule.cron_expression, label=schedule.label
+        )
+        return {
+            "success": True,
+            "job_id": job_id,
+            "message": f"Jadwal berhasil ditambahkan: {schedule.cron_expression}",
+        }
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.delete("/schedules/{job_id}/remove", dependencies=[Depends(verify_token)])
+def remove_schedule(job_id: str):
+    try:
+        forecast_scheduler.remove_schedule(job_id)
+        return {"success": True, "message": "Jadwal berhasil dihapus."}
+    except KeyError:
+        raise HTTPException(status_code=404, detail="Jadwal tidak ditemukan")
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.post("/schedule/start", dependencies=[Depends(verify_token)])
+def start_scheduler():
+    forecast_scheduler.start_all(default_schedules=runtime_config.default_schedules)
+    return {"success": True, "message": "Scheduler forecast diaktifkan."}
+
+@app.post("/schedule/stop", dependencies=[Depends(verify_token)])
+def stop_scheduler():
+    forecast_scheduler.stop_all()
+    return {"success": True, "message": "Scheduler forecast dimatikan."}
+
+# ── Runtime Config ────────────────────────────────────────────────────────────
+@app.get("/settings", dependencies=[Depends(verify_token)])
+def get_runtime_settings():
+    """Get runtime configuration (editable via dashboard)."""
+    return runtime_config.to_dict()
+
+@app.post("/settings", dependencies=[Depends(verify_token)])
+def update_runtime_settings(body: RuntimeConfigUpdate):
+    """Update a single runtime config key."""
+    try:
+        runtime_config.update(body.key, body.value)
+        return {"message": f"{body.key} berhasil diperbarui ke '{body.value}'."}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+# ── CRUD Insight ────────────────────────────────────���─────────────────────────
 @app.get("/insight/{komoditas_id}", dependencies=[Depends(verify_token)])
 def get_insights(komoditas_id: int):
     engine = get_engine()
-    rows = engine.execute(
-        f"SELECT * FROM insight_prediksi WHERE komoditas_id={komoditas_id} ORDER BY urutan"
-    ).fetchall()
-    return [dict(r) for r in rows]
+    with engine.connect() as conn:
+        rows = conn.execute(
+            text("SELECT * FROM insight_prediksi WHERE komoditas_id=:kid ORDER BY urutan"),
+            {'kid': komoditas_id}
+        ).fetchall()
+    return [dict(r._mapping) for r in rows]
 
 @app.put("/insight/{insight_id}", dependencies=[Depends(verify_token)])
 def update_insight(insight_id: int, body: InsightUpdate):
@@ -269,7 +351,7 @@ def delete_insight(insight_id: int):
         conn.execute(text("DELETE FROM insight_prediksi WHERE id=:id"), {'id': insight_id})
     return {"message": "Insight dihapus."}
 
-# CRUD RINGKASAN
+# ── CRUD Ringkasan ────────────────────────────────────────────────────────────
 @app.put("/ringkasan/{komoditas_id}", dependencies=[Depends(verify_token)])
 def update_ringkasan(komoditas_id: int, body: RingkasanUpdate):
     engine = get_engine()
@@ -284,7 +366,7 @@ def update_ringkasan(komoditas_id: int, body: RingkasanUpdate):
         )
     return {"message": "Ringkasan diperbarui."}
 
-# CRUD MODEL ML
+# ── CRUD Model ML ─────────────────────────────────────────────────────────────
 @app.put("/model-ml/{komoditas_id}", dependencies=[Depends(verify_token)])
 def update_model_ml(komoditas_id: int, body: ModelUpdate):
     engine = get_engine()
@@ -299,8 +381,6 @@ def update_model_ml(komoditas_id: int, body: ModelUpdate):
         )
     return {"message": "Model ML diperbarui."}
 
-# MOUNT FRONTEND STATIS
-# Mount static files as the very last route so it catches all non-API paths
-import os
+# ── Mount Frontend Static ─────────────────────────────────────────────────────
 if os.path.isdir("static"):
     app.mount("/", StaticFiles(directory="static", html=True), name="frontend")

backend/ml_pipeline.py

@@ -1,5 +1,5 @@
 # ml_pipeline.py — Full ML pipeline: cleaning → training → forecasting → labeling
-import os, json, pickle, warnings
+import os, json, pickle, warnings, logging
 import pandas as pd
 import numpy as np
 from datetime import date
@@ -7,11 +7,13 @@ from sklearn.metrics import mean_squared_error, mean_absolute_error, r2_score
 from sklearn.model_selection import TimeSeriesSplit
 import lightgbm as lgb
 import xgboost as xgb
-from prophet import Prophet
 from statsmodels.tsa.arima.model import ARIMA
+from statsmodels.tsa.statespace.sarimax import SARIMAX
 import optuna
 optuna.logging.set_verbosity(optuna.logging.WARNING)
 warnings.filterwarnings('ignore')
+logging.getLogger('cmdstanpy').setLevel(logging.WARNING)
+logging.getLogger('prophet').setLevel(logging.WARNING)
 
 MODEL_DIR = os.getenv('MODEL_DIR', 'models')
 os.makedirs(MODEL_DIR, exist_ok=True)
@@ -76,6 +78,8 @@ def recommend_models(quality_info):
         models.append('prophet')
     if quality_info['cv'] < 5 and quality_info['missing_pct'] < 20:
         models.append('arima')
+    if quality_info['total_records'] >= 90 and quality_info['missing_pct'] < 25:
+        models.append('sarima')
     return models
 
 # ══════════════════════════════════════════════════════════════════════════════
@@ -155,20 +159,64 @@ def train_xgboost(X_train, y_train, X_test, y_test):
     return m, evaluate_model(y_test, m.predict(X_test), 'XGBoost')
 
 def train_prophet(dates_train, y_train, dates_test, y_test):
-    df_train = pd.DataFrame({'ds': dates_train.values, 'y': y_train.values})
-    df_test  = pd.DataFrame({'ds': dates_test.values})
-    m = Prophet(yearly_seasonality=True, weekly_seasonality=True,
-                daily_seasonality=False, changepoint_prior_scale=0.05)
-    m.fit(df_train)
-    fc   = m.predict(df_test)
+    """Train Prophet with robust error handling and data validation."""
+    try:
+        from prophet import Prophet
+    except ImportError:
+        raise RuntimeError("Prophet not installed")
+    # Ensure clean datetime + float data
+    ds_train = pd.to_datetime(dates_train).reset_index(drop=True)
+    y_tr = y_train.reset_index(drop=True).astype(float)
+    ds_test = pd.to_datetime(dates_test).reset_index(drop=True)
+    y_te = y_test.reset_index(drop=True).astype(float)
+    # Remove NaN rows
+    mask = y_tr.notna()
+    ds_train = ds_train[mask]
+    y_tr = y_tr[mask]
+    if len(y_tr) < 30:
+        raise ValueError("Prophet: data training terlalu sedikit setelah cleaning")
+    df_train = pd.DataFrame({'ds': ds_train.values, 'y': y_tr.values})
+    df_test = pd.DataFrame({'ds': ds_test.values})
+    m = Prophet(
+        yearly_seasonality=True, weekly_seasonality=True,
+        daily_seasonality=False, changepoint_prior_scale=0.05,
+    )
+    # Suppress Prophet stdout
+    import io, sys
+    old_stdout = sys.stdout
+    sys.stdout = io.StringIO()
+    try:
+        m.fit(df_train)
+    finally:
+        sys.stdout = old_stdout
+    fc = m.predict(df_test)
     pred = np.clip(fc['yhat'].values, 0, None)
-    return m, evaluate_model(y_test.values, pred, 'Prophet')
+    return m, evaluate_model(y_te.values, pred, 'Prophet')
 
 def train_arima(y_train, y_test):
-    m   = ARIMA(y_train.values, order=(5, 1, 0)).fit()
-    fc  = np.clip(m.forecast(steps=len(y_test)), 0, None)
+    m = ARIMA(y_train.values, order=(5, 1, 0)).fit()
+    fc = np.clip(m.forecast(steps=len(y_test)), 0, None)
     return m, evaluate_model(y_test.values, fc, 'ARIMA')
 
+def train_sarima(y_train, y_test):
+    """Train SARIMA with seasonal_order for weekly patterns."""
+    m = SARIMAX(
+        y_train.values, order=(1, 1, 1), seasonal_order=(1, 1, 1, 7),
+        enforce_stationarity=False, enforce_invertibility=False,
+    ).fit(disp=False, maxiter=200)
+    fc = np.clip(m.forecast(steps=len(y_test)), 0, None)
+    return m, evaluate_model(y_test.values, fc, 'SARIMA')
+
+def forecast_sarima(model, n_days=7):
+    """Forecast n_days ahead using fitted SARIMA model."""
+    fc = np.clip(model.forecast(steps=n_days), 0, None)
+    last_date = pd.Timestamp.now().normalize()
+    return [
+        {'tanggal': str((last_date + pd.Timedelta(days=i+1)).date()),
+         'harga_prediksi': round(float(fc[i]), 2)}
+        for i in range(n_days)
+    ]
+
 def tune_with_optuna(model_name, X_train, y_train, n_trials=50):
     def objective(trial):
         if model_name == 'LightGBM':
@@ -235,6 +283,16 @@ def forecast_tree(model, df_hist, target_col, other_cols, feature_cols, n_days=7
         df_temp.loc[df_temp['date'] == next_date, target_col] = pred
     return preds
 
+def forecast_arima(model, n_days=7):
+    """Forecast n_days ahead using fitted ARIMA model."""
+    fc = np.clip(model.forecast(steps=n_days), 0, None)
+    last_date = pd.Timestamp.now().normalize()
+    return [
+        {'tanggal': str((last_date + pd.Timedelta(days=i+1)).date()),
+         'harga_prediksi': round(float(fc[i]), 2)}
+        for i in range(n_days)
+    ]
+
 def forecast_prophet(model, last_date, n_days=7):
     future = pd.DataFrame({'ds': pd.date_range(start=last_date + pd.Timedelta(days=1), periods=n_days)})
     fc = model.predict(future)
@@ -329,7 +387,7 @@ def get_labels(mape, rmse, mean_price, cv, preds, komoditas_nama):
 
 def run_pipeline(komoditas_id: int, komoditas_nama: str, df: pd.DataFrame,
                  target_market: str, pasar_id: int, n_trials: int = 50,
-                 log_cb=None):
+                 forecast_days: int = 7, log_cb=None):
     """
     Full pipeline: cleaning → training → tuning → forecasting → labeling → save.
     log_cb: callback function(msg: str) untuk streaming log ke frontend.
@@ -392,11 +450,19 @@ def run_pipeline(komoditas_id: int, komoditas_nama: str, df: pd.DataFrame,
     if 'arima' in models_to_run:
         log("Training ARIMA...")
         try:
-            _, res = train_arima(y_train, y_test)
-            all_results['ARIMA'] = {**res, 'obj': None, 'type': 'arima'}
+            arima_model, res = train_arima(y_train, y_test)
+            all_results['ARIMA'] = {**res, 'obj': arima_model, 'type': 'arima'}
         except Exception as e:
             log(f"⚠️ ARIMA gagal: {e}")
 
+    if 'sarima' in models_to_run:
+        log("Training SARIMA...")
+        try:
+            sarima_model, res = train_sarima(y_train, y_test)
+            all_results['SARIMA'] = {**res, 'obj': sarima_model, 'type': 'sarima'}
+        except Exception as e:
+            log(f"⚠️ SARIMA gagal: {e}")
+
     best_name = min(all_results, key=lambda k: all_results[k]['rmse'])
     best      = all_results[best_name]
     log(f"🏆 Best model: {best_name} (RMSE={best['rmse']:.2f})")
@@ -423,13 +489,19 @@ def run_pipeline(komoditas_id: int, komoditas_nama: str, df: pd.DataFrame,
             final_name   = f"{best_name}_Tuned"
             log(f"✅ Tuned lebih baik, improvement={(best['rmse']-tuned_res['rmse'])/best['rmse']*100:.1f}%")
 
-    # ── Forecast 7 hari ──
-    log("📅 Forecasting 7 hari...")
+    # ── Forecast ──
+    n_fc = forecast_days
+    log(f"📅 Forecasting {n_fc} hari...")
     df_hist = df[['date', target_market] + [c for c in other_cols if c in df.columns]].copy()
-    if final_result.get('type') == 'prophet' or final_name == 'Prophet':
-        predictions = forecast_prophet(final_model, df_hist['date'].max())
+    f_type = final_result.get('type', '')
+    if f_type == 'prophet' or final_name == 'Prophet':
+        predictions = forecast_prophet(final_model, df_hist['date'].max(), n_fc)
+    elif f_type == 'arima':
+        predictions = forecast_arima(final_model, n_fc)
+    elif f_type == 'sarima':
+        predictions = forecast_sarima(final_model, n_fc)
     else:
-        predictions = forecast_tree(final_model, df_hist, target_market, other_cols, feature_cols)
+        predictions = forecast_tree(final_model, df_hist, target_market, other_cols, feature_cols, n_fc)
 
     # ── Labels ──
     cv = quality_reports.get(target_market, {}).get('cv', 0)
@@ -478,6 +550,10 @@ def run_pipeline(komoditas_id: int, komoditas_nama: str, df: pd.DataFrame,
         'predictions'    : predictions,
         'labels'         : labels,
         'metadata'       : metadata,
-        'model_comparison': {k: {'rmse': round(v['rmse'],2), 'mape': round(v['mape'],4)}
-                             for k, v in all_results.items()},
+        'model_comparison': {k: {
+            'rmse': round(v['rmse'], 4),
+            'mape': round(v['mape'], 4),
+            'mae': round(v['mae'], 4),
+            'r2': round(v['r2'], 4)
+        } for k, v in all_results.items()},
     }

backend/requirements.txt

@@ -12,4 +12,6 @@ pymysql==1.1.1
 sqlalchemy==2.0.30
 python-dotenv==1.0.1
 apscheduler==3.10.4
-python-multipart==0.0.9
+python-multipart==0.0.9
+pydantic-settings==2.2.1
+pytz==2024.1

backend/scheduler.py

@@ -0,0 +1,161 @@
+# scheduler.py — Multiple-schedule forecast manager
+# Ported from Daily Scrapper architecture with forecast-specific job
+
+from apscheduler.schedulers.background import BackgroundScheduler
+from apscheduler.triggers.cron import CronTrigger
+from logger import get_app_logger
+from datetime import datetime
+import uuid
+
+try:
+    from pytz import timezone as pytz_timezone
+    wib_tz = pytz_timezone("Asia/Jakarta")
+except ImportError:
+    import zoneinfo
+    wib_tz = zoneinfo.ZoneInfo("Asia/Jakarta")
+
+logger = get_app_logger("scheduler")
+
+
+class ForecastScheduler:
+    """Manages multiple forecast schedules with APScheduler."""
+
+    def __init__(self):
+        self.scheduler = BackgroundScheduler(timezone=wib_tz)
+        self.is_running = False
+        self.last_run = None
+        self.last_result = None
+        self.schedules = {}  # id -> {"cron": str, "label": str}
+        self._forecast_job_fn = None  # Set by main.py
+
+    def set_forecast_job(self, fn):
+        """Register the forecast function to be called by scheduled jobs."""
+        self._forecast_job_fn = fn
+
+    def _run_job(self):
+        """Execute the registered forecast job."""
+        logger.info("⏰ Menjalankan forecast terjadwal otomatis...")
+        try:
+            if self._forecast_job_fn:
+                self._forecast_job_fn()
+            self.last_run = datetime.now()
+            self.last_result = {
+                "success": True,
+                "timestamp": self.last_run.isoformat(),
+            }
+            logger.info("✅ Forecast terjadwal selesai.")
+        except Exception as e:
+            self.last_result = {
+                "success": False,
+                "error": str(e),
+                "timestamp": datetime.now().isoformat(),
+            }
+            logger.error(f"❌ Forecast terjadwal gagal: {e}")
+
+    def start_all(self, default_schedules: str = ""):
+        """Start the scheduler engine. Optionally load default schedules."""
+        if not self.is_running:
+            self.scheduler = BackgroundScheduler(timezone=wib_tz)
+            if self._forecast_job_fn:
+                # Re-register all existing schedules
+                for jid, info in list(self.schedules.items()):
+                    try:
+                        trigger = CronTrigger.from_crontab(info["cron"], timezone=wib_tz)
+                        self.scheduler.add_job(
+                            self._run_job, trigger, id=jid, replace_existing=True
+                        )
+                    except Exception:
+                        pass
+            self.scheduler.start()
+            self.is_running = True
+            logger.info("▶️ Mesin Scheduler Forecast telah diaktifkan.")
+
+            # Load defaults if no schedules exist
+            if not self.schedules and default_schedules:
+                for cron in [s.strip() for s in default_schedules.split(",") if s.strip()]:
+                    self.add_schedule(cron, label="Jadwal Default")
+
+    def stop_all(self):
+        """Stop the scheduler engine and clear all jobs."""
+        if self.is_running:
+            try:
+                self.scheduler.shutdown(wait=False)
+            except Exception:
+                pass
+            self.scheduler = BackgroundScheduler(timezone=wib_tz)
+            self.is_running = False
+            self.schedules.clear()
+            logger.info("⏹️ Mesin Scheduler Forecast telah dimatikan.")
+
+    def add_schedule(self, cron_expression: str, label: str = "") -> str:
+        """Add a new cron schedule. Returns job_id."""
+        job_id = str(uuid.uuid4())[:8]
+        try:
+            trigger = CronTrigger.from_crontab(cron_expression, timezone=wib_tz)
+            self.scheduler.add_job(
+                self._run_job, trigger, id=job_id, replace_existing=True
+            )
+            if not label:
+                label = f"Jadwal {cron_expression}"
+            self.schedules[job_id] = {"cron": cron_expression, "label": label}
+            logger.info(f"📅 Jadwal baru ditambahkan: {cron_expression} ({label})")
+
+            # Auto-start if not running
+            if not self.is_running:
+                self.scheduler.start()
+                self.is_running = True
+                logger.info("▶️ Scheduler otomatis menyala karena ada jadwal baru.")
+
+            return job_id
+        except Exception as e:
+            logger.error(f"❌ Gagal menambahkan jadwal cron '{cron_expression}': {e}")
+            raise ValueError(f"Format Cron tidak valid: {e}")
+
+    def remove_schedule(self, job_id: str):
+        """Remove a schedule by job_id."""
+        if job_id in self.schedules:
+            try:
+                self.scheduler.remove_job(job_id)
+            except Exception:
+                pass
+            deleted = self.schedules.pop(job_id)
+            logger.info(f"🗑️ Jadwal dihapus: {deleted['cron']} ({deleted['label']})")
+        else:
+            raise KeyError("ID Jadwal tidak ditemukan")
+
+    def list_schedules(self):
+        """List all active schedules with next_run info."""
+        result = []
+        jobs_map = {job.id: job for job in self.scheduler.get_jobs()}
+        for jid, info in self.schedules.items():
+            job_obj = jobs_map.get(jid)
+            next_run = (
+                job_obj.next_run_time.isoformat()
+                if (job_obj and job_obj.next_run_time)
+                else None
+            )
+            result.append({
+                "id": jid,
+                "cron_expression": info["cron"],
+                "label": info["label"],
+                "next_run": next_run,
+            })
+        return result
+
+    def get_status(self):
+        """Get overall scheduler status."""
+        jobs = self.scheduler.get_jobs() if self.is_running else []
+        next_runs = [j.next_run_time for j in jobs if j.next_run_time]
+        next_run_overall = min(next_runs).isoformat() if next_runs else None
+
+        return {
+            "is_running": self.is_running,
+            "last_run": self.last_run.isoformat() if self.last_run else None,
+            "last_result": self.last_result,
+            "next_run": next_run_overall,
+            "active_schedules_count": len(self.schedules),
+        }
+
+
+# Singleton instance
+forecast_scheduler = ForecastScheduler()

frontend/app/dashboard/forecast/page.tsx

@@ -1,121 +1,283 @@
-// app/dashboard/forecast/page.tsx
+// app/dashboard/forecast/page.tsx — Forecast Management: Scheduler + Logs + Run
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { api } from '@/lib/api'
-import { Play, RefreshCw } from 'lucide-react'
+import { Play, Square, RefreshCw, Calendar, Terminal, Plus, Trash2, Info } from 'lucide-react'
+
+interface LogItem { timestamp: string; level: string; source: string; message: string }
 
 export default function ForecastPage() {
-  const [komoditas, setKomoditas]   = useState<any[]>([])
-  const [scheduler, setScheduler]   = useState<any>(null)
-  const [log, setLog]               = useState<string[]>([])
-  const [loading, setLoading]       = useState(false)
-  const [hour, setHour]             = useState('1')
-  const [minute, setMinute]         = useState('0')
-  const [autoEnabled, setAuto]      = useState(false)
+  const [komoditas, setKomoditas] = useState<any[]>([])
+  const [status, setStatus] = useState<any>(null)
+  const [schedules, setSchedules] = useState<any[]>([])
+  const [logs, setLogs] = useState<LogItem[]>([])
+  const [runningIds, setRunningIds] = useState<Record<number, boolean>>({})
+  const [runAllLoading, setRunAllLoading] = useState(false)
+  const [logLevelFilter, setLogLevelFilter] = useState('ALL')
 
-  useEffect(() => {
-    api.getKomoditas().then(setKomoditas)
-    api.getScheduler().then(s => {
-      setScheduler(s)
-      setHour(s.hour)
-      setMinute(s.minute)
-      setAuto(s.enabled === 'true')
-    })
-    fetchLog()
-  }, [])
-
-  async function fetchLog() {
-    const res = await api.getLog()
-    setLog(res.log)
+  // Schedule form
+  const [selectedHour, setSelectedHour] = useState('01')
+  const [selectedMinute, setSelectedMinute] = useState('00')
+  const [newLabel, setNewLabel] = useState('')
+
+  const logsContainerRef = useRef<HTMLDivElement>(null)
+  const prevLogsLengthRef = useRef(0)
+
+  const fetchData = async () => {
+    try {
+      const [k, s, sc, l] = await Promise.all([
+        api.getKomoditas(), api.getStatus(), api.getSchedules(),
+        api.getLogs(200, logLevelFilter !== 'ALL' ? logLevelFilter : undefined)
+      ])
+      setKomoditas(k); setStatus(s); setSchedules(sc); setLogs(l)
+      // Sync running states from backend
+      if (s?.running_tasks) {
+        setRunningIds(prev => ({ ...prev, ...Object.fromEntries(Object.entries(s.running_tasks).map(([k, v]) => [Number(k), v])) }))
+      }
+    } catch {}
   }
 
+  useEffect(() => {
+    fetchData()
+    const interval = setInterval(fetchData, 3000)
+    return () => clearInterval(interval)
+  }, [logLevelFilter])
+
+  // Auto-scroll logs
+  useEffect(() => {
+    if (logs.length > prevLogsLengthRef.current && logsContainerRef.current) {
+      logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight
+    }
+    prevLogsLengthRef.current = logs.length
+  }, [logs])
+
+  // Actions
   async function runOne(id: number) {
-    setLoading(true)
-    await api.runForecast(id)
-    setTimeout(fetchLog, 2000)
-    setLoading(false)
+    setRunningIds(prev => ({ ...prev, [id]: true }))
+    try {
+      await api.runForecast(id)
+    } catch (e: any) {
+      alert(`❌ Gagal: ${e.message}`)
+      setRunningIds(prev => ({ ...prev, [id]: false }))
+    }
   }
 
   async function runAll() {
-    setLoading(true)
-    await api.runForecastAll()
-    setTimeout(fetchLog, 3000)
-    setLoading(false)
+    setRunAllLoading(true)
+    try { await api.runForecastAll() } catch (e: any) { alert(`❌ ${e.message}`) }
+    setRunAllLoading(false)
+  }
+
+  async function stopForecast() {
+    try { await api.stopForecast() } catch {}
   }
 
-  async function saveScheduler() {
-    await api.updateScheduler({ enabled: autoEnabled, hour: parseInt(hour), minute: parseInt(minute) })
-    const s = await api.getScheduler()
-    setScheduler(s)
-    alert('Scheduler diperbarui!')
+  async function handleAddSchedule(e: React.FormEvent) {
+    e.preventDefault()
+    try {
+      const cron = `${selectedMinute} ${selectedHour} * * *`
+      await api.addSchedule(cron, newLabel.trim() || `Jadwal ${selectedHour}:${selectedMinute}`)
+      setNewLabel('')
+      fetchData()
+    } catch (e: any) { alert(`❌ ${e.message}`) }
   }
 
+  async function removeSchedule(jobId: string) {
+    try { await api.removeSchedule(jobId); fetchData() } catch (e: any) { alert(`❌ ${e.message}`) }
+  }
+
+  async function toggleScheduler() {
+    try {
+      if (status?.is_running) await api.stopScheduler()
+      else await api.startScheduler()
+      fetchData()
+    } catch (e: any) { alert(`❌ ${e.message}`) }
+  }
+
+  const anyRunning = status?.any_forecast_running || runAllLoading
+
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">Forecast Management</h1>
-
-      {/* Scheduler */}
-      <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
-        <h2 className="font-semibold mb-4">⏰ Auto Forecast Scheduler</h2>
-        <div className="flex items-center gap-4 flex-wrap">
-          <label className="flex items-center gap-2 text-sm">
-            <input type="checkbox" checked={autoEnabled} onChange={e => setAuto(e.target.checked)}
-              className="w-4 h-4 accent-blue-500"/>
-            Aktifkan auto forecast harian
-          </label>
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-gray-400">Jam:</span>
-            <input type="number" min="0" max="23" value={hour} onChange={e => setHour(e.target.value)}
-              className="w-16 px-2 py-1 rounded bg-gray-800 text-white text-sm border border-gray-700"/>
-            <span className="text-gray-400">:</span>
-            <input type="number" min="0" max="59" value={minute} onChange={e => setMinute(e.target.value)}
-              className="w-16 px-2 py-1 rounded bg-gray-800 text-white text-sm border border-gray-700"/>
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* LEFT: Controls */}
+      <div className="lg:col-span-2 space-y-6">
+        {/* Scheduler Status & Toggle */}
+        <div className="glass-panel rounded-2xl p-6 border border-white/5">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2">
+              <Calendar className="w-4 h-4 text-teal-400" /> Status Scheduler
+            </h2>
+            <span className={`px-2.5 py-1 rounded-full text-[11px] font-bold ${
+              status?.is_running ? 'bg-teal-500/10 text-teal-400 border border-teal-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
+            }`}>
+              {status?.is_running ? 'RUNNING' : 'STOPPED'}
+            </span>
           </div>
-          <button onClick={saveScheduler}
-            className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 rounded-lg text-sm font-medium">
-            Simpan
+          <div className="grid grid-cols-2 gap-3 mb-4">
+            <div className="bg-slate-900/50 rounded-xl p-3 border border-white/5">
+              <span className="text-xs text-slate-500 block">Jadwal Aktif</span>
+              <span className="text-lg font-bold text-slate-200">{schedules.length} <span className="text-xs font-normal text-slate-400">tugas</span></span>
+            </div>
+            <div className="bg-slate-900/50 rounded-xl p-3 border border-white/5">
+              <span className="text-xs text-slate-500 block">Run Berikutnya</span>
+              <span className="text-sm font-bold text-teal-400 block truncate mt-0.5">
+                {status?.next_run ? new Date(status.next_run).toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'short' }) : 'Tidak ada'}
+              </span>
+            </div>
+          </div>
+          <button onClick={toggleScheduler}
+            className={`w-full py-2.5 rounded-xl text-xs font-bold flex items-center justify-center gap-2 border transition ${
+              status?.is_running ? 'bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border-rose-500/20' : 'bg-teal-500/10 hover:bg-teal-500/20 text-teal-400 border-teal-500/20'
+            }`}>
+            {status?.is_running ? <><Square className="w-3.5 h-3.5" /> Matikan Scheduler</> : <><Play className="w-3.5 h-3.5" /> Nyalakan Scheduler</>}
           </button>
         </div>
-        <p className="text-gray-500 text-xs mt-3">
-          Status: {scheduler?.running ? '🟢 Running' : '⚫ Stopped'} | Jobs: {scheduler?.jobs?.length || 0}
-        </p>
-      </div>
 
-      {/* Manual Trigger */}
-      <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="font-semibold">🚀 Manual Forecast</h2>
-          <button onClick={runAll} disabled={loading}
-            className="flex items-center gap-2 px-4 py-1.5 bg-green-700 hover:bg-green-600 rounded-lg text-sm disabled:opacity-50">
-            <Play size={14}/> Run Semua
-          </button>
+        {/* Schedule Manager */}
+        <div className="glass-panel rounded-2xl p-6 border border-white/5">
+          <h2 className="text-base font-bold text-slate-100 flex items-center gap-2 mb-1">
+            <Calendar className="w-5 h-5 text-teal-400" /> Manajemen Jadwal
+          </h2>
+          <p className="text-xs text-slate-400 mb-4">Atur waktu forecast otomatis. Bisa tambah lebih dari satu jadwal.</p>
+
+          {/* Quick presets */}
+          <div className="flex flex-wrap gap-1.5 mb-4">
+            <span className="text-[10px] font-semibold text-slate-500 px-2 self-center">Preset:</span>
+            {[['01','00','Dini Hari'],['06','00','Pagi'],['12','00','Siang'],['18','00','Sore']].map(([h,m,l]) => (
+              <button key={h+m} onClick={() => { setSelectedHour(h); setSelectedMinute(m); setNewLabel(`${l} (${h}:${m})`) }}
+                className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[11px] rounded-lg transition">{h}:{m}</button>
+            ))}
+          </div>
+
+          {/* Add form */}
+          <form onSubmit={handleAddSchedule} className="grid grid-cols-12 gap-3 mb-5 bg-slate-900/40 p-4 rounded-xl border border-white/5">
+            <div className="col-span-3">
+              <label className="block text-[11px] font-medium text-slate-400 mb-1">Jam (WIB)</label>
+              <select value={selectedHour} onChange={e => setSelectedHour(e.target.value)} className="w-full glass-input rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none">
+                {Array.from({length:24}).map((_,i) => <option key={i} value={i.toString().padStart(2,'0')} className="bg-slate-900">{i.toString().padStart(2,'0')}</option>)}
+              </select>
+            </div>
+            <div className="col-span-3">
+              <label className="block text-[11px] font-medium text-slate-400 mb-1">Menit</label>
+              <select value={selectedMinute} onChange={e => setSelectedMinute(e.target.value)} className="w-full glass-input rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none">
+                {Array.from({length:60}).map((_,i) => <option key={i} value={i.toString().padStart(2,'0')} className="bg-slate-900">{i.toString().padStart(2,'0')}</option>)}
+              </select>
+            </div>
+            <div className="col-span-4">
+              <label className="block text-[11px] font-medium text-slate-400 mb-1">Label</label>
+              <input type="text" value={newLabel} onChange={e => setNewLabel(e.target.value)} placeholder="Contoh: Forecast Pagi"
+                className="w-full glass-input rounded-lg px-3 py-2 text-xs text-slate-200 placeholder:text-slate-600 focus:outline-none" />
+            </div>
+            <div className="col-span-2 flex items-end">
+              <button type="submit" className="w-full bg-teal-500 hover:bg-teal-400 text-slate-900 font-bold py-2 px-3 rounded-lg text-xs flex items-center justify-center gap-1 transition">
+                <Plus className="w-3.5 h-3.5 stroke-[3]" /> Tambah
+              </button>
+            </div>
+          </form>
+
+          {/* Schedules table */}
+          <table className="w-full text-left border-collapse">
+            <thead><tr className="border-b border-slate-800 text-[11px] text-slate-500 font-semibold uppercase">
+              <th className="pb-3 px-3">Label</th><th className="pb-3 px-3">Waktu</th><th className="pb-3 px-3">Next Run</th><th className="pb-3 px-3 text-right">Aksi</th>
+            </tr></thead>
+            <tbody className="divide-y divide-slate-800/60 text-xs text-slate-300">
+              {schedules.length === 0 ? (
+                <tr><td colSpan={4} className="text-center py-6 text-slate-500 italic">Belum ada jadwal.</td></tr>
+              ) : schedules.map(item => (
+                <tr key={item.id} className="hover:bg-slate-800/30 transition">
+                  <td className="py-3 px-3 font-medium text-slate-200">{item.label}</td>
+                  <td className="py-3 px-3">
+                    <span className="font-mono text-teal-400 font-bold bg-teal-500/10 py-1 px-2 rounded-lg border border-teal-500/20">
+                      {(() => { const p = item.cron_expression.split(' '); return p.length >= 2 ? `${p[1].padStart(2,'0')}:${p[0].padStart(2,'0')}` : item.cron_expression })()}
+                    </span>
+                  </td>
+                  <td className="py-3 px-3 text-slate-400">{item.next_run ? new Date(item.next_run).toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'short' }) : '-'}</td>
+                  <td className="py-3 px-3 text-right">
+                    <button onClick={() => removeSchedule(item.id)} className="p-1.5 text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-lg transition" title="Hapus">
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
-        <div className="grid grid-cols-2 gap-3">
-          {komoditas.map((k: any) => (
-            <div key={k.id} className="flex items-center justify-between bg-gray-800 rounded-lg px-4 py-3">
-              <span className="text-sm font-medium">{k.nama}</span>
-              <button onClick={() => runOne(k.id)} disabled={loading}
-                className="flex items-center gap-1 px-3 py-1 bg-blue-700 hover:bg-blue-600 rounded text-xs disabled:opacity-50">
-                <Play size={12}/> Run
+
+        {/* Manual Forecast */}
+        <div className="glass-panel rounded-2xl p-6 border border-white/5">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-base font-bold text-slate-100 flex items-center gap-2">
+              <RefreshCw className="w-5 h-5 text-indigo-400" /> Manual Forecast
+            </h2>
+            <div className="flex gap-2">
+              <button onClick={runAll} disabled={anyRunning}
+                className="bg-gradient-to-r from-teal-500 to-indigo-500 hover:from-teal-400 hover:to-indigo-400 text-white font-semibold py-2 px-4 rounded-xl text-xs flex items-center gap-2 disabled:opacity-50 transition active:scale-[0.98]">
+                {anyRunning ? <><RefreshCw className="w-3.5 h-3.5 animate-spin" /> Processing...</> : <><Play className="w-3.5 h-3.5 fill-current" /> Run Semua</>}
               </button>
+              {anyRunning && (
+                <button onClick={stopForecast}
+                  className="bg-rose-500/20 hover:bg-rose-500/30 text-rose-400 font-medium py-2 px-4 rounded-xl text-xs flex items-center gap-2 border border-rose-500/30 transition animate-pulse">
+                  <Square className="w-3.5 h-3.5 fill-current" /> Stop
+                </button>
+              )}
             </div>
-          ))}
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            {komoditas.map((k: any) => {
+              const isRunning = runningIds[k.id] || status?.running_tasks?.[k.id]
+              return (
+                <div key={k.id} className="flex items-center justify-between bg-slate-900/50 rounded-xl px-4 py-3 border border-white/5 hover:border-white/10 transition">
+                  <span className="text-sm font-medium text-slate-200">{k.nama}</span>
+                  <button onClick={() => runOne(k.id)} disabled={isRunning || anyRunning}
+                    className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition ${
+                      isRunning ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' : 'bg-indigo-500/10 hover:bg-indigo-500/20 text-indigo-400 border border-indigo-500/20 disabled:opacity-30'
+                    }`}>
+                    {isRunning ? <><RefreshCw className="w-3 h-3 animate-spin" /> Running</> : <><Play className="w-3 h-3" /> Run</>}
+                  </button>
+                </div>
+              )
+            })}
+          </div>
         </div>
       </div>
 
-      {/* Log */}
-      <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
-        <div className="flex items-center justify-between mb-3">
-          <h2 className="font-semibold">📋 Log</h2>
-          <button onClick={fetchLog} className="text-gray-400 hover:text-white">
-            <RefreshCw size={16}/>
-          </button>
+      {/* RIGHT: Terminal Logs */}
+      <div className="glass-panel rounded-2xl p-6 border border-white/5 flex flex-col h-[500px] lg:h-[calc(100vh-180px)] lg:sticky lg:top-24">
+        <div className="flex items-center justify-between pb-4 mb-4 border-b border-white/5">
+          <h2 className="text-sm font-bold text-slate-100 flex items-center gap-2">
+            <Terminal className="w-4 h-4 text-indigo-400" /> Log Real-time
+          </h2>
+          <div className="flex bg-slate-900/80 rounded-lg p-0.5 border border-white/5">
+            {['ALL', 'INFO', 'WARNING', 'ERROR'].map(lvl => (
+              <button key={lvl} onClick={() => setLogLevelFilter(lvl)}
+                className={`px-2 py-1 rounded-md text-[10px] font-bold transition ${logLevelFilter === lvl ? 'bg-slate-700 text-white' : 'text-slate-500 hover:text-slate-300'}`}>
+                {lvl}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div ref={logsContainerRef} className="flex-1 bg-slate-950 rounded-xl p-4 font-mono text-xs overflow-y-auto border border-black/50 shadow-inner space-y-1">
+          {logs.length === 0 ? (
+            <div className="m-auto text-slate-600 text-center italic h-full flex items-center justify-center">[ Menunggu aktivitas... ]</div>
+          ) : logs.map((log, idx) => {
+            let color = 'text-teal-400'
+            if (log.level === 'WARNING') color = 'text-amber-400'
+            if (log.level === 'ERROR') color = 'text-rose-400'
+            const t = new Date(log.timestamp).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+            return (
+              <div key={idx} className="leading-relaxed break-words hover:bg-white/[0.02] px-1 rounded transition-colors">
+                <span className="text-slate-600 select-none">[{t}]</span>{' '}
+                <span className={`font-semibold ${color} select-none`}>[{log.level}]</span>{' '}
+                <span className="text-slate-500 select-none">({log.source})</span>{' '}
+                <span className="text-slate-300">{log.message}</span>
+              </div>
+            )
+          })}
         </div>
-        <div className="bg-black rounded-lg p-4 h-64 overflow-y-auto font-mono text-xs text-green-400">
-          {log.length === 0
-            ? <span className="text-gray-600">Belum ada log.</span>
-            : log.map((l, i) => <div key={i}>{l}</div>)
-          }
+
+        <div className="mt-3 flex items-center justify-between text-[11px] text-slate-500 px-1">
+          <span className="flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full bg-teal-500 animate-pulse" /> Live polling aktif</span>
+          <span>Buffer: {logs.length} baris</span>
         </div>
       </div>
     </div>

frontend/app/dashboard/layout.tsx

@@ -1,48 +1,144 @@
-// app/dashboard/layout.tsx
+// app/dashboard/layout.tsx — Dashboard shell with navbar, realtime clock, sidebar nav
 'use client'
-import { useEffect } from 'react'
-import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { useRouter, usePathname } from 'next/navigation'
 import Link from 'next/link'
-import { BarChart2, Settings, Terminal, Home, LogOut } from 'lucide-react'
+import { BarChart2, Settings, Terminal, Home, LogOut, Activity } from 'lucide-react'
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter()
+  const pathname = usePathname()
+  const [currentTime, setCurrentTime] = useState('')
+  const [status, setStatus] = useState<any>(null)
 
   useEffect(() => {
     if (!localStorage.getItem('sikomo_token')) router.push('/')
   }, [])
 
+  // Realtime clock WIB
+  useEffect(() => {
+    const updateClock = () => {
+      try {
+        setCurrentTime(new Date().toLocaleTimeString('id-ID', {
+          timeZone: 'Asia/Jakarta', hour: '2-digit', minute: '2-digit', second: '2-digit'
+        }))
+      } catch {
+        setCurrentTime(new Date().toLocaleTimeString('id-ID'))
+      }
+    }
+    updateClock()
+    const timer = setInterval(updateClock, 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  // Polling status
+  useEffect(() => {
+    const fetchStatus = async () => {
+      try {
+        const token = localStorage.getItem('sikomo_token')
+        if (!token) return
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/status`, {
+          headers: { Authorization: `Bearer ${token}` }
+        })
+        if (res.ok) setStatus(await res.json())
+      } catch {}
+    }
+    fetchStatus()
+    const interval = setInterval(fetchStatus, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
   function logout() {
     localStorage.removeItem('sikomo_token')
     router.push('/')
   }
 
   const links = [
-    { href: '/dashboard',          icon: Home,     label: 'Overview' },
+    { href: '/dashboard', icon: Home, label: 'Overview' },
     { href: '/dashboard/prediksi', icon: BarChart2, label: 'Prediksi' },
-    { href: '/dashboard/forecast', icon: Terminal,  label: 'Forecast' },
-    { href: '/dashboard/settings', icon: Settings,  label: 'Pengaturan' },
+    { href: '/dashboard/forecast', icon: Terminal, label: 'Forecast' },
+    { href: '/dashboard/settings', icon: Settings, label: 'Pengaturan' },
   ]
 
   return (
-    <div className="flex min-h-screen bg-gray-950 text-white">
-      {/* Sidebar */}
-      <aside className="w-56 bg-gray-900 border-r border-gray-800 flex flex-col py-6 px-4 gap-2">
-        <div className="text-xl font-bold text-white mb-6 px-2">SIKOMO</div>
-        {links.map(l => (
-          <Link key={l.href} href={l.href}
-            className="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition text-sm">
-            <l.icon size={16}/> {l.label}
-          </Link>
-        ))}
-        <div className="mt-auto">
-          <button onClick={logout}
-            className="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-500 hover:text-red-400 transition text-sm w-full">
-            <LogOut size={16}/> Logout
-          </button>
+    <div className="min-h-screen relative overflow-hidden">
+      {/* Subtle background glows */}
+      <div className="absolute top-0 right-1/4 w-96 h-96 bg-teal-500/10 rounded-full blur-3xl pointer-events-none" />
+      <div className="absolute bottom-10 left-10 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
+
+      {/* Top Navbar */}
+      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur sticky top-0 z-30 px-6 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-tr from-teal-500 to-indigo-500 rounded-xl flex items-center justify-center shadow-md">
+              <Activity className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <h1 className="font-bold text-lg leading-tight bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
+                SIKOMO Forecast
+              </h1>
+              <div className="flex items-center gap-2 mt-0.5">
+                <span className="flex h-2 w-2 relative">
+                  <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${status?.is_running ? 'bg-teal-400' : 'bg-rose-400'}`} />
+                  <span className={`relative inline-flex rounded-full h-2 w-2 ${status?.is_running ? 'bg-teal-500' : 'bg-rose-500'}`} />
+                </span>
+                <span className="text-[11px] font-medium text-slate-400 uppercase tracking-wider">
+                  Engine: {status?.is_running ? 'Active' : 'Inactive'}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {/* Navigation pills */}
+            <nav className="hidden md:flex items-center gap-1 bg-slate-950/60 px-1.5 py-1 rounded-xl border border-white/5">
+              {links.map(l => {
+                const active = pathname === l.href
+                return (
+                  <Link key={l.href} href={l.href}
+                    className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition ${
+                      active ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-slate-200'
+                    }`}>
+                    <l.icon size={14} /> {l.label}
+                  </Link>
+                )
+              })}
+            </nav>
+
+            {/* Realtime clock */}
+            {currentTime && (
+              <div className="hidden sm:flex items-center gap-2 bg-slate-950/60 px-3 py-1.5 rounded-xl border border-white/5 font-mono text-xs text-teal-400">
+                <span className="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse" />
+                <span>{currentTime} WIB</span>
+              </div>
+            )}
+
+            <button onClick={logout}
+              className="flex items-center gap-2 px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-medium border border-slate-700 transition">
+              <LogOut className="w-3.5 h-3.5" /> Keluar
+            </button>
+          </div>
         </div>
-      </aside>
-      <main className="flex-1 p-8 overflow-auto">{children}</main>
+      </header>
+
+      {/* Mobile nav */}
+      <nav className="md:hidden flex items-center gap-1 px-4 py-2 border-b border-slate-800 bg-slate-900/60 overflow-x-auto">
+        {links.map(l => {
+          const active = pathname === l.href
+          return (
+            <Link key={l.href} href={l.href}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition ${
+                active ? 'bg-slate-700 text-white' : 'text-slate-400'
+              }`}>
+              <l.icon size={14} /> {l.label}
+            </Link>
+          )
+        })}
+      </nav>
+
+      <main className="max-w-7xl mx-auto px-6 py-8 relative z-10 animate-fade-in">
+        {children}
+      </main>
     </div>
   )
 }

frontend/app/dashboard/page.tsx

@@ -1,68 +1,139 @@
-// app/dashboard/page.tsx
+// app/dashboard/page.tsx — Overview with bento grid, stats, polling
 'use client'
 import { useEffect, useState } from 'react'
 import { api } from '@/lib/api'
+import { Activity, BarChart3, Calendar, Layers, TrendingUp, Zap } from 'lucide-react'
 
 export default function OverviewPage() {
   const [komoditas, setKomoditas] = useState<any[]>([])
-  const [scheduler, setScheduler] = useState<any>(null)
+  const [status, setStatus] = useState<any>(null)
+  const [schedules, setSchedules] = useState<any[]>([])
+
+  const fetchData = async () => {
+    try {
+      const [k, s, sc] = await Promise.all([
+        api.getKomoditas(), api.getStatus(), api.getSchedules()
+      ])
+      setKomoditas(k); setStatus(s); setSchedules(sc)
+    } catch {}
+  }
 
   useEffect(() => {
-    api.getKomoditas().then(setKomoditas)
-    api.getScheduler().then(setScheduler)
+    fetchData()
+    const interval = setInterval(fetchData, 5000)
+    return () => clearInterval(interval)
   }, [])
 
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-6">Overview</h1>
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
+        Dashboard Overview
+      </h1>
+
+      {/* Stats Bento Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {/* Total Komoditas */}
+        <div className="glass-panel rounded-2xl p-5 border border-white/5 animate-slide-up">
+          <div className="flex items-center gap-2 mb-3">
+            <Layers className="w-4 h-4 text-teal-400" />
+            <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Komoditas</span>
+          </div>
+          <p className="text-3xl font-bold text-white">{komoditas.length}</p>
+          <p className="text-xs text-slate-500 mt-1">komoditas aktif terdaftar</p>
+        </div>
 
-      {/* Stats */}
-      <div className="grid grid-cols-3 gap-4 mb-8">
-        <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
-          <p className="text-gray-400 text-sm">Total Komoditas</p>
-          <p className="text-3xl font-bold mt-1">{komoditas.length}</p>
+        {/* Scheduler Status */}
+        <div className="glass-panel rounded-2xl p-5 border border-white/5 animate-slide-up" style={{ animationDelay: '0.1s' }}>
+          <div className="flex items-center gap-2 mb-3">
+            <Activity className="w-4 h-4 text-indigo-400" />
+            <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Scheduler</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className={`px-2.5 py-1 rounded-full text-[11px] font-bold ${
+              status?.is_running ? 'bg-teal-500/10 text-teal-400 border border-teal-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
+            }`}>
+              {status?.is_running ? 'RUNNING' : 'STOPPED'}
+            </span>
+          </div>
+          <p className="text-xs text-slate-500 mt-2">{schedules.length} jadwal terdaftar</p>
         </div>
-        <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
-          <p className="text-gray-400 text-sm">Status Scheduler</p>
-          <p className={`text-xl font-bold mt-1 ${scheduler?.enabled === 'true' ? 'text-green-400' : 'text-gray-500'}`}>
-            {scheduler?.enabled === 'true' ? '🟢 Aktif' : '⚫ Nonaktif'}
+
+        {/* Next Run */}
+        <div className="glass-panel rounded-2xl p-5 border border-white/5 animate-slide-up" style={{ animationDelay: '0.2s' }}>
+          <div className="flex items-center gap-2 mb-3">
+            <Calendar className="w-4 h-4 text-amber-400" />
+            <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Run Berikutnya</span>
+          </div>
+          <p className="text-sm font-bold text-teal-400 truncate">
+            {status?.next_run
+              ? new Date(status.next_run).toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'short' })
+              : 'Tidak ada jadwal'}
           </p>
         </div>
-        <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
-          <p className="text-gray-400 text-sm">Jadwal Forecast</p>
-          <p className="text-xl font-bold mt-1">
-            {scheduler ? `${String(scheduler.hour).padStart(2,'0')}:${String(scheduler.minute).padStart(2,'0')}` : '--:--'}
+
+        {/* Active Tasks */}
+        <div className="glass-panel rounded-2xl p-5 border border-white/5 animate-slide-up" style={{ animationDelay: '0.3s' }}>
+          <div className="flex items-center gap-2 mb-3">
+            <Zap className="w-4 h-4 text-amber-400" />
+            <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Forecast Aktif</span>
+          </div>
+          <p className="text-3xl font-bold text-white">
+            {status?.running_tasks ? Object.keys(status.running_tasks).length : 0}
           </p>
+          <p className="text-xs text-slate-500 mt-1">komoditas sedang diproses</p>
         </div>
       </div>
 
-      {/* Daftar Komoditas */}
-      <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
-        <h2 className="font-semibold mb-4">Daftar Komoditas</h2>
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="text-gray-400 border-b border-gray-800">
-              <th className="text-left py-2">ID</th>
-              <th className="text-left py-2">Nama</th>
-              <th className="text-left py-2">Volatilitas</th>
-              <th className="text-left py-2">Skor</th>
-            </tr>
-          </thead>
-          <tbody>
-            {komoditas.map((k: any) => (
-              <tr key={k.id} className="border-b border-gray-800 hover:bg-gray-800/50">
-                <td className="py-2 text-gray-400">{k.id}</td>
-                <td className="py-2 font-medium">{k.nama}</td>
-                <td className="py-2">
-                  <span className={`px-2 py-0.5 rounded-full text-xs ${
-                    k.volatile ? 'bg-red-900 text-red-300' : 'bg-green-900 text-green-300'
-                  }`}>{k.volatile ? 'Tinggi' : 'Rendah'}</span>
-                </td>
-                <td className="py-2 text-gray-300">{k.volatilitas_skor?.toFixed(2)}</td>
+      {/* Komoditas Table */}
+      <div className="glass-panel rounded-2xl p-6 border border-white/5 animate-slide-up" style={{ animationDelay: '0.4s' }}>
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-base font-bold text-slate-100 flex items-center gap-2">
+            <BarChart3 className="w-5 h-5 text-teal-400" /> Daftar Komoditas
+          </h2>
+          <span className="text-xs text-slate-500">{komoditas.length} items</span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="border-b border-slate-800 text-[11px] text-slate-500 font-semibold uppercase">
+                <th className="pb-3 px-3">ID</th>
+                <th className="pb-3 px-3">Nama Komoditas</th>
+                <th className="pb-3 px-3">Volatilitas</th>
+                <th className="pb-3 px-3">Skor</th>
+                <th className="pb-3 px-3">Status</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody className="divide-y divide-slate-800/60 text-sm text-slate-300">
+              {komoditas.map((k: any) => (
+                <tr key={k.id} className="hover:bg-slate-800/30 transition">
+                  <td className="py-3 px-3 text-slate-500 font-mono text-xs">{k.id}</td>
+                  <td className="py-3 px-3 font-medium text-slate-200">{k.nama}</td>
+                  <td className="py-3 px-3">
+                    <span className={`px-2.5 py-1 rounded-full text-[11px] font-bold ${
+                      k.volatile
+                        ? 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
+                        : 'bg-teal-500/10 text-teal-400 border border-teal-500/20'
+                    }`}>
+                      {k.volatile ? 'Tinggi' : 'Rendah'}
+                    </span>
+                  </td>
+                  <td className="py-3 px-3 font-mono text-xs text-slate-400">
+                    {k.volatilitas_skor?.toFixed(2) ?? '-'}
+                  </td>
+                  <td className="py-3 px-3">
+                    {status?.running_tasks?.[k.id] ? (
+                      <span className="flex items-center gap-1 text-xs text-amber-400">
+                        <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" /> Running
+                      </span>
+                    ) : (
+                      <span className="text-xs text-slate-500">Idle</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   )

frontend/app/dashboard/prediksi/page.tsx

@@ -1,20 +1,20 @@
-// app/dashboard/prediksi/page.tsx
+// app/dashboard/prediksi/page.tsx — Prediksi data + Model Comparison
 'use client'
 import { useEffect, useState } from 'react'
 import { api } from '@/lib/api'
-import { Pencil, Trash2, Plus, Check, X } from 'lucide-react'
+import { Pencil, Trash2, Plus, Check, X, BarChart3, TrendingUp, Shield, Layers } from 'lucide-react'
 
 export default function PrediksiPage() {
   const [komoditas, setKomoditas] = useState<any[]>([])
-  const [selected, setSelected]   = useState<number | null>(null)
-  const [data, setData]           = useState<any>(null)
+  const [selected, setSelected] = useState<number | null>(null)
+  const [data, setData] = useState<any>(null)
   const [editInsight, setEditInsight] = useState<any>(null)
-  const [newInsight, setNewInsight]   = useState(false)
-  const [form, setForm]           = useState({ konten:'', tipe:'positif', ikon:'check-circle', urutan:1 })
+  const [newInsight, setNewInsight] = useState(false)
+  const [form, setForm] = useState({ konten: '', tipe: 'positif', ikon: 'check-circle', urutan: 1 })
   const [editRingkasan, setEditRingkasan] = useState(false)
-  const [ringForm, setRingForm]   = useState({ status_analisis:'', deskripsi_status:'' })
+  const [ringForm, setRingForm] = useState({ status_analisis: '', deskripsi_status: '' })
   const [editModel, setEditModel] = useState(false)
-  const [modelForm, setModelForm] = useState({ deskripsi:'', catatan_validasi:'' })
+  const [modelForm, setModelForm] = useState({ deskripsi: '', catatan_validasi: '' })
 
   useEffect(() => { api.getKomoditas().then(setKomoditas) }, [])
 
@@ -22,239 +22,215 @@ export default function PrediksiPage() {
     setSelected(id)
     const d = await api.getPrediksi(id)
     setData(d)
-    setRingForm({
-      status_analisis : d.ringkasan?.status_analisis  || '',
-      deskripsi_status: d.ringkasan?.deskripsi_status || '',
-    })
-    setModelForm({
-      deskripsi       : d.model?.deskripsi        || '',
-      catatan_validasi: d.model?.catatan_validasi  || '',
-    })
+    setRingForm({ status_analisis: d.ringkasan?.status_analisis || '', deskripsi_status: d.ringkasan?.deskripsi_status || '' })
+    setModelForm({ deskripsi: d.model?.deskripsi || '', catatan_validasi: d.model?.catatan_validasi || '' })
   }
 
-  async function saveInsightEdit() {
-    await api.updateInsight(editInsight.id, form)
-    setEditInsight(null)
-    selectKomoditas(selected!)
-  }
-
-  async function saveNewInsight() {
-    await api.addInsight(selected!, form)
-    setNewInsight(false)
-    setForm({ konten:'', tipe:'positif', ikon:'check-circle', urutan:1 })
-    selectKomoditas(selected!)
-  }
-
-  async function deleteInsight(id: number) {
-    if (!confirm('Hapus insight ini?')) return
-    await api.deleteInsight(id)
-    selectKomoditas(selected!)
-  }
+  async function saveInsightEdit() { await api.updateInsight(editInsight.id, form); setEditInsight(null); selectKomoditas(selected!) }
+  async function saveNewInsight() { await api.addInsight(selected!, form); setNewInsight(false); setForm({ konten: '', tipe: 'positif', ikon: 'check-circle', urutan: 1 }); selectKomoditas(selected!) }
+  async function deleteInsight(id: number) { if (!confirm('Hapus insight ini?')) return; await api.deleteInsight(id); selectKomoditas(selected!) }
+  async function saveRingkasan() { await api.updateRingkasan(selected!, ringForm); setEditRingkasan(false); selectKomoditas(selected!) }
+  async function saveModel() { await api.updateModelMl(selected!, modelForm); setEditModel(false); selectKomoditas(selected!) }
 
-  async function saveRingkasan() {
-    await api.updateRingkasan(selected!, ringForm)
-    setEditRingkasan(false)
-    selectKomoditas(selected!)
+  const tipeColor: Record<string, string> = {
+    positif: 'bg-teal-500/10 text-teal-400 border-teal-500/20',
+    negatif: 'bg-rose-500/10 text-rose-400 border-rose-500/20',
+    netral: 'bg-slate-700/50 text-slate-300 border-slate-600/30',
   }
 
-  async function saveModel() {
-    await api.updateModelMl(selected!, modelForm)
-    setEditModel(false)
-    selectKomoditas(selected!)
-  }
-
-  const tipeColor: Record<string, string> = {
-    positif: 'bg-green-900 text-green-300',
-    negatif: 'bg-red-900 text-red-300',
-    netral : 'bg-gray-700 text-gray-300',
+  function metricColor(val: number, type: 'mape' | 'r2') {
+    if (type === 'mape') return val < 5 ? 'text-teal-400' : val < 15 ? 'text-amber-400' : 'text-rose-400'
+    return val > 0.8 ? 'text-teal-400' : val > 0.5 ? 'text-amber-400' : 'text-rose-400'
   }
 
   return (
     <div className="space-y-6">
-      <h1 className="text-2xl font-bold">Data Prediksi</h1>
+      <h1 className="text-2xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">Data Prediksi</h1>
 
-      {/* Pilih komoditas */}
+      {/* Komoditas selector */}
       <div className="flex gap-2 flex-wrap">
         {komoditas.map((k: any) => (
           <button key={k.id} onClick={() => selectKomoditas(k.id)}
-            className={`px-4 py-1.5 rounded-full text-sm font-medium border transition ${
-              selected === k.id
-                ? 'bg-blue-600 border-blue-500 text-white'
-                : 'border-gray-700 text-gray-400 hover:border-gray-500'
-            }`}>
-            {k.nama}
-          </button>
+            className={`px-4 py-2 rounded-xl text-xs font-medium border transition ${
+              selected === k.id ? 'bg-gradient-to-r from-teal-500/20 to-indigo-500/20 border-teal-500/30 text-white' : 'border-slate-700 text-slate-400 hover:border-slate-500 hover:text-slate-200'
+            }`}>{k.nama}</button>
         ))}
       </div>
 
       {data && (
-        <div className="grid grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in">
+
+          {/* Model Comparison (NEW) */}
+          {data.all_models && data.all_models.length > 0 && (
+            <div className="lg:col-span-2 glass-panel rounded-2xl p-6 border border-white/5">
+              <h2 className="text-base font-bold text-slate-100 flex items-center gap-2 mb-4">
+                <Layers className="w-5 h-5 text-indigo-400" /> Perbandingan Model
+              </h2>
+              <div className="overflow-x-auto">
+                <table className="w-full text-left border-collapse">
+                  <thead><tr className="border-b border-slate-800 text-[11px] text-slate-500 font-semibold uppercase">
+                    <th className="pb-3 px-3">Model</th><th className="pb-3 px-3">RMSE</th><th className="pb-3 px-3">MAPE (%)</th><th className="pb-3 px-3">MAE</th><th className="pb-3 px-3">R²</th><th className="pb-3 px-3">Status</th>
+                  </tr></thead>
+                  <tbody className="divide-y divide-slate-800/60 text-sm">
+                    {data.all_models.map((m: any, i: number) => (
+                      <tr key={i} className={`hover:bg-slate-800/30 transition ${m.is_active ? 'bg-teal-500/5' : ''}`}>
+                        <td className="py-3 px-3 font-medium text-slate-200">{m.nama_model}</td>
+                        <td className="py-3 px-3 font-mono text-xs text-slate-300">{Number(m.rmse).toFixed(2)}</td>
+                        <td className={`py-3 px-3 font-mono text-xs font-bold ${metricColor(m.mape, 'mape')}`}>{Number(m.mape).toFixed(2)}%</td>
+                        <td className="py-3 px-3 font-mono text-xs text-slate-300">{Number(m.mae).toFixed(2)}</td>
+                        <td className={`py-3 px-3 font-mono text-xs font-bold ${metricColor(m.r2_score, 'r2')}`}>{Number(m.r2_score).toFixed(4)}</td>
+                        <td className="py-3 px-3">
+                          {m.is_active ? (
+                            <span className="px-2.5 py-1 rounded-full text-[10px] font-bold bg-gradient-to-r from-teal-500/20 to-indigo-500/20 text-teal-400 border border-teal-500/20">🏆 BEST</span>
+                          ) : <span className="text-xs text-slate-500">Runner-up</span>}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
 
-          {/* Ringkasan Prediksi */}
-          <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
+          {/* Ringkasan */}
+          <div className="glass-panel rounded-2xl p-6 border border-white/5">
             <div className="flex justify-between items-center mb-3">
-              <h2 className="font-semibold">Ringkasan Prediksi</h2>
-              <button onClick={() => setEditRingkasan(!editRingkasan)}
-                className="text-gray-400 hover:text-white"><Pencil size={15}/></button>
+              <h2 className="font-semibold flex items-center gap-2"><TrendingUp className="w-4 h-4 text-teal-400" /> Ringkasan</h2>
+              <button onClick={() => setEditRingkasan(!editRingkasan)} className="text-slate-400 hover:text-white"><Pencil size={15} /></button>
             </div>
             {!editRingkasan ? (
-              <div className="space-y-2 text-sm">
-                <div className="flex justify-between">
-                  <span className="text-gray-400">Rentang Harga</span>
-                  <span>Rp {data.ringkasan?.harga_min?.toLocaleString()} – Rp {data.ringkasan?.harga_max?.toLocaleString()}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-400">Tren</span>
-                  <span>{data.ringkasan?.tren}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-400">Status</span>
-                  <span>{data.ringkasan?.status_analisis}</span>
-                </div>
-                <p className="text-gray-500 text-xs mt-2">{data.ringkasan?.deskripsi_status}</p>
+              <div className="space-y-3 text-sm">
+                <div className="flex justify-between"><span className="text-slate-400">Rentang Harga</span><span className="font-mono">Rp {data.ringkasan?.harga_min?.toLocaleString()} – {data.ringkasan?.harga_max?.toLocaleString()}</span></div>
+                <div className="flex justify-between"><span className="text-slate-400">Tren</span><span>{data.ringkasan?.tren}</span></div>
+                <div className="flex justify-between"><span className="text-slate-400">Status</span><span>{data.ringkasan?.status_analisis}</span></div>
+                <p className="text-slate-500 text-xs mt-2 bg-slate-900/50 rounded-lg p-3 border border-white/5">{data.ringkasan?.deskripsi_status}</p>
               </div>
             ) : (
               <div className="space-y-3">
-                <div>
-                  <label className="text-xs text-gray-400">Status Analisis</label>
-                  <input value={ringForm.status_analisis} onChange={e => setRingForm({...ringForm, status_analisis: e.target.value})}
-                    className="w-full mt-1 px-3 py-1.5 rounded bg-gray-800 text-sm text-white border border-gray-700"/>
-                </div>
-                <div>
-                  <label className="text-xs text-gray-400">Deskripsi Status</label>
-                  <textarea value={ringForm.deskripsi_status} onChange={e => setRingForm({...ringForm, deskripsi_status: e.target.value})}
-                    rows={3} className="w-full mt-1 px-3 py-1.5 rounded bg-gray-800 text-sm text-white border border-gray-700"/>
-                </div>
+                <div><label className="text-xs text-slate-400">Status Analisis</label>
+                  <input value={ringForm.status_analisis} onChange={e => setRingForm({ ...ringForm, status_analisis: e.target.value })}
+                    className="w-full mt-1 glass-input rounded-lg px-3 py-2 text-sm text-white focus:outline-none" /></div>
+                <div><label className="text-xs text-slate-400">Deskripsi</label>
+                  <textarea value={ringForm.deskripsi_status} onChange={e => setRingForm({ ...ringForm, deskripsi_status: e.target.value })}
+                    rows={3} className="w-full mt-1 glass-input rounded-lg px-3 py-2 text-sm text-white focus:outline-none" /></div>
                 <div className="flex gap-2">
-                  <button onClick={saveRingkasan} className="flex items-center gap-1 px-3 py-1 bg-blue-600 rounded text-xs"><Check size={12}/>Simpan</button>
-                  <button onClick={() => setEditRingkasan(false)} className="flex items-center gap-1 px-3 py-1 bg-gray-700 rounded text-xs"><X size={12}/>Batal</button>
+                  <button onClick={saveRingkasan} className="flex items-center gap-1 px-3 py-1.5 bg-teal-500 text-slate-900 rounded-lg text-xs font-bold"><Check size={12} />Simpan</button>
+                  <button onClick={() => setEditRingkasan(false)} className="flex items-center gap-1 px-3 py-1.5 bg-slate-700 rounded-lg text-xs"><X size={12} />Batal</button>
                 </div>
               </div>
             )}
           </div>
 
           {/* Model ML */}
-          <div className="bg-gray-900 border border-gray-800 rounded-xl p-5">
+          <div className="glass-panel rounded-2xl p-6 border border-white/5">
             <div className="flex justify-between items-center mb-3">
-              <h2 className="font-semibold">Model & Metodologi</h2>
-              <button onClick={() => setEditModel(!editModel)} className="text-gray-400 hover:text-white"><Pencil size={15}/></button>
+              <h2 className="font-semibold flex items-center gap-2"><Shield className="w-4 h-4 text-indigo-400" /> Model Aktif</h2>
+              <button onClick={() => setEditModel(!editModel)} className="text-slate-400 hover:text-white"><Pencil size={15} /></button>
             </div>
             {!editModel ? (
-              <div className="space-y-2 text-sm">
-                <div className="flex justify-between"><span className="text-gray-400">Model</span><span>{data.model?.nama_model}</span></div>
-                <div className="flex justify-between"><span className="text-gray-400">MAPE</span><span>{data.model?.mape}%</span></div>
-                <div className="flex justify-between"><span className="text-gray-400">RMSE</span><span>{data.model?.rmse}</span></div>
-                <div className="flex justify-between"><span className="text-gray-400">Stabilitas</span>
-                  <span className="uppercase text-xs font-bold text-purple-300">{data.model?.stabilitas}</span>
+              <div className="space-y-3 text-sm">
+                <div className="flex justify-between"><span className="text-slate-400">Model</span><span className="font-bold text-teal-400">{data.model?.nama_model}</span></div>
+                <div className="flex justify-between"><span className="text-slate-400">MAPE</span><span className="font-mono">{data.model?.mape}%</span></div>
+                <div className="flex justify-between"><span className="text-slate-400">RMSE</span><span className="font-mono">{data.model?.rmse}</span></div>
+                <div className="flex justify-between"><span className="text-slate-400">Stabilitas</span>
+                  <span className="uppercase text-[11px] font-bold px-2 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">{data.model?.stabilitas}</span>
                 </div>
-                <p className="text-gray-500 text-xs mt-2">{data.model?.deskripsi}</p>
+                <p className="text-slate-500 text-xs mt-2">{data.model?.deskripsi}</p>
               </div>
             ) : (
               <div className="space-y-3">
-                <div>
-                  <label className="text-xs text-gray-400">Deskripsi Model</label>
-                  <textarea value={modelForm.deskripsi} onChange={e => setModelForm({...modelForm, deskripsi: e.target.value})}
-                    rows={3} className="w-full mt-1 px-3 py-1.5 rounded bg-gray-800 text-sm text-white border border-gray-700"/>
-                </div>
-                <div>
-                  <label className="text-xs text-gray-400">Catatan Validasi</label>
-                  <textarea value={modelForm.catatan_validasi} onChange={e => setModelForm({...modelForm, catatan_validasi: e.target.value})}
-                    rows={2} className="w-full mt-1 px-3 py-1.5 rounded bg-gray-800 text-sm text-white border border-gray-700"/>
-                </div>
+                <div><label className="text-xs text-slate-400">Deskripsi</label>
+                  <textarea value={modelForm.deskripsi} onChange={e => setModelForm({ ...modelForm, deskripsi: e.target.value })}
+                    rows={3} className="w-full mt-1 glass-input rounded-lg px-3 py-2 text-sm text-white focus:outline-none" /></div>
+                <div><label className="text-xs text-slate-400">Catatan Validasi</label>
+                  <textarea value={modelForm.catatan_validasi} onChange={e => setModelForm({ ...modelForm, catatan_validasi: e.target.value })}
+                    rows={2} className="w-full mt-1 glass-input rounded-lg px-3 py-2 text-sm text-white focus:outline-none" /></div>
                 <div className="flex gap-2">
-                  <button onClick={saveModel} className="flex items-center gap-1 px-3 py-1 bg-blue-600 rounded text-xs"><Check size={12}/>Simpan</button>
-                  <button onClick={() => setEditModel(false)} className="flex items-center gap-1 px-3 py-1 bg-gray-700 rounded text-xs"><X size={12}/>Batal</button>
+                  <button onClick={saveModel} className="flex items-center gap-1 px-3 py-1.5 bg-teal-500 text-slate-900 rounded-lg text-xs font-bold"><Check size={12} />Simpan</button>
+                  <button onClick={() => setEditModel(false)} className="flex items-center gap-1 px-3 py-1.5 bg-slate-700 rounded-lg text-xs"><X size={12} />Batal</button>
                 </div>
               </div>
             )}
           </div>
 
-          {/* Insight Editor */}
-          <div className="col-span-2 bg-gray-900 border border-gray-800 rounded-xl p-5">
+          {/* Insights */}
+          <div className="lg:col-span-2 glass-panel rounded-2xl p-6 border border-white/5">
             <div className="flex justify-between items-center mb-4">
-              <h2 className="font-semibold">Insight Prediktif</h2>
-              <button onClick={() => setNewInsight(true)} className="flex items-center gap-1 px-3 py-1.5 bg-green-700 hover:bg-green-600 rounded text-xs">
-                <Plus size={13}/> Tambah
+              <h2 className="font-semibold flex items-center gap-2"><BarChart3 className="w-4 h-4 text-amber-400" /> Insight Prediktif</h2>
+              <button onClick={() => setNewInsight(true)} className="flex items-center gap-1 px-3 py-1.5 bg-teal-500 hover:bg-teal-400 text-slate-900 rounded-lg text-xs font-bold">
+                <Plus size={13} /> Tambah
               </button>
             </div>
             <div className="space-y-3">
               {(data.insights || []).map((ins: any) => (
                 <div key={ins.id}>
                   {editInsight?.id === ins.id ? (
-                    <div className="bg-gray-800 rounded-lg p-3 space-y-2">
-                      <textarea value={form.konten} onChange={e => setForm({...form, konten: e.target.value})}
-                        rows={2} className="w-full px-3 py-1.5 rounded bg-gray-700 text-sm text-white border border-gray-600"/>
+                    <div className="bg-slate-900/60 rounded-xl p-4 space-y-2 border border-white/5">
+                      <textarea value={form.konten} onChange={e => setForm({ ...form, konten: e.target.value })} rows={2}
+                        className="w-full glass-input rounded-lg px-3 py-2 text-sm text-white focus:outline-none" />
                       <div className="flex gap-2">
-                        <select value={form.tipe} onChange={e => setForm({...form, tipe: e.target.value})}
-                          className="px-2 py-1 rounded bg-gray-700 text-xs text-white border border-gray-600">
-                          <option>positif</option><option>negatif</option><option>netral</option>
+                        <select value={form.tipe} onChange={e => setForm({ ...form, tipe: e.target.value })} className="glass-input rounded-lg px-2 py-1 text-xs text-white focus:outline-none">
+                          <option value="positif">positif</option><option value="negatif">negatif</option><option value="netral">netral</option>
                         </select>
-                        <input value={form.ikon} onChange={e => setForm({...form, ikon: e.target.value})}
-                          placeholder="ikon (lucide name)" className="px-2 py-1 rounded bg-gray-700 text-xs text-white border border-gray-600 flex-1"/>
-                        <input type="number" value={form.urutan} onChange={e => setForm({...form, urutan: parseInt(e.target.value)})}
-                          className="w-16 px-2 py-1 rounded bg-gray-700 text-xs text-white border border-gray-600"/>
+                        <input value={form.ikon} onChange={e => setForm({ ...form, ikon: e.target.value })} placeholder="ikon" className="glass-input rounded-lg px-2 py-1 text-xs text-white focus:outline-none flex-1" />
+                        <input type="number" value={form.urutan} onChange={e => setForm({ ...form, urutan: parseInt(e.target.value) })} className="w-16 glass-input rounded-lg px-2 py-1 text-xs text-white focus:outline-none" />
                       </div>
                       <div className="flex gap-2">
-                        <button onClick={saveInsightEdit} className="flex items-center gap-1 px-3 py-1 bg-blue-600 rounded text-xs"><Check size={12}/>Simpan</button>
-                        <button onClick={() => setEditInsight(null)} className="flex items-center gap-1 px-3 py-1 bg-gray-700 rounded text-xs"><X size={12}/>Batal</button>
+                        <button onClick={saveInsightEdit} className="flex items-center gap-1 px-3 py-1 bg-teal-500 text-slate-900 rounded-lg text-xs font-bold"><Check size={12} />Simpan</button>
+                        <button onClick={() => setEditInsight(null)} className="flex items-center gap-1 px-3 py-1 bg-slate-700 rounded-lg text-xs"><X size={12} />Batal</button>
                       </div>
                     </div>
                   ) : (
-                    <div className="flex items-start justify-between bg-gray-800 rounded-lg px-4 py-3">
+                    <div className="flex items-start justify-between bg-slate-900/50 rounded-xl px-4 py-3 border border-white/5 hover:border-white/10 transition">
                       <div className="flex items-start gap-3">
-                        <span className={`text-xs px-2 py-0.5 rounded-full mt-0.5 ${tipeColor[ins.tipe] || tipeColor.netral}`}>{ins.tipe}</span>
-                        <p className="text-sm">{ins.konten}</p>
+                        <span className={`text-[11px] px-2.5 py-0.5 rounded-full mt-0.5 font-bold border ${tipeColor[ins.tipe] || tipeColor.netral}`}>{ins.tipe}</span>
+                        <p className="text-sm text-slate-200">{ins.konten}</p>
                       </div>
                       <div className="flex gap-2 ml-4 shrink-0">
-                        <button onClick={() => { setEditInsight(ins); setForm({ konten: ins.konten, tipe: ins.tipe, ikon: ins.ikon, urutan: ins.urutan }) }}
-                          className="text-gray-400 hover:text-white"><Pencil size={14}/></button>
-                        <button onClick={() => deleteInsight(ins.id)} className="text-gray-400 hover:text-red-400"><Trash2 size={14}/></button>
+                        <button onClick={() => { setEditInsight(ins); setForm({ konten: ins.konten, tipe: ins.tipe, ikon: ins.ikon, urutan: ins.urutan }) }} className="text-slate-400 hover:text-white"><Pencil size={14} /></button>
+                        <button onClick={() => deleteInsight(ins.id)} className="text-slate-400 hover:text-rose-400"><Trash2 size={14} /></button>
                       </div>
                     </div>
                   )}
                 </div>
               ))}
-
-              {/* Form tambah baru */}
               {newInsight && (
-                <div className="bg-gray-800 rounded-lg p-3 space-y-2 border border-green-800">
-                  <textarea value={form.konten} onChange={e => setForm({...form, konten: e.target.value})}
-                    rows={2} placeholder="Isi insight..." className="w-full px-3 py-1.5 rounded bg-gray-700 text-sm text-white border border-gray-600"/>
+                <div className="bg-slate-900/60 rounded-xl p-4 space-y-2 border border-teal-500/20">
+                  <textarea value={form.konten} onChange={e => setForm({ ...form, konten: e.target.value })} rows={2} placeholder="Isi insight..."
+                    className="w-full glass-input rounded-lg px-3 py-2 text-sm text-white focus:outline-none" />
                   <div className="flex gap-2">
-                    <select value={form.tipe} onChange={e => setForm({...form, tipe: e.target.value})}
-                      className="px-2 py-1 rounded bg-gray-700 text-xs text-white border border-gray-600">
-                      <option>positif</option><option>negatif</option><option>netral</option>
+                    <select value={form.tipe} onChange={e => setForm({ ...form, tipe: e.target.value })} className="glass-input rounded-lg px-2 py-1 text-xs text-white focus:outline-none">
+                      <option value="positif">positif</option><option value="negatif">negatif</option><option value="netral">netral</option>
                     </select>
-                    <input value={form.ikon} onChange={e => setForm({...form, ikon: e.target.value})}
-                      placeholder="ikon" className="px-2 py-1 rounded bg-gray-700 text-xs text-white border border-gray-600 flex-1"/>
-                    <input type="number" value={form.urutan} onChange={e => setForm({...form, urutan: parseInt(e.target.value)})}
-                      className="w-16 px-2 py-1 rounded bg-gray-700 text-xs text-white border border-gray-600"/>
+                    <input value={form.ikon} onChange={e => setForm({ ...form, ikon: e.target.value })} placeholder="ikon" className="glass-input rounded-lg px-2 py-1 text-xs text-white focus:outline-none flex-1" />
+                    <input type="number" value={form.urutan} onChange={e => setForm({ ...form, urutan: parseInt(e.target.value) })} className="w-16 glass-input rounded-lg px-2 py-1 text-xs text-white focus:outline-none" />
                   </div>
                   <div className="flex gap-2">
-                    <button onClick={saveNewInsight} className="flex items-center gap-1 px-3 py-1 bg-green-700 rounded text-xs"><Check size={12}/>Tambah</button>
-                    <button onClick={() => setNewInsight(false)} className="flex items-center gap-1 px-3 py-1 bg-gray-700 rounded text-xs"><X size={12}/>Batal</button>
+                    <button onClick={saveNewInsight} className="flex items-center gap-1 px-3 py-1 bg-teal-500 text-slate-900 rounded-lg text-xs font-bold"><Check size={12} />Tambah</button>
+                    <button onClick={() => setNewInsight(false)} className="flex items-center gap-1 px-3 py-1 bg-slate-700 rounded-lg text-xs"><X size={12} />Batal</button>
                   </div>
                 </div>
               )}
             </div>
           </div>
 
-          {/* Hasil Prediksi 7 Hari (read-only) */}
-          <div className="col-span-2 bg-gray-900 border border-gray-800 rounded-xl p-5">
-            <h2 className="font-semibold mb-4">Hasil Prediksi 7 Hari <span className="text-gray-500 text-xs font-normal">(read-only)</span></h2>
+          {/* Prediksi 7 Hari */}
+          <div className="lg:col-span-2 glass-panel rounded-2xl p-6 border border-white/5">
+            <h2 className="font-semibold mb-4 flex items-center gap-2">
+              <BarChart3 className="w-4 h-4 text-teal-400" /> Hasil Prediksi 7 Hari
+              <span className="text-slate-500 text-xs font-normal ml-1">(read-only)</span>
+            </h2>
             <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead><tr className="text-gray-400 border-b border-gray-800">
-                  <th className="text-left py-2">Tanggal</th>
-                  <th className="text-right py-2">Harga Prediksi</th>
-                  <th className="text-right py-2">Confidence</th>
+              <table className="w-full text-left border-collapse">
+                <thead><tr className="border-b border-slate-800 text-[11px] text-slate-500 font-semibold uppercase">
+                  <th className="pb-3 px-3">Tanggal</th><th className="pb-3 px-3 text-right">Harga Prediksi</th><th className="pb-3 px-3 text-right">Confidence</th>
                 </tr></thead>
-                <tbody>
+                <tbody className="divide-y divide-slate-800/60 text-sm">
                   {(data.prediksi_7hari || []).map((p: any, i: number) => (
-                    <tr key={i} className="border-b border-gray-800">
-                      <td className="py-2">{p.tanggal_target}</td>
-                      <td className="py-2 text-right font-mono">Rp {Number(p.harga_prediksi).toLocaleString()}</td>
-                      <td className="py-2 text-right text-gray-400">{p.confidence_level}%</td>
+                    <tr key={i} className="hover:bg-slate-800/30 transition">
+                      <td className="py-3 px-3 text-slate-300">{p.tanggal_target}</td>
+                      <td className="py-3 px-3 text-right font-mono font-bold text-white">Rp {Number(p.harga_prediksi).toLocaleString()}</td>
+                      <td className="py-3 px-3 text-right text-slate-400">{p.confidence_level}%</td>
                     </tr>
                   ))}
                 </tbody>

frontend/app/dashboard/settings/page.tsx

@@ -1,59 +1,96 @@
-// app/dashboard/settings/page.tsx
+// app/dashboard/settings/page.tsx — Runtime config editor with glass UI
 'use client'
 import { useEffect, useState } from 'react'
 import { api } from '@/lib/api'
-import { Save } from 'lucide-react'
-
-const ENV_LABELS: Record<string, string> = {
-  DB_HOST               : 'Database Host',
-  DB_PORT               : 'Database Port',
-  DB_NAME               : 'Database Name',
-  DB_USER               : 'Database User',
-  DB_PASSWORD           : 'Database Password',
-  AUTO_FORECAST_ENABLED : 'Auto Forecast Aktif',
-  AUTO_FORECAST_HOUR    : 'Jam Forecast (0-23)',
-  AUTO_FORECAST_MINUTE  : 'Menit Forecast (0-59)',
-  OPTUNA_TRIALS         : 'Jumlah Optuna Trials',
-  MODEL_DIR             : 'Folder Model',
-  API_SECRET_KEY        : 'API Secret Key',
+import { Save, Settings, Shield, Sliders, CheckCircle } from 'lucide-react'
+
+const RUNTIME_FIELDS: Record<string, { label: string; desc: string; type: string }> = {
+  optuna_trials: { label: 'Jumlah Optuna Trials', desc: 'Jumlah percobaan hyperparameter tuning', type: 'number' },
+  model_dir: { label: 'Folder Model', desc: 'Direktori penyimpanan file model .pkl', type: 'text' },
+  forecast_days: { label: 'Hari Prediksi', desc: 'Jumlah hari prediksi ke depan', type: 'number' },
+  default_schedules: { label: 'Default Schedules', desc: 'Cron expressions default (comma-separated)', type: 'text' },
 }
 
 export default function SettingsPage() {
-  const [envData, setEnvData] = useState<Record<string, string>>({})
-  const [saved, setSaved]     = useState<string | null>(null)
+  const [settings, setSettings] = useState<Record<string, any>>({})
+  const [saved, setSaved] = useState<string | null>(null)
+  const [saving, setSaving] = useState<string | null>(null)
 
-  useEffect(() => { api.getEnv().then(setEnvData) }, [])
+  useEffect(() => { api.getSettings().then(setSettings) }, [])
 
   async function save(key: string) {
-    await api.updateEnv(key, envData[key] || '')
-    setSaved(key)
-    setTimeout(() => setSaved(null), 2000)
+    setSaving(key)
+    try {
+      await api.updateSetting(key, String(settings[key] || ''))
+      setSaved(key)
+      setTimeout(() => setSaved(null), 2500)
+    } catch (e: any) {
+      alert(`❌ Gagal: ${e.message}`)
+    } finally {
+      setSaving(null)
+    }
   }
 
   return (
-    <div className="max-w-2xl space-y-6">
-      <h1 className="text-2xl font-bold">Pengaturan</h1>
-      <div className="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
-        <p className="text-gray-400 text-sm">Edit konfigurasi environment HuggingFace Space. Perubahan langsung berlaku.</p>
-        {Object.entries(ENV_LABELS).map(([key, label]) => (
-          <div key={key} className="flex items-center gap-3">
-            <div className="flex-1">
-              <label className="text-xs text-gray-400 block mb-1">{label}</label>
-              <input
-                type={key.includes('PASSWORD') || key.includes('SECRET') ? 'password' : 'text'}
-                value={envData[key] || ''}
-                onChange={e => setEnvData({...envData, [key]: e.target.value})}
-                className="w-full px-3 py-2 rounded-lg bg-gray-800 text-white text-sm border border-gray-700 focus:outline-none focus:border-blue-500"
-              />
+    <div className="max-w-3xl space-y-6">
+      <h1 className="text-2xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
+        Pengaturan
+      </h1>
+
+      {/* Runtime Config */}
+      <div className="glass-panel rounded-2xl p-6 border border-white/5">
+        <div className="flex items-center gap-2 mb-1">
+          <Sliders className="w-5 h-5 text-teal-400" />
+          <h2 className="text-base font-bold text-slate-100">Konfigurasi Runtime</h2>
+        </div>
+        <p className="text-xs text-slate-400 mb-6">Perubahan langsung berlaku tanpa restart server.</p>
+
+        <div className="space-y-5">
+          {Object.entries(RUNTIME_FIELDS).map(([key, cfg]) => (
+            <div key={key} className="flex items-start gap-4">
+              <div className="flex-1">
+                <label className="text-xs font-semibold text-slate-300 block mb-1">{cfg.label}</label>
+                <p className="text-[11px] text-slate-500 mb-2">{cfg.desc}</p>
+                <input
+                  type={cfg.type}
+                  value={settings[key] ?? ''}
+                  onChange={e => setSettings({ ...settings, [key]: e.target.value })}
+                  className="w-full glass-input rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none transition-all"
+                />
+              </div>
+              <div className="pt-8">
+                <button onClick={() => save(key)} disabled={saving === key}
+                  className={`flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-xs font-bold transition ${
+                    saved === key
+                      ? 'bg-teal-500/10 text-teal-400 border border-teal-500/20'
+                      : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700'
+                  } disabled:opacity-50`}>
+                  {saved === key ? <><CheckCircle className="w-3.5 h-3.5" /> Tersimpan</> : <><Save className="w-3.5 h-3.5" /> Simpan</>}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Info Card */}
+      <div className="glass-panel rounded-2xl p-6 border border-white/5">
+        <div className="flex items-center gap-2 mb-3">
+          <Shield className="w-5 h-5 text-indigo-400" />
+          <h2 className="text-base font-bold text-slate-100">Keamanan & Database</h2>
+        </div>
+        <p className="text-xs text-slate-400 mb-4">
+          Kredensial database dan API key dikonfigurasi melalui file <code className="px-1.5 py-0.5 bg-slate-800 rounded text-teal-400">.env</code> di server.
+          Untuk keamanan, nilai-nilai ini tidak ditampilkan di dashboard.
+        </p>
+        <div className="grid grid-cols-2 gap-3">
+          {['DB_HOST', 'DB_PORT', 'DB_NAME', 'DB_USER'].map(k => (
+            <div key={k} className="bg-slate-900/50 rounded-xl p-3 border border-white/5">
+              <span className="text-[10px] text-slate-500 uppercase tracking-wider block">{k}</span>
+              <span className="text-xs text-slate-400 font-mono">••••••••</span>
             </div>
-            <button onClick={() => save(key)}
-              className={`flex items-center gap-1 px-3 py-2 rounded-lg text-xs font-medium mt-5 transition ${
-                saved === key ? 'bg-green-700 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-300'
-              }`}>
-              <Save size={13}/> {saved === key ? 'Tersimpan' : 'Simpan'}
-            </button>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   )

frontend/app/globals.css

@@ -3,6 +3,53 @@
 @tailwind utilities;
 
 body {
-  background-color: #111827; /* gray-950 */
-  color: #f3f4f6; /* gray-100 */
+  background-color: #020617; /* slate-950 */
+  color: #f1f5f9; /* slate-100 */
 }
+
+@layer utilities {
+  .glass-panel {
+    background: rgba(15, 23, 42, 0.65);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  }
+
+  .glass-input {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .glass-input:focus {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(45, 212, 191, 0.5);
+    box-shadow: 0 0 15px rgba(45, 212, 191, 0.2);
+  }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.8); }
+::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.4); }
+
+/* Animations */
+@keyframes glow {
+  0%, 100% { opacity: 0.4; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.05); }
+}
+.animate-glow { animation: glow 8s ease-in-out infinite alternate; }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-slide-up { animation: slideUp 0.5s ease-out forwards; }

frontend/app/page.tsx

@@ -1,16 +1,18 @@
-// app/page.tsx
+// app/page.tsx — Login Page with glassmorphism design
 'use client'
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { api } from '@/lib/api'
+import { Lock, AlertTriangle, BarChart3 } from 'lucide-react'
 
 export default function LoginPage() {
-  const [pw, setPw]     = useState('')
-  const [err, setErr]   = useState('')
+  const [pw, setPw] = useState('')
+  const [err, setErr] = useState('')
   const [load, setLoad] = useState(false)
-  const router          = useRouter()
+  const router = useRouter()
 
-  async function handleLogin() {
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault()
     setLoad(true); setErr('')
     try {
       const res = await api.login(pw)
@@ -22,27 +24,60 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-950 flex items-center justify-center">
-      <div className="bg-gray-900 border border-gray-800 rounded-2xl p-8 w-full max-w-sm shadow-2xl">
-        <h1 className="text-2xl font-bold text-white mb-1">SIKOMO</h1>
-        <p className="text-gray-400 text-sm mb-6">Dashboard Admin Prediksi Komoditas</p>
-        <label className="text-gray-300 text-sm">Password</label>
-        <input
-          type="password"
-          value={pw}
-          onChange={e => setPw(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && handleLogin()}
-          className="w-full mt-1 mb-4 px-4 py-2 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:border-blue-500"
-          placeholder="••••••••••"
-        />
-        {err && <p className="text-red-400 text-sm mb-3">{err}</p>}
-        <button
-          onClick={handleLogin}
-          disabled={load}
-          className="w-full py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-semibold transition disabled:opacity-50"
-        >
-          {load ? 'Masuk...' : 'Masuk'}
-        </button>
+    <div className="min-h-screen relative overflow-hidden flex items-center justify-center p-4">
+      {/* Background glowing blobs */}
+      <div className="absolute w-[500px] h-[500px] bg-teal-500/20 rounded-full blur-3xl -top-32 -left-32 animate-glow pointer-events-none" />
+      <div className="absolute w-[600px] h-[600px] bg-indigo-500/20 rounded-full blur-3xl -bottom-48 -right-48 animate-glow pointer-events-none" style={{ animationDelay: '3s' }} />
+
+      <div className="w-full max-w-md glass-panel rounded-2xl p-8 relative z-10 border border-white/10 shadow-2xl animate-fade-in">
+        <div className="text-center mb-8">
+          <div className="w-16 h-16 bg-gradient-to-tr from-teal-500 to-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-teal-500/25">
+            <BarChart3 className="w-8 h-8 text-white" />
+          </div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-white via-slate-100 to-slate-400 bg-clip-text text-transparent">
+            SIKOMO Forecast
+          </h1>
+          <p className="text-slate-400 text-sm mt-2">
+            Masukkan kata sandi untuk mengakses dashboard prediksi harga komoditas.
+          </p>
+        </div>
+
+        <form onSubmit={handleLogin} className="space-y-6">
+          <div>
+            <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
+              Kata Sandi
+            </label>
+            <input
+              type="password"
+              value={pw}
+              onChange={e => setPw(e.target.value)}
+              placeholder="••••••••••••"
+              className={`w-full glass-input rounded-xl px-4 py-3.5 text-slate-100 placeholder:text-slate-500 focus:outline-none transition-all ${
+                err ? 'border-rose-500/50 focus:border-rose-500' : ''
+              }`}
+              autoFocus
+            />
+            {err && (
+              <p className="text-xs text-rose-400 mt-2 flex items-center gap-1">
+                <AlertTriangle className="w-3.5 h-3.5" /> {err}
+              </p>
+            )}
+          </div>
+
+          <button
+            type="submit"
+            disabled={load}
+            className="w-full bg-gradient-to-r from-teal-500 to-indigo-500 hover:from-teal-400 hover:to-indigo-400 text-white font-semibold py-3.5 px-4 rounded-xl shadow-lg shadow-indigo-500/20 active:scale-[0.98] transition-all duration-200 disabled:opacity-50"
+          >
+            {load ? 'Memverifikasi...' : 'Masuk ke Dashboard'}
+          </button>
+        </form>
+
+        <div className="mt-6 text-center border-t border-white/5 pt-4">
+          <span className="text-[11px] text-slate-500">
+            Sistem Informasi Komoditas & Pasar Kabupaten Batang
+          </span>
+        </div>
       </div>
     </div>
   )

frontend/lib/api.ts

@@ -1,4 +1,4 @@
-// lib/api.ts — semua pemanggilan ke HuggingFace API
+// lib/api.ts — All API calls to SIKOMO Forecast backend
 const BASE = process.env.NEXT_PUBLIC_API_URL || ''
 
 function getToken() {
@@ -23,20 +23,38 @@ async function req(path: string, opts: RequestInit = {}) {
 }
 
 export const api = {
-  login             : (password: string)      => req('/auth/login', { method:'POST', body: JSON.stringify({ password }) }),
-  getKomoditas      : ()                       => req('/komoditas'),
-  getPrediksi       : (id: number)             => req(`/prediksi/${id}`),
-  runForecast       : (komoditas_id: number)   => req('/forecast/run', { method:'POST', body: JSON.stringify({ komoditas_id }) }),
-  runForecastAll    : ()                       => req('/forecast/run-all', { method:'POST' }),
-  getLog            : ()                       => req('/forecast/log'),
-  getScheduler      : ()                       => req('/scheduler/status'),
-  updateScheduler   : (body: object)           => req('/scheduler/config', { method:'POST', body: JSON.stringify(body) }),
-  getEnv            : ()                       => req('/env'),
-  updateEnv         : (key: string, value: string) => req('/env', { method:'POST', body: JSON.stringify({ key, value }) }),
-  getInsights       : (id: number)             => req(`/insight/${id}`),
-  updateInsight     : (id: number, body: object)   => req(`/insight/${id}`, { method:'PUT', body: JSON.stringify(body) }),
-  addInsight        : (id: number, body: object)   => req(`/insight/${id}`, { method:'POST', body: JSON.stringify(body) }),
-  deleteInsight     : (id: number)             => req(`/insight/${id}`, { method:'DELETE' }),
-  updateRingkasan   : (id: number, body: object)   => req(`/ringkasan/${id}`, { method:'PUT', body: JSON.stringify(body) }),
-  updateModelMl     : (id: number, body: object)   => req(`/model-ml/${id}`, { method:'PUT', body: JSON.stringify(body) }),
+  // Auth
+  login: (password: string) => req('/auth/login', { method: 'POST', body: JSON.stringify({ password }) }),
+
+  // Komoditas & Prediksi
+  getKomoditas: () => req('/komoditas'),
+  getPrediksi: (id: number) => req(`/prediksi/${id}`),
+
+  // Forecast actions
+  runForecast: (komoditas_id: number) => req('/forecast/run', { method: 'POST', body: JSON.stringify({ komoditas_id }) }),
+  runForecastAll: () => req('/forecast/run-all', { method: 'POST' }),
+  stopForecast: () => req('/forecast/stop', { method: 'POST' }),
+
+  // Status & Logs (realtime)
+  getStatus: () => req('/status'),
+  getLogs: (limit = 200, level?: string) => req(`/logs?limit=${limit}${level && level !== 'ALL' ? `&level=${level}` : ''}`),
+
+  // Scheduler (multiple schedules)
+  getSchedules: () => req('/schedules'),
+  addSchedule: (cron_expression: string, label: string) => req('/schedules/add', { method: 'POST', body: JSON.stringify({ cron_expression, label }) }),
+  removeSchedule: (jobId: string) => req(`/schedules/${jobId}/remove`, { method: 'DELETE' }),
+  startScheduler: () => req('/schedule/start', { method: 'POST' }),
+  stopScheduler: () => req('/schedule/stop', { method: 'POST' }),
+
+  // Runtime settings
+  getSettings: () => req('/settings'),
+  updateSetting: (key: string, value: string) => req('/settings', { method: 'POST', body: JSON.stringify({ key, value }) }),
+
+  // CRUD
+  getInsights: (id: number) => req(`/insight/${id}`),
+  updateInsight: (id: number, body: object) => req(`/insight/${id}`, { method: 'PUT', body: JSON.stringify(body) }),
+  addInsight: (id: number, body: object) => req(`/insight/${id}`, { method: 'POST', body: JSON.stringify(body) }),
+  deleteInsight: (id: number) => req(`/insight/${id}`, { method: 'DELETE' }),
+  updateRingkasan: (id: number, body: object) => req(`/ringkasan/${id}`, { method: 'PUT', body: JSON.stringify(body) }),
+  updateModelMl: (id: number, body: object) => req(`/model-ml/${id}`, { method: 'PUT', body: JSON.stringify(body) }),
 }