| import React, { useEffect, useMemo, useRef, useState } from "react"; |
| import { createRoot } from "react-dom/client"; |
| import { |
| Area, |
| AreaChart, |
| Bar, |
| BarChart, |
| CartesianGrid, |
| Cell, |
| ComposedChart, |
| Legend, |
| Line, |
| Pie, |
| PieChart, |
| ReferenceLine, |
| ResponsiveContainer, |
| Scatter, |
| ScatterChart, |
| Tooltip, |
| XAxis, |
| YAxis |
| } from "recharts"; |
| import { CircleMarker, MapContainer, Popup, TileLayer } from "react-leaflet"; |
| import "leaflet/dist/leaflet.css"; |
| import "./styles.css"; |
|
|
| const API_URL = import.meta.env.VITE_API_URL || ""; |
| const PALETTE = ["#2563eb", "#0f766e", "#7c3aed", "#d97706", "#c2410c", "#0891b2", "#4f46e5"]; |
| const DEFAULT_MODEL_LABEL = "AI provider"; |
| const APP_VERSION = "2.0.0"; |
| const DECISION_BASE_YEAR = 2025; |
| const DECISION_MAX_YEAR = 2050; |
|
|
| const emptyFilters = { |
| city: "TP Hồ Chí Minh", |
| districts: [], |
| property_types: [], |
| price_min: null, |
| price_max: null, |
| area_min: null, |
| area_max: null, |
| roi_min: null, |
| roi_max: null |
| }; |
|
|
| const pages = [ |
| { id: "overview", path: "/overview", label: "Tổng quan điều hành", short: "Tổng quan", icon: "dashboard", description: "KPI trọng yếu và xu hướng danh mục." }, |
| { id: "market", path: "/market", label: "Thông tin thị trường", short: "Thị trường", icon: "query_stats", description: "So sánh thị trường và mặt bằng giá." }, |
| { id: "slice", path: "/slice-dice", label: "Phân tích đa chiều", short: "Đa chiều", icon: "analytics", description: "Phân tích theo nhiều chiều dữ liệu." }, |
| { id: "decision", path: "/decision-lab", label: "Mô phỏng đầu tư", short: "Mô phỏng", icon: "science", description: "Mô phỏng ROI và hoàn vốn." }, |
| { id: "gis", path: "/gis-planning", label: "Bản đồ quy hoạch", short: "Bản đồ", icon: "map", description: "Rủi ro quy hoạch và cơ hội." }, |
| { id: "ai", path: "/ai-analyst", label: "Trợ lý phân tích", short: "Trợ lý", icon: "psychology", description: "Hỏi nhanh, ra quyết định nhanh." }, |
| { id: "ops", path: "/data-ops", label: "Theo dõi dữ liệu", short: "Dữ liệu", icon: "settings_input_component", description: "Giám sát ETL và chất lượng dữ liệu." }, |
| { id: "explorer", path: "/explorer", label: "Chi tiết tài sản", short: "Tài sản", icon: "explore", description: "Xem sâu từng tài sản." }, |
| { id: "report", path: "/periodic-report", label: "Báo cáo định kỳ", short: "Báo cáo", icon: "summarize", description: "Tóm tắt điều hành theo kỳ." } |
| ]; |
|
|
| const PANEL_HINTS = { |
| "Xu hướng điều hành 2025–2050": "Theo dõi xu hướng KPI và kịch bản điều hành dài hạn.", |
| "Kiểm tra giả định tăng trưởng": "Điều chỉnh tăng trưởng để kiểm tra độ nhạy chiến lược.", |
| "Khuyến nghị điều hành": "Tóm tắt hành động ưu tiên cho ban điều hành.", |
| "ROI theo khu vực nổi bật": "So sánh hiệu quả đầu tư giữa các khu vực.", |
| "Thanh khoản và Giá/m²": "Đọc sức mua và mặt bằng giá trên cùng biểu đồ.", |
| "So sánh phân khúc": "Đối chiếu hiệu quả giữa các nhóm tài sản.", |
| "Insight phân biệt khu vực": "Rút ra điểm khác biệt nhanh giữa các khu vực.", |
| "Thiết lập phân tích": "Chọn chiều phân tích và chỉ tiêu đo lường.", |
| "Thông tin so sánh": "Hiển thị phạm vi và bối cảnh đang so sánh.", |
| "Ma trận hiệu quả (": "Heatmap hiệu quả để nhìn nhanh khu vực/phân khúc.", |
| "Phân đoạn tiềm năng cao": "Lọc ra nhóm phân khúc đáng ưu tiên.", |
| "Thông số tài sản": "Thông tin đầu vào của tài sản đang mô phỏng.", |
| "Giả định đầu tư": "Thiết lập ngân sách, tăng trưởng và thời gian nắm giữ.", |
| "Kết quả tài chính dự kiến": "Kết quả mô phỏng tài chính đầu ra.", |
| "Triển vọng giá trị theo kịch bản": "So sánh ba kịch bản xấu, cơ sở và lạc quan.", |
| "Mốc thời gian & tình huống thua lỗ": "Xem mốc hoàn vốn và điểm rủi ro.", |
| "Khuyến nghị đầu tư tương lai": "Đọc khuyến nghị AI cho quyết định đầu tư.", |
| "Bản đồ quy hoạch": "Xem rủi ro quy hoạch và opportunity score.", |
| "Chú giải và khu vực cần theo dõi": "Giải thích màu sắc và khu vực cảnh báo.", |
| "Câu hỏi phân tích": "Nhập câu hỏi để truy vấn RAG/LLM.", |
| "Thanh tra nguồn": "Kiểm tra nguồn trích dẫn và độ tin cậy.", |
| "Tình trạng dữ liệu": "Theo dõi trạng thái nạp và cập nhật dữ liệu.", |
| "Nhật ký cập nhật dữ liệu": "Xem lịch sử các lần nạp dữ liệu.", |
| "Trung tâm dữ liệu công cộng": "Nguồn dữ liệu và trạng thái khai thác.", |
| "Bảng tài sản": "Danh sách tài sản trong bộ lọc hiện tại.", |
| "Phát hiện chính": "Tóm tắt các phát hiện cần nhấn mạnh.", |
| "Ghi chú điều hành": "Ghi chú ngắn cho báo cáo định kỳ của lãnh đạo.", |
| "Tóm tắt mô phỏng đầu tư": "Tóm tắt ba chỉ số chính của mô phỏng.", |
| "Báo cáo định kỳ": "Tổng hợp kết quả để trình bày theo chu kỳ." |
| }; |
|
|
| function currentPageId() { |
| const path = window.location.pathname === "/" ? "/overview" : window.location.pathname; |
| return pages.find((page) => page.path === path)?.id || "overview"; |
| } |
|
|
| function money(value) { |
| if (value === null || value === undefined || Number.isNaN(Number(value))) return "N/A"; |
| const number = Number(value); |
| if (Math.abs(number) >= 1_000_000_000) return `${(number / 1_000_000_000).toFixed(2)} tỷ`; |
| return `${(number / 1_000_000).toFixed(0)} triệu`; |
| } |
|
|
| function compact(value) { |
| return new Intl.NumberFormat("vi-VN", { notation: "compact", maximumFractionDigits: 1 }).format(value || 0); |
| } |
|
|
| function pct(value) { |
| if (value === null || value === undefined || Number.isNaN(Number(value))) return "N/A"; |
| return `${Number(value).toFixed(2)}%`; |
| } |
|
|
| function riskPriority(riskLevel) { |
| if (riskLevel === "high") return 3; |
| if (riskLevel === "medium") return 2; |
| return 1; |
| } |
|
|
| function groupMapMarkers(rows = []) { |
| const groups = new Map(); |
| rows.forEach((row) => { |
| const latitude = Number(row.latitude); |
| const longitude = Number(row.longitude); |
| if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return; |
| const key = `${latitude.toFixed(4)}:${longitude.toFixed(4)}`; |
| if (!groups.has(key)) groups.set(key, []); |
| groups.get(key).push(row); |
| }); |
|
|
| return [...groups.values()] |
| .map((items) => { |
| const sortedByScore = [...items].sort((a, b) => Number(b.opportunity_score || 0) - Number(a.opportunity_score || 0)); |
| const primary = sortedByScore[0]; |
| const riskOrder = [...items].sort((a, b) => riskPriority(b.risk_level) - riskPriority(a.risk_level)); |
| const dominantRisk = riskOrder[0]?.risk_level || primary?.risk_level || "medium"; |
| return { |
| ...primary, |
| district: items.length === 1 ? primary.district : `${primary.district} +${items.length - 1}`, |
| districts: items.map((item) => item.district), |
| district_count: items.length, |
| aggregate_opportunity_score: Number(primary.opportunity_score || 0), |
| aggregate_roi_pct: Number(primary.roi_pct || 0), |
| risk_level: dominantRisk, |
| planning_note: items.length > 1 ? `Có ${items.length} khu cùng tọa độ. Khu nổi bật: ${primary.district}.` : primary.planning_note |
| }; |
| }) |
| .sort((a, b) => Number(b.aggregate_opportunity_score || 0) - Number(a.aggregate_opportunity_score || 0)); |
| } |
|
|
| function markerScore(row) { |
| return Number(row?.aggregate_opportunity_score ?? row?.opportunity_score ?? 0); |
| } |
|
|
| function markerRoi(row) { |
| return Number(row?.aggregate_roi_pct ?? row?.roi_pct ?? 0); |
| } |
|
|
| function formatDateTime(value) { |
| if (!value) return "Chưa cập nhật"; |
| const date = new Date(value); |
| if (Number.isNaN(date.getTime())) return "Chưa cập nhật"; |
| return new Intl.DateTimeFormat("vi-VN", { |
| dateStyle: "medium", |
| timeStyle: "short" |
| }).format(date); |
| } |
|
|
| function aiStageInfo(status, loading = false) { |
| const normalized = String(status || "").toLowerCase(); |
| if (normalized === "error") return { label: "Error", tone: "high" }; |
| if (normalized === "stopped") return { label: "Paused", tone: "medium" }; |
| if (normalized === "done") return { label: "Ready", tone: "good" }; |
| if (normalized === "streaming") return { label: "Model warm", tone: "good" }; |
| if (normalized === "waiting_huggingface" || normalized === "waiting_featherless" || normalized === "waiting_provider") return { label: "Model loading", tone: "loading" }; |
| if (loading) return { label: "Model loading", tone: "loading" }; |
| return { label: "Ready", tone: "good" }; |
| } |
|
|
| function normalizeMarkdownText(text = "") { |
| return String(text) |
| .replace(/\r\n/g, "\n") |
| .replace(/^Chào\s+CEO,?\s*/i, "") |
| .replace(/^Chào\s+bạn,?\s*/i, "") |
| .replace(/^\s*---+\s*$/gm, "") |
| .replace(/^\s*(\d+)\.\s*$/gm, "$1.") |
| .replace(/^\s*(\d+)\.\s*\n\s*([^\n]+)/gm, "$1. $2") |
| .replace(/^\s*(\d+)\.\s*(Kết luận điều hành|Cơ sở nhận định|Rủi ro cần lưu ý|Hành động tiếp theo|Phát hiện chính|Lợi thế|Rủi ro|Hành động|Tổng quan|Cơ sở|Rủi ro cần lưu ý|Hành động tiếp theo)\s*$/gim, "## $2") |
| .replace(/^\s*[-*]\s*\n\s*([^\n]+)/gm, "- $1") |
| .replace(/^\*\*(Kết luận điều hành|Cơ sở nhận định|Rủi ro cần lưu ý|Hành động tiếp theo|Phát hiện chính|Lợi thế|Rủi ro|Hành động|Rủi ro quy hoạch|Rủi ro pháp lý|Ảnh hưởng thanh khoản|Gợi ý kiểm tra tiếp theo)\*\*:\s*/gm, "## $1\n") |
| .replace(/^(1|2|3|4)\.\s*(Kết luận điều hành|Cơ sở nhận định|Rủi ro cần lưu ý|Hành động tiếp theo|Phát hiện chính|Lợi thế|Rủi ro|Hành động)\s*:\s*/gim, "## $2\n") |
| .replace(/\n{3,}/g, "\n\n") |
| .trim(); |
| } |
|
|
| function sanitizeRecommendationText(text = "") { |
| return String(text) |
| .replace(/\r\n/g, "\n") |
| .replace(/\r/g, "\n") |
| .split("\n") |
| .map((rawLine) => { |
| let line = rawLine.trim(); |
| if (!line) return ""; |
| line = line.replace(/^\s*#{1,6}\s*/, "").trim(); |
| if (!line || /^[-*_ ]+$/.test(line)) return ""; |
| if (/\*/.test(line) && /^\*+\s*[A-Za-zÀ-ỹ_ ]{1,4}\s*$/u.test(line)) return ""; |
| if (/^(?:[-*]\s*)?(?:\*\*)?\s*(CHART_SPEC|CHART SPEC|CHARTSPEC|chart_type|title|caption|insight|x_key|series|reference_line)(?:\*\*)?\s*:/i.test(line)) return ""; |
| if (/^(?:\*\*)?\s*(ACTION|WHY|RISKS|SUGGESTION|BASIS|KET_LUAN|LY_DO|RUI_RO|GOI_Y|CO_SO|CHART_SPEC|CHART SPEC|CHARTSPEC)(?:\*\*)?\s*:?\s*$/i.test(line)) return ""; |
| line = line.replace(/\*\*/g, "").trim(); |
| line = line.replace(/^(ACTION|WHY|RISKS|SUGGESTION|BASIS|KET_LUAN|LY_DO|RUI_RO|GOI_Y|CO_SO)\s*:?\s*/i, "").trim(); |
| line = line.replace(/^(KẾT LUẬN|LÝ DO|RỦI RO CẦN NÊU|HÀNH ĐỘNG|CƠ SỞ ĐƯA RA KHUYẾN NGHỊ)\s*:?\s*/i, "").trim(); |
| return line; |
| }) |
| .filter(Boolean) |
| .join("\n") |
| .trim(); |
| } |
|
|
| function sanitizeRecommendationList(items = []) { |
| return items.map((item) => sanitizeRecommendationText(item)).filter(Boolean); |
| } |
|
|
| function providerWaitingCopy(status, llmMode) { |
| const normalizedStatus = String(status || "").toLowerCase(); |
| const normalizedMode = String(llmMode || "").toLowerCase(); |
| if (normalizedStatus === "waiting_featherless" || normalizedMode === "featherless-direct") { |
| return { |
| title: "Đang chờ Featherless...", |
| body: "Hệ thống đang chờ Featherless trả phản hồi để sinh câu ngữ nghĩa." |
| }; |
| } |
| if (normalizedStatus === "waiting_huggingface" || normalizedMode === "hf-hosted") { |
| return { |
| title: "Đang chờ Hugging Face...", |
| body: "Hệ thống đang chờ phản hồi từ hosted model để sinh câu ngữ nghĩa." |
| }; |
| } |
| return { |
| title: "Đang chờ AI provider...", |
| body: "Hệ thống đang chờ phản hồi từ model để sinh câu ngữ nghĩa." |
| }; |
| } |
|
|
| function renderMarkdown(text = "") { |
| const normalized = normalizeMarkdownText(text); |
| if (!normalized) return ""; |
|
|
| const escapeInline = (value) => String(value) |
| .replace(/&/g, "&") |
| .replace(/</g, "<") |
| .replace(/>/g, ">") |
| .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>"); |
|
|
| const lines = normalized.split("\n"); |
| const segments = []; |
| let paragraph = []; |
| let currentListType = null; |
| let currentList = []; |
|
|
| const flushParagraph = () => { |
| if (!paragraph.length) return; |
| segments.push(`<p>${paragraph.map((line) => escapeInline(line)).join("<br />")}</p>`); |
| paragraph = []; |
| }; |
|
|
| const flushList = () => { |
| if (!currentList.length) return; |
| const tag = currentListType === "ol" ? "ol" : "ul"; |
| segments.push(`<${tag}>${currentList.map((item) => `<li>${escapeInline(item)}</li>`).join("")}</${tag}>`); |
| currentList = []; |
| currentListType = null; |
| }; |
|
|
| lines.forEach((rawLine) => { |
| const line = rawLine.trim(); |
| if (!line) { |
| flushList(); |
| flushParagraph(); |
| return; |
| } |
|
|
| const headingMatch = line.match(/^(#{1,3})\s+(.*)$/); |
| if (headingMatch) { |
| flushList(); |
| flushParagraph(); |
| const level = Math.min(3, headingMatch[1].length); |
| segments.push(`<h${level}>${escapeInline(headingMatch[2])}</h${level}>`); |
| return; |
| } |
|
|
| const orderedMatch = line.match(/^(\d+)\.\s+(.*)$/); |
| if (orderedMatch) { |
| flushParagraph(); |
| if (currentListType && currentListType !== "ol") flushList(); |
| currentListType = "ol"; |
| currentList.push(orderedMatch[2]); |
| return; |
| } |
|
|
| const bulletMatch = line.match(/^[-*]\s+(.*)$/); |
| if (bulletMatch) { |
| flushParagraph(); |
| if (currentListType && currentListType !== "ul") flushList(); |
| currentListType = "ul"; |
| currentList.push(bulletMatch[1]); |
| return; |
| } |
|
|
| if (currentList.length) flushList(); |
| paragraph.push(line); |
| }); |
|
|
| flushList(); |
| flushParagraph(); |
| return segments.join(""); |
| } |
|
|
| function parseStructuredSections(text = "", sectionTitles = []) { |
| const normalized = normalizeMarkdownText(text); |
| if (!normalized) return []; |
|
|
| const canonical = sectionTitles.map((title) => ({ |
| title, |
| pattern: new RegExp(`^(?:#{1,3}\\s*)?(?:\\d+\\.\\s*)?(?:\\*\\*)?${title}(?:\\*\\*)?\\s*(?::|$)`, "i") |
| })); |
|
|
| const lines = normalized.split("\n"); |
| const sections = []; |
| let current = null; |
|
|
| const startSection = (title) => { |
| if (current) sections.push(current); |
| current = { title, lines: [] }; |
| }; |
|
|
| lines.forEach((rawLine) => { |
| const line = rawLine.trim(); |
| if (!line || /^---+$/.test(line)) return; |
| const matched = canonical.find((item) => item.pattern.test(line)); |
| if (matched) { |
| startSection(matched.title); |
| return; |
| } |
| if (/^\d+\.\s+/.test(line)) { |
| return; |
| } |
| if (!current) { |
| startSection(sectionTitles[0] || "Nội dung"); |
| } |
| current.lines.push(line); |
| }); |
|
|
| if (current) sections.push(current); |
| return sections |
| .map((section) => ({ |
| title: section.title, |
| body: section.lines.join("\n").trim() |
| })) |
| .filter((section) => section.body); |
| } |
|
|
| function StructuredResponse({ text, sectionTitles }) { |
| const sections = parseStructuredSections(text, sectionTitles); |
| if (!sections.length) return <MarkdownBlock text={text} />; |
| return ( |
| <div className="structured-response"> |
| {sections.map((section) => ( |
| <article key={section.title} className="structured-response-card"> |
| <strong>{section.title}</strong> |
| <MarkdownBlock text={section.body} /> |
| </article> |
| ))} |
| </div> |
| ); |
| } |
|
|
| function MarkdownBlock({ text }) { |
| return <div className="markdown-body" dangerouslySetInnerHTML={{ __html: renderMarkdown(text) }} />; |
| } |
|
|
| function SectionTabs({ tabs, active, onChange }) { |
| return ( |
| <div className="section-tabs" role="tablist" aria-label="Section tabs"> |
| {tabs.map((tab) => ( |
| <button |
| key={tab.id} |
| className={active === tab.id ? "active" : ""} |
| onClick={() => onChange(tab.id)} |
| type="button" |
| > |
| {tab.label} |
| </button> |
| ))} |
| </div> |
| ); |
| } |
|
|
| function InsightHero({ title, body, tone = "default", meta }) { |
| return ( |
| <section className={`insight-hero tone-${tone}`}> |
| <div> |
| <strong>{title}</strong> |
| <p>{body}</p> |
| </div> |
| {meta ? <small>{meta}</small> : null} |
| </section> |
| ); |
| } |
|
|
| function Disclosure({ title, children, defaultOpen = false, open: controlledOpen, onToggle, compact = false }) { |
| const [open, setOpen] = useState(defaultOpen); |
| useEffect(() => { |
| setOpen(defaultOpen); |
| }, [defaultOpen]); |
| useEffect(() => { |
| if (controlledOpen !== undefined) { |
| setOpen(Boolean(controlledOpen)); |
| } |
| }, [controlledOpen]); |
| return ( |
| <details |
| className={`disclosure ${compact ? "compact" : ""}`} |
| open={open} |
| onToggle={(event) => { |
| const nextOpen = event.currentTarget.open; |
| setOpen(nextOpen); |
| if (onToggle) onToggle(nextOpen); |
| }} |
| > |
| <summary>{title}</summary> |
| <div className="disclosure-body">{children}</div> |
| </details> |
| ); |
| } |
|
|
| function buildExecutiveTrend(timeline = [], overrideGrowthPct = null) { |
| if (!timeline.length) return []; |
| const sorted = [...timeline].sort((a, b) => String(a.date).localeCompare(String(b.date))); |
| const yearlyActual = new Map(); |
| sorted.forEach((row) => { |
| const year = Number(String(row.date).slice(0, 4)); |
| if (!yearlyActual.has(year)) yearlyActual.set(year, []); |
| yearlyActual.get(year).push(row); |
| }); |
|
|
| const actualRows = [...yearlyActual.entries()].map(([year, rows]) => ({ |
| year, |
| price_billion: rows.reduce((sum, row) => sum + Number(row.price_billion || 0), 0) / rows.length, |
| roi_pct: rows.reduce((sum, row) => sum + Number(row.roi_pct || 0), 0) / rows.length, |
| stage: year < 2025 ? "actual" : "projection" |
| })); |
| const base2025 = actualRows.find((row) => row.year === 2025) || actualRows[actualRows.length - 1]; |
| const recent = actualRows.slice(-3); |
| const firstRecent = recent[0] || base2025; |
| const lastRecent = recent[recent.length - 1] || base2025; |
| const spanYears = Math.max(1, (lastRecent.year || 2025) - (firstRecent.year || 2024)); |
| const inferredGrowth = Math.pow((lastRecent.price_billion || 1) / Math.max(firstRecent.price_billion || 1, 0.1), 1 / spanYears) - 1; |
| const annualGrowth = overrideGrowthPct === null |
| ? Math.max(0.02, Math.min(0.09, Number.isFinite(inferredGrowth) ? inferredGrowth : 0.055)) |
| : Number(overrideGrowthPct) / 100; |
| const roiSlope = ((lastRecent.roi_pct || 0) - (firstRecent.roi_pct || 0)) / spanYears; |
| const startPrice = base2025.price_billion || lastRecent.price_billion || 0; |
| const startRoi = base2025.roi_pct || lastRecent.roi_pct || 0; |
|
|
| const projection = []; |
| for (let year = 2025; year <= 2050; year += 1) { |
| const offset = year - 2025; |
| projection.push({ |
| year, |
| price_billion: Number((startPrice * ((1 + annualGrowth) ** offset)).toFixed(2)), |
| roi_pct: Number(Math.max(6, Math.min(24, startRoi + roiSlope * offset * 0.35)).toFixed(2)), |
| stage: year === 2025 ? "actual" : "projection" |
| }); |
| } |
| return projection; |
| } |
|
|
| function buildTrendSnapshots(trend = []) { |
| if (!trend.length) return []; |
| const desiredYears = [2025, 2030, 2035, 2040, 2045, 2050]; |
| const byYear = new Map(trend.map((row) => [Number(row.year), row])); |
| const latest = trend[trend.length - 1]; |
| return desiredYears |
| .map((year) => byYear.get(year) || latest) |
| .filter(Boolean) |
| .map((row, index) => ({ |
| year: row.year, |
| price_billion: Number(row.price_billion || 0), |
| roi_pct: Number(row.roi_pct || 0), |
| stage: row.stage || "projection", |
| emphasis: index === 0 ? "current" : index === desiredYears.length - 1 ? "target" : "forecast" |
| })); |
| } |
|
|
| function normalizeText(value = "") { |
| return String(value).trim().toLowerCase(); |
| } |
|
|
| function propertyNeedsRoomFields(propertyType = "") { |
| const text = normalizeText(propertyType); |
| return !["đất", "kho", "xưởng", "bãi", "nông nghiệp", "mặt bằng"].some((keyword) => text.includes(keyword)); |
| } |
|
|
| function propertyNeedsFloorField(propertyType = "") { |
| const text = normalizeText(propertyType); |
| return !["đất", "nông nghiệp", "bãi", "mặt bằng"].some((keyword) => text.includes(keyword)); |
| } |
|
|
| function toNullableNumber(value) { |
| if (value === "" || value === null || value === undefined) return null; |
| const number = Number(value); |
| return Number.isFinite(number) ? number : null; |
| } |
|
|
| function useTypewriterText(text, enabled = true, speed = 14) { |
| const [displayed, setDisplayed] = useState(""); |
|
|
| useEffect(() => { |
| const source = String(text || ""); |
| if (!enabled || !source) { |
| setDisplayed(source); |
| return undefined; |
| } |
|
|
| setDisplayed(""); |
| let index = 0; |
| const step = Math.max(1, Math.ceil(source.length / 120)); |
| const timer = window.setInterval(() => { |
| index = Math.min(source.length, index + step); |
| setDisplayed(source.slice(0, index)); |
| if (index >= source.length) { |
| window.clearInterval(timer); |
| } |
| }, speed); |
|
|
| return () => window.clearInterval(timer); |
| }, [text, enabled, speed]); |
|
|
| return displayed; |
| } |
|
|
| function buildOverviewRecommendation(kpis, riskyRows = [], growthPct = 8) { |
| const weakest = riskyRows[0]; |
| if (growthPct <= 0 && weakest) { |
| return { |
| title: "Khuyến nghị phòng thủ", |
| body: `Giả định tăng trưởng ${growthPct.toFixed(1)}% cho thấy nên hạn chế mua mới và xem xét bán bớt hoặc cơ cấu lại tại ${weakest.district}. Đây là nhóm dễ chịu áp lực giảm giá và hiệu quả đầu tư thấp hơn mặt bằng chung.` |
| }; |
| } |
| if (growthPct < 5 && weakest) { |
| return { |
| title: "Khuyến nghị giữ tiền mặt cao hơn", |
| body: `Tăng trưởng chậm làm biên an toàn thu hẹp. Nên giải ngân chọn lọc tại ${kpis.best_district || "khu dẫn đầu"} và tránh mở rộng quá nhanh ở ${weakest.district}.` |
| }; |
| } |
| return { |
| title: `Ưu tiên mở rộng tại ${kpis.best_district || "khu vực dẫn đầu"}`, |
| body: `Với giả định tăng trưởng ${growthPct.toFixed(1)}%, danh mục vẫn phù hợp để tích lũy thêm ở khu dẫn đầu và chỉ kiểm soát rủi ro ở các khu có hiệu quả thấp hoặc biến động cao.` |
| }; |
| } |
|
|
| function buildScenarioMilestones(whatIf) { |
| if (!whatIf?.projection?.length) return []; |
| const budget = Number(whatIf.input?.budget_vnd || 0); |
| const rows = whatIf.projection.map((row) => ({ |
| ...row, |
| status: Number(row.pessimistic || 0) < budget ? "Rủi ro lỗ" : Number(row.base || 0) < budget ? "Hoà vốn yếu" : "An toàn hơn" |
| })); |
| return rows.filter((row, index) => index === 0 || index === rows.length - 1 || index % 2 === 0).slice(0, 6); |
| } |
|
|
| function defaultDecisionChartSpec() { |
| return { |
| chart_type: "line", |
| title: "", |
| caption: "So sánh ba kịch bản xấu, cơ sở và tích cực theo từng năm.", |
| insight: "Đường cơ sở là trọng tâm, hai đường còn lại giúp nhìn nhanh biên an toàn.", |
| x_key: "calendar_year", |
| series: ["pessimistic", "base", "optimistic"], |
| reference_line: "budget_vnd" |
| }; |
| } |
|
|
| function chartTitleForDecisionTab(tab = "whatif") { |
| if (tab === "scenario") return "Dải kịch bản theo từng năm"; |
| if (tab === "asset") return "Mức hấp dẫn tài sản so với danh mục"; |
| return "Mô phỏng tài chính theo vốn và tăng trưởng"; |
| } |
|
|
| function chartTypeForDecisionTab(tab = "whatif") { |
| if (tab === "scenario") return "area"; |
| if (tab === "asset") return "bar"; |
| return "line"; |
| } |
|
|
| function normalizeChartSpec(spec) { |
| const base = defaultDecisionChartSpec(); |
| if (!spec || typeof spec !== "object") return base; |
| const series = Array.isArray(spec.series) |
| ? spec.series.filter(Boolean) |
| : String(spec.series || "").split(",").map((item) => item.trim()).filter(Boolean); |
| return { |
| ...base, |
| ...spec, |
| chart_type: ["line", "area", "bar"].includes(String(spec.chart_type || "").toLowerCase()) ? String(spec.chart_type).toLowerCase() : base.chart_type, |
| x_key: spec.x_key || base.x_key, |
| series: series.length ? series : base.series, |
| reference_line: spec.reference_line || base.reference_line |
| }; |
| } |
|
|
| function buildExecutiveBriefs(districtRows = []) { |
| const rows = [...(districtRows || [])].filter((row) => row && row.district); |
| if (!rows.length) return []; |
|
|
| const byScore = [...rows].sort((a, b) => Number(b.opportunity_score || 0) - Number(a.opportunity_score || 0)); |
| const byValue = [...rows].sort((a, b) => Number(a.price_m2_million || 0) - Number(b.price_m2_million || 0) || Number(b.roi_pct || 0) - Number(a.roi_pct || 0)); |
| const byRisk = [...rows].sort((a, b) => Number(b.volatility || 0) - Number(a.volatility || 0) || Number(a.opportunity_score || 0) - Number(b.opportunity_score || 0)); |
|
|
| const picks = [byScore[0], byValue[0], byRisk[0]].filter(Boolean); |
| const unique = []; |
| const seen = new Set(); |
| picks.forEach((row, index) => { |
| if (!seen.has(row.district)) { |
| unique.push({ ...row, kind: index === 0 ? "priority" : index === 1 ? "value" : "risk" }); |
| seen.add(row.district); |
| } |
| }); |
|
|
| if (!unique.length && byScore[0]) unique.push({ ...byScore[0], kind: "priority" }); |
| if (unique.length < 3) { |
| for (const row of rows) { |
| if (unique.some((item) => item.district === row.district)) continue; |
| unique.push({ ...row, kind: unique.length === 0 ? "priority" : unique.length === 1 ? "value" : "risk" }); |
| if (unique.length === 3) break; |
| } |
| } |
|
|
| return unique.slice(0, 3).map((row, index) => { |
| const score = Number(row.opportunity_score || 0); |
| const roi = Number(row.roi_pct || 0); |
| const price = Number(row.price_m2_million || 0); |
| const volatility = Number(row.volatility || 0); |
| const kind = row.kind || (index === 0 ? "priority" : index === 1 ? "value" : "risk"); |
| const title = kind === "priority" |
| ? "Ưu tiên mở rộng" |
| : kind === "value" |
| ? "Tích lũy chọn lọc" |
| : "Theo dõi rủi ro"; |
| const edge = kind === "priority" |
| ? `Điểm cơ hội ${score.toFixed(1)}/100, ROI ${roi.toFixed(2)}% và thanh khoản ${Number(row.listings || 0).toLocaleString("vi-VN")} tin.` |
| : kind === "value" |
| ? `Giá/m² ${price.toFixed(1)} triệu tạo biên vào lệnh tốt hơn, vẫn giữ ROI ${roi.toFixed(2)}%.` |
| : `Biến động ROI ${volatility.toFixed(2)} cho thấy nên giữ tỷ trọng nhỏ và theo dõi sát.`; |
| const strength = kind === "risk" |
| ? `Mặc dù rủi ro cao hơn, khu vực này vẫn giúp đa dạng hóa danh mục nếu kiểm soát tỷ trọng.` |
| : kind === "value" |
| ? `Phù hợp cho chiến lược gom dần vì mặt bằng giá thấp hơn mặt bằng chung.` |
| : `Phù hợp để dẫn danh mục vì đang nổi bật cả về hiệu quả lẫn độ quan tâm thị trường.`; |
| const risk = kind === "priority" |
| ? `Cần kiểm soát pháp lý và quy hoạch vì khu dẫn đầu thường đi kèm mặt bằng giá cao hơn.` |
| : kind === "value" |
| ? `Rủi ro là thanh khoản có thể thấp hơn nếu khu vực chưa đủ đông người mua.` |
| : `Rủi ro là biến động lợi suất lớn nên không nên giải ngân quá nhanh.`; |
| return { |
| ...row, |
| title, |
| edge, |
| strength, |
| risk, |
| tag: kind === "priority" ? "Dẫn đầu" : kind === "value" ? "Giá tốt" : "Cảnh báo" |
| }; |
| }); |
| } |
|
|
| function DecisionChart({ whatIf, chartSpec }) { |
| const spec = normalizeChartSpec(chartSpec); |
| const data = (whatIf?.projection || []).map((row) => ({ ...row, calendar_year: 2025 + Number(row.year || 0) })); |
| if (!data.length) return <p className="muted">Biểu đồ sẽ hiển thị triển vọng theo ba kịch bản đầu tư.</p>; |
|
|
| const commonProps = { |
| data, |
| margin: { top: 8, right: 16, left: 0, bottom: 0 } |
| }; |
| const colors = { |
| pessimistic: "#c2410c", |
| base: "#2563eb", |
| optimistic: "#0f766e" |
| }; |
| const seriesMap = { |
| pessimistic: "Kịch bản xấu", |
| base: "Kịch bản cơ sở", |
| optimistic: "Kịch bản tích cực" |
| }; |
| const yFormatter = (v) => `${(v / 1_000_000_000).toFixed(0)} tỷ`; |
| const tooltipFormatter = (v) => money(v); |
| const series = spec.series.filter((key) => key in seriesMap); |
| const referenceValue = spec.reference_line === "budget_vnd" ? whatIf?.input?.budget_vnd : null; |
|
|
| const axes = ( |
| <> |
| <CartesianGrid strokeDasharray="3 3" /> |
| <XAxis dataKey={spec.x_key || "calendar_year"} /> |
| <YAxis tickFormatter={yFormatter} /> |
| <Tooltip formatter={tooltipFormatter} labelFormatter={(value) => `Năm ${value}`} /> |
| <Legend /> |
| {referenceValue ? <ReferenceLine y={referenceValue} stroke="#64748b" strokeDasharray="4 4" label="Vốn ban đầu" /> : null} |
| </> |
| ); |
|
|
| if (spec.chart_type === "area") { |
| return ( |
| <ResponsiveContainer width="100%" height={380}> |
| <AreaChart {...commonProps}> |
| {axes} |
| {series.map((key, index) => ( |
| <Area |
| key={key} |
| dataKey={key} |
| name={seriesMap[key]} |
| fill={colors[key]} |
| stroke={colors[key]} |
| fillOpacity={index === 0 ? 0.18 : index === 1 ? 0.28 : 0.2} |
| dot={false} |
| /> |
| ))} |
| </AreaChart> |
| </ResponsiveContainer> |
| ); |
| } |
|
|
| if (spec.chart_type === "bar") { |
| return ( |
| <ResponsiveContainer width="100%" height={380}> |
| <BarChart {...commonProps}> |
| {axes} |
| {series.map((key) => ( |
| <Bar key={key} dataKey={key} name={seriesMap[key]} fill={colors[key]} radius={[6, 6, 0, 0]} /> |
| ))} |
| </BarChart> |
| </ResponsiveContainer> |
| ); |
| } |
|
|
| return ( |
| <ResponsiveContainer width="100%" height={380}> |
| <ComposedChart {...commonProps}> |
| {axes} |
| {series.map((key) => ( |
| <Line key={key} dataKey={key} name={seriesMap[key]} stroke={colors[key]} strokeWidth={key === "base" ? 3 : 2} dot={false} /> |
| ))} |
| </ComposedChart> |
| </ResponsiveContainer> |
| ); |
| } |
|
|
| function ResultSkeleton() { |
| return ( |
| <div className="result-skeleton" aria-hidden="true"> |
| <div className="skeleton-line skeleton-lg" /> |
| <div className="skeleton-grid"> |
| <div className="skeleton-card" /> |
| <div className="skeleton-card" /> |
| <div className="skeleton-card" /> |
| <div className="skeleton-card" /> |
| </div> |
| <div className="skeleton-line" /> |
| <div className="skeleton-line" /> |
| </div> |
| ); |
| } |
|
|
| function buildGrowthWhatIfPayload(predictForm, simulationForm, filters, growthPct) { |
| return { |
| district: predictForm.district, |
| property_type: predictForm.property_type, |
| legal_documents: predictForm.legal_documents, |
| area: Number(predictForm.area), |
| bedrooms: propertyNeedsRoomFields(predictForm.property_type) ? toNullableNumber(predictForm.bedrooms) : null, |
| toilets: propertyNeedsRoomFields(predictForm.property_type) ? toNullableNumber(predictForm.toilets) : null, |
| floors: propertyNeedsFloorField(predictForm.property_type) ? toNullableNumber(predictForm.floors) : null, |
| roi_expected: Number(predictForm.roi_expected), |
| budget_vnd: Number(simulationForm.budget_billion) * 1_000_000_000, |
| annual_growth_pct: Number(growthPct), |
| years: Number(simulationForm.years), |
| filters |
| }; |
| } |
|
|
| function buildOverviewGrowthPayload(analytics, filters, growthPct) { |
| const kpis = analytics?.kpis || {}; |
| const districts = analytics?.districts || []; |
| const types = analytics?.types || []; |
| const samples = analytics?.samples || []; |
| const topDistrict = kpis.best_district || districts[0]?.district || (filters?.city || "TP Hồ Chí Minh"); |
| const bestType = types[0]?.["Type of House"] || types[0]?.type || samples[0]?.["Type of House"] || "Nhà mặt tiền"; |
| const bestLegal = samples[0]?.["Legal Documents"] || "Sổ hồng"; |
| const avgArea = Number(districts[0]?.avg_area || samples[0]?.area || 80); |
| const budgetSource = Number(kpis.avg_transaction_price || kpis.median_price || kpis.total_value / Math.max(1, kpis.listings || 1) || 0); |
| const budgetVnd = Math.max(1, budgetSource || 1); |
| const roiExpected = Number.isFinite(Number(kpis.avg_roi)) ? Number(kpis.avg_roi) / 100 : 0.14; |
|
|
| return { |
| district: topDistrict, |
| property_type: bestType, |
| legal_documents: bestLegal, |
| area: Math.max(1, avgArea), |
| bedrooms: null, |
| toilets: null, |
| floors: null, |
| roi_expected: roiExpected, |
| budget_vnd: budgetVnd, |
| annual_growth_pct: Number(growthPct), |
| years: 25, |
| filters: { |
| city: filters?.city || "TP Hồ Chí Minh", |
| districts: kpis.best_district ? [kpis.best_district] : [], |
| property_types: bestType ? [bestType] : [], |
| price_min: null, |
| price_max: null, |
| area_min: null, |
| area_max: null, |
| roi_min: null, |
| roi_max: null |
| } |
| }; |
| } |
|
|
| function buildReportQuestion(analytics, filters) { |
| const best = analytics?.kpis?.best_district || "khu vực dẫn đầu"; |
| const risky = (analytics?.risky || []).slice(0, 3).map((row) => row.district).filter(Boolean); |
| const city = filters?.city || "thị trường"; |
| return `Viết ghi chú điều hành ngắn gọn cho báo cáo định kỳ của ${city}. Nhấn mạnh ${best}, ROI trung bình ${pct(analytics?.kpis?.avg_roi)}, các khu vực cần theo dõi gồm ${risky.join(", ") || "chưa có cảnh báo rõ"}. Nêu rõ lợi thế, rủi ro và hành động ưu tiên theo giọng điệu chuyên viên phân tích đầu tư.`; |
| } |
|
|
| function buildReportCoverSummary(analytics, whatIf) { |
| const kpis = analytics?.kpis || {}; |
| const executiveTrend = buildExecutiveTrend(analytics?.timeline || [], 8); |
| const baseline = executiveTrend[0] || null; |
| const latest = executiveTrend[executiveTrend.length - 1] || null; |
| const bestDistrict = kpis.best_district || analytics?.districts?.[0]?.district || "Khu vực dẫn đầu"; |
|
|
| const projectedFutureValue = whatIf?.summary?.future_value ?? (latest?.price_billion ? latest.price_billion * 1_000_000_000 : null); |
| const projectedCumulativeRoi = whatIf?.summary?.cumulative_roi_pct ?? ( |
| baseline && latest && Number(baseline.price_billion) > 0 |
| ? ((Number(latest.price_billion) / Number(baseline.price_billion)) - 1) * 100 |
| : null |
| ); |
|
|
| const projectedPaybackYears = whatIf?.summary?.payback_years ?? (() => { |
| const roiFromKpis = Number(kpis.avg_roi); |
| if (Number.isFinite(roiFromKpis) && roiFromKpis > 0) return 100 / roiFromKpis; |
| const roiFromTrend = Number(latest?.roi_pct); |
| if (Number.isFinite(roiFromTrend) && roiFromTrend > 0) return 100 / roiFromTrend; |
| return null; |
| })(); |
|
|
| const sourceLabel = whatIf ? "Từ mô phỏng đầu tư" : "Ước tính theo xu hướng điều hành"; |
|
|
| return { |
| bestDistrict, |
| projectedFutureValue, |
| projectedCumulativeRoi, |
| projectedPaybackYears, |
| sourceLabel |
| }; |
| } |
|
|
| async function request(path, options = {}) { |
| const response = await fetch(`${API_URL}${path}`, { |
| headers: { "Content-Type": "application/json" }, |
| ...options |
| }); |
| if (!response.ok) { |
| let detail = `API ${path} failed`; |
| try { |
| const payload = await response.json(); |
| detail = payload?.detail || detail; |
| } catch { |
| detail = (await response.text()) || detail; |
| } |
| throw new Error(detail); |
| } |
| return response.json(); |
| } |
|
|
| async function requestNdjsonStream(path, options = {}, handlers = {}) { |
| const response = await fetch(`${API_URL}${path}`, { |
| headers: { "Content-Type": "application/json" }, |
| ...options |
| }); |
| if (!response.ok) { |
| let detail = `API ${path} failed`; |
| try { |
| const payload = await response.json(); |
| detail = payload?.detail || detail; |
| } catch { |
| detail = (await response.text()) || detail; |
| } |
| throw new Error(detail); |
| } |
| if (!response.body) throw new Error("Streaming is not supported by this browser."); |
|
|
| const reader = response.body.getReader(); |
| const decoder = new TextDecoder(); |
| let buffer = ""; |
| while (true) { |
| const { done, value } = await reader.read(); |
| if (done) break; |
| buffer += decoder.decode(value, { stream: true }); |
| let newlineIndex = buffer.indexOf("\n"); |
| while (newlineIndex >= 0) { |
| const rawLine = buffer.slice(0, newlineIndex).trim(); |
| buffer = buffer.slice(newlineIndex + 1); |
| newlineIndex = buffer.indexOf("\n"); |
| if (!rawLine) continue; |
| let event; |
| try { |
| event = JSON.parse(rawLine); |
| } catch { |
| continue; |
| } |
| if (event.type === "meta" && handlers.onMeta) handlers.onMeta(event); |
| if (event.type === "stage" && handlers.onStage) handlers.onStage(event); |
| if (event.type === "what_if" && handlers.onWhatIf) handlers.onWhatIf(event); |
| if (event.type === "line" && handlers.onLine) handlers.onLine(event); |
| if (event.type === "token" && handlers.onToken) handlers.onToken(event); |
| if (event.type === "done" && handlers.onDone) handlers.onDone(event); |
| if (event.type === "error") { |
| if (handlers.onError) handlers.onError(event); |
| throw new Error(event.detail || "Streaming error"); |
| } |
| } |
| } |
| } |
|
|
| function Icon({ name, fill = false }) { |
| return ( |
| <span className="material-symbols-outlined" style={{ fontVariationSettings: fill ? "'FILL' 1" : undefined }}> |
| {name} |
| </span> |
| ); |
| } |
|
|
| function KpiCard({ label, value, delta, icon, tone = "default" }) { |
| return ( |
| <article className={`kpi-card tone-${tone}`}> |
| <div className="kpi-head"> |
| <span>{label}</span> |
| {icon ? <Icon name={icon} /> : null} |
| </div> |
| <strong>{value}</strong> |
| {delta ? <small>{delta}</small> : null} |
| </article> |
| ); |
| } |
|
|
| function Panel({ title, children, action, className = "" }) { |
| const hint = Object.entries(PANEL_HINTS).find(([key]) => title.startsWith(key))?.[1]; |
| return ( |
| <section className={`panel ${className}`}> |
| <div className="panel-head"> |
| <div className="panel-title-wrap"> |
| <h3 tabIndex={0} aria-label={hint ? `${title}. ${hint}` : title}>{title}</h3> |
| {hint ? <span className="panel-hint-tooltip">{hint}</span> : null} |
| </div> |
| {action} |
| </div> |
| {children} |
| </section> |
| ); |
| } |
|
|
| function PageHeader({ eyebrow, title, description }) { |
| return ( |
| <div className="page-header"> |
| <p>{eyebrow}</p> |
| <h2>{title}</h2> |
| <span>{description}</span> |
| </div> |
| ); |
| } |
|
|
| function AppFooter({ activePage, loading, aiRuntime, analytics, etl }) { |
| const dataTimestamp = analytics?.kpis?.last_data_refresh || etl?.status?.finished_at || aiRuntime?.updated_at; |
| const systemStatus = loading ? "Data syncing" : "System ready"; |
| return ( |
| <footer className="app-footer"> |
| <div className="app-footer-brand"> |
| <strong>PropertyVision BI</strong> |
| <span>Decision Intelligence for real estate analysis and executive reporting.</span> |
| </div> |
| <div className="app-footer-meta"> |
| <span>Version {APP_VERSION}</span> |
| <span>© {new Date().getFullYear()} PropertyVision</span> |
| <span>Updated {dataTimestamp ? formatDateTime(dataTimestamp) : "Chưa cập nhật"}</span> |
| <span>{systemStatus}</span> |
| </div> |
| </footer> |
| ); |
| } |
|
|
| function buildFilterSummary(filters) { |
| const parts = []; |
| if (filters.city) parts.push(filters.city); |
| parts.push(filters.districts?.length ? `${filters.districts.length} khu vực` : "Toàn bộ khu vực"); |
| if (filters.property_types?.length) parts.push(`${filters.property_types.length} loại tài sản`); |
| if (filters.roi_min !== null && filters.roi_min !== undefined) parts.push(`ROI >= ${Number(filters.roi_min).toFixed(1)}%`); |
| if (filters.price_max !== null && filters.price_max !== undefined) parts.push(`Giá <= ${Number(filters.price_max).toFixed(1)} tỷ`); |
| return parts.join(" · "); |
| } |
|
|
| function isDefaultFilters(filters) { |
| return ( |
| (filters.city || emptyFilters.city) === emptyFilters.city |
| && JSON.stringify(filters.districts || []) === JSON.stringify(emptyFilters.districts) |
| && JSON.stringify(filters.property_types || []) === JSON.stringify(emptyFilters.property_types) |
| && filters.price_min === emptyFilters.price_min |
| && filters.price_max === emptyFilters.price_max |
| && filters.area_min === emptyFilters.area_min |
| && filters.area_max === emptyFilters.area_max |
| && filters.roi_min === emptyFilters.roi_min |
| && filters.roi_max === emptyFilters.roi_max |
| ); |
| } |
|
|
| function AppShell({ activePage, setActivePage, children, loading, metadata, filters, setFilters, aiRuntime, analytics, etl }) { |
| const [filtersOpen, setFiltersOpen] = useState(false); |
| const [navTip, setNavTip] = useState(null); |
|
|
| function navigate(page) { |
| window.history.pushState({}, "", page.path); |
| setActivePage(page.id); |
| } |
|
|
| function showNavTip(page, event) { |
| const rect = event.currentTarget.getBoundingClientRect(); |
| setNavTip({ |
| title: page.label, |
| description: page.description, |
| top: rect.top + rect.height / 2, |
| }); |
| } |
|
|
| const filterSummary = buildFilterSummary(filters); |
| const resetFilters = () => setFilters(emptyFilters); |
| const hasActiveFilters = !isDefaultFilters(filters); |
| const runtimeStage = aiStageInfo(aiRuntime?.status, !aiRuntime); |
|
|
| useEffect(() => { |
| const handler = () => setActivePage(currentPageId()); |
| window.addEventListener("popstate", handler); |
| return () => window.removeEventListener("popstate", handler); |
| }, [setActivePage]); |
|
|
| useEffect(() => { |
| function handleEscape(event) { |
| if (event.key === "Escape") setFiltersOpen(false); |
| } |
| window.addEventListener("keydown", handleEscape); |
| return () => window.removeEventListener("keydown", handleEscape); |
| }, []); |
|
|
| return ( |
| <div className="enterprise-shell"> |
| <aside className="side-nav"> |
| <div className="brand-block"> |
| <div className="brand-mark">PV</div> |
| <div> |
| <h1>PropertyVision</h1> |
| <p>Decision Intelligence</p> |
| </div> |
| </div> |
| <nav className="main-nav"> |
| {pages.map((page) => ( |
| <button |
| key={page.id} |
| className={activePage === page.id ? "active" : "" } |
| onClick={() => navigate(page)} |
| onMouseEnter={(event) => showNavTip(page, event)} |
| onMouseLeave={() => setNavTip(null)} |
| onFocus={(event) => showNavTip(page, event)} |
| onBlur={() => setNavTip(null)} |
| title={page.description} |
| aria-label={`${page.label}. ${page.description}`} |
| > |
| <Icon name={page.icon} fill={activePage === page.id} /> |
| <span className="nav-label">{page.label}</span> |
| </button> |
| ))} |
| </nav> |
| <GlobalFilters metadata={metadata} filters={filters} setFilters={setFilters} /> |
| </aside> |
| {navTip ? ( |
| <div className="nav-tooltip" style={{ top: `${Math.round(navTip.top)}px` }}> |
| <strong>{navTip.title}</strong> |
| <span>{navTip.description}</span> |
| </div> |
| ) : null} |
| |
| <header className="top-appbar"> |
| <div className="top-appbar-left"> |
| <div className="crumb"> |
| <Icon name="search" /> |
| <span>PROPERTYVISION / {pages.find((page) => page.id === activePage)?.short?.toUpperCase()}</span> |
| </div> |
| <div className="filter-status-row"> |
| <small className="filter-status-line">{filterSummary}</small> |
| {hasActiveFilters ? <button type="button" className="clear-filters-btn" onClick={resetFilters}>Xóa bộ lọc</button> : null} |
| </div> |
| </div> |
| <strong></strong> |
| <div className="top-actions"> |
| <button type="button" className="filter-drawer-trigger" onClick={() => setFiltersOpen(true)}> |
| <Icon name="tune" /> |
| <span>Bộ lọc</span> |
| </button> |
| {loading ? <span className="live-pill">Đang cập nhật</span> : <span className="live-pill online">Đang hoạt động</span>} |
| <span className={`badge ${runtimeStage.tone}`}>{runtimeStage.label}</span> |
| <Icon name="notifications_active" /> |
| <Icon name="help_outline" /> |
| <Icon name="account_circle" /> |
| </div> |
| </header> |
| |
| {filtersOpen ? <button type="button" className="drawer-backdrop" aria-label="Đóng bộ lọc" onClick={() => setFiltersOpen(false)} /> : null} |
| <GlobalFilters |
| metadata={metadata} |
| filters={filters} |
| setFilters={setFilters} |
| open={filtersOpen} |
| onClose={() => setFiltersOpen(false)} |
| /> |
| |
| <main className="page-canvas"> |
| <div className="page-content">{children}</div> |
| <AppFooter activePage={activePage} loading={loading} aiRuntime={aiRuntime} analytics={analytics} etl={etl} /> |
| </main> |
| </div> |
| ); |
| } |
|
|
| function GlobalFilters({ metadata, filters, setFilters, open, onClose }) { |
| const [districtQuery, setDistrictQuery] = useState(""); |
| if (!metadata) return null; |
| const cities = metadata.cities || []; |
| const districtOptions = metadata.districts_by_city?.[filters.city] || []; |
| const normalizedQuery = districtQuery.trim().toLowerCase(); |
| const visibleDistricts = normalizedQuery |
| ? districtOptions.filter((district) => district.toLowerCase().includes(normalizedQuery)) |
| : districtOptions; |
|
|
| function updateDistricts(nextDistricts) { |
| setFilters((current) => ({ ...current, districts: nextDistricts })); |
| } |
|
|
| function toggleDistrict(district) { |
| const selected = filters.districts.includes(district) |
| ? filters.districts.filter((item) => item !== district) |
| : [...filters.districts, district]; |
| updateDistricts(selected); |
| } |
|
|
| const previewDistricts = filters.districts.slice(0, 3); |
| const remainingDistricts = Math.max(0, filters.districts.length - previewDistricts.length); |
|
|
| useEffect(() => { |
| setDistrictQuery(""); |
| }, [filters.city]); |
|
|
| return ( |
| <aside className={`global-filters drawer-panel ${open ? "open" : ""}`} aria-hidden={!open}> |
| <div className="filter-caption"> |
| <span>Bộ lọc điều hành</span> |
| <div className="filter-caption-actions"> |
| <button type="button" onClick={onClose}>Đóng</button> |
| <button type="button" onClick={() => setFilters(emptyFilters)}>Đặt lại</button> |
| </div> |
| </div> |
| <div className="filter-summary"> |
| <strong>{filters.city || "Toàn bộ thị trường"}</strong> |
| <div className="filter-chip-row"> |
| {filters.districts.length ? ( |
| <> |
| {previewDistricts.map((district) => ( |
| <button key={district} type="button" className="filter-chip" onClick={() => toggleDistrict(district)}> |
| {district} |
| </button> |
| ))} |
| {remainingDistricts ? <span className="filter-chip more">+{remainingDistricts}</span> : null} |
| </> |
| ) : ( |
| <span className="filter-chip muted">Toàn bộ quận/huyện</span> |
| )} |
| </div> |
| </div> |
| <div className="filter-controls"> |
| <Disclosure title="Phạm vi thị trường" defaultOpen> |
| <label> |
| Thành phố |
| <select |
| value={filters.city || cities[0] || ""} |
| onChange={(event) => setFilters((current) => ({ ...current, city: event.target.value, districts: [] }))} |
| > |
| {cities.map((city) => <option key={city}>{city}</option>)} |
| </select> |
| </label> |
| </Disclosure> |
| |
| <Disclosure title="Khu vực theo quận / huyện" defaultOpen> |
| <label> |
| Quận / huyện |
| <input |
| type="text" |
| placeholder="Tìm quận/huyện..." |
| value={districtQuery} |
| onChange={(event) => setDistrictQuery(event.target.value)} |
| /> |
| <div className="district-picker-actions"> |
| <button type="button" onClick={() => updateDistricts(districtOptions)}>Chọn tất cả</button> |
| <button type="button" onClick={() => updateDistricts([])}>Bỏ chọn</button> |
| </div> |
| <div className="district-checklist"> |
| {visibleDistricts.map((district) => ( |
| <label key={district} className="district-option"> |
| <input |
| type="checkbox" |
| checked={filters.districts.includes(district)} |
| onChange={() => toggleDistrict(district)} |
| /> |
| <span>{district}</span> |
| </label> |
| ))} |
| {!visibleDistricts.length ? <p className="district-empty">Không tìm thấy khu vực phù hợp.</p> : null} |
| </div> |
| <small>{filters.districts.length ? `Đã chọn ${filters.districts.length} khu vực` : "Giữ trống để xem toàn bộ thành phố"}</small> |
| </label> |
| </Disclosure> |
| |
| <Disclosure title="Ngưỡng đầu tư" defaultOpen> |
| <label> |
| Giá tối đa: {filters.price_max ? `${filters.price_max.toFixed(1)} tỷ` : "toàn bộ"} |
| <input |
| type="range" |
| min={metadata.price_range[0]} |
| max={metadata.price_range[1]} |
| step="0.1" |
| value={filters.price_max || metadata.price_range[1]} |
| onChange={(event) => setFilters((current) => ({ ...current, price_max: Number(event.target.value) }))} |
| /> |
| </label> |
| <label> |
| ROI tối thiểu: {filters.roi_min ? `${filters.roi_min.toFixed(1)}%` : "toàn bộ"} |
| <input |
| type="range" |
| min={metadata.roi_range[0]} |
| max={metadata.roi_range[1]} |
| step="0.5" |
| value={filters.roi_min || metadata.roi_range[0]} |
| onChange={(event) => setFilters((current) => ({ ...current, roi_min: Number(event.target.value) }))} |
| /> |
| </label> |
| </Disclosure> |
| </div> |
| </aside> |
| ); |
| } |
|
|
| function OverviewPage({ activePage, analytics, typeShare, filters }) { |
| const kpis = analytics?.kpis || {}; |
| const [growthStressPct, setGrowthStressPct] = useState(8); |
| const [liveGrowthRecommendation, setLiveGrowthRecommendation] = useState(null); |
| const [growthStatus, setGrowthStatus] = useState("idle"); |
| const executiveTrend = useMemo(() => buildExecutiveTrend(analytics?.timeline || [], growthStressPct), [analytics?.timeline, growthStressPct]); |
| const trendSnapshots = useMemo(() => buildTrendSnapshots(executiveTrend), [executiveTrend]); |
| const executiveBriefs = useMemo(() => buildExecutiveBriefs(analytics?.districts || []), [analytics?.districts]); |
| const projected2050 = executiveTrend[executiveTrend.length - 1]; |
| const overviewRecommendation = useMemo( |
| () => buildOverviewRecommendation(kpis, analytics?.risky || [], growthStressPct), |
| [kpis, analytics?.risky, growthStressPct] |
| ); |
| const growthPayload = useMemo( |
| () => buildOverviewGrowthPayload(analytics || {}, filters || emptyFilters, growthStressPct), |
| [analytics, filters, growthStressPct] |
| ); |
|
|
| useEffect(() => { |
| if (activePage !== "overview" || !growthPayload?.district) return; |
| let cancelled = false; |
| setGrowthStatus("loading"); |
| const timer = window.setTimeout(async () => { |
| try { |
| const recommendation = await request("/api/recommendation/future", { method: "POST", body: JSON.stringify(growthPayload) }); |
| if (!cancelled) { |
| setLiveGrowthRecommendation(recommendation); |
| setGrowthStatus("ready"); |
| } |
| } catch { |
| if (!cancelled) { |
| setGrowthStatus("error"); |
| } |
| } |
| }, 450); |
| return () => { |
| cancelled = true; |
| window.clearTimeout(timer); |
| }; |
| }, [activePage, growthPayload]); |
|
|
| return ( |
| <> |
| <PageHeader |
| eyebrow="Điều hành" |
| title="Tổng quan Quyết định Chiến lược" |
| description="Tóm tắt diễn biến thị trường, hiệu quả danh mục và khuyến nghị hành động dành cho lãnh đạo." |
| /> |
| <InsightHero |
| title={overviewRecommendation.title} |
| body={overviewRecommendation.body} |
| meta={projected2050 ? `Theo giả định hiện tại, quy mô giá trị có thể đạt khoảng ${projected2050.price_billion.toFixed(1)} tỷ vào năm 2050 ở kịch bản cơ sở.` : ""} |
| /> |
| <div className="kpi-grid"> |
| <KpiCard label="Tổng giá trị thị trường" value={money(kpis.total_value)} delta="Theo bộ lọc hiện tại" icon="account_balance" /> |
| <KpiCard label="Giá trung vị" value={money(kpis.median_price)} delta="Mức giá đại diện" icon="sell" /> |
| <KpiCard label="ROI bình quân" value={pct(kpis.avg_roi)} delta="Hiệu quả danh mục" icon="monitoring" tone="good" /> |
| <KpiCard label="Khu vực ưu tiên" value={kpis.best_district || "N/A"} delta={`${(kpis.best_score || 0).toFixed(1)}/100`} icon="location_city" /> |
| <KpiCard label="Số bản ghi thị trường" value={(kpis.transaction_count || 0).toLocaleString("vi-VN")} delta={`Độ tin cậy ${((kpis.avg_confidence || 0) * 100).toFixed(0)}%`} icon="swap_horiz" /> |
| </div> |
| <div className="grid-12"> |
| <Panel title="Xu hướng điều hành 2025–2050" className="span-8"> |
| <ResponsiveContainer width="100%" height={340}> |
| <ComposedChart data={executiveTrend}> |
| <CartesianGrid strokeDasharray="3 3" /> |
| <XAxis dataKey="year" ticks={[2025, 2030, 2035, 2040, 2045, 2050]} /> |
| <YAxis yAxisId="left" tickFormatter={(v) => `${v.toFixed(0)} tỷ`} /> |
| <YAxis yAxisId="right" orientation="right" tickFormatter={(v) => `${v.toFixed(0)}%`} /> |
| <Tooltip formatter={(v) => Number(v).toFixed(2)} /> |
| <Legend /> |
| <Area yAxisId="left" type="monotone" dataKey="price_billion" name="Giá trị cơ sở (tỷ)" fill="#dbeafe" stroke="#2563eb" /> |
| <Line yAxisId="right" type="monotone" dataKey="roi_pct" name="ROI điều hành (%)" stroke="#0f766e" strokeWidth={2} dot={false} /> |
| </ComposedChart> |
| </ResponsiveContainer> |
| <p className="panel-note prominent">Biểu đồ này được trình bày theo góc nhìn điều hành: tập trung vào xu hướng dài hạn và mức sinh lời chung thay vì chi tiết biến động ngắn hạn.</p> |
| <div className="trend-snapshot-grid"> |
| {trendSnapshots.map((row) => ( |
| <article className={`trend-snapshot ${row.emphasis}`} key={row.year}> |
| <span>Năm {row.year}</span> |
| <strong>{row.price_billion.toFixed(1)} tỷ</strong> |
| <small>ROI {row.roi_pct.toFixed(1)}%</small> |
| </article> |
| ))} |
| </div> |
| </Panel> |
| <Panel title="Kiểm tra giả định tăng trưởng" className="span-4"> |
| <div className="control-stack"> |
| <label> |
| Tăng trưởng giả định: {growthStressPct.toFixed(1)}% |
| <input type="range" min="-5" max="18" step="0.5" value={growthStressPct} onChange={(e) => setGrowthStressPct(Number(e.target.value))} /> |
| </label> |
| <small className="panel-note">Dữ liệu kiểm tra được lấy từ KPI và khu vực dẫn đầu đang hiển thị trên trang này.</small> |
| </div> |
| <div className={`scenario-recommendation tone-${growthStatus === "error" ? "warn" : growthStatus === "ready" ? "good" : "neutral"}`}> |
| <div className="scenario-recommendation-head"> |
| <strong>{growthStatus === "ready" ? "RAG đã trả kết quả" : growthStatus === "loading" ? "RAG đang truy xuất và phân tích" : "Khuyến nghị chờ làm mới"}</strong> |
| {growthStatus === "loading" ? ( |
| <span className="generation-badge scenario-badge"> |
| <span className="streaming-dots" aria-hidden="true"><i /><i /><i /></span> |
| Đang xử lý giả định tăng trưởng |
| </span> |
| ) : null} |
| </div> |
| {growthStatus === "loading" ? ( |
| <div className="scenario-processing"> |
| <p>Hệ thống đang nối dữ liệu RAG, so sánh kịch bản tăng trưởng và sinh khuyến nghị điều hành.</p> |
| <div className="simulation-progress"><i /></div> |
| </div> |
| ) : null} |
| <p>{liveGrowthRecommendation?.answer || overviewRecommendation.body}</p> |
| {liveGrowthRecommendation?.why ? <p><b>Lý do:</b> {liveGrowthRecommendation.why}</p> : null} |
| {liveGrowthRecommendation?.suggestion ? <p><b>Hành động:</b> {liveGrowthRecommendation.suggestion}</p> : null} |
| {(liveGrowthRecommendation?.risks || []).length ? <div className="scenario-risk-list"><b>Rủi ro cần theo dõi</b><ul>{liveGrowthRecommendation.risks.map((risk, index) => <li key={index}>{risk}</li>)}</ul></div> : null} |
| <small>{liveGrowthRecommendation ? `${liveGrowthRecommendation.model} · ${liveGrowthRecommendation.retrieval_time_ms} ms` : "Cập nhật theo từng lần kéo thanh"}</small> |
| </div> |
| </Panel> |
| <Panel |
| title="Khuyến nghị điều hành" |
| className="span-12" |
| action={<span className="panel-hint">Sinh từ ROI, giá/m², thanh khoản, biến động và RAG</span>} |
| > |
| <div className="brief-grid"> |
| {executiveBriefs.map((brief) => ( |
| <article className="brief-card" key={brief.district}> |
| <div className="brief-head"> |
| <span className="brief-tag">{brief.tag}</span> |
| <strong>{brief.district}</strong> |
| </div> |
| <p>{brief.edge}</p> |
| <small><b>Lợi thế:</b> {brief.strength}</small> |
| <small><b>Rủi ro:</b> {brief.risk}</small> |
| </article> |
| ))} |
| </div> |
| </Panel> |
| </div> |
| </> |
| ); |
| } |
|
|
| function MarketPage({ analytics, etl }) { |
| const districtRows = analytics?.districts || []; |
| const topScore = [...districtRows].sort((a, b) => b.opportunity_score - a.opportunity_score).slice(0, 3); |
| const underpriced = [...districtRows].sort((a, b) => a.price_m2_million - b.price_m2_million).slice(0, 3); |
| const liquidityReadable = [...districtRows].sort((a, b) => b.listings - a.listings).slice(0, 10); |
| const lastRefresh = analytics?.kpis?.last_data_refresh || etl?.status?.finished_at; |
| const [marketView, setMarketView] = useState("chart"); |
| return ( |
| <> |
| <PageHeader |
| eyebrow="Thị trường" |
| title="Phân tích thị trường" |
| description="So sánh ROI, giá/m² và mức độ quan tâm thị trường giữa các khu vực và phân khúc." |
| /> |
| <InsightHero |
| title={topScore[0] ? `${topScore[0].district} đang dẫn đầu về opportunity score` : "Thị trường đang có phân hóa theo khu vực"} |
| body={topScore[0] ? `Điểm ${topScore[0].opportunity_score.toFixed(1)}/100, phù hợp để đưa vào danh sách xem xét đầu tư. Nên đọc cùng giá/m² và mức độ quan tâm thị trường để tránh kết luận chỉ dựa trên ROI.` : "Dùng trang này để đọc nhanh khu nào đáng chú ý trước khi đi sâu vào phân tích đa chiều."} |
| meta={`Dữ liệu cập nhật: ${formatDateTime(lastRefresh)}`} |
| /> |
| <div className="status-strip"> |
| <span className="status-strip-label">Cập nhật gần nhất</span> |
| <strong>{formatDateTime(lastRefresh)}</strong> |
| <small>Trang thị trường tự đổi theo bộ lọc và nạp lại khi dữ liệu mới được cập nhật.</small> |
| </div> |
| <SectionTabs |
| tabs={[ |
| { id: "chart", label: "Tóm tắt thị trường" }, |
| { id: "detail", label: "Chi tiết thêm" } |
| ]} |
| active={marketView} |
| onChange={setMarketView} |
| /> |
| <div className="grid-12"> |
| {marketView !== "table" ? <> |
| <Panel title="ROI theo khu vực nổi bật" className="span-6"> |
| <ResponsiveContainer width="100%" height={360}> |
| <BarChart data={[...districtRows].sort((a, b) => b.roi_pct - a.roi_pct).slice(0, 12)}> |
| <CartesianGrid strokeDasharray="3 3" /> |
| <XAxis dataKey="district" interval={0} angle={-25} textAnchor="end" height={90} /> |
| <YAxis tickFormatter={(v) => `${v}%`} /> |
| <Tooltip formatter={(v) => pct(v)} /> |
| <Bar dataKey="roi_pct" fill="#0f766e" name="ROI" /> |
| </BarChart> |
| </ResponsiveContainer> |
| </Panel> |
| <Panel title="Thanh khoản và Giá/m²" className="span-6"> |
| <ResponsiveContainer width="100%" height={360}> |
| <ComposedChart data={liquidityReadable}> |
| <CartesianGrid strokeDasharray="3 3" /> |
| <XAxis dataKey="district" interval={0} angle={-25} textAnchor="end" height={90} /> |
| <YAxis yAxisId="left" tickFormatter={compact} /> |
| <YAxis yAxisId="right" orientation="right" tickFormatter={(v) => `${Number(v).toFixed(0)}tr`} /> |
| <Tooltip formatter={(value, name) => name === "Giá/m²" ? `${Number(value).toFixed(1)} triệu/m²` : Number(value).toLocaleString("vi-VN")} /> |
| <Legend /> |
| <Bar yAxisId="left" dataKey="listings" name="Số tin" fill="#2563eb" /> |
| <Line yAxisId="right" type="monotone" dataKey="price_m2_million" name="Giá/m²" stroke="#d97706" strokeWidth={3} dot={false} /> |
| </ComposedChart> |
| </ResponsiveContainer> |
| <p className="panel-note">Cách đọc nhanh: cột càng cao là khu vực được thị trường quan tâm nhiều hơn, đường càng cao là mặt bằng giá/m² càng lớn.</p> |
| </Panel> |
| </> : null} |
| {marketView !== "chart" ? <Panel title="So sánh phân khúc" className="span-12"> |
| <DataTable rows={districtRows.slice(0, 12)} /> |
| </Panel> : null} |
| <Panel title="Insight phân biệt khu vực" className="span-12"> |
| <div className="insight-grid"> |
| <div><strong>Khu vực nổi bật</strong><p>{topScore.map((row) => `${row.district} (${row.opportunity_score.toFixed(1)})`).join(" · ")}</p></div> |
| <div><strong>Giá/m² thấp nhất</strong><p>{underpriced.map((row) => `${row.district} (${row.price_m2_million.toFixed(1)}tr/m²)`).join(" · ")}</p></div> |
| <div><strong>Mốc so sánh</strong><p>Hiệu quả đầu tư nên đọc cùng điểm cơ hội, giá/m² và mức độ quan tâm thị trường để tránh kết luận sai khi các khu vực có ROI gần nhau.</p></div> |
| </div> |
| {marketView === "detail" ? <Disclosure title="Mở bảng chi tiết 12 khu vực" defaultOpen={false}><DataTable rows={districtRows.slice(0, 12)} /></Disclosure> : null} |
| </Panel> |
| </div> |
| </> |
| ); |
| } |
|
|
| function DataTable({ rows }) { |
| return ( |
| <div className="table-wrap"> |
| <table> |
| <thead> |
| <tr> |
| <th>Khu vực</th> |
| <th>Hành động</th> |
| <th>Số tin</th> |
| <th>Giá trung vị</th> |
| <th>ROI</th> |
| <th>Triệu/m²</th> |
| <th>Điểm</th> |
| </tr> |
| </thead> |
| <tbody> |
| {rows.map((row) => ( |
| <tr key={row.district}> |
| <td>{row.district}</td> |
| <td><span className="badge good">{row.opportunity_score >= 65 ? "Mở rộng" : row.roi_pct < 10 ? "Kiểm soát" : "Gom chọn lọc"}</span></td> |
| <td>{row.listings?.toLocaleString("vi-VN")}</td> |
| <td>{money(row.median_price)}</td> |
| <td>{pct(row.roi_pct)}</td> |
| <td>{Number(row.price_m2_million || 0).toFixed(1)}</td> |
| <td><Score value={row.opportunity_score} /></td> |
| </tr> |
| ))} |
| </tbody> |
| </table> |
| </div> |
| ); |
| } |
|
|
| function Score({ value }) { |
| const score = Number(value || 0); |
| return ( |
| <div className="score-cell"> |
| <span><i style={{ width: `${Math.min(100, score)}%` }} /></span> |
| <b>{score.toFixed(1)}</b> |
| </div> |
| ); |
| } |
|
|
| function SlicePage({ sliceDice, sliceConfig, setSliceConfig }) { |
| const [addressDetail, setAddressDetail] = useState(null); |
| const [copyState, setCopyState] = useState("idle"); |
| const [searchQuery, setSearchQuery] = useState(""); |
|
|
| function openAddressDetail(row) { |
| setAddressDetail({ |
| segment: row?.[sliceDice?.row_dimension] ?? "N/A", |
| subSegment: row?.[sliceDice?.column_dimension] ?? "N/A", |
| records: Number(row?.listings || 0), |
| addressCount: Number(row?.address_count || 0), |
| addresses: Array.isArray(row?.addresses) ? row.addresses : [] |
| }); |
| setSearchQuery(""); |
| setCopyState("idle"); |
| } |
|
|
| function closeAddressDetail() { |
| setAddressDetail(null); |
| } |
|
|
| function normalizeAddress(address) { |
| if (typeof address === "string") { |
| return { |
| house_number: "", |
| street_name: "", |
| ward_name: "", |
| district_display: "", |
| property_type_name: "", |
| address_display: address |
| }; |
| } |
| return { |
| house_number: address?.house_number || "", |
| street_name: address?.street_name || "", |
| ward_name: address?.ward_name || "", |
| district_display: address?.district_display || "", |
| property_type_name: address?.property_type_name || "", |
| address_display: address?.address_display || "N/A" |
| }; |
| } |
|
|
| const visibleAddresses = useMemo(() => { |
| const source = Array.isArray(addressDetail?.addresses) ? addressDetail.addresses : []; |
| const query = searchQuery.trim().toLowerCase(); |
| if (!query) return source; |
| return source.filter((address) => { |
| const item = normalizeAddress(address); |
| const haystack = [ |
| item.house_number, |
| item.street_name, |
| item.ward_name, |
| item.district_display, |
| item.property_type_name, |
| item.address_display |
| ].join(" ").toLowerCase(); |
| return haystack.includes(query); |
| }); |
| }, [addressDetail, searchQuery]); |
|
|
| const hasAnyHouseNumber = useMemo( |
| () => visibleAddresses.some((address) => Boolean(normalizeAddress(address).house_number)), |
| [visibleAddresses] |
| ); |
|
|
| function buildAddressTextRows(addresses) { |
| return addresses.map((address, index) => { |
| const item = normalizeAddress(address); |
| const numbered = `${index + 1}. ${item.address_display}`; |
| return numbered; |
| }); |
| } |
|
|
| function buildAddressTableRows(addresses) { |
| return addresses.map((address, index) => { |
| const item = normalizeAddress(address); |
| const columns = [ |
| index + 1, |
| item.house_number || "", |
| item.street_name || "", |
| item.ward_name || "", |
| item.district_display || "", |
| item.address_display || "" |
| ]; |
| return columns.join(" | "); |
| }); |
| } |
|
|
| function escapeCsv(value) { |
| const text = String(value ?? ""); |
| return `"${text.replaceAll('"', '""')}"`; |
| } |
|
|
| function buildCsvRows(addresses) { |
| const header = ["STT", "Số nhà", "Đường", "Phường/Xã", "Quận/Huyện", "Địa chỉ"]; |
| const rows = addresses.map((address, index) => { |
| const item = normalizeAddress(address); |
| return [ |
| index + 1, |
| item.house_number || "", |
| item.street_name || "", |
| item.ward_name || "", |
| item.district_display || "", |
| item.address_display || "" |
| ].map(escapeCsv).join(","); |
| }); |
| return [header.map(escapeCsv).join(","), ...rows]; |
| } |
|
|
| function safeFilename(value) { |
| return String(value || "addresses") |
| .normalize("NFD") |
| .replace(/[\u0300-\u036f]/g, "") |
| .replace(/[^a-zA-Z0-9]+/g, "_") |
| .replace(/^_+|_+$/g, "") |
| .toLowerCase() || "addresses"; |
| } |
|
|
| async function copyText(kind) { |
| if (!visibleAddresses.length) return; |
| const lines = kind === "table" |
| ? [ |
| "STT | Số nhà | Đường | Phường/Xã | Quận/Huyện | Địa chỉ", |
| ...buildAddressTableRows(visibleAddresses) |
| ] |
| : buildAddressTextRows(visibleAddresses); |
| try { |
| await navigator.clipboard.writeText(lines.join("\n")); |
| setCopyState(kind === "table" ? "copied_table" : "copied_list"); |
| window.setTimeout(() => setCopyState("idle"), 1800); |
| } catch { |
| setCopyState("error"); |
| window.setTimeout(() => setCopyState("idle"), 1800); |
| } |
| } |
|
|
| async function downloadCsv() { |
| if (!visibleAddresses.length) return; |
| const csv = `\ufeff${buildCsvRows(visibleAddresses).join("\n")}`; |
| const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" }); |
| const url = window.URL.createObjectURL(blob); |
| const anchor = document.createElement("a"); |
| anchor.href = url; |
| const base = `${safeFilename(addressDetail?.segment)}_${safeFilename(addressDetail?.subSegment)}`; |
| anchor.download = `${base || "propertyvision_addresses"}.csv`; |
| document.body.appendChild(anchor); |
| anchor.click(); |
| anchor.remove(); |
| window.URL.revokeObjectURL(url); |
| setCopyState("downloaded_csv"); |
| window.setTimeout(() => setCopyState("idle"), 1800); |
| } |
|
|
| return ( |
| <> |
| <PageHeader eyebrow="Đa chiều" title="Phân tích đa chiều" description="So sánh dữ liệu theo nhiều góc nhìn để tìm phân khúc đáng ưu tiên cho doanh nghiệp." /> |
| <div className="grid-12"> |
| <Panel title="Thiết lập phân tích" className="span-4"> |
| <div className="control-stack"> |
| <label>Chiều phân tích chính<select value={sliceConfig.row_dimension} onChange={(e) => setSliceConfig({ ...sliceConfig, row_dimension: e.target.value })}>{Object.entries(sliceDice?.dimensions || {}).map(([key, label]) => <option value={key} key={key}>{label}</option>)}</select></label> |
| <label>Chiều phân tích phụ<select value={sliceConfig.column_dimension} onChange={(e) => setSliceConfig({ ...sliceConfig, column_dimension: e.target.value })}>{Object.entries(sliceDice?.dimensions || {}).map(([key, label]) => <option value={key} key={key}>{label}</option>)}</select></label> |
| <label>Chỉ tiêu xem xét<select value={sliceConfig.metric} onChange={(e) => setSliceConfig({ ...sliceConfig, metric: e.target.value })}>{Object.entries(sliceDice?.metrics || {}).map(([key, label]) => <option value={key} key={key}>{label}</option>)}</select></label> |
| </div> |
| </Panel> |
| <Panel title="Thông tin so sánh" className="span-8"> |
| <div className="kpi-grid compact"> |
| <KpiCard label="Số bản ghi đang xét" value={(sliceDice?.filter_context?.filtered_records || 0).toLocaleString("vi-VN")} delta={`${(sliceDice?.filter_context?.coverage_pct || 0).toFixed(1)}% độ bao phủ`} /> |
| <KpiCard label="ROI trong bộ lọc" value={pct(sliceDice?.benchmark?.filtered_avg_roi)} delta={`Toàn thị trường ${pct(sliceDice?.benchmark?.market_avg_roi)}`} /> |
| <KpiCard label="Giá/m² trong bộ lọc" value={money(sliceDice?.benchmark?.filtered_avg_price_m2)} delta={`Toàn thị trường ${money(sliceDice?.benchmark?.market_avg_price_m2)}`} /> |
| </div> |
| </Panel> |
| <Panel title={`Ma trận hiệu quả (${sliceDice?.metric_label || "Chỉ tiêu"})`} className="span-12"> |
| <div className="table-wrap"> |
| <table> |
| <thead><tr><th>Segment</th>{(sliceDice?.columns || []).map((column) => <th key={column}>{column}</th>)}</tr></thead> |
| <tbody>{(sliceDice?.matrix || []).slice(0, 18).map((row) => <tr key={row.segment}><td>{row.segment}</td>{(sliceDice?.columns || []).map((column) => <td key={column}>{formatMetric(row[column], sliceConfig.metric)}</td>)}</tr>)}</tbody> |
| </table> |
| </div> |
| </Panel> |
| <Panel title="Phân đoạn tiềm năng cao" className="span-12"> |
| <div className="table-wrap"> |
| <table> |
| <thead><tr><th>Segment</th><th>Sub segment</th><th>Records</th><th>ROI</th><th>Giá/m²</th><th>Score</th></tr></thead> |
| <tbody>{(sliceDice?.top_segments || []).map((row, index) => <tr key={index}><td>{row[sliceDice.row_dimension]}</td><td>{row[sliceDice.column_dimension]}</td><td><button type="button" className="record-link" onClick={() => openAddressDetail(row)}>{row.listings?.toLocaleString("vi-VN")}</button></td><td>{pct(row.avg_roi)}</td><td>{money(row.avg_price_m2)}</td><td>{Number(row.opportunity_score || 0).toFixed(1)}</td></tr>)}</tbody> |
| </table> |
| </div> |
| </Panel> |
| </div> |
| {addressDetail ? ( |
| <> |
| <button type="button" className="detail-backdrop" aria-label="Đóng danh sách địa chỉ" onClick={closeAddressDetail} /> |
| <section className="record-detail-modal" role="dialog" aria-modal="true" aria-labelledby="record-detail-title"> |
| <div className="record-detail-head"> |
| <div> |
| <p>Danh sách địa chỉ</p> |
| <h4 id="record-detail-title">{addressDetail.segment} / {addressDetail.subSegment}</h4> |
| </div> |
| <div className="record-detail-actions"> |
| <button type="button" className="detail-copy-button" onClick={() => copyText("list")} disabled={!visibleAddresses.length}> |
| {copyState === "copied_list" ? "Đã copy danh sách" : "Copy đánh số"} |
| </button> |
| <button type="button" className="detail-copy-secondary" onClick={() => copyText("table")} disabled={!visibleAddresses.length}> |
| {copyState === "copied_table" ? "Đã copy bảng" : "Copy bảng"} |
| </button> |
| <button type="button" className="detail-download-button" onClick={downloadCsv} disabled={!visibleAddresses.length}> |
| {copyState === "downloaded_csv" ? "Đã tải CSV" : "Tải CSV"} |
| </button> |
| <button type="button" className="detail-close-button" onClick={closeAddressDetail}>Đóng</button> |
| </div> |
| </div> |
| <div className="record-detail-searchbar"> |
| <div className="record-detail-search-row"> |
| <input |
| type="search" |
| className="record-detail-search" |
| placeholder="Tìm số nhà, đường, phường hoặc quận..." |
| value={searchQuery} |
| onChange={(e) => setSearchQuery(e.target.value)} |
| /> |
| <button type="button" className="detail-clear-button" onClick={() => setSearchQuery("")} disabled={!searchQuery}> |
| Xóa lọc |
| </button> |
| </div> |
| <small>{visibleAddresses.length.toLocaleString("vi-VN")} / {addressDetail.addresses.length.toLocaleString("vi-VN")} địa chỉ đang hiển thị</small> |
| {!hasAnyHouseNumber ? ( |
| <div className="record-detail-note">Không có số nhà, chỉ có địa chỉ cấp xã/huyện.</div> |
| ) : null} |
| </div> |
| <div className="record-detail-meta"> |
| <span>{addressDetail.records.toLocaleString("vi-VN")} bản ghi</span> |
| <span>{addressDetail.addressCount.toLocaleString("vi-VN")} địa chỉ</span> |
| <span>{visibleAddresses.length.toLocaleString("vi-VN")} địa chỉ xem nhanh</span> |
| </div> |
| <div className="record-detail-body"> |
| {visibleAddresses.length ? ( |
| <ul className="record-detail-list"> |
| {visibleAddresses.map((address, idx) => { |
| const item = normalizeAddress(address); |
| const houseNumber = item.house_number; |
| const streetName = item.street_name; |
| const wardName = item.ward_name; |
| const districtDisplay = item.district_display; |
| const propertyType = item.property_type_name; |
| return ( |
| <li key={`${item.address_display}-${idx}`}> |
| <div className="record-address-head"> |
| <strong><span className="record-address-index">{idx + 1}</span>{item.address_display}</strong> |
| {houseNumber ? <span className="record-address-pill">Số nhà {houseNumber}</span> : null} |
| </div> |
| <div className="record-address-foot"> |
| {propertyType ? <span>{propertyType}</span> : null} |
| {(streetName || wardName || districtDisplay) ? <small>{[streetName, wardName, districtDisplay].filter(Boolean).join(" · ")}</small> : null} |
| </div> |
| </li> |
| ); |
| })} |
| </ul> |
| ) : ( |
| <p className="record-detail-empty">Chưa có địa chỉ chi tiết cho phân đoạn này.</p> |
| )} |
| </div> |
| </section> |
| </> |
| ) : null} |
| </> |
| ); |
| } |
|
|
| function formatMetric(value, metric) { |
| if (metric?.includes("price") || metric === "total_value") return money(value); |
| if (metric?.includes("roi")) return pct(value); |
| return Number(value || 0).toFixed(2); |
| } |
|
|
| function RecommendationSection({ label, children }) { |
| if (!children) return null; |
| return ( |
| <section className="recommendation-section"> |
| <span>{label}</span> |
| <div>{children}</div> |
| </section> |
| ); |
| } |
|
|
| function DecisionPage({ analytics, metadata, filters, decisionView, setDecisionView, predictForm, setPredictForm, simulationForm, setSimulationForm, prediction, whatIf, aiRecommendation, runWhatIf, simulationLoading, simulationStage }) { |
| const availableDistricts = metadata?.districts_by_city?.[filters.city] || metadata?.districts || []; |
| const showRoomFields = propertyNeedsRoomFields(predictForm.property_type); |
| const showFloorField = propertyNeedsFloorField(predictForm.property_type); |
| const scenarioProjection = (whatIf?.projection || []).map((row) => ({ ...row, calendar_year: 2025 + Number(row.year || 0) })); |
| const scenarioMilestones = buildScenarioMilestones(whatIf ? { ...whatIf, projection: scenarioProjection } : null); |
| const chartSpec = normalizeChartSpec(aiRecommendation?.chart_spec); |
| const chartTitle = chartSpec.title || chartTitleForDecisionTab(decisionView); |
| const chartType = chartSpec.chart_type || chartTypeForDecisionTab(decisionView); |
| const cleanRecommendationAnswer = sanitizeRecommendationText(aiRecommendation?.answer || ""); |
| const cleanRecommendationWhy = sanitizeRecommendationText(aiRecommendation?.why || ""); |
| const cleanRecommendationSuggestion = sanitizeRecommendationText(aiRecommendation?.suggestion || ""); |
| const cleanRecommendationRisks = sanitizeRecommendationList(aiRecommendation?.risks || []); |
| const cleanRecommendationBasis = sanitizeRecommendationList(aiRecommendation?.basis || []); |
| const recommendationTone = cleanRecommendationRisks.some((item) => /l[oỗ]|g[ii]am|rủi ro|rui ro/i.test(item)) ? "warn" : aiRecommendation?.llm_available ? "good" : "neutral"; |
| const recommendationStage = aiStageInfo(aiRecommendation?.status || aiRecommendation?.mode, Boolean(cleanRecommendationAnswer) && !aiRecommendation?.mode?.includes("error")); |
| const typedRecommendation = useTypewriterText(cleanRecommendationAnswer, Boolean(cleanRecommendationAnswer), 12); |
| const typedWhy = useTypewriterText(cleanRecommendationWhy, Boolean(cleanRecommendationWhy), 12); |
| const typedSuggestion = useTypewriterText(cleanRecommendationSuggestion, Boolean(cleanRecommendationSuggestion), 12); |
| const recommendationIsStreaming = aiRecommendation?.status === "streaming" || simulationLoading; |
| const recommendationText = recommendationIsStreaming ? cleanRecommendationAnswer : typedRecommendation || cleanRecommendationAnswer; |
| const endYear = DECISION_BASE_YEAR + Number(simulationForm.years || 0); |
| return ( |
| <> |
| <PageHeader eyebrow="Mô phỏng đầu tư" title="Mô phỏng quyết định đầu tư" description="Mô phỏng kết quả đầu tư theo nhiều kịch bản để hỗ trợ ra quyết định." /> |
| <SectionTabs |
| tabs={[ |
| { id: "asset", label: "Thông số tài sản" } |
| ]} |
| active={decisionView} |
| onChange={setDecisionView} |
| /> |
| <form className="grid-12" onSubmit={runWhatIf}> |
| {decisionView !== "scenario" ? <Panel title="Thông số tài sản" className="span-3"> |
| <div className="control-stack"> |
| <select value={predictForm.district} onChange={(e) => setPredictForm({ ...predictForm, district: e.target.value })}>{availableDistricts.map((item) => <option key={item}>{item}</option>)}</select> |
| <select value={predictForm.property_type} onChange={(e) => setPredictForm({ ...predictForm, property_type: e.target.value })}>{metadata?.property_types?.map((item) => <option key={item}>{item}</option>)}</select> |
| <select value={predictForm.legal_documents} onChange={(e) => setPredictForm({ ...predictForm, legal_documents: e.target.value })}>{metadata?.legal_documents?.map((item) => <option key={item}>{item}</option>)}</select> |
| <label>Diện tích<input type="number" value={predictForm.area} onChange={(e) => setPredictForm({ ...predictForm, area: e.target.value })} /></label> |
| {showRoomFields ? <label>Số phòng ngủ<input type="number" value={predictForm.bedrooms} onChange={(e) => setPredictForm({ ...predictForm, bedrooms: e.target.value })} /></label> : <p className="panel-note">Loại tài sản này không cần nhập số phòng ngủ và số nhà vệ sinh.</p>} |
| {showRoomFields ? <label>Số nhà vệ sinh<input type="number" value={predictForm.toilets} onChange={(e) => setPredictForm({ ...predictForm, toilets: e.target.value })} /></label> : null} |
| {showFloorField ? <label>Số tầng<input type="number" value={predictForm.floors} onChange={(e) => setPredictForm({ ...predictForm, floors: e.target.value })} /></label> : null} |
| <label>ROI kỳ vọng<input type="number" step="0.01" value={predictForm.roi_expected} onChange={(e) => setPredictForm({ ...predictForm, roi_expected: e.target.value })} /></label> |
| </div> |
| </Panel> : null} |
| <Panel title="Giả định đầu tư" className={decisionView === "scenario" ? "span-4" : "span-4"}> |
| <div className="control-stack"> |
| <label>Ngân sách: {Number(simulationForm.budget_billion).toFixed(1)} tỷ<input type="range" min="1" max="100" step="0.5" value={simulationForm.budget_billion} onChange={(e) => setSimulationForm({ ...simulationForm, budget_billion: e.target.value })} /></label> |
| <label>Tăng trưởng/năm: {Number(simulationForm.annual_growth_pct).toFixed(1)}%<input type="range" min="-5" max="25" step="0.5" value={simulationForm.annual_growth_pct} onChange={(e) => setSimulationForm({ ...simulationForm, annual_growth_pct: e.target.value })} /></label> |
| <label>Nắm giữ đến năm: {endYear} ({simulationForm.years} năm)<input type="range" min="1" max={DECISION_MAX_YEAR - DECISION_BASE_YEAR} step="1" value={simulationForm.years} onChange={(e) => setSimulationForm({ ...simulationForm, years: e.target.value })} /></label> |
| <button className="primary-btn" type="submit" disabled={simulationLoading}>{simulationLoading ? "Đang mô phỏng..." : "Chạy mô phỏng đầu tư"}</button> |
| <div className={`simulation-status ${simulationLoading ? "loading" : "ready"}`}> |
| <span className={`badge ${simulationLoading ? "loading" : "good"}`}>{simulationLoading ? "Simulation loading" : "Ready"}</span> |
| <div className="simulation-progress" aria-hidden="true"> |
| <i /> |
| </div> |
| </div> |
| </div> |
| </Panel> |
| <Panel title="Kết quả tài chính dự kiến" className={decisionView === "scenario" ? "span-8" : "span-5"}> |
| {simulationLoading ? ( |
| <div className="assistant-streaming simulation-streaming"> |
| <span className="streaming-dots"><i /><i /><i /></span> |
| <div> |
| <strong>{simulationStage || "Đang tính toán mô phỏng tài chính..."}</strong> |
| <p>Hệ thống đang cập nhật số liệu, chạy kịch bản và sinh khuyến nghị theo dữ liệu hiện tại.</p> |
| </div> |
| </div> |
| ) : null} |
| {simulationLoading && !whatIf ? <><ResultSkeleton /></> : whatIf ? <div className="result-grid"><KpiCard label="Giá trị tương lai" value={money(whatIf.summary.future_value)} /><KpiCard label="Lợi nhuận vốn" value={money(whatIf.summary.capital_gain)} /><KpiCard label="ROI tích lũy" value={pct(whatIf.summary.cumulative_roi_pct)} /><KpiCard label="Thời gian hoàn vốn" value={`${whatIf.summary.payback_years?.toFixed(1)} năm`} /></div> : <p className="muted">Chạy mô phỏng để xem giá trị tương lai, ROI và thời gian hoàn vốn.</p>} |
| {simulationLoading ? <span className="generation-badge">Mô hình đang xử lý kịch bản và khuyến nghị</span> : null} |
| {prediction ? <p className="model-note">Mức giá tham chiếu: <b>{money(prediction.predicted_price)}</b> | Sai số bình quân {money(prediction.model.mae)}</p> : null} |
| </Panel> |
| <Panel title="Triển vọng giá trị theo kịch bản" className="span-12"> |
| {whatIf ? <DecisionChart whatIf={whatIf} chartSpec={{ ...chartSpec, chart_type: chartType }} /> : <p className="muted">Biểu đồ sẽ hiển thị triển vọng theo ba kịch bản đầu tư.</p>} |
| <p className="panel-note">Biểu đồ dùng mốc năm lịch để người xem thấy rõ từ năm nào danh mục có thể chịu áp lực, hoà vốn hay tăng trưởng tốt.</p> |
| </Panel> |
| <Panel title="Mốc thời gian & tình huống thua lỗ" className="span-7"> |
| {scenarioMilestones.length ? <div className="table-wrap"><table><thead><tr><th>Năm</th><th>Xấu</th><th>Cơ sở</th><th>Trạng thái</th></tr></thead><tbody>{scenarioMilestones.map((row) => <tr key={row.calendar_year}><td>{row.calendar_year}</td><td>{money(row.pessimistic)}</td><td>{money(row.base)}</td><td><span className={`badge ${row.status === "Rủi ro lỗ" ? "high" : row.status === "Hoà vốn yếu" ? "medium" : "good"}`}>{row.status}</span></td></tr>)}</tbody></table></div> : <p className="muted">Chạy mô phỏng để xem mốc năm cụ thể.</p>} |
| </Panel> |
| <Panel title="Khuyến nghị đầu tư tương lai" className="span-5"> |
| {aiRecommendation ? ( |
| <div className={`scenario-recommendation tone-${recommendationTone}`}> |
| <div className="meta-row compact"> |
| <strong>{aiRecommendation.mode === "error" ? "AI gián đoạn" : "Khuyến nghị từ trợ lý phân tích"}</strong> |
| <span className={`badge ${recommendationStage.tone}`}>{recommendationStage.label}</span> |
| </div> |
| <p className="panel-note">Khuyến nghị này chỉ bám đúng Thông tin tài sản và Giả định đầu tư đang chọn trong cùng trang mô phỏng.</p> |
| {recommendationIsStreaming ? <span className="generation-badge">Đang stream khuyến nghị từ Qwen...</span> : cleanRecommendationAnswer && typedRecommendation !== cleanRecommendationAnswer ? <span className="generation-badge">Đang sinh câu trả lời...</span> : null} |
| {recommendationText?.trim() ? <RecommendationSection label="Kết luận"><MarkdownBlock text={recommendationText} /></RecommendationSection> : null} |
| {cleanRecommendationWhy ? <RecommendationSection label="Lý do"><MarkdownBlock text={typedWhy} /></RecommendationSection> : null} |
| {cleanRecommendationSuggestion ? <RecommendationSection label="Hành động"><MarkdownBlock text={typedSuggestion} /></RecommendationSection> : null} |
| {cleanRecommendationRisks.length ? <RecommendationSection label="Rủi ro cần nêu"><ul className="scenario-bullet-list">{cleanRecommendationRisks.map((risk, index) => <li key={index}>{risk}</li>)}</ul></RecommendationSection> : null} |
| {cleanRecommendationBasis.length ? <RecommendationSection label="Cơ sở đưa ra khuyến nghị"><ul className="scenario-bullet-list">{cleanRecommendationBasis.map((item, index) => <li key={index}>{item}</li>)}</ul></RecommendationSection> : null} |
| <small>{aiRecommendation.model} · {aiRecommendation.retrieval_time_ms} ms</small> |
| </div> |
| ) : <p className="muted">Chạy mô phỏng để nhận khuyến nghị mua thêm, giữ hay bán bớt theo kịch bản tương lai.</p>} |
| </Panel> |
| </form> |
| </> |
| ); |
| } |
|
|
| function GisPage({ mapData, analytics }) { |
| const [riskFilter, setRiskFilter] = useState("all"); |
| const [minRoi, setMinRoi] = useState(0); |
| const [minScore, setMinScore] = useState(0); |
| const center = mapData?.center || { latitude: 10.78, longitude: 106.7, zoom: 10 }; |
| const lastRefresh = analytics?.kpis?.last_data_refresh; |
| const districts = mapData?.districts || []; |
| const markers = useMemo(() => groupMapMarkers(districts), [districts]); |
| const maxRoi = markers.length ? Math.max(...markers.map((row) => markerRoi(row))) : 0; |
| const maxScore = markers.length ? Math.max(...markers.map((row) => markerScore(row))) : 0; |
| const filteredDistricts = useMemo( |
| () => markers.filter((row) => { |
| const roi = markerRoi(row); |
| const score = markerScore(row); |
| const riskMatch = riskFilter === "all" || row.risk_level === riskFilter; |
| return riskMatch && roi >= Number(minRoi || 0) && score >= Number(minScore || 0); |
| }), |
| [markers, riskFilter, minRoi, minScore] |
| ); |
| const leading = [...filteredDistricts].sort((a, b) => markerScore(b) - markerScore(a)).slice(0, 3); |
| const watchlist = [...filteredDistricts].filter((row) => row.risk_level === "high").sort((a, b) => markerScore(a) - markerScore(b)).slice(0, 4); |
| const avgRoi = markers.length ? markers.reduce((sum, row) => sum + markerRoi(row), 0) / markers.length : 0; |
| const avgScore = markers.length ? markers.reduce((sum, row) => sum + markerScore(row), 0) / markers.length : 0; |
| const chartRows = [...filteredDistricts].sort((a, b) => markerRoi(b) - markerRoi(a)).slice(0, 5); |
| return ( |
| <> |
| <PageHeader eyebrow="Bản đồ quy hoạch" title="Bản đồ và quy hoạch" description="Phân tích điểm cơ hội và mức độ rủi ro theo không gian." /> |
| <div className="grid-12"> |
| <Panel title="Bản đồ quy hoạch" className="span-8 map-panel-host"> |
| <div className="map-filter-bar"> |
| <label> |
| <span>Rủi ro</span> |
| <select value={riskFilter} onChange={(e) => setRiskFilter(e.target.value)}> |
| <option value="all">Tất cả</option> |
| <option value="low">Thấp</option> |
| <option value="medium">Trung bình</option> |
| <option value="high">Cao</option> |
| </select> |
| </label> |
| <label> |
| <span>ROI tối thiểu: {Number(minRoi).toFixed(1)}%</span> |
| <input type="range" min="0" max={Math.max(20, Math.ceil(maxRoi))} step="0.5" value={minRoi} onChange={(e) => setMinRoi(Number(e.target.value))} /> |
| </label> |
| <label> |
| <span>Score tối thiểu: {Number(minScore).toFixed(0)}</span> |
| <input type="range" min="0" max={Math.max(100, Math.ceil(maxScore))} step="1" value={minScore} onChange={(e) => setMinScore(Number(e.target.value))} /> |
| </label> |
| <button |
| type="button" |
| className="secondary-btn map-filter-reset" |
| onClick={() => { |
| setRiskFilter("all"); |
| setMinRoi(0); |
| setMinScore(0); |
| }} |
| > |
| Bỏ lọc |
| </button> |
| </div> |
| <p className="map-interaction-hint">Có thể kéo để di chuyển, lăn chuột hoặc chụm hai ngón để zoom.</p> |
| <MapContainer |
| key={mapData?.city || "default-city"} |
| center={[center.latitude, center.longitude]} |
| zoom={center.zoom || 10} |
| scrollWheelZoom |
| dragging |
| touchZoom |
| doubleClickZoom |
| boxZoom |
| zoomControl |
| className="leaflet-panel main-map" |
| > |
| <TileLayer attribution="© OpenStreetMap contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> |
| {(filteredDistricts.length ? filteredDistricts : markers).map((row) => { |
| const scoreValue = markerScore(row); |
| const roiValue = markerRoi(row); |
| const markerLabel = row.district_count > 1 ? `${row.district} · ${row.district_count} khu` : row.district; |
| return ( |
| <CircleMarker |
| key={`${row.latitude}-${row.longitude}-${row.district}`} |
| center={[row.latitude, row.longitude]} |
| radius={Math.max(8, Math.min(30, scoreValue / 3))} |
| pathOptions={{ color: row.risk_level === "low" ? "#0f766e" : row.risk_level === "high" ? "#c2410c" : "#d97706", fillOpacity: 0.62 }} |
| > |
| <Popup> |
| <strong>{markerLabel}</strong> |
| {row.district_count > 1 ? <p>{row.districts.join(" · ")}</p> : null} |
| <p>Score {scoreValue.toFixed(1)}</p> |
| <p>ROI {roiValue.toFixed(2)}%</p> |
| <p>{row.planning_note}</p> |
| </Popup> |
| </CircleMarker> |
| ); |
| })} |
| </MapContainer> |
| <div className="map-footer-grid"> |
| <article className="map-fact-card"> |
| <span>Cập nhật</span> |
| <strong>{formatDateTime(lastRefresh)}</strong> |
| </article> |
| <article className="map-fact-card"> |
| <span>Số khu vực</span> |
| <strong>{markers.length.toLocaleString("vi-VN")}</strong> |
| <small>Các điểm trên bản đồ đang khớp với thành phố và bộ lọc hiện tại.</small> |
| </article> |
| {leading.map((row) => ( |
| <article className="map-fact-card" key={row.district}> |
| <span>{row.district}</span> |
| <strong>{row.opportunity_score.toFixed(1)}/100</strong> |
| <small>{row.risk_level === "high" ? "Cần theo dõi quy hoạch" : row.risk_level === "medium" ? "Rủi ro trung bình" : "Mức rủi ro thấp hơn"}</small> |
| </article> |
| ))} |
| </div> |
| </Panel> |
| <Panel title="Chú giải và khu vực cần theo dõi" className="span-4"> |
| <div className="map-side-stack"> |
| <div className="map-executive-card"> |
| <span>Tóm tắt điều hành</span> |
| <strong>{leading[0]?.district || "Chưa có khu dẫn đầu"}</strong> |
| <small>{filteredDistricts.length ? `${filteredDistricts.length} khu đang khớp bộ lọc` : "Không có khu vực nào khớp bộ lọc hiện tại"}</small> |
| </div> |
| <div className="map-legend"> |
| <span><i className="dot low" /> Rủi ro thấp</span> |
| <span><i className="dot medium" /> Rủi ro trung bình</span> |
| <span><i className="dot high" /> Rủi ro cao</span> |
| <small>Kích thước điểm tròn thể hiện điểm cơ hội</small> |
| </div> |
| <div className="map-metrics-grid"> |
| <article className="map-metric-card"> |
| <span>ROI TB</span> |
| <strong>{pct(avgRoi)}</strong> |
| </article> |
| <article className="map-metric-card"> |
| <span>Score TB</span> |
| <strong>{avgScore.toFixed(1)}</strong> |
| </article> |
| <article className="map-metric-card"> |
| <span>Top nổi bật</span> |
| <strong>{leading[0]?.district || "N/A"}</strong> |
| </article> |
| <article className="map-metric-card"> |
| <span>Cần theo dõi</span> |
| <strong>{watchlist[0]?.district || "N/A"}</strong> |
| </article> |
| </div> |
| <div className="map-subsection"> |
| <span className="map-subsection-title">ROI top khu vực</span> |
| {chartRows.length ? ( |
| <ResponsiveContainer width="100%" height={190}> |
| <BarChart data={chartRows}> |
| <CartesianGrid strokeDasharray="3 3" /> |
| <XAxis dataKey="district" interval={0} angle={-20} textAnchor="end" height={58} tick={{ fontSize: 11 }} /> |
| <YAxis tickFormatter={(v) => `${Number(v).toFixed(0)}%`} /> |
| <Tooltip formatter={(value) => pct(value)} /> |
| <Bar dataKey="roi_pct" fill="#0f766e" radius={[6, 6, 0, 0]} name="ROI" /> |
| </BarChart> |
| </ResponsiveContainer> |
| ) : ( |
| <p className="map-empty-state">Không có khu vực nào thỏa điều kiện lọc để vẽ chart.</p> |
| )} |
| </div> |
| <div className="map-subsection"> |
| <span className="map-subsection-title">Điểm nóng</span> |
| <div className="map-list compact"> |
| {leading.length ? leading.map((row) => <article className="risk-card compact" key={`lead-${row.district}`}><div><strong>{row.district}</strong><span className={`badge ${row.risk_level}`}>{row.risk_level}</span></div><p>{row.planning_note}</p><small>ROI {row.roi_pct.toFixed(2)}% | Score {row.opportunity_score.toFixed(1)}</small></article>) : <p className="map-empty-state">Không có khu nóng nào sau khi lọc.</p>} |
| </div> |
| </div> |
| <div className="map-subsection"> |
| <span className="map-subsection-title">Khu cần theo dõi</span> |
| <div className="map-list compact"> |
| {(watchlist.length ? watchlist : filteredDistricts.slice(0, 4)).map((row) => <article className="risk-card compact" key={`watch-${row.district}`}><div><strong>{row.district}</strong><span className={`badge ${row.risk_level}`}>{row.risk_level}</span></div><p>{row.planning_note}</p><small>ROI {row.roi_pct.toFixed(2)}% | Score {row.opportunity_score.toFixed(1)}</small></article>)} |
| {!watchlist.length && !filteredDistricts.length ? <p className="map-empty-state">Không có khu vực rủi ro cao thỏa điều kiện lọc.</p> : null} |
| </div> |
| </div> |
| </div> |
| </Panel> |
| </div> |
| </> |
| ); |
| } |
|
|
| function AiPage({ question, setQuestion, assistant, assistantLoading, askAssistant }) { |
| const [sourcesOpen, setSourcesOpen] = useState(false); |
| const assistantStage = aiStageInfo(assistant?.status || assistant?.mode, assistantLoading); |
| const assistantWaitingCopy = providerWaitingCopy(assistant?.status, assistant?.llm_mode); |
|
|
| useEffect(() => { |
| if (assistant?.sources?.length) { |
| setSourcesOpen(true); |
| } |
| }, [assistant]); |
|
|
| return ( |
| <> |
| <PageHeader eyebrow="Trợ lý phân tích" title="Trợ lý phân tích" description="Tổng hợp dữ liệu thị trường, pháp lý và quy hoạch để hỗ trợ quyết định đầu tư." /> |
| <div className="grid-12"> |
| <Panel title="Câu hỏi phân tích" className="span-7"> |
| <div className="chat-box"> |
| <textarea value={question} onChange={(e) => setQuestion(e.target.value)} /> |
| <div className="prompt-row">{["Quận Tân Bình có rủi ro quy hoạch gì?", "Nên ưu tiên khu nào nếu ROI tốt?", "So sánh Bình Chánh và Thủ Đức"].map((prompt) => <button key={prompt} onClick={() => setQuestion(prompt)}>{prompt}</button>)}</div> |
| <div className="assistant-action-row"> |
| <button className="primary-btn" onClick={askAssistant} disabled={assistantLoading}>{assistantLoading ? "Đang phân tích..." : "Phân tích"}</button> |
| <button className="secondary-btn" onClick={() => askAssistant("stop")} disabled={!assistantLoading}>Dừng sinh</button> |
| </div> |
| {assistantLoading ? ( |
| <div className="assistant-streaming"> |
| <span className="streaming-dots"><i /><i /><i /></span> |
| <div> |
| <strong>{assistant?.status?.startsWith("waiting_") ? assistantWaitingCopy.title : "RAG đang truy xuất nguồn và Qwen đang sinh câu trả lời..."}</strong> |
| <p>{assistant?.status?.startsWith("waiting_") ? assistantWaitingCopy.body : "Kết quả sẽ hiện ra ngay khi mô hình trả lời xong."}</p> |
| </div> |
| </div> |
| ) : null} |
| </div> |
| {assistant ? <div className="answer-panel"><div className="meta-row"><span>{assistant.mode}</span><span>{assistant.model}</span><span className={`badge ${assistantStage.tone}`}>{assistantStage.label}</span><span>{assistant.retrieval_time_ms} ms</span></div>{assistantLoading ? <span className="generation-badge">{assistantStage.label}</span> : null}<StructuredResponse text={assistant.answer || ""} sectionTitles={["Kết luận điều hành", "Cơ sở nhận định", "Rủi ro cần lưu ý", "Hành động tiếp theo"]} /></div> : null} |
| </Panel> |
| <Panel title="Thanh tra nguồn" className="span-5"> |
| <Disclosure title="Nguồn trích dẫn" open={sourcesOpen} defaultOpen={false} compact onToggle={setSourcesOpen}> |
| <div className="source-list">{(assistant?.sources || []).map((source) => <a key={source.title} href={source.source_url} target="_blank" rel="noreferrer" className="source-card"><strong>{source.title}</strong><span>{source.content}</span><small>{source.source_name} · score {source.score?.toFixed(2)}</small></a>)}</div> |
| </Disclosure> |
| </Panel> |
| </div> |
| </> |
| ); |
| } |
|
|
| function DataOpsPage({ etl, refreshEtl, loading, ragStatus }) { |
| return ( |
| <> |
| <PageHeader eyebrow="Theo dõi dữ liệu" title="Giám sát vận hành dữ liệu" description="Theo dõi trạng thái nạp dữ liệu, quy hoạch và kho tri thức AI." /> |
| <div className="grid-12"> |
| <Panel title="Tình trạng dữ liệu" className="span-12" action={<button className="primary-btn small" onClick={refreshEtl}>{loading ? "Đang cập nhật" : "Cập nhật dữ liệu"}</button>}> |
| <div className="kpi-grid compact"><KpiCard label="Bản ghi thị trường" value={(etl?.transaction_records || 0).toLocaleString("vi-VN")} /><KpiCard label="Lớp quy hoạch" value={(etl?.planning_zones || 0).toLocaleString("vi-VN")} /><KpiCard label="Tài liệu pháp lý" value={(etl?.legal_documents || 0).toLocaleString("vi-VN")} /><KpiCard label="Metro impact" value={(etl?.metro_impacts || 0).toLocaleString("vi-VN")} /><KpiCard label="Kho tri thức AI" value={ragStatus ? `${ragStatus.documents} tài liệu` : "Sẵn sàng"} /></div> |
| </Panel> |
| <Panel title="Nhật ký cập nhật dữ liệu" className="span-7"><SimpleRuns runs={etl?.runs || []} /></Panel> |
| <Panel title="Trung tâm dữ liệu công cộng" className="span-5"><div className="source-list">{(etl?.sources || []).map((source) => <a className="source-card" href={source.url} target="_blank" rel="noreferrer" key={source.url}><strong>{source.name}</strong><span>{source.type}</span><small>{source.status}</small></a>)}</div></Panel> |
| </div> |
| </> |
| ); |
| } |
|
|
| function SimpleRuns({ runs }) { |
| return <div className="table-wrap"><table><thead><tr><th>Thời điểm</th><th>Hình thức</th><th>Trạng thái</th><th>Đã đọc</th><th>Đã nạp</th></tr></thead><tbody>{runs.map((run) => <tr key={run.run_id}><td>{run.finished_at?.slice(0, 19)}</td><td>{run.mode}</td><td><span className="badge good">{run.status}</span></td><td>{run.records_seen?.toLocaleString("vi-VN")}</td><td>{run.records_inserted?.toLocaleString("vi-VN")}</td></tr>)}</tbody></table></div>; |
| } |
|
|
| function ExplorerPage({ analytics }) { |
| return ( |
| <> |
| <PageHeader eyebrow="Chi tiết tài sản" title="Danh sách tài sản" description="Xem chi tiết các tài sản có ROI cao trong bộ lọc hiện tại." /> |
| <Panel title="Bảng tài sản"> |
| <div className="table-wrap"><table><thead><tr><th>Địa chỉ</th><th>Khu vực</th><th>Loại</th><th>Giá</th><th>Diện tích</th><th>ROI</th></tr></thead><tbody>{(analytics?.samples || []).map((row) => <tr key={`${row.Location}-${row.date}`}><td>{row.Location}</td><td>{row.district}</td><td>{row["Type of House"]}</td><td>{money(row.price_vnd)}</td><td>{row.area} m²</td><td>{pct(row.ROI * 100)}</td></tr>)}</tbody></table></div> |
| </Panel> |
| </> |
| ); |
| } |
|
|
| function ReportPage({ analytics, whatIf, reportNote, reportNoteLoading }) { |
| const kpis = analytics?.kpis || {}; |
| const reportBriefs = useMemo(() => buildExecutiveBriefs(analytics?.districts || []), [analytics?.districts]); |
| const coverSummary = useMemo(() => buildReportCoverSummary(analytics || {}, whatIf), [analytics, whatIf]); |
| const reportStage = aiStageInfo(reportNote?.status || reportNote?.mode, reportNoteLoading); |
| const exportTimestamp = analytics?.kpis?.last_data_refresh ? formatDateTime(analytics.kpis.last_data_refresh) : formatDateTime(new Date().toISOString()); |
|
|
| function exportPdf() { |
| window.print(); |
| } |
|
|
| return ( |
| <> |
| <PageHeader eyebrow="Báo cáo định kỳ" title="Báo cáo định kỳ" description="Tóm tắt phát hiện chính, khuyến nghị và căn cứ tham chiếu để trình bày theo chu kỳ." /> |
| <div className="report-toolbar no-print"> |
| <div> |
| <strong>Bản in điều hành</strong> |
| <span>Định dạng sẵn sàng xuất PDF cho báo cáo công ty.</span> |
| </div> |
| <button type="button" className="primary-btn" onClick={exportPdf}>Xuất PDF</button> |
| </div> |
| <section className="report-cover"> |
| <div className="report-cover-main"> |
| <span>Executive Report</span> |
| <h3>PropertyVision BI</h3> |
| <p>Báo cáo định kỳ tập trung vào phát hiện chính, khuyến nghị hành động và cơ sở dữ liệu làm căn cứ trình bày cho ban điều hành.</p> |
| <div className="report-cover-meta"> |
| <span>Cập nhật {exportTimestamp}</span> |
| <span>ROI TB {pct(kpis.avg_roi)}</span> |
| <span>{(kpis.transaction_count || 0).toLocaleString("vi-VN")} giao dịch / bản ghi</span> |
| </div> |
| </div> |
| <div className="report-cover-stats"> |
| <article> |
| <span>Khu dẫn đầu</span> |
| <strong>{coverSummary.bestDistrict}</strong> |
| </article> |
| <article> |
| <span>Giá trị tương lai</span> |
| <strong>{coverSummary.projectedFutureValue ? money(coverSummary.projectedFutureValue) : "Chưa mô phỏng"}</strong> |
| </article> |
| <article> |
| <span>ROI tích lũy</span> |
| <strong>{coverSummary.projectedCumulativeRoi !== null ? pct(coverSummary.projectedCumulativeRoi) : "Chưa mô phỏng"}</strong> |
| </article> |
| <article> |
| <span>Hoàn vốn</span> |
| <strong>{coverSummary.projectedPaybackYears ? `${coverSummary.projectedPaybackYears.toFixed(1)} năm` : "Chưa mô phỏng"}</strong> |
| </article> |
| </div> |
| </section> |
| <div className="grid-12 report-grid"> |
| <Panel title="Phát hiện chính" className="span-6"> |
| <div className="brief-grid compact"> |
| {reportBriefs.map((brief) => ( |
| <article className="brief-card" key={brief.district}> |
| <div className="brief-head"> |
| <span className="brief-tag">{brief.tag}</span> |
| <strong>{brief.district}</strong> |
| </div> |
| <p>{brief.edge}</p> |
| <small><b>Lợi thế:</b> {brief.strength}</small> |
| <small><b>Rủi ro:</b> {brief.risk}</small> |
| </article> |
| ))} |
| </div> |
| <div className="report-meta-row"> |
| <span>ROI trung bình: <b>{pct(kpis.avg_roi)}</b></span> |
| <span>Bản ghi thị trường: <b>{(kpis.transaction_count || 0).toLocaleString("vi-VN")}</b></span> |
| </div> |
| </Panel> |
| <Panel title="Ghi chú điều hành" className="span-6"> |
| {reportNote?.answer ? ( |
| <div className="answer-panel"> |
| <div className="meta-row"> |
| <span>{reportNote.mode}</span> |
| <span>{reportNote.model}</span> |
| <span className={`badge ${reportStage.tone}`}>{reportStage.label}</span> |
| <span>{reportNote.retrieval_time_ms} ms</span> |
| </div> |
| {reportNoteLoading ? <span className="generation-badge">{reportStage.label}</span> : null} |
| <StructuredResponse text={reportNote.answer || ""} sectionTitles={["Kết luận điều hành", "Cơ sở nhận định", "Rủi ro cần lưu ý", "Hành động tiếp theo"]} /> |
| </div> |
| ) : ( |
| <p>{reportNoteLoading ? "Đang làm mới ghi chú điều hành..." : "Ghi chú điều hành sẽ tự làm mới theo dữ liệu hiện tại để không phải chờ thao tác thủ công."}</p> |
| )} |
| </Panel> |
| <Panel title="Tóm tắt mô phỏng đầu tư" className="span-12">{whatIf ? <div className="kpi-grid compact"><KpiCard label="Giá trị tương lai" value={money(whatIf.summary.future_value)} /><KpiCard label="ROI tích lũy" value={pct(whatIf.summary.cumulative_roi_pct)} /><KpiCard label="Thời gian hoàn vốn" value={`${whatIf.summary.payback_years?.toFixed(1)} năm`} /></div> : <p className="muted">Chạy mô phỏng đầu tư để đưa kết quả vào báo cáo.</p>}</Panel> |
| </div> |
| </> |
| ); |
| } |
|
|
| function App() { |
| const [activePage, setActivePage] = useState(currentPageId()); |
| const [metadata, setMetadata] = useState(null); |
| const [analytics, setAnalytics] = useState(null); |
| const [filters, setFilters] = useState(emptyFilters); |
| const [loading, setLoading] = useState(true); |
| const [aiRuntime, setAiRuntime] = useState(null); |
| const [error, setError] = useState(""); |
| const [prediction, setPrediction] = useState(null); |
| const [whatIf, setWhatIf] = useState(null); |
| const [aiRecommendation, setAiRecommendation] = useState(null); |
| const [simulationLoading, setSimulationLoading] = useState(false); |
| const [simulationStage, setSimulationStage] = useState("Ready"); |
| const [decisionView, setDecisionView] = useState("whatif"); |
| const [assistant, setAssistant] = useState(null); |
| const [assistantLoading, setAssistantLoading] = useState(false); |
| const [reportNote, setReportNote] = useState(null); |
| const [reportNoteLoading, setReportNoteLoading] = useState(false); |
| const [mapData, setMapData] = useState(null); |
| const [etl, setEtl] = useState(null); |
| const [ragStatus, setRagStatus] = useState(null); |
| const [sliceDice, setSliceDice] = useState(null); |
| const [sliceConfig, setSliceConfig] = useState({ row_dimension: "district", column_dimension: "Type of House", metric: "avg_roi" }); |
| const [question, setQuestion] = useState("Nên ưu tiên khu vực nào để đầu tư với ROI tốt và rủi ro vừa phải?"); |
| const [predictForm, setPredictForm] = useState({ district: "", property_type: "", legal_documents: "", area: 70, bedrooms: 3, toilets: 3, floors: 3, roi_expected: 0.14 }); |
| const [simulationForm, setSimulationForm] = useState({ budget_billion: 10, annual_growth_pct: 8, years: 25 }); |
| const assistantAbortRef = useRef(null); |
| const reportNoteAbortRef = useRef(null); |
| const runtimeModelLabel = aiRuntime?.model || DEFAULT_MODEL_LABEL; |
|
|
| useEffect(() => { |
| request("/api/metadata") |
| .then((data) => { |
| setMetadata(data); |
| const initialCity = data.cities?.[0] || emptyFilters.city; |
| const initialDistrict = data.districts_by_city?.[initialCity]?.[0] || data.districts?.[0] || ""; |
| setFilters((current) => ({ ...current, city: initialCity })); |
| setPredictForm((current) => ({ ...current, district: initialDistrict, property_type: data.property_types[0], legal_documents: data.legal_documents[0] })); |
| }) |
| .catch(() => setError("Không kết nối được backend FastAPI. Hãy chạy uvicorn backend.main:app --reload.")) |
| .finally(() => setLoading(false)); |
| }, []); |
|
|
| useEffect(() => { |
| request("/api/etl/status") |
| .then((etlPayload) => { setEtl(etlPayload); }) |
| .catch(() => setError("Không tải được dữ liệu vận hành từ backend.")); |
| }, []); |
|
|
| useEffect(() => { |
| let cancelled = false; |
| async function refreshAiRuntime() { |
| try { |
| const payload = await request("/api/ai/status"); |
| if (!cancelled) setAiRuntime(payload); |
| } catch { |
| if (!cancelled) setAiRuntime({ status: "error", label: "Error", message: "Không đọc được trạng thái AI." }); |
| } |
| } |
| refreshAiRuntime(); |
| const timer = window.setInterval(refreshAiRuntime, 3000); |
| return () => { |
| cancelled = true; |
| window.clearInterval(timer); |
| }; |
| }, []); |
|
|
| useEffect(() => { |
| if (!filters.city) return; |
| request(`/api/map/districts?city=${encodeURIComponent(filters.city)}`) |
| .then((payload) => setMapData(payload)) |
| .catch(() => setError("Không tải được dữ liệu bản đồ theo thành phố đã chọn.")); |
| }, [filters.city]); |
|
|
| useEffect(() => { |
| if (!metadata) return; |
| setLoading(true); |
| Promise.all([ |
| request("/api/analytics", { method: "POST", body: JSON.stringify(filters) }), |
| request("/api/slice-dice", { method: "POST", body: JSON.stringify({ filters, ...sliceConfig }) }) |
| ]) |
| .then(([analyticsPayload, slicePayload]) => { setAnalytics(analyticsPayload); setSliceDice(slicePayload); }) |
| .catch(() => setError("Không tải được dữ liệu phân tích.")) |
| .finally(() => setLoading(false)); |
| }, [filters, metadata, sliceConfig]); |
|
|
| useEffect(() => { |
| if (!metadata || !analytics || activePage !== "report") return; |
| let cancelled = false; |
| setReportNoteLoading(true); |
| if (reportNoteAbortRef.current) reportNoteAbortRef.current.abort(); |
| const controller = new AbortController(); |
| reportNoteAbortRef.current = controller; |
| const timer = window.setTimeout(async () => { |
| try { |
| let streamedNote = ""; |
| await requestNdjsonStream("/api/assistant/stream", { |
| method: "POST", |
| body: JSON.stringify({ |
| question: buildReportQuestion(analytics, filters), |
| filters, |
| task: "executive_brief" |
| }), |
| signal: controller.signal |
| }, { |
| onMeta: (event) => { |
| if (cancelled) return; |
| setReportNote((current) => ({ |
| ...current, |
| answer: streamedNote, |
| sources: event.sources || [], |
| model: event.model || current?.model || runtimeModelLabel, |
| mode: event.mode || current?.mode || "hf-qwen", |
| llm_available: Boolean(event.llm_available), |
| llm_mode: event.llm_mode || current?.llm_mode, |
| status: event.status || current?.status |
| })); |
| }, |
| onLine: (event) => { |
| if (cancelled) return; |
| streamedNote += `${event.text || ""}\n`; |
| setReportNote((current) => ({ |
| ...current, |
| answer: streamedNote, |
| llm_available: true, |
| mode: "hf-qwen", |
| status: "streaming" |
| })); |
| }, |
| onDone: (event) => { |
| if (cancelled) return; |
| streamedNote = event.answer || streamedNote; |
| setReportNote((current) => ({ |
| ...current, |
| answer: streamedNote, |
| model: event.model || current?.model || runtimeModelLabel, |
| mode: event.mode || current?.mode || "hf-qwen", |
| llm_available: true, |
| llm_mode: event.llm_mode || current?.llm_mode, |
| status: "done" |
| })); |
| } |
| }); |
| if (!cancelled) { |
| setReportNoteLoading(false); |
| } |
| } catch (error) { |
| if (error?.name === "AbortError") { |
| if (!cancelled) setReportNoteLoading(false); |
| return; |
| } |
| if (!cancelled) { |
| setReportNote({ |
| answer: `AI gián đoạn: ${error instanceof Error ? error.message : "AI provider chưa phản hồi trong thời gian quy định."}`, |
| sources: [], |
| model: runtimeModelLabel, |
| mode: "error", |
| llm_available: false, |
| retrieval_time_ms: 0, |
| llm_mode: "featherless-direct", |
| status: "error" |
| }); |
| setReportNoteLoading(false); |
| } |
| } |
| }, 500); |
| return () => { |
| cancelled = true; |
| window.clearTimeout(timer); |
| controller.abort(); |
| setReportNoteLoading(false); |
| }; |
| }, [activePage, analytics, filters, metadata]); |
|
|
| useEffect(() => { |
| if (!metadata) return; |
| const availableDistricts = metadata.districts_by_city?.[filters.city] || metadata.districts || []; |
| if (!availableDistricts.length) return; |
| if (!availableDistricts.includes(predictForm.district)) { |
| setPredictForm((current) => ({ ...current, district: availableDistricts[0] })); |
| } |
| }, [metadata, filters.city, predictForm.district]); |
|
|
| const typeRows = analytics?.types || []; |
| const typeShare = useMemo(() => { |
| const total = typeRows.reduce((sum, row) => sum + row.avg_price * row.listings, 0); |
| return typeRows.map((row) => ({ name: row["Type of House"], value: total ? (row.avg_price * row.listings) / total * 100 : 0 })); |
| }, [typeRows]); |
|
|
| async function runWhatIf(event) { |
| event.preventDefault(); |
| const payload = { |
| ...predictForm, |
| area: Number(predictForm.area), |
| bedrooms: propertyNeedsRoomFields(predictForm.property_type) ? toNullableNumber(predictForm.bedrooms) : null, |
| toilets: propertyNeedsRoomFields(predictForm.property_type) ? toNullableNumber(predictForm.toilets) : null, |
| floors: propertyNeedsFloorField(predictForm.property_type) ? toNullableNumber(predictForm.floors) : null, |
| roi_expected: Number(predictForm.roi_expected), |
| budget_vnd: Number(simulationForm.budget_billion) * 1_000_000_000, |
| annual_growth_pct: Number(simulationForm.annual_growth_pct), |
| years: Number(simulationForm.years) |
| }; |
| const recommendationPayloadBody = { |
| ...payload, |
| filters, |
| task: "decision_memo", |
| decision_tab: decisionView |
| }; |
| try { |
| setSimulationLoading(true); |
| setPrediction(null); |
| setWhatIf(null); |
| setSimulationStage("Đang gửi yêu cầu mô phỏng..."); |
| setAiRecommendation({ |
| answer: "", |
| why: "", |
| suggestion: "", |
| risks: [], |
| basis: [], |
| sources: [], |
| model: runtimeModelLabel, |
| mode: "loading", |
| status: "loading", |
| llm_available: false, |
| retrieval_time_ms: 0, |
| llm_mode: "featherless-direct" |
| }); |
| let streamedRecommendation = ""; |
| await requestNdjsonStream("/api/recommendation/future/stream", { |
| method: "POST", |
| body: JSON.stringify(recommendationPayloadBody) |
| }, { |
| onMeta: (eventPayload) => { |
| setAiRecommendation((current) => ({ |
| ...current, |
| model: eventPayload.model || current?.model || runtimeModelLabel, |
| mode: eventPayload.mode || current?.mode || "loading", |
| status: eventPayload.status || current?.status || "loading", |
| llm_available: Boolean(eventPayload.llm_available), |
| llm_mode: eventPayload.llm_mode || current?.llm_mode || "featherless-direct" |
| })); |
| if (eventPayload.status === "waiting_featherless") { |
| setSimulationStage("Đang chờ Featherless..."); |
| } else if (eventPayload.status === "waiting_huggingface") { |
| setSimulationStage("Đang chờ Hugging Face..."); |
| } |
| }, |
| onStage: (eventPayload) => { |
| setSimulationStage(eventPayload.text || "Đang xử lý mô phỏng..."); |
| setAiRecommendation((current) => ({ |
| ...current, |
| status: "streaming", |
| mode: current?.mode || "hf-qwen-future-recommendation", |
| llm_available: true, |
| llm_mode: current?.llm_mode || "featherless-direct" |
| })); |
| }, |
| onWhatIf: (eventPayload) => { |
| setPrediction(eventPayload.prediction || eventPayload.what_if?.asset_prediction || null); |
| setWhatIf(eventPayload.what_if || null); |
| setSimulationStage("Đang sinh khuyến nghị AI..."); |
| }, |
| onLine: (eventPayload) => { |
| const text = sanitizeRecommendationText(eventPayload.text || ""); |
| if (!text) return; |
| const section = eventPayload.section || "answer"; |
| if (section === "answer") { |
| streamedRecommendation = `${streamedRecommendation}${text}\n`; |
| } |
| setAiRecommendation((current) => ({ |
| ...current, |
| answer: section === "answer" ? streamedRecommendation : current?.answer || "", |
| why: section === "why" ? `${current?.why || ""}${text}\n` : current?.why || "", |
| suggestion: section === "suggestion" ? `${current?.suggestion || ""}${text}\n` : current?.suggestion || "", |
| risks: section === "risks" ? [...(current?.risks || []), text] : current?.risks || [], |
| basis: section === "basis" ? [...(current?.basis || []), text] : current?.basis || [], |
| mode: "hf-qwen-future-recommendation", |
| status: "streaming", |
| llm_available: true, |
| llm_mode: current?.llm_mode || "featherless-direct" |
| })); |
| }, |
| onDone: (eventPayload) => { |
| setPrediction(eventPayload.what_if?.asset_prediction || null); |
| setWhatIf(eventPayload.what_if || null); |
| const doneAnswer = sanitizeRecommendationText(eventPayload.answer || ""); |
| const doneWhy = sanitizeRecommendationText(eventPayload.why || ""); |
| const doneSuggestion = sanitizeRecommendationText(eventPayload.suggestion || ""); |
| const doneRisks = sanitizeRecommendationList(eventPayload.risks || []); |
| const doneBasis = sanitizeRecommendationList(eventPayload.basis || []); |
| setAiRecommendation((current) => ({ |
| ...current, |
| ...eventPayload, |
| answer: doneAnswer, |
| why: doneWhy, |
| suggestion: doneSuggestion, |
| risks: doneRisks, |
| basis: doneBasis, |
| chart_caption: sanitizeRecommendationText(eventPayload.chart_caption || current?.chart_caption || ""), |
| mode: eventPayload.mode || "hf-qwen-future-recommendation", |
| status: "done", |
| llm_available: true, |
| llm_mode: eventPayload.llm_mode || current?.llm_mode || "featherless-direct" |
| })); |
| setSimulationStage("Hoàn tất mô phỏng."); |
| } |
| }); |
| } catch (error) { |
| setAiRecommendation({ |
| answer: `AI gián đoạn: ${error instanceof Error ? error.message : "AI provider chưa phản hồi trong thời gian quy định."}`, |
| why: "", |
| suggestion: "", |
| risks: ["Khuyến nghị không thể sinh đúng thời gian vì mô hình hosted chưa phản hồi."], |
| basis: [], |
| sources: [], |
| model: runtimeModelLabel, |
| mode: "error", |
| status: "error", |
| llm_available: false, |
| retrieval_time_ms: 0, |
| llm_mode: "featherless-direct" |
| }); |
| setSimulationStage("Mô phỏng bị gián đoạn."); |
| } finally { |
| setSimulationLoading(false); |
| } |
| } |
|
|
| async function askAssistant(action = "run") { |
| if (action === "stop") { |
| assistantAbortRef.current?.abort(); |
| setAssistantLoading(false); |
| return; |
| } |
| setAssistantLoading(true); |
| setAssistant({ |
| answer: "", |
| sources: [], |
| model: runtimeModelLabel, |
| mode: "streaming", |
| llm_available: true, |
| retrieval_time_ms: 0, |
| llm_mode: "featherless-direct", |
| status: "waiting_featherless" |
| }); |
| if (assistantAbortRef.current) assistantAbortRef.current.abort(); |
| const controller = new AbortController(); |
| assistantAbortRef.current = controller; |
| try { |
| let streamedAnswer = ""; |
| let streamBuffer = ""; |
| await requestNdjsonStream("/api/assistant/stream", { |
| method: "POST", |
| body: JSON.stringify({ question, filters, task: "assistant_question" }), |
| signal: controller.signal |
| }, { |
| onMeta: (event) => { |
| setAssistant((current) => ({ |
| ...current, |
| answer: streamedAnswer, |
| sources: event.sources || [], |
| model: event.model || current.model || runtimeModelLabel, |
| mode: event.mode || current.mode, |
| llm_available: Boolean(event.llm_available), |
| llm_mode: event.llm_mode || current.llm_mode, |
| status: event.status || current.status |
| })); |
| }, |
| onLine: (event) => { |
| streamBuffer = `${streamBuffer}${event.text || ""}\n`; |
| streamedAnswer += event.text || ""; |
| setAssistant((current) => ({ |
| ...current, |
| answer: streamBuffer, |
| llm_available: true, |
| mode: "hf-qwen", |
| status: "streaming" |
| })); |
| }, |
| onDone: (event) => { |
| streamedAnswer = event.answer || streamedAnswer; |
| setAssistant((current) => ({ |
| ...current, |
| answer: streamedAnswer.split("\n").filter(Boolean).join("\n"), |
| model: event.model || current.model || runtimeModelLabel, |
| mode: event.mode || "hf-qwen", |
| llm_available: true, |
| llm_mode: event.llm_mode || current.llm_mode, |
| status: "done" |
| })); |
| } |
| }); |
| } catch (error) { |
| if (error?.name === "AbortError") { |
| setAssistant((current) => ({ |
| ...current, |
| mode: "stopped", |
| llm_available: false, |
| status: "stopped" |
| })); |
| } else { |
| setAssistant({ |
| answer: `AI gián đoạn: ${error instanceof Error ? error.message : "AI provider chưa phản hồi trong thời gian quy định."}`, |
| sources: [], |
| model: runtimeModelLabel, |
| mode: "error", |
| llm_available: false, |
| retrieval_time_ms: 0, |
| llm_mode: "featherless-direct", |
| status: "error" |
| }); |
| } |
| } finally { |
| if (assistantAbortRef.current === controller) assistantAbortRef.current = null; |
| setAssistantLoading(false); |
| } |
| } |
|
|
| async function refreshEtl() { |
| setLoading(true); |
| const payload = await request("/api/etl/run", { method: "POST", body: JSON.stringify({}) }); |
| setEtl(payload.status); |
| setMapData(await request(`/api/map/districts?city=${encodeURIComponent(filters.city || emptyFilters.city)}`)); |
| setRagStatus(await request("/api/rag/reindex", { method: "POST", body: JSON.stringify({}) })); |
| setAnalytics(await request("/api/analytics", { method: "POST", body: JSON.stringify(filters) })); |
| setLoading(false); |
| } |
|
|
| if (error) return <div className="boot-error">{error}</div>; |
| if (!metadata || !analytics) return <div className="boot">Đang khởi tạo PropertyVision...</div>; |
|
|
| const sharedPageProps = { activePage, analytics, typeShare, sliceDice, sliceConfig, setSliceConfig, metadata, filters, mapData, etl, refreshEtl, loading, ragStatus, question, setQuestion, assistant, assistantLoading, askAssistant, reportNote, reportNoteLoading }; |
| const decisionPageProps = { ...sharedPageProps, decisionView, setDecisionView, predictForm, setPredictForm, simulationForm, setSimulationForm, prediction, whatIf, aiRecommendation, runWhatIf, simulationLoading, simulationStage }; |
|
|
| return ( |
| <AppShell activePage={activePage} setActivePage={setActivePage} loading={loading} metadata={metadata} filters={filters} setFilters={setFilters} aiRuntime={aiRuntime} analytics={analytics} etl={etl}> |
| {activePage === "overview" && <OverviewPage {...sharedPageProps} />} |
| {activePage === "market" && <MarketPage {...sharedPageProps} />} |
| {activePage === "slice" && <SlicePage {...sharedPageProps} />} |
| {activePage === "decision" && <DecisionPage {...decisionPageProps} />} |
| {activePage === "gis" && <GisPage {...sharedPageProps} />} |
| {activePage === "ai" && <AiPage {...sharedPageProps} />} |
| {activePage === "ops" && <DataOpsPage {...sharedPageProps} />} |
| {activePage === "explorer" && <ExplorerPage {...sharedPageProps} />} |
| {activePage === "report" && <ReportPage {...sharedPageProps} />} |
| </AppShell> |
| ); |
| } |
|
|
| createRoot(document.getElementById("root")).render(<App />); |
|
|
