@burdenoff/microfe-housingvista 2026.510.105

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

@@ -0,0 +1,278 @@
+import { cn as e, formatCurrency 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 "../../components/index.js";
+import { useAreaInsights as a } from "../../hooks/index.js";
+import { useMemo as o, useState as s } from "react";
+import { ArrowUpRight as c, Building as l, Check as u, GitCompare as d, GraduationCap as f, Heart as p, MapPin as m, Shield as h, ShoppingBag as g, Train as _, Trees as v, Users as y } from "lucide-react";
+import { useNavigate as b } from "react-router-dom";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/housingvista/pages/market/AreaInsightsPage.tsx
+function C({ score: t, label: n, icon: r, max: i = 100 }) {
+	let a = Math.min(t / i * 100, 100);
+	return /* @__PURE__ */ S("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ x("span", {
+			className: "text-muted-foreground",
+			children: r
+		}), /* @__PURE__ */ S("div", {
+			className: "flex-1",
+			children: [/* @__PURE__ */ S("div", {
+				className: "flex items-center justify-between mb-1",
+				children: [/* @__PURE__ */ x("span", {
+					className: "text-xs text-muted-foreground",
+					children: n
+				}), /* @__PURE__ */ x("span", {
+					className: "text-xs font-semibold text-foreground",
+					children: t
+				})]
+			}), /* @__PURE__ */ x("div", {
+				className: "h-1.5 w-full rounded-full bg-muted",
+				children: /* @__PURE__ */ x("div", {
+					className: e("h-full rounded-full transition-all", a >= 80 ? "bg-emerald-500" : a >= 60 ? "bg-blue-500" : a >= 40 ? "bg-amber-500" : "bg-red-500"),
+					style: { width: `${a}%` }
+				})
+			})]
+		})]
+	});
+}
+function w({ area: r, isComparing: i, isSelected: a, onToggleCompare: o }) {
+	b();
+	let s = Math.round((r.safetyScore + r.connectivityScore + r.amenitiesScore) / 3);
+	return /* @__PURE__ */ S("div", {
+		className: e("rounded-lg border bg-card p-5 shadow-sm transition-all", a ? "border-blue-500 ring-2 ring-blue-500/20" : "border-border hover:shadow-md"),
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: "mb-4 flex items-start justify-between",
+				children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h3", {
+					className: "text-base font-semibold text-foreground",
+					children: r.areaName
+				}), /* @__PURE__ */ S("p", {
+					className: "flex items-center gap-1 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ x(m, { className: "h-3 w-3" }), r.city]
+				})] }), /* @__PURE__ */ S("div", {
+					className: "flex items-center gap-2",
+					children: [i && /* @__PURE__ */ x("button", {
+						onClick: o,
+						className: e("flex h-7 w-7 items-center justify-center rounded-md border transition-colors", a ? "border-blue-500 bg-blue-500 text-white" : "border-border text-muted-foreground hover:bg-muted"),
+						children: x(a ? u : d, { className: "h-3.5 w-3.5" })
+					}), /* @__PURE__ */ S("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ x("div", {
+							className: e("flex h-12 w-12 items-center justify-center rounded-full text-lg font-bold", s >= 80 ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : s >= 60 ? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400" : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"),
+							children: s
+						}), /* @__PURE__ */ x("p", {
+							className: "mt-0.5 text-[10px] text-muted-foreground",
+							children: "Score"
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "mb-4 space-y-2.5",
+				children: [
+					/* @__PURE__ */ x(C, {
+						score: r.safetyScore,
+						label: "Safety",
+						icon: /* @__PURE__ */ x(h, { className: "h-3.5 w-3.5" })
+					}),
+					/* @__PURE__ */ x(C, {
+						score: r.connectivityScore,
+						label: "Transport",
+						icon: /* @__PURE__ */ x(_, { className: "h-3.5 w-3.5" })
+					}),
+					/* @__PURE__ */ x(C, {
+						score: r.amenitiesScore,
+						label: "Amenities",
+						icon: /* @__PURE__ */ x(g, { className: "h-3.5 w-3.5" })
+					})
+				]
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "mb-4 grid grid-cols-2 gap-2",
+				children: [
+					/* @__PURE__ */ S("div", {
+						className: "flex items-center gap-2 rounded-md bg-muted/50 p-2 text-xs",
+						children: [
+							/* @__PURE__ */ x(f, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+							/* @__PURE__ */ x("span", {
+								className: "text-muted-foreground",
+								children: "Schools:"
+							}),
+							/* @__PURE__ */ x("span", {
+								className: "font-semibold text-foreground",
+								children: r.schoolsNearby
+							})
+						]
+					}),
+					/* @__PURE__ */ S("div", {
+						className: "flex items-center gap-2 rounded-md bg-muted/50 p-2 text-xs",
+						children: [
+							/* @__PURE__ */ x(p, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+							/* @__PURE__ */ x("span", {
+								className: "text-muted-foreground",
+								children: "Hospitals:"
+							}),
+							/* @__PURE__ */ x("span", {
+								className: "font-semibold text-foreground",
+								children: r.hospitalsNearby
+							})
+						]
+					}),
+					/* @__PURE__ */ S("div", {
+						className: "flex items-center gap-2 rounded-md bg-muted/50 p-2 text-xs",
+						children: [
+							/* @__PURE__ */ x(y, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+							/* @__PURE__ */ x("span", {
+								className: "text-muted-foreground",
+								children: "Population:"
+							}),
+							/* @__PURE__ */ x("span", {
+								className: "font-semibold text-foreground",
+								children: n(r.population)
+							})
+						]
+					}),
+					/* @__PURE__ */ S("div", {
+						className: "flex items-center gap-2 rounded-md bg-muted/50 p-2 text-xs",
+						children: [
+							/* @__PURE__ */ x(v, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+							/* @__PURE__ */ x("span", {
+								className: "text-muted-foreground",
+								children: "Green:"
+							}),
+							/* @__PURE__ */ S("span", {
+								className: "font-semibold text-foreground",
+								children: [r.greenCoverPercent, "%"]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "flex items-center justify-between rounded-md bg-muted/50 p-3",
+				children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+					className: "text-xs text-muted-foreground",
+					children: "Avg Property Price"
+				}), /* @__PURE__ */ x("p", {
+					className: "text-sm font-bold text-foreground",
+					children: t(r.avgPropertyPrice)
+				})] }), /* @__PURE__ */ S("div", {
+					className: "text-right",
+					children: [/* @__PURE__ */ x("p", {
+						className: "text-xs text-muted-foreground",
+						children: "Appreciation"
+					}), /* @__PURE__ */ S("p", {
+						className: "flex items-center gap-0.5 text-sm font-bold text-emerald-600 dark:text-emerald-400",
+						children: [
+							/* @__PURE__ */ x(c, { className: "h-3.5 w-3.5" }),
+							r.appreciationRate,
+							"%"
+						]
+					})]
+				})]
+			}),
+			r.upcomingProjects > 0 && /* @__PURE__ */ S("div", {
+				className: "mt-3 flex items-center gap-1.5 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ x(l, { className: "h-3 w-3" }),
+					r.upcomingProjects,
+					" upcoming project",
+					r.upcomingProjects > 1 ? "s" : ""
+				]
+			})
+		]
+	});
+}
+function T() {
+	b();
+	let { data: n } = a(), [c, l] = s(!1), [u, f] = s(/* @__PURE__ */ new Set()), p = (e) => {
+		f((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.size < 3 && n.add(e), n;
+		});
+	}, h = o(() => n.filter((e) => u.has(e.id)), [n, u]);
+	return /* @__PURE__ */ S(r, {
+		title: "Area Insights",
+		description: "Explore neighborhoods, compare areas, and make informed decisions",
+		actions: /* @__PURE__ */ S("button", {
+			onClick: () => {
+				l(!c), c && 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", c ? "bg-foreground text-background" : "border border-border text-foreground hover:bg-muted"),
+			children: [/* @__PURE__ */ x(d, { className: "h-3.5 w-3.5" }), c ? `Comparing (${u.size})` : "Compare Areas"]
+		}),
+		children: [c && h.length >= 2 && /* @__PURE__ */ S("div", {
+			className: "rounded-lg border border-blue-200 bg-blue-50/50 p-4 dark:border-blue-900/50 dark:bg-blue-950/20",
+			children: [/* @__PURE__ */ x("h3", {
+				className: "mb-3 text-sm font-semibold text-foreground",
+				children: "Comparison Summary"
+			}), /* @__PURE__ */ x("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ S("table", {
+					className: "w-full text-xs",
+					children: [/* @__PURE__ */ x("thead", { children: /* @__PURE__ */ S("tr", {
+						className: "border-b border-border",
+						children: [/* @__PURE__ */ x("th", {
+							className: "pb-2 pr-4 text-left text-muted-foreground",
+							children: "Metric"
+						}), h.map((e) => /* @__PURE__ */ x("th", {
+							className: "pb-2 pr-4 text-left font-semibold text-foreground",
+							children: e.areaName
+						}, e.id))]
+					}) }), /* @__PURE__ */ x("tbody", {
+						className: "divide-y divide-border",
+						children: [
+							{
+								label: "Avg Price",
+								render: (e) => t(e.avgPropertyPrice)
+							},
+							{
+								label: "Rental Yield",
+								render: (e) => `${e.avgRentalYield}%`
+							},
+							{
+								label: "Appreciation",
+								render: (e) => `${e.appreciationRate}%`
+							},
+							{
+								label: "Safety Score",
+								render: (e) => `${e.safetyScore}/100`
+							},
+							{
+								label: "Connectivity",
+								render: (e) => `${e.connectivityScore}/100`
+							},
+							{
+								label: "Amenities",
+								render: (e) => `${e.amenitiesScore}/100`
+							}
+						].map((e) => /* @__PURE__ */ S("tr", { children: [/* @__PURE__ */ x("td", {
+							className: "py-2 pr-4 text-muted-foreground",
+							children: e.label
+						}), h.map((t) => /* @__PURE__ */ x("td", {
+							className: "py-2 pr-4 font-medium text-foreground",
+							children: e.render(t)
+						}, t.id))] }, e.label))
+					})]
+				})
+			})]
+		}), n.length > 0 ? /* @__PURE__ */ x("div", {
+			className: "grid gap-4 sm:grid-cols-2",
+			children: n.map((e) => /* @__PURE__ */ x(w, {
+				area: e,
+				isComparing: c,
+				isSelected: u.has(e.id),
+				onToggleCompare: () => p(e.id)
+			}, e.id))
+		}) : /* @__PURE__ */ x(i, {
+			icon: /* @__PURE__ */ x(m, { className: "h-12 w-12" }),
+			title: "No area insights available",
+			description: "Area insight data will appear here once available."
+		})]
+	});
+}
+//#endregion
+export { T as AreaInsightsPage };
+
+//# sourceMappingURL=AreaInsightsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AreaInsightsPage.js","names":[],"sources":["../../../../src/housingvista/pages/market/AreaInsightsPage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  MapPin,\n  Shield,\n  Train,\n  ShoppingBag,\n  GraduationCap,\n  Heart,\n  TrendingUp,\n  Users,\n  Trees,\n  Building,\n  ArrowUpRight,\n  GitCompare,\n  Check,\n} from 'lucide-react';\nimport { PageLayout, EmptyState } from '../../components';\nimport { useAreaInsights } from '../../hooks';\nimport { cn, formatCurrency, formatNumber } from '../../utils/helpers';\nimport type { AreaInsight } from '../../types';\n\nfunction ScoreBar({\n  score,\n  label,\n  icon,\n  max = 100,\n}: {\n  score: number;\n  label: string;\n  icon: React.ReactNode;\n  max?: number;\n}) {\n  const pct = Math.min((score / max) * 100, 100);\n  const color = pct >= 80 ? 'bg-emerald-500' : pct >= 60 ? 'bg-blue-500' : pct >= 40 ? 'bg-amber-500' : 'bg-red-500';\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className=\"text-muted-foreground\">{icon}</span>\n      <div className=\"flex-1\">\n        <div className=\"flex items-center justify-between mb-1\">\n          <span className=\"text-xs text-muted-foreground\">{label}</span>\n          <span className=\"text-xs font-semibold text-foreground\">{score}</span>\n        </div>\n        <div className=\"h-1.5 w-full rounded-full bg-muted\">\n          <div className={cn('h-full rounded-full transition-all', color)} style={{ width: `${pct}%` }} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction AreaCard({\n  area,\n  isComparing,\n  isSelected,\n  onToggleCompare,\n}: {\n  area: AreaInsight;\n  isComparing: boolean;\n  isSelected: boolean;\n  onToggleCompare: () => void;\n}) {\n  const navigate = useNavigate();\n  const overallScore = Math.round((area.safetyScore + area.connectivityScore + area.amenitiesScore) / 3);\n\n  return (\n    <div\n      className={cn(\n        'rounded-lg border bg-card p-5 shadow-sm transition-all',\n        isSelected ? 'border-blue-500 ring-2 ring-blue-500/20' : 'border-border hover:shadow-md'\n      )}\n    >\n      {/* Header */}\n      <div className=\"mb-4 flex items-start justify-between\">\n        <div>\n          <h3 className=\"text-base font-semibold text-foreground\">{area.areaName}</h3>\n          <p className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n            <MapPin className=\"h-3 w-3\" />\n            {area.city}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {isComparing && (\n            <button\n              onClick={onToggleCompare}\n              className={cn(\n                'flex h-7 w-7 items-center justify-center rounded-md border transition-colors',\n                isSelected\n                  ? 'border-blue-500 bg-blue-500 text-white'\n                  : 'border-border text-muted-foreground hover:bg-muted'\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 className=\"text-center\">\n            <div\n              className={cn(\n                'flex h-12 w-12 items-center justify-center rounded-full text-lg font-bold',\n                overallScore >= 80\n                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'\n                  : overallScore >= 60\n                    ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n                    : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'\n              )}\n            >\n              {overallScore}\n            </div>\n            <p className=\"mt-0.5 text-[10px] text-muted-foreground\">Score</p>\n          </div>\n        </div>\n      </div>\n\n      {/* Score Bars */}\n      <div className=\"mb-4 space-y-2.5\">\n        <ScoreBar score={area.safetyScore} label=\"Safety\" icon={<Shield className=\"h-3.5 w-3.5\" />} />\n        <ScoreBar score={area.connectivityScore} label=\"Transport\" icon={<Train className=\"h-3.5 w-3.5\" />} />\n        <ScoreBar score={area.amenitiesScore} label=\"Amenities\" icon={<ShoppingBag className=\"h-3.5 w-3.5\" />} />\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-muted/50 p-2 text-xs\">\n          <GraduationCap className=\"h-3.5 w-3.5 text-muted-foreground\" />\n          <span className=\"text-muted-foreground\">Schools:</span>\n          <span className=\"font-semibold text-foreground\">{area.schoolsNearby}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-muted/50 p-2 text-xs\">\n          <Heart className=\"h-3.5 w-3.5 text-muted-foreground\" />\n          <span className=\"text-muted-foreground\">Hospitals:</span>\n          <span className=\"font-semibold text-foreground\">{area.hospitalsNearby}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-muted/50 p-2 text-xs\">\n          <Users className=\"h-3.5 w-3.5 text-muted-foreground\" />\n          <span className=\"text-muted-foreground\">Population:</span>\n          <span className=\"font-semibold text-foreground\">{formatNumber(area.population)}</span>\n        </div>\n        <div className=\"flex items-center gap-2 rounded-md bg-muted/50 p-2 text-xs\">\n          <Trees className=\"h-3.5 w-3.5 text-muted-foreground\" />\n          <span className=\"text-muted-foreground\">Green:</span>\n          <span className=\"font-semibold text-foreground\">{area.greenCoverPercent}%</span>\n        </div>\n      </div>\n\n      {/* Price + Growth */}\n      <div className=\"flex items-center justify-between rounded-md bg-muted/50 p-3\">\n        <div>\n          <p className=\"text-xs text-muted-foreground\">Avg Property Price</p>\n          <p className=\"text-sm font-bold text-foreground\">{formatCurrency(area.avgPropertyPrice)}</p>\n        </div>\n        <div className=\"text-right\">\n          <p className=\"text-xs text-muted-foreground\">Appreciation</p>\n          <p className=\"flex items-center gap-0.5 text-sm font-bold text-emerald-600 dark:text-emerald-400\">\n            <ArrowUpRight className=\"h-3.5 w-3.5\" />\n            {area.appreciationRate}%\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-muted-foreground\">\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 navigate = useNavigate();\n  const { data: areas } = useAreaInsights();\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  return (\n    <PageLayout\n      title=\"Area Insights\"\n      description=\"Explore neighborhoods, compare areas, and make informed decisions\"\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 ? 'bg-foreground text-background' : 'border border-border text-foreground hover:bg-muted'\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 */}\n      {isComparing && comparedAreas.length >= 2 && (\n        <div className=\"rounded-lg border border-blue-200 bg-blue-50/50 p-4 dark:border-blue-900/50 dark:bg-blue-950/20\">\n          <h3 className=\"mb-3 text-sm font-semibold text-foreground\">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\">\n                  <th className=\"pb-2 pr-4 text-left text-muted-foreground\">Metric</th>\n                  {comparedAreas.map((a) => (\n                    <th key={a.id} className=\"pb-2 pr-4 text-left font-semibold text-foreground\">\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) => formatCurrency(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-muted-foreground\">{row.label}</td>\n                    {comparedAreas.map((a) => (\n                      <td key={a.id} className=\"py-2 pr-4 font-medium text-foreground\">\n                        {row.render(a)}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      )}\n\n      {/* Area Cards */}\n      {areas.length > 0 ? (\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              onToggleCompare={() => toggleCompare(area.id)}\n            />\n          ))}\n        </div>\n      ) : (\n        <EmptyState\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

