feat: add pagination and improve data display for Market Monitor

frontend/components/MarketMonitor.tsx

@@ -9,16 +9,21 @@ export default function MarketMonitor() {
   const [ocs, setOcs] = useState<PurchaseOrder[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [filter, setFilter] = useState("todos");
+  const [page, setPage] = useState(1);
+  const itemsPerPage = 50;
 
   useEffect(() => {
     loadOcs();
+    setPage(1); // Reset page on filter change
   }, [filter]);
 
   async function loadOcs() {
     setIsLoading(true);
     try {
       const data = await fetchPurchaseOrders(undefined, filter);
-      setOcs(data);
+      // Sort by code descending (usually higher codes are newer)
+      const sorted = [...data].sort((a, b) => b.code.localeCompare(a.code));
+      setOcs(sorted);
     } catch (e) {
       console.error(e);
     } finally {
@@ -27,7 +32,7 @@ export default function MarketMonitor() {
   }
 
   const formatCurrency = (amount: number | null, currency: string | null) => {
-    if (amount === null) return "---";
+    if (!amount || amount === 0) return <span className="text-slate-600 italic">Pending...</span>;
     return new Intl.NumberFormat("es-CL", {
       style: "currency",
       currency: currency || "CLP",
@@ -35,16 +40,21 @@ export default function MarketMonitor() {
     }).format(amount);
   };
 
+  const paginatedOcs = ocs.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+  const totalPages = Math.ceil(ocs.length / itemsPerPage);
+
   return (
     <div className="space-y-8 animate-in fade-in duration-700">
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
         <div>
           <p className="text-[10px] uppercase tracking-[0.4em] text-cyan/60 font-black mb-2">Real-Time Intelligence</p>
           <h2 className="text-4xl font-black text-white tracking-tight">Market Monitor</h2>
-          <p className="text-slate-400 text-sm mt-2 max-w-xl">
-            Monitor real-time Purchase Orders (OCs) issued by public organizations. 
-            Identify high-velocity buying patterns and competitive wins.
-          </p>
+          <div className="flex items-center gap-3 mt-2">
+             <span className="flex h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+             <p className="text-slate-400 text-sm">
+                Monitoring <span className="text-white font-bold">{ocs.length.toLocaleString()}</span> active orders from today.
+             </p>
+          </div>
         </div>
 
         <div className="flex bg-slate-900/50 p-1 rounded-2xl border border-white/5 backdrop-blur-xl">
@@ -68,64 +78,76 @@ export default function MarketMonitor() {
             <BrandLoader />
           </div>
         ) : ocs.length > 0 ? (
-          <div className="glass-card rounded-[2rem] overflow-hidden border border-white/5">
-            <div className="overflow-x-auto custom-scrollbar">
-              <table className="w-full text-left text-xs border-collapse">
-                <thead>
-                  <tr className="bg-white/5 text-slate-500 uppercase font-black tracking-tighter border-b border-white/5">
-                    <th className="px-6 py-5">Issue Date</th>
-                    <th className="px-6 py-5">Order ID / Description</th>
-                    <th className="px-6 py-5">Buyer Organism</th>
-                    <th className="px-6 py-5">Vendor (Winner)</th>
-                    <th className="px-6 py-5 text-right">Total Amount</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-white/5">
-                  {ocs.map((oc) => (
-                    <tr key={oc.code} className="hover:bg-white/[0.03] transition-colors group">
-                      <td className="px-6 py-5 whitespace-nowrap">
-                        <div className="text-slate-300 font-mono">
-                          {oc.date_creation ? new Date(oc.date_creation).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '---'}
-                        </div>
-                        <div className="text-[10px] text-slate-600">
-                           {oc.date_creation ? new Date(oc.date_creation).toLocaleDateString() : 'Today'}
-                        </div>
-                      </td>
-                      <td className="px-6 py-5 max-w-md">
-                        <div className="flex items-center gap-2 mb-1">
-                          <span className="text-cyan font-bold font-mono text-[10px] bg-cyan/5 px-2 py-0.5 rounded border border-cyan/10">
-                            {oc.code}
-                          </span>
-                          {oc.type && (
-                            <span className="text-[8px] bg-white/5 text-slate-500 px-1.5 py-0.5 rounded uppercase font-black">
-                              {oc.type}
-                            </span>
-                          )}
-                        </div>
-                        <div className="text-white font-bold truncate group-hover:text-cyan transition-colors">
-                          {oc.name || "Orden de Compra"}
-                        </div>
-                      </td>
-                      <td className="px-6 py-5">
-                        <div className="text-slate-300 font-medium truncate max-w-[200px]">{oc.buyer}</div>
-                        <div className="text-[10px] text-slate-600">{oc.buyer_rut}</div>
-                      </td>
-                      <td className="px-6 py-5">
-                        <div className="text-sky-400 font-bold truncate max-w-[200px]">{oc.provider}</div>
-                        <div className="text-[10px] text-slate-600">{oc.provider_rut}</div>
-                      </td>
-                      <td className="px-6 py-5 text-right">
-                        <div className="text-white font-black text-sm">
-                          {formatCurrency(oc.total_amount, oc.currency)}
-                        </div>
-                        <div className="text-[10px] text-slate-500 uppercase font-bold">{oc.currency}</div>
-                      </td>
+          <>
+            <div className="glass-card rounded-[2rem] overflow-hidden border border-white/5 shadow-2xl shadow-black/50">
+              <div className="overflow-x-auto custom-scrollbar max-h-[600px]">
+                <table className="w-full text-left text-xs border-collapse sticky-header">
+                  <thead className="sticky top-0 z-10">
+                    <tr className="bg-slate-900/95 backdrop-blur-md text-slate-500 uppercase font-black tracking-tighter border-b border-white/5">
+                      <th className="px-6 py-5">Order ID / Description</th>
+                      <th className="px-6 py-5">Buyer</th>
+                      <th className="px-6 py-5">Vendor</th>
+                      <th className="px-6 py-5 text-right">Total Amount</th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
+                  </thead>
+                  <tbody className="divide-y divide-white/5">
+                    {paginatedOcs.map((oc) => (
+                      <tr key={oc.code} className="hover:bg-white/[0.03] transition-colors group">
+                        <td className="px-6 py-5 max-w-md">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="text-cyan font-bold font-mono text-[10px] bg-cyan/5 px-2 py-0.5 rounded border border-cyan/10">
+                              {oc.code}
+                            </span>
+                          </div>
+                          <div className="text-white font-bold line-clamp-1 group-hover:line-clamp-none transition-all cursor-help" title={oc.name}>
+                            {oc.name || "Orden de Compra"}
+                          </div>
+                        </td>
+                        <td className="px-6 py-5">
+                          <div className="text-slate-300 font-medium truncate max-w-[150px]">
+                            {oc.buyer !== "Unknown" ? oc.buyer : <span className="opacity-30">...</span>}
+                          </div>
+                        </td>
+                        <td className="px-6 py-5">
+                          <div className="text-sky-400 font-bold truncate max-w-[150px]">
+                            {oc.provider !== "Unknown" ? oc.provider : <span className="opacity-30">...</span>}
+                          </div>
+                        </td>
+                        <td className="px-6 py-5 text-right">
+                          <div className="text-white font-black text-sm">
+                            {formatCurrency(oc.total_amount, oc.currency)}
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
-          </div>
+
+            {/* Pagination Controls */}
+            <div className="flex items-center justify-between px-4">
+              <div className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">
+                Showing {((page - 1) * itemsPerPage) + 1} to {Math.min(page * itemsPerPage, ocs.length)} of {ocs.length}
+              </div>
+              <div className="flex gap-2">
+                <button 
+                  disabled={page === 1}
+                  onClick={() => setPage(p => p - 1)}
+                  className="px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-xs font-bold disabled:opacity-30 hover:bg-white/10"
+                >
+                  Previous
+                </button>
+                <button 
+                  disabled={page === totalPages}
+                  onClick={() => setPage(p => p + 1)}
+                  className="px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-xs font-bold disabled:opacity-30 hover:bg-white/10"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          </>
         ) : (
           <div className="py-40 text-center glass-card rounded-[2rem] border border-white/5">
             <div className="text-4xl mb-4">🛒</div>