@burdenoff/microfe-housingvista 2026.510.105

package/dist/housingvista/pages/assets/AssetManagementPage.js

@@ -0,0 +1,273 @@
+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 { StatusBadge as a } from "../../components/StatusBadge.js";
+import { EmptyState as o } from "../../components/EmptyState.js";
+import { FilterBar as s } from "../../components/FilterBar.js";
+import "../../components/index.js";
+import { useAssets as c } from "../../hooks/index.js";
+import { useMemo as l, useState as u } from "react";
+import { ArrowDownRight as d, ArrowUpRight as f, BarChart3 as p, Building as m, DollarSign as h, Download as g, Eye as _, MapPin as v, Plus as y, TrendingUp as b } from "lucide-react";
+import { useNavigate as x } from "react-router-dom";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/housingvista/pages/assets/AssetManagementPage.tsx
+function w(e) {
+	switch (e) {
+		case "active": return "success";
+		case "under_renovation": return "warning";
+		case "pending_sale": return "info";
+		case "sold": return "muted";
+		default: return "muted";
+	}
+}
+function T() {
+	let T = x(), { data: E } = c(), [D, O] = u(""), k = l(() => {
+		if (!D) return E;
+		let e = D.toLowerCase();
+		return E.filter((t) => t.title.toLowerCase().includes(e) || t.location.toLowerCase().includes(e) || t.type.toLowerCase().includes(e));
+	}, [E, D]), A = l(() => {
+		let e = E.reduce((e, t) => e + t.currentValue, 0), t = E.filter((e) => e.rentalYield).reduce((e, t) => e + t.currentValue * (t.rentalYield || 0) / 100 / 12, 0), n = E.length > 0 ? E.reduce((e, t) => e + t.appreciationPercent, 0) / E.length : 0, r = E.reduce((e, t) => e + t.purchasePrice, 0);
+		return {
+			totalValue: e,
+			totalMonthlyIncome: t,
+			avgAppreciation: n,
+			totalROI: r > 0 ? (e - r) / r * 100 : 0
+		};
+	}, [E]);
+	return /* @__PURE__ */ C(n, {
+		title: "Asset Management",
+		description: "Monitor and manage your property portfolio performance",
+		actions: /* @__PURE__ */ C("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ C("button", {
+				className: "inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted",
+				children: [/* @__PURE__ */ S(g, { className: "h-4 w-4" }), "Export"]
+			}), /* @__PURE__ */ C("button", {
+				className: "inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90",
+				children: [/* @__PURE__ */ S(y, { className: "h-4 w-4" }), "Add Asset"]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ C("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ S(r, {
+						label: "Total Value",
+						value: A.totalValue,
+						prefix: "$",
+						icon: /* @__PURE__ */ S(h, { className: "h-4 w-4" }),
+						trend: "up",
+						change: 8
+					}),
+					/* @__PURE__ */ S(r, {
+						label: "Monthly Income",
+						value: Math.round(A.totalMonthlyIncome),
+						prefix: "$",
+						icon: /* @__PURE__ */ S(b, { className: "h-4 w-4" }),
+						trend: "up",
+						change: 5
+					}),
+					/* @__PURE__ */ S(r, {
+						label: "Avg. Appreciation",
+						value: `${A.avgAppreciation.toFixed(1)}%`,
+						icon: /* @__PURE__ */ S(p, { className: "h-4 w-4" }),
+						trend: "up",
+						change: 2
+					}),
+					/* @__PURE__ */ S(r, {
+						label: "Overall ROI",
+						value: `${A.totalROI.toFixed(1)}%`,
+						icon: /* @__PURE__ */ S(m, { className: "h-4 w-4" }),
+						trend: "up",
+						change: 3
+					})
+				]
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: E.map((n) => {
+					let r = n.currentValue - n.purchasePrice >= 0;
+					return /* @__PURE__ */ C("div", {
+						className: "cursor-pointer rounded-lg border border-border bg-card p-4 shadow-sm transition-shadow hover:shadow-md",
+						onClick: () => T(`/assets/${n.id}`),
+						children: [/* @__PURE__ */ C("div", {
+							className: "mb-3 flex items-start justify-between",
+							children: [/* @__PURE__ */ C("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ S("img", {
+									src: n.imageUrl,
+									alt: n.title,
+									className: "h-12 w-12 rounded-lg object-cover"
+								}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h3", {
+									className: "font-medium text-foreground",
+									children: n.title
+								}), /* @__PURE__ */ C("p", {
+									className: "flex items-center gap-1 text-xs text-muted-foreground",
+									children: [/* @__PURE__ */ S(v, { className: "h-3 w-3" }), n.location]
+								})] })]
+							}), /* @__PURE__ */ S(a, {
+								label: n.status.replace("_", " "),
+								variant: w(n.status)
+							})]
+						}), /* @__PURE__ */ C("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [
+								/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+									className: "text-xs text-muted-foreground",
+									children: "Current Value"
+								}), /* @__PURE__ */ S("p", {
+									className: "text-sm font-semibold text-foreground",
+									children: t(n.currentValue)
+								})] }),
+								/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+									className: "text-xs text-muted-foreground",
+									children: "Change"
+								}), /* @__PURE__ */ C("p", {
+									className: e("flex items-center gap-0.5 text-sm font-semibold", r ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"),
+									children: [
+										S(r ? f : d, { className: "h-3 w-3" }),
+										n.appreciationPercent,
+										"%"
+									]
+								})] }),
+								n.rentalYield && /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+									className: "text-xs text-muted-foreground",
+									children: "Rental Yield"
+								}), /* @__PURE__ */ C("p", {
+									className: "text-sm font-semibold text-foreground",
+									children: [n.rentalYield, "%"]
+								})] }),
+								/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+									className: "text-xs text-muted-foreground",
+									children: "Category"
+								}), /* @__PURE__ */ S("p", {
+									className: "text-sm capitalize text-foreground",
+									children: n.category
+								})] })
+							]
+						})]
+					}, n.id);
+				})
+			}),
+			/* @__PURE__ */ C("div", { children: [
+				/* @__PURE__ */ S("h2", {
+					className: "mb-4 text-lg font-semibold text-foreground",
+					children: "All Assets"
+				}),
+				/* @__PURE__ */ S(s, {
+					searchValue: D,
+					onSearchChange: O,
+					searchPlaceholder: "Search assets by name, location, or type..."
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "mt-4",
+					children: k.length > 0 ? /* @__PURE__ */ S(i, {
+						columns: [
+							{
+								key: "title",
+								header: "Property",
+								render: (e) => /* @__PURE__ */ C("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ S("img", {
+										src: e.imageUrl,
+										alt: e.title,
+										className: "h-10 w-10 rounded-md object-cover"
+									}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("div", {
+										className: "font-medium text-foreground",
+										children: e.title
+									}), /* @__PURE__ */ C("div", {
+										className: "flex items-center gap-1 text-xs text-muted-foreground",
+										children: [/* @__PURE__ */ S(v, { className: "h-3 w-3" }), e.location]
+									})] })]
+								})
+							},
+							{
+								key: "type",
+								header: "Type",
+								render: (e) => /* @__PURE__ */ S("span", {
+									className: "text-sm capitalize text-foreground",
+									children: e.type
+								})
+							},
+							{
+								key: "purchasePrice",
+								header: "Purchase Price",
+								render: (e) => /* @__PURE__ */ S("span", {
+									className: "text-sm text-foreground",
+									children: t(e.purchasePrice)
+								})
+							},
+							{
+								key: "currentValue",
+								header: "Current Value",
+								render: (e) => /* @__PURE__ */ S("span", {
+									className: "text-sm font-medium text-foreground",
+									children: t(e.currentValue)
+								})
+							},
+							{
+								key: "appreciationPercent",
+								header: "Change",
+								render: (n) => {
+									let r = n.currentValue - n.purchasePrice, i = r >= 0;
+									return /* @__PURE__ */ C("div", {
+										className: e("flex items-center gap-1 text-sm font-medium", i ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"),
+										children: [
+											S(i ? f : d, { className: "h-3 w-3" }),
+											t(Math.abs(r)),
+											/* @__PURE__ */ C("span", {
+												className: "text-xs",
+												children: [
+													"(",
+													n.appreciationPercent,
+													"%)"
+												]
+											})
+										]
+									});
+								}
+							},
+							{
+								key: "status",
+								header: "Status",
+								render: (e) => /* @__PURE__ */ S(a, {
+									label: e.status.replace("_", " "),
+									variant: w(e.status)
+								})
+							},
+							{
+								key: "actions",
+								header: "",
+								sortable: !1,
+								render: (e) => /* @__PURE__ */ C("button", {
+									onClick: (t) => {
+										t.stopPropagation(), T(`/assets/${e.id}`);
+									},
+									className: "inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted",
+									children: [/* @__PURE__ */ S(_, { className: "h-3 w-3" }), "View"]
+								})
+							}
+						],
+						data: k,
+						keyField: "id",
+						onRowClick: (e) => T(`/assets/${e.id}`),
+						pageSize: 10
+					}) : /* @__PURE__ */ S(o, {
+						icon: /* @__PURE__ */ S(m, { className: "h-12 w-12" }),
+						title: "No assets found",
+						description: "Try adjusting your search criteria or add a new asset.",
+						action: /* @__PURE__ */ C("button", {
+							className: "inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90",
+							children: [/* @__PURE__ */ S(y, { className: "h-4 w-4" }), "Add Asset"]
+						})
+					})
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { T as AssetManagementPage };
+
+//# sourceMappingURL=AssetManagementPage.js.map