@@ -0,0 +1,2 @@
+export declare function MarketAnalyticsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MarketAnalyticsPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketAnalyticsPage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/market/MarketAnalyticsPage.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,mBAAmB,4CA6NlC"}

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

@@ -0,0 +1,296 @@
+import { cn as e, formatCurrency as t } from "../../utils/helpers.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { StatCard as r } from "../../components/StatCard.js";
+import { DataTable as i } from "../../components/DataTable.js";
+import { ChartCard as a } from "../../components/ChartCard.js";
+import "../../components/index.js";
+import { useMarketTrends as o } from "../../hooks/index.js";
+import { Legend as s } from "../../../node_modules/recharts/es6/component/Legend.js";
+import { Tooltip as c } from "../../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as l } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { CartesianGrid as u } from "../../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { Line as d } from "../../../node_modules/recharts/es6/cartesian/Line.js";
+import { Area as f } from "../../../node_modules/recharts/es6/cartesian/Area.js";
+import { XAxis as p } from "../../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as m } from "../../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { LineChart as h } from "../../../node_modules/recharts/es6/chart/LineChart.js";
+import { AreaChart as g } from "../../../node_modules/recharts/es6/chart/AreaChart.js";
+import { useMemo as _, useState as v } from "react";
+import { ArrowDownRight as y, ArrowUpRight as b, Building as x, Clock as S, DollarSign as C, TrendingDown as w, TrendingUp as T } from "lucide-react";
+import { useNavigate as E } from "react-router-dom";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+//#region src/housingvista/pages/market/MarketAnalyticsPage.tsx
+function k() {
+	E();
+	let { data: k } = o(), [A, j] = v("price"), M = _(() => {
+		if (k.length === 0) return {
+			avgPrice: 0,
+			priceChange: 0,
+			totalListings: 0,
+			avgDaysOnMarket: 0
+		};
+		let e = k[k.length - 1];
+		return k.length > 1 && k[k.length - 2], {
+			avgPrice: e.avgPrice,
+			priceChange: e.priceChangePercent,
+			totalListings: Math.round(e.supplyIndex * 50),
+			avgDaysOnMarket: Math.round(100 - e.demandIndex + 20)
+		};
+	}, [k]), N = _(() => k.map((e) => ({
+		...e,
+		monthLabel: (/* @__PURE__ */ new Date(e.month + "-01")).toLocaleDateString("en-US", {
+			month: "short",
+			year: "2-digit"
+		})
+	})), [k]);
+	return /* @__PURE__ */ O(n, {
+		title: "Market Analytics",
+		description: "Track market trends, price movements, and demand-supply dynamics",
+		children: [
+			/* @__PURE__ */ O("div", {
+				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ D(r, {
+						label: "Average Price",
+						value: M.avgPrice,
+						prefix: "$",
+						icon: /* @__PURE__ */ D(C, { className: "h-5 w-5 text-blue-500" }),
+						trend: M.priceChange >= 0 ? "up" : "down",
+						change: M.priceChange
+					}),
+					/* @__PURE__ */ D(r, {
+						label: "Price Change",
+						value: `${M.priceChange >= 0 ? "+" : ""}${M.priceChange}%`,
+						icon: M.priceChange >= 0 ? /* @__PURE__ */ D(T, { className: "h-5 w-5 text-emerald-500" }) : /* @__PURE__ */ D(w, { className: "h-5 w-5 text-red-500" })
+					}),
+					/* @__PURE__ */ D(r, {
+						label: "Properties Listed",
+						value: M.totalListings,
+						icon: /* @__PURE__ */ D(x, { className: "h-5 w-5 text-purple-500" })
+					}),
+					/* @__PURE__ */ D(r, {
+						label: "Avg Days on Market",
+						value: `${M.avgDaysOnMarket}`,
+						unit: "days",
+						icon: /* @__PURE__ */ D(S, { className: "h-5 w-5 text-amber-500" })
+					})
+				]
+			}),
+			/* @__PURE__ */ D(a, {
+				title: "Market Trends",
+				description: "Monthly price, rent, and demand trends",
+				actions: /* @__PURE__ */ D("div", {
+					className: "flex gap-1",
+					children: [
+						"price",
+						"rent",
+						"demand"
+					].map((t) => /* @__PURE__ */ D("button", {
+						onClick: () => j(t),
+						className: e("rounded-md px-2.5 py-1 text-xs font-medium transition-colors capitalize", A === t ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted"),
+						children: t
+					}, t))
+				}),
+				children: /* @__PURE__ */ D("div", {
+					className: "h-72",
+					children: /* @__PURE__ */ D(l, {
+						width: "100%",
+						height: "100%",
+						children: A === "price" ? /* @__PURE__ */ O(g, {
+							data: N,
+							children: [
+								/* @__PURE__ */ D("defs", { children: /* @__PURE__ */ O("linearGradient", {
+									id: "priceGrad",
+									x1: "0",
+									y1: "0",
+									x2: "0",
+									y2: "1",
+									children: [/* @__PURE__ */ D("stop", {
+										offset: "5%",
+										stopColor: "hsl(var(--chart-1, 220 70% 50%))",
+										stopOpacity: .3
+									}), /* @__PURE__ */ D("stop", {
+										offset: "95%",
+										stopColor: "hsl(var(--chart-1, 220 70% 50%))",
+										stopOpacity: 0
+									})]
+								}) }),
+								/* @__PURE__ */ D(u, {
+									strokeDasharray: "3 3",
+									className: "stroke-border"
+								}),
+								/* @__PURE__ */ D(p, {
+									dataKey: "monthLabel",
+									tick: { fontSize: 11 },
+									className: "text-muted-foreground"
+								}),
+								/* @__PURE__ */ D(m, {
+									tick: { fontSize: 11 },
+									tickFormatter: (e) => `$${(e / 1e3).toFixed(0)}K`,
+									className: "text-muted-foreground"
+								}),
+								/* @__PURE__ */ D(c, {
+									formatter: (e) => [t(e), "Avg Price"],
+									labelClassName: "text-foreground"
+								}),
+								/* @__PURE__ */ D(f, {
+									type: "monotone",
+									dataKey: "avgPrice",
+									stroke: "hsl(var(--chart-1, 220 70% 50%))",
+									fill: "url(#priceGrad)",
+									strokeWidth: 2
+								})
+							]
+						}) : A === "rent" ? /* @__PURE__ */ O(h, {
+							data: N,
+							children: [
+								/* @__PURE__ */ D(u, {
+									strokeDasharray: "3 3",
+									className: "stroke-border"
+								}),
+								/* @__PURE__ */ D(p, {
+									dataKey: "monthLabel",
+									tick: { fontSize: 11 },
+									className: "text-muted-foreground"
+								}),
+								/* @__PURE__ */ D(m, {
+									tick: { fontSize: 11 },
+									tickFormatter: (e) => `$${e}`,
+									className: "text-muted-foreground"
+								}),
+								/* @__PURE__ */ D(c, { formatter: (e) => [t(e), "Avg Rent"] }),
+								/* @__PURE__ */ D(d, {
+									type: "monotone",
+									dataKey: "avgRent",
+									stroke: "hsl(var(--chart-2, 150 60% 40%))",
+									strokeWidth: 2,
+									dot: { r: 3 }
+								})
+							]
+						}) : /* @__PURE__ */ O(h, {
+							data: N,
+							children: [
+								/* @__PURE__ */ D(u, {
+									strokeDasharray: "3 3",
+									className: "stroke-border"
+								}),
+								/* @__PURE__ */ D(p, {
+									dataKey: "monthLabel",
+									tick: { fontSize: 11 },
+									className: "text-muted-foreground"
+								}),
+								/* @__PURE__ */ D(m, {
+									tick: { fontSize: 11 },
+									className: "text-muted-foreground"
+								}),
+								/* @__PURE__ */ D(c, {}),
+								/* @__PURE__ */ D(s, {}),
+								/* @__PURE__ */ D(d, {
+									type: "monotone",
+									dataKey: "demandIndex",
+									stroke: "hsl(var(--chart-1, 220 70% 50%))",
+									name: "Demand",
+									strokeWidth: 2,
+									dot: { r: 3 }
+								}),
+								/* @__PURE__ */ D(d, {
+									type: "monotone",
+									dataKey: "supplyIndex",
+									stroke: "hsl(var(--chart-3, 30 80% 55%))",
+									name: "Supply",
+									strokeWidth: 2,
+									dot: { r: 3 }
+								})
+							]
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h2", {
+				className: "mb-3 text-lg font-semibold text-foreground",
+				children: "Monthly Comparison"
+			}), /* @__PURE__ */ D(i, {
+				columns: [
+					{
+						key: "monthLabel",
+						header: "Month",
+						render: (e) => /* @__PURE__ */ D("span", {
+							className: "font-medium text-foreground",
+							children: e.monthLabel
+						})
+					},
+					{
+						key: "avgPrice",
+						header: "Avg Price",
+						render: (e) => /* @__PURE__ */ D("span", {
+							className: "text-foreground",
+							children: t(e.avgPrice)
+						})
+					},
+					{
+						key: "avgRent",
+						header: "Avg Rent",
+						render: (e) => /* @__PURE__ */ D("span", {
+							className: "text-foreground",
+							children: t(e.avgRent)
+						})
+					},
+					{
+						key: "priceChangePercent",
+						header: "Change %",
+						render: (t) => /* @__PURE__ */ O("span", {
+							className: e("inline-flex items-center gap-0.5 text-xs font-medium", t.priceChangePercent >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"),
+							children: [
+								t.priceChangePercent >= 0 ? /* @__PURE__ */ D(b, { className: "h-3 w-3" }) : /* @__PURE__ */ D(y, { className: "h-3 w-3" }),
+								t.priceChangePercent > 0 ? "+" : "",
+								t.priceChangePercent,
+								"%"
+							]
+						})
+					},
+					{
+						key: "demandIndex",
+						header: "Demand",
+						render: (e) => /* @__PURE__ */ O("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ D("div", {
+								className: "h-1.5 w-16 rounded-full bg-muted",
+								children: /* @__PURE__ */ D("div", {
+									className: "h-full rounded-full bg-blue-500",
+									style: { width: `${e.demandIndex}%` }
+								})
+							}), /* @__PURE__ */ D("span", {
+								className: "text-xs text-muted-foreground",
+								children: e.demandIndex
+							})]
+						})
+					},
+					{
+						key: "supplyIndex",
+						header: "Supply",
+						render: (e) => /* @__PURE__ */ O("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ D("div", {
+								className: "h-1.5 w-16 rounded-full bg-muted",
+								children: /* @__PURE__ */ D("div", {
+									className: "h-full rounded-full bg-amber-500",
+									style: { width: `${e.supplyIndex}%` }
+								})
+							}), /* @__PURE__ */ D("span", {
+								className: "text-xs text-muted-foreground",
+								children: e.supplyIndex
+							})]
+						})
+					}
+				],
+				data: N,
+				keyField: "month",
+				pageSize: 6
+			})] })
+		]
+	});
+}
+//#endregion
+export { k as MarketAnalyticsPage };
+
+//# sourceMappingURL=MarketAnalyticsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketAnalyticsPage.js","names":[],"sources":["../../../../src/housingvista/pages/market/MarketAnalyticsPage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  TrendingUp,\n  TrendingDown,\n  DollarSign,\n  BarChart3,\n  Building,\n  Clock,\n  ArrowUpRight,\n  ArrowDownRight,\n} from 'lucide-react';\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n  AreaChart,\n  Area,\n} from 'recharts';\nimport { PageLayout, StatCard, ChartCard, DataTable } from '../../components';\nimport type { Column } from '../../components';\nimport { useMarketTrends } from '../../hooks';\nimport { cn, formatCurrency, formatNumber } from '../../utils/helpers';\nimport type { MarketTrend } from '../../types';\n\nexport function MarketAnalyticsPage() {\n  const navigate = useNavigate();\n  const { data: trends } = useMarketTrends();\n  const [chartType, setChartType] = useState<'price' | 'rent' | 'demand'>('price');\n\n  // Compute aggregate stats from trend data\n  const stats = useMemo(() => {\n    if (trends.length === 0) return { avgPrice: 0, priceChange: 0, totalListings: 0, avgDaysOnMarket: 0 };\n    const latest = trends[trends.length - 1];\n    const previous = trends.length > 1 ? trends[trends.length - 2] : latest;\n    const avgPrice = latest.avgPrice;\n    const priceChange = latest.priceChangePercent;\n    // Derive from supply index\n    const totalListings = Math.round(latest.supplyIndex * 50);\n    const avgDaysOnMarket = Math.round(100 - latest.demandIndex + 20);\n    return { avgPrice, priceChange, totalListings, avgDaysOnMarket };\n  }, [trends]);\n\n  // Format chart data for month labels\n  const chartData = useMemo(() => {\n    return trends.map((t) => ({\n      ...t,\n      monthLabel: new Date(t.month + '-01').toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),\n    }));\n  }, [trends]);\n\n  // Table columns\n  const columns: Column<MarketTrend & { monthLabel: string }>[] = [\n    {\n      key: 'monthLabel',\n      header: 'Month',\n      render: (item) => <span className=\"font-medium text-foreground\">{item.monthLabel}</span>,\n    },\n    {\n      key: 'avgPrice',\n      header: 'Avg Price',\n      render: (item) => <span className=\"text-foreground\">{formatCurrency(item.avgPrice)}</span>,\n    },\n    {\n      key: 'avgRent',\n      header: 'Avg Rent',\n      render: (item) => <span className=\"text-foreground\">{formatCurrency(item.avgRent)}</span>,\n    },\n    {\n      key: 'priceChangePercent',\n      header: 'Change %',\n      render: (item) => (\n        <span\n          className={cn(\n            'inline-flex items-center gap-0.5 text-xs font-medium',\n            item.priceChangePercent >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'\n          )}\n        >\n          {item.priceChangePercent >= 0 ? <ArrowUpRight className=\"h-3 w-3\" /> : <ArrowDownRight className=\"h-3 w-3\" />}\n          {item.priceChangePercent > 0 ? '+' : ''}\n          {item.priceChangePercent}%\n        </span>\n      ),\n    },\n    {\n      key: 'demandIndex',\n      header: 'Demand',\n      render: (item) => (\n        <div className=\"flex items-center gap-2\">\n          <div className=\"h-1.5 w-16 rounded-full bg-muted\">\n            <div className=\"h-full rounded-full bg-blue-500\" style={{ width: `${item.demandIndex}%` }} />\n          </div>\n          <span className=\"text-xs text-muted-foreground\">{item.demandIndex}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'supplyIndex',\n      header: 'Supply',\n      render: (item) => (\n        <div className=\"flex items-center gap-2\">\n          <div className=\"h-1.5 w-16 rounded-full bg-muted\">\n            <div className=\"h-full rounded-full bg-amber-500\" style={{ width: `${item.supplyIndex}%` }} />\n          </div>\n          <span className=\"text-xs text-muted-foreground\">{item.supplyIndex}</span>\n        </div>\n      ),\n    },\n  ];\n\n  return (\n    <PageLayout title=\"Market Analytics\" description=\"Track market trends, price movements, and demand-supply dynamics\">\n      {/* Stats Row */}\n      <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          label=\"Average Price\"\n          value={stats.avgPrice}\n          prefix=\"$\"\n          icon={<DollarSign className=\"h-5 w-5 text-blue-500\" />}\n          trend={stats.priceChange >= 0 ? 'up' : 'down'}\n          change={stats.priceChange}\n        />\n        <StatCard\n          label=\"Price Change\"\n          value={`${stats.priceChange >= 0 ? '+' : ''}${stats.priceChange}%`}\n          icon={\n            stats.priceChange >= 0 ? (\n              <TrendingUp className=\"h-5 w-5 text-emerald-500\" />\n            ) : (\n              <TrendingDown className=\"h-5 w-5 text-red-500\" />\n            )\n          }\n        />\n        <StatCard\n          label=\"Properties Listed\"\n          value={stats.totalListings}\n          icon={<Building className=\"h-5 w-5 text-purple-500\" />}\n        />\n        <StatCard\n          label=\"Avg Days on Market\"\n          value={`${stats.avgDaysOnMarket}`}\n          unit=\"days\"\n          icon={<Clock className=\"h-5 w-5 text-amber-500\" />}\n        />\n      </div>\n\n      {/* Price Trends Chart */}\n      <ChartCard\n        title=\"Market Trends\"\n        description=\"Monthly price, rent, and demand trends\"\n        actions={\n          <div className=\"flex gap-1\">\n            {(['price', 'rent', 'demand'] as const).map((t) => (\n              <button\n                key={t}\n                onClick={() => setChartType(t)}\n                className={cn(\n                  'rounded-md px-2.5 py-1 text-xs font-medium transition-colors capitalize',\n                  chartType === t ? 'bg-foreground text-background' : 'text-muted-foreground hover:bg-muted'\n                )}\n              >\n                {t}\n              </button>\n            ))}\n          </div>\n        }\n      >\n        <div className=\"h-72\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            {chartType === 'price' ? (\n              <AreaChart data={chartData}>\n                <defs>\n                  <linearGradient id=\"priceGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"5%\" stopColor=\"hsl(var(--chart-1, 220 70% 50%))\" stopOpacity={0.3} />\n                    <stop offset=\"95%\" stopColor=\"hsl(var(--chart-1, 220 70% 50%))\" stopOpacity={0} />\n                  </linearGradient>\n                </defs>\n                <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-border\" />\n                <XAxis dataKey=\"monthLabel\" tick={{ fontSize: 11 }} className=\"text-muted-foreground\" />\n                <YAxis\n                  tick={{ fontSize: 11 }}\n                  tickFormatter={(v) => `$${(v / 1000).toFixed(0)}K`}\n                  className=\"text-muted-foreground\"\n                />\n                <Tooltip\n                  formatter={(value: number) => [formatCurrency(value), 'Avg Price']}\n                  labelClassName=\"text-foreground\"\n                />\n                <Area\n                  type=\"monotone\"\n                  dataKey=\"avgPrice\"\n                  stroke=\"hsl(var(--chart-1, 220 70% 50%))\"\n                  fill=\"url(#priceGrad)\"\n                  strokeWidth={2}\n                />\n              </AreaChart>\n            ) : chartType === 'rent' ? (\n              <LineChart data={chartData}>\n                <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-border\" />\n                <XAxis dataKey=\"monthLabel\" tick={{ fontSize: 11 }} className=\"text-muted-foreground\" />\n                <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => `$${v}`} className=\"text-muted-foreground\" />\n                <Tooltip formatter={(value: number) => [formatCurrency(value), 'Avg Rent']} />\n                <Line\n                  type=\"monotone\"\n                  dataKey=\"avgRent\"\n                  stroke=\"hsl(var(--chart-2, 150 60% 40%))\"\n                  strokeWidth={2}\n                  dot={{ r: 3 }}\n                />\n              </LineChart>\n            ) : (\n              <LineChart data={chartData}>\n                <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-border\" />\n                <XAxis dataKey=\"monthLabel\" tick={{ fontSize: 11 }} className=\"text-muted-foreground\" />\n                <YAxis tick={{ fontSize: 11 }} className=\"text-muted-foreground\" />\n                <Tooltip />\n                <Legend />\n                <Line\n                  type=\"monotone\"\n                  dataKey=\"demandIndex\"\n                  stroke=\"hsl(var(--chart-1, 220 70% 50%))\"\n                  name=\"Demand\"\n                  strokeWidth={2}\n                  dot={{ r: 3 }}\n                />\n                <Line\n                  type=\"monotone\"\n                  dataKey=\"supplyIndex\"\n                  stroke=\"hsl(var(--chart-3, 30 80% 55%))\"\n                  name=\"Supply\"\n                  strokeWidth={2}\n                  dot={{ r: 3 }}\n                />\n              </LineChart>\n            )}\n          </ResponsiveContainer>\n        </div>\n      </ChartCard>\n\n      {/* Market Comparison Table */}\n      <div>\n        <h2 className=\"mb-3 text-lg font-semibold text-foreground\">Monthly Comparison</h2>\n        <DataTable columns={columns} data={chartData} keyField=\"month\" pageSize={6} />\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/housingvista/pages/marketplace/MarketplacePage.d.ts

@@ -0,0 +1,2 @@
+export declare function MarketplacePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MarketplacePage.d.ts.map

package/dist/housingvista/pages/marketplace/MarketplacePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketplacePage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/marketplace/MarketplacePage.tsx"],"names":[],"mappings":"AAyJA,wBAAgB,eAAe,4CA6D9B"}