Fix: clean_harga logic and rename functions to match traceback

.dockerignore

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

.gitignore

@@ -0,0 +1,30 @@
+# 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/
+
+# OS Files
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,46 @@
+# ── STAGE 1: Build Frontend (Next.js Static Export) ──
+FROM node:20-alpine AS builder
+WORKDIR /app/frontend
+
+# Copy dependencies definitions
+COPY frontend/package*.json ./
+RUN npm install
+
+# Copy application source code
+COPY frontend/ ./
+
+# Allocate sufficient heap limit for production bundle compilation
+ENV NODE_OPTIONS="--max-old-space-size=2048"
+RUN npm run build
+
+# ── STAGE 2: Production Python Runtime Runner ──
+FROM python:3.11-slim
+
+# Create dedicated non-root user required by Hugging Face Spaces security policy
+RUN useradd -m -u 1000 user
+WORKDIR /app
+
+# Install minimal OS build dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install python dependencies as user
+COPY --chown=user backend/requirements.txt ./
+RUN pip install --no-cache-dir --upgrade pip \
+ && pip install --no-cache-dir -r requirements.txt
+
+# Copy backend python packages
+COPY --chown=user backend/ ./
+
+# Establish web serving static destination directory
+RUN mkdir -p /app/static && chown -R user:user /app/static
+COPY --chown=user --from=builder /app/frontend/out /app/static
+
+# Enforce secure runner execution ownership context
+USER user
+ENV TZ="Asia/Jakarta"
+EXPOSE 7860
+
+# Initiate robust application framework entrypoint
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860", "--workers", "1"]

README.md

@@ -0,0 +1,23 @@
+---
+title: Sikomo Daily Scraper Portal
+emoji: 🕷️
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
+# Sikomo Daily Scraper Portal
+
+Sistem Otomatisasi Pengambilan dan Pemrosesan Harga Komoditas Harian Kabupaten Batang yang dikonfigurasi untuk berjalan mulus di atas arsitektur cloud containerized **Hugging Face Spaces**.
+
+## Pengaturan Rahasia Lingkungan (HF Secrets)
+Harap konfigurasikan variabel rahasia berikut pada menu pengaturan **Settings → Secrets** di repositori Space Anda sebelum memicu proses *Build*:
+
+- `MYSQL_HOST` : Alamat host server database MySQL (contoh: `db.khamdanu.xyz`)
+- `MYSQL_PORT` : Port koneksi standar MySQL (contoh: `3306`)
+- `MYSQL_DATABASE` : Nama skema database (contoh: `sikomo_db`)
+- `MYSQL_USER` : Nama pengguna akses database
+- `MYSQL_PASSWORD` : Kata sandi autentikasi pengguna database
+
+> **Peringatan Keamanan**: Jangan pernah menanamkan (hardcode) kata sandi atau kredensial basis data langsung di dalam salinan repositori publik ini.

backend/app/config.py

@@ -0,0 +1,33 @@
+from pydantic_settings import BaseSettings
+from functools import lru_cache
+
+class Settings(BaseSettings):
+    # Database
+    MYSQL_HOST: str
+    MYSQL_PORT: int = 3306
+    MYSQL_DATABASE: str
+    MYSQL_USER: str
+    MYSQL_PASSWORD: str
+    
+    # API
+    API_PORT: int = 8000
+    API_HOST: str = "0.0.0.0"
+    
+    # Scheduler
+    DEFAULT_SCHEDULE: str = "0 8 * * *"
+    DEFAULT_SCHEDULES: str = "0 8 * * *"  # comma-separated if multiple
+    
+    # CORS
+    FRONTEND_URL: str = "http://localhost:3000"
+    
+    @property
+    def DATABASE_URL(self) -> str:
+        return f"mysql+pymysql://{self.MYSQL_USER}:{self.MYSQL_PASSWORD}@{self.MYSQL_HOST}:{self.MYSQL_PORT}/{self.MYSQL_DATABASE}"
+    
+    class Config:
+        env_file = ".env"
+        extra = "ignore"
+
+@lru_cache()
+def get_settings():
+    return Settings()

backend/app/database.py

@@ -0,0 +1,13 @@
+from sqlalchemy import create_engine
+from app.config import get_settings
+
+settings = get_settings()
+
+engine = create_engine(
+    settings.DATABASE_URL,
+    pool_pre_ping=True,
+    pool_recycle=3600
+)
+
+def get_db_engine():
+    return engine

backend/app/logger.py

@@ -0,0 +1,44 @@
+import logging
+from datetime import datetime
+from typing import List, Dict, Optional
+
+class MemoryLogHandler(logging.Handler):
+    def __init__(self, capacity: int = 500):
+        super().__init__()
+        self.capacity = capacity
+        self.logs: List[Dict] = []
+
+    def emit(self, record):
+        try:
+            # We want just the message or formatted message
+            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()
+
+memory_handler = MemoryLogHandler()
+
+def get_app_logger(name: str):
+    logger = logging.getLogger(f"app.{name}")
+    logger.setLevel(logging.INFO)
+    # Ensure memory handler is added
+    if not any(isinstance(h, MemoryLogHandler) for h in logger.handlers):
+        logger.addHandler(memory_handler)
+    return logger

backend/app/main.py