package/dist/housingvista/pages/assets/AssetManagementPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetManagementPage.js","names":[],"sources":["../../../../src/housingvista/pages/assets/AssetManagementPage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  Building,\n  DollarSign,\n  TrendingUp,\n  BarChart3,\n  Plus,\n  Download,\n  ArrowUpRight,\n  ArrowDownRight,\n  MapPin,\n  Eye,\n} from 'lucide-react';\nimport { PageLayout } from '../../components';\nimport { StatCard } from '../../components';\nimport { DataTable, type Column } from '../../components';\nimport { StatusBadge } from '../../components';\nimport { FilterBar } from '../../components';\nimport { EmptyState } from '../../components';\nimport { useAssets } from '../../hooks';\nimport { cn, formatCurrency } from '../../utils/helpers';\nimport type { Asset } from '../../types';\n\nfunction getStatusVariant(status: Asset['status']): 'success' | 'warning' | 'info' | 'muted' {\n  switch (status) {\n    case 'active':\n      return 'success';\n    case 'under_renovation':\n      return 'warning';\n    case 'pending_sale':\n      return 'info';\n    case 'sold':\n      return 'muted';\n    default:\n      return 'muted';\n  }\n}\n\nexport function AssetManagementPage() {\n  const navigate = useNavigate();\n  const { data: assets } = useAssets();\n  const [search, setSearch] = useState('');\n\n  const filtered = useMemo(() => {\n    if (!search) return assets;\n    const q = search.toLowerCase();\n    return assets.filter(\n      (a) =>\n        a.title.toLowerCase().includes(q) || a.location.toLowerCase().includes(q) || a.type.toLowerCase().includes(q)\n    );\n  }, [assets, search]);\n\n  const portfolioStats = useMemo(() => {\n    const totalValue = assets.reduce((sum, a) => sum + a.currentValue, 0);\n    const totalMonthlyIncome = assets\n      .filter((a) => a.rentalYield)\n      .reduce((sum, a) => sum + (a.currentValue * (a.rentalYield || 0)) / 100 / 12, 0);\n    const avgAppreciation =\n      assets.length > 0 ? assets.reduce((sum, a) => sum + a.appreciationPercent, 0) / assets.length : 0;\n    const totalPurchasePrice = assets.reduce((sum, a) => sum + a.purchasePrice, 0);\n    const totalROI = totalPurchasePrice > 0 ? ((totalValue - totalPurchasePrice) / totalPurchasePrice) * 100 : 0;\n    return { totalValue, totalMonthlyIncome, avgAppreciation, totalROI };\n  }, [assets]);\n\n  const assetColumns: Column<Asset>[] = [\n    {\n      key: 'title',\n      header: 'Property',\n      render: (item) => (\n        <div className=\"flex items-center gap-3\">\n          <img src={item.imageUrl} alt={item.title} className=\"h-10 w-10 rounded-md object-cover\" />\n          <div>\n            <div className=\"font-medium text-foreground\">{item.title}</div>\n            <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <MapPin className=\"h-3 w-3\" />\n              {item.location}\n            </div>\n          </div>\n        </div>\n      ),\n    },\n    {\n      key: 'type',\n      header: 'Type',\n      render: (item) => <span className=\"text-sm capitalize text-foreground\">{item.type}</span>,\n    },\n    {\n      key: 'purchasePrice',\n      header: 'Purchase Price',\n      render: (item) => <span className=\"text-sm text-foreground\">{formatCurrency(item.purchasePrice)}</span>,\n    },\n    {\n      key: 'currentValue',\n      header: 'Current Value',\n      render: (item) => (\n        <span className=\"text-sm font-medium text-foreground\">{formatCurrency(item.currentValue)}</span>\n      ),\n    },\n    {\n      key: 'appreciationPercent',\n      header: 'Change',\n      render: (item) => {\n        const change = item.currentValue - item.purchasePrice;\n        const isPositive = change >= 0;\n        return (\n          <div\n            className={cn(\n              'flex items-center gap-1 text-sm font-medium',\n              isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'\n            )}\n          >\n            {isPositive ? <ArrowUpRight className=\"h-3 w-3\" /> : <ArrowDownRight className=\"h-3 w-3\" />}\n            {formatCurrency(Math.abs(change))}\n            <span className=\"text-xs\">({item.appreciationPercent}%)</span>\n          </div>\n        );\n      },\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (item) => <StatusBadge label={item.status.replace('_', ' ')} variant={getStatusVariant(item.status)} />,\n    },\n    {\n      key: 'actions',\n      header: '',\n      sortable: false,\n      render: (item) => (\n        <button\n          onClick={(e) => {\n            e.stopPropagation();\n            navigate(`/assets/${item.id}`);\n          }}\n          className=\"inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted\"\n        >\n          <Eye className=\"h-3 w-3\" />\n          View\n        </button>\n      ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Asset Management\"\n      description=\"Monitor and manage your property portfolio performance\"\n      actions={\n        <div className=\"flex items-center gap-2\">\n          <button className=\"inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n            <Download className=\"h-4 w-4\" />\n            Export\n          </button>\n          <button className=\"inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90\">\n            <Plus className=\"h-4 w-4\" />\n            Add Asset\n          </button>\n        </div>\n      }\n    >\n      {/* Portfolio Value Stats */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          label=\"Total Value\"\n          value={portfolioStats.totalValue}\n          prefix=\"$\"\n          icon={<DollarSign className=\"h-4 w-4\" />}\n          trend=\"up\"\n          change={8}\n        />\n        <StatCard\n          label=\"Monthly Income\"\n          value={Math.round(portfolioStats.totalMonthlyIncome)}\n          prefix=\"$\"\n          icon={<TrendingUp className=\"h-4 w-4\" />}\n          trend=\"up\"\n          change={5}\n        />\n        <StatCard\n          label=\"Avg. Appreciation\"\n          value={`${portfolioStats.avgAppreciation.toFixed(1)}%`}\n          icon={<BarChart3 className=\"h-4 w-4\" />}\n          trend=\"up\"\n          change={2}\n        />\n        <StatCard\n          label=\"Overall ROI\"\n          value={`${portfolioStats.totalROI.toFixed(1)}%`}\n          icon={<Building className=\"h-4 w-4\" />}\n          trend=\"up\"\n          change={3}\n        />\n      </div>\n\n      {/* Asset Cards Overview */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        {assets.map((asset) => {\n          const change = asset.currentValue - asset.purchasePrice;\n          const isPositive = change >= 0;\n          return (\n            <div\n              key={asset.id}\n              className=\"cursor-pointer rounded-lg border border-border bg-card p-4 shadow-sm transition-shadow hover:shadow-md\"\n              onClick={() => navigate(`/assets/${asset.id}`)}\n            >\n              <div className=\"mb-3 flex items-start justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  <img src={asset.imageUrl} alt={asset.title} className=\"h-12 w-12 rounded-lg object-cover\" />\n                  <div>\n                    <h3 className=\"font-medium text-foreground\">{asset.title}</h3>\n                    <p className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n                      <MapPin className=\"h-3 w-3\" />\n                      {asset.location}\n                    </p>\n                  </div>\n                </div>\n                <StatusBadge label={asset.status.replace('_', ' ')} variant={getStatusVariant(asset.status)} />\n              </div>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <p className=\"text-xs text-muted-foreground\">Current Value</p>\n                  <p className=\"text-sm font-semibold text-foreground\">{formatCurrency(asset.currentValue)}</p>\n                </div>\n                <div>\n                  <p className=\"text-xs text-muted-foreground\">Change</p>\n                  <p\n                    className={cn(\n                      'flex items-center gap-0.5 text-sm font-semibold',\n                      isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'\n                    )}\n                  >\n                    {isPositive ? <ArrowUpRight className=\"h-3 w-3\" /> : <ArrowDownRight className=\"h-3 w-3\" />}\n                    {asset.appreciationPercent}%\n                  </p>\n                </div>\n                {asset.rentalYield && (\n                  <div>\n                    <p className=\"text-xs text-muted-foreground\">Rental Yield</p>\n                    <p className=\"text-sm font-semibold text-foreground\">{asset.rentalYield}%</p>\n                  </div>\n                )}\n                <div>\n                  <p className=\"text-xs text-muted-foreground\">Category</p>\n                  <p className=\"text-sm capitalize text-foreground\">{asset.category}</p>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Asset Table */}\n      <div>\n        <h2 className=\"mb-4 text-lg font-semibold text-foreground\">All Assets</h2>\n        <FilterBar\n          searchValue={search}\n          onSearchChange={setSearch}\n          searchPlaceholder=\"Search assets by name, location, or type...\"\n        />\n        <div className=\"mt-4\">\n          {filtered.length > 0 ? (\n            <DataTable\n              columns={assetColumns}\n              data={filtered}\n              keyField=\"id\"\n              onRowClick={(item) => navigate(`/assets/${item.id}`)}\n              pageSize={10}\n            />\n          ) : (\n            <EmptyState\n              icon={<Building className=\"h-12 w-12\" />}\n              title=\"No assets found\"\n              description=\"Try adjusting your search criteria or add a new asset.\"\n              action={\n                <button className=\"inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90\">\n                  <Plus className=\"h-4 w-4\" />\n                  Add Asset\n                </button>\n              }\n            />\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/housingvista/pages/chat/ChatPage.d.ts

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

package/dist/housingvista/pages/chat/ChatPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/chat/ChatPage.tsx"],"names":[],"mappings":"AAqGA,wBAAgB,QAAQ,4CAoLvB"}

package/dist/housingvista/pages/chat/ChatPage.js

@@ -0,0 +1,218 @@
+import { cn as e, getRelativeTime as t } from "../../utils/helpers.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import "../../components/index.js";
+import { useConversations as i } from "../../hooks/index.js";
+import { useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { ArrowLeft as l, MessageCircle as u, Search as d, Send as f } from "lucide-react";
+import { useNavigate as p } from "react-router-dom";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/housingvista/pages/chat/ChatPage.tsx
+var _ = "1";
+function v({ conversation: n, isActive: r, onClick: i }) {
+	let a = n.participants.find((e) => e.id !== _) ?? n.participants[0];
+	return /* @__PURE__ */ g("button", {
+		onClick: i,
+		className: e("flex w-full items-start gap-3 rounded-lg p-3 text-left transition-colors", r ? "bg-muted" : "hover:bg-muted/50"),
+		children: [/* @__PURE__ */ h("div", {
+			className: "relative shrink-0",
+			children: /* @__PURE__ */ h("div", {
+				className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground",
+				children: a?.avatar ? /* @__PURE__ */ h("img", {
+					src: a.avatar,
+					alt: a.name,
+					className: "h-full w-full rounded-full object-cover"
+				}) : a?.name.charAt(0) ?? "?"
+			})
+		}), /* @__PURE__ */ g("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ g("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ h("span", {
+					className: e("truncate text-sm font-medium", (n.unreadCount, "text-foreground")),
+					children: n.title
+				}), /* @__PURE__ */ h("span", {
+					className: "shrink-0 text-xs text-muted-foreground",
+					children: t(n.lastMessageTime)
+				})]
+			}), /* @__PURE__ */ g("div", {
+				className: "flex items-center justify-between gap-2 mt-0.5",
+				children: [/* @__PURE__ */ h("p", {
+					className: e("truncate text-xs", n.unreadCount > 0 ? "font-medium text-foreground" : "text-muted-foreground"),
+					children: n.lastMessage
+				}), n.unreadCount > 0 && /* @__PURE__ */ h("span", {
+					className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold text-white",
+					children: n.unreadCount
+				})]
+			})]
+		})]
+	});
+}
+function y({ message: t, isOwn: n }) {
+	return /* @__PURE__ */ h("div", {
+		className: e("flex", n ? "justify-end" : "justify-start"),
+		children: /* @__PURE__ */ g("div", {
+			className: e("max-w-[75%] space-y-1"),
+			children: [
+				!n && /* @__PURE__ */ h("span", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: t.senderName
+				}),
+				/* @__PURE__ */ h("div", {
+					className: e("rounded-xl px-4 py-2 text-sm", n ? "bg-foreground text-background rounded-br-sm" : "bg-muted text-foreground rounded-bl-sm"),
+					children: t.content
+				}),
+				/* @__PURE__ */ h("span", {
+					className: e("block text-[10px] text-muted-foreground", n && "text-right"),
+					children: new Date(t.timestamp).toLocaleTimeString("en-US", {
+						hour: "numeric",
+						minute: "2-digit"
+					})
+				})
+			]
+		})
+	});
+}
+function b() {
+	p();
+	let { data: t } = i(), [b, x] = c(t[0]?.id ?? null), [S, C] = c(""), [w, T] = c(""), [E, D] = c({}), O = s(null), k = s(null), A = o(() => {
+		if (!S) return t;
+		let e = S.toLowerCase();
+		return t.filter((t) => t.title.toLowerCase().includes(e) || t.lastMessage.toLowerCase().includes(e) || t.participants.some((t) => t.name.toLowerCase().includes(e)));
+	}, [t, S]), j = t.find((e) => e.id === b), M = o(() => {
+		if (!j) return [];
+		let e = E[j.id] ?? [];
+		return [...j.messages, ...e];
+	}, [j, E]);
+	a(() => {
+		O.current?.scrollIntoView({ behavior: "smooth" });
+	}, [M.length]);
+	let N = () => {
+		if (!w.trim() || !b) return;
+		let e = {
+			id: `local-${Date.now()}`,
+			senderId: _,
+			senderName: "John Doe",
+			content: w.trim(),
+			timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+			type: "text"
+		};
+		D((t) => ({
+			...t,
+			[b]: [...t[b] ?? [], e]
+		})), T(""), k.current?.focus();
+	}, P = (e) => {
+		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), N());
+	}, [F, I] = c(!1), L = (e) => {
+		x(e), I(!0);
+	};
+	return /* @__PURE__ */ h(n, {
+		title: "Messages",
+		description: "Connect with property owners, tenants, and professionals",
+		children: /* @__PURE__ */ g("div", {
+			className: "flex h-[calc(100vh-220px)] min-h-[500px] overflow-hidden rounded-lg border border-border bg-card",
+			children: [/* @__PURE__ */ g("div", {
+				className: e("w-full shrink-0 border-r border-border md:w-80", F && "hidden md:block"),
+				children: [/* @__PURE__ */ h("div", {
+					className: "border-b border-border p-3",
+					children: /* @__PURE__ */ g("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ h(d, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ h("input", {
+							type: "text",
+							value: S,
+							onChange: (e) => C(e.target.value),
+							placeholder: "Search conversations...",
+							className: "h-9 w-full rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+						})]
+					})
+				}), /* @__PURE__ */ h("div", {
+					className: "overflow-y-auto",
+					style: { height: "calc(100% - 58px)" },
+					children: A.length > 0 ? /* @__PURE__ */ h("div", {
+						className: "space-y-0.5 p-2",
+						children: A.map((e) => /* @__PURE__ */ h(v, {
+							conversation: e,
+							isActive: e.id === b,
+							onClick: () => L(e.id)
+						}, e.id))
+					}) : /* @__PURE__ */ g("div", {
+						className: "flex flex-col items-center justify-center p-8 text-center",
+						children: [/* @__PURE__ */ h(u, { className: "mb-2 h-8 w-8 text-muted-foreground" }), /* @__PURE__ */ h("p", {
+							className: "text-sm text-muted-foreground",
+							children: "No conversations found"
+						})]
+					})
+				})]
+			}), /* @__PURE__ */ h("div", {
+				className: e("flex flex-1 flex-col", !F && "hidden md:flex"),
+				children: j ? /* @__PURE__ */ g(m, { children: [
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-3 border-b border-border px-4 py-3",
+						children: [
+							/* @__PURE__ */ h("button", {
+								onClick: () => I(!1),
+								className: "md:hidden rounded-md p-1 text-muted-foreground hover:bg-muted",
+								children: /* @__PURE__ */ h(l, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ h("div", {
+								className: "flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground",
+								children: j.participants.find((e) => e.id !== _)?.name.charAt(0) ?? "?"
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ h("h3", {
+									className: "truncate text-sm font-semibold text-foreground",
+									children: j.title
+								}), /* @__PURE__ */ h("p", {
+									className: "text-xs text-muted-foreground",
+									children: j.participants.map((e) => e.name).join(", ")
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flex-1 overflow-y-auto p-4",
+						children: /* @__PURE__ */ g("div", {
+							className: "space-y-4",
+							children: [M.map((e) => /* @__PURE__ */ h(y, {
+								message: e,
+								isOwn: e.senderId === _
+							}, e.id)), /* @__PURE__ */ h("div", { ref: O })]
+						})
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "border-t border-border p-3",
+						children: /* @__PURE__ */ g("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ h("input", {
+								ref: k,
+								type: "text",
+								value: w,
+								onChange: (e) => T(e.target.value),
+								onKeyDown: P,
+								placeholder: "Type a message...",
+								className: "h-10 flex-1 rounded-md border border-border bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+							}), /* @__PURE__ */ h("button", {
+								onClick: N,
+								disabled: !w.trim(),
+								className: e("flex h-10 w-10 items-center justify-center rounded-md transition-colors", w.trim() ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted text-muted-foreground cursor-not-allowed"),
+								children: /* @__PURE__ */ h(f, { className: "h-4 w-4" })
+							})]
+						})
+					})
+				] }) : /* @__PURE__ */ h("div", {
+					className: "flex flex-1 items-center justify-center",
+					children: /* @__PURE__ */ h(r, {
+						icon: /* @__PURE__ */ h(u, { className: "h-12 w-12" }),
+						title: "Select a conversation",
+						description: "Choose a conversation from the list to start chatting"
+					})
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { b as ChatPage };
+
+//# sourceMappingURL=ChatPage.js.map

package/dist/housingvista/pages/chat/ChatPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPage.js","names":[],"sources":["../../../../src/housingvista/pages/chat/ChatPage.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Send, Search, MessageCircle, ArrowLeft } from 'lucide-react';\nimport { PageLayout, EmptyState } from '../../components';\nimport { useConversations } from '../../hooks';\nimport { cn, getRelativeTime } from '../../utils/helpers';\nimport type { ConversationListItem, ConversationMessage } from '../../types';\n\nconst CURRENT_USER_ID = '1'; // John Doe\n\nfunction ConversationItem({\n  conversation,\n  isActive,\n  onClick,\n}: {\n  conversation: ConversationListItem;\n  isActive: boolean;\n  onClick: () => void;\n}) {\n  const otherParticipant =\n    conversation.participants.find((p) => p.id !== CURRENT_USER_ID) ?? conversation.participants[0];\n\n  return (\n    <button\n      onClick={onClick}\n      className={cn(\n        'flex w-full items-start gap-3 rounded-lg p-3 text-left transition-colors',\n        isActive ? 'bg-muted' : 'hover:bg-muted/50'\n      )}\n    >\n      {/* Avatar */}\n      <div className=\"relative shrink-0\">\n        <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground\">\n          {otherParticipant?.avatar ? (\n            <img\n              src={otherParticipant.avatar}\n              alt={otherParticipant.name}\n              className=\"h-full w-full rounded-full object-cover\"\n            />\n          ) : (\n            (otherParticipant?.name.charAt(0) ?? '?')\n          )}\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span\n            className={cn(\n              'truncate text-sm font-medium',\n              conversation.unreadCount > 0 ? 'text-foreground' : 'text-foreground'\n            )}\n          >\n            {conversation.title}\n          </span>\n          <span className=\"shrink-0 text-xs text-muted-foreground\">\n            {getRelativeTime(conversation.lastMessageTime)}\n          </span>\n        </div>\n        <div className=\"flex items-center justify-between gap-2 mt-0.5\">\n          <p\n            className={cn(\n              'truncate text-xs',\n              conversation.unreadCount > 0 ? 'font-medium text-foreground' : 'text-muted-foreground'\n            )}\n          >\n            {conversation.lastMessage}\n          </p>\n          {conversation.unreadCount > 0 && (\n            <span className=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold text-white\">\n              {conversation.unreadCount}\n            </span>\n          )}\n        </div>\n      </div>\n    </button>\n  );\n}\n\nfunction MessageBubble({ message, isOwn }: { message: ConversationMessage; isOwn: boolean }) {\n  return (\n    <div className={cn('flex', isOwn ? 'justify-end' : 'justify-start')}>\n      <div className={cn('max-w-[75%] space-y-1')}>\n        {!isOwn && <span className=\"text-xs font-medium text-muted-foreground\">{message.senderName}</span>}\n        <div\n          className={cn(\n            'rounded-xl px-4 py-2 text-sm',\n            isOwn ? 'bg-foreground text-background rounded-br-sm' : 'bg-muted text-foreground rounded-bl-sm'\n          )}\n        >\n          {message.content}\n        </div>\n        <span className={cn('block text-[10px] text-muted-foreground', isOwn && 'text-right')}>\n          {new Date(message.timestamp).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport function ChatPage() {\n  const navigate = useNavigate();\n  const { data: conversations } = useConversations();\n  const [selectedId, setSelectedId] = useState<string | null>(conversations[0]?.id ?? null);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [newMessage, setNewMessage] = useState('');\n  const [localMessages, setLocalMessages] = useState<Record<string, ConversationMessage[]>>({});\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const filteredConversations = useMemo(() => {\n    if (!searchQuery) return conversations;\n    const q = searchQuery.toLowerCase();\n    return conversations.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        c.lastMessage.toLowerCase().includes(q) ||\n        c.participants.some((p) => p.name.toLowerCase().includes(q))\n    );\n  }, [conversations, searchQuery]);\n\n  const activeConversation = conversations.find((c) => c.id === selectedId);\n\n  const allMessages = useMemo(() => {\n    if (!activeConversation) return [];\n    const extras = localMessages[activeConversation.id] ?? [];\n    return [...activeConversation.messages, ...extras];\n  }, [activeConversation, localMessages]);\n\n  useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  }, [allMessages.length]);\n\n  const handleSend = () => {\n    if (!newMessage.trim() || !selectedId) return;\n    const msg: ConversationMessage = {\n      id: `local-${Date.now()}`,\n      senderId: CURRENT_USER_ID,\n      senderName: 'John Doe',\n      content: newMessage.trim(),\n      timestamp: new Date().toISOString(),\n      type: 'text',\n    };\n    setLocalMessages((prev) => ({\n      ...prev,\n      [selectedId]: [...(prev[selectedId] ?? []), msg],\n    }));\n    setNewMessage('');\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      handleSend();\n    }\n  };\n\n  // Mobile: show list when nothing selected, show chat when something is selected\n  const [mobileShowChat, setMobileShowChat] = useState(false);\n\n  const handleSelectConversation = (id: string) => {\n    setSelectedId(id);\n    setMobileShowChat(true);\n  };\n\n  return (\n    <PageLayout title=\"Messages\" description=\"Connect with property owners, tenants, and professionals\">\n      <div className=\"flex h-[calc(100vh-220px)] min-h-[500px] overflow-hidden rounded-lg border border-border bg-card\">\n        {/* Left Panel - Conversation List */}\n        <div className={cn('w-full shrink-0 border-r border-border md:w-80', mobileShowChat && 'hidden md:block')}>\n          {/* Search */}\n          <div className=\"border-b border-border p-3\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n              <input\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder=\"Search conversations...\"\n                className=\"h-9 w-full rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n              />\n            </div>\n          </div>\n\n          {/* Conversation List */}\n          <div className=\"overflow-y-auto\" style={{ height: 'calc(100% - 58px)' }}>\n            {filteredConversations.length > 0 ? (\n              <div className=\"space-y-0.5 p-2\">\n                {filteredConversations.map((conversation) => (\n                  <ConversationItem\n                    key={conversation.id}\n                    conversation={conversation}\n                    isActive={conversation.id === selectedId}\n                    onClick={() => handleSelectConversation(conversation.id)}\n                  />\n                ))}\n              </div>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center p-8 text-center\">\n                <MessageCircle className=\"mb-2 h-8 w-8 text-muted-foreground\" />\n                <p className=\"text-sm text-muted-foreground\">No conversations found</p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Right Panel - Chat */}\n        <div className={cn('flex flex-1 flex-col', !mobileShowChat && 'hidden md:flex')}>\n          {activeConversation ? (\n            <>\n              {/* Chat Header */}\n              <div className=\"flex items-center gap-3 border-b border-border px-4 py-3\">\n                <button\n                  onClick={() => setMobileShowChat(false)}\n                  className=\"md:hidden rounded-md p-1 text-muted-foreground hover:bg-muted\"\n                >\n                  <ArrowLeft className=\"h-5 w-5\" />\n                </button>\n                <div className=\"flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground\">\n                  {activeConversation.participants.find((p) => p.id !== CURRENT_USER_ID)?.name.charAt(0) ?? '?'}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <h3 className=\"truncate text-sm font-semibold text-foreground\">{activeConversation.title}</h3>\n                  <p className=\"text-xs text-muted-foreground\">\n                    {activeConversation.participants.map((p) => p.name).join(', ')}\n                  </p>\n                </div>\n              </div>\n\n              {/* Messages */}\n              <div className=\"flex-1 overflow-y-auto p-4\">\n                <div className=\"space-y-4\">\n                  {allMessages.map((msg) => (\n                    <MessageBubble key={msg.id} message={msg} isOwn={msg.senderId === CURRENT_USER_ID} />\n                  ))}\n                  <div ref={messagesEndRef} />\n                </div>\n              </div>\n\n              {/* Message Input */}\n              <div className=\"border-t border-border p-3\">\n                <div className=\"flex items-center gap-2\">\n                  <input\n                    ref={inputRef}\n                    type=\"text\"\n                    value={newMessage}\n                    onChange={(e) => setNewMessage(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder=\"Type a message...\"\n                    className=\"h-10 flex-1 rounded-md border border-border bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n                  />\n                  <button\n                    onClick={handleSend}\n                    disabled={!newMessage.trim()}\n                    className={cn(\n                      'flex h-10 w-10 items-center justify-center rounded-md transition-colors',\n                      newMessage.trim()\n                        ? 'bg-foreground text-background hover:bg-foreground/90'\n                        : 'bg-muted text-muted-foreground cursor-not-allowed'\n                    )}\n                  >\n                    <Send className=\"h-4 w-4\" />\n                  </button>\n                </div>\n              </div>\n            </>\n          ) : (\n            <div className=\"flex flex-1 items-center justify-center\">\n              <EmptyState\n                icon={<MessageCircle className=\"h-12 w-12\" />}\n                title=\"Select a conversation\"\n                description=\"Choose a conversation from the list to start chatting\"\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/housingvista/pages/finance/HomeLoansPage.d.ts

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

package/dist/housingvista/pages/finance/HomeLoansPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomeLoansPage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/finance/HomeLoansPage.tsx"],"names":[],"mappings":"AA0IA,wBAAgB,aAAa,4CAmJ5B"}