brickwise 0.1.7 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brickwise",
-  "version": "0.1.7",
+  "version": "0.1.15",
   "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/api/cafes/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+import { poisForPoints } from "@/lib/pois";
+import { listFavorites } from "@/lib/store";
+
+/** All cafés near any located favorite, in a single Overpass query. */
+export async function GET() {
+  try {
+    const points = listFavorites()
+      .filter((f) => f.lat != null && f.lon != null)
+      .map((f) => ({ lat: f.lat!, lon: f.lon! }));
+    const { pois, failed } = await poisForPoints(points, "cafe");
+    return NextResponse.json({ cafes: pois, favoritesQueried: points.length, failed });
+  } catch (e) {
+    return NextResponse.json({ error: (e as Error).message }, { status: 500 });
+  }
+}

package/src/app/api/gyms/route.ts

@@ -1,29 +1,15 @@
 import { NextResponse } from "next/server";
-import { gymsNear } from "@/lib/gyms";
+import { poisForPoints } from "@/lib/pois";
 import { listFavorites } from "@/lib/store";
 
-/** All gyms within 2 km of every located favorite, deduplicated. */
+/** All gyms near any located favorite, in a single Overpass query. */
 export async function GET() {
   try {
-    const favorites = listFavorites().filter((f) => f.lat != null && f.lon != null);
-    const seen = new Map<string, { name: string; lat: number; lon: number }>();
-    let failed = 0;
-    for (const f of favorites) {
-      const gyms = await gymsNear(f.lat!, f.lon!);
-      if (gyms == null) {
-        failed++;
-        continue;
-      }
-      for (const g of gyms) {
-        const key = `${g.lat.toFixed(5)},${g.lon.toFixed(5)}`;
-        if (!seen.has(key)) seen.set(key, { name: g.name, lat: g.lat, lon: g.lon });
-      }
-    }
-    return NextResponse.json({
-      gyms: [...seen.values()],
-      favoritesQueried: favorites.length,
-      failed,
-    });
+    const points = listFavorites()
+      .filter((f) => f.lat != null && f.lon != null)
+      .map((f) => ({ lat: f.lat!, lon: f.lon! }));
+    const { pois, failed } = await poisForPoints(points, "gym");
+    return NextResponse.json({ gyms: pois, favoritesQueried: points.length, failed });
   } catch (e) {
     return NextResponse.json({ error: (e as Error).message }, { status: 500 });
   }

package/src/app/favorites/page.tsx

@@ -6,6 +6,7 @@ import "leaflet/dist/leaflet.css";
 import type { LayerGroup, Map as LeafletMap, Marker } from "leaflet";
 import YieldBadge from "@/components/YieldBadge";
 import { fmtAED, fmtDist, fmtSqft } from "@/lib/format";
+import { yieldColor } from "@/lib/yieldColor";
 
 interface FavRow {
   id: string;
@@ -29,36 +30,25 @@ interface FavRow {
   gym_distance_m: number | null;
   gym_name: string | null;
   price_per_sqft: number | null;
+  description: string | null;
   notes: string;
 }
 
+const MORE_SVG = (
+  <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="11" cy="11" r="7" />
+    <path d="M11 8v6M8 11h6M20 20l-3.5-3.5" />
+  </svg>
+);
+
 const GYM_SVG = `<svg viewBox="0 0 24 24" width="14" height="14" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M2 10h2v4H2zM5 8h2v8H5zM17 8h2v8h-2zM20 10h2v4h-2zM8 11h8v2H8z"/></svg>`;
+const CAFE_SVG = `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h12v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8z"/><path d="M16 9h2a2 2 0 0 1 0 4h-2"/><path d="M6 3v2M10 3v2M14 3v2"/></svg>`;
 
 function matchesBedFilter(r: { bedrooms: number | null }, bedFilter: number[]): boolean {
   return bedFilter.length === 0 || (r.bedrooms != null && bedFilter.includes(r.bedrooms));
 }
 
-/**
- * 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%)`;
-}
-
-/** 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 {
+function popupHtml(r: FavRow): 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 `
@@ -67,7 +57,7 @@ function popupHtml(r: FavRow, min: number, max: number): 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, min, max)};font-weight:700">${yieldTxt}</span>
+        Rentabilidad: <span style="color:${yieldColor(r.gross_yield)};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>
@@ -87,6 +77,44 @@ const SAVED_URL = "https://www.propertyfinder.ae/en/user/saved-properties";
 // strips javascript: hrefs.
 const BOOKMARKLET = String.raw`javascript:(function(){var u=new Set();document.querySelectorAll('a[href]').forEach(function(a){var h=(a.href||'').split('?')[0];if(/\/plp\/.*-\d+\.html$/.test(h))u.add(h)});try{var n=document.getElementById('__NEXT_DATA__');if(n){(JSON.stringify(JSON.parse(n.textContent)).match(/https?:\/\/[^"']*\/plp\/[^"']*-\d+\.html/g)||[]).forEach(function(x){u.add(x.split('?')[0])})}}catch(e){}var l=[...u];if(!l.length){alert('No encontre pisos guardados aqui. Abre tu pagina de Guardados de Property Finder con la sesion iniciada.');return}var t=l.join('\n');if(navigator.clipboard){navigator.clipboard.writeText(t).then(function(){alert(l.length+' piso(s) copiados. Abre Brickwise y pulsa "Pegar de Property Finder".')},function(){prompt('Copia estos enlaces y pegalos en Brickwise:',t)})}else{prompt('Copia estos enlaces y pegalos en Brickwise:',t)}})();`;
 
+function LayerToggle({
+  label,
+  color,
+  loading,
+  visible,
+  count,
+  onToggle,
+}: {
+  label: string;
+  color: string;
+  loading: boolean;
+  visible: boolean;
+  count: number | null;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      disabled={loading}
+      className="btn-font flex w-full items-center gap-2 rounded px-2 py-1.5 text-[11px] hover:bg-neutral-100 disabled:opacity-60 dark:hover:bg-neutral-800"
+    >
+      <span
+        className="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border"
+        style={{ background: visible ? color : "transparent", borderColor: color, opacity: 0.85 }}
+      >
+        {visible && (
+          <svg viewBox="0 0 24 24" width="9" height="9" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M5 12l5 5L20 6" />
+          </svg>
+        )}
+      </span>
+      <span className="flex-1 text-left">{label}</span>
+      <span className="text-neutral-500">{loading ? "Buscando…" : count != null ? count : ""}</span>
+    </button>
+  );
+}
+
 export default function FavoritesMapPage() {
   const [rows, setRows] = useState<FavRow[] | null>(null);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
@@ -104,13 +132,19 @@ export default function FavoritesMapPage() {
   const [gymsVisible, setGymsVisible] = useState(false);
   const [gymsLoading, setGymsLoading] = useState(false);
   const [gymCount, setGymCount] = useState<number | null>(null);
+  const [cafesVisible, setCafesVisible] = useState(false);
+  const [cafesLoading, setCafesLoading] = useState(false);
+  const [cafeCount, setCafeCount] = useState<number | null>(null);
+  const [showLayers, setShowLayers] = useState(false);
   const [sortBy, setSortBy] = useState<"yield" | "price">("yield");
   const [bedFilter, setBedFilter] = useState<number[]>([]);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
 
   const mapRef = useRef<LeafletMap | null>(null);
   const leafletRef = useRef<typeof import("leaflet") | null>(null);
   const markersRef = useRef<Record<string, Marker>>({});
   const gymLayerRef = useRef<LayerGroup | null>(null);
+  const cafeLayerRef = useRef<LayerGroup | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const didFitRef = useRef(false);
   const processing = useRef(false);
@@ -193,6 +227,7 @@ export default function FavoritesMapPage() {
       mapRef.current = null;
       markersRef.current = {};
       gymLayerRef.current = null;
+      cafeLayerRef.current = null;
       didFitRef.current = false;
       setMapReady(false);
     };
@@ -205,20 +240,19 @@ 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, min, max)}"><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)}"><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, min, max), { maxWidth: 260, offset: [0, -34] });
+        .bindPopup(popupHtml(r), { maxWidth: 260, offset: [0, -34] });
       marker.on("mouseover", () => {
         setHoveredId(r.id);
         document.getElementById(`fav-${r.id}`)?.scrollIntoView({ block: "nearest", behavior: "smooth" });
@@ -326,52 +360,81 @@ export default function FavoritesMapPage() {
     }
   };
 
-  const toggleGyms = async () => {
+  // Build a Leaflet layer of POI markers (gyms / cafés) with a Google Maps popup.
+  const buildPoiLayer = (
+    L: typeof import("leaflet"),
+    items: { name: string; lat: number; lon: number }[],
+    cssClass: string,
+    svg: string
+  ) => {
+    const layer = L.layerGroup();
+    for (const p of items) {
+      const icon = L.divIcon({ className: "", html: `<div class="${cssClass}">${svg}</div>`, iconSize: [0, 0], iconAnchor: [0, 0] });
+      const safeName = p.name.replace(/[<>&"]/g, (c) => `&#${c.charCodeAt(0)};`);
+      // Business name in the query, exact spot in the /@lat,lon path (not the query text):
+      // a named POI opens its own Maps place card; the coordinates never clutter the search
+      // box and only bias the map to Dubai so the right branch/spot is what's shown.
+      const mapsUrl = `https://www.google.com/maps/search/${encodeURIComponent(p.name)}/@${p.lat},${p.lon},17z`;
+      L.marker([p.lat, p.lon], { icon })
+        .bindPopup(
+          `<b>${safeName}</b><br><a href="${mapsUrl}" target="_blank" rel="noopener noreferrer" style="font-size:12px">Ver en Google Maps ↗</a>`,
+          { offset: [0, -16] }
+        )
+        .addTo(layer);
+    }
+    return layer;
+  };
+
+  const togglePoi = async (opts: {
+    api: string;
+    dataKey: string;
+    cssClass: string;
+    svg: string;
+    layerRef: React.MutableRefObject<LayerGroup | null>;
+    visible: boolean;
+    setVisible: (v: boolean) => void;
+    setLoading: (v: boolean) => void;
+    setCount: (v: number | null) => void;
+  }) => {
     const map = mapRef.current;
     const L = leafletRef.current;
     if (!map || !L) return;
-    if (gymLayerRef.current) {
-      if (gymsVisible) map.removeLayer(gymLayerRef.current);
-      else gymLayerRef.current.addTo(map);
-      setGymsVisible(!gymsVisible);
+    if (opts.layerRef.current) {
+      if (opts.visible) map.removeLayer(opts.layerRef.current);
+      else opts.layerRef.current.addTo(map);
+      opts.setVisible(!opts.visible);
       return;
     }
-    setGymsLoading(true);
+    opts.setLoading(true);
     try {
-      const res = await fetch("/api/gyms");
+      const res = await fetch(opts.api);
       const j = await res.json();
       if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
-      const layer = L.layerGroup();
-      for (const g of j.gyms as { name: string; lat: number; lon: number }[]) {
-        const icon = L.divIcon({
-          className: "",
-          html: `<div class="bw-gym">${GYM_SVG}</div>`,
-          iconSize: [0, 0],
-          iconAnchor: [0, 0],
-        });
-        const safeName = g.name.replace(/[<>&"]/g, (c) => `&#${c.charCodeAt(0)};`);
-        // Link to the exact coordinates, not a text search: a name search gets biased
-        // to the viewer's own location (e.g. Andorra), while coordinates always drop
-        // the pin on this gym's spot in Dubai.
-        const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${g.lat}%2C${g.lon}`;
-        L.marker([g.lat, g.lon], { icon })
-          .bindPopup(
-            `<b>${safeName}</b><br><a href="${mapsUrl}" target="_blank" rel="noopener noreferrer" style="font-size:12px">Ver en Google Maps ↗</a>`,
-            { offset: [0, -16] }
-          )
-          .addTo(layer);
-      }
+      const items = j[opts.dataKey] as { name: string; lat: number; lon: number }[];
+      const layer = buildPoiLayer(L, items, opts.cssClass, opts.svg);
       layer.addTo(map);
-      gymLayerRef.current = layer;
-      setGymCount(j.gyms.length);
-      setGymsVisible(true);
+      opts.layerRef.current = layer;
+      opts.setCount(items.length);
+      opts.setVisible(true);
     } catch {
-      setGymCount(null);
+      opts.setCount(null);
     } finally {
-      setGymsLoading(false);
+      opts.setLoading(false);
     }
   };
 
+  const toggleGyms = () =>
+    togglePoi({
+      api: "/api/gyms", dataKey: "gyms", cssClass: "bw-gym", svg: GYM_SVG,
+      layerRef: gymLayerRef, visible: gymsVisible, setVisible: setGymsVisible, setLoading: setGymsLoading, setCount: setGymCount,
+    });
+
+  const toggleCafes = () =>
+    togglePoi({
+      api: "/api/cafes", dataKey: "cafes", cssClass: "bw-cafe", svg: CAFE_SVG,
+      layerRef: cafeLayerRef, visible: cafesVisible, setVisible: setCafesVisible, setLoading: setCafesLoading, setCount: setCafeCount,
+    });
+
   // --- Resizable divider ---------------------------------------------------
   const startDrag = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -435,11 +498,24 @@ export default function FavoritesMapPage() {
         <div className="min-w-0 flex-1">
           <div className="flex items-start justify-between gap-2">
             <button
-              onClick={() => focus(r)}
-              className="line-clamp-1 text-left font-sans text-sm font-semibold normal-case tracking-normal hover:underline"
-              title="Centrar en el mapa"
+              onClick={() => setExpandedId((id) => (id === r.id ? null : r.id))}
+              className="flex min-w-0 items-center gap-1 text-left font-sans text-sm font-semibold normal-case tracking-normal hover:underline"
+              title="Ver previsualización"
             >
-              {r.title}
+              <span className="truncate">{r.title}</span>
+              <svg
+                viewBox="0 0 24 24"
+                width="12"
+                height="12"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className={`shrink-0 text-neutral-400 transition-transform ${expandedId === r.id ? "rotate-180" : ""}`}
+              >
+                <path d="M6 9l6 6 6-6" />
+              </svg>
             </button>
             <button
               onClick={() => remove(r.id)}
@@ -486,6 +562,29 @@ export default function FavoritesMapPage() {
         </span>
       </div>
 
+      {/* Preview desplegable al pulsar el título */}
+      {expandedId === r.id && (
+        <div className="mt-2 rounded-md border border-neutral-200 p-2 dark:border-neutral-800">
+          {r.images.length > 0 && (
+            <div className="flex gap-1.5 overflow-x-auto pb-1">
+              {r.images.slice(0, 10).map((img, i) => (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img key={i} src={img.medium} alt="" className="h-24 w-36 shrink-0 rounded object-cover" loading="lazy" />
+              ))}
+            </div>
+          )}
+          {r.description && (
+            <p className="mt-1.5 line-clamp-4 whitespace-pre-line text-xs text-neutral-500">{r.description}</p>
+          )}
+          <Link
+            href={`/listing/${r.id}`}
+            className="btn-font mt-2 inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-blue-500"
+          >
+            {MORE_SVG} Ver más
+          </Link>
+        </div>
+      )}
+
       <textarea
         className="mt-2 h-9 w-full resize-none rounded-md border border-transparent bg-neutral-50 px-2 py-1 text-xs outline-none focus:border-neutral-300 dark:bg-neutral-950 dark:focus:border-neutral-700"
         defaultValue={r.notes}
@@ -521,32 +620,37 @@ export default function FavoritesMapPage() {
               value={input}
               onChange={(e) => setInput(e.target.value)}
             />
-            <div className="mt-2 flex items-center gap-2">
+            <div className="mt-2 flex flex-col gap-1.5">
               <button
                 type="submit"
                 disabled={!input.trim() || busy}
-                className="rounded-lg bg-blue-600 px-4 py-1.5 text-xs font-bold text-white hover:bg-blue-500 disabled:opacity-50"
+                className="w-full rounded-lg bg-blue-600 py-2 text-xs font-bold text-white hover:bg-blue-500 disabled:opacity-50"
               >
                 {busy ? `Analizando ${queue.length}…` : "Añadir y analizar"}
               </button>
-              <button
-                type="button"
-                onClick={toggleGyms}
-                disabled={gymsLoading || (rows?.length ?? 0) === 0}
-                className="rounded-lg border border-neutral-300 px-3 py-1.5 text-xs font-semibold hover:bg-neutral-100 disabled:opacity-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
-              >
-                {gymsLoading
-                  ? "Buscando…"
-                  : gymCount != null
-                    ? gymsVisible
-                      ? `Ocultar gyms (${gymCount})`
-                      : `Mostrar gyms (${gymCount})`
-                    : "Gimnasios"}
-              </button>
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setShowLayers((v) => !v)}
+                  disabled={(rows?.length ?? 0) === 0}
+                  className="flex w-full items-center justify-center gap-1 rounded-lg border border-neutral-300 py-2 text-xs font-semibold hover:bg-neutral-100 disabled:opacity-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
+                >
+                  Puntos cercanos
+                  <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform ${showLayers ? "rotate-180" : ""}`}>
+                    <path d="M6 9l6 6 6-6" />
+                  </svg>
+                </button>
+                {showLayers && (
+                  <div className="absolute inset-x-0 top-full z-30 mt-1 rounded-lg border border-neutral-200 bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
+                    <LayerToggle label="Gimnasios" color="#b84f30" loading={gymsLoading} visible={gymsVisible} count={gymCount} onToggle={toggleGyms} />
+                    <LayerToggle label="Cafeterías" color="#6f4e37" loading={cafesLoading} visible={cafesVisible} count={cafeCount} onToggle={toggleCafes} />
+                  </div>
+                )}
+              </div>
               <button
                 type="button"
                 onClick={() => setShowSync((v) => !v)}
-                className={`rounded-lg border px-3 py-1.5 text-xs font-semibold ${
+                className={`w-full rounded-lg border py-2 text-xs font-semibold ${
                   showSync
                     ? "border-blue-500 text-blue-600 dark:text-blue-400"
                     : "border-neutral-300 hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800"
@@ -682,23 +786,23 @@ export default function FavoritesMapPage() {
       {/* ------------------------------------------------ map */}
       <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 className="pointer-events-none absolute bottom-4 left-3 z-[500] rounded border border-black/10 bg-white/90 px-2.5 py-2 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 anual</div>
+          <div
+            className="h-2 w-52 rounded-sm"
+            style={{ background: "linear-gradient(90deg, hsl(0,66%,44%), hsl(87,66%,44%), hsl(174,66%,44%))" }}
+          />
+          <div className="mt-1 flex w-52 justify-between text-[10px] font-semibold">
+            <span>Mediocre</span>
+            <span>Bueno</span>
+            <span>Espectacular</span>
+          </div>
+          <div className="flex w-52 justify-between text-[9px] text-neutral-500">
+            <span>≤6%</span>
+            <span>8–9%</span>
+            <span>10%+</span>
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/app/globals.css

@@ -159,17 +159,30 @@ button[class*="bg-blue-5"],
   border-color: rgba(255, 255, 255, 0.4);
 }
 
-/* Gym marker: brick square with a white dumbbell. */
-.bw-gym {
+/* POI markers (gym / café): semi-transparent square with a white icon. */
+.bw-gym,
+.bw-cafe {
   width: 24px;
   height: 24px;
   border-radius: 2px;
-  background: var(--accent);
-  border: 1px solid rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translate(-50%, -50%);
   cursor: pointer;
+  transition: opacity 0.12s ease;
+}
+.bw-gym {
+  background: rgba(184, 79, 48, 0.68); /* brick, transparent */
+  opacity: 0.9;
+}
+.bw-cafe {
+  background: rgba(111, 78, 55, 0.68); /* coffee, transparent */
+  opacity: 0.9;
+}
+.bw-gym:hover,
+.bw-cafe:hover {
+  opacity: 1;
 }

package/src/components/ReformScenario.tsx

@@ -4,7 +4,6 @@ import { useState } from "react";
 import { fmtAED, fmtPct } from "@/lib/format";
 import { AnalysisRow } from "@/lib/types";
 
-const DEFAULT_AED_PER_SQFT = 300;
 const SIZE_TOLERANCE = 0.2;
 
 interface Props {
@@ -15,30 +14,101 @@ interface Props {
 }
 
 /**
- * Buy → light reform → rent higher. Within one building + size band the location
- * is fixed, so the comparable-rent spread (P25→P75) approximates what the market
- * pays for interior condition; renting at ~P75 is the realistic post-reform rent.
+ * Itemized reform model. The rent uplift you can claim depends on the SCOPE of
+ * the reform (which items you do), not on the money you type in: each item
+ * captures a share ("weight") of the median→P75 spread. Costs only affect the
+ * payback. This prevents "cheap reform + full P75 rent" from inflating yields.
+ *
+ * Default costs are rough Dubai light-reform figures per sqft; edit them freely.
  */
+const ITEMS = {
+  mobiliario: { label: "Mobiliario", defaults: { comprado: 45, medida: 100 }, weights: { comprado: 0.4, medida: 0.5 } },
+  suelo: { label: "Suelo", perSqft: 55, weight: 0.25 },
+  paredes: { label: "Paredes (pintura y arreglos)", perSqft: 12, weight: 0.2 },
+  techos: { label: "Techos (falso techo e iluminación)", perSqft: 20, weight: 0.1 },
+} as const;
+
+type FurnitureType = "comprado" | "medida";
+
+interface ReformState {
+  mobiliario: { on: boolean; tipo: FurnitureType; cost: number };
+  suelo: { on: boolean; cost: number };
+  paredes: { on: boolean; cost: number };
+  techos: { on: boolean; cost: number };
+}
+
+function defaultState(sizeSqft: number | null): ReformState {
+  const s = sizeSqft ?? 500;
+  return {
+    mobiliario: { on: true, tipo: "comprado", cost: Math.round(s * ITEMS.mobiliario.defaults.comprado) },
+    suelo: { on: true, cost: Math.round(s * ITEMS.suelo.perSqft) },
+    paredes: { on: true, cost: Math.round(s * ITEMS.paredes.perSqft) },
+    techos: { on: false, cost: Math.round(s * ITEMS.techos.perSqft) },
+  };
+}
+
+const REFORM_HELP =
+  "Comparamos los alquileres de pisos de TAMAÑO SIMILAR (±20%) del mismo edificio (24 meses). " +
+  "P25 = piso sin reformar; P75 = bien reformado; mediana = el típico. La reforma solo puede capturar " +
+  "el margen mediana→P75, y CADA PARTIDA captura una parte: mobiliario 40% (50% si es a medida), " +
+  "suelo 25%, paredes 20%, techos 10%. Marcar o desmarcar partidas cambia la renta esperada; " +
+  "el coste que escribas solo cambia el payback — así una reforma barata no infla la rentabilidad.";
+
+/** Small "?" badge with a hover tooltip. */
+function InfoTip({ text }: { text: string }) {
+  return (
+    <span className="group relative ml-1 inline-flex align-middle normal-case">
+      <span className="flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-neutral-400 text-[10px] font-bold text-neutral-500 dark:border-neutral-500">
+        ?
+      </span>
+      <span className="pointer-events-none absolute left-0 top-5 z-30 w-72 rounded-md border border-neutral-200 bg-white p-2.5 text-[11px] font-normal leading-snug text-neutral-600 opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
+        {text}
+      </span>
+    </span>
+  );
+}
+
 export default function ReformScenario({ listingId, price, sizeSqft, analysis }: Props) {
-  const [cost, setCost] = useState(() => {
-    const fallback = sizeSqft ? Math.round(sizeSqft * DEFAULT_AED_PER_SQFT) : 100000;
+  const [state, setState] = useState<ReformState>(() => {
+    const fallback = defaultState(sizeSqft);
     if (typeof window === "undefined") return fallback;
-    const saved = Number(localStorage.getItem(`bw-reform-${listingId}`));
-    return Number.isFinite(saved) && saved > 0 ? saved : fallback;
+    try {
+      const saved = JSON.parse(localStorage.getItem(`bw-reform-${listingId}`) ?? "");
+      // Older versions stored a plain number — ignore those.
+      if (saved && typeof saved === "object" && saved.mobiliario) return saved as ReformState;
+    } catch {}
+    return fallback;
   });
 
   const { rent_p25, rent_p75, median_rent, rent_n, asking_yield } = analysis;
   if (rent_p25 == null || rent_p75 == null || median_rent == null || rent_n < 3) return null;
 
-  const setAndSave = (v: number) => {
-    setCost(v);
-    if (Number.isFinite(v) && v >= 0) localStorage.setItem(`bw-reform-${listingId}`, String(v));
+  const update = (next: ReformState) => {
+    setState(next);
+    localStorage.setItem(`bw-reform-${listingId}`, JSON.stringify(next));
   };
 
-  const postReformYield = rent_p75 / (price + cost);
-  const uplift = rent_p75 - median_rent;
-  const paybackYears = uplift > 0 ? cost / uplift : null;
+  const uplift = rent_p75 - median_rent; // full spread captured by a complete reform
+  const weightOf = {
+    mobiliario: state.mobiliario.on ? ITEMS.mobiliario.weights[state.mobiliario.tipo] : 0,
+    suelo: state.suelo.on ? ITEMS.suelo.weight : 0,
+    paredes: state.paredes.on ? ITEMS.paredes.weight : 0,
+    techos: state.techos.on ? ITEMS.techos.weight : 0,
+  };
+  const scope = Math.min(1, weightOf.mobiliario + weightOf.suelo + weightOf.paredes + weightOf.techos);
+  const totalCost =
+    (state.mobiliario.on ? state.mobiliario.cost : 0) +
+    (state.suelo.on ? state.suelo.cost : 0) +
+    (state.paredes.on ? state.paredes.cost : 0) +
+    (state.techos.on ? state.techos.cost : 0);
+
+  const expectedRent = median_rent + uplift * scope;
+  const capturedUplift = expectedRent - median_rent;
+  const postReformYield = expectedRent / (price + totalCost);
+  const paybackYears = capturedUplift > 0 && totalCost > 0 ? totalCost / capturedUplift : null;
   const spread = (rent_p75 - rent_p25) / median_rent;
+  const medianPct =
+    rent_p75 > rent_p25 ? Math.min(96, Math.max(4, ((median_rent - rent_p25) / (rent_p75 - rent_p25)) * 100)) : 50;
 
   const spreadReading =
     spread >= 0.15
@@ -51,16 +121,48 @@ export default function ReformScenario({ listingId, price, sizeSqft, analysis }:
     ? `${Math.round(sizeSqft * (1 - SIZE_TOLERANCE))}–${Math.round(sizeSqft * (1 + SIZE_TOLERANCE))} sqft`
     : null;
 
+  const rowCls = "flex items-center gap-2 py-1";
+  const inputCls =
+    "w-24 rounded border border-neutral-300 bg-white px-1.5 py-0.5 text-right text-xs outline-none focus:border-blue-500 disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950";
+
+  const itemRow = (
+    key: "suelo" | "paredes" | "techos",
+    label: string,
+    weight: number
+  ) => (
+    <label className={rowCls}>
+      <input
+        type="checkbox"
+        checked={state[key].on}
+        onChange={(e) => update({ ...state, [key]: { ...state[key], on: e.target.checked } })}
+        className="h-3.5 w-3.5 accent-blue-600"
+      />
+      <span className="flex-1 text-xs">{label}</span>
+      <span className="text-[10px] text-neutral-400">+{Math.round(weight * 100)}%</span>
+      <input
+        type="number"
+        min={0}
+        step={1000}
+        disabled={!state[key].on}
+        value={state[key].cost}
+        suppressHydrationWarning
+        onChange={(e) => update({ ...state, [key]: { ...state[key], cost: Number(e.target.value) } })}
+        className={inputCls}
+      />
+    </label>
+  );
+
   return (
     <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
       <h3 className="text-sm font-bold">
-        Escenario de reforma{" "}
+        Escenario de reforma
+        <InfoTip text={REFORM_HELP} />{" "}
         <span className="font-normal text-neutral-500">
           ({rent_n} alquileres comparables{band ? ` · ${band}` : ""})
         </span>
       </h3>
 
-      <div className="mt-3 grid gap-4 lg:grid-cols-[1fr_auto_1fr]">
+      <div className="mt-3 grid gap-4 lg:grid-cols-[1fr_auto_1.15fr]">
         {/* Rent range of comparables */}
         <div>
           <div className="mb-1 flex justify-between text-[11px] text-neutral-500">
@@ -68,20 +170,32 @@ export default function ReformScenario({ listingId, price, sizeSqft, analysis }:
             <span>mediana</span>
             <span>P75 (reformado)</span>
           </div>
-          <div className="relative h-2 rounded-full bg-gradient-to-r from-red-300 via-amber-300 to-emerald-400 dark:from-red-900 dark:via-amber-700 dark:to-emerald-600">
+          <div className="relative h-2.5 rounded-full bg-neutral-200 dark:bg-neutral-800">
             {rent_p75 > rent_p25 && (
-              <span
-                className="absolute -top-1 h-4 w-1 rounded bg-neutral-900 dark:bg-white"
-                style={{ left: `${Math.min(99, Math.max(1, ((median_rent - rent_p25) / (rent_p75 - rent_p25)) * 100))}%` }}
-                title={`mediana ${fmtAED(median_rent)}`}
-              />
+              <>
+                {/* upside captured by the CURRENT scope */}
+                <div
+                  className="absolute inset-y-0 rounded-r-full bg-emerald-400 dark:bg-emerald-600"
+                  style={{ left: `${medianPct}%`, width: `${(100 - medianPct) * scope}%` }}
+                  title={`Margen capturado por esta reforma (${Math.round(scope * 100)}%)`}
+                />
+                <span
+                  className="absolute -top-[3px] h-[17px] w-[3px] -translate-x-1/2 rounded bg-neutral-900 dark:bg-white"
+                  style={{ left: `${medianPct}%` }}
+                  title={`mediana ${fmtAED(median_rent)}`}
+                />
+              </>
             )}
           </div>
-          <div className="mt-1 flex justify-between text-xs font-semibold">
+          <div className="mt-1.5 flex justify-between text-xs font-semibold">
             <span>{fmtAED(rent_p25)}</span>
             <span className="text-neutral-500">{fmtAED(median_rent)}</span>
             <span>{fmtAED(rent_p75)}</span>
           </div>
+          <div className="mt-1 flex items-center gap-1.5 text-[10px] text-neutral-500">
+            <span className="inline-block h-2 w-3 rounded-sm bg-emerald-400 dark:bg-emerald-600" />
+            margen capturado por esta reforma ({Math.round(scope * 100)}% del total)
+          </div>
           <p className={`mt-2 text-xs ${spreadReading.cls}`}>
             Dispersión {fmtPct(spread, 0)} de la mediana — {spreadReading.txt}
           </p>
@@ -89,30 +203,71 @@ export default function ReformScenario({ listingId, price, sizeSqft, analysis }:
 
         <div className="hidden w-px bg-neutral-200 lg:block dark:bg-neutral-800" />
 
-        {/* Calculator */}
+        {/* Itemized reform */}
         <div className="text-sm">
-          <label className="text-xs font-semibold text-neutral-600 dark:text-neutral-400">
-            Coste de la reforma (AED)
-            {sizeSqft ? <span className="ml-1 font-normal text-neutral-400">(defecto {DEFAULT_AED_PER_SQFT}/sqft)</span> : null}
+          <div className="mb-1 flex items-center justify-between">
+            <span className="text-xs font-semibold text-neutral-600 dark:text-neutral-400">Partidas de la reforma</span>
+            <span className="text-[10px] text-neutral-400">% del margen · coste AED</span>
+          </div>
+
+          {/* Mobiliario: checkbox + type selector */}
+          <label className={rowCls}>
+            <input
+              type="checkbox"
+              checked={state.mobiliario.on}
+              onChange={(e) => update({ ...state, mobiliario: { ...state.mobiliario, on: e.target.checked } })}
+              className="h-3.5 w-3.5 accent-blue-600"
+            />
+            <span className="text-xs">Mobiliario</span>
+            <select
+              disabled={!state.mobiliario.on}
+              value={state.mobiliario.tipo}
+              onChange={(e) => {
+                const tipo = e.target.value as FurnitureType;
+                const cost = sizeSqft ? Math.round(sizeSqft * ITEMS.mobiliario.defaults[tipo]) : state.mobiliario.cost;
+                update({ ...state, mobiliario: { ...state.mobiliario, tipo, cost } });
+              }}
+              className="rounded border border-neutral-300 bg-white px-1 py-0.5 text-[11px] disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950"
+            >
+              <option value="comprado">comprado</option>
+              <option value="medida">a medida</option>
+            </select>
+            <span className="flex-1" />
+            <span className="text-[10px] text-neutral-400">
+              +{Math.round(ITEMS.mobiliario.weights[state.mobiliario.tipo] * 100)}%
+            </span>
+            <input
+              type="number"
+              min={0}
+              step={1000}
+              disabled={!state.mobiliario.on}
+              value={state.mobiliario.cost}
+              suppressHydrationWarning
+              onChange={(e) => update({ ...state, mobiliario: { ...state.mobiliario, cost: Number(e.target.value) } })}
+              className={inputCls}
+            />
           </label>
-          <input
-            type="number"
-            min={0}
-            step={5000}
-            suppressHydrationWarning
-            value={cost}
-            onChange={(e) => setAndSave(Number(e.target.value))}
-            className="mt-1 w-40 rounded-lg border border-neutral-300 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 dark:border-neutral-700 dark:bg-neutral-950"
-          />
-          <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs">
+
+          {itemRow("suelo", "Suelo", ITEMS.suelo.weight)}
+          {itemRow("paredes", "Paredes (pintura y arreglos)", ITEMS.paredes.weight)}
+          {itemRow("techos", "Techos (falso techo, iluminación)", ITEMS.techos.weight)}
+
+          <div className="mt-2 grid grid-cols-2 gap-x-6 gap-y-1.5 border-t border-neutral-200 pt-2 text-xs dark:border-neutral-800">
+            <span className="text-neutral-500">Coste total</span>
+            <b>{fmtAED(totalCost)}</b>
+            <span className="text-neutral-500">Renta esperada post-reforma</span>
+            <b>
+              {fmtAED(Math.round(expectedRent))}
+              <span className="ml-1 font-normal text-neutral-400">({Math.round(scope * 100)}% del margen)</span>
+            </b>
             <span className="text-neutral-500">Yield actual (mediana / precio)</span>
             <b>{fmtPct(asking_yield)}</b>
-            <span className="text-neutral-500">Yield post-reforma (P75 / precio+reforma)</span>
+            <span className="text-neutral-500">Yield post-reforma</span>
             <b className={postReformYield > (asking_yield ?? 0) ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"}>
               {fmtPct(postReformYield)}
             </b>
-            <span className="text-neutral-500">Renta extra al año (P75 − mediana)</span>
-            <b>{fmtAED(uplift)}</b>
+            <span className="text-neutral-500">Renta extra al año</span>
+            <b>{fmtAED(Math.round(capturedUplift))}</b>
             <span className="text-neutral-500">Payback de la reforma</span>
             <b>{paybackYears != null ? `${paybackYears.toFixed(1)} años` : "—"}</b>
           </div>

package/src/components/YieldBadge.tsx

@@ -1,4 +1,5 @@
 import { fmtPct } from "@/lib/format";
+import { yieldColor } from "@/lib/yieldColor";
 
 export default function YieldBadge({ value, n }: { value: number | null; n?: number }) {
   if (value == null)
@@ -7,18 +8,13 @@ export default function YieldBadge({ value, n }: { value: number | null; n?: num
         sin datos
       </span>
     );
-  const color =
-    value >= 0.07
-      ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300"
-      : value >= 0.055
-        ? "bg-lime-100 text-lime-800 dark:bg-lime-950 dark:text-lime-300"
-        : value >= 0.04
-          ? "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300"
-          : "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300";
   return (
-    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ${color}`}>
+    <span
+      className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+      style={{ background: yieldColor(value) }}
+    >
       {fmtPct(value)}
-      {n != null && <span className="font-normal opacity-70">({n} tx)</span>}
+      {n != null && <span className="font-normal opacity-80">({n} tx)</span>}
     </span>
   );
 }

