Optimize real-time sync, add success modal, per-item stop, and simplify pages

frontend/app/dashboard/forecast/page.tsx

@@ -1,8 +1,8 @@
-// app/dashboard/forecast/page.tsx — Forecast Management: Scheduler + Logs + Run
+// app/dashboard/forecast/page.tsx — Forecast Management: Optimized for Real-time + Modals
 'use client'
 import { useEffect, useState, useRef } from 'react'
 import { api } from '@/lib/api'
-import { Play, Square, RefreshCw, Calendar, Terminal, Plus, Trash2, Info } from 'lucide-react'
+import { Play, Square, RefreshCw, Calendar, Terminal, Plus, Trash2, CheckCircle2, XCircle } from 'lucide-react'
 
 interface LogItem { timestamp: string; level: string; source: string; message: string }
 
@@ -14,6 +14,8 @@ export default function ForecastPage() {
   const [runningIds, setRunningIds] = useState<Record<number, boolean>>({})
   const [runAllLoading, setRunAllLoading] = useState(false)
   const [logLevelFilter, setLogLevelFilter] = useState('ALL')
+  const [showSuccessModal, setShowSuccessModal] = useState(false)
+  const [isFinishing, setIsFinishing] = useState(false)
 
   // Schedule form
   const [selectedHour, setSelectedHour] = useState('01')
@@ -22,6 +24,7 @@ export default function ForecastPage() {
 
   const logsContainerRef = useRef<HTMLDivElement>(null)
   const prevLogsLengthRef = useRef(0)
+  const wasRunningRef = useRef(false)
 
   const fetchData = async () => {
     try {
@@ -30,18 +33,35 @@ export default function ForecastPage() {
         api.getLogs(200, logLevelFilter !== 'ALL' ? logLevelFilter : undefined)
       ])
       setKomoditas(k); setStatus(s); setSchedules(sc); setLogs(l)
-      // Sync running states from backend
+      
+      const isCurrentlyRunning = s?.any_forecast_running || Object.keys(s?.running_tasks || {}).length > 0
+      
+      // Detect completion to show modal
+      if (wasRunningRef.current && !isCurrentlyRunning && !runAllLoading) {
+        setShowSuccessModal(true)
+      }
+      wasRunningRef.current = isCurrentlyRunning
+
+      // Sync running states from backend, but keep optimistic UI if it's still running
       if (s?.running_tasks) {
-        setRunningIds(prev => ({ ...prev, ...Object.fromEntries(Object.entries(s.running_tasks).map(([k, v]) => [Number(k), v])) }))
+        const backendRunning = Object.fromEntries(Object.entries(s.running_tasks).map(([k, v]) => [Number(k), v]))
+        setRunningIds(prev => {
+          const newState = { ...prev, ...backendRunning }
+          // Remove items that backend says are not running anymore
+          Object.keys(prev).forEach(id => {
+            if (!backendRunning[Number(id)]) delete newState[Number(id)]
+          })
+          return newState
+        })
       }
     } catch {}
   }
 
   useEffect(() => {
     fetchData()
-    const interval = setInterval(fetchData, 3000)
+    const interval = setInterval(fetchData, 1500) // Faster polling
     return () => clearInterval(interval)
-  }, [logLevelFilter])
+  }, [logLevelFilter, runAllLoading])
 
   // Auto-scroll logs
   useEffect(() => {
@@ -53,23 +73,33 @@ export default function ForecastPage() {
 
   // Actions
   async function runOne(id: number) {
+    // Optimistic UI
     setRunningIds(prev => ({ ...prev, [id]: true }))
     try {
       await api.runForecast(id)
     } catch (e: any) {
       alert(`❌ Gagal: ${e.message}`)
-      setRunningIds(prev => ({ ...prev, [id]: false }))
+      setRunningIds(prev => {
+        const next = { ...prev }; delete next[id]; return next
+      })
     }
   }
 
   async function runAll() {
     setRunAllLoading(true)
-    try { await api.runForecastAll() } catch (e: any) { alert(`❌ ${e.message}`) }
-    setRunAllLoading(false)
+    try { 
+      await api.runForecastAll() 
+    } catch (e: any) { 
+      alert(`❌ ${e.message}`)
+      setRunAllLoading(false)
+    }
   }
 
   async function stopForecast() {
-    try { await api.stopForecast() } catch {}
+    try { 
+      await api.stopForecast()
+      setRunAllLoading(false)
+    } catch {}
   }
 
   async function handleAddSchedule(e: React.FormEvent) {
@@ -94,10 +124,32 @@ export default function ForecastPage() {
     } catch (e: any) { alert(`❌ ${e.message}`) }
   }
 
-  const anyRunning = status?.any_forecast_running || runAllLoading
+  const anyRunning = status?.any_forecast_running || runAllLoading || Object.keys(runningIds).length > 0
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 relative">
+      
+      {/* SUCCESS MODAL */}
+      {showSuccessModal && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-fade-in">
+          <div className="glass-panel max-w-sm w-full rounded-3xl p-8 text-center border border-teal-500/30 shadow-[0_0_50px_rgba(45,212,191,0.2)] animate-slide-up">
+            <div className="w-20 h-20 bg-teal-500/20 rounded-full flex items-center justify-center mx-auto mb-6 border border-teal-500/30">
+              <CheckCircle2 className="w-10 h-10 text-teal-400" />
+            </div>
+            <h3 className="text-2xl font-bold text-white mb-2">Selesai!</h3>
+            <p className="text-slate-400 text-sm mb-8">
+              Proses prediksi harga komoditas telah berhasil diselesaikan seluruhnya.
+            </p>
+            <button 
+              onClick={() => setShowSuccessModal(false)}
+              className="w-full py-3 bg-gradient-to-r from-teal-500 to-indigo-500 hover:from-teal-400 hover:to-indigo-400 text-white font-bold rounded-xl transition shadow-lg shadow-teal-500/20"
+            >
+              Mantap
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* LEFT: Controls */}
       <div className="lg:col-span-2 space-y-6">
         {/* Scheduler Status & Toggle */}
@@ -139,7 +191,6 @@ export default function ForecastPage() {
           </h2>
           <p className="text-xs text-slate-400 mb-4">Atur waktu forecast otomatis. Bisa tambah lebih dari satu jadwal.</p>
 
-          {/* Quick presets */}
           <div className="flex flex-wrap gap-1.5 mb-4">
             <span className="text-[10px] font-semibold text-slate-500 px-2 self-center">Preset:</span>
             {[['01','00','Dini Hari'],['06','00','Pagi'],['12','00','Siang'],['18','00','Sore']].map(([h,m,l]) => (
@@ -148,7 +199,6 @@ export default function ForecastPage() {
             ))}
           </div>
 
-          {/* Add form */}
           <form onSubmit={handleAddSchedule} className="grid grid-cols-12 gap-3 mb-5 bg-slate-900/40 p-4 rounded-xl border border-white/5">
             <div className="col-span-3">
               <label className="block text-[11px] font-medium text-slate-400 mb-1">Jam (WIB)</label>
@@ -174,7 +224,6 @@ export default function ForecastPage() {
             </div>
           </form>
 
-          {/* Schedules table */}
           <table className="w-full text-left border-collapse">
             <thead><tr className="border-b border-slate-800 text-[11px] text-slate-500 font-semibold uppercase">
               <th className="pb-3 px-3">Label</th><th className="pb-3 px-3">Waktu</th><th className="pb-3 px-3">Next Run</th><th className="pb-3 px-3 text-right">Aksi</th>
@@ -210,29 +259,38 @@ export default function ForecastPage() {
             </h2>
             <div className="flex gap-2">
               <button onClick={runAll} disabled={anyRunning}
-                className="bg-gradient-to-r from-teal-500 to-indigo-500 hover:from-teal-400 hover:to-indigo-400 text-white font-semibold py-2 px-4 rounded-xl text-xs flex items-center gap-2 disabled:opacity-50 transition active:scale-[0.98]">
-                {anyRunning ? <><RefreshCw className="w-3.5 h-3.5 animate-spin" /> Processing...</> : <><Play className="w-3.5 h-3.5 fill-current" /> Run Semua</>}
+                className={`bg-gradient-to-r from-teal-500 to-indigo-500 hover:from-teal-400 hover:to-indigo-400 text-white font-semibold py-2 px-4 rounded-xl text-xs flex items-center gap-2 transition active:scale-[0.98] ${anyRunning ? 'opacity-50 cursor-not-allowed' : ''}`}>
+                {runAllLoading ? <><RefreshCw className="w-3.5 h-3.5 animate-spin" /> Processing...</> : <><Play className="w-3.5 h-3.5 fill-current" /> Run Semua</>}
               </button>
               {anyRunning && (
                 <button onClick={stopForecast}
                   className="bg-rose-500/20 hover:bg-rose-500/30 text-rose-400 font-medium py-2 px-4 rounded-xl text-xs flex items-center gap-2 border border-rose-500/30 transition animate-pulse">
-                  <Square className="w-3.5 h-3.5 fill-current" /> Stop
+                  <Square className="w-3.5 h-3.5 fill-current" /> Stop Semua
                 </button>
               )}
             </div>
           </div>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             {komoditas.map((k: any) => {
               const isRunning = runningIds[k.id] || status?.running_tasks?.[k.id]
               return (
                 <div key={k.id} className="flex items-center justify-between bg-slate-900/50 rounded-xl px-4 py-3 border border-white/5 hover:border-white/10 transition">
                   <span className="text-sm font-medium text-slate-200">{k.nama}</span>
-                  <button onClick={() => runOne(k.id)} disabled={isRunning || anyRunning}
-                    className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition ${
-                      isRunning ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' : 'bg-indigo-500/10 hover:bg-indigo-500/20 text-indigo-400 border border-indigo-500/20 disabled:opacity-30'
-                    }`}>
-                    {isRunning ? <><RefreshCw className="w-3 h-3 animate-spin" /> Running</> : <><Play className="w-3 h-3" /> Run</>}
-                  </button>
+                  <div className="flex gap-1.5">
+                    {isRunning ? (
+                      <button onClick={stopForecast}
+                        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 transition">
+                        <Square className="w-3 h-3 fill-current" /> Stop
+                      </button>
+                    ) : (
+                      <button onClick={() => runOne(k.id)} disabled={anyRunning}
+                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition ${
+                          isRunning ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' : 'bg-indigo-500/10 hover:bg-indigo-500/20 text-indigo-400 border border-indigo-500/20 disabled:opacity-30'
+                        }`}>
+                        {isRunning ? <><RefreshCw className="w-3 h-3 animate-spin" /> Running</> : <><Play className="w-3 h-3" /> Run</>}
+                      </button>
+                    )}
+                  </div>
                 </div>
               )
             })}
@@ -265,7 +323,7 @@ export default function ForecastPage() {
             if (log.level === 'ERROR') color = 'text-rose-400'
             const t = new Date(log.timestamp).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
             return (
-              <div key={idx} className="leading-relaxed break-words hover:bg-white/[0.02] px-1 rounded transition-colors">
+              <div key={idx} className="leading-relaxed break-words hover:bg-white/[0.02] px-1 rounded transition-colors animate-fade-in">
                 <span className="text-slate-600 select-none">[{t}]</span>{' '}
                 <span className={`font-semibold ${color} select-none`}>[{log.level}]</span>{' '}
                 <span className="text-slate-500 select-none">({log.source})</span>{' '}

frontend/app/dashboard/layout.tsx

@@ -44,7 +44,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       } catch {}
     }
     fetchStatus()
-    const interval = setInterval(fetchStatus, 5000)
+    const interval = setInterval(fetchStatus, 1500)
     return () => clearInterval(interval)
   }, [])
 
@@ -55,7 +55,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
   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' },
   ]

frontend/app/dashboard/prediksi/page.tsx

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