@@ -0,0 +1,143 @@
+from fastapi import FastAPI, HTTPException, Query
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+from typing import Optional
+from app.scheduler import scraper_scheduler
+from app.scraper import scraping_hari_ini, upload_to_mysql
+from app.database import get_db_engine
+from app.config import get_settings
+from app.logger import get_app_logger, memory_handler
+import os
+
+logger = get_app_logger("main")
+settings = get_settings()
+
+app = FastAPI(title="Sikomo Scraper API", version="1.1.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allow all for HF Spaces compatibility
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class ScheduleAdd(BaseModel):
+    cron_expression: str
+    label: Optional[str] = ""
+
+class ScheduleUpdate(BaseModel):
+    cron_expression: str
+
+@app.on_event("startup")
+async def startup_event():
+    logger.info("🎉 Memulai Sikomo Scraper API Server...")
+    scraper_scheduler.start_all()
+    logger.info("🚀 API Server siap menerima permintaan.")
+
+@app.on_event("shutdown")
+async def shutdown_event():
+    scraper_scheduler.stop_all()
+    logger.info("🛑 API Server dimatikan.")
+
+# --- API Endpoints ---
+
+@app.get("/status")
+async def get_status():
+    return scraper_scheduler.get_status()
+
+@app.get("/logs")
+async def get_logs(limit: int = Query(100, le=500), level: Optional[str] = None):
+    return memory_handler.get_logs(limit=limit, level=level)
+
+@app.get("/schedules")
+async def list_schedules():
+    return scraper_scheduler.list_schedules()
+
+@app.post("/schedules/add")
+async def add_schedule(schedule: ScheduleAdd):
+    try:
+        job_id = scraper_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")
+async def remove_schedule(job_id: str):
+    try:
+        scraper_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))
+
+# Backward compatibility for single schedule update if UI still uses it
+@app.post("/schedule/update")
+async def update_schedule(schedule: ScheduleUpdate):
+    try:
+        # Clear existing and add new
+        scraper_scheduler.stop_all()
+        scraper_scheduler.start_all()
+        job_id = scraper_scheduler.add_schedule(schedule.cron_expression, label="Jadwal Utama")
+        return {"success": True, "message": f"Jadwal diupdate ke: {schedule.cron_expression}"}
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.post("/scrape/manual")
+def manual_scrape():
+    logger.info("⚡ Permintaan manual scraping dipicu via API...")
+    try:
+        df = scraping_hari_ini()
+        engine = get_db_engine()
+        stats = upload_to_mysql(df, engine)
+        return {"success": True, "stats": stats}
+    except Exception as e:
+        logger.error(f"❌ Manual scrape gagal: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/scrape/stop")
+def stop_manual_scrape():
+    from app.scraper import stop_event
+    logger.warning("🛑 Menerima permintaan penghentian scraping manual...")
+    stop_event.set()
+    return {"success": True, "message": "Permintaan penghentian dikirim"}
+
+@app.post("/schedule/start")
+async def start_scheduler():
+    scraper_scheduler.start_all()
+    return {"success": True, "message": "Scheduler otomatis diaktifkan"}
+
+@app.post("/schedule/stop")
+async def stop_scheduler():
+    scraper_scheduler.stop_all()
+    return {"success": True, "message": "Scheduler otomatis dimatikan"}
+
+# --- Static Files / SPA Serving ---
+# Mount static folder if exists (in Docker production or local test)
+static_dirs = [
+    "/app/static",
+    os.path.join(os.path.dirname(os.path.dirname(__file__)), "static"),
+    os.path.join(os.path.dirname(os.path.dirname(os.path.dirname(__file__))), "frontend", "out")
+]
+
+mounted = False
+for sdir in static_dirs:
+    if os.path.exists(sdir):
+        app.mount("/", StaticFiles(directory=sdir, html=True), name="spa")
+        mounted = True
+        break
+
+if not mounted:
+    @app.get("/")
+    async def root_fallback():
+        return {
+            "message": "Sikomo Scraper API Server beroperasi normal.",
+            "note": "Frontend static files belum di-build/mount ke direktori static."
+        }

backend/app/scheduler.py

@@ -0,0 +1,133 @@
+from apscheduler.schedulers.background import BackgroundScheduler
+from apscheduler.triggers.cron import CronTrigger
+from app.scraper import scraping_hari_ini, upload_to_mysql
+from app.database import get_db_engine
+from app.config import get_settings
+from app.logger import get_app_logger
+from datetime import datetime
+import uuid
+from pytz import timezone
+
+logger = get_app_logger("scheduler")
+settings = get_settings()
+wib_tz = timezone("Asia/Jakarta")
+
+class ScraperScheduler:
+    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}
+        
+    def run_scraping(self):
+        logger.info("⏰ Menjalankan tugas scraping terjadwal otomatis...")
+        try:
+            df = scraping_hari_ini()
+            engine = get_db_engine()
+            stats = upload_to_mysql(df, engine)
+            self.last_run = datetime.now()
+            self.last_result = {
+                "success": True, 
+                "stats": stats, 
+                "timestamp": self.last_run.isoformat()
+            }
+            logger.info("✅ Tugas scraping otomatis selesai dijalankan.")
+        except Exception as e:
+            self.last_result = {
+                "success": False, 
+                "error": str(e), 
+                "timestamp": datetime.now().isoformat()
+            }
+            logger.error(f"❌ Tugas scraping otomatis gagal: {e}")
+    
+    def start_all(self):
+        if not self.is_running:
+            self.scheduler.start()
+            self.is_running = True
+            logger.info("▶️ Mesin Scheduler utama telah diaktifkan.")
+            
+            # Load default schedules if empty
+            if not self.schedules:
+                defaults = [s.strip() for s in settings.DEFAULT_SCHEDULES.split(",") if s.strip()]
+                for cron in defaults:
+                    self.add_schedule(cron, label="Jadwal Default")
+    
+    def stop_all(self):
+        if self.is_running:
+            self.scheduler.shutdown(wait=False)
+            self.scheduler = BackgroundScheduler() # reset
+            self.is_running = False
+            self.schedules.clear()
+            logger.info("⏹️ Mesin Scheduler utama telah dimatikan.")
+            
+    def add_schedule(self, cron_expression: str, label: str = "") -> str:
+        # Check if we already have this exact cron to avoid exact duplicates if desired,
+        # but let's allow unique IDs
+        job_id = str(uuid.uuid4())[:8]
+        try:
+            trigger = CronTrigger.from_crontab(cron_expression, timezone=wib_tz)
+            self.scheduler.add_job(
+                self.run_scraping,
+                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})")
+            
+            # Ensure scheduler is running if we add a job
+            if not self.is_running:
+                self.scheduler.start()
+                self.is_running = True
+                logger.info("▶️ Mesin 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):
+        if job_id in self.schedules:
+            try:
+                self.scheduler.remove_job(job_id)
+            except:
+                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):
+        result = []
+        # Get active jobs from APScheduler to find next_run_time
+        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):
+        # Let's find the absolute next run among all active jobs
+        jobs = self.scheduler.get_jobs()
+        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)
+        }
+
+scraper_scheduler = ScraperScheduler()

