diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..5ef6a52 --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..e215bc4 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/frontend/app/favicon.ico b/frontend/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/frontend/app/favicon.ico differ diff --git a/frontend/app/globals.css b/frontend/app/globals.css new file mode 100644 index 0000000..854c4f6 --- /dev/null +++ b/frontend/app/globals.css @@ -0,0 +1,105 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 221.2 83.2% 53.3%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 221.2 83.2% 53.3%; + --radius: 0.5rem; + + /* Sidebar specific colors */ + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + + /* Overlay constraints */ + --max-overlay-width: calc(100vw - 32px); + --max-overlay-height: calc(100vh - 32px); + } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 224.3 76.3% 48%; + + /* Sidebar specific colors for dark mode */ + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 0 0% 98%; + --sidebar-primary-foreground: 240 5.9% 10%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + +@layer components { + .overlay-container { + @apply absolute z-20; + max-width: var(--max-overlay-width); + max-height: var(--max-overlay-height); + } + + .overlay-container[data-minimized="true"] { + @apply z-10; + } + + .overlay-card { + @apply bg-card/95 backdrop-blur-sm border border-border/50 shadow-lg; + max-width: 100%; + max-height: 100%; + } + + .overlay-minimized { + @apply w-[200px] h-auto; + } +} diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx new file mode 100644 index 0000000..17b2ce8 --- /dev/null +++ b/frontend/app/layout.tsx @@ -0,0 +1,20 @@ +import type { Metadata } from 'next' +import './globals.css' + +export const metadata: Metadata = { + title: 'v0 App', + description: 'Created with v0', + generator: 'v0.dev', +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + {children} + + ) +} diff --git a/frontend/app/map/components/analytics-overlay.tsx b/frontend/app/map/components/analytics-overlay.tsx new file mode 100644 index 0000000..f5abbbc --- /dev/null +++ b/frontend/app/map/components/analytics-overlay.tsx @@ -0,0 +1,114 @@ +"use client" + +import { LineChart, Wind, Droplets, Sparkles, Bot } from "lucide-react" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { AreaChart } from "./area-chart" +import { Overlay } from "./overlay-system/overlay" +import { useOverlay } from "./overlay-system/overlay-context" + +export function AnalyticsOverlay() { + const { toggleOverlay } = useOverlay() + + const handleChatClick = () => { + toggleOverlay("chat") + } + + return ( + } + initialPosition="top-right" + initialIsOpen={true} + width="350px" + > +
+
+
+

Information in radius will be analyzed

+ + + + + + Area Price History + +
+
10,000,000 Baht
+
+

Overall Price History of this area

+ + + + + + + + + + + Price Prediction + +
+
15,000,000 Baht
+
+

The estimated price based on various factors.

+ + + + + + +
+ + + + + Flood Factor + +
+
+ Moderate +
+ + + + + + + + Air Factor + +
+
+ Bad +
+ + +
+ + + + + + Chat With AI + +

Want to ask specific question?

+ + +
+
+
+ + ) +} + diff --git a/frontend/app/map/components/analytics-panel.tsx b/frontend/app/map/components/analytics-panel.tsx new file mode 100644 index 0000000..7dbb51a --- /dev/null +++ b/frontend/app/map/components/analytics-panel.tsx @@ -0,0 +1,143 @@ +"use client" + +import { Bot, LineChart, Wind, Droplets, Sparkles, Maximize2, Minimize2, ArrowLeftRight } from "lucide-react" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { AreaChart } from "./area-chart" +import { Button } from "@/components/ui/button" +import { useOverlayContext } from "./overlay-context" +import { ScrollArea } from "@/components/ui/scroll-area" + +interface AnalyticsPanelProps { + onChatClick: () => void +} + +export function AnalyticsPanel({ onChatClick }: AnalyticsPanelProps) { + const { overlays, minimizeOverlay, maximizeOverlay, changePosition } = useOverlayContext() + const isMinimized = overlays.analytics.minimized + const position = overlays.analytics.position + + if (isMinimized) { + return ( + + + Analytics + + + + ) + } + + return ( + + + + + Analytics + +
+ + +
+ + + +
+

Information in radius will be analyzed

+ + + + + + Area Price History + +
+
10,000,000 Baht
+
+

Overall Price History of this area

+ + + + + + + + + + + Price Prediction + +
+
15,000,000 Baht
+
+

The estimated price based on various factors.

+ + + + + + +
+ + + + + Flood Factor + +
+
+ Moderate +
+ + + + + + + + Air Factor + +
+
+ Bad +
+ + +
+ + + + + + Chat With AI + +

Want to ask specific question?

+ + +
+ + + + ) +} + diff --git a/frontend/app/map/components/area-chart.tsx b/frontend/app/map/components/area-chart.tsx new file mode 100644 index 0000000..ee04e2a --- /dev/null +++ b/frontend/app/map/components/area-chart.tsx @@ -0,0 +1,65 @@ +"use client" + +import { LineChart, Line, ResponsiveContainer, XAxis, YAxis, Tooltip } from "@/components/ui/chart" +import { useTheme } from "next-themes" + +interface AreaChartProps { + data: number[] + color: string +} + +export function AreaChart({ data, color }: AreaChartProps) { + const { theme } = useTheme() + const isDark = theme === "dark" + + // Generate labels (months) + const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] + + // Format the data for the chart + const chartData = data.map((value, index) => ({ + name: labels[index], + value: value, + })) + + // Format the price for display + const formatPrice = (value: number) => { + return new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(value) + } + + return ( +
+ + + + dataMin * 0.95, (dataMax: number) => dataMax * 1.05]} /> + [formatPrice(value), "Price"]} + contentStyle={{ + backgroundColor: isDark ? "#1f2937" : "white", + borderRadius: "0.375rem", + border: isDark ? "1px solid #374151" : "1px solid #e2e8f0", + fontSize: "0.75rem", + color: isDark ? "#e5e7eb" : "#1f2937", + }} + /> + + + +
+ ) +} + diff --git a/frontend/app/map/components/chat-bot.tsx b/frontend/app/map/components/chat-bot.tsx new file mode 100644 index 0000000..4feccea --- /dev/null +++ b/frontend/app/map/components/chat-bot.tsx @@ -0,0 +1,109 @@ +"use client" + +import { useState } from "react" +import { Send, X, Minimize2, Maximize2 } from "lucide-react" +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Input } from "@/components/ui/input" +import { useOverlayContext } from "./overlay-context" +import { ScrollArea } from "@/components/ui/scroll-area" + +interface ChatBotProps { + onClose: () => void +} + +export function ChatBot({ onClose }: ChatBotProps) { + const { overlays, minimizeOverlay, maximizeOverlay } = useOverlayContext() + const isMinimized = overlays.chat.minimized + + const [message, setMessage] = useState("") + const [chatHistory, setChatHistory] = useState([{ role: "bot", content: "Hi! How can I help you today?" }]) + + const handleSendMessage = () => { + if (!message.trim()) return + + // Add user message to chat + setChatHistory([...chatHistory, { role: "user", content: message }]) + + // Simulate bot response (in a real app, this would call an API) + setTimeout(() => { + setChatHistory((prev) => [ + ...prev, + { + role: "bot", + content: "I can provide information about this area. What would you like to know?", + }, + ]) + }, 1000) + + setMessage("") + } + + if (isMinimized) { + return ( + + + ChatBot +
+ + +
+ + + ) + } + + return ( + + + ChatBot +
+ + +
+ + + +
+ {chatHistory.map((chat, index) => ( +
+
+ {chat.content} +
+
+ ))} +
+ +
+ setMessage(e.target.value)} + placeholder="Type your message..." + className="flex-1" + onKeyDown={(e) => { + if (e.key === "Enter") { + handleSendMessage() + } + }} + /> + +
+ + + ) +} + diff --git a/frontend/app/map/components/chat-overlay.tsx b/frontend/app/map/components/chat-overlay.tsx new file mode 100644 index 0000000..2178db7 --- /dev/null +++ b/frontend/app/map/components/chat-overlay.tsx @@ -0,0 +1,78 @@ +"use client" + +import { useState } from "react" +import { Send, MessageCircle } from "lucide-react" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Overlay } from "./overlay-system/overlay" + +export function ChatOverlay() { + const [message, setMessage] = useState("") + const [chatHistory, setChatHistory] = useState([{ role: "bot", content: "Hi! How can I help you today?" }]) + + const handleSendMessage = () => { + if (!message.trim()) return + + // Add user message to chat + setChatHistory([...chatHistory, { role: "user", content: message }]) + + // Simulate bot response (in a real app, this would call an API) + setTimeout(() => { + setChatHistory((prev) => [ + ...prev, + { + role: "bot", + content: "I can provide information about this area. What would you like to know?", + }, + ]) + }, 1000) + + setMessage("") + } + + return ( + } + initialPosition="bottom-right" + initialIsOpen={false} + width="400px" + > +
+
+
+ {chatHistory.map((chat, index) => ( +
+
+ {chat.content} +
+
+ ))} +
+
+
+ setMessage(e.target.value)} + placeholder="Type your message..." + className="flex-1" + onKeyDown={(e) => { + if (e.key === "Enter") { + handleSendMessage() + } + }} + /> + +
+
+ + ) +} + diff --git a/frontend/app/map/components/filters-overlay.tsx b/frontend/app/map/components/filters-overlay.tsx new file mode 100644 index 0000000..852de42 --- /dev/null +++ b/frontend/app/map/components/filters-overlay.tsx @@ -0,0 +1,142 @@ +"use client" + +import { useState } from "react" +import { Filter } from "lucide-react" +import { Button } from "@/components/ui/button" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" +import { Slider } from "@/components/ui/slider" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Switch } from "@/components/ui/switch" +import { Label } from "@/components/ui/label" +import { Overlay } from "./overlay-system/overlay" + +export function FiltersOverlay() { + const [area, setArea] = useState("< 30 km") + const [timePeriod, setTimePeriod] = useState("All Time") + const [propertyType, setPropertyType] = useState("House") + const [priceRange, setPriceRange] = useState([5000000, 20000000]) + const [activeTab, setActiveTab] = useState("basic") + + return ( + } + initialPosition="bottom-left" + initialIsOpen={true} + width="350px" + > +
+ + + Basic + Advanced + + + +
+
+ + +
+
+ + +
+
+
+ + +
+ + + +
+
+
+ + + {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(priceRange[0])}{" "} + -{" "} + {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(priceRange[1])} + +
+ +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + + +
+ + ) +} + diff --git a/frontend/app/map/components/map-container.tsx b/frontend/app/map/components/map-container.tsx new file mode 100644 index 0000000..593a0bd --- /dev/null +++ b/frontend/app/map/components/map-container.tsx @@ -0,0 +1,45 @@ +"use client" + +import { useEffect, useRef } from "react" + +interface MapContainerProps { + selectedLocation: { + lat: number + lng: number + name?: string + } +} + +export function MapContainer({ selectedLocation }: MapContainerProps) { + const mapRef = useRef(null) + + useEffect(() => { + // This is a placeholder for actual map integration + // In a real application, you would use a library like Google Maps, Mapbox, or Leaflet + const mapElement = mapRef.current + + if (mapElement) { + // Simulate map loading with a background image + mapElement.style.backgroundImage = "url('/placeholder.svg?height=800&width=1200')" + mapElement.style.backgroundSize = "cover" + mapElement.style.backgroundPosition = "center" + } + + // Clean up function + return () => { + if (mapElement) { + mapElement.style.backgroundImage = "" + } + } + }, [selectedLocation]) + + return ( +
+ {/* Map markers would be rendered here in a real implementation */} +
+
+
+
+ ) +} + diff --git a/frontend/app/map/components/map-header.tsx b/frontend/app/map/components/map-header.tsx new file mode 100644 index 0000000..ab0254c --- /dev/null +++ b/frontend/app/map/components/map-header.tsx @@ -0,0 +1,32 @@ +"use client" + +import { ChevronRight } from "lucide-react" +import Link from "next/link" +import { Button } from "@/components/ui/button" +import { ThemeToggle } from "@/components/theme-toggle" + +export function MapHeader() { + return ( +
+
+ + Tools + + + Map +
+ +
+ + + + +
+
+ ) +} + diff --git a/frontend/app/map/components/map-sidebar.tsx b/frontend/app/map/components/map-sidebar.tsx new file mode 100644 index 0000000..7e938c0 --- /dev/null +++ b/frontend/app/map/components/map-sidebar.tsx @@ -0,0 +1,127 @@ +"use client" + +import type React from "react" + +import { + Home, + Clock, + Map, + FileText, + Settings, + PenTool, + BarChart3, + Plane, + LineChart, + DollarSign, + MoreHorizontal, +} from "lucide-react" +import Link from "next/link" +import { cn } from "@/lib/utils" +import { usePathname } from "next/navigation" + +export function MapSidebar() { + const pathname = usePathname() + + const mainNavItems = [ + { name: "Home", icon: Home, href: "/" }, + { name: "My assets", icon: Clock, href: "/assets" }, + { name: "Models", icon: Map, href: "/models" }, + { name: "Trade", icon: LineChart, href: "/trade" }, + { name: "Earn", icon: DollarSign, href: "/earn" }, + { name: "Documentation", icon: FileText, href: "/documentation", badge: "NEW" }, + { name: "Pay", icon: Settings, href: "/pay" }, + { name: "More", icon: MoreHorizontal, href: "/more" }, + ] + + const projectNavItems = [ + { name: "Design Engineering", icon: PenTool, href: "/projects/design" }, + { name: "Sales & Marketing", icon: BarChart3, href: "/projects/sales" }, + { name: "Travel", icon: Plane, href: "/projects/travel" }, + ] + + return ( + + ) +} + +function Gift(props: React.SVGProps) { + return ( + + + + + + + + ) +} + diff --git a/frontend/app/map/components/overlay-context.tsx b/frontend/app/map/components/overlay-context.tsx new file mode 100644 index 0000000..3383b70 --- /dev/null +++ b/frontend/app/map/components/overlay-context.tsx @@ -0,0 +1,94 @@ +"use client" + +import { createContext, useContext, useState, type ReactNode } from "react" + +type OverlayType = "analytics" | "filters" | "chat" +type OverlayPosition = "left" | "right" + +interface OverlayState { + visible: boolean + minimized: boolean + position: OverlayPosition +} + +interface OverlayContextType { + overlays: Record + toggleOverlay: (type: OverlayType) => void + minimizeOverlay: (type: OverlayType) => void + maximizeOverlay: (type: OverlayType) => void + changePosition: (type: OverlayType, position: OverlayPosition) => void +} + +const OverlayContext = createContext(undefined) + +export function OverlayProvider({ children }: { children: ReactNode }) { + const [overlays, setOverlays] = useState>({ + analytics: { visible: true, minimized: false, position: "right" }, + filters: { visible: true, minimized: false, position: "left" }, + chat: { visible: false, minimized: false, position: "right" }, + }) + + const toggleOverlay = (type: OverlayType) => { + setOverlays((prev) => ({ + ...prev, + [type]: { + ...prev[type], + visible: !prev[type].visible, + minimized: false, + }, + })) + } + + const minimizeOverlay = (type: OverlayType) => { + setOverlays((prev) => ({ + ...prev, + [type]: { + ...prev[type], + minimized: true, + }, + })) + } + + const maximizeOverlay = (type: OverlayType) => { + setOverlays((prev) => ({ + ...prev, + [type]: { + ...prev[type], + minimized: false, + }, + })) + } + + const changePosition = (type: OverlayType, position: OverlayPosition) => { + setOverlays((prev) => ({ + ...prev, + [type]: { + ...prev[type], + position, + }, + })) + } + + return ( + + {children} + + ) +} + +export function useOverlayContext() { + const context = useContext(OverlayContext) + if (context === undefined) { + throw new Error("useOverlayContext must be used within an OverlayProvider") + } + return context +} + diff --git a/frontend/app/map/components/overlay-controls.tsx b/frontend/app/map/components/overlay-controls.tsx new file mode 100644 index 0000000..2d546ec --- /dev/null +++ b/frontend/app/map/components/overlay-controls.tsx @@ -0,0 +1,79 @@ +"use client" + +import { MessageCircle, Filter, Layers, ArrowLeftRight } from "lucide-react" +import { Button } from "@/components/ui/button" +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" +import { useOverlayContext } from "./overlay-context" + +export function OverlayControls() { + const { overlays, toggleOverlay, changePosition } = useOverlayContext() + + return ( + +
+ + + + + + {overlays.analytics.visible ? "Hide analytics" : "Show analytics"} + + + + + + + + {overlays.filters.visible ? "Hide filters" : "Show filters"} + + + + + + + + Move analytics to the {overlays.analytics.position === "right" ? "left" : "right"} + + + + {!overlays.chat.visible && ( + + + + + Open chat + + )} +
+ + ) +} + diff --git a/frontend/app/map/components/overlay-manager.tsx b/frontend/app/map/components/overlay-manager.tsx new file mode 100644 index 0000000..5f96e22 --- /dev/null +++ b/frontend/app/map/components/overlay-manager.tsx @@ -0,0 +1,59 @@ +"use client" + +import { useOverlayContext } from "./overlay-context" +import { AnalyticsPanel } from "./analytics-panel" +import { PropertyFilters } from "./property-filters" +import { ChatBot } from "./chat-bot" +import { OverlayControls } from "./overlay-controls" + +export function OverlayManager() { + const { overlays, toggleOverlay } = useOverlayContext() + + // Function to ensure overlays stay within viewport bounds + const getPositionClasses = (position: string, type: string) => { + if (position === "right") { + return "right-4" + } else if (position === "left") { + return "left-4" + } + return type === "analytics" ? "right-4" : "left-4" + } + + return ( + <> + {/* Analytics Panel */} + {overlays.analytics.visible && ( +
+ toggleOverlay("chat")} /> +
+ )} + + {/* Property Filters */} + {overlays.filters.visible && ( +
+ +
+ )} + + {/* Chat Bot */} + {overlays.chat.visible && ( +
+ toggleOverlay("chat")} /> +
+ )} + + {/* Overlay Controls */} + + + ) +} + diff --git a/frontend/app/map/components/overlay-system/overlay-context.tsx b/frontend/app/map/components/overlay-system/overlay-context.tsx new file mode 100644 index 0000000..0503f5a --- /dev/null +++ b/frontend/app/map/components/overlay-system/overlay-context.tsx @@ -0,0 +1,223 @@ +"use client"; + +import React, { createContext, useContext, useState, useCallback, useRef, type ReactNode } from "react"; + +// Define overlay types and positions +export type OverlayId = string; +export type OverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center"; + +// Interface for overlay state +export interface OverlayState { + id: OverlayId; + isOpen: boolean; + isMinimized: boolean; + position: OverlayPosition; + zIndex: number; + title: string; + icon?: React.ReactNode; +} + +// Interface for the overlay context +interface OverlayContextType { + overlays: Record; + registerOverlay: (id: OverlayId, initialState: Partial) => void; + unregisterOverlay: (id: OverlayId) => void; + openOverlay: (id: OverlayId) => void; + closeOverlay: (id: OverlayId) => void; + toggleOverlay: (id: OverlayId) => void; + minimizeOverlay: (id: OverlayId) => void; + maximizeOverlay: (id: OverlayId) => void; + setPosition: (id: OverlayId, position: OverlayPosition) => void; + bringToFront: (id: OverlayId) => void; + getNextZIndex: () => number; +} + +// Create the context +const OverlayContext = createContext(undefined); + +// Default values for overlay state +const defaultOverlayState: Omit = { + isOpen: false, + isMinimized: false, + position: "bottom-right", + zIndex: 10, +}; + +export function OverlayProvider({ children }: { children: ReactNode }) { + const [overlays, setOverlays] = useState>({}); + const maxZIndexRef = useRef(10); + + // Get the next z-index value using a ref so it doesn't trigger re-renders + const getNextZIndex = useCallback(() => { + maxZIndexRef.current++; + return maxZIndexRef.current; + }, []); + + // Register a new overlay + const registerOverlay = useCallback((id: OverlayId, initialState: Partial) => { + setOverlays((prev) => { + if (prev[id]) return prev; + return { + ...prev, + [id]: { + ...defaultOverlayState, + id, + title: id, + ...initialState, + }, + }; + }); + }, []); + + // Unregister an overlay + const unregisterOverlay = useCallback((id: OverlayId) => { + setOverlays((prev) => { + const newOverlays = { ...prev }; + delete newOverlays[id]; + return newOverlays; + }); + }, []); + + // Open an overlay + const openOverlay = useCallback( + (id: OverlayId) => { + setOverlays((prev) => { + if (!prev[id]) return prev; + return { + ...prev, + [id]: { + ...prev[id], + isOpen: true, + isMinimized: false, + zIndex: getNextZIndex(), + }, + }; + }); + }, + [getNextZIndex] + ); + + // Close an overlay + const closeOverlay = useCallback((id: OverlayId) => { + setOverlays((prev) => { + if (!prev[id]) return prev; + return { + ...prev, + [id]: { + ...prev[id], + isOpen: false, + }, + }; + }); + }, []); + + // Toggle an overlay + const toggleOverlay = useCallback( + (id: OverlayId) => { + setOverlays((prev) => { + if (!prev[id]) return prev; + const newState = { + ...prev[id], + isOpen: !prev[id].isOpen, + }; + if (newState.isOpen) { + newState.isMinimized = false; + newState.zIndex = getNextZIndex(); + } + return { + ...prev, + [id]: newState, + }; + }); + }, + [getNextZIndex] + ); + + // Minimize an overlay + const minimizeOverlay = useCallback((id: OverlayId) => { + setOverlays((prev) => { + if (!prev[id]) return prev; + return { + ...prev, + [id]: { + ...prev[id], + isMinimized: true, + }, + }; + }); + }, []); + + // Maximize an overlay + const maximizeOverlay = useCallback( + (id: OverlayId) => { + setOverlays((prev) => { + if (!prev[id]) return prev; + return { + ...prev, + [id]: { + ...prev[id], + isMinimized: false, + zIndex: getNextZIndex(), + }, + }; + }); + }, + [getNextZIndex] + ); + + // Set the position of an overlay + const setPosition = useCallback((id: OverlayId, position: OverlayPosition) => { + setOverlays((prev) => { + if (!prev[id]) return prev; + return { + ...prev, + [id]: { + ...prev[id], + position, + }, + }; + }); + }, []); + + // Bring an overlay to the front + const bringToFront = useCallback( + (id: OverlayId) => { + setOverlays((prev) => { + if (!prev[id]) return prev; + return { + ...prev, + [id]: { + ...prev[id], + zIndex: getNextZIndex(), + }, + }; + }); + }, + [getNextZIndex] + ); + + const value = { + overlays, + registerOverlay, + unregisterOverlay, + openOverlay, + closeOverlay, + toggleOverlay, + minimizeOverlay, + maximizeOverlay, + setPosition, + bringToFront, + getNextZIndex, + }; + + return {children}; +} + +export function useOverlay() { + const context = useContext(OverlayContext); + if (context === undefined) { + throw new Error("useOverlay must be used within an OverlayProvider"); + } + return context; +} + diff --git a/frontend/app/map/components/overlay-system/overlay-dock.tsx b/frontend/app/map/components/overlay-system/overlay-dock.tsx new file mode 100644 index 0000000..281862d --- /dev/null +++ b/frontend/app/map/components/overlay-system/overlay-dock.tsx @@ -0,0 +1,50 @@ +"use client" +import { Button } from "@/components/ui/button" +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" +import { useOverlay } from "./overlay-context" + +interface OverlayDockProps { + position?: "bottom" | "right" + className?: string +} + +export function OverlayDock({ position = "bottom", className }: OverlayDockProps) { + const { overlays, toggleOverlay } = useOverlay() + + // Filter overlays that have icons + const overlaysWithIcons = Object.values(overlays).filter((overlay) => overlay.icon) + + if (overlaysWithIcons.length === 0) return null + + const positionClasses = { + bottom: "fixed bottom-4 left-1/2 -translate-x-1/2 flex flex-row gap-2 z-50", + right: "fixed right-4 top-1/2 -translate-y-1/2 flex flex-col gap-2 z-50", + } + + return ( + +
+ {overlaysWithIcons.map((overlay) => ( +
+ + + + + + {overlay.isOpen ? `Hide ${overlay.title}` : `Show ${overlay.title}`} + + +
+ ))} +
+ + ) +} + diff --git a/frontend/app/map/components/overlay-system/overlay.tsx b/frontend/app/map/components/overlay-system/overlay.tsx new file mode 100644 index 0000000..80ee07e --- /dev/null +++ b/frontend/app/map/components/overlay-system/overlay.tsx @@ -0,0 +1,156 @@ +"use client" + +import type React from "react" +import { useEffect, useState, useRef } from "react" +import { X, Minimize2, Maximize2, Move } from "lucide-react" +import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { cn } from "@/lib/utils" +import { useOverlay, type OverlayId, type OverlayPosition } from "./overlay-context" + +interface OverlayProps { + id: OverlayId + title: string + icon?: React.ReactNode + initialPosition?: OverlayPosition + initialIsOpen?: boolean + className?: string + children: React.ReactNode + onClose?: () => void + showMinimize?: boolean + width?: string + height?: string + maxHeight?: string +} + +export function Overlay({ + id, + title, + icon, + initialPosition = "bottom-right", + initialIsOpen = false, + className, + children, + onClose, + showMinimize = true, + width = "350px", + height = "auto", + maxHeight = "80vh", +}: OverlayProps) { + const { overlays, registerOverlay, unregisterOverlay, closeOverlay, minimizeOverlay, maximizeOverlay, bringToFront } = + useOverlay() + + const [isDragging, setIsDragging] = useState(false) + const overlayRef = useRef(null) + + // Register overlay on mount + useEffect(() => { + registerOverlay(id, { + title, + icon, + position: initialPosition, + isOpen: initialIsOpen, + }) + + // Unregister on unmount + return () => unregisterOverlay(id) + }, [id]) + + // Get overlay state + const overlay = overlays[id] + if (!overlay) return null + + const handleClose = () => { + closeOverlay(id) + if (onClose) onClose() + } + + const handleMinimize = () => { + minimizeOverlay(id) + } + + const handleMaximize = () => { + maximizeOverlay(id) + } + + const handleHeaderClick = () => { + if (!isDragging) { + bringToFront(id) + } + } + + // Position classes based on position + const positionClasses = { + "top-left": "top-4 left-4", + "top-right": "top-4 right-4", + "bottom-left": "bottom-4 left-4", + "bottom-right": "bottom-4 right-4", + center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", + } + + // If not open, don't render + if (!overlay.isOpen) return null + + // Render minimized state + if (overlay.isMinimized) { + return ( +
+ + + + {icon && {icon}} + {title} + +
+ + +
+ + +
+ ) + } + + // Render full overlay + return ( +
+ + + + {icon && {icon}} + {title} + + +
+ {showMinimize && ( + + )} + +
+ + {children} + +
+ ) +} + diff --git a/frontend/app/map/components/property-filters.tsx b/frontend/app/map/components/property-filters.tsx new file mode 100644 index 0000000..633e065 --- /dev/null +++ b/frontend/app/map/components/property-filters.tsx @@ -0,0 +1,167 @@ +"use client" + +import { useState } from "react" +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" +import { Slider } from "@/components/ui/slider" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Switch } from "@/components/ui/switch" +import { Label } from "@/components/ui/label" +import { Minimize2, Maximize2 } from "lucide-react" +import { useOverlayContext } from "./overlay-context" +import { ScrollArea } from "@/components/ui/scroll-area" + +export function PropertyFilters() { + const { overlays, minimizeOverlay, maximizeOverlay } = useOverlayContext() + const isMinimized = overlays.filters.minimized + + const [area, setArea] = useState("< 30 km") + const [timePeriod, setTimePeriod] = useState("All Time") + const [propertyType, setPropertyType] = useState("House") + const [priceRange, setPriceRange] = useState([5000000, 20000000]) + const [activeTab, setActiveTab] = useState("basic") + + if (isMinimized) { + return ( + + + Filters + + + + ) + } + + return ( + + + Property Filters + + + + + + + Basic + Advanced + + + +
+
+ + +
+
+ + +
+
+
+ + +
+ + + +
+
+
+ + + {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(priceRange[0])}{" "} + -{" "} + {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(priceRange[1])} + +
+ +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + + + + + + ) +} + diff --git a/frontend/app/map/layout.tsx b/frontend/app/map/layout.tsx new file mode 100644 index 0000000..84e2591 --- /dev/null +++ b/frontend/app/map/layout.tsx @@ -0,0 +1,10 @@ +import type React from "react" + +export default function MapLayout({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ) +} + diff --git a/frontend/app/map/page.tsx b/frontend/app/map/page.tsx new file mode 100644 index 0000000..97ea8f9 --- /dev/null +++ b/frontend/app/map/page.tsx @@ -0,0 +1,71 @@ +"use client" + +import { useState } from "react" +import { MapContainer } from "./components/map-container" +import { MapSidebar } from "./components/map-sidebar" +import { MapHeader } from "./components/map-header" +import { SidebarProvider } from "@/components/ui/sidebar" +import { ThemeProvider } from "@/components/theme-provider" +import { Button } from "@/components/ui/button" +import { ArrowRight } from "lucide-react" +import Link from "next/link" +import { OverlayProvider } from "./components/overlay-system/overlay-context" +import { OverlayDock } from "./components/overlay-system/overlay-dock" +import { AnalyticsOverlay } from "./components/analytics-overlay" +import { FiltersOverlay } from "./components/filters-overlay" +import { ChatOverlay } from "./components/chat-overlay" +import { ThemeController } from "@/components/theme-controller" + +export default function MapPage() { + const [selectedLocation, setSelectedLocation] = useState<{ + lat: number + lng: number + name?: string + }>({ + lat: 13.7563, + lng: 100.5018, + name: "Bangkok", + }) + + return ( + + + + +
+ +
+ +
+ + + {/* Prediction model banner */} +
+
+
+

Price Prediction: 15,000,000 ฿

+

Based on our AI model analysis

+
+ + + +
+
+ + {/* Overlay System */} + + + + +
+
+
+ + + + + ) +} + diff --git a/frontend/app/model-explanation/components/feature-importance-chart.tsx b/frontend/app/model-explanation/components/feature-importance-chart.tsx new file mode 100644 index 0000000..3496371 --- /dev/null +++ b/frontend/app/model-explanation/components/feature-importance-chart.tsx @@ -0,0 +1,65 @@ +"use client" + +import { useTheme } from "next-themes" +import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from "@/components/ui/chart" + +interface Feature { + name: string + importance: number + value: string + impact: "positive" | "negative" | "neutral" +} + +interface FeatureImportanceChartProps { + features: Feature[] +} + +export function FeatureImportanceChart({ features }: FeatureImportanceChartProps) { + const { theme } = useTheme() + const isDark = theme === "dark" + + // Sort features by importance + const sortedFeatures = [...features].sort((a, b) => b.importance - a.importance) + + const getBarColor = (impact: string) => { + if (impact === "positive") return "#10b981" + if (impact === "negative") return "#ef4444" + return "#f59e0b" + } + + return ( + + + + `${value}%`} + stroke={isDark ? "#9ca3af" : "#6b7280"} + /> + + [`${value}%`, "Importance"]} + contentStyle={{ + backgroundColor: isDark ? "#1f2937" : "white", + borderRadius: "0.375rem", + border: isDark ? "1px solid #374151" : "1px solid #e2e8f0", + fontSize: "0.75rem", + color: isDark ? "#e5e7eb" : "#1f2937", + }} + /> + + {sortedFeatures.map((entry, index) => ( + + ))} + + + + ) +} + diff --git a/frontend/app/model-explanation/components/price-comparison-chart.tsx b/frontend/app/model-explanation/components/price-comparison-chart.tsx new file mode 100644 index 0000000..f5b4bdd --- /dev/null +++ b/frontend/app/model-explanation/components/price-comparison-chart.tsx @@ -0,0 +1,75 @@ +"use client" + +import { useTheme } from "next-themes" +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, + Legend, + Cell, +} from "@/components/ui/chart" + +interface PropertyData { + name: string + price: number + size: number + age: number +} + +interface PriceComparisonChartProps { + property: PropertyData + comparisons: PropertyData[] +} + +export function PriceComparisonChart({ property, comparisons }: PriceComparisonChartProps) { + const { theme } = useTheme() + const isDark = theme === "dark" + + // Combine property and comparisons + const data = [property, ...comparisons] + + // Format the price for display + const formatPrice = (value: number) => { + return new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(value) + } + + return ( + + + + + `${(value / 1000000).toFixed(1)}M`} stroke={isDark ? "#9ca3af" : "#6b7280"} /> + [formatPrice(value), "Price"]} + contentStyle={{ + backgroundColor: isDark ? "#1f2937" : "white", + borderRadius: "0.375rem", + border: isDark ? "1px solid #374151" : "1px solid #e2e8f0", + fontSize: "0.75rem", + color: isDark ? "#e5e7eb" : "#1f2937", + }} + /> + + + {data.map((entry, index) => ( + + ))} + + + + ) +} + diff --git a/frontend/app/model-explanation/page.tsx b/frontend/app/model-explanation/page.tsx new file mode 100644 index 0000000..471b06b --- /dev/null +++ b/frontend/app/model-explanation/page.tsx @@ -0,0 +1,640 @@ +"use client" + +import { useState } from "react" +import { + ChevronRight, + Info, + ArrowRight, + Home, + Building, + Ruler, + Calendar, + Coins, + Droplets, + Wind, + Sun, + Car, + School, + ShoppingBag, +} from "lucide-react" +import Link from "next/link" +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" +import { Progress } from "@/components/ui/progress" +import { Slider } from "@/components/ui/slider" +import { FeatureImportanceChart } from "./components/feature-importance-chart" +import { PriceComparisonChart } from "./components/price-comparison-chart" +import { MapSidebar } from "../map/components/map-sidebar" +import { SidebarProvider } from "@/components/ui/sidebar" +import { ThemeProvider } from "@/components/theme-provider" + +export default function ModelExplanationPage() { + const [activeStep, setActiveStep] = useState(1) + const [propertySize, setPropertySize] = useState(150) + const [propertyAge, setPropertyAge] = useState(5) + + // Sample data for the model explanation + const propertyDetails = { + address: "123 Sukhumvit Road, Bangkok", + type: "Condominium", + size: 150, // sqm + bedrooms: 3, + bathrooms: 2, + age: 5, // years + floor: 15, + amenities: ["Swimming Pool", "Gym", "Security", "Parking"], + predictedPrice: 15000000, // THB + similarProperties: [ + { address: "125 Sukhumvit Road", price: 14500000, size: 145, age: 6 }, + { address: "130 Sukhumvit Road", price: 16200000, size: 160, age: 3 }, + { address: "118 Sukhumvit Road", price: 13800000, size: 140, age: 7 }, + ], + features: [ + { name: "Location", importance: 35, value: "Prime Area", impact: "positive" }, + { name: "Size", importance: 25, value: "150 sqm", impact: "positive" }, + { name: "Age", importance: 15, value: "5 years", impact: "neutral" }, + { name: "Amenities", importance: 10, value: "4 amenities", impact: "positive" }, + { name: "Floor", importance: 8, value: "15th floor", impact: "positive" }, + { name: "Environmental Factors", importance: 7, value: "Low flood risk", impact: "positive" }, + ], + } + + const steps = [ + { + id: 1, + title: "Property Details", + description: "Basic information about the property", + icon: Home, + }, + { + id: 2, + title: "Feature Analysis", + description: "How each feature affects the price", + icon: Ruler, + }, + { + id: 3, + title: "Market Comparison", + description: "Comparison with similar properties", + icon: Building, + }, + { + id: 4, + title: "Environmental Factors", + description: "Impact of environmental conditions", + icon: Droplets, + }, + { + id: 5, + title: "Final Prediction", + description: "The predicted price and confidence level", + icon: Coins, + }, + ] + + // Calculate a new price based on slider changes + const calculateAdjustedPrice = () => { + // Simple formula for demonstration + const sizeImpact = (propertySize - 150) * 50000 // 50,000 THB per sqm + const ageImpact = (5 - propertyAge) * 200000 // 200,000 THB per year newer + + return propertyDetails.predictedPrice + sizeImpact + ageImpact + } + + const adjustedPrice = calculateAdjustedPrice() + + return ( + + +
+ +
+ {/* Header */} +
+
+ + Map + + + Price Prediction Model +
+
+ + {/* Main content */} +
+
+
+

Explainable Price Prediction Model

+

+ Understand how our AI model predicts property prices and what factors influence the valuation. +

+
+ + {/* Steps navigation */} +
+
+ {steps.map((step) => ( + + ))} +
+
+ +
+
+ + {/* Step content */} +
+ {/* Left column - Property details */} +
+ + + Property Details + {propertyDetails.address} + + +
+ Type + {propertyDetails.type} +
+
+ Size + {propertySize} sqm +
+
+ Bedrooms + {propertyDetails.bedrooms} +
+
+ Bathrooms + {propertyDetails.bathrooms} +
+
+ Age + {propertyAge} years +
+
+ Floor + {propertyDetails.floor} +
+ + + + + + Adjust Parameters + See how changes affect the prediction + + +
+
+ + {propertySize} sqm +
+ setPropertySize(value[0])} + /> +
+ +
+
+ + {propertyAge} years +
+ setPropertyAge(value[0])} + /> +
+ + +
+
+ Adjusted Price + + {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(adjustedPrice)} + +
+
+ {adjustedPrice > propertyDetails.predictedPrice ? "↑" : "↓"} + {Math.abs(adjustedPrice - propertyDetails.predictedPrice).toLocaleString()} THB from + original prediction +
+
+ + +
+ + {/* Middle column - Step content */} +
+ {activeStep === 1 && ( + + + Property Overview + Basic information used in our prediction model + + +
+

+ Our AI model begins by analyzing the core attributes of your property. These fundamental + characteristics form the baseline for our prediction. +

+ +
+
+ +
+

Property Type

+

+ {propertyDetails.type} properties in this area have specific market dynamics +

+
+
+ +
+ +
+

Size & Layout

+

+ {propertyDetails.size} sqm with {propertyDetails.bedrooms} bedrooms and{" "} + {propertyDetails.bathrooms} bathrooms +

+
+
+ +
+ +
+

Property Age

+

+ Built {propertyDetails.age} years ago, affecting depreciation calculations +

+
+
+ +
+ +
+

Floor & View

+

+ Located on floor {propertyDetails.floor}, impacting value and desirability +

+
+
+
+
+ + + + + + )} + + {activeStep === 2 && ( + + + Feature Analysis + How different features impact the predicted price + + +
+

+ Our model analyzes various features of your property and determines how each one + contributes to the final price prediction. Below is a breakdown of the most important + factors. +

+ +
+ +
+ +
+ {propertyDetails.features.map((feature) => ( +
+
+ {feature.name} + + {feature.impact === "positive" + ? "↑ Positive" + : feature.impact === "negative" + ? "↓ Negative" + : "→ Neutral"}{" "} + Impact + +
+
+ + {feature.importance}% +
+

{feature.value}

+
+ ))} +
+
+ + + + + + + )} + + {activeStep === 3 && ( + + + Market Comparison + + How your property compares to similar properties in the area + + + +
+

+ Our model analyzes recent sales data from similar properties in your area to establish a + baseline for comparison. This helps ensure our prediction is aligned with current market + conditions. +

+ +
+ ({ + name: p.address.split(" ")[0], + price: p.price, + size: p.size, + age: p.age, + }))} + /> +
+ +
+

