brickwise 0.1.21 → 0.1.24

package/bin/brickwise.js

@@ -74,9 +74,38 @@ function openBrowser(url) {
     syncSources();
   }
 
-  if (!fs.existsSync(path.join(workdir, "node_modules", "next"))) {
-    step("Instalando dependencias (solo la primera vez, ~1 min)…");
+  // Reinstall deps on a fresh copy AND whenever the app version changed — an
+  // update can add dependencies (e.g. leaflet.heat), and node_modules is not
+  // copied over, so a stale install would be missing them. A version marker
+  // inside node_modules tells us what was last installed there.
+  const marker = path.join(workdir, "node_modules", ".brickwise-version");
+  const currentVer = (() => {
+    try {
+      return require(path.join(workdir, "package.json")).version || "";
+    } catch {
+      return "";
+    }
+  })();
+  const installedVer = (() => {
+    try {
+      return fs.readFileSync(marker, "utf8").trim();
+    } catch {
+      return null;
+    }
+  })();
+  const nextMissing = !fs.existsSync(path.join(workdir, "node_modules", "next"));
+  if (nextMissing || installedVer !== currentVer) {
+    step(
+      nextMissing
+        ? "Instalando dependencias (solo la primera vez, ~1 min)…"
+        : "Actualizando dependencias tras la actualización…"
+    );
     run(npm, ["install", "--include=dev", "--no-audit", "--no-fund"], workdir);
+    try {
+      fs.writeFileSync(marker, currentVer);
+    } catch {
+      /* non-fatal: worst case we reinstall next launch */
+    }
   }
 
   const port = await findFreePort(Number(process.env.PORT) || 3000);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brickwise",
-  "version": "0.1.21",
+  "version": "0.1.24",
   "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/liquidity/route.ts

@@ -1,22 +1,17 @@
 import { NextRequest, NextResponse } from "next/server";
-import { listFavorites, txCountByTowerSince } from "@/lib/store";
-
-const MONTHS = 12;
+import { annualLiquidityByTower, listFavorites } from "@/lib/store";
 
 /**
- * Liquidity of each located favorite's tower = DLD transactions registered in the
- * last 12 months, split by kind via ?kind=buy|rent (defaults to rent). Feeds the
- * heatmap: each favorite is a weighted point, so nearby towers blend into a
- * "how active is this pocket" surface for that market (rentals vs sales).
+ * Liquidity of each located favorite's tower = average annual DLD transactions of
+ * `kind` (via ?kind=buy|rent, defaults to rent). Feeds the heatmap: each favorite
+ * is a weighted point, so nearby towers blend into a "how active is this pocket"
+ * surface for that market (rentals vs sales). Weight unit is transactions/year.
  */
 export async function GET(req: NextRequest) {
   try {
     const kindParam = req.nextUrl.searchParams.get("kind");
     const kind: "buy" | "rent" = kindParam === "buy" ? "buy" : "rent";
-    const since = new Date();
-    since.setMonth(since.getMonth() - MONTHS);
-    const sinceISO = since.toISOString().slice(0, 10);
-    const counts = txCountByTowerSince(sinceISO, kind);
+    const rates = annualLiquidityByTower(kind);
 
     const points = listFavorites()
       .filter((f) => f.lat != null && f.lon != null)
@@ -24,11 +19,11 @@ export async function GET(req: NextRequest) {
         id: f.id,
         lat: f.lat as number,
         lon: f.lon as number,
-        weight: f.tower_slug ? counts.get(f.tower_slug) ?? 0 : 0,
+        weight: f.tower_slug ? rates.get(f.tower_slug) ?? 0 : 0,
       }));
 
     const max = points.reduce((m, p) => Math.max(m, p.weight), 0);
-    return NextResponse.json({ points, max, months: MONTHS, kind });
+    return NextResponse.json({ points, max, kind, unit: "year" });
   } catch (e) {
     return NextResponse.json({ error: (e as Error).message }, { status: 500 });
   }

package/src/app/favorites/page.tsx

@@ -154,6 +154,7 @@ export default function FavoritesMapPage() {
   const [heatKind, setHeatKind] = useState<"rent" | "buy" | null>(null);
   const [heatLoading, setHeatLoading] = useState<"rent" | "buy" | null>(null);
   const [heatMax, setHeatMax] = useState<number | null>(null);
+  const [heatError, setHeatError] = useState<string | null>(null);
   const [showLayers, setShowLayers] = useState(false);
   const [sortBy, setSortBy] = useState<"yield" | "price">("yield");
   const [bedFilter, setBedFilter] = useState<number[]>([]);
@@ -201,6 +202,9 @@ export default function FavoritesMapPage() {
         zoomControl: true,
         scrollWheelZoom: false, // replaced by the trackpad handler below
         zoomSnap: 0, // allow fractional zoom for smooth pinch
+        // leaflet.heat ghosts (duplicate shifted blobs) during the animated-zoom
+        // transform; snap zoom so the heat canvas redraws cleanly at each zoom end.
+        zoomAnimation: false,
       });
       L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
         maxZoom: 19,