package/src/lib/db.ts

@@ -100,6 +100,14 @@ CREATE TABLE IF NOT EXISTS gyms_list_cache (
   fetched_at TEXT NOT NULL
 );
 
+CREATE TABLE IF NOT EXISTS poi_list_cache (
+  geo_key TEXT NOT NULL,
+  kind TEXT NOT NULL,
+  json TEXT NOT NULL,
+  fetched_at TEXT NOT NULL,
+  PRIMARY KEY (geo_key, kind)
+);
+
 CREATE TABLE IF NOT EXISTS favorites (
   listing_id TEXT PRIMARY KEY REFERENCES listings(id),
   notes TEXT NOT NULL DEFAULT '',

package/src/lib/gyms.ts

@@ -1,104 +1,20 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { getDb, now } from "./db";
+import { poisNear, Poi } from "./pois";
 
-// Overpass instances are flaky under load; try each twice, in order.
-const OVERPASS_ENDPOINTS = [
-  "https://overpass-api.de/api/interpreter",
-  "https://overpass-api.de/api/interpreter",
-  "https://overpass.private.coffee/api/interpreter",
-  "https://overpass.kumi.systems/api/interpreter",
-];
-const RADIUS_M = 2000;
-const TTL_MS = 30 * 24 * 3600 * 1000;
-
-export interface Gym {
-  name: string;
-  lat: number;
-  lon: number;
-  distance_m: number;
-}
+export type Gym = Poi;
 
 export interface GymResult {
   gym_name: string | null;
   distance_m: number | null;
 }
 
-function haversineM(lat1: number, lon1: number, lat2: number, lon2: number): number {
-  const R = 6371000;
-  const toRad = (d: number) => (d * Math.PI) / 180;
-  const dLat = toRad(lat2 - lat1);
-  const dLon = toRad(lon2 - lon1);
-  const a =
-    Math.sin(dLat / 2) ** 2 +
-    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
-  return 2 * R * Math.asin(Math.sqrt(a));
-}
-
-// Overpass allows very few concurrent requests per IP — serialize ours.
-let queue: Promise<unknown> = Promise.resolve();
-
-/** All gyms (OSM fitness centres) within 2 km, nearest first; cached by ~100 m grid cell. */
+/** All gyms (OSM fitness centres) within 2 km, nearest first; cached. */
 export function gymsNear(lat: number, lon: number): Promise<Gym[] | null> {
-  const task = queue.then(() => doGymsNear(lat, lon));
-  queue = task.catch(() => null);
-  return task;
-}
-
-/** null = Overpass unavailable (not cached); [] = confirmed no gyms nearby. */
-async function doGymsNear(lat: number, lon: number): Promise<Gym[] | null> {
-  const db = getDb();
-  const geoKey = `${lat.toFixed(3)},${lon.toFixed(3)}`;
-  const cached = db.prepare(`SELECT * FROM gyms_list_cache WHERE geo_key = ?`).get(geoKey) as any;
-  if (cached && Date.now() - Date.parse(cached.fetched_at) < TTL_MS) {
-    return JSON.parse(cached.gyms_json);
-  }
-
-  const query = `[out:json][timeout:15];(node["leisure"="fitness_centre"](around:${RADIUS_M},${lat},${lon});way["leisure"="fitness_centre"](around:${RADIUS_M},${lat},${lon}););out center 60;`;
-  for (const endpoint of OVERPASS_ENDPOINTS) {
-    try {
-      const res = await fetch(endpoint, {
-        method: "POST",
-        body: "data=" + encodeURIComponent(query),
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-          // overpass-api.de answers 406 to requests without a User-Agent
-          "User-Agent": "brickwise-local/0.1 (personal use)",
-        },
-        signal: AbortSignal.timeout(20000),
-      });
-      if (!res.ok) continue;
-      const j = await res.json();
-      // Overloaded instances answer 200 + empty elements + a "remark" runtime error.
-      if (j.remark && !(j.elements || []).length) continue;
-      const gyms: Gym[] = [];
-      for (const el of j.elements || []) {
-        const eLat = el.lat ?? el.center?.lat;
-        const eLon = el.lon ?? el.center?.lon;
-        if (eLat == null || eLon == null) continue;
-        gyms.push({
-          name: el.tags?.name || "Gym",
-          lat: eLat,
-          lon: eLon,
-          distance_m: Math.round(haversineM(lat, lon, eLat, eLon)),
-        });
-      }
-      gyms.sort((a, b) => a.distance_m - b.distance_m);
-      db.prepare(
-        `INSERT OR REPLACE INTO gyms_list_cache (geo_key, gyms_json, fetched_at) VALUES (?, ?, ?)`
-      ).run(geoKey, JSON.stringify(gyms), now());
-      return gyms;
-    } catch {
-      continue;
-    }
-  }
-  return null; // all endpoints down: unknown, not cached
+  return poisNear(lat, lon, "gym");
 }
 
 /** Nearest gym within 2 km (derived from the cached list). */
 export async function nearestGym(lat: number, lon: number): Promise<GymResult> {
   const gyms = await gymsNear(lat, lon);
   const best = gyms?.[0];
-  return best
-    ? { gym_name: best.name, distance_m: best.distance_m }
-    : { gym_name: null, distance_m: null };
+  return best ? { gym_name: best.name, distance_m: best.distance_m } : { gym_name: null, distance_m: null };
 }

