feat: add search, filter, and pagination to AI Center landing page table

frontend/app/page.tsx

@@ -27,7 +27,10 @@ import {
   CheckCircle2,
   ChevronDown,
   ChevronUp,
-  Copy
+  Copy,
+  Search,
+  ChevronLeft,
+  ChevronRight
 } from 'lucide-react'
 
 // Auto-detect base path/URL if running exported on FastAPI or standalone Next.js
@@ -187,6 +190,11 @@ export default function Dashboard() {
   const [activeModelsSummary, setActiveModelsSummary] = useState<any>(null)
   const [loadingSummary, setLoadingSummary] = useState(false)
   const [selectedConfigCommodityId, setSelectedConfigCommodityId] = useState<number | null>(null)
+  const [aiSearchQuery, setAiSearchQuery] = useState('')
+  const [aiFilterStatus, setAiFilterStatus] = useState<'all' | 'trained' | 'untrained'>('all')
+  const [aiFilterModel, setAiFilterModel] = useState<string>('all')
+  const [aiCurrentPage, setAiCurrentPage] = useState(1)
+  const aiRowsPerPage = 10
 
   // --- Global States ---
   const [currentTime, setCurrentTime] = useState('')
@@ -1450,146 +1458,311 @@ export default function Dashboard() {
 
             {/* Table Card */}
             <div className="bg-white rounded-3xl shadow-sm border border-slate-200/60 overflow-hidden">
-              <div className="px-6 py-5 border-b border-slate-100 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-50/50">
-                <h3 className="font-black text-slate-800 text-base tracking-tight">Daftar Model Machine Learning</h3>
-                <div className="flex gap-2">
-                  <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-[10px] font-bold text-slate-600 shadow-sm">
-                    <span className="w-2 h-2 rounded-full bg-emerald-500"></span> Active Models Only
+              {/* Search, Filter & Header Bar */}
+              <div className="px-6 py-5 border-b border-slate-100 bg-slate-50/50">
+                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
+                  <h3 className="font-black text-slate-800 text-base tracking-tight">Daftar Model Machine Learning</h3>
+                  <span className="text-[10px] font-bold text-slate-500 bg-white px-3 py-1.5 rounded-lg border border-slate-200 shadow-sm">
+                    {activeModelsSummary?.commodity_models?.length || 0} komoditas terdaftar
                   </span>
                 </div>
+                
+                {/* Search & Filter Row */}
+                <div className="flex flex-col sm:flex-row gap-3">
+                  {/* Search Input */}
+                  <div className="relative flex-1">
+                    <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
+                    <input
+                      type="text"
+                      value={aiSearchQuery}
+                      onChange={(e) => { setAiSearchQuery(e.target.value); setAiCurrentPage(1); }}
+                      placeholder="Cari komoditas atau nama model..."
+                      className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white text-xs text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+                    />
+                    {aiSearchQuery && (
+                      <button onClick={() => { setAiSearchQuery(''); setAiCurrentPage(1); }} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
+                        <X className="w-3.5 h-3.5" />
+                      </button>
+                    )}
+                  </div>
+                  
+                  {/* Filter: Status */}
+                  <div className="flex gap-2">
+                    <select
+                      value={aiFilterStatus}
+                      onChange={(e) => { setAiFilterStatus(e.target.value as any); setAiCurrentPage(1); }}
+                      className="px-3 py-2.5 rounded-xl border border-slate-200 bg-white text-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary cursor-pointer"
+                    >
+                      <option value="all">Semua Status</option>
+                      <option value="trained">Sudah Dilatih</option>
+                      <option value="untrained">Belum Dilatih</option>
+                    </select>
+                    
+                    {/* Filter: Model Type */}
+                    <select
+                      value={aiFilterModel}
+                      onChange={(e) => { setAiFilterModel(e.target.value); setAiCurrentPage(1); }}
+                      className="px-3 py-2.5 rounded-xl border border-slate-200 bg-white text-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary cursor-pointer"
+                    >
+                      <option value="all">Semua Model</option>
+                      <option value="lightgbm">LightGBM</option>
+                      <option value="xgboost">XGBoost</option>
+                      <option value="prophet">Prophet</option>
+                      <option value="sarima">SARIMA</option>
+                      <option value="arima">ARIMA</option>
+                    </select>
+                  </div>
+                </div>
               </div>
               
-              <div className="overflow-x-auto">
-                <table className="w-full text-left border-collapse">
-                  <thead>
-                    <tr className="border-b border-slate-200/60 bg-slate-50/30">
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">Komoditas & Model</th>
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">MAPE (%)</th>
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">RMSE</th>
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">MAE</th>
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">R² Score</th>
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider text-center">Status Validasi</th>
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider text-center">Status</th>
-                      <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider text-right">Aksi</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-slate-100">
-                    {loadingSummary && !activeModelsSummary ? (
-                      <tr>
-                        <td colSpan={8} className="text-center py-16">
-                          <RefreshCw className="w-8 h-8 animate-spin text-slate-400 mx-auto mb-2" />
-                          <p className="text-xs text-slate-500 font-medium">Memuat summary model...</p>
-                        </td>
-                      </tr>
-                    ) : !activeModelsSummary || activeModelsSummary.commodity_models?.length === 0 ? (
-                      <tr>
-                        <td colSpan={8} className="text-center py-16 text-slate-400 italic text-xs">
-                          Belum ada model machine learning yang dilatih.
-                        </td>
-                      </tr>
-                    ) : (
-                      activeModelsSummary.commodity_models.map((item: any) => {
-                        const isRunning = forecastRunningIds[item.komoditas_id] || forecastStatus?.running_tasks?.[item.komoditas_id];
-                        return (
-                          <tr key={item.komoditas_id} className="hover:bg-slate-50/50 transition-colors group">
-                            <td className="px-6 py-4">
-                              <div className="flex items-center gap-3">
-                                <div className="w-10 h-10 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0 border border-indigo-100">
-                                  <Activity className="w-5 h-5 text-indigo-500" />
-                                </div>
-                                <div>
-                                  <p className="text-xs font-black text-slate-900">{item.komoditas_nama}</p>
-                                  <p className="text-[10px] font-bold text-primary mt-0.5 tracking-wide">
-                                    {item.nama_model ? item.nama_model : 'Belum Latih Model'} 
-                                    {item.nama_model && <span className="text-slate-400 font-medium ml-1">v1.0</span>}
-                                  </p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-6 py-4 text-xs font-semibold text-slate-700">
-                              {item.mape !== null ? (
-                                <span className={`font-mono font-bold ${item.mape < 10 ? 'text-emerald-600' : (item.mape < 20 ? 'text-amber-600' : 'text-rose-600')}`}>
-                                  {Number(item.mape).toFixed(2)}%
-                                </span>
-                              ) : '-'}
-                            </td>
-                            <td className="px-6 py-4 text-xs font-mono text-slate-600">
-                              {item.rmse !== null ? Number(item.rmse).toLocaleString('id-ID', { maximumFractionDigits: 2 }) : '-'}
-                            </td>
-                            <td className="px-6 py-4 text-xs font-mono text-slate-600">
-                              {item.mae !== null ? Number(item.mae).toLocaleString('id-ID', { maximumFractionDigits: 2 }) : '-'}
-                            </td>
-                            <td className="px-6 py-4 text-xs font-mono text-slate-600">
-                              {item.r2_score !== null ? Number(item.r2_score).toFixed(4) : '-'}
-                            </td>
-                            <td className="px-6 py-4 text-center">
-                              {item.nama_model ? (
-                                <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-emerald-50 text-emerald-700 text-[10px] font-bold border border-emerald-100">
-                                  Terverifikasi
-                                </span>
-                              ) : (
-                                <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-slate-100 text-slate-500 text-[10px] font-bold border border-slate-200">
-                                  Belum Latih
-                                </span>
-                              )}
-                            </td>
-                            <td className="px-6 py-4 text-center">
-                              {item.is_active ? (
-                                <span className="relative flex items-center justify-center h-2.5 w-2.5 mx-auto" title="Model Aktif">
-                                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
-                                </span>
-                              ) : (
-                                <span className="inline-block w-2.5 h-2.5 rounded-full bg-slate-300 mx-auto" title="Tidak Aktif"></span>
-                              )}
-                            </td>
-                            <td className="px-6 py-4 text-right">
-                              <div className="flex items-center justify-end gap-1.5">
-                                <button 
-                                  onClick={() => handleOpenDetailModal(item.komoditas_id)}
-                                  disabled={!item.nama_model || loadingDetailId === item.komoditas_id}
-                                  className="w-8 h-8 rounded-lg bg-slate-50 text-slate-500 hover:text-primary hover:bg-blue-50 flex items-center justify-center transition-all border border-slate-200 hover:border-blue-200 disabled:opacity-30 disabled:pointer-events-none" 
-                                  title="Detail Performa"
-                                >
-                                  <Info className="w-3.5 h-3.5" />
-                                </button>
-                                <button 
-                                  onClick={() => {
-                                    setSelectedConfigCommodityId(item.komoditas_id);
-                                    setActiveTab('settings');
-                                  }}
-                                  className="w-8 h-8 rounded-lg bg-slate-50 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 flex items-center justify-center transition-all border border-slate-200 hover:border-indigo-200" 
-                                  title="Konfigurasi ML"
-                                >
-                                  <Sliders className="w-3.5 h-3.5" />
-                                </button>
-                                {isRunning ? (
-                                  <button 
-                                    onClick={handleStopForecast}
-                                    className="w-8 h-8 rounded-lg bg-rose-50 text-rose-600 flex items-center justify-center border border-rose-100 animate-pulse"
-                                    title="Stop Training"
-                                  >
-                                    <Square className="w-3.5 h-3.5 fill-current" />
-                                  </button>
-                                ) : (
-                                  <button 
-                                    onClick={() => handleRunForecast(item.komoditas_id)}
-                                    disabled={isForecastRunning}
-                                    className="w-8 h-8 rounded-lg bg-slate-50 text-slate-500 hover:text-emerald-600 hover:bg-emerald-50 flex items-center justify-center transition-all border border-slate-200 hover:border-emerald-200 disabled:opacity-30" 
-                                    title="Retrain Model"
+              {/* Table with filtered + paginated data */}
+              {(() => {
+                // Apply search + filters
+                const allItems = activeModelsSummary?.commodity_models || []
+                const filtered = allItems.filter((item: any) => {
+                  // Search filter
+                  const query = aiSearchQuery.toLowerCase().trim()
+                  if (query) {
+                    const nameMatch = (item.komoditas_nama || '').toLowerCase().includes(query)
+                    const modelMatch = (item.nama_model || '').toLowerCase().includes(query)
+                    if (!nameMatch && !modelMatch) return false
+                  }
+                  // Status filter
+                  if (aiFilterStatus === 'trained' && !item.nama_model) return false
+                  if (aiFilterStatus === 'untrained' && item.nama_model) return false
+                  // Model type filter
+                  if (aiFilterModel !== 'all') {
+                    if (!item.nama_model || !item.nama_model.toLowerCase().includes(aiFilterModel)) return false
+                  }
+                  return true
+                })
+                
+                const totalPages = Math.max(1, Math.ceil(filtered.length / aiRowsPerPage))
+                const safePage = Math.min(aiCurrentPage, totalPages)
+                const startIdx = (safePage - 1) * aiRowsPerPage
+                const paginatedItems = filtered.slice(startIdx, startIdx + aiRowsPerPage)
+                
+                return (
+                  <>
+                    <div className="overflow-x-auto">
+                      <table className="w-full text-left border-collapse">
+                        <thead>
+                          <tr className="border-b border-slate-200/60 bg-slate-50/30">
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">Komoditas & Model</th>
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">MAPE (%)</th>
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">RMSE</th>
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">MAE</th>
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider">R² Score</th>
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider text-center">Status Validasi</th>
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider text-center">Status</th>
+                            <th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-wider text-right">Aksi</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                          {loadingSummary && !activeModelsSummary ? (
+                            <tr>
+                              <td colSpan={8} className="text-center py-16">
+                                <RefreshCw className="w-8 h-8 animate-spin text-slate-400 mx-auto mb-2" />
+                                <p className="text-xs text-slate-500 font-medium">Memuat summary model...</p>
+                              </td>
+                            </tr>
+                          ) : paginatedItems.length === 0 ? (
+                            <tr>
+                              <td colSpan={8} className="text-center py-16">
+                                <Search className="w-8 h-8 text-slate-300 mx-auto mb-3" />
+                                <p className="text-xs text-slate-500 font-medium">
+                                  {aiSearchQuery || aiFilterStatus !== 'all' || aiFilterModel !== 'all'
+                                    ? 'Tidak ada komoditas yang cocok dengan filter.'
+                                    : 'Belum ada model machine learning yang dilatih.'}
+                                </p>
+                                {(aiSearchQuery || aiFilterStatus !== 'all' || aiFilterModel !== 'all') && (
+                                  <button
+                                    onClick={() => { setAiSearchQuery(''); setAiFilterStatus('all'); setAiFilterModel('all'); setAiCurrentPage(1); }}
+                                    className="mt-2 text-[11px] font-bold text-primary hover:underline"
                                   >
-                                    <Play className="w-3.5 h-3.5 fill-current" />
+                                    Reset semua filter
                                   </button>
                                 )}
-                              </div>
-                            </td>
-                          </tr>
-                        )
-                      })
+                              </td>
+                            </tr>
+                          ) : (
+                            paginatedItems.map((item: any) => {
+                              const isRunning = forecastRunningIds[item.komoditas_id] || forecastStatus?.running_tasks?.[item.komoditas_id];
+                              return (
+                                <tr key={item.komoditas_id} className="hover:bg-slate-50/50 transition-colors group">
+                                  <td className="px-6 py-4">
+                                    <div className="flex items-center gap-3">
+                                      <div className="w-10 h-10 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0 border border-indigo-100">
+                                        <Activity className="w-5 h-5 text-indigo-500" />
+                                      </div>
+                                      <div>
+                                        <p className="text-xs font-black text-slate-900">{item.komoditas_nama}</p>
+                                        <p className="text-[10px] font-bold text-primary mt-0.5 tracking-wide">
+                                          {item.nama_model ? item.nama_model : 'Belum Latih Model'} 
+                                          {item.nama_model && <span className="text-slate-400 font-medium ml-1">v1.0</span>}
+                                        </p>
+                                      </div>
+                                    </div>
+                                  </td>
+                                  <td className="px-6 py-4 text-xs font-semibold text-slate-700">
+                                    {item.mape !== null ? (
+                                      <span className={`font-mono font-bold ${item.mape < 10 ? 'text-emerald-600' : (item.mape < 20 ? 'text-amber-600' : 'text-rose-600')}`}>
+                                        {Number(item.mape).toFixed(2)}%
+                                      </span>
+                                    ) : '-'}
+                                  </td>
+                                  <td className="px-6 py-4 text-xs font-mono text-slate-600">
+                                    {item.rmse !== null ? Number(item.rmse).toLocaleString('id-ID', { maximumFractionDigits: 2 }) : '-'}
+                                  </td>
+                                  <td className="px-6 py-4 text-xs font-mono text-slate-600">
+                                    {item.mae !== null ? Number(item.mae).toLocaleString('id-ID', { maximumFractionDigits: 2 }) : '-'}
+                                  </td>
+                                  <td className="px-6 py-4 text-xs font-mono text-slate-600">
+                                    {item.r2_score !== null ? Number(item.r2_score).toFixed(4) : '-'}
+                                  </td>
+                                  <td className="px-6 py-4 text-center">
+                                    {item.nama_model ? (
+                                      <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-emerald-50 text-emerald-700 text-[10px] font-bold border border-emerald-100">
+                                        Terverifikasi
+                                      </span>
+                                    ) : (
+                                      <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-slate-100 text-slate-500 text-[10px] font-bold border border-slate-200">
+                                        Belum Latih
+                                      </span>
+                                    )}
+                                  </td>
+                                  <td className="px-6 py-4 text-center">
+                                    {item.is_active ? (
+                                      <span className="relative flex items-center justify-center h-2.5 w-2.5 mx-auto" title="Model Aktif">
+                                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                                        <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+                                      </span>
+                                    ) : (
+                                      <span className="inline-block w-2.5 h-2.5 rounded-full bg-slate-300 mx-auto" title="Tidak Aktif"></span>
+                                    )}
+                                  </td>
+                                  <td className="px-6 py-4 text-right">
+                                    <div className="flex items-center justify-end gap-1.5">
+                                      <button 
+                                        onClick={() => handleOpenDetailModal(item.komoditas_id)}
+                                        disabled={!item.nama_model || loadingDetailId === item.komoditas_id}
+                                        className="w-8 h-8 rounded-lg bg-slate-50 text-slate-500 hover:text-primary hover:bg-blue-50 flex items-center justify-center transition-all border border-slate-200 hover:border-blue-200 disabled:opacity-30 disabled:pointer-events-none" 
+                                        title="Detail Performa"
+                                      >
+                                        <Info className="w-3.5 h-3.5" />
+                                      </button>
+                                      <button 
+                                        onClick={() => {
+                                          setSelectedConfigCommodityId(item.komoditas_id);
+                                          setActiveTab('settings');
+                                        }}
+                                        className="w-8 h-8 rounded-lg bg-slate-50 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 flex items-center justify-center transition-all border border-slate-200 hover:border-indigo-200" 
+                                        title="Konfigurasi ML"
+                                      >
+                                        <Sliders className="w-3.5 h-3.5" />
+                                      </button>
+                                      {isRunning ? (
+                                        <button 
+                                          onClick={handleStopForecast}
+                                          className="w-8 h-8 rounded-lg bg-rose-50 text-rose-600 flex items-center justify-center border border-rose-100 animate-pulse"
+                                          title="Stop Training"
+                                        >
+                                          <Square className="w-3.5 h-3.5 fill-current" />
+                                        </button>
+                                      ) : (
+                                        <button 
+                                          onClick={() => handleRunForecast(item.komoditas_id)}
+                                          disabled={isForecastRunning}
+                                          className="w-8 h-8 rounded-lg bg-slate-50 text-slate-500 hover:text-emerald-600 hover:bg-emerald-50 flex items-center justify-center transition-all border border-slate-200 hover:border-emerald-200 disabled:opacity-30" 
+                                          title="Retrain Model"
+                                        >
+                                          <Play className="w-3.5 h-3.5 fill-current" />
+                                        </button>
+                                      )}
+                                    </div>
+                                  </td>
+                                </tr>
+                              )
+                            })
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                    
+                    {/* Pagination Footer */}
+                    {filtered.length > 0 && (
+                      <div className="px-6 py-4 border-t border-slate-100 bg-slate-50/30 flex flex-col sm:flex-row items-center justify-between gap-3">
+                        <div className="text-[11px] text-slate-500 font-medium">
+                          Menampilkan <span className="font-bold text-slate-700">{startIdx + 1}</span>–<span className="font-bold text-slate-700">{Math.min(startIdx + aiRowsPerPage, filtered.length)}</span> dari <span className="font-bold text-slate-700">{filtered.length}</span> komoditas
+                          {(aiSearchQuery || aiFilterStatus !== 'all' || aiFilterModel !== 'all') && (
+                            <span className="text-slate-400 ml-1">(difilter dari {allItems.length} total)</span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <button
+                            onClick={() => setAiCurrentPage(1)}
+                            disabled={safePage <= 1}
+                            className="px-2.5 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 text-[10px] font-bold hover:bg-slate-100 disabled:opacity-30 disabled:pointer-events-none transition-all"
+                          >
+                            Awal
+                          </button>
+                          <button
+                            onClick={() => setAiCurrentPage(p => Math.max(1, p - 1))}
+                            disabled={safePage <= 1}
+                            className="p-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 hover:bg-slate-100 disabled:opacity-30 disabled:pointer-events-none transition-all"
+                          >
+                            <ChevronLeft className="w-3.5 h-3.5" />
+                          </button>
+                          
+                          {/* Page number buttons */}
+                          {Array.from({ length: totalPages }, (_, i) => i + 1)
+                            .filter(p => p === 1 || p === totalPages || Math.abs(p - safePage) <= 1)
+                            .reduce((acc: (number | string)[], p, i, arr) => {
+                              if (i > 0 && typeof arr[i-1] === 'number' && (p as number) - (arr[i-1] as number) > 1) {
+                                acc.push('...')
+                              }
+                              acc.push(p)
+                              return acc
+                            }, [])
+                            .map((p, i) => (
+                              typeof p === 'string' ? (
+                                <span key={`dots-${i}`} className="px-1 text-slate-400 text-[10px]">...</span>
+                              ) : (
+                                <button
+                                  key={p}
+                                  onClick={() => setAiCurrentPage(p)}
+                                  className={`min-w-[28px] h-7 rounded-lg text-[10px] font-bold transition-all ${
+                                    p === safePage
+                                      ? 'bg-primary text-white shadow-sm shadow-primary/20 border border-primary'
+                                      : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-100'
+                                  }`}
+                                >
+                                  {p}
+                                </button>
+                              )
+                            ))
+                          }
+                          
+                          <button
+                            onClick={() => setAiCurrentPage(p => Math.min(totalPages, p + 1))}
+                            disabled={safePage >= totalPages}
+                            className="p-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 hover:bg-slate-100 disabled:opacity-30 disabled:pointer-events-none transition-all"
+                          >
+                            <ChevronRight className="w-3.5 h-3.5" />
+                          </button>
+                          <button
+                            onClick={() => setAiCurrentPage(totalPages)}
+                            disabled={safePage >= totalPages}
+                            className="px-2.5 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 text-[10px] font-bold hover:bg-slate-100 disabled:opacity-30 disabled:pointer-events-none transition-all"
+                          >
+                            Akhir
+                          </button>
+                        </div>
+                      </div>
                     )}
-                  </tbody>
-                </table>
-              </div>
+                  </>
+                )
+              })()}
             </div>
           </div>
         )}