feat: complete Docker setup for Next.js & FastAPI deployment

.dockerignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules/
+frontend/node_modules/
+__pycache__/
+*.pyc
+
+# Build outputs
+.next/
+frontend/.next/
+frontend/out/
+
+# Environments
+.env
+.env.*
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS Files
+.DS_Store
+Thumbs.db

.gitignore

@@ -0,0 +1,38 @@
+# Environments
+.env
+.env.*
+!.env.example
+
+# Node
+node_modules/
+frontend/node_modules/
+.next/
+frontend/.next/
+frontend/out/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.venv/
+env.bak/
+venv.bak/
+
+# Models & Data
+models/
+*.h5
+*.pkl
+*.pt
+*.pth
+*.onnx
+
+# OS Files
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,53 @@
+# ============================================================
+# Dockerfile Multi-stage untuk HuggingFace Space
+# Port wajib: 7860
+# ============================================================
+
+# ── STAGE 1: Build Frontend (Next.js) ──
+FROM node:20-alpine AS builder
+WORKDIR /app/frontend
+
+# Copy frontend source
+COPY frontend/ ./
+# Install dependencies & build static files
+RUN npm install
+RUN npm run build
+
+# ── STAGE 2: Setup Backend & Run (Python) ──
+FROM python:3.10-slim
+# HuggingFace memerlukan user non-root
+RUN useradd -m -u 1000 user
+WORKDIR /app
+
+# Install system dependencies (untuk LightGBM dll)
+RUN apt-get update && apt-get install -y \
+    libgomp1 \
+    gcc \
+    g++ \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy backend requirements dan install dependencies Python
+COPY --chown=user backend/requirements.txt ./
+RUN pip install --no-cache-dir --upgrade pip \
+ && pip install --no-cache-dir -r requirements.txt
+
+# Copy seluruh kode backend
+COPY --chown=user backend/ ./
+
+# Buat folder model & static
+RUN mkdir -p /app/models && chown -R user:user /app/models
+RUN mkdir -p /app/static && chown -R user:user /app/static
+
+# Copy file statis hasil build Next.js dari STAGE 1 ke folder static backend
+COPY --chown=user --from=builder /app/frontend/out /app/static
+
+# Switch ke user non-root (wajib di HuggingFace)
+USER user
+
+# Expose port 7860 (wajib di HuggingFace Space)
+EXPOSE 7860
+
+# Jalankan FastAPI dengan uvicorn
+# workers=1 karena APScheduler tidak kompatibel dengan multi-worker
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860", "--workers", "1"]

backend/database.py