package/src/lib/pois.ts

@@ -0,0 +1,188 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createHash } from "crypto";
+import { getDb, now } from "./db";
+
+// Overpass instances are flaky under load; try each twice, in order.
+const OVERPASS_ENDPOINTS = [
+  "https://overpass-api.de/api/interpreter",
+  "https://overpass-api.de/api/interpreter",
+  "https://overpass.private.coffee/api/interpreter",
+  "https://overpass.kumi.systems/api/interpreter",
+];
+const RADIUS_M = 2000;
+const TTL_MS = 30 * 24 * 3600 * 1000;
+
+export type PoiKind = "gym" | "cafe";
+
+// OSM tag filters + default label per kind.
+const POI = {
+  gym: { tag: `["leisure"="fitness_centre"]`, label: "Gym" },
+  cafe: { tag: `["amenity"="cafe"]`, label: "Café" },
+} as const;
+
+export interface Poi {
+  name: string;
+  lat: number;
+  lon: number;
+  distance_m: number;
+}
+
+function haversineM(lat1: number, lon1: number, lat2: number, lon2: number): number {
+  const R = 6371000;
+  const toRad = (d: number) => (d * Math.PI) / 180;
+  const dLat = toRad(lat2 - lat1);
+  const dLon = toRad(lon2 - lon1);
+  const a =
+    Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
+  return 2 * R * Math.asin(Math.sqrt(a));
+}
+
+// Overpass allows very few concurrent requests per IP — serialize ours.
+let queue: Promise<unknown> = Promise.resolve();
+
+/** All POIs of `kind` within 2 km, nearest first; cached by ~100 m grid cell. */
+export function poisNear(lat: number, lon: number, kind: PoiKind): Promise<Poi[] | null> {
+  const task = queue.then(() => doPoisNear(lat, lon, kind));
+  queue = task.catch(() => null);
+  return task;
+}
+
+/** null = Overpass unavailable (not cached); [] = confirmed none nearby. */
+async function doPoisNear(lat: number, lon: number, kind: PoiKind): Promise<Poi[] | null> {
+  const db = getDb();
+  const geoKey = `${lat.toFixed(3)},${lon.toFixed(3)}`;
+  const cached = db.prepare(`SELECT * FROM poi_list_cache WHERE geo_key = ? AND kind = ?`).get(geoKey, kind) as any;
+  if (cached && Date.now() - Date.parse(cached.fetched_at) < TTL_MS) {
+    return JSON.parse(cached.json);
+  }
+
+  const tag = POI[kind].tag;
+  const query = `[out:json][timeout:15];(node${tag}(around:${RADIUS_M},${lat},${lon});way${tag}(around:${RADIUS_M},${lat},${lon}););out center 80;`;
+  const j = await overpassJson(query, 12000);
+  if (!j) return null; // all endpoints down: unknown, not cached
+  const pois: Poi[] = [];
+  for (const el of j.elements || []) {
+    const eLat = el.lat ?? el.center?.lat;
+    const eLon = el.lon ?? el.center?.lon;
+    if (eLat == null || eLon == null) continue;
+    pois.push({
+      name: el.tags?.name || POI[kind].label,
+      lat: eLat,
+      lon: eLon,
+      distance_m: Math.round(haversineM(lat, lon, eLat, eLon)),
+    });
+  }
+  pois.sort((a, b) => a.distance_m - b.distance_m);
+  db.prepare(`INSERT OR REPLACE INTO poi_list_cache (geo_key, kind, json, fetched_at) VALUES (?, ?, ?, ?)`).run(
+    geoKey,
+    kind,
+    JSON.stringify(pois),
+    now()
+  );
+  return pois;
+}
+
+/** POST an Overpass query, trying each endpoint until one answers; null if all fail. */
+async function overpassJson(query: string, timeoutMs: number): Promise<any | null> {
+  for (const endpoint of OVERPASS_ENDPOINTS) {
+    try {
+      const res = await fetch(endpoint, {
+        method: "POST",
+        body: "data=" + encodeURIComponent(query),
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+          "User-Agent": "brickwise-local/0.1 (personal use)",
+        },
+        signal: AbortSignal.timeout(timeoutMs),
+      });
+      if (!res.ok) continue;
+      const j = await res.json();
+      if (j.remark && !(j.elements || []).length) continue;
+      return j;
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
+/**
+ * All POIs of `kind` near ANY of the given points, in a SINGLE Overpass query
+ * (one request for the whole map, not one per property). Cached by the point set.
+ */
+export function poisForPoints(
+  points: { lat: number; lon: number }[],
+  kind: PoiKind
+): Promise<{ pois: Poi[]; failed: boolean }> {
+  const task = queue.then(() => doPoisForPoints(points, kind));
+  queue = task.catch(() => ({ pois: [] as Poi[], failed: true }));
+  return task;
+}
+
+async function doPoisForPoints(
+  points: { lat: number; lon: number }[],
+  kind: PoiKind
+): Promise<{ pois: Poi[]; failed: boolean }> {
+  const db = getDb();
+  // One ~100 m cell per cluster of nearby favorites (key format == doPoisNear's).
+  const cellMap = new Map<string, { lat: number; lon: number }>();
+  for (const p of points) {
+    const key = `${p.lat.toFixed(3)},${p.lon.toFixed(3)}`;
+    if (!cellMap.has(key)) cellMap.set(key, { lat: p.lat, lon: p.lon });
+  }
+  if (!cellMap.size) return { pois: [], failed: false };
+
+  const dedupe = (list: Poi[]) => {
+    const m = new Map<string, Poi>();
+    for (const p of list) m.set(`${p.lat.toFixed(5)},${p.lon.toFixed(5)}`, p);
+    return [...m.values()];
+  };
+  const fresh = (row: any) => row && Date.now() - Date.parse(row.fetched_at) < TTL_MS;
+  const get = (key: string) => db.prepare(`SELECT * FROM poi_list_cache WHERE geo_key = ? AND kind = ?`).get(key, kind) as any;
+  const put = (key: string, pois: Poi[]) =>
+    db.prepare(`INSERT OR REPLACE INTO poi_list_cache (geo_key, kind, json, fetched_at) VALUES (?, ?, ?, ?)`).run(key, kind, JSON.stringify(pois), now());
+
+  const allKeys = [...cellMap.keys()].sort();
+  const multiKey = "multi:" + createHash("md5").update(allKeys.join(";")).digest("hex");
+
+  // 1) Whole-set cache.
+  const multi = get(multiKey);
+  if (fresh(multi)) return { pois: JSON.parse(multi.json), failed: false };
+
+  // 2) Reuse per-cell cache; only query Overpass for what's missing.
+  const collected: Poi[] = [];
+  const missing: { lat: number; lon: number }[] = [];
+  for (const [key, c] of cellMap) {
+    const cc = get(key);
+    if (fresh(cc)) collected.push(...(JSON.parse(cc.json) as Poi[]));
+    else missing.push(c);
+  }
+  if (missing.length === 0) {
+    const pois = dedupe(collected);
+    put(multiKey, pois);
+    return { pois, failed: false };
+  }
+
+  // 3) One combined Overpass query for the missing cells.
+  const tag = POI[kind].tag;
+  const clauses = missing
+    .map((c) => `node${tag}(around:${RADIUS_M},${c.lat},${c.lon});way${tag}(around:${RADIUS_M},${c.lat},${c.lon});`)
+    .join("");
+  const query = `[out:json][timeout:90];(${clauses});out center 600;`;
+  const j = await overpassJson(query, 40000);
+  if (!j) {
+    // 4) Overpass down: return whatever we already had cached (partial).
+    const pois = dedupe(collected);
+    return { pois, failed: pois.length === 0 };
+  }
+
+  for (const el of j.elements || []) {
+    const eLat = el.lat ?? el.center?.lat;
+    const eLon = el.lon ?? el.center?.lon;
+    if (eLat == null || eLon == null) continue;
+    collected.push({ name: el.tags?.name || POI[kind].label, lat: eLat, lon: eLon, distance_m: 0 });
+  }
+  const pois = dedupe(collected);
+  put(multiKey, pois);
+  return { pois, failed: false };
+}

package/src/lib/yieldColor.ts

@@ -0,0 +1,11 @@
+// Shared yield → color scale used by both the map pins and the list badge.
+// ≤6% red (mediocre) → 10%+ turquoise (espectacular); 8–9% around green (bueno).
+export const YIELD_LOW = 0.06;
+export const YIELD_HIGH = 0.1;
+
+export function yieldColor(y: number | null): string {
+  if (y == null) return "#8a8a8a";
+  const t = Math.min(1, Math.max(0, (y - YIELD_LOW) / (YIELD_HIGH - YIELD_LOW)));
+  const hue = t * 174; // 0° red → 174° turquoise
+  return `hsl(${Math.round(hue)}, 66%, 44%)`;
+}