backend/app/scraper.py

@@ -0,0 +1,283 @@
+import requests
+from bs4 import BeautifulSoup
+from datetime import datetime
+import pandas as pd
+import time
+from typing import List, Dict
+import threading
+from app.logger import get_app_logger
+
+logger = get_app_logger("scraper")
+
+# Global event to signal stopping of scraping tasks
+stop_event = threading.Event()
+
+BASE_URL = "https://komoditas.batangkab.go.id/statistik_komo"
+
+KOMODITAS_MAPPING = {
+    34: {"id": 1, "nama": "Bawang Merah"},
+    35: {"id": 2, "nama": "Bawang Putih"},
+    3: {"id": 3, "nama": "Beras IR-64 (KW Medium)"},
+    46: {"id": 4, "nama": "Beras IR-64 (KW Premium)"},
+    30: {"id": 5, "nama": "Cabe Merah Besar Keriting"},
+    31: {"id": 6, "nama": "Cabe Merah Besar Teropong"},
+    32: {"id": 7, "nama": "Cabe Rawit Merah"},
+    33: {"id": 8, "nama": "Cabe Rawit Hijau"},
+    11: {"id": 9, "nama": "Daging Ayam Ras"},
+    12: {"id": 10, "nama": "Daging Ayam Kampung"},
+    10: {"id": 11, "nama": "Daging Sapi Murni (Has)"},
+    14: {"id": 12, "nama": "Telur Ayam Ras"},
+    15: {"id": 13, "nama": "Telur Ayam Kampung"},
+    63: {"id": 14, "nama": "Jeruk (1 kg)"},
+    23: {"id": 15, "nama": "Jagung Pipilan Kering"},
+    42: {"id": 16, "nama": "Kacang Hijau"},
+    43: {"id": 17, "nama": "Kacang Tanah"},
+    27: {"id": 18, "nama": "Kacang Kedelai Import"},
+    28: {"id": 19, "nama": "Kacang Kedelai Lokal"},
+    44: {"id": 20, "nama": "Ketela Pohon"},
+    60: {"id": 21, "nama": "Pisang Ambon/Pisang Lokal (1 kg)"},
+    48: {"id": 22, "nama": "Ikan Bandeng"},
+    64: {"id": 23, "nama": "Ikan Kembung"},
+    49: {"id": 24, "nama": "Ikan Asin Teri"},
+    57: {"id": 25, "nama": "Udang Jerbung"},
+    24: {"id": 26, "nama": "Tepung Terigu"},
+    25: {"id": 27, "nama": "Tepung Terigu Segitiga Biru (KW medium)"},
+    5: {"id": 28, "nama": "Gula Pasir Lokal (KW Medium)"},
+    38: {"id": 29, "nama": "Garam Beryodium Bata"},
+    39: {"id": 30, "nama": "Garam Beryodium Halus"},
+    45: {"id": 31, "nama": "LPG 3 KG"},
+    7: {"id": 32, "nama": "Minyak Goreng Bimoli Botol"},
+    8: {"id": 33, "nama": "Minyak Goreng Curah (Tanpa Merk)"},
+    41: {"id": 34, "nama": "Mie Instan Merk Indomie Kari Ayam"},
+    18: {"id": 35, "nama": "Susu Kental Manis Merk Bendera"},
+    19: {"id": 36, "nama": "Susu Kental Manis Merk Indomilk"},
+    21: {"id": 37, "nama": "Susu Bubuk Merk Indomilk Coklat"},
+    22: {"id": 38, "nama": "Susu Bubuk Merk Indomilk Full Cream"},
+    61: {"id": 39, "nama": "Dancow Vanila (400 - 500 gram)"},
+    62: {"id": 40, "nama": "Susu Balita (SGM atau sejenisnya 400 gram)"},
+    50: {"id": 41, "nama": "Pupuk UREA"},
+    51: {"id": 42, "nama": "Pupuk SP-36"},
+    52: {"id": 43, "nama": "Pupuk ZA"},
+    53: {"id": 44, "nama": "Pupuk KCL"},
+    54: {"id": 45, "nama": "Semen Tiga Roda"},
+    55: {"id": 46, "nama": "Semen Gresik"},
+    56: {"id": 47, "nama": "Semen Holcim"},
+    58: {"id": 48, "nama": "Tempe (1 kg)"},
+    59: {"id": 49, "nama": "Tahu Mentah (1 kg)"}
+}
+
+BULAN_MAP = {
+    "januari": "01", "februari": "02", "maret": "03", "april": "04",
+    "mei": "05", "juni": "06", "juli": "07", "agustus": "08",
+    "september": "09", "oktober": "10", "november": "11", "desember": "12"
+}
+
+NAMA_PASAR = {
+    1: "Pasar Batang",
+    2: "Pasar Bandar",
+    3: "Pasar Limpung"
+}
+
+def convert_tanggal_indo(tanggal_text: str) -> str:
+    try:
+        parts = tanggal_text.strip().lower().split()
+        hari = parts[0].zfill(2)
+        bulan = BULAN_MAP[parts[1]]
+        tahun = parts[2]
+        return f"{tahun}-{bulan}-{hari}"
+    except:
+        return None
+
+def clean_harga(value: str) -> float:
+    """
+    Cleans price string into float. Handles Indonesian formats (e.g., 13.500,00 or 13500,00).
+    """
+    if value is None:
+        return 0.0
+    value = str(value).strip()
+    if value in ("", "-", "0"):
+        return 0.0
+    
+    # Remove currency symbols and other non-numeric chars except comma and dot
+    import re
+    value = re.sub(r'[^\d,.]', '', value)
+    
+    # Handle Indonesian format: dots as thousands, comma as decimal
+    # Or common web format: commas as thousands, dot as decimal
+    # If both present, assume last one is decimal
+    if "," in value and "." in value:
+        if value.rfind(",") > value.rfind("."):
+            # Dot is thousands, comma is decimal
+            value = value.replace(".", "").replace(",", ".")
+        else:
+            # Comma is thousands, dot is decimal
+            value = value.replace(",", "")
+    elif "," in value:
+        # Only comma: if it looks like decimal (e.g. 13500,00), replace with dot
+        # If it looks like thousands (e.g. 13,500), remove it
+        if len(value.split(",")[-1]) <= 2: # Likely decimal
+            value = value.replace(",", ".")
+        else:
+            value = value.replace(",", "")
+            
+    try:
+        return float(value)
+    except (ValueError, TypeError):
+        return 0.0
+
+def is_summary_row(text: str) -> bool:
+    text = text.lower()
+    keywords = ["harga tertinggi", "harga rata", "harga terendah"]
+    return any(k in text for k in keywords)
+
+def scraping_hari_ini() -> pd.DataFrame:
+    today = datetime.now()
+    hasil = []
+    
+    logger.info("=" * 50)
+    logger.info(f"🕸️ Memulai proses scraping untuk tanggal {today.strftime('%Y-%m-%d')}")
+    logger.info("=" * 50)
+    
+    stop_event.clear()
+    
+    for scraping_id, info in KOMODITAS_MAPPING.items():
+        database_id = info["id"]
+        nama_komoditas = info["nama"]
+        
+        if stop_event.is_set():
+            logger.warning("🛑 Scraping dihentikan atas permintaan pengguna.")
+            break
+            
+        params = {
+            "id_komoditi": scraping_id,
+            "bulan": today.month,
+            "tahun": today.year
+        }
+        
+        try:
+            response = requests.get(BASE_URL, params=params, timeout=30)
+            if response.status_code != 200:
+                logger.warning(f"⚠️ Gagal mengambil data ID {scraping_id} (HTTP {response.status_code})")
+                continue
+            
+            soup = BeautifulSoup(response.text, "html.parser")
+            table = soup.find("table")
+            if not table:
+                continue
+            
+            rows = table.find_all("tr")
+            found_data = False
+            for row in rows[1:]:
+                cols = row.find_all(["td", "th"])
+                data = [col.get_text(strip=True) for col in cols]
+                
+                if len(data) < 4 or is_summary_row(data[0]):
+                    continue
+                
+                tanggal = convert_tanggal_indo(data[0])
+                if not tanggal or tanggal != today.strftime("%Y-%m-%d"):
+                    continue
+                
+                found_data = True
+                for pasar_id, harga in enumerate([clean_harga(data[1]), clean_harga(data[2]), clean_harga(data[3])], start=1):
+                    hasil.append({
+                        "komoditas_id": database_id,
+                        "komoditas_nama": nama_komoditas,
+                        "pasar_id": pasar_id,
+                        "tanggal": tanggal,
+                        "harga": harga
+                    })
+            
+            if found_data:
+                logger.info(f"✅ Scraping sukses untuk {nama_komoditas} (ID {scraping_id} -> DB ID {database_id})")
+            time.sleep(0.5)
+        except Exception as e:
+            logger.error(f"❌ Error scraping ID {scraping_id}: {e}")
+    
+    df = pd.DataFrame(hasil)
+    logger.info(f"📊 Total baris hasil scraping: {len(df)}")
+    return df
+
+def upload_to_mysql(df: pd.DataFrame, engine) -> Dict:
+    pasar_berhasil = set()
+    pasar_harga_0 = set()
+    komoditas_berhasil = []
+    komoditas_harga_0 = []
+    
+    stats = {
+        "total_insert": 0,
+        "total_update": 0,
+        "total_skip": 0,
+        "total_harga_0": 0,
+        "pasar_berhasil": [],
+        "pasar_harga_0": [],
+        "komoditas_berhasil_count": 0,
+        "komoditas_harga_0_count": 0
+    }
+    
+    logger.info("🚀 Memulai proses upload ke database MySQL...")
+    
+    if df.empty:
+        logger.warning("⚠️ DataFrame kosong, tidak ada data yang diupload.")
+        return stats
+    
+    with engine.begin() as conn:
+        for _, row in df.iterrows():
+            if stop_event.is_set():
+                logger.warning("🛑 Upload database dihentikan atas permintaan pengguna.")
+                break
+                
+            komoditas_id = int(row["komoditas_id"])
+            komoditas_nama = row["komoditas_nama"]
+            pasar_id = int(row["pasar_id"])
+            tanggal = row["tanggal"]
+            harga_baru = float(row["harga"])
+            pasar_nama = NAMA_PASAR.get(pasar_id, f"Pasar {pasar_id}")
+            
+            if harga_baru <= 0:
+                stats["total_harga_0"] += 1
+                komoditas_harga_0.append(komoditas_id)
+                pasar_harga_0.add(pasar_nama)
+                continue
+            
+            check_query = """
+            SELECT id, harga FROM harga_harian
+            WHERE komoditas_id = %s AND pasar_id = %s AND tanggal = %s LIMIT 1
+            """
+            result = conn.exec_driver_sql(check_query, (komoditas_id, pasar_id, tanggal)).fetchone()
+            
+            if result:
+                existing_id, harga_lama = result[0], float(result[1])
+                if harga_lama <= 0 and harga_baru > 0:
+                    conn.exec_driver_sql("UPDATE harga_harian SET harga = %s WHERE id = %s", (harga_baru, existing_id))
+                    stats["total_update"] += 1
+                    komoditas_berhasil.append(komoditas_id)
+                    pasar_berhasil.add(pasar_nama)
+                    logger.info(f"✏️ Update sukses: {komoditas_nama} di {pasar_nama} -> Rp {harga_baru:,.0f}")
+                else:
+                    stats["total_skip"] += 1
+            else:
+                conn.exec_driver_sql(
+                    "INSERT INTO harga_harian (komoditas_id, pasar_id, tanggal, harga) VALUES (%s, %s, %s, %s)",
+                    (komoditas_id, pasar_id, tanggal, harga_baru)
+                )
+                stats["total_insert"] += 1
+                komoditas_berhasil.append(komoditas_id)
+                pasar_berhasil.add(pasar_nama)
+                logger.info(f"📥 Insert sukses: {komoditas_nama} di {pasar_nama} -> Rp {harga_baru:,.0f}")
+    
+    stats["pasar_berhasil"] = sorted(list(pasar_berhasil))
+    stats["pasar_harga_0"] = sorted(list(pasar_harga_0))
+    stats["komoditas_berhasil_count"] = len(set(komoditas_berhasil))
+    stats["komoditas_harga_0_count"] = len(set(komoditas_harga_0))
+    
+    logger.info("=" * 50)
+    logger.info("📈 Ringkasan Upload Database:")
+    logger.info(f"  • Insert Baru   : {stats['total_insert']}")
+    logger.info(f"  • Update Data   : {stats['total_update']}")
+    logger.info(f"  • Diabaikan     : {stats['total_skip']}")
+    logger.info(f"  • Harga Nol (0) : {stats['total_harga_0']}")
+    logger.info(f"  • Pasar Sukses  : {', '.join(stats['pasar_berhasil']) or '-'}")
+    logger.info("=" * 50)
+    
+    return stats

