From 6f06ee18da6f201ca1a67f9d3e47a40438deb4b6 Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Thu, 4 Jun 2026 12:09:03 -0300
Subject: [PATCH] feat(belo): add current quote card and improve date formats
 on analysis page

---
 .../src/features/belo/BeloAnalysisPage.tsx    | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/features/belo/BeloAnalysisPage.tsx b/apps/frontend/src/features/belo/BeloAnalysisPage.tsx
index 01fd895..0522ed8 100644
--- a/apps/frontend/src/features/belo/BeloAnalysisPage.tsx
+++ b/apps/frontend/src/features/belo/BeloAnalysisPage.tsx
@@ -27,9 +27,16 @@ function formatDate(d: Date): string {
   return `${y}-${m}-${day}`;
 }
 
+const dateFormatter = new Intl.DateTimeFormat("es-AR", {
+  day: "numeric",
+  month: "long",
+  year: "numeric",
+});
+
 function formatShortDate(iso: string): string {
-  const [, m, d] = iso.split("-");
-  return `${d}/${m}`;
+  const datePart = iso.split(" ")[0];
+  const [y, m, d] = datePart.split("-").map(Number);
+  return dateFormatter.format(new Date(y, m - 1, d));
 }
 
 export function BeloAnalysisPage() {
@@ -155,7 +162,15 @@ export function BeloAnalysisPage() {
         </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-4">
+      <div className="grid gap-4 md:grid-cols-5">
+        <div className="rounded-lg border p-4">
+          <p className="text-sm text-muted-foreground mb-2">
+            Cotización actual (compra)
+          </p>
+          <p className="text-2xl font-bold">
+            ${priceFormatter.format(currentBuy)}
+          </p>
+        </div>
         <div className="rounded-lg border p-4">
           <p className="text-sm text-muted-foreground mb-2">
             Mínimo histórico (compra)
@@ -169,7 +184,7 @@ export function BeloAnalysisPage() {
               </p>
               {historical?.minBuyDate && (
                 <p className="text-xs text-muted-foreground mt-0.5">
-                  {formatShortDate(historical.minBuyDate)}
+                  el {formatShortDate(historical.minBuyDate)}
                 </p>
               )}
             </>
@@ -188,7 +203,7 @@ export function BeloAnalysisPage() {
               </p>
               {historical?.maxBuyDate && (
                 <p className="text-xs text-muted-foreground mt-0.5">
-                  {formatShortDate(historical.maxBuyDate)}
+                  el {formatShortDate(historical.maxBuyDate)}
                 </p>
               )}
             </>