@@ -0,0 +1,252 @@
+# database.py — Koneksi MySQL, baca & tulis semua tabel
+import os
+import pandas as pd
+import sqlalchemy
+from sqlalchemy import text
+from dotenv import load_dotenv
+
+load_dotenv()
+
+def get_engine():
+    url = (
+        f"mysql+pymysql://{os.getenv('DB_USER')}:{os.getenv('DB_PASSWORD')}"
+        f"@{os.getenv('DB_HOST')}:{os.getenv('DB_PORT', 3306)}"
+        f"/{os.getenv('DB_NAME')}"
+    )
+    return sqlalchemy.create_engine(url, pool_pre_ping=True, pool_recycle=3600)
+
+# ── READ ──────────────────────────────────────────────────────────────────────
+
+def get_all_komoditas():
+    """Ambil semua komoditas aktif."""
+    engine = get_engine()
+    return pd.read_sql(
+        "SELECT id, nama, slug, unit, volatile, volatilitas_skor FROM komoditas WHERE is_active=1",
+        engine
+    )
+
+def get_harga_harian(komoditas_id: int, days: int = 730):
+    """Ambil data harga harian untuk satu komoditas (default 2 tahun terakhir)."""
+    engine = get_engine()
+    query = f"""
+        SELECT hh.tanggal AS date, p.nama AS pasar_nama, hh.harga
+        FROM harga_harian hh
+        JOIN pasar p ON p.id = hh.pasar_id
+        WHERE hh.komoditas_id = {komoditas_id}
+          AND hh.tanggal >= DATE_SUB(CURDATE(), INTERVAL {days} DAY)
+        ORDER BY hh.tanggal ASC
+    """
+    df_raw = pd.read_sql(query, engine)
+    if df_raw.empty:
+        return pd.DataFrame()
+    # Pivot → wide format
+    df = df_raw.pivot_table(
+        index='date', columns='pasar_nama', values='harga'
+    ).reset_index()
+    df.columns.name = None
+    df['date'] = pd.to_datetime(df['date'])
+    df = df.sort_values('date').reset_index(drop=True)
+    return df
+
+def get_pasar_list(komoditas_id: int):
+    """Ambil daftar pasar yang punya data untuk komoditas ini."""
+    engine = get_engine()
+    return pd.read_sql(f"""
+        SELECT DISTINCT p.id, p.nama
+        FROM harga_harian hh
+        JOIN pasar p ON p.id = hh.pasar_id
+        WHERE hh.komoditas_id = {komoditas_id}
+    """, engine)
+
+# ── WRITE ─────────────────────────────────────────────────────────────────────
+
+def save_model_ml(data: dict):
+    """Upsert ke tabel model_ml."""
+    engine = get_engine()
+    with engine.begin() as conn:
+        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, :versi, :deskripsi, :file_path,
+                :mape, :rmse, :mae, :r2_score, :confidence_level,
+                :stabilitas, :status_validasi, :catatan_validasi,
+                :tanggal_training, :tanggal_evaluasi, 1, NOW(), NOW()
+            )
+            ON DUPLICATE KEY UPDATE
+                nama_model       = VALUES(nama_model),
+                versi            = VALUES(versi),
+                deskripsi        = VALUES(deskripsi),
+                file_path        = VALUES(file_path),
+                mape             = VALUES(mape),
+                rmse             = VALUES(rmse),
+                mae              = VALUES(mae),
+                r2_score         = VALUES(r2_score),
+                confidence_level = VALUES(confidence_level),
+                stabilitas       = VALUES(stabilitas),
+                status_validasi  = VALUES(status_validasi),
+                catatan_validasi = VALUES(catatan_validasi),
+                tanggal_evaluasi = VALUES(tanggal_evaluasi),
+                updated_at       = NOW()
+        """), data)
+
+    return engine.execute(
+        text("SELECT id FROM model_ml WHERE komoditas_id=:kid ORDER BY updated_at DESC LIMIT 1"),
+        {'kid': data['komoditas_id']}
+    ).scalar()
+
+def save_hasil_prediksi(predictions: list, komoditas_id: int, pasar_id, model_id: int, meta: dict):
+    """Hapus prediksi lama & insert 7 baris baru."""
+    engine = get_engine()
+    with engine.begin() as conn:
+        conn.execute(text("""
+            DELETE FROM hasil_prediksi
+            WHERE komoditas_id = :kid AND pasar_id = :pid
+              AND tanggal_target >= CURDATE()
+        """), {'kid': komoditas_id, 'pid': pasar_id})
+
+        for p in predictions:
+            conn.execute(text("""
+                INSERT INTO hasil_prediksi (
+                    komoditas_id, pasar_id, model_id,
+                    tanggal_prediksi, tanggal_target,
+                    harga_prediksi, confidence_level,
+                    model_name, mape, rmse, created_at
+                ) VALUES (
+                    :kid, :pid, :model_id,
+                    CURDATE(), :tanggal_target,
+                    :harga_prediksi, :confidence_level,
+                    :model_name, :mape, :rmse, NOW()
+                )
+            """), {
+                'kid'             : komoditas_id,
+                'pid'             : pasar_id,
+                'model_id'        : model_id,
+                'tanggal_target'  : p['tanggal'],
+                'harga_prediksi'  : p['harga_prediksi'],
+                'confidence_level': meta['confidence_level'],
+                'model_name'      : meta['nama_model'],
+                'mape'            : meta['mape'],
+                'rmse'            : meta['rmse'],
+            })
+
+def save_ringkasan_prediksi(data: dict, komoditas_id: int, model_id: int):
+    """Upsert ringkasan prediksi."""
+    engine = get_engine()
+    with engine.begin() as conn:
+        conn.execute(text("""
+            INSERT INTO ringkasan_prediksi (
+                komoditas_id, model_id,
+                harga_min, harga_max, tren, confidence_level,
+                status_analisis, deskripsi_status,
+                tanggal_mulai, tanggal_akhir, created_at
+            ) VALUES (
+                :komoditas_id, :model_id,
+                :harga_min, :harga_max, :tren, :confidence_level,
+                :status_analisis, :deskripsi_status,
+                :tanggal_mulai, :tanggal_akhir, NOW()
+            )
+            ON DUPLICATE KEY UPDATE
+                harga_min        = VALUES(harga_min),
+                harga_max        = VALUES(harga_max),
+                tren             = VALUES(tren),
+                confidence_level = VALUES(confidence_level),
+                status_analisis  = VALUES(status_analisis),
+                deskripsi_status = VALUES(deskripsi_status),
+                tanggal_mulai    = VALUES(tanggal_mulai),
+                tanggal_akhir    = VALUES(tanggal_akhir)
+        """), {**data, 'komoditas_id': komoditas_id, 'model_id': model_id})
+
+def save_insight_prediksi(insights: list, komoditas_id: int, model_id: int):
+    """Hapus insight lama & insert baru."""
+    engine = get_engine()
+    with engine.begin() as conn:
+        conn.execute(text(
+            "DELETE FROM insight_prediksi WHERE komoditas_id = :kid"
+        ), {'kid': komoditas_id})
+        for ins in insights:
+            conn.execute(text("""
+                INSERT INTO insight_prediksi (
+                    komoditas_id, model_id, konten, tipe, ikon,
+                    urutan, is_active, created_at, updated_at
+                ) VALUES (
+                    :kid, :model_id, :konten, :tipe, :ikon,
+                    :urutan, 1, NOW(), NOW()
+                )
+            """), {
+                'kid'     : komoditas_id,
+                'model_id': model_id,
+                'konten'  : ins['konten'],
+                'tipe'    : ins['tipe'],
+                'ikon'    : ins['ikon'],
+                'urutan'  : ins['urutan'],
+            })
+
+def update_komoditas_volatilitas(komoditas_id: int, volatile: int, skor: float):
+    engine = get_engine()
+    with engine.begin() as conn:
+        conn.execute(text("""
+            UPDATE komoditas SET volatile=:v, volatilitas_skor=:s, updated_at=NOW()
+            WHERE id=:kid
+        """), {'v': volatile, 's': skor, 'kid': komoditas_id})
+
+# ── READ untuk API response ───────────────────────────────────────────────────
+
+def get_prediksi_data(komoditas_id: int):
+    """Ambil semua data yang dibutuhkan frontend untuk satu komoditas."""
+    engine = get_engine()
+
+    komoditas = pd.read_sql(f"""
+        SELECT k.*, kk.nama as kategori_nama
+        FROM komoditas k
+        JOIN kategori_komoditas kk ON kk.id = k.kategori_id
+        WHERE k.id = {komoditas_id}
+    """, engine).to_dict('records')
+    komoditas = komoditas[0] if komoditas else None
+
+    harga_terkini = pd.read_sql(f"""
+        SELECT hh.harga, hh.tanggal, p.nama as pasar_nama, p.id as pasar_id
+        FROM harga_harian hh
+        JOIN pasar p ON p.id = hh.pasar_id
+        WHERE hh.komoditas_id = {komoditas_id}
+        ORDER BY hh.tanggal DESC LIMIT 1
+    """, engine).to_dict('records')
+    harga_terkini = harga_terkini[0] if harga_terkini else None
+
+    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
+
+    ringkasan = pd.read_sql(f"""
+        SELECT * FROM ringkasan_prediksi WHERE komoditas_id={komoditas_id}
+        ORDER BY created_at DESC LIMIT 1
+    """, engine).to_dict('records')
+    ringkasan = ringkasan[0] if ringkasan else None
+
+    hasil = pd.read_sql(f"""
+        SELECT tanggal_target, harga_prediksi, confidence_level
+        FROM hasil_prediksi
+        WHERE komoditas_id={komoditas_id} AND tanggal_target >= CURDATE()
+        ORDER BY tanggal_target ASC
+    """, engine).to_dict('records')
+
+    insights = pd.read_sql(f"""
+        SELECT * FROM insight_prediksi
+        WHERE komoditas_id={komoditas_id} AND is_active=1
+        ORDER BY urutan ASC
+    """, engine).to_dict('records')
+
+    return {
+        'komoditas'    : komoditas,
+        'harga_terkini': harga_terkini,
+        'model'        : model,
+        'ringkasan'    : ringkasan,
+        'prediksi_7hari': hasil,
+        'insights'     : insights,
+    }

backend/main.py

@@ -0,0 +1,306 @@
+# main.py — FastAPI: endpoint training, forecasting, CRUD, scheduler, env
+import os, json
+from datetime import datetime
+from typing import Optional
+from fastapi import FastAPI, HTTPException, Depends, BackgroundTasks
+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 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
+)
+from ml_pipeline import run_pipeline
+from sqlalchemy import text
+
+app = FastAPI(title="SIKOMO ML API")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ── Auth ──────────────────────────────────────────────────────────────────────
+security = HTTPBearer()
+API_KEY  = os.getenv('API_SECRET_KEY', 'default-key')
+
+def verify_token(creds: HTTPAuthorizationCredentials = Depends(security)):
+    if creds.credentials != API_KEY:
+        raise HTTPException(status_code=401, detail="Unauthorized")
+    return creds.credentials
+
+# ── Scheduler ─────────────────────────────────────────────────────────────────
+scheduler    = BackgroundScheduler()
+forecast_log = []   # in-memory log untuk SSE
+
+def auto_forecast_job():
+    forecast_log.append(f"[{datetime.now()}] Auto forecast dimulai...")
+    try:
+        komoditas_list = get_all_komoditas()
+        for _, row in komoditas_list.iterrows():
+            run_forecast_for_komoditas(int(row['id']), row['nama'])
+        forecast_log.append(f"[{datetime.now()}] Auto forecast selesai.")
+    except Exception as e:
+        forecast_log.append(f"[{datetime.now()}] 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)
+
+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 ─────────────────────────────────────────────────────────
+class ForecastRequest(BaseModel):
+    komoditas_id: int
+
+class InsightUpdate(BaseModel):
+    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
+
+class ModelUpdate(BaseModel):
+    deskripsi       : Optional[str] = None
+    catatan_validasi: Optional[str] = None
+
+class EnvUpdate(BaseModel):
+    key  : str
+    value: str
+
+class SchedulerConfig(BaseModel):
+    enabled: bool
+    hour   : int = 1
+    minute : int = 0
+
+# ── Endpoints ─────────────────────────────────────────────────────────────────
+
+@app.get("/health")
+def health():
+    return {"status": "ok", "time": datetime.now().isoformat()}
+
+# AUTH
+@app.post("/auth/login")
+def login(body: dict):
+    if body.get('password') != os.getenv('DASHBOARD_PASSWORD', 'Bandulan112'):
+        raise HTTPException(status_code=401, detail="Password salah")
+    return {"token": API_KEY}
+
+# 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)
+@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)
+@app.post("/forecast/run", dependencies=[Depends(verify_token)])
+def run_forecast_manual(req: ForecastRequest, bg: BackgroundTasks):
+    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']
+    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)
+    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
+
+# 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()],
+    }
+
+@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.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]
+
+@app.put("/insight/{insight_id}", dependencies=[Depends(verify_token)])
+def update_insight(insight_id: int, body: InsightUpdate):
+    engine = get_engine()
+    with engine.begin() as conn:
+        conn.execute(text("""
+            UPDATE insight_prediksi
+            SET konten=:konten, tipe=:tipe, ikon=:ikon, urutan=:urutan, updated_at=NOW()
+            WHERE id=:id
+        """), {**body.dict(), 'id': insight_id})
+    return {"message": "Insight diperbarui."}
+
+@app.post("/insight/{komoditas_id}", dependencies=[Depends(verify_token)])
+def add_insight(komoditas_id: int, body: InsightUpdate):
+    engine = get_engine()
+    with engine.begin() as conn:
+        conn.execute(text("""
+            INSERT INTO insight_prediksi (komoditas_id, konten, tipe, ikon, urutan, is_active, created_at, updated_at)
+            VALUES (:kid, :konten, :tipe, :ikon, :urutan, 1, NOW(), NOW())
+        """), {**body.dict(), 'kid': komoditas_id})
+    return {"message": "Insight ditambahkan."}
+
+@app.delete("/insight/{insight_id}", dependencies=[Depends(verify_token)])
+def delete_insight(insight_id: int):
+    engine = get_engine()
+    with engine.begin() as conn:
+        conn.execute(text("DELETE FROM insight_prediksi WHERE id=:id"), {'id': insight_id})
+    return {"message": "Insight dihapus."}
+
+# CRUD RINGKASAN
+@app.put("/ringkasan/{komoditas_id}", dependencies=[Depends(verify_token)])
+def update_ringkasan(komoditas_id: int, body: RingkasanUpdate):
+    engine = get_engine()
+    updates = {k: v for k, v in body.dict().items() if v is not None}
+    if not updates:
+        raise HTTPException(400, "Tidak ada field yang diupdate.")
+    set_clause = ', '.join([f"{k}=:{k}" for k in updates])
+    with engine.begin() as conn:
+        conn.execute(
+            text(f"UPDATE ringkasan_prediksi SET {set_clause} WHERE komoditas_id=:kid ORDER BY created_at DESC LIMIT 1"),
+            {**updates, 'kid': komoditas_id}
+        )
+    return {"message": "Ringkasan diperbarui."}
+
+# 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()
+    updates = {k: v for k, v in body.dict().items() if v is not None}
+    if not updates:
+        raise HTTPException(400, "Tidak ada field yang diupdate.")
+    set_clause = ', '.join([f"{k}=:{k}" for k in updates])
+    with engine.begin() as conn:
+        conn.execute(
+            text(f"UPDATE model_ml SET {set_clause}, updated_at=NOW() WHERE komoditas_id=:kid AND is_active=1"),
+            {**updates, 'kid': komoditas_id}
+        )
+    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
+if os.path.isdir("static"):
+    app.mount("/", StaticFiles(directory="static", html=True), name="frontend")

backend/ml_pipeline.py

@@ -0,0 +1,483 @@
+# ml_pipeline.py — Full ML pipeline: cleaning → training → forecasting → labeling
+import os, json, pickle, warnings
+import pandas as pd
+import numpy as np
+from datetime import date
+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
+import optuna
+optuna.logging.set_verbosity(optuna.logging.WARNING)
+warnings.filterwarnings('ignore')
+
+MODEL_DIR = os.getenv('MODEL_DIR', 'models')
+os.makedirs(MODEL_DIR, exist_ok=True)
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 1. DATA QUALITY & CLEANING
+# ══════════════════════════════════════════════════════════════════════════════
+
+def analyze_data_quality(df, col):
+    total, missing = len(df), df[col].isna().sum()
+    gap_lengths, cur = [], 0
+    for v in df[col].isna():
+        if v: cur += 1
+        else:
+            if cur > 0: gap_lengths.append(cur)
+            cur = 0
+    max_gap  = max(gap_lengths) if gap_lengths else 0
+    outliers = (df[col].pct_change().abs() > 0.5).sum()
+    mean, std = df[col].mean(), df[col].std()
+    cv = (std / mean * 100) if mean > 0 else 0
+    return {
+        'total_records': total,
+        'missing'      : int(missing),
+        'missing_pct'  : round(missing / total * 100, 2),
+        'max_gap_days' : max_gap,
+        'outliers'     : int(outliers),
+        'cv'           : round(cv, 2),
+        'volatility'   : 'rendah' if cv < 2 else ('sedang' if cv < 5 else 'tinggi'),
+        'mean_price'   : round(mean, 2),
+        'std_price'    : round(std, 2),
+    }
+
+def clean_price_data(df, col, quality_info):
+    df   = df.copy()
+    df[f'{col}_was_missing'] = df[col].isna().astype(int)
+    temp = df[col].copy()
+    mask = temp.isna()
+    gap_id    = (mask != mask.shift()).cumsum()
+    gap_sizes = mask.groupby(gap_id).transform('sum')
+
+    temp = temp.fillna(method='ffill', limit=3)
+    med_mask = mask & (gap_sizes > 3) & (gap_sizes <= 7)
+    ti = temp.interpolate(method='linear', limit=7)
+    temp[med_mask] = ti[med_mask]
+
+    long_mask = mask & (gap_sizes > 7)
+    if long_mask.any():
+        rolling_med = temp.rolling(30, min_periods=3, center=True).median()
+        ti2 = temp.interpolate(method='linear')
+        temp[long_mask] = ti2.clip(lower=rolling_med*0.85, upper=rolling_med*1.15)[long_mask]
+
+    df[col] = temp
+    outlier_mask = df[col].pct_change().abs() > 0.4
+    if outlier_mask.any():
+        df.loc[outlier_mask, col] = np.nan
+        df[col] = df[col].interpolate(method='linear', limit=5)
+    return df
+
+def recommend_models(quality_info):
+    models = ['lightgbm', 'xgboost']
+    if quality_info['missing_pct'] < 30 and quality_info['max_gap_days'] < 14:
+        models.append('prophet')
+    if quality_info['cv'] < 5 and quality_info['missing_pct'] < 20:
+        models.append('arima')
+    return models
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 2. FEATURE ENGINEERING
+# ══════════════════════════════════════════════════════════════════════════════
+
+def create_features(df, target_col, other_cols=None):
+    df = df.copy()
+    df['year']          = df['date'].dt.year
+    df['month']         = df['date'].dt.month
+    df['day']           = df['date'].dt.day
+    df['day_of_week']   = df['date'].dt.dayofweek
+    df['day_of_year']   = df['date'].dt.dayofyear
+    df['week_of_year']  = df['date'].dt.isocalendar().week.astype(int)
+    df['quarter']       = df['date'].dt.quarter
+    df['is_weekend']    = (df['day_of_week'] >= 5).astype(int)
+    df['is_month_start']= df['date'].dt.is_month_start.astype(int)
+    df['is_month_end']  = df['date'].dt.is_month_end.astype(int)
+    for lag in [1, 2, 3, 7, 14, 30]:
+        df[f'price_lag_{lag}'] = df[target_col].shift(lag)
+    for w in [7, 14, 30]:
+        df[f'price_rolling_mean_{w}'] = df[target_col].rolling(w).mean()
+        df[f'price_rolling_std_{w}']  = df[target_col].rolling(w).std()
+        df[f'price_rolling_min_{w}']  = df[target_col].rolling(w).min()
+        df[f'price_rolling_max_{w}']  = df[target_col].rolling(w).max()
+    df['price_diff_1']       = df[target_col].diff(1)
+    df['price_diff_7']       = df[target_col].diff(7)
+    df['price_pct_change_1'] = df[target_col].pct_change(1) * 100
+    df['price_pct_change_7'] = df[target_col].pct_change(7) * 100
+    df['sma_7']    = df[target_col].rolling(7).mean()
+    df['sma_30']   = df[target_col].rolling(30).mean()
+    df['sma_diff'] = df['sma_7'] - df['sma_30']
+    df['volatility_7']  = df[target_col].rolling(7).std()
+    df['volatility_30'] = df[target_col].rolling(30).std()
+    if other_cols:
+        for i, oc in enumerate(other_cols):
+            if oc in df.columns:
+                df[f'other_price_{i}']  = df[oc]
+                df[f'price_spread_{i}'] = df[target_col] - df[oc]
+                df[f'price_ratio_{i}']  = df[target_col] / (df[oc] + 1e-6)
+    return df
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 3. TRAINING
+# ══════════════════════════════════════════════════════════════════════════════
+
+def evaluate_model(y_true, y_pred, model_name=""):
+    rmse = float(np.sqrt(mean_squared_error(y_true, y_pred)))
+    return {
+        'model'    : model_name,
+        'rmse'     : rmse,
+        'mae'      : float(mean_absolute_error(y_true, y_pred)),
+        'r2'       : float(r2_score(y_true, y_pred)),
+        'mape'     : float(np.mean(np.abs((y_true - y_pred) / (np.abs(y_true)+1e-6))) * 100),
+        'median_ae': float(np.median(np.abs(y_true - y_pred))),
+    }
+
+def train_lightgbm(X_train, y_train, X_test, y_test):
+    m = lgb.LGBMRegressor(
+        objective='regression', metric='rmse', num_leaves=31,
+        max_depth=7, learning_rate=0.05, n_estimators=300,
+        min_child_samples=20, subsample=0.8, colsample_bytree=0.8,
+        reg_alpha=0.1, reg_lambda=0.1, verbose=-1,
+        random_state=42, force_col_wise=True,
+    )
+    m.fit(X_train, y_train, eval_set=[(X_test, y_test)],
+          eval_metric='rmse', callbacks=[lgb.early_stopping(50, verbose=False)])
+    return m, evaluate_model(y_test, m.predict(X_test), 'LightGBM')
+
+def train_xgboost(X_train, y_train, X_test, y_test):
+    m = xgb.XGBRegressor(
+        objective='reg:squarederror', n_estimators=300, max_depth=6,
+        learning_rate=0.05, subsample=0.8, colsample_bytree=0.8,
+        reg_alpha=0.1, reg_lambda=0.1, random_state=42, verbosity=0,
+    )
+    m.fit(X_train, y_train, eval_set=[(X_test, y_test)], verbose=False)
+    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)
+    pred = np.clip(fc['yhat'].values, 0, None)
+    return m, evaluate_model(y_test.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)
+    return m, evaluate_model(y_test.values, fc, 'ARIMA')
+
+def tune_with_optuna(model_name, X_train, y_train, n_trials=50):
+    def objective(trial):
+        if model_name == 'LightGBM':
+            params = {
+                'objective':'regression','metric':'rmse','verbose':-1,
+                'random_state':42,'force_col_wise':True,
+                'num_leaves'       : trial.suggest_int('num_leaves', 20, 100),
+                'max_depth'        : trial.suggest_int('max_depth', 4, 12),
+                'learning_rate'    : trial.suggest_float('learning_rate', 0.01, 0.3),
+                'n_estimators'     : trial.suggest_int('n_estimators', 100, 500),
+                'min_child_samples': trial.suggest_int('min_child_samples', 5, 50),
+                'subsample'        : trial.suggest_float('subsample', 0.5, 1.0),
+                'colsample_bytree' : trial.suggest_float('colsample_bytree', 0.5, 1.0),
+                'reg_alpha'        : trial.suggest_float('reg_alpha', 0.0, 1.0),
+                'reg_lambda'       : trial.suggest_float('reg_lambda', 0.0, 1.0),
+            }
+            Cls = lgb.LGBMRegressor
+        else:
+            params = {
+                'objective':'reg:squarederror','random_state':42,'verbosity':0,
+                'n_estimators'    : trial.suggest_int('n_estimators', 100, 500),
+                'max_depth'       : trial.suggest_int('max_depth', 3, 10),
+                'learning_rate'   : trial.suggest_float('learning_rate', 0.01, 0.3),
+                'subsample'       : trial.suggest_float('subsample', 0.5, 1.0),
+                'colsample_bytree': trial.suggest_float('colsample_bytree', 0.5, 1.0),
+                'reg_alpha'       : trial.suggest_float('reg_alpha', 0.0, 1.0),
+                'reg_lambda'      : trial.suggest_float('reg_lambda', 0.0, 1.0),
+            }
+            Cls = xgb.XGBRegressor
+        scores = []
+        for tr, val in TimeSeriesSplit(n_splits=5).split(X_train):
+            m = Cls(**params)
+            m.fit(X_train.iloc[tr], y_train.iloc[tr])
+            scores.append(np.sqrt(mean_squared_error(y_train.iloc[val], m.predict(X_train.iloc[val]))))
+        return np.mean(scores)
+
+    study = optuna.create_study(direction='minimize')
+    study.optimize(objective, n_trials=n_trials)
+    return study.best_params
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 4. FORECASTING
+# ══════════════════════════════════════════════════════════════════════════════
+
+def forecast_tree(model, df_hist, target_col, other_cols, feature_cols, n_days=7):
+    df_temp   = df_hist.copy()
+    preds     = []
+    last_date = df_temp['date'].max()
+    for i in range(1, n_days + 1):
+        next_date = last_date + pd.Timedelta(days=i)
+        new_row   = {'date': next_date, target_col: np.nan}
+        for oc in (other_cols or []):
+            if oc in df_temp.columns:
+                lo = df_temp[oc].dropna()
+                new_row[oc] = float(lo.iloc[-1]) if len(lo) else np.nan
+        df_temp = pd.concat([df_temp, pd.DataFrame([new_row])], ignore_index=True)
+        df_feat  = create_features(df_temp, target_col, other_cols)
+        last_row = df_feat.iloc[[-1]].copy()
+        for col in feature_cols:
+            if col not in last_row.columns:
+                last_row[col] = 0.0
+        pred = max(0, float(model.predict(last_row[feature_cols])[0]))
+        preds.append({'tanggal': str(next_date.date()), 'harga_prediksi': round(pred, 2)})
+        df_temp.loc[df_temp['date'] == next_date, target_col] = pred
+    return preds
+
+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)
+    return [{'tanggal': str(r.ds.date()), 'harga_prediksi': round(max(0, r.yhat), 2)}
+            for _, r in fc.iterrows()]
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 5. LABEL GENERATOR (untuk frontend)
+# ══════════════════════════════════════════════════════════════════════════════
+
+def get_tren(preds):
+    pct = (preds[-1]['harga_prediksi'] - preds[0]['harga_prediksi']) / preds[0]['harga_prediksi'] * 100
+    if pct > 2:     return 'naik_tajam',       pct
+    elif pct > 0.5: return 'naik_terkendali',  pct
+    elif pct < -2:  return 'turun_tajam',       pct
+    elif pct < -0.5: return 'turun_terkendali', pct
+    else:           return 'stabil',            pct
+
+def get_labels(mape, rmse, mean_price, cv, preds, komoditas_nama):
+    harga_vals      = [p['harga_prediksi'] for p in preds]
+    tren, pct       = get_tren(preds)
+    confidence      = round(max(0, min(100, 100 - mape * 2)), 2)
+    stabilitas      = ('optimal' if mape < 2 else 'baik' if mape < 5
+                       else 'cukup' if mape < 10 else 'perlu_retrain')
+    mape_label      = ('Sangat Rendah' if mape < 5 else 'Rendah' if mape < 10
+                       else 'Sedang' if mape < 15 else 'Tinggi' if mape < 25 else 'Sangat Tinggi')
+    rmse_pct        = rmse / mean_price * 100
+    rmse_label      = ('Presisi Sangat Tinggi' if rmse_pct < 1 else 'Presisi Tinggi' if rmse_pct < 2
+                       else 'Presisi Sedang' if rmse_pct < 5 else 'Presisi Rendah')
+    cl_label        = ('Sangat Tinggi' if confidence >= 90 else 'Tinggi' if confidence >= 80
+                       else 'Sedang' if confidence >= 65 else 'Rendah')
+    vol_label       = ('Rendah' if cv < 2 else 'Sedang' if cv < 5 else 'Tinggi')
+
+    if mape < 10:
+        status = {'judul': 'Akurasi Terverifikasi',
+                  'deskripsi': f'Prediksi divalidasi, deviasi rata-rata di bawah {mape:.1f}%.'}
+    elif mape < 20:
+        status = {'judul': 'Akurasi Cukup',
+                  'deskripsi': f'Deviasi rata-rata {mape:.1f}%. Gunakan sebagai referensi.'}
+    else:
+        status = {'judul': 'Perlu Perhatian',
+                  'deskripsi': f'Deviasi {mape:.1f}%. Disarankan retraining.'}
+
+    tren_map = {
+        'stabil'          : ('positif', 'check-circle',   f'Harga {komoditas_nama} diprediksi stabil 7 hari ke depan.'),
+        'naik_terkendali' : ('negatif', 'trending-up',    f'Harga {komoditas_nama} diprediksi naik {abs(pct):.1f}%.'),
+        'naik_tajam'      : ('negatif', 'alert-triangle', f'Harga {komoditas_nama} diprediksi naik tajam {abs(pct):.1f}%.'),
+        'turun_terkendali': ('positif', 'trending-down',  f'Harga {komoditas_nama} diprediksi turun {abs(pct):.1f}%.'),
+        'turun_tajam'     : ('netral',  'alert-triangle', f'Harga {komoditas_nama} diprediksi turun tajam {abs(pct):.1f}%.'),
+    }
+    t1, ikon1, k1 = tren_map.get(tren, ('netral', 'info', f'Tren: {tren}'))
+    peak   = max(preds, key=lambda x: x['harga_prediksi'])
+    trough = min(preds, key=lambda x: x['harga_prediksi'])
+
+    insights = [
+        {'tipe': t1, 'ikon': ikon1, 'konten': k1, 'urutan': 1},
+        {
+            'tipe'  : 'positif' if cv < 2 else ('netral' if cv < 5 else 'negatif'),
+            'ikon'  : 'check-circle' if cv < 2 else 'info',
+            'konten': ('Pasokan terpantau mencukupi.' if cv < 2
+                       else f'Volatilitas sedang (CV={cv:.1f}%).' if cv < 5
+                       else f'Harga sangat fluktuatif (CV={cv:.1f}%).'),
+            'urutan': 2,
+        },
+        {
+            'tipe'  : 'netral',
+            'ikon'  : 'calendar',
+            'konten': (f"Harga tertinggi Rp {peak['harga_prediksi']:,.0f}, "
+                       f"terendah Rp {trough['harga_prediksi']:,.0f} dalam 7 hari."),
+            'urutan': 3,
+        },
+    ]
+
+    return {
+        'tren'            : tren,
+        'pct_change'      : round(pct, 2),
+        'confidence_level': confidence,
+        'confidence_label': cl_label,
+        'stabilitas'      : stabilitas,
+        'mape_label'      : mape_label,
+        'rmse_label'      : rmse_label,
+        'volatilitas_label': vol_label,
+        'status_analisis' : status,
+        'insights'        : insights,
+        'harga_min'       : min(harga_vals),
+        'harga_max'       : max(harga_vals),
+    }
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 6. MAIN PIPELINE — dipanggil oleh API
+# ══════════════════════════════════════════════════════════════════════════════
+
+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):
+    """
+    Full pipeline: cleaning → training → tuning → forecasting → labeling → save.
+    log_cb: callback function(msg: str) untuk streaming log ke frontend.
+    """
+    def log(msg):
+        if log_cb: log_cb(msg)
+
+    other_cols = [c for c in df.columns if c not in ['date', target_market]
+                  and not c.endswith('_was_missing')]
+
+    # ── Cleaning ──
+    log("🧹 Cleaning data...")
+    all_cols = [target_market] + other_cols
+    quality_reports = {}
+    for col in all_cols:
+        if col in df.columns:
+            q = analyze_data_quality(df, col)
+            quality_reports[col] = q
+            df = clean_price_data(df, col, q)
+
+    models_to_run = recommend_models(quality_reports.get(target_market, {}))
+    log(f"🤖 Model yang akan dijalankan: {models_to_run}")
+
+    # ── Prepare dataset ──
+    exclude = ['date'] + [c for c in df.columns if c.endswith('_was_missing')]
+    df_feat = create_features(df, target_market, other_cols)
+    df_clean = df_feat.dropna(subset=[target_market]).reset_index(drop=True)
+    feature_cols = [c for c in df_clean.columns if c not in exclude + all_cols]
+
+    X = df_clean[feature_cols]
+    y = df_clean[target_market]
+    dates = df_clean['date']
+    split = int(len(df_clean) * 0.7)
+    X_train, X_test = X.iloc[:split], X.iloc[split:]
+    y_train, y_test = y.iloc[:split], y.iloc[split:]
+    mean_price = float(y.mean())
+
+    # ── Train ──
+    all_results = {}
+    lgb_model = xgb_model = prophet_model = None
+
+    if 'lightgbm' in models_to_run:
+        log("Training LightGBM...")
+        lgb_model, res = train_lightgbm(X_train, y_train, X_test, y_test)
+        all_results['LightGBM'] = {**res, 'obj': lgb_model, 'type': 'tree'}
+
+    if 'xgboost' in models_to_run:
+        log("Training XGBoost...")
+        xgb_model, res = train_xgboost(X_train, y_train, X_test, y_test)
+        all_results['XGBoost'] = {**res, 'obj': xgb_model, 'type': 'tree'}
+
+    if 'prophet' in models_to_run:
+        log("Training Prophet...")
+        try:
+            prophet_model, res = train_prophet(dates.iloc[:split], y_train, dates.iloc[split:], y_test)
+            all_results['Prophet'] = {**res, 'obj': prophet_model, 'type': 'prophet'}
+        except Exception as e:
+            log(f"⚠️ Prophet gagal: {e}")
+
+    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'}
+        except Exception as e:
+            log(f"⚠️ ARIMA 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})")
+
+    # ── Tuning ──
+    final_model  = best['obj']
+    final_result = best
+    final_name   = best_name
+
+    if best['type'] == 'tree':
+        log(f"🔧 Tuning {best_name} dengan Optuna ({n_trials} trials)...")
+        best_params = tune_with_optuna(best_name, X_train, y_train, n_trials)
+        if best_name == 'LightGBM':
+            tuned = lgb.LGBMRegressor(**best_params, objective='regression',
+                                      verbose=-1, random_state=42, force_col_wise=True)
+        else:
+            tuned = xgb.XGBRegressor(**best_params, objective='reg:squarederror',
+                                     random_state=42, verbosity=0)
+        tuned.fit(X_train, y_train)
+        tuned_res = evaluate_model(y_test, tuned.predict(X_test), f"{best_name}_Tuned")
+        if tuned_res['rmse'] < best['rmse']:
+            final_model  = tuned
+            final_result = tuned_res
+            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...")
+    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())
+    else:
+        predictions = forecast_tree(final_model, df_hist, target_market, other_cols, feature_cols)
+
+    # ── Labels ──
+    cv = quality_reports.get(target_market, {}).get('cv', 0)
+    labels = get_labels(
+        final_result['mape'], final_result['rmse'],
+        mean_price, cv, predictions, komoditas_nama
+    )
+
+    # ── Simpan model ──
+    prefix    = os.path.join(MODEL_DIR, f"model_{komoditas_id}_{pasar_id}")
+    model_path= f"{prefix}.pkl"
+    with open(model_path, 'wb') as f:
+        pickle.dump(final_model, f)
+    with open(f"{prefix}_features.json", 'w') as f:
+        json.dump(feature_cols, f)
+
+    metadata = {
+        'komoditas_id'    : komoditas_id,
+        'komoditas_nama'  : komoditas_nama,
+        'pasar_id'        : pasar_id,
+        'target_market'   : target_market,
+        'other_markets'   : other_cols,
+        'nama_model'      : final_name,
+        'versi'           : '1.0',
+        'file_path'       : model_path,
+        'mape'            : round(final_result['mape'], 4),
+        'rmse'            : round(final_result['rmse'], 4),
+        'mae'             : round(final_result['mae'], 4),
+        'r2_score'        : round(final_result['r2'], 4),
+        'confidence_level': labels['confidence_level'],
+        'stabilitas'      : labels['stabilitas'],
+        'status_validasi' : 'terverifikasi',
+        'catatan_validasi': labels['status_analisis']['deskripsi'],
+        'tanggal_training': date.today().isoformat(),
+        'tanggal_evaluasi': date.today().isoformat(),
+        'deskripsi'       : f"Model {final_name} untuk prediksi harga {komoditas_nama}.",
+        'models_tried'    : list(all_results.keys()),
+        'data_quality'    : quality_reports.get(target_market, {}),
+    }
+    with open(f"{prefix}_metadata.json", 'w') as f:
+        json.dump(metadata, f, indent=2)
+
+    log(f"✅ Pipeline selesai! MAPE={final_result['mape']:.2f}%")
+
+    return {
+        '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()},
+    }

backend/requirements.txt

@@ -0,0 +1,15 @@
+fastapi==0.111.0
+uvicorn==0.29.0
+pandas==2.2.2
+numpy==1.26.4
+scikit-learn==1.4.2
+lightgbm==4.3.0
+xgboost==2.0.3
+prophet==1.1.5
+statsmodels==0.14.2
+optuna==3.6.1
+pymysql==1.1.1
+sqlalchemy==2.0.30
+python-dotenv==1.0.1
+apscheduler==3.10.4
+python-multipart==0.0.9

frontend/app/dashboard/layout.tsx

@@ -0,0 +1,48 @@
+// app/dashboard/layout.tsx
+'use client'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { BarChart2, Settings, Terminal, Home, LogOut } from 'lucide-react'
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!localStorage.getItem('sikomo_token')) router.push('/')
+  }, [])
+
+  function logout() {
+    localStorage.removeItem('sikomo_token')
+    router.push('/')
+  }
+
+  const links = [
+    { 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' },
+  ]
+
+  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>
+      </aside>
+      <main className="flex-1 p-8 overflow-auto">{children}</main>
+    </div>
+  )
+}

frontend/app/dashboard/page.tsx

@@ -0,0 +1,69 @@
+// app/dashboard/page.tsx
+'use client'
+import { useEffect, useState } from 'react'
+import { api } from '@/lib/api'
+
+export default function OverviewPage() {
+  const [komoditas, setKomoditas] = useState<any[]>([])
+  const [scheduler, setScheduler] = useState<any>(null)
+
+  useEffect(() => {
+    api.getKomoditas().then(setKomoditas)
+    api.getScheduler().then(setScheduler)
+  }, [])
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Overview</h1>
+
+      {/* 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>
+        </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'}
+          </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')}` : '--:--'}
+          </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>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

frontend/app/forecast/page.tsx

@@ -0,0 +1,123 @@
+// app/dashboard/forecast/page.tsx
+'use client'
+import { useEffect, useState } from 'react'
+import { api } from '@/lib/api'
+import { Play, RefreshCw } from 'lucide-react'
+
+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)
+
+  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)
+  }
+
+  async function runOne(id: number) {
+    setLoading(true)
+    await api.runForecast(id)
+    setTimeout(fetchLog, 2000)
+    setLoading(false)
+  }
+
+  async function runAll() {
+    setLoading(true)
+    await api.runForecastAll()
+    setTimeout(fetchLog, 3000)
+    setLoading(false)
+  }
+
+  async function saveScheduler() {
+    await api.updateScheduler({ enabled: autoEnabled, hour: parseInt(hour), minute: parseInt(minute) })
+    const s = await api.getScheduler()
+    setScheduler(s)
+    alert('Scheduler diperbarui!')
+  }
+
+  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>
+          <button onClick={saveScheduler}
+            className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 rounded-lg text-sm font-medium">
+            Simpan
+          </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>
+        </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
+              </button>
+            </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>
+        </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>
+      </div>
+    </div>
+  )
+}

frontend/app/globals.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  background-color: #111827; /* gray-950 */
+  color: #f3f4f6; /* gray-100 */
+}

frontend/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "SIKOMO ML Dashboard",
+  description: "Dashboard Admin Prediksi Komoditas SIKOMO",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="id">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,49 @@
+// app/page.tsx
+'use client'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { api } from '@/lib/api'
+
+export default function LoginPage() {
+  const [pw, setPw]     = useState('')
+  const [err, setErr]   = useState('')
+  const [load, setLoad] = useState(false)
+  const router          = useRouter()
+
+  async function handleLogin() {
+    setLoad(true); setErr('')
+    try {
+      const res = await api.login(pw)
+      localStorage.setItem('sikomo_token', res.token)
+      router.push('/dashboard')
+    } catch {
+      setErr('Password salah.')
+    } finally { setLoad(false) }
+  }
+
+  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>
+    </div>
+  )
+}

frontend/app/prediksi/page.tsx

@@ -0,0 +1,268 @@
+// app/dashboard/prediksi/page.tsx
+'use client'
+import { useEffect, useState } from 'react'
+import { api } from '@/lib/api'
+import { Pencil, Trash2, Plus, Check, X } 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 [editInsight, setEditInsight] = useState<any>(null)
+  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 [editModel, setEditModel] = useState(false)
+  const [modelForm, setModelForm] = useState({ deskripsi:'', catatan_validasi:'' })
+
+  useEffect(() => { api.getKomoditas().then(setKomoditas) }, [])
+
+  async function selectKomoditas(id: number) {
+    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  || '',
+    })
+  }
+
+  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!)
+  }
+
+  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',
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">Data Prediksi</h1>
+
+      {/* Pilih komoditas */}
+      <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>
+        ))}
+      </div>
+
+      {data && (
+        <div className="grid grid-cols-2 gap-6">
+
+          {/* Ringkasan Prediksi */}
+          <div className="bg-gray-900 border border-gray-800 rounded-xl p-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>
+            </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>
+            ) : (
+              <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 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>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Model ML */}
+          <div className="bg-gray-900 border border-gray-800 rounded-xl p-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>
+            </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>
+                <p className="text-gray-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 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>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Insight Editor */}
+          <div className="col-span-2 bg-gray-900 border border-gray-800 rounded-xl p-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
+              </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="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>
+                        <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"/>
+                      </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>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex items-start justify-between bg-gray-800 rounded-lg px-4 py-3">
+                      <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>
+                      </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>
+                      </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="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>
+                    <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"/>
+                  </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>
+                  </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>
+            <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>
+                </tr></thead>
+                <tbody>
+                  {(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>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/app/settings/page.tsx

@@ -0,0 +1,60 @@
+// app/dashboard/settings/page.tsx
+'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',
+}
+
+export default function SettingsPage() {
+  const [envData, setEnvData] = useState<Record<string, string>>({})
+  const [saved, setSaved]     = useState<string | null>(null)
+
+  useEffect(() => { api.getEnv().then(setEnvData) }, [])
+
+  async function save(key: string) {
+    await api.updateEnv(key, envData[key] || '')
+    setSaved(key)
+    setTimeout(() => setSaved(null), 2000)
+  }
+
+  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>
+            <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>
+  )
+}

frontend/lib/api.ts

@@ -0,0 +1,42 @@
+// lib/api.ts — semua pemanggilan ke HuggingFace API
+const BASE = process.env.NEXT_PUBLIC_API_URL || ''
+
+function getToken() {
+  if (typeof window !== 'undefined') return localStorage.getItem('sikomo_token') || ''
+  return ''
+}
+
+async function req(path: string, opts: RequestInit = {}) {
+  const res = await fetch(`${BASE}${path}`, {
+    ...opts,
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${getToken()}`,
+      ...opts.headers,
+    },
+  })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: res.statusText }))
+    throw new Error(err.detail || 'Request gagal')
+  }
+  return res.json()
+}
+
+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) }),
+}

frontend/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  trailingSlash: true,
+  env: {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+  },
+}
+module.exports = nextConfig

frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "sikomo-hf-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "lucide-react": "^0.378.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/tailwind.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+export default config;

frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}