@@ -513,11 +517,14 @@ export default function FavoritesMapPage() {
       heatLayerRef.current = null;
     }
     setHeatLoading(kind);
+    setHeatError(null);
     try {
       const res = await fetch(`/api/liquidity?kind=${kind}`);
       const j = await res.json();
       if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
-      await import("leaflet.heat"); // patches L.heatLayer
+      await import("leaflet.heat").catch(() => {
+        throw new Error("Falta la dependencia del mapa de calor. Cierra la app y vuelve a arrancarla para que se instale.");
+      }); // patches L.heatLayer
       const max = j.max || 1;
       setHeatMax(j.max ?? null);
       // Each favorite blooms proportionally to its tower's recent activity; a small
@@ -541,8 +548,9 @@ export default function FavoritesMapPage() {
       layer.addTo(map);
       heatLayerRef.current = layer;
       setHeatKind(kind);
-    } catch {
+    } catch (e) {
       setHeatKind(null);
+      setHeatError((e as Error).message || "No se pudo cargar el mapa de calor.");
     } finally {
       setHeatLoading(null);
     }
@@ -762,14 +770,17 @@ export default function FavoritesMapPage() {
                     <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 className="my-1 border-t border-neutral-200 dark:border-neutral-800" />
-                    <p className="px-2 pb-0.5 pt-0.5 text-[10px] uppercase tracking-wide text-neutral-400">Mapa de calor de liquidez (12m)</p>
+                    <p className="px-2 pb-0.5 pt-0.5 text-[10px] uppercase tracking-wide text-neutral-400">Mapa de calor de liquidez media anual</p>
                     <LayerToggle label="Alquiler" color="#d946ef" loading={heatLoading === "rent"} visible={heatKind === "rent"} count={null} onToggle={() => toggleLiquidity("rent")} />
                     <LayerToggle label="Venta" color="#7c3aed" loading={heatLoading === "buy"} visible={heatKind === "buy"} count={null} onToggle={() => toggleLiquidity("buy")} />
                     {heatKind && (
                       <p className="px-2 pb-1 pt-0.5 text-[10px] leading-tight text-neutral-500">
-                        {heatKind === "rent" ? "Contratos de alquiler" : "Ventas"} (DLD) por edificio, últimos 12 meses. Amarillo = poco líquido, morado = mucha actividad.
+                        {heatKind === "rent" ? "Contratos de alquiler" : "Ventas"} (DLD) por edificio, media al año. Amarillo = poco líquido, morado = mucha actividad.
                       </p>
                     )}
+                    {heatError && (
+                      <p className="px-2 pb-1 pt-0.5 text-[10px] leading-tight text-red-600 dark:text-red-400">{heatError}</p>
+                    )}
                   </div>
                 )}
               </div>
