feat: add model evaluation comparison modal and evaluasi button to frontend

frontend/app/page.tsx

@@ -96,6 +96,11 @@ export default function Dashboard() {
   const [forecastNewLabel, setForecastNewLabel] = useState('')
   const [showForecastSuccessModal, setShowForecastSuccessModal] = useState(false)
 
+  // --- Model Detail Modal States ---
+  const [showModelDetailModal, setShowModelDetailModal] = useState(false)
+  const [selectedCommodityDetail, setSelectedCommodityDetail] = useState<any>(null)
+  const [loadingDetailId, setLoadingDetailId] = useState<number | null>(null)
+
   // --- Settings Portal States ---
   const [runtimeSettings, setRuntimeSettings] = useState<Record<string, any>>({})
   const [runtimeSaving, setRuntimeSaving] = useState<string | null>(null)
@@ -422,6 +427,19 @@ export default function Dashboard() {
     }
   }
 
+  const handleOpenDetailModal = async (id: number) => {
+    setLoadingDetailId(id)
+    try {
+      const res = await axios.get(`${API_URL}/forecast/prediksi/${id}`)
+      setSelectedCommodityDetail(res.data)
+      setShowModelDetailModal(true)
+    } catch (err: any) {
+      alert(`❌ Gagal mengambil detail model: ${err.response?.data?.detail || err.message}`)
+    } finally {
+      setLoadingDetailId(null)
+    }
+  }
+
   // ── SETTINGS PORTAL ACTIONS ────────────────────────────────────────────────
   const handleSaveSetting = async (key: string) => {
     setRuntimeSaving(key)
@@ -705,6 +723,183 @@ export default function Dashboard() {
         </div>
       )}
 