Similar Properties

+
+ {propertyDetails.similarProperties.map((property, index) => ( +
+
{property.address}
+
+ {property.size} sqm, {property.age} years old +
+
+ {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(property.price)} +
+
+ ))} +
+
+
+ + + + + + + )} + + {activeStep === 4 && ( + + + Environmental Factors + How environmental conditions affect the property value + + +
+

+ Environmental factors can significantly impact property values. Our model considers + various environmental conditions to provide a more accurate prediction. +

+ +
+
+ +

Flood Risk

+
+
+ Moderate +
+

+ Historical data shows moderate flood risk in this area +

+
+ +
+ +

Air Quality

+
+
+ Poor +
+

+ Air quality is below average, affecting property value +

+
+ +
+ +

Noise Level

+
+
+ Low +
+

+ The area has relatively low noise pollution +

+
+
+ +
+

Proximity to Amenities

+
+
+ +
Public Transport: 300m
+
+
+ +
Schools: 1.2km
+
+
+ +
Shopping: 500m
+
+
+ +
Hospitals: 2.5km
+
+
+
+
+ + + + + + + )} + + {activeStep === 5 && ( + + + Final Prediction + The predicted price and confidence level + + +
+
+

Predicted Price

+
+ {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(adjustedPrice)} +
+
Confidence Level: 92%
+
+ +
+

+ + Price Range +

+

+ Based on our model's confidence level, the price could range between: +

+
+
+
Lower Bound
+
+ {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(adjustedPrice * 0.95)} +
+
+
+
Prediction
+
+ {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(adjustedPrice)} +
+
+
+
Upper Bound
+
+ {new Intl.NumberFormat("th-TH", { + style: "currency", + currency: "THB", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(adjustedPrice * 1.05)} +
+
+
+
+ +
+

Summary of Factors

+

+ The final prediction is based on a combination of all factors analyzed in previous + steps: +

+
    +
  • +
    + Property characteristics (size, age, layout) +
    • +
  • +
    + Location and neighborhood analysis +
    • +
  • +
    + Market trends and comparable properties +
    • +
  • +
    + Environmental factors and amenities +
    • +
+
+
+ + + + + + + )} +
+
+
+
+
+
+ + + ) +} + diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx new file mode 100644 index 0000000..88f0cc9 --- /dev/null +++ b/frontend/app/page.tsx @@ -0,0 +1,103 @@ +import Image from "next/image"; + +export default function Home() { + return ( +
+
+ Next.js logo +
    +
  1. + Get started by editing{" "} + + app/page.tsx + + . +
    2. +
  2. + Save and see your changes instantly. +
    3. +
+ + +
+ +
+ ); +} diff --git a/frontend/components.json b/frontend/components.json new file mode 100644 index 0000000..335484f --- /dev/null +++ b/frontend/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/frontend/components/theme-controller.tsx b/frontend/components/theme-controller.tsx new file mode 100644 index 0000000..2ffe13d --- /dev/null +++ b/frontend/components/theme-controller.tsx @@ -0,0 +1,147 @@ +"use client" + +import { useState, useEffect, useRef, type ReactNode } from "react" +import { useTheme } from "next-themes" +import { Sun, Moon, Laptop, Palette, Check } from "lucide-react" +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + DropdownMenuSeparator, + DropdownMenuLabel, +} from "@/components/ui/dropdown-menu" +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" + +// Define available color schemes +const colorSchemes = [ + { name: "Blue", primary: "221.2 83.2% 53.3%" }, + { name: "Green", primary: "142.1 76.2% 36.3%" }, + { name: "Purple", primary: "262.1 83.3% 57.8%" }, + { name: "Orange", primary: "24.6 95% 53.1%" }, + { name: "Teal", primary: "173 80.4% 40%" }, +] + +interface ThemeControllerProps { + children: ReactNode + defaultColorScheme?: string +} + +export function ThemeController({ children, defaultColorScheme = "Blue" }: ThemeControllerProps) { + const { setTheme, theme } = useTheme() + const [colorScheme, setColorScheme] = useState(defaultColorScheme) + const [overlayBoundaries, setOverlayBoundaries] = useState({ width: 0, height: 0 }) + const containerRef = useRef(null) + + // Update overlay boundaries when window resizes + useEffect(() => { + const updateBoundaries = () => { + if (containerRef.current) { + setOverlayBoundaries({ + width: containerRef.current.clientWidth, + height: containerRef.current.clientHeight, + }) + } + } + + // Initial update + updateBoundaries() + + // Add resize listener + window.addEventListener("resize", updateBoundaries) + + // Cleanup + return () => window.removeEventListener("resize", updateBoundaries) + }, []) + + // Apply color scheme + useEffect(() => { + const scheme = colorSchemes.find((s) => s.name === colorScheme) + if (scheme) { + document.documentElement.style.setProperty("--primary", scheme.primary) + } + }, [colorScheme]) + + // Apply CSS variables for overlay constraints + useEffect(() => { + document.documentElement.style.setProperty("--max-overlay-width", `${overlayBoundaries.width - 32}px`) + document.documentElement.style.setProperty("--max-overlay-height", `${overlayBoundaries.height - 32}px`) + }, [overlayBoundaries]) + + return ( +
+ {children} + + {/* Theme Controller UI */} +
+ + + + + + + + + Theme Options + + + setTheme("light")} className="flex items-center justify-between"> +
+ + Light +
+ {theme === "light" && } + + + setTheme("dark")} className="flex items-center justify-between"> +
+ + Dark +
+ {theme === "dark" && } + + + setTheme("system")} className="flex items-center justify-between"> +
+ + System +
+ {theme === "system" && } + + + + Color Scheme + + {colorSchemes.map((scheme) => ( + setColorScheme(scheme.name)} + className="flex items-center justify-between" + > +
+
+ {scheme.name} +
+ {colorScheme === scheme.name && } + + ))} + + + + +