backend/requirements.txt

@@ -0,0 +1,13 @@
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+requests==2.31.0
+beautifulsoup4==4.12.3
+pandas==2.2.0
+pymysql==1.1.0
+sqlalchemy==2.0.25
+python-dotenv==1.0.1
+apscheduler==3.10.4
+pydantic==2.5.3
+python-multipart==0.0.6
+pydantic-settings==2.1.0
+aiofiles==23.2.1

frontend/app/globals.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  /* Glassmorphism effects */
+  .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 for Logs */
+::-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;
+}

frontend/app/layout.tsx

@@ -0,0 +1,24 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Sikomo Daily Scraper Portal',
+  description: 'Premium Automated Commodity Price Scraper & Control Panel',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="id" className="scroll-smooth">
+      <body className={`${inter.className} bg-slate-900 text-slate-100 min-h-screen antialiased selection:bg-teal-500 selection:text-white`}>
+        {children}
+      </body>
+    </html>
+  )
+}

frontend/app/page.tsx

@@ -0,0 +1,781 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import axios from 'axios'
+import { 
+  Play, 
+  Square, 
+  RefreshCw, 
+  Calendar, 
+  Activity, 
+  CheckCircle, 
+  XCircle, 
+  Lock, 
+  LogOut, 
+  Plus, 
+  Trash2, 
+  Terminal, 
+  Filter, 
+  Check, 
+  AlertTriangle, 
+  Info, 
+  X,
+  Layers
+} from 'lucide-react'
+
+// Auto-detect base path/URL if running exported on FastAPI or standalone Next.js
+const API_URL = process.env.NEXT_PUBLIC_API_URL || ''
+
+interface Status {
+  is_running: boolean
+  last_run: string | null
+  last_result: any
+  next_run: string | null
+  active_schedules_count: number
+}
+
+interface ScheduleItem {
+  id: string
+  cron_expression: string
+  label: string
+  next_run: string | null
+}
+
+interface LogItem {
+  timestamp: string
+  level: string
+  source: string
+  message: string
+}
+
+export default function Dashboard() {
+  // --- Auth State ---
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [passwordInput, setPasswordInput] = useState('')
+  const [authError, setAuthError] = useState(false)
+
+  // --- Dashboard States ---
+  const [status, setStatus] = useState<Status | null>(null)
+  const [schedules, setSchedules] = useState<ScheduleItem[]>([])
+  const [logs, setLogs] = useState<LogItem[]>([])
+  
+  // Controls
+  const [loadingScrape, setLoadingScrape] = useState(false)
+  const [newCron, setNewCron] = useState('')
+  const [newLabel, setNewLabel] = useState('')
+  const [selectedHour, setSelectedHour] = useState('08')
+  const [selectedMinute, setSelectedMinute] = useState('00')
+  const [logLevelFilter, setLogLevelFilter] = useState('ALL')
+  
+  // Scrape Details Modal
+  const [showStatsModal, setShowStatsModal] = useState(false)
+  const [selectedStats, setSelectedStats] = useState<any>(null)
+
+  const logsEndRef = useRef<HTMLDivElement>(null)
+  const logsContainerRef = useRef<HTMLDivElement>(null)
+  const prevLogsLengthRef = useRef(0)
+  const [currentTime, setCurrentTime] = useState('')
+
+  // Check auth on load
+  useEffect(() => {
+    const sessionAuth = sessionStorage.getItem('sikomo_auth')
+    if (sessionAuth === 'authenticated') {
+      setIsAuthenticated(true)
+    }
+  }, [])
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Trim to be safe against accidental spaces
+    if (passwordInput.trim() === 'Bandulan112') {
+      setIsAuthenticated(true)
+      setAuthError(false)
+      sessionStorage.setItem('sikomo_auth', 'authenticated')
+    } else {
+      setAuthError(true)
+    }
+  }
+
+  const handleLogout = () => {
+    setIsAuthenticated(false)
+    setPasswordInput('')
+    sessionStorage.removeItem('sikomo_auth')
+  }
+
+  // Fetching Data API
+  const fetchData = async () => {
+    if (!isAuthenticated) return
+    try {
+      const [resStatus, resSchedules, resLogs] = await Promise.all([
+        axios.get(`${API_URL}/status`),
+        axios.get(`${API_URL}/schedules`),
+        axios.get(`${API_URL}/logs?limit=200${logLevelFilter !== 'ALL' ? `&level=${logLevelFilter}` : ''}`)
+      ])
+      setStatus(resStatus.data)
+      setSchedules(resSchedules.data)
+      setLogs(resLogs.data)
+    } catch (err) {
+      console.error('Error fetching dashboard API:', err)
+    }
+  }
+
+  // Polling data every 3 seconds
+  useEffect(() => {
+    fetchData()
+    const interval = setInterval(fetchData, 3000)
+    return () => clearInterval(interval)
+  }, [isAuthenticated, logLevelFilter])
+
+  // Realtime Clock Ticker synchronized to WIB (Asia/Jakarta)
+  useEffect(() => {
+    const updateClock = () => {
+      try {
+        const timeStr = new Date().toLocaleTimeString('id-ID', {
+          timeZone: 'Asia/Jakarta',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        })
+        setCurrentTime(timeStr)
+      } catch (e) {
+        // fallback if browser doesn't support specific timezone string
+        setCurrentTime(new Date().toLocaleTimeString('id-ID'))
+      }
+    }
+    updateClock()
+    const timer = setInterval(updateClock, 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  // Inner container targeted scroll to bottom only on new log append
+  useEffect(() => {
+    if (logs.length > prevLogsLengthRef.current) {
+      if (logsContainerRef.current) {
+        logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight
+      } else {
+        // fallback to smooth inner ref if container ref not bound yet
+        logsEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      }
+    }
+    prevLogsLengthRef.current = logs.length
+  }, [logs])
+
+  // --- API Actions ---
+  const handleManualScrape = async () => {
+    setLoadingScrape(true)
+    try {
+      const res = await axios.post(`${API_URL}/scrape/manual`)
+      setSelectedStats(res.data.stats)
+      setShowStatsModal(true)
+      fetchData()
+    } catch (err: any) {
+      alert(`❌ Proses Scraping Gagal: ${err.response?.data?.detail || err.message}`)
+    } finally {
+      setLoadingScrape(false)
+    }
+  }
+
+  const handleAddSchedule = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      // Format as cron: "minute hour * * *"
+      const cronExpression = `${selectedMinute} ${selectedHour} * * *`
+      await axios.post(`${API_URL}/schedules/add`, {
+        cron_expression: cronExpression,
+        label: newLabel.trim() || `Jadwal ${selectedHour}:${selectedMinute}`
+      })
+      setNewLabel('')
+      fetchData()
+    } catch (err: any) {
+      alert(`❌ Gagal menambah jadwal: ${err.response?.data?.detail || err.message}`)
+    }
+  }
+
+  const handleStopScrape = async () => {
+    try {
+      await axios.post(`${API_URL}/scrape/stop`)
+      // Loading will end when the main POST /scrape/manual request catches the signal and returns
+    } catch (err: any) {
+      console.error('Gagal stop scrape:', err)
+    }
+  }
+
+  const handleRemoveSchedule = async (jobId: string) => {
+    try {
+      await axios.delete(`${API_URL}/schedules/${jobId}/remove`)
+      fetchData()
+    } catch (err: any) {
+      alert(`❌ Gagal menghapus jadwal: ${err.response?.data?.detail || err.message}`)
+    }
+  }
+
+  const handleToggleScheduler = async () => {
+    try {
+      const endpoint = status?.is_running ? '/schedule/stop' : '/schedule/start'
+      await axios.post(`${API_URL}${endpoint}`)
+      fetchData()
+    } catch (err: any) {
+      alert(`❌ Error toggle scheduler: ${err.response?.data?.detail || err.message}`)
+    }
+  }
+
+  const addPresetCron = (hour: string, minute: string, label: string) => {
+    setSelectedHour(hour)
+    setSelectedMinute(minute)
+    setNewLabel(label)
+  }
+
+  // --- RENDER LOGIN GATE ---
+  if (!isAuthenticated) {
+    return (
+      <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">
+          <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">
+              <Lock 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 Scraper Portal
+            </h1>
+            <p className="text-slate-400 text-sm mt-2">
+              Masukkan kata sandi untuk mengakses panel kontrol scraping harga otomatis.
+            </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={passwordInput}
+                onChange={(e) => setPasswordInput(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 ${
+                  authError ? 'border-rose-500/50 focus:border-rose-500 focus:box-shadow-[0_0_15px_rgba(244,63,94,0.2)]' : ''
+                }`}
+                autoFocus
+              />
+              {authError && (
+                <p className="text-xs text-rose-400 mt-2 flex items-center gap-1">
+                  <AlertTriangle className="w-3.5 h-3.5" /> Kata sandi tidak cocok.
+                </p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              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"
+            >
+              Masuk ke Portal
+            </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>
+    )
+  }
+
+  // --- RENDER DASHBOARD ---
+  return (
+    <div className="min-h-screen relative overflow-hidden pb-16">
+      {/* 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 Daily Scraper
+              </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">
+            {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={handleLogout}
+              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>
+      </header>
+
+      {/* Main Container */}
+      <main className="max-w-7xl mx-auto px-6 mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
+        
+        {/* LEFT & CENTER COLUMNS: Status & Controls */}
+        <div className="lg:col-span-2 space-y-6">
+          
+          {/* SECTION 1: Status & Quick Actions Bento */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            
+            {/* Status Overview Card */}
+            <div className="glass-panel rounded-2xl p-6 border border-white/5 relative overflow-hidden flex flex-col justify-between">
+              <div>
+                <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">
+                    <Activity 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>
+
+                <div className="space-y-3 mt-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 mt-0.5">
+                      {status?.active_schedules_count || 0} <span className="text-xs font-normal text-slate-400">tugas rutin</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">Eksekusi Rutin 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 jadwal terdaftar'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <button
+                onClick={handleToggleScheduler}
+                className={`w-full mt-4 py-2.5 px-4 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" /> : <Play className="w-3.5 h-3.5" />}
+                {status?.is_running ? 'Matikan Scheduler Otomatis' : 'Nyalakan Scheduler Otomatis'}
+              </button>
+            </div>
+
+            {/* Manual Scrape Card */}
+            <div className="glass-panel rounded-2xl p-6 border border-white/5 flex flex-col justify-between relative overflow-hidden">
+              <div className="absolute top-0 right-0 p-8 opacity-5 text-teal-500 pointer-events-none">
+                <Layers className="w-32 h-32" />
+              </div>
+
+              <div>
+                <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2 mb-2">
+                  <RefreshCw className="w-4 h-4 text-indigo-400" /> Aksi Cepat Manual
+                </h2>
+                <p className="text-xs text-slate-400 leading-relaxed mb-6">
+                  Picu mesin scraper sekarang juga untuk mengambil harga terbaru dari server website sumber tanpa menunggu jadwal.
+                </p>
+
+                {/* Last Run Snippet */}
+                {status?.last_result?.stats && (
+                  <div className="bg-slate-900/60 rounded-xl p-3 border border-white/5 mb-4 text-xs">
+                    <div className="flex items-center justify-between text-slate-400 mb-1.5 pb-1.5 border-b border-white/5 font-medium">
+                      <span>Statistik Scrape Terakhir</span>
+                      <button 
+                        onClick={() => { setSelectedStats(status.last_result.stats); setShowStatsModal(true); }}
+                        className="text-teal-400 hover:underline flex items-center gap-1"
+                      >
+                        Detail Breakdown <Info className="w-3 h-3" />
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-4 gap-1 text-center pt-0.5">
+                      <div><span className="block text-[10px] text-slate-500">Insert</span><span className="font-bold text-teal-400">{status.last_result.stats.total_insert}</span></div>
+                      <div><span className="block text-[10px] text-slate-500">Update</span><span className="font-bold text-indigo-400">{status.last_result.stats.total_update}</span></div>
+                      <div><span className="block text-[10px] text-slate-500">Skip</span><span className="font-bold text-slate-400">{status.last_result.stats.total_skip}</span></div>
+                      <div><span className="block text-[10px] text-slate-500">Harga 0</span><span className="font-bold text-amber-400">{status.last_result.stats.total_harga_0}</span></div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <button
+                  onClick={handleManualScrape}
+                  disabled={loadingScrape}
+                  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 px-4 rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-teal-500/10 disabled:opacity-50 transition active:scale-[0.98]"
+                >
+                  {loadingScrape ? (
+                    <>
+                      <RefreshCw className="w-4 h-4 animate-spin" />
+                      Sedang Mengambil Data...
+                    </>
+                  ) : (
+                    <>
+                      <Play className="w-4 h-4 fill-current" />
+                      Eksekusi Manual Sekarang
+                    </>
+                  )}
+                </button>
+
+                {loadingScrape && (
+                  <button
+                    onClick={handleStopScrape}
+                    className="w-full bg-rose-500/20 hover:bg-rose-500/30 text-rose-400 font-medium py-2 px-4 rounded-xl flex items-center justify-center gap-2 border border-rose-500/30 transition animate-pulse"
+                  >
+                    <Square className="w-3.5 h-3.5 fill-current" />
+                    Hentikan Proses
+                  </button>
+                )}
+              </div>
+            </div>
+
+          </div>
+
+          {/* SECTION 2: Multiple Schedules Manager */}
+          <div className="glass-panel rounded-2xl p-6 border border-white/5">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+              <div>
+                <h2 className="text-base font-bold text-slate-100 flex items-center gap-2">
+                  <Calendar className="w-5 h-5 text-teal-400" />
+                  Manajemen Jadwal Rutin (Multiple Schedules)
+                </h2>
+                <p className="text-xs text-slate-400 mt-1">
+                  Atur waktu pengambilan harga otomatis. Anda dapat menambahkan lebih dari satu jadwal per hari.
+                </p>
+              </div>
+
+              {/* Quick Presets */}
+              <div className="flex flex-wrap gap-1.5 bg-slate-900/60 p-1.5 rounded-xl border border-white/5 self-start sm:self-auto">
+                <span className="text-[10px] font-semibold text-slate-500 px-2 self-center">Preset:</span>
+                <button
+                  onClick={() => addPresetCron('08', '00', 'Pagi Hari (08:00)')}
+                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[11px] rounded-lg transition"
+                >
+                  08:00
+                </button>
+                <button
+                  onClick={() => addPresetCron('12', '00', 'Siang Hari (12:00)')}
+                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[11px] rounded-lg transition"
+                >
+                  12:00
+                </button>
+                <button
+                  onClick={() => addPresetCron('17', '00', 'Sore Hari (17:00)')}
+                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[11px] rounded-lg transition"
+                >
+                  17:00
+                </button>
+              </div>
+            </div>
+
+            {/* Add Schedule Form */}
+            <form onSubmit={handleAddSchedule} className="grid grid-cols-1 md:grid-cols-12 gap-3 mb-6 bg-slate-900/40 p-4 rounded-xl border border-white/5">
+              <div className="md: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="md: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="md:col-span-4">
+                <label className="block text-[11px] font-medium text-slate-400 mb-1">Label Jadwal</label>
+                <input
+                  type="text"
+                  value={newLabel}
+                  onChange={(e) => setNewLabel(e.target.value)}
+                  placeholder="Contoh: Scraping 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="md: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 shadow transition"
+                >
+                  <Plus className="w-3.5 h-3.5 stroke-[3]" /> Tambah
+                </button>
+              </div>
+            </form>
+
+            {/* Schedules Table */}
+            <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">Label Jadwal</th>
+                    <th className="pb-3 px-3">Waktu (WIB)</th>
+                    <th className="pb-3 px-3">Estimasi Run Berikutnya</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-8 text-slate-500 italic">
+                        Belum ada jadwal yang didaftarkan. Gunakan form di atas untuk menambah 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 parts = item.cron_expression.split(' ');
+                              if (parts.length >= 2 && !isNaN(parseInt(parts[0])) && !isNaN(parseInt(parts[1]))) {
+                                return `${parts[1].padStart(2, '0')}:${parts[0].padStart(2, '0')}`;
+                              }
+                              return 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={() => handleRemoveSchedule(item.id)}
+                            className="p-1.5 text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-lg transition"
+                            title="Hapus Jadwal"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Hint */}
+            <div className="mt-4 pt-4 border-t border-white/5 flex items-start gap-2 text-[11px] text-slate-500">
+              <Info className="w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-slate-400" />
+              <span>
+                Format standar Cron: <code>(Menit) (Jam) (Hari) (Bulan) (Hari/Minggu)</code>. Waktu server saat ini mengikuti zona waktu sistem lokal.
+              </span>
+            </div>
+          </div>
+
+        </div>
+
+        {/* RIGHT COLUMN: Terminal Logs */}
+        <div className="glass-panel rounded-2xl p-6 border border-white/5 flex flex-col h-[500px] lg:h-[700px]">
+          
+          {/* Logs Header */}
+          <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 Eksekusi Real-time
+            </h2>
+
+            {/* Controls */}
+            <div className="flex items-center gap-1.5">
+              <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>
+
+          {/* Terminal Box */}
+          <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 flex flex-col space-y-2">
+            {logs.length === 0 ? (
+              <div className="m-auto text-slate-600 text-center italic">
+                [ Log buffer kosong / Menunggu aktivitas baru... ]
+              </div>
+            ) : (
+              logs.map((log, idx) => {
+                // Determine styling based on level
+                let levelColor = 'text-teal-400'
+                if (log.level === 'WARNING') levelColor = 'text-amber-400'
+                if (log.level === 'ERROR') levelColor = 'text-rose-400'
+
+                const timeStr = 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">[{timeStr}]</span>{' '}
+                    <span className={`font-semibold ${levelColor} 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 ref={logsEndRef} />
+          </div>
+
+          {/* Logs Footer status */}
+          <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>Total buffer: {logs.length} baris</span>
+          </div>
+        </div>
+
+      </main>
+
+      {/* --- STATS BREAKDOWN MODAL --- */}
+      {showStatsModal && selectedStats && (
+        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="glass-panel w-full max-w-2xl rounded-2xl p-6 border border-white/10 shadow-2xl relative animate-in fade-in zoom-in-95 duration-200">
+            
+            <button
+              onClick={() => setShowStatsModal(false)}
+              className="absolute top-4 right-4 p-2 text-slate-400 hover:text-white rounded-lg transition"
+            >
+              <X className="w-5 h-5" />
+            </button>
+
+            <h3 className="text-lg font-bold text-white mb-1 flex items-center gap-2">
+              <CheckCircle className="w-5 h-5 text-teal-400" /> Laporan Eksekusi Scraping
+            </h3>
+            <p className="text-xs text-slate-400 mb-6 pb-4 border-b border-white/5">
+              Breakdown lengkap hasil sinkronisasi harga komoditas dan pasar hari ini.
+            </p>
+
+            {/* Grid Summaries */}
+            <div className="grid grid-cols-4 gap-4 mb-6">
+              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
+                <span className="text-[11px] text-slate-500 block">Insert Baru</span>
+                <span className="text-xl font-bold text-teal-400">{selectedStats.total_insert}</span>
+              </div>
+              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
+                <span className="text-[11px] text-slate-500 block">Diperbarui</span>
+                <span className="text-xl font-bold text-indigo-400">{selectedStats.total_update}</span>
+              </div>
+              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
+                <span className="text-[11px] text-slate-500 block">Data Lewat / Skip</span>
+                <span className="text-xl font-bold text-slate-400">{selectedStats.total_skip}</span>
+              </div>
+              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
+                <span className="text-[11px] text-slate-500 block">Harga Rp 0</span>
+                <span className="text-xl font-bold text-amber-400">{selectedStats.total_harga_0}</span>
+              </div>
+            </div>
+
+            {/* Granular Lists */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+              
+              {/* Pasar Sukses */}
+              <div className="bg-slate-900/40 p-4 rounded-xl border border-white/5">
+                <span className="font-bold text-slate-300 block mb-2 text-[11px] uppercase tracking-wider text-teal-400 flex items-center gap-1.5">
+                  <Check className="w-3.5 h-3.5" /> Pasar Tersinkronisasi ({selectedStats.pasar_berhasil?.length || 0})
+                </span>
+                {selectedStats.pasar_berhasil?.length > 0 ? (
+                  <ul className="space-y-1 text-slate-300">
+                    {selectedStats.pasar_berhasil.map((psr: string, i: number) => (
+                      <li key={i} className="flex items-center gap-1.5">
+                        <span className="w-1 h-1 rounded-full bg-teal-400" /> {psr}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <span className="text-slate-500 italic">- Tidak ada -</span>
+                )}
+              </div>
+
+              {/* Pasar Harga 0 */}
+              <div className="bg-slate-900/40 p-4 rounded-xl border border-white/5">
+                <span className="font-bold text-slate-300 block mb-2 text-[11px] uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
+                  <AlertTriangle className="w-3.5 h-3.5" /> Pasar Harga Kosong/Nol ({selectedStats.pasar_harga_0?.length || 0})
+                </span>
+                {selectedStats.pasar_harga_0?.length > 0 ? (
+                  <ul className="space-y-1 text-slate-400">
+                    {selectedStats.pasar_harga_0.map((psr: string, i: number) => (
+                      <li key={i} className="flex items-center gap-1.5">
+                        <span className="w-1 h-1 rounded-full bg-amber-400" /> {psr}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <span className="text-slate-500 italic">- Tidak ada -</span>
+                )}
+              </div>
+
+            </div>
+
+            {/* Bottom info */}
+            <div className="mt-6 pt-4 border-t border-white/5 flex items-center justify-between text-slate-400 text-[11px]">
+              <span>Total Komoditas Diperbarui: <strong>{selectedStats.komoditas_berhasil_count || 0} item</strong></span>
+              <span>Komoditas Harga Nol: <strong>{selectedStats.komoditas_harga_0_count || 0} item</strong></span>
+            </div>
+
+            <div className="mt-6 text-right">
+              <button
+                onClick={() => setShowStatsModal(false)}
+                className="bg-slate-800 hover:bg-slate-700 text-slate-200 font-medium py-2 px-4 rounded-xl transition"
+              >
+                Tutup Jendela
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+    </div>
+  )
+}

frontend/next.config.js

@@ -0,0 +1,10 @@
+/** @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,26 @@
+{
+  "name": "sikomo-scraper-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "axios": "^1.6.5",
+    "lucide-react": "^0.312.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5",
+    "tailwindcss": "^3.4.0",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33"
+  }
+}

frontend/postcss.config.js

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

frontend/public/.gitkeep

@@ -0,0 +1 @@
+# Placeholder to ensure public directory exists

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "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"]
+}