From 987d4f4fccb1ff51042d91eb24d7b97fea427429 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 11 Apr 2025 11:55:19 +0700 Subject: [PATCH] feat: integrate AnalyticsPanel component into MapsPage and refactor state management with useModelState --- frontend/app/(sidebar)/maps/page.tsx | 185 +-------------- frontend/components/map/analytics-panel.tsx | 220 ++++++++++++++++++ .../components/navigation/top-navigation.tsx | 10 +- frontend/components/ui/collapsible.tsx | 28 ++- ...op-navgation-store.tsx => model-store.tsx} | 4 +- 5 files changed, 256 insertions(+), 191 deletions(-) create mode 100644 frontend/components/map/analytics-panel.tsx rename frontend/store/{top-navgation-store.tsx => model-store.tsx} (82%) diff --git a/frontend/app/(sidebar)/maps/page.tsx b/frontend/app/(sidebar)/maps/page.tsx index 197a70b..bb676f5 100644 --- a/frontend/app/(sidebar)/maps/page.tsx +++ b/frontend/app/(sidebar)/maps/page.tsx @@ -32,6 +32,7 @@ import { import Link from "next/link"; import { TopNavigation } from "@/components/navigation/top-navigation"; import MapWithSearch from "@/components/map/map-with-search"; +import { AnalyticsPanel } from "@/components/map/analytics-panel"; export default function MapsPage() { const [showFilters, setShowFilters] = useState(false); @@ -45,9 +46,6 @@ export default function MapsPage() { const [messages, setMessages] = useState([ { role: "assistant", content: "Hi! How can I help you today?" }, ]); - const [mapZoom, setMapZoom] = useState(14); - const [selectedModel, setSelectedModel] = useState("Standard ML Model v2.4"); - const mapRef = useRef(null); const handleSendMessage = () => { if (message.trim()) { @@ -67,14 +65,6 @@ export default function MapsPage() { } }; - const handleZoomIn = () => { - setMapZoom((prev) => Math.min(prev + 1, 20)); - }; - - const handleZoomOut = () => { - setMapZoom((prev) => Math.max(prev - 1, 10)); - }; - const handlePropertyClick = () => { setShowPropertyInfo(true); setShowFilters(false); @@ -85,10 +75,7 @@ export default function MapsPage() {
- -
- Map View -
+ {/* */}
{/* Sample Property Markers */} @@ -136,7 +123,6 @@ export default function MapsPage() { {/* Top Navigation Bar */} - {/* Map Overlay Controls */}
- -
-
-
-
-

- Information in radius will be analyzed -

- - Using: {selectedModel} - -
- - - -
- - Area Price History -
-

10,000,000 Baht

-

- Overall Price History of this area -

- -
- {/* Simple line chart simulation */} -
-
-
-
-
-
-
-
-
-
- - - - - -
- - Price Prediction -
-

15,000,000 Baht

-

- The estimated price based on various factors. -

- -
- {/* Simple line chart simulation */} -
-
-
-
-
-
-
-
-
-
- - - -
- - -
- - Flood Factor - Moderate -
- - - - - -
- - Air Factor - Bad -
- - -
- - {/* Local News Section */} -
-

- - Local News -

-
- - -
- New BTS Extension Planned -
-

- The BTS Skytrain will be extended to cover more areas in - Sukhumvit by 2025. -

-
- - 2 days ago -
- - - - -
- Property Tax Changes -
-

- New property tax regulations will take effect next month - affecting luxury condominiums. -

-
- - 1 week ago -
- - -
-
- -
- - - - -
-
-
- )} + {showAnalytics && } {/* Filters Panel */} {showFilters && ( @@ -697,7 +522,7 @@ export default function MapsPage() { )} {/* Map Legend */} - {/*
+
Property Status
@@ -713,7 +538,7 @@ export default function MapsPage() { Sold
-
*/} +
); } diff --git a/frontend/components/map/analytics-panel.tsx b/frontend/components/map/analytics-panel.tsx new file mode 100644 index 0000000..1153886 --- /dev/null +++ b/frontend/components/map/analytics-panel.tsx @@ -0,0 +1,220 @@ +import { + BarChart2, + RefreshCw, + X, + LineChart, + Droplets, + Wind, + Newspaper, + Clock, + MessageCircle, + Link, + ChevronsUpDown, +} from "lucide-react"; +import { Badge } from "../ui/badge"; +import { Button } from "../ui/button"; +import { Card, CardContent } from "../ui/card"; +import { useModelState } from "@/store/model-store"; +import { useShallow } from "zustand/react/shallow"; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/components/ui/collapsible"; +import { useState } from "react"; + +export function AnalyticsPanel({ + setShowAnalytics, +}: { + setShowAnalytics: (show: boolean) => void; +}) { + const [isOpen, setIsOpen] = useState(true); + const { selectedModel, setSelectedModel } = useModelState( + useShallow((state) => ({ + selectedModel: state.selectedModel, + setSelectedModel: state.setSelectedModel, + models: state.models, + })) + ); + return ( + +
+

+ @peduarte starred 3 repositories +

+ + + +
+ +
+
+
+ + Analytics +
+
+ + +
+
+
+
+

+ Information in radius will be analyzed +

+ + Using: {selectedModel} + +
+ + + +
+ + Area Price History +
+

10,000,000 Baht

+

+ Overall Price History of this area +

+ +
+ {/* Simple line chart simulation */} +
+
+
+
+
+
+
+
+
+
+ + + + + +
+ + Price Prediction +
+

15,000,000 Baht

+

+ The estimated price based on various factors. +

+ +
+ {/* Simple line chart simulation */} +
+
+
+
+
+
+
+
+
+
+ + + +
+ + +
+ + Flood Factor + Moderate +
+ + + + + +
+ + Air Factor + Bad +
+ + +
+ + {/* Local News Section */} +
+

+ + Local News +

+
+ + +
+ New BTS Extension Planned +
+

+ The BTS Skytrain will be extended to cover more areas in + Sukhumvit by 2025. +

+
+ + 2 days ago +
+ + + + +
+ Property Tax Changes +
+

+ New property tax regulations will take effect next month + affecting luxury condominiums. +

+
+ + 1 week ago +
+ + +
+
+ +
+ + + + +
+
+
+ + + ); +} diff --git a/frontend/components/navigation/top-navigation.tsx b/frontend/components/navigation/top-navigation.tsx index 40a5847..f0fcada 100644 --- a/frontend/components/navigation/top-navigation.tsx +++ b/frontend/components/navigation/top-navigation.tsx @@ -14,18 +14,16 @@ import { } from "lucide-react"; import Link from "next/link"; import { Button } from "@/components/ui/button"; -import { useTopNavigationStore } from "@/store/top-navgation-store"; +import { useModelState } from "@/store/model-store"; import { useShallow } from "zustand/react/shallow"; -import { Input } from "../ui/input"; export function TopNavigation() { - const { selectedModel, setSelectedModel, models } = useTopNavigationStore( - useShallow( - (state) => ({ + const { selectedModel, setSelectedModel, models } = useModelState( + useShallow((state) => ({ selectedModel: state.selectedModel, setSelectedModel: state.setSelectedModel, models: state.models, - })), + })) ); return ( diff --git a/frontend/components/ui/collapsible.tsx b/frontend/components/ui/collapsible.tsx index 9fa4894..ae9fad0 100644 --- a/frontend/components/ui/collapsible.tsx +++ b/frontend/components/ui/collapsible.tsx @@ -2,10 +2,32 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" -const Collapsible = CollapsiblePrimitive.Root +function Collapsible({ + ...props +}: React.ComponentProps) { + return +} -const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger +function CollapsibleTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ) +} -const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent +function CollapsibleContent({ + ...props +}: React.ComponentProps) { + return ( + + ) +} export { Collapsible, CollapsibleTrigger, CollapsibleContent } diff --git a/frontend/store/top-navgation-store.tsx b/frontend/store/model-store.tsx similarity index 82% rename from frontend/store/top-navgation-store.tsx rename to frontend/store/model-store.tsx index 0820157..2fc5219 100644 --- a/frontend/store/top-navgation-store.tsx +++ b/frontend/store/model-store.tsx @@ -1,13 +1,13 @@ import { create } from "zustand"; -type TopNavigationState = { +type ModelState = { selectedModel: string; setSelectedModel: (model: string) => void; models: string[]; setModels: (models: string[]) => void; }; -export const useTopNavigationStore = create((set) => ({ +export const useModelState = create((set) => ({ selectedModel: "Standard ML Model v2.4", setSelectedModel: (model) => set({ selectedModel: model }), models: [