Theme Settings

+ + + +
+
+ ) +} + diff --git a/frontend/components/theme-provider.tsx b/frontend/components/theme-provider.tsx new file mode 100644 index 0000000..77cb61d --- /dev/null +++ b/frontend/components/theme-provider.tsx @@ -0,0 +1,12 @@ +"use client" +import { ThemeProvider as NextThemesProvider } from "next-themes" +import type { ThemeProviderProps } from "next-themes" + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return ( + + {children} + + ) +} + diff --git a/frontend/components/theme-toggle.tsx b/frontend/components/theme-toggle.tsx new file mode 100644 index 0000000..47408b2 --- /dev/null +++ b/frontend/components/theme-toggle.tsx @@ -0,0 +1,47 @@ +"use client" + +import { Moon, Sun, Laptop } from "lucide-react" +import { useTheme } from "next-themes" +import { Button } from "@/components/ui/button" +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" + +export function ThemeToggle() { + const { setTheme, theme } = useTheme() + + return ( + + + + + + + + + setTheme("light")}> + + Light + + setTheme("dark")}> + + Dark + + setTheme("system")}> + + System + + + + + +

Change theme

+ + + + ) +} + diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx new file mode 100644 index 0000000..24c788c --- /dev/null +++ b/frontend/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/frontend/components/ui/alert-dialog.tsx b/frontend/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..25e7b47 --- /dev/null +++ b/frontend/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/frontend/components/ui/alert.tsx b/frontend/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/frontend/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/frontend/components/ui/aspect-ratio.tsx b/frontend/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..d6a5226 --- /dev/null +++ b/frontend/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/frontend/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/frontend/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/frontend/components/ui/breadcrumb.tsx b/frontend/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/frontend/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>