+      {/* MODEL EVALUATION COMPARISON MODAL */}
+      {showModelDetailModal && selectedCommodityDetail && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm overflow-y-auto animate-fade-in">
+          <div className="bg-white rounded-2xl max-w-3xl w-full p-6 shadow-2xl relative border border-slate-200 my-8 animate-scale-in">
+            <button
+              onClick={() => setShowModelDetailModal(false)}
+              className="absolute top-4 right-4 p-2 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-all duration-200"
+            >
+              <X className="w-5 h-5" />
+            </button>
+            
+            <div className="flex items-center gap-3 mb-1">
+              <div className="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 border border-indigo-100">
+                <Activity className="w-5 h-5" />
+              </div>
+              <div>
+                <h3 className="text-lg font-bold text-slate-900 leading-snug">
+                  Evaluasi Model & Proyeksi Harga
+                </h3>
+                <p className="text-xs text-slate-500">
+                  {selectedCommodityDetail.komoditas?.nama} — Detail performa model latih terbaru.
+                </p>
+              </div>
+            </div>
+
+            <hr className="my-5 border-slate-100" />
+
+            {/* Model Comparison Table */}
+            <div className="mb-6">
+              <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-3">
+                Perbandingan Performa Model Latih
+              </span>
+              
+              {(!selectedCommodityDetail.all_models || selectedCommodityDetail.all_models.length === 0) ? (
+                <div className="bg-slate-50 rounded-xl p-6 text-center text-slate-400 text-xs italic border border-slate-200/50">
+                  Belum ada model yang dilatih. Silakan jalankan forecast terlebih dahulu.
+                </div>
+              ) : (
+                <div className="overflow-x-auto border border-slate-200/80 rounded-xl">
+                  <table className="w-full text-left border-collapse">
+                    <thead>
+                      <tr className="bg-slate-50 border-b border-slate-200 text-[10px] text-slate-500 font-bold uppercase tracking-wider">
+                        <th className="py-3 px-4">Nama Model</th>
+                        <th className="py-3 px-3 text-right">MAPE (%)</th>
+                        <th className="py-3 px-3 text-right">RMSE</th>
+                        <th className="py-3 px-3 text-right">MAE</th>
+                        <th className="py-3 px-3 text-right">R² Score</th>
+                        <th className="py-3 px-4 text-center">Status</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-100 text-xs text-slate-700">
+                      {selectedCommodityDetail.all_models.map((m: any, i: number) => (
+                        <tr 
+                          key={i} 
+                          className={`transition ${m.is_active ? 'bg-emerald-50/40 hover:bg-emerald-50/60 font-semibold' : 'hover:bg-slate-50/30'}`}
+                        >
+                          <td className="py-3 px-4 font-bold text-slate-900 flex items-center gap-1.5">
+                            {m.nama_model}
+                            {m.is_active === 1 && (
+                              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                            )}
+                          </td>
+                          <td className="py-3 px-3 text-right font-mono font-bold text-indigo-600">
+                            {m.mape !== null ? `${Number(m.mape).toFixed(2)}%` : '-'}
+                          </td>
+                          <td className="py-3 px-3 text-right font-mono text-slate-600">
+                            {m.rmse !== null ? Number(m.rmse).toLocaleString('id-ID', { maximumFractionDigits: 2 }) : '-'}
+                          </td>
+                          <td className="py-3 px-3 text-right font-mono text-slate-600">
+                            {m.mae !== null ? Number(m.mae).toLocaleString('id-ID', { maximumFractionDigits: 2 }) : '-'}
+                          </td>
+                          <td className="py-3 px-3 text-right font-mono text-slate-500">
+                            {m.r2_score !== null ? Number(m.r2_score).toFixed(4) : '-'}
+                          </td>
+                          <td className="py-3 px-4 text-center">
+                            {m.is_active === 1 ? (
+                              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-100 text-emerald-800 border border-emerald-200">
+                                Terbaik & Terpilih
+                              </span>
+                            ) : (
+                              <span className="text-[10px] text-slate-400">Tersimpan</span>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
+              {/* Proyeksi Harga Card */}
+              <div className="bg-slate-50 rounded-2xl p-5 border border-slate-200/60">
+                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-3">
+                  Hasil Proyeksi Harga 7 Hari Ke Depan
+                </span>
+                
+                {(!selectedCommodityDetail.prediksi_7hari || selectedCommodityDetail.prediksi_7hari.length === 0) ? (
+                  <div className="text-slate-400 text-xs italic py-4">Belum ada proyeksi harga.</div>
+                ) : (
+                  <div className="space-y-2.5 max-h-[220px] overflow-y-auto pr-1">
+                    {selectedCommodityDetail.prediksi_7hari.map((p: any, idx: number) => (
+                      <div key={idx} className="flex justify-between items-center bg-white p-2.5 rounded-xl border border-slate-100 shadow-sm">
+                        <span className="text-xs font-semibold text-slate-600">
+                          {new Date(p.tanggal_target).toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric', month: 'short' })}
+                        </span>
+                        <span className="text-xs font-bold text-slate-900">
+                          Rp {Number(p.harga_prediksi).toLocaleString('id-ID', { maximumFractionDigits: 0 })}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Ringkasan Analisis Card */}
+              <div className="flex flex-col gap-4">
+                <div className="bg-slate-50 rounded-2xl p-5 border border-slate-200/60 flex-1">
+                  <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-2">
+                    Kesimpulan Analisis
+                  </span>
+                  
+                  {selectedCommodityDetail.ringkasan ? (
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-2">
+                        <span className="text-xs font-black text-slate-900">
+                          {selectedCommodityDetail.ringkasan.status_analisis}
+                        </span>
+                        <span className={`inline-flex items-center px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-wide
+                          ${selectedCommodityDetail.ringkasan.tren?.includes('naik') ? 'bg-rose-50 text-rose-700 border border-rose-100' : 
+                            selectedCommodityDetail.ringkasan.tren?.includes('turun') ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 
+                            'bg-slate-100 text-slate-600 border border-slate-200'}`}
+                        >
+                          {selectedCommodityDetail.ringkasan.tren?.replace('_', ' ')}
+                        </span>
+                      </div>
+                      <p className="text-xs text-slate-500 leading-relaxed">
+                        {selectedCommodityDetail.ringkasan.deskripsi_status}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="text-slate-400 text-xs italic py-4">Belum ada data kesimpulan.</div>
+                  )}
+                </div>
+
+                {/* Insights List */}
+                {selectedCommodityDetail.insights && selectedCommodityDetail.insights.length > 0 && (
+                  <div className="bg-slate-50 rounded-2xl p-5 border border-slate-200/60">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-3">
+                      Temuan & Insight Pasar
+                    </span>
+                    <ul className="space-y-2">
+                      {selectedCommodityDetail.insights.map((ins: any, idx: number) => (
+                        <li key={idx} className="flex gap-2 text-xs text-slate-600 leading-normal">
+                          <span className="w-1.5 h-1.5 rounded-full bg-indigo-500 mt-1.5 flex-shrink-0" />
+                          <span>{ins.konten}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="text-right pt-4 border-t border-slate-100">
+              <button
+                onClick={() => setShowModelDetailModal(false)}
+                className="bg-slate-900 hover:bg-slate-800 text-white font-bold py-2.5 px-6 rounded-xl transition-all duration-200 shadow-md text-xs"
+              >
+                Tutup Evaluasi
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* MAIN CONTAINER CONTENT */}
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
 
@@ -1177,7 +1372,19 @@ export default function Dashboard() {
                             <span className="text-xs font-bold text-slate-900 block">{k.nama}</span>
                             <span className="text-[10px] text-slate-400 block mt-0.5">Volatilitas: <strong className={k.volatile ? "text-amber-600" : "text-emerald-600"}>{k.volatile ? "Tinggi" : "Rendah"}</strong></span>
                           </div>
-                          <div className="flex gap-1.5">
+                          <div className="flex gap-1.5 items-center">
+                            <button 
+                              onClick={() => handleOpenDetailModal(k.id)} 
+                              disabled={loadingDetailId === k.id || isRunning}
+                              className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-[10px] font-bold bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 transition-all duration-150 active:scale-[0.98] disabled:opacity-50"
+                            >
+                              {loadingDetailId === k.id ? (
+                                <RefreshCw className="w-3 h-3 animate-spin" />
+                              ) : (
+                                <Info className="w-3 h-3 text-slate-400" />
+                              )}
+                              Evaluasi
+                            </button>
                             {isRunning ? (
                               <button 
                                 onClick={handleStopForecast}