brickwise 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brickwise",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "App local para analizar la rentabilidad de alquiler de inmuebles de Property Finder UAE con el histórico real de transacciones DLD.",
   "license": "MIT",
   "author": "eljommys",

package/src/app/favorites/page.tsx

@@ -38,15 +38,27 @@ function matchesBedFilter(r: { bedrooms: number | null }, bedFilter: number[]):
   return bedFilter.length === 0 || (r.bedrooms != null && bedFilter.includes(r.bedrooms));
 }
 
-function yieldColor(y: number | null): string {
-  if (y == null) return "#737373";
-  if (y >= 0.07) return "#059669";
-  if (y >= 0.055) return "#65a30d";
-  if (y >= 0.04) return "#d97706";
-  return "#dc2626";
+/**
+ * Relative color scale: red (lowest yield in the set) → turquoise (highest).
+ * Absolute thresholds made every Dubai listing green because yields are all high;
+ * scaling to the actual min/max makes the differences readable on the map.
+ */
+function yieldColor(y: number | null, min: number, max: number): string {
+  if (y == null) return "#8a8a8a";
+  const t = max > min ? Math.min(1, Math.max(0, (y - min) / (max - min))) : 0.5;
+  const hue = t * 174; // 0° red → 174° turquoise
+  return `hsl(${Math.round(hue)}, 66%, 44%)`;
 }
 
-function popupHtml(r: FavRow): string {
+/** Min/max of the located favorites' yields, for the relative color scale. */
+function yieldRange(rows: FavRow[] | null): { min: number; max: number } {
+  const ys = (rows ?? [])
+    .filter((r) => r.lat != null && r.lon != null && r.gross_yield != null)
+    .map((r) => r.gross_yield as number);
+  return ys.length ? { min: Math.min(...ys), max: Math.max(...ys) } : { min: 0, max: 1 };
+}
+
+function popupHtml(r: FavRow, min: number, max: number): string {
   const img = r.images?.[0]?.medium || r.images?.[0]?.small;
   const yieldTxt = r.gross_yield != null ? (r.gross_yield * 100).toFixed(1) + " %" : "sin datos";
   return `
@@ -55,7 +67,7 @@ function popupHtml(r: FavRow): string {
       <div style="font-weight:600;margin-top:6px;line-height:1.3">${r.title}</div>
       <div style="color:#666;font-size:12px;margin-top:2px">${r.tower_name ?? ""}</div>
       <div style="margin-top:4px;font-size:14px">
-        Rentabilidad: <span style="color:${yieldColor(r.gross_yield)};font-weight:700">${yieldTxt}</span>
+        Rentabilidad: <span style="color:${yieldColor(r.gross_yield, min, max)};font-weight:700">${yieldTxt}</span>
       </div>
       <div style="margin-top:6px;display:flex;gap:10px;font-size:12px">
         <a href="/listing/${r.id}">Ver análisis</a>
@@ -193,19 +205,20 @@ export default function FavoritesMapPage() {
     if (!L || !map || !mapReady || !rows) return;
     Object.values(markersRef.current).forEach((m) => m.remove());
     markersRef.current = {};
+    const { min, max } = yieldRange(rows);
     const bounds: [number, number][] = [];
     for (const r of rows) {
       if (r.lat == null || r.lon == null) continue;
       const y = r.gross_yield != null ? (r.gross_yield * 100).toFixed(1) + "%" : "—";
       const icon = L.divIcon({
         className: "",
-        html: `<div class="bw-pin" style="--pin-color:${yieldColor(r.gross_yield)}"><div class="bw-pin-label">${y}</div><div class="bw-pin-tail"></div></div>`,
+        html: `<div class="bw-pin" style="--pin-color:${yieldColor(r.gross_yield, min, max)}"><div class="bw-pin-label">${y}</div><div class="bw-pin-tail"></div></div>`,
         iconSize: [0, 0],
         iconAnchor: [0, 0],
       });
       const marker = L.marker([r.lat, r.lon], { icon })
         .addTo(map)
-        .bindPopup(popupHtml(r), { maxWidth: 260, offset: [0, -34] });
+        .bindPopup(popupHtml(r, min, max), { maxWidth: 260, offset: [0, -34] });
       marker.on("mouseover", () => {
         setHoveredId(r.id);
         document.getElementById(`fav-${r.id}`)?.scrollIntoView({ block: "nearest", behavior: "smooth" });
@@ -667,7 +680,26 @@ export default function FavoritesMapPage() {
       />
 
       {/* ------------------------------------------------ map */}
-      <div ref={containerRef} className="min-h-0 min-w-0 flex-1" />
+      <div className="relative min-h-0 min-w-0 flex-1">
+        <div ref={containerRef} className="absolute inset-0" />
+        {(() => {
+          const { min, max } = yieldRange(rows);
+          if (!(max > min)) return null;
+          return (
+            <div className="pointer-events-none absolute bottom-4 left-3 z-[500] rounded border border-black/10 bg-white/90 px-2 py-1.5 text-[10px] text-neutral-700 shadow-lg dark:border-white/10 dark:bg-neutral-900/90 dark:text-neutral-200">
+              <div className="btn-font mb-1 text-[9px] text-neutral-500">Rentabilidad</div>
+              <div className="flex items-center gap-1.5">
+                <span>{(min * 100).toFixed(1)}%</span>
+                <span
+                  className="h-2 w-24 rounded-sm"
+                  style={{ background: `linear-gradient(90deg, hsl(0,66%,44%), hsl(87,66%,44%), hsl(174,66%,44%))` }}
+                />
+                <span>{(max * 100).toFixed(1)}%</span>
+              </div>
+            </div>
+          );
+        })()}
+      </div>
     </div>
   );
 }

package/src/app/globals.css

@@ -26,11 +26,11 @@
 }
 
 @theme {
-  /* Neutral dark grays anchored to the #2c2c2c (44,44,44) background */
-  --color-neutral-950: #242424; /* deep insets / header */
-  --color-neutral-900: #2c2c2c; /* panels & cards == background */
-  --color-neutral-800: #383838; /* borders, dividers, hover (subtle) */
-  --color-neutral-700: #4a4a4a;
+  /* Neutral dark grays anchored to the #181818 background */
+  --color-neutral-950: #121212; /* deep insets / header */
+  --color-neutral-900: #181818; /* panels & cards == background */
+  --color-neutral-800: #2a2a2a; /* borders, dividers, hover (subtle) */
+  --color-neutral-700: #3a3a3a;
 
   /* Brick accent — remaps every blue-* usage in the app to color ladrillo */
   --color-blue-50: #faeee8;
@@ -58,7 +58,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #2c2c2c; /* gris muy oscuro (44,44,44) */
+    --background: #181818;
     --foreground: #ededed;
   }
 }