@burdenoff/microfe-housingvista 2026.709.2 → 2026.709.3

package/dist/housingvista/pages/market/AreaInsightsPage.js

@@ -1,34 +1,35 @@
 import { cn as e, formatINRCompact as t, formatNumber as n } from "../../utils/helpers.js";
 import { PageLayout as r } from "../../components/PageLayout.js";
 import { EmptyState as i } from "../../components/EmptyState.js";
-import { useAreaInsights as a } from "../../hooks/index.js";
+import { useTrackPageView as a } from "../../hooks/useHousingVistaAnalytics.js";
+import { useAreaInsights as o } from "../../hooks/index.js";
 import "../../components/index.js";
-import { useServerPagination as o } from "../../hooks/useServerPagination.js";
-import { useMemo as s, useState as c } from "react";
-import { ArrowUpRight as l, Building as u, Check as d, GitCompare as f, GraduationCap as p, Heart as m, MapPin as h, TrendingUp as g, Users as _ } from "lucide-react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
-import { EmphasisPanel as x, Pagination as S } from "@burdenoff/fe-libs/ui";
+import { useServerPagination as s } from "../../hooks/useServerPagination.js";
+import { useMemo as c, useState as l } from "react";
+import { ArrowUpRight as u, Building as d, Check as f, GitCompare as p, GraduationCap as m, Heart as h, MapPin as g, TrendingUp as _, Users as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { EmphasisPanel as S, Pagination as C } from "@burdenoff/fe-libs/ui";
 //#region src/housingvista/pages/market/AreaInsightsPage.tsx
-function C(e) {
+function w(e) {
 	return e >= .8 ? "text-status-success-text" : e >= .6 ? "text-status-info-text" : e >= .4 ? "text-status-warning-text" : "text-status-error-text";
 }
-function w({ score: t, label: n, suffix: r = "", max: i = 100 }) {
+function T({ score: t, label: n, suffix: r = "", max: i = 100 }) {
 	let a = Math.max(0, Math.min(t / i, 1)), o = "M5 46 A41 41 0 0 1 87 46";
-	return /* @__PURE__ */ b("div", {
+	return /* @__PURE__ */ x("div", {
 		className: "flex flex-col items-center",
-		children: [/* @__PURE__ */ b("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "relative",
-			children: [/* @__PURE__ */ b("svg", {
+			children: [/* @__PURE__ */ x("svg", {
 				viewBox: "0 0 92 50",
 				className: "h-11 w-[64px]",
 				"aria-hidden": "true",
-				children: [/* @__PURE__ */ y("path", {
+				children: [/* @__PURE__ */ b("path", {
 					d: o,
 					fill: "none",
 					strokeWidth: 8,
 					strokeLinecap: "round",
 					className: "stroke-bg-sunken"
-				}), /* @__PURE__ */ y("path", {
+				}), /* @__PURE__ */ b("path", {
 					d: o,
 					fill: "none",
 					strokeWidth: 8,
@@ -37,141 +38,141 @@ function w({ score: t, label: n, suffix: r = "", max: i = 100 }) {
 					pathLength: 100,
 					strokeDasharray: 100,
 					strokeDashoffset: 100 * (1 - a),
-					className: e("transition-[stroke-dashoffset]", C(a))
+					className: e("transition-[stroke-dashoffset]", w(a))
 				})]
-			}), /* @__PURE__ */ b("span", {
+			}), /* @__PURE__ */ x("span", {
 				className: "absolute inset-x-0 bottom-0 text-center text-sm font-bold tabular-nums text-text-primary",
 				children: [t, r]
 			})]
-		}), /* @__PURE__ */ y("span", {
+		}), /* @__PURE__ */ b("span", {
 			className: "mt-1 text-[10px] font-medium text-text-secondary",
 			children: n
 		})]
 	});
 }
-function T({ area: r, isComparing: i, isSelected: a, isTopPick: o, onToggleCompare: s }) {
-	let c = Math.round((r.safetyScore + r.connectivityScore + r.amenitiesScore) / 3), v = c / 100;
-	return /* @__PURE__ */ b("div", {
+function E({ area: r, isComparing: i, isSelected: a, isTopPick: o, onToggleCompare: s }) {
+	let c = Math.round((r.safetyScore + r.connectivityScore + r.amenitiesScore) / 3), l = c / 100;
+	return /* @__PURE__ */ x("div", {
 		className: e("rounded-card border bg-bg-surface p-5 shadow-elevation-1 transition-[box-shadow,border-color]", a ? "border-action-primary-border ring-2 ring-action-primary-border/20" : "border-border-seam hover:border-border-strong hover:shadow-elevation-2"),
 		children: [
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mb-4 flex items-start justify-between gap-3",
-				children: [/* @__PURE__ */ b("div", {
+				children: [/* @__PURE__ */ x("div", {
 					className: "min-w-0",
 					children: [
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ x("div", {
 							className: "flex flex-wrap items-center gap-2",
-							children: [/* @__PURE__ */ y("h3", {
+							children: [/* @__PURE__ */ b("h3", {
 								className: "text-base font-semibold text-text-primary",
 								children: r.areaName
-							}), o && /* @__PURE__ */ y("span", {
+							}), o && /* @__PURE__ */ b("span", {
 								className: "rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-status-success-text",
 								children: "Top Pick"
 							})]
 						}),
-						/* @__PURE__ */ b("p", {
+						/* @__PURE__ */ x("p", {
 							className: "flex items-center gap-1 text-xs text-text-secondary",
-							children: [/* @__PURE__ */ y(h, { className: "h-3 w-3" }), r.city]
+							children: [/* @__PURE__ */ b(g, { className: "h-3 w-3" }), r.city]
 						}),
-						/* @__PURE__ */ b("p", {
+						/* @__PURE__ */ x("p", {
 							className: "mt-1 text-xs text-text-secondary",
 							children: [
 								"Overall score",
 								" ",
-								/* @__PURE__ */ b("span", {
-									className: e("font-semibold", C(v)),
+								/* @__PURE__ */ x("span", {
+									className: e("font-semibold", w(l)),
 									children: [(c / 10).toFixed(1), "/10"]
 								})
 							]
 						})
 					]
-				}), /* @__PURE__ */ y("div", {
+				}), /* @__PURE__ */ b("div", {
 					className: "flex items-center gap-2",
-					children: i && /* @__PURE__ */ y("button", {
+					children: i && /* @__PURE__ */ b("button", {
 						onClick: s,
 						"aria-pressed": a,
 						"aria-label": a ? `Remove ${r.areaName} from comparison` : `Add ${r.areaName} to comparison`,
 						className: e("flex h-7 w-7 items-center justify-center rounded-md border transition-colors", a ? "border-action-primary-border bg-action-primary-bg text-action-primary-text" : "border-border-subtle text-text-secondary hover:bg-bg-sunken"),
-						children: y(a ? d : f, { className: "h-3.5 w-3.5" })
+						children: b(a ? f : p, { className: "h-3.5 w-3.5" })
 					})
 				})]
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mb-4 grid grid-cols-4 gap-1 rounded-lg bg-bg-sunken/40 py-3",
 				children: [
-					/* @__PURE__ */ y(w, {
+					/* @__PURE__ */ b(T, {
 						score: r.safetyScore,
 						label: "Safety"
 					}),
-					/* @__PURE__ */ y(w, {
+					/* @__PURE__ */ b(T, {
 						score: r.connectivityScore,
 						label: "Transport"
 					}),
-					/* @__PURE__ */ y(w, {
+					/* @__PURE__ */ b(T, {
 						score: r.amenitiesScore,
 						label: "Amenities"
 					}),
-					/* @__PURE__ */ y(w, {
+					/* @__PURE__ */ b(T, {
 						score: r.greenCoverPercent,
 						label: "Green",
 						suffix: "%"
 					})
 				]
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mb-4 grid grid-cols-2 gap-2",
 				children: [
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ x("div", {
 						className: "flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs",
 						children: [
-							/* @__PURE__ */ y(p, { className: "h-3.5 w-3.5 text-text-secondary" }),
-							/* @__PURE__ */ y("span", {
+							/* @__PURE__ */ b(m, { className: "h-3.5 w-3.5 text-text-secondary" }),
+							/* @__PURE__ */ b("span", {
 								className: "text-text-secondary",
 								children: "Schools:"
 							}),
-							/* @__PURE__ */ y("span", {
+							/* @__PURE__ */ b("span", {
 								className: "font-semibold text-text-primary",
 								children: r.schoolsNearby
 							})
 						]
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ x("div", {
 						className: "flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs",
 						children: [
-							/* @__PURE__ */ y(m, { className: "h-3.5 w-3.5 text-text-secondary" }),
-							/* @__PURE__ */ y("span", {
+							/* @__PURE__ */ b(h, { className: "h-3.5 w-3.5 text-text-secondary" }),
+							/* @__PURE__ */ b("span", {
 								className: "text-text-secondary",
 								children: "Hospitals:"
 							}),
-							/* @__PURE__ */ y("span", {
+							/* @__PURE__ */ b("span", {
 								className: "font-semibold text-text-primary",
 								children: r.hospitalsNearby
 							})
 						]
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ x("div", {
 						className: "flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs",
 						children: [
-							/* @__PURE__ */ y(_, { className: "h-3.5 w-3.5 text-text-secondary" }),
-							/* @__PURE__ */ y("span", {
+							/* @__PURE__ */ b(v, { className: "h-3.5 w-3.5 text-text-secondary" }),
+							/* @__PURE__ */ b("span", {
 								className: "text-text-secondary",
 								children: "Population:"
 							}),
-							/* @__PURE__ */ y("span", {
+							/* @__PURE__ */ b("span", {
 								className: "font-semibold text-text-primary",
 								children: n(r.population)
 							})
 						]
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ x("div", {
 						className: "flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs",
 						children: [
-							/* @__PURE__ */ y(g, { className: "h-3.5 w-3.5 text-text-secondary" }),
-							/* @__PURE__ */ y("span", {
+							/* @__PURE__ */ b(_, { className: "h-3.5 w-3.5 text-text-secondary" }),
+							/* @__PURE__ */ b("span", {
 								className: "text-text-secondary",
 								children: "Yield:"
 							}),
-							/* @__PURE__ */ b("span", {
+							/* @__PURE__ */ x("span", {
 								className: "font-semibold text-text-primary",
 								children: [r.avgRentalYield, "%"]
 							})
@@ -179,33 +180,33 @@ function T({ area: r, isComparing: i, isSelected: a, isTopPick: o, onToggleCompa
 					})
 				]
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "flex items-center justify-between rounded-md bg-bg-sunken/50 p-3",
-				children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+				children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 					className: "text-xs text-text-secondary",
 					children: "Avg Property Price"
-				}), /* @__PURE__ */ y("p", {
+				}), /* @__PURE__ */ b("p", {
 					className: "text-sm font-bold text-text-primary",
 					children: t(r.avgPropertyPrice)
-				})] }), /* @__PURE__ */ b("div", {
+				})] }), /* @__PURE__ */ x("div", {
 					className: "text-right",
-					children: [/* @__PURE__ */ y("p", {
+					children: [/* @__PURE__ */ b("p", {
 						className: "text-xs text-text-secondary",
 						children: "Appreciation"
-					}), /* @__PURE__ */ b("p", {
+					}), /* @__PURE__ */ x("p", {
 						className: "flex items-center justify-end gap-0.5 text-sm font-bold text-status-success-text",
 						children: [
-							/* @__PURE__ */ y(l, { className: "h-3.5 w-3.5" }),
+							/* @__PURE__ */ b(u, { className: "h-3.5 w-3.5" }),
 							r.appreciationRate,
 							"% YoY"
 						]
 					})]
 				})]
 			}),
-			r.upcomingProjects > 0 && /* @__PURE__ */ b("div", {
+			r.upcomingProjects > 0 && /* @__PURE__ */ x("div", {
 				className: "mt-3 flex items-center gap-1.5 text-xs text-text-secondary",
 				children: [
-					/* @__PURE__ */ y(u, { className: "h-3 w-3" }),
+					/* @__PURE__ */ b(d, { className: "h-3 w-3" }),
 					r.upcomingProjects,
 					" upcoming project",
 					r.upcomingProjects > 1 ? "s" : ""
@@ -214,47 +215,48 @@ function T({ area: r, isComparing: i, isSelected: a, isTopPick: o, onToggleCompa
 		]
 	});
 }
-function E() {
-	let n = o(10), { data: l, loading: u } = a(n.pagination), [d, p] = c(!1), [m, g] = c(/* @__PURE__ */ new Set()), _ = (e) => {
-		g((t) => {
+function D() {
+	a("housingvista.market_analytics.area_viewed");
+	let n = s(10), { data: u, loading: d } = o(n.pagination), [f, m] = l(!1), [h, _] = l(/* @__PURE__ */ new Set()), v = (e) => {
+		_((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.size < 3 && n.add(e), n;
 		});
-	}, C = s(() => l.filter((e) => m.has(e.id)), [l, m]), w = s(() => {
-		if (l.length === 0) return null;
+	}, w = c(() => u.filter((e) => h.has(e.id)), [u, h]), T = c(() => {
+		if (u.length === 0) return null;
 		let e = (e) => e.safetyScore + e.connectivityScore + e.amenitiesScore;
-		return l.reduce((t, n) => e(n) > e(t) ? n : t).id;
-	}, [l]);
-	return /* @__PURE__ */ b(r, {
+		return u.reduce((t, n) => e(n) > e(t) ? n : t).id;
+	}, [u]);
+	return /* @__PURE__ */ x(r, {
 		title: "Area Insights",
 		description: "Explore neighborhoods, compare areas, and make informed decisions",
 		purpose: "Decide WHERE to buy or rent, not just what. Compare neighborhoods on safety, connectivity, amenities, schools, hospitals, green cover, prices, and appreciation — then pick up to three areas to compare side by side before you commit.",
-		actions: /* @__PURE__ */ b("button", {
+		actions: /* @__PURE__ */ x("button", {
 			onClick: () => {
-				p(!d), d && g(/* @__PURE__ */ new Set());
+				m(!f), f && _(/* @__PURE__ */ new Set());
 			},
-			className: e("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", d ? "bg-action-primary-bg text-action-primary-text" : "border border-border-subtle text-text-primary hover:bg-bg-sunken"),
-			children: [/* @__PURE__ */ y(f, { className: "h-3.5 w-3.5" }), d ? `Comparing (${m.size})` : "Compare Areas"]
+			className: e("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", f ? "bg-action-primary-bg text-action-primary-text" : "border border-border-subtle text-text-primary hover:bg-bg-sunken"),
+			children: [/* @__PURE__ */ b(p, { className: "h-3.5 w-3.5" }), f ? `Comparing (${h.size})` : "Compare Areas"]
 		}),
-		children: [d && C.length >= 2 && /* @__PURE__ */ b(x, {
+		children: [f && w.length >= 2 && /* @__PURE__ */ x(S, {
 			className: "p-4",
-			children: [/* @__PURE__ */ y("h3", {
+			children: [/* @__PURE__ */ b("h3", {
 				className: "mb-3 text-sm font-semibold text-text-primary",
 				children: "Comparison Summary"
-			}), /* @__PURE__ */ y("div", {
+			}), /* @__PURE__ */ b("div", {
 				className: "overflow-x-auto",
-				children: /* @__PURE__ */ b("table", {
+				children: /* @__PURE__ */ x("table", {
 					className: "w-full text-xs",
-					children: [/* @__PURE__ */ y("thead", { children: /* @__PURE__ */ b("tr", {
+					children: [/* @__PURE__ */ b("thead", { children: /* @__PURE__ */ x("tr", {
 						className: "border-b border-border-subtle",
-						children: [/* @__PURE__ */ y("th", {
+						children: [/* @__PURE__ */ b("th", {
 							className: "pb-2 pr-4 text-left text-text-secondary",
 							children: "Metric"
-						}), C.map((e) => /* @__PURE__ */ y("th", {
+						}), w.map((e) => /* @__PURE__ */ b("th", {
 							className: "pb-2 pr-4 text-left font-semibold text-text-primary",
 							children: e.areaName
 						}, e.id))]
-					}) }), /* @__PURE__ */ y("tbody", {
+					}) }), /* @__PURE__ */ b("tbody", {
 						className: "divide-y divide-border",
 						children: [
 							{
@@ -281,42 +283,42 @@ function E() {
 								label: "Amenities",
 								render: (e) => `${e.amenitiesScore}/100`
 							}
-						].map((e) => /* @__PURE__ */ b("tr", { children: [/* @__PURE__ */ y("td", {
+						].map((e) => /* @__PURE__ */ x("tr", { children: [/* @__PURE__ */ b("td", {
 							className: "py-2 pr-4 text-text-secondary",
 							children: e.label
-						}), C.map((t) => /* @__PURE__ */ y("td", {
+						}), w.map((t) => /* @__PURE__ */ b("td", {
 							className: "py-2 pr-4 font-medium text-text-primary",
 							children: e.render(t)
 						}, t.id))] }, e.label))
 					})]
 				})
 			})]
-		}), l.length > 0 ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("div", {
+		}), u.length > 0 ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
 			className: "grid gap-4 sm:grid-cols-2",
-			children: l.map((e) => /* @__PURE__ */ y(T, {
+			children: u.map((e) => /* @__PURE__ */ b(E, {
 				area: e,
-				isComparing: d,
-				isSelected: m.has(e.id),
-				isTopPick: e.id === w,
-				onToggleCompare: () => _(e.id)
+				isComparing: f,
+				isSelected: h.has(e.id),
+				isTopPick: e.id === T,
+				onToggleCompare: () => v(e.id)
 			}, e.id))
-		}), /* @__PURE__ */ y(S, {
+		}), /* @__PURE__ */ b(C, {
 			page: n.page,
 			pageSize: n.pageSize,
-			hasNextPage: l.length >= n.pageSize,
+			hasNextPage: u.length >= n.pageSize,
 			hasPreviousPage: n.page > 1,
-			loading: u,
+			loading: d,
 			onPageChange: n.setPage,
 			onPageSizeChange: n.setPageSize
-		})] }) : /* @__PURE__ */ y(i, {
+		})] }) : /* @__PURE__ */ b(i, {
 			illustration: "empty-data",
-			icon: /* @__PURE__ */ y(h, { className: "h-12 w-12" }),
+			icon: /* @__PURE__ */ b(g, { className: "h-12 w-12" }),
 			title: "No area insights available",
 			description: "Area insight data will appear here once available."
 		})]
 	});
 }
 //#endregion
-export { E as AreaInsightsPage };
+export { D as AreaInsightsPage };
 
 //# sourceMappingURL=AreaInsightsPage.js.map

package/dist/housingvista/pages/market/AreaInsightsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaInsightsPage.js","names":[],"sources":["../../../../src/housingvista/pages/market/AreaInsightsPage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport {\n  MapPin,\n  GraduationCap,\n  Heart,\n  Users,\n  TrendingUp,\n  Building,\n  ArrowUpRight,\n  GitCompare,\n  Check,\n} from 'lucide-react';\nimport { EmphasisPanel, Pagination } from '@burdenoff/fe-libs/ui';\nimport { PageLayout, EmptyState } from '../../components';\nimport { useAreaInsights } from '../../hooks';\nimport { useServerPagination } from '../../hooks/useServerPagination';\nimport { cn, formatINRCompact, formatNumber } from '../../utils/helpers';\nimport type { AreaInsight } from '../../types';\n\nfunction gaugeColor(pct: number): string {\n  if (pct >= 0.8) return 'text-status-success-text';\n  if (pct >= 0.6) return 'text-status-info-text';\n  if (pct >= 0.4) return 'text-status-warning-text';\n  return 'text-status-error-text';\n}\n\n/**\n * Semicircle score gauge (0–max) — the arc is normalised via `pathLength=100`\n * so the fill is radius-independent. Matches the concept's gauge cluster.\n */\nfunction ScoreGauge({\n  score,\n  label,\n  suffix = '',\n  max = 100,\n}: {\n  score: number;\n  label: string;\n  suffix?: string;\n  max?: number;\n}) {\n  const pct = Math.max(0, Math.min(score / max, 1));\n  const arc = 'M5 46 A41 41 0 0 1 87 46';\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"relative\">\n        <svg viewBox=\"0 0 92 50\" className=\"h-11 w-[64px]\" aria-hidden=\"true\">\n          <path d={arc} fill=\"none\" strokeWidth={8} strokeLinecap=\"round\" className=\"stroke-bg-sunken\" />\n          <path\n            d={arc}\n            fill=\"none\"\n            strokeWidth={8}\n            strokeLinecap=\"round\"\n            stroke=\"currentColor\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={100 * (1 - pct)}\n            className={cn('transition-[stroke-dashoffset]', gaugeColor(pct))}\n          />\n        </svg>\n        <span className=\"absolute inset-x-0 bottom-0 text-center text-sm font-bold tabular-nums text-text-primary\">\n          {score}\n          {suffix}\n        </span>\n      </div>\n      <span className=\"mt-1 text-[10px] font-medium text-text-secondary\">{label}</span>\n    </div>\n  );\n}\n\nfunction AreaCard({\n  area,\n  isComparing,\n  isSelected,\n  isTopPick,\n  onToggleCompare,\n}: {\n  area: AreaInsight;\n  isComparing: boolean;\n  isSelected: boolean;\n  isTopPick: boolean;\n  onToggleCompare: () => void;\n}) {\n  const overallScore = Math.round((area.safetyScore + area.connectivityScore + area.amenitiesScore) / 3);\n  const overallPct = overallScore / 100;\n\n  return (\n    <div\n      className={cn(\n        'rounded-card border bg-bg-surface p-5 shadow-elevation-1 transition-[box-shadow,border-color]',\n        isSelected\n          ? 'border-action-primary-border ring-2 ring-action-primary-border/20'\n          : 'border-border-seam hover:border-border-strong hover:shadow-elevation-2'\n      )}\n    >\n      {/* Header */}\n      <div className=\"mb-4 flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <h3 className=\"text-base font-semibold text-text-primary\">{area.areaName}</h3>\n            {isTopPick && (\n              <span className=\"rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-status-success-text\">\n                Top Pick\n              </span>\n            )}\n          </div>\n          <p className=\"flex items-center gap-1 text-xs text-text-secondary\">\n            <MapPin className=\"h-3 w-3\" />\n            {area.city}\n          </p>\n          <p className=\"mt-1 text-xs text-text-secondary\">\n            Overall score{' '}\n            <span className={cn('font-semibold', gaugeColor(overallPct))}>{(overallScore / 10).toFixed(1)}/10</span>\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {isComparing && (\n            <button\n              onClick={onToggleCompare}\n              aria-pressed={isSelected}\n              aria-label={isSelected ? `Remove ${area.areaName} from comparison` : `Add ${area.areaName} to comparison`}\n              className={cn(\n                'flex h-7 w-7 items-center justify-center rounded-md border transition-colors',\n                isSelected\n                  ? 'border-action-primary-border bg-action-primary-bg text-action-primary-text'\n                  : 'border-border-subtle text-text-secondary hover:bg-bg-sunken'\n              )}\n            >\n              {isSelected ? <Check className=\"h-3.5 w-3.5\" /> : <GitCompare className=\"h-3.5 w-3.5\" />}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Score Gauges (mock parity) */}\n      <div className=\"mb-4 grid grid-cols-4 gap-1 rounded-lg bg-bg-sunken/40 py-3\">\n        <ScoreGauge score={area.safetyScore} label=\"Safety\" />\n        <ScoreGauge score={area.connectivityScore} label=\"Transport\" />\n        <ScoreGauge score={area.amenitiesScore} label=\"Amenities\" />\n        <ScoreGauge score={area.greenCoverPercent} label=\"Green\" suffix=\"%\" />\n      </div>\n\n      {/* Nearby Counts */}\n      <div className=\"mb-4 grid grid-cols-2 gap-2\">\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <GraduationCap className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Schools:</span>\n          <span className=\"font-semibold text-text-primary\">{area.schoolsNearby}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <Heart className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Hospitals:</span>\n          <span className=\"font-semibold text-text-primary\">{area.hospitalsNearby}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <Users className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Population:</span>\n          <span className=\"font-semibold text-text-primary\">{formatNumber(area.population)}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <TrendingUp className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Yield:</span>\n          <span className=\"font-semibold text-text-primary\">{area.avgRentalYield}%</span>\n        </div>\n      </div>\n\n      {/* Price + Growth */}\n      <div className=\"flex items-center justify-between rounded-md bg-bg-sunken/50 p-3\">\n        <div>\n          <p className=\"text-xs text-text-secondary\">Avg Property Price</p>\n          <p className=\"text-sm font-bold text-text-primary\">{formatINRCompact(area.avgPropertyPrice)}</p>\n        </div>\n        <div className=\"text-right\">\n          <p className=\"text-xs text-text-secondary\">Appreciation</p>\n          <p className=\"flex items-center justify-end gap-0.5 text-sm font-bold text-status-success-text\">\n            <ArrowUpRight className=\"h-3.5 w-3.5\" />\n            {area.appreciationRate}% YoY\n          </p>\n        </div>\n      </div>\n\n      {/* Upcoming Projects */}\n      {area.upcomingProjects > 0 && (\n        <div className=\"mt-3 flex items-center gap-1.5 text-xs text-text-secondary\">\n          <Building className=\"h-3 w-3\" />\n          {area.upcomingProjects} upcoming project{area.upcomingProjects > 1 ? 's' : ''}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function AreaInsightsPage() {\n  const pagination = useServerPagination(10);\n  const { data: areas, loading } = useAreaInsights(pagination.pagination);\n  const [isComparing, setIsComparing] = useState(false);\n  const [selectedForCompare, setSelectedForCompare] = useState<Set<string>>(new Set());\n\n  const toggleCompare = (id: string) => {\n    setSelectedForCompare((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else if (next.size < 3) {\n        next.add(id);\n      }\n      return next;\n    });\n  };\n\n  const comparedAreas = useMemo(() => {\n    return areas.filter((a) => selectedForCompare.has(a.id));\n  }, [areas, selectedForCompare]);\n\n  // Highlight the highest-scoring area on this page as the \"Top Pick\".\n  const topPickId = useMemo(() => {\n    if (areas.length === 0) return null;\n    const scoreOf = (a: AreaInsight) => a.safetyScore + a.connectivityScore + a.amenitiesScore;\n    return areas.reduce((best, a) => (scoreOf(a) > scoreOf(best) ? a : best)).id;\n  }, [areas]);\n\n  return (\n    <PageLayout\n      title=\"Area Insights\"\n      description=\"Explore neighborhoods, compare areas, and make informed decisions\"\n      purpose=\"Decide WHERE to buy or rent, not just what. Compare neighborhoods on safety, connectivity, amenities, schools, hospitals, green cover, prices, and appreciation — then pick up to three areas to compare side by side before you commit.\"\n      actions={\n        <button\n          onClick={() => {\n            setIsComparing(!isComparing);\n            if (isComparing) setSelectedForCompare(new Set());\n          }}\n          className={cn(\n            'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n            isComparing\n              ? 'bg-action-primary-bg text-action-primary-text'\n              : 'border border-border-subtle text-text-primary hover:bg-bg-sunken'\n          )}\n        >\n          <GitCompare className=\"h-3.5 w-3.5\" />\n          {isComparing ? `Comparing (${selectedForCompare.size})` : 'Compare Areas'}\n        </button>\n      }\n    >\n      {/* Comparison Summary — primary emphasis zone when comparing (one per page) */}\n      {isComparing && comparedAreas.length >= 2 && (\n        <EmphasisPanel className=\"p-4\">\n          <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Comparison Summary</h3>\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full text-xs\">\n              <thead>\n                <tr className=\"border-b border-border-subtle\">\n                  <th className=\"pb-2 pr-4 text-left text-text-secondary\">Metric</th>\n                  {comparedAreas.map((a) => (\n                    <th key={a.id} className=\"pb-2 pr-4 text-left font-semibold text-text-primary\">\n                      {a.areaName}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {[\n                  { label: 'Avg Price', render: (a: AreaInsight) => formatINRCompact(a.avgPropertyPrice) },\n                  { label: 'Rental Yield', render: (a: AreaInsight) => `${a.avgRentalYield}%` },\n                  { label: 'Appreciation', render: (a: AreaInsight) => `${a.appreciationRate}%` },\n                  { label: 'Safety Score', render: (a: AreaInsight) => `${a.safetyScore}/100` },\n                  { label: 'Connectivity', render: (a: AreaInsight) => `${a.connectivityScore}/100` },\n                  { label: 'Amenities', render: (a: AreaInsight) => `${a.amenitiesScore}/100` },\n                ].map((row) => (\n                  <tr key={row.label}>\n                    <td className=\"py-2 pr-4 text-text-secondary\">{row.label}</td>\n                    {comparedAreas.map((a) => (\n                      <td key={a.id} className=\"py-2 pr-4 font-medium text-text-primary\">\n                        {row.render(a)}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </EmphasisPanel>\n      )}\n\n      {/* Area Cards */}\n      {areas.length > 0 ? (\n        <>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            {areas.map((area) => (\n              <AreaCard\n                key={area.id}\n                area={area}\n                isComparing={isComparing}\n                isSelected={selectedForCompare.has(area.id)}\n                isTopPick={area.id === topPickId}\n                onToggleCompare={() => toggleCompare(area.id)}\n              />\n            ))}\n          </div>\n\n          {/* Pagination (server-side): working prev/next + page-size, no silent truncation */}\n          <Pagination\n            page={pagination.page}\n            pageSize={pagination.pageSize}\n            hasNextPage={areas.length >= pagination.pageSize}\n            hasPreviousPage={pagination.page > 1}\n            loading={loading}\n            onPageChange={pagination.setPage}\n            onPageSizeChange={pagination.setPageSize}\n          />\n        </>\n      ) : (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<MapPin className=\"h-12 w-12\" />}\n          title=\"No area insights available\"\n          description=\"Area insight data will appear here once available.\"\n        />\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AreaInsightsPage.js","names":[],"sources":["../../../../src/housingvista/pages/market/AreaInsightsPage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport {\n  MapPin,\n  GraduationCap,\n  Heart,\n  Users,\n  TrendingUp,\n  Building,\n  ArrowUpRight,\n  GitCompare,\n  Check,\n} from 'lucide-react';\nimport { EmphasisPanel, Pagination } from '@burdenoff/fe-libs/ui';\nimport { PageLayout, EmptyState } from '../../components';\nimport { useAreaInsights } from '../../hooks';\nimport { useServerPagination } from '../../hooks/useServerPagination';\nimport { cn, formatINRCompact, formatNumber } from '../../utils/helpers';\nimport type { AreaInsight } from '../../types';\nimport { useTrackPageView } from '../../hooks/useHousingVistaAnalytics';\n\nfunction gaugeColor(pct: number): string {\n  if (pct >= 0.8) return 'text-status-success-text';\n  if (pct >= 0.6) return 'text-status-info-text';\n  if (pct >= 0.4) return 'text-status-warning-text';\n  return 'text-status-error-text';\n}\n\n/**\n * Semicircle score gauge (0–max) — the arc is normalised via `pathLength=100`\n * so the fill is radius-independent. Matches the concept's gauge cluster.\n */\nfunction ScoreGauge({\n  score,\n  label,\n  suffix = '',\n  max = 100,\n}: {\n  score: number;\n  label: string;\n  suffix?: string;\n  max?: number;\n}) {\n  const pct = Math.max(0, Math.min(score / max, 1));\n  const arc = 'M5 46 A41 41 0 0 1 87 46';\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"relative\">\n        <svg viewBox=\"0 0 92 50\" className=\"h-11 w-[64px]\" aria-hidden=\"true\">\n          <path d={arc} fill=\"none\" strokeWidth={8} strokeLinecap=\"round\" className=\"stroke-bg-sunken\" />\n          <path\n            d={arc}\n            fill=\"none\"\n            strokeWidth={8}\n            strokeLinecap=\"round\"\n            stroke=\"currentColor\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={100 * (1 - pct)}\n            className={cn('transition-[stroke-dashoffset]', gaugeColor(pct))}\n          />\n        </svg>\n        <span className=\"absolute inset-x-0 bottom-0 text-center text-sm font-bold tabular-nums text-text-primary\">\n          {score}\n          {suffix}\n        </span>\n      </div>\n      <span className=\"mt-1 text-[10px] font-medium text-text-secondary\">{label}</span>\n    </div>\n  );\n}\n\nfunction AreaCard({\n  area,\n  isComparing,\n  isSelected,\n  isTopPick,\n  onToggleCompare,\n}: {\n  area: AreaInsight;\n  isComparing: boolean;\n  isSelected: boolean;\n  isTopPick: boolean;\n  onToggleCompare: () => void;\n}) {\n  const overallScore = Math.round((area.safetyScore + area.connectivityScore + area.amenitiesScore) / 3);\n  const overallPct = overallScore / 100;\n\n  return (\n    <div\n      className={cn(\n        'rounded-card border bg-bg-surface p-5 shadow-elevation-1 transition-[box-shadow,border-color]',\n        isSelected\n          ? 'border-action-primary-border ring-2 ring-action-primary-border/20'\n          : 'border-border-seam hover:border-border-strong hover:shadow-elevation-2'\n      )}\n    >\n      {/* Header */}\n      <div className=\"mb-4 flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <h3 className=\"text-base font-semibold text-text-primary\">{area.areaName}</h3>\n            {isTopPick && (\n              <span className=\"rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-status-success-text\">\n                Top Pick\n              </span>\n            )}\n          </div>\n          <p className=\"flex items-center gap-1 text-xs text-text-secondary\">\n            <MapPin className=\"h-3 w-3\" />\n            {area.city}\n          </p>\n          <p className=\"mt-1 text-xs text-text-secondary\">\n            Overall score{' '}\n            <span className={cn('font-semibold', gaugeColor(overallPct))}>{(overallScore / 10).toFixed(1)}/10</span>\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {isComparing && (\n            <button\n              onClick={onToggleCompare}\n              aria-pressed={isSelected}\n              aria-label={isSelected ? `Remove ${area.areaName} from comparison` : `Add ${area.areaName} to comparison`}\n              className={cn(\n                'flex h-7 w-7 items-center justify-center rounded-md border transition-colors',\n                isSelected\n                  ? 'border-action-primary-border bg-action-primary-bg text-action-primary-text'\n                  : 'border-border-subtle text-text-secondary hover:bg-bg-sunken'\n              )}\n            >\n              {isSelected ? <Check className=\"h-3.5 w-3.5\" /> : <GitCompare className=\"h-3.5 w-3.5\" />}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Score Gauges (mock parity) */}\n      <div className=\"mb-4 grid grid-cols-4 gap-1 rounded-lg bg-bg-sunken/40 py-3\">\n        <ScoreGauge score={area.safetyScore} label=\"Safety\" />\n        <ScoreGauge score={area.connectivityScore} label=\"Transport\" />\n        <ScoreGauge score={area.amenitiesScore} label=\"Amenities\" />\n        <ScoreGauge score={area.greenCoverPercent} label=\"Green\" suffix=\"%\" />\n      </div>\n\n      {/* Nearby Counts */}\n      <div className=\"mb-4 grid grid-cols-2 gap-2\">\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <GraduationCap className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Schools:</span>\n          <span className=\"font-semibold text-text-primary\">{area.schoolsNearby}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <Heart className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Hospitals:</span>\n          <span className=\"font-semibold text-text-primary\">{area.hospitalsNearby}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <Users className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Population:</span>\n          <span className=\"font-semibold text-text-primary\">{formatNumber(area.population)}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-bg-sunken/50 p-2 text-xs\">\n          <TrendingUp className=\"h-3.5 w-3.5 text-text-secondary\" />\n          <span className=\"text-text-secondary\">Yield:</span>\n          <span className=\"font-semibold text-text-primary\">{area.avgRentalYield}%</span>\n        </div>\n      </div>\n\n      {/* Price + Growth */}\n      <div className=\"flex items-center justify-between rounded-md bg-bg-sunken/50 p-3\">\n        <div>\n          <p className=\"text-xs text-text-secondary\">Avg Property Price</p>\n          <p className=\"text-sm font-bold text-text-primary\">{formatINRCompact(area.avgPropertyPrice)}</p>\n        </div>\n        <div className=\"text-right\">\n          <p className=\"text-xs text-text-secondary\">Appreciation</p>\n          <p className=\"flex items-center justify-end gap-0.5 text-sm font-bold text-status-success-text\">\n            <ArrowUpRight className=\"h-3.5 w-3.5\" />\n            {area.appreciationRate}% YoY\n          </p>\n        </div>\n      </div>\n\n      {/* Upcoming Projects */}\n      {area.upcomingProjects > 0 && (\n        <div className=\"mt-3 flex items-center gap-1.5 text-xs text-text-secondary\">\n          <Building className=\"h-3 w-3\" />\n          {area.upcomingProjects} upcoming project{area.upcomingProjects > 1 ? 's' : ''}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function AreaInsightsPage() {\n  useTrackPageView('housingvista.market_analytics.area_viewed');\n  const pagination = useServerPagination(10);\n  const { data: areas, loading } = useAreaInsights(pagination.pagination);\n  const [isComparing, setIsComparing] = useState(false);\n  const [selectedForCompare, setSelectedForCompare] = useState<Set<string>>(new Set());\n\n  const toggleCompare = (id: string) => {\n    setSelectedForCompare((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else if (next.size < 3) {\n        next.add(id);\n      }\n      return next;\n    });\n  };\n\n  const comparedAreas = useMemo(() => {\n    return areas.filter((a) => selectedForCompare.has(a.id));\n  }, [areas, selectedForCompare]);\n\n  // Highlight the highest-scoring area on this page as the \"Top Pick\".\n  const topPickId = useMemo(() => {\n    if (areas.length === 0) return null;\n    const scoreOf = (a: AreaInsight) => a.safetyScore + a.connectivityScore + a.amenitiesScore;\n    return areas.reduce((best, a) => (scoreOf(a) > scoreOf(best) ? a : best)).id;\n  }, [areas]);\n\n  return (\n    <PageLayout\n      title=\"Area Insights\"\n      description=\"Explore neighborhoods, compare areas, and make informed decisions\"\n      purpose=\"Decide WHERE to buy or rent, not just what. Compare neighborhoods on safety, connectivity, amenities, schools, hospitals, green cover, prices, and appreciation — then pick up to three areas to compare side by side before you commit.\"\n      actions={\n        <button\n          onClick={() => {\n            setIsComparing(!isComparing);\n            if (isComparing) setSelectedForCompare(new Set());\n          }}\n          className={cn(\n            'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n            isComparing\n              ? 'bg-action-primary-bg text-action-primary-text'\n              : 'border border-border-subtle text-text-primary hover:bg-bg-sunken'\n          )}\n        >\n          <GitCompare className=\"h-3.5 w-3.5\" />\n          {isComparing ? `Comparing (${selectedForCompare.size})` : 'Compare Areas'}\n        </button>\n      }\n    >\n      {/* Comparison Summary — primary emphasis zone when comparing (one per page) */}\n      {isComparing && comparedAreas.length >= 2 && (\n        <EmphasisPanel className=\"p-4\">\n          <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Comparison Summary</h3>\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full text-xs\">\n              <thead>\n                <tr className=\"border-b border-border-subtle\">\n                  <th className=\"pb-2 pr-4 text-left text-text-secondary\">Metric</th>\n                  {comparedAreas.map((a) => (\n                    <th key={a.id} className=\"pb-2 pr-4 text-left font-semibold text-text-primary\">\n                      {a.areaName}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {[\n                  { label: 'Avg Price', render: (a: AreaInsight) => formatINRCompact(a.avgPropertyPrice) },\n                  { label: 'Rental Yield', render: (a: AreaInsight) => `${a.avgRentalYield}%` },\n                  { label: 'Appreciation', render: (a: AreaInsight) => `${a.appreciationRate}%` },\n                  { label: 'Safety Score', render: (a: AreaInsight) => `${a.safetyScore}/100` },\n                  { label: 'Connectivity', render: (a: AreaInsight) => `${a.connectivityScore}/100` },\n                  { label: 'Amenities', render: (a: AreaInsight) => `${a.amenitiesScore}/100` },\n                ].map((row) => (\n                  <tr key={row.label}>\n                    <td className=\"py-2 pr-4 text-text-secondary\">{row.label}</td>\n                    {comparedAreas.map((a) => (\n                      <td key={a.id} className=\"py-2 pr-4 font-medium text-text-primary\">\n                        {row.render(a)}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </EmphasisPanel>\n      )}\n\n      {/* Area Cards */}\n      {areas.length > 0 ? (\n        <>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            {areas.map((area) => (\n              <AreaCard\n                key={area.id}\n                area={area}\n                isComparing={isComparing}\n                isSelected={selectedForCompare.has(area.id)}\n                isTopPick={area.id === topPickId}\n                onToggleCompare={() => toggleCompare(area.id)}\n              />\n            ))}\n          </div>\n\n          {/* Pagination (server-side): working prev/next + page-size, no silent truncation */}\n          <Pagination\n            page={pagination.page}\n            pageSize={pagination.pageSize}\n            hasNextPage={areas.length >= pagination.pageSize}\n            hasPreviousPage={pagination.page > 1}\n            loading={loading}\n            onPageChange={pagination.setPage}\n            onPageSizeChange={pagination.setPageSize}\n          />\n        </>\n      ) : (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<MapPin className=\"h-12 w-12\" />}\n          title=\"No area insights available\"\n          description=\"Area insight data will appear here once available.\"\n        />\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/housingvista/pages/market/MarketAnalyticsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarketAnalyticsPage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/market/MarketAnalyticsPage.tsx"],"names":[],"mappings":"AA0CA,wBAAgB,mBAAmB,gCA+TlC"}
+{"version":3,"file":"MarketAnalyticsPage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/market/MarketAnalyticsPage.tsx"],"names":[],"mappings":"AA2CA,wBAAgB,mBAAmB,gCAgUlC"}