@@ -915,7 +926,7 @@ export default function FavoritesMapPage() {
         {heatKind && (
           <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">
-              Liquidez {heatKind === "rent" ? "alquiler" : "venta"} · {heatKind === "rent" ? "contratos" : "ventas"}/mes
+              Liquidez media anual · {heatKind === "rent" ? "contratos" : "ventas"}/año
             </div>
             <div
               className="h-2 w-52 rounded-sm"
@@ -923,15 +934,15 @@ export default function FavoritesMapPage() {
             />
             <div className="mt-1 flex w-52 justify-between text-[10px] font-semibold">
               <span>0</span>
-              {heatMax != null && <span>{(heatMax / 24).toFixed(1)}</span>}
-              {heatMax != null && <span>{(heatMax / 12).toFixed(1)}</span>}
+              {heatMax != null && <span>{Math.round(heatMax / 2)}</span>}
+              {heatMax != null && <span>{Math.round(heatMax)}</span>}
             </div>
             <div className="flex w-52 justify-between text-[9px] text-neutral-500">
               <span>parado</span>
               <span>activo</span>
             </div>
             <div className="mt-0.5 w-52 text-[9px] leading-tight text-neutral-400">
-              {heatKind === "rent" ? "Contratos de alquiler registrados" : "Ventas registradas"} en el DLD por edificio, últimos 12 meses.
+              {heatKind === "rent" ? "Contratos de alquiler" : "Ventas"} en el DLD por edificio, media de operaciones por año.
             </div>
           </div>
         )}

package/src/app/listing/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { use, useEffect, useState } from "react";
+import { use, useEffect, useMemo, useState } from "react";
 import YieldBadge from "@/components/YieldBadge";
 import TransactionsTable from "@/components/TransactionsTable";
 import PsqftChart from "@/components/PsqftChart";
@@ -8,6 +8,7 @@ import ReformScenario from "@/components/ReformScenario";
 import { fmtAED, fmtDist, fmtPct, fmtSqft } from "@/lib/format";
 import { AnalysisRow } from "@/lib/types";
 import { TxRow } from "@/lib/pf/transactions";
+import { discountVsTrend, psqftTrend } from "@/lib/trend";
 
 interface Detail {
   listing: {
@@ -56,6 +57,15 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
       .catch((e) => setError(e.message));
   }, [id]);
 
+  // Discount of the asking price vs the sale trend (same trend line as the chart).
+  const discount = useMemo(() => {
+    if (!data) return null;
+    const { listing, transactions } = data;
+    const trend = psqftTrend(transactions?.buy ?? [], listing.size_sqft, listing.bedrooms);
+    const askingPsqft = listing.size_sqft ? listing.price / listing.size_sqft : null;
+    return discountVsTrend(trend, askingPsqft);
+  }, [data]);
+
   if (error)
     return (
       <div className="mx-auto w-full max-w-7xl px-4 py-6">
@@ -143,11 +153,20 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
       <section>
         <h2 className="mb-2 text-sm font-bold uppercase tracking-wide text-neutral-500">Datos básicos</h2>
         <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
-          <p className="flex items-baseline gap-2">
+          <p className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
             <span className="text-3xl font-bold" style={{ color: "var(--accent)" }}>{fmtAED(listing.price)}</span>
             {listing.size_sqft ? (
               <span className="text-sm text-neutral-500">· {Math.round(listing.price / listing.size_sqft)} AED/sqft</span>
             ) : null}
+            {discount != null && (
+              <span
+                className="btn-font ml-1 self-center rounded px-2 py-0.5 text-[11px] font-bold text-white"
+                style={{ background: discount >= 0 ? "#059669" : "#dc2626" }}
+                title="Precio del anuncio frente a la tendencia de AED/sqft de ventas comparables del edificio"
+              >
+                {discount >= 0 ? "▼" : "▲"} {Math.abs(discount * 100).toFixed(0)}% {discount >= 0 ? "bajo tendencia" : "sobre tendencia"}
+              </span>
+            )}
           </p>
           <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3 lg:grid-cols-6">
             <Fact label="Superficie" value={fmtSqft(listing.size_sqft)} />
@@ -268,6 +287,10 @@ const ANALYSIS_HELP: { term: string; desc: string }[] = [
     term: "Rentabilidad sobre el precio del anuncio",
     desc: "Renta anual mediana ÷ el precio que pide ESTE anuncio. Indica si este piso, a su precio, rinde por encima o por debajo de la mediana del edificio.",
   },
+  {
+    term: "Descuento vs tendencia",
+    desc: "AED/sqft del anuncio frente a la línea de tendencia de ventas comparables (la misma del gráfico), evaluada en la fecha más reciente. Verde = por debajo de la tendencia (descuento); rojo = por encima (sobreprecio).",
+  },
   {
     term: "Gimnasio más cercano",
     desc: "Distancia en línea recta al gimnasio más próximo según OpenStreetMap.",

package/src/lib/store.ts

@@ -177,20 +177,27 @@ export function listFavorites(): FavoriteListing[] {
 }
 
 /**
- * Liquidity proxy: number of DLD transactions per tower registered on/after
- * `sinceISO`, optionally restricted to one kind ('buy' | 'rent'). Raw totals are
- * capped at ~100/kind by scraping, so recent activity — not the lifetime count —
- * is what separates a liquid tower from a stale one. Returned as tower_slug → count.
+ * Average annual liquidity per tower: DLD transactions of `kind` PER YEAR, over
+ * the full stored history (total count ÷ years spanned by min→max date). Scraping
+ * caps each tower at ~100 tx, so the *rate* — not the raw count — is what compares
+ * a busy tower to a quiet one: 100 sales across 1 year is far more liquid than 100
+ * across 4. Returned as tower_slug → transactions/year.
  */
-export function txCountByTowerSince(sinceISO: string, kind?: "buy" | "rent"): Map<string, number> {
-  const db = getDb();
-  const rows = (
-    kind
-      ? db.prepare(`SELECT tower_slug, COUNT(*) n FROM transactions WHERE date >= ? AND kind = ? GROUP BY tower_slug`).all(sinceISO, kind)
-      : db.prepare(`SELECT tower_slug, COUNT(*) n FROM transactions WHERE date >= ? GROUP BY tower_slug`).all(sinceISO)
-  ) as { tower_slug: string; n: number }[];
+const MS_PER_YEAR = 365.25 * 24 * 3600 * 1000;
+export function annualLiquidityByTower(kind: "buy" | "rent"): Map<string, number> {
+  const rows = getDb()
+    .prepare(
+      `SELECT tower_slug, COUNT(*) n, MIN(date) mn, MAX(date) mx
+       FROM transactions WHERE kind = ? GROUP BY tower_slug`
+    )
+    .all(kind) as { tower_slug: string; n: number; mn: string; mx: string }[];
   const m = new Map<string, number>();
-  for (const r of rows) m.set(r.tower_slug, r.n);
+  for (const r of rows) {
+    const spanY = (Date.parse(r.mx) - Date.parse(r.mn)) / MS_PER_YEAR;
+    // Floor the span so a burst of transactions in a short window can't explode the rate.
+    const years = Math.max(spanY, 0.5);
+    m.set(r.tower_slug, r.n / years);
+  }
   return m;
 }
 

package/src/lib/trend.ts

@@ -0,0 +1,76 @@
+import { TxRow } from "./pf/transactions";
+
+// Same ±20% "comparable" window the yield sample and the AED/sqft chart use.
+const SIZE_TOLERANCE = 0.2;
+const YEAR_MS = 365.25 * 24 * 3600 * 1000;
+
+export interface TrendResult {
+  /** Trend value (AED/sqft) at the most recent transaction date — the current fair price. */
+  currentPsqft: number;
+  /** Annual drift of the trend, as a fraction (e.g. 0.08 = +8 %/yr). */
+  annualPct: number | null;
+  /** Number of comparable points the fit used. */
+  n: number;
+}
+
+/**
+ * Least-squares trend of AED/sqft over time for a building's transactions,
+ * fitted on comparable units (similar size ±20%, bedrooms fallback) — the exact
+ * line drawn by PsqftChart. `currentPsqft` is that line evaluated at the latest
+ * date, i.e. what a comparable unit is worth per sqft right now.
+ */
+export function psqftTrend(
+  rows: TxRow[],
+  listingSizeSqft: number | null,
+  listingBedrooms: number | null
+): TrendResult | null {
+  const pts = rows
+    .filter((r) => r.size_sqft && r.size_sqft > 0 && r.amount > 0 && r.date)
+    .map((r) => ({
+      t: Date.parse(r.date),
+      y: r.amount / (r.size_sqft as number),
+      comparable:
+        listingSizeSqft != null
+          ? Math.abs((r.size_sqft as number) - listingSizeSqft) / listingSizeSqft <= SIZE_TOLERANCE
+          : listingBedrooms != null && r.bedrooms === listingBedrooms,
+    }))
+    .filter((p) => Number.isFinite(p.t) && Number.isFinite(p.y))
+    .sort((a, b) => a.t - b.t);
+  if (!pts.length) return null;
+
+  const tMin = pts[0].t;
+  const tMax = pts[pts.length - 1].t;
+  const comp = pts.filter((p) => p.comparable);
+  const fitSet = comp.length >= 2 ? comp : pts;
+  if (fitSet.length < 2 || tMax <= tMin) return null;
+
+  const n = fitSet.length;
+  const mt = fitSet.reduce((s, p) => s + p.t, 0) / n;
+  const my = fitSet.reduce((s, p) => s + p.y, 0) / n;
+  let num = 0;
+  let den = 0;
+  for (const p of fitSet) {
+    num += (p.t - mt) * (p.y - my);
+    den += (p.t - mt) ** 2;
+  }
+  const slope = den ? num / den : 0; // AED/sqft per ms
+  const intercept = my - slope * mt;
+
+  return {
+    currentPsqft: intercept + slope * tMax,
+    annualPct: my ? (slope * YEAR_MS) / my : null,
+    n: comp.length >= 2 ? comp.length : pts.length,
+  };
+}
+
+/**
+ * Discount of the asking price vs the current trend, as a fraction: positive when
+ * the listing is cheaper than the trend (a discount), negative when it's above it.
+ */
+export function discountVsTrend(
+  trend: TrendResult | null,
+  askingPsqft: number | null
+): number | null {
+  if (!trend || askingPsqft == null || trend.currentPsqft <= 0) return null;
+  return (trend.currentPsqft - askingPsqft) / trend.currentPsqft;
+}