From 12cbec1336ee430da2a12dcede64fae00aaff124 Mon Sep 17 00:00:00 2001 From: Winnie Date: Sun, 18 May 2025 18:26:29 +1000 Subject: [PATCH 1/2] adding comparisons frontend --- frontend/src/App.jsx | 4 +- frontend/src/components/Navbar.jsx | 9 +- frontend/src/components/Panel3.jsx | 84 +++++++++++++++ frontend/src/pages/Compare.jsx | 148 ++++++++++++++++++++++++++ frontend/src/pages/CompareSuburbs.jsx | 44 ++++++++ frontend/src/pages/ForBusinesses.jsx | 1 - 6 files changed, 287 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/Panel3.jsx create mode 100644 frontend/src/pages/Compare.jsx create mode 100644 frontend/src/pages/CompareSuburbs.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 2626fa2..9fd8ba1 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -12,11 +12,12 @@ import UploadJson from "./pages/UploadJson"; import SuburbLivability from "./pages/SuburbLivability"; import ForBusinesses from "./pages/ForBusinesses"; import ForIndividuals from "./pages/ForIndividuals"; +import CompareSuburbs from "./pages/CompareSuburbs"; import "./App.css"; const AppContent = () => { const location = useLocation(); - const knownPaths = ["/uploadjson", "/businesses", "/individuals"]; + const knownPaths = ["/uploadjson", "/businesses", "/individuals", "/compare"]; const hideNavBarPaths = ["/"]; @@ -33,6 +34,7 @@ const AppContent = () => { } /> } /> } /> + } /> ); diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index ac5d9ac..e67d9ee 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -46,7 +46,14 @@ const Navbar = () => { > For Individuals - + navigate('/compare')} + > + Compare Suburbs + ) diff --git a/frontend/src/components/Panel3.jsx b/frontend/src/components/Panel3.jsx new file mode 100644 index 0000000..292a028 --- /dev/null +++ b/frontend/src/components/Panel3.jsx @@ -0,0 +1,84 @@ + + +const mockData = [ + { + name: 'Hornsby', + investmentScore: 82, + commercialScore: 74, + medianPrice: '$780,000', + crimeRate: 'Low (3.2/10)', + affordabilityIndex: '6.5', + livabilityScore: 88, + }, + { + name: 'Bondi', + investmentScore: 76, + commercialScore: 81, + medianPrice: '$720,000', + crimeRate: 'Moderate (5.1/10)', + affordabilityIndex: '7.2', + livabilityScore: 80, + }, + { + name: 'Artarmon', + investmentScore: 89, + commercialScore: 68, + medianPrice: '$850,000', + crimeRate: 'Low (2.7/10)', + affordabilityIndex: '5.8', + livabilityScore: 91, + }, + ]; + + const metrics = [ + { key: 'investmentScore', label: 'Investment Score' }, + { key: 'commercialScore', label: 'Commercial Score' }, + { key: 'medianPrice', label: 'Suburb Median Prices' }, + { key: 'crimeRate', label: 'Weighted Crime Rate' }, + { key: 'affordabilityIndex', label: 'Property Affordability Index' }, + { key: 'livabilityScore', label: 'Suburb Livability Score' }, + ]; + +import { ChevronDown } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { ReactNode, useState } from "react"; +import RunButton from "./Buttons" +import { motion } from "framer-motion"; + +export default function SuburbPanel({ title, description, subDescriptionLabel, subDescriptionItems = [], children, runbutton, loading}) { + const [isOpen, setIsOpen] = useState(false); + + const myAnimation = { + initial: { opacity: 0, x: -50 }, + inView: { opacity: 1, x: 0 }, + hover: { borderColor: "rgba(255,255,255,1)", scale: 1.02 , y: -6} + }; + return ( + + +
+

{title}

+
+ +
+
+ {children} +
+
{runbutton}
+
+ + ); +} \ No newline at end of file diff --git a/frontend/src/pages/Compare.jsx b/frontend/src/pages/Compare.jsx new file mode 100644 index 0000000..db88f0b --- /dev/null +++ b/frontend/src/pages/Compare.jsx @@ -0,0 +1,148 @@ +import { useState } from "react"; +import axios from "axios"; +import RunButton from "../components/Buttons"; +import BasicInput from "../components/Inputs"; +import Panel from "@/components/Blocks"; +import Loading from "@/components/Loading"; +import { Button } from "@/components/ui/button"; +import SuburbPanel from "@/components/Panel3"; +import { ArrowUpRight, Shield, Home, DollarSign, BarChart2, Smile } from "lucide-react"; + + +// Compare Suburbs Panels +const metrics = [ + { key: 'medianPrice', label: 'Average Property Price' }, + { key: 'crimeRate', label: 'Weighted Crime Rate' }, + { key: 'investmentScore', label: 'Investment Potential Score' }, + { key: 'commercialScore', label: 'Commercial Score' }, + { key: 'affordabilityIndex', label: 'Property Affordability Index' }, + { key: 'livabilityScore', label: 'Suburb Livability Score' } +]; + +const metricIcons = { + investmentScore: , + commercialScore: , + crimeRate: , + affordabilityIndex: , + livabilityScore: +}; + +const results = [ + { + name: 'Hornsby', + investmentScore: 73.94, + commercialScore: 74.23, + medianPrice: '$780,000', + crimeRate: 'Low (3.2/10)', + affordabilityIndex: '6.14', + livabilityScore: 68.32, + }, + { + name: 'Bondi', + investmentScore: 76, + commercialScore: 81, + medianPrice: '$720,000', + crimeRate: 'Moderate (5.1/10)', + affordabilityIndex: '4.21', + livabilityScore: 53.18, + }, + { + name: 'Artarmon', + investmentScore: 89, + commercialScore: 68, + medianPrice: '$850,000', + crimeRate: 'Low (2.7/10)', + affordabilityIndex: '9.52', + livabilityScore: 66.85, + } +]; + +const Compare = () => { + const [id, setId] = useState(null); + const [compare, setCompare] = useState(null) + const [suburb1, setSuburb1] = useState(""); + const [suburb2, setSuburb2] = useState(""); + const [suburb3, setSuburb3] = useState(""); + const [loading, setLoading] = useState(false); + + const fetchData = async () => { + if (!suburb1 || !suburb2 || !suburb3) { + alert("missing suburb"); + return; + } + // const requestBody = { + // id: id, + // function_name: "investment_potential", + // top_n: topN + // }; + setLoading(true); + // const response = await axios.post( + // "https://7c4yt1yrr2.execute-api.us-east-1.amazonaws.com/investment_potential", + // requestBody, + // { + // headers: { + // "Content-Type": "application/json", + // }, + // } + // ); + // console.log("response = ", response.data.investment_potentials); + //setCompare(response.data.investment_potentials); + setCompare(results) + setLoading(false) + } + + return ( +
+ +
+ setSuburb1(e.target.value)} + /> + setSuburb2(e.target.value)} + /> + setSuburb3(e.target.value)} + /> +
+ + {loading ? ( + + ) : ( + + )} + {compare && !loading && ( +
+
+ {results.map((suburb, i) => ( +
+

+ {suburb.name} +

+ {metrics.map((metric) => ( +
+
{metricIcons[metric.key]}
+

{suburb[metric.key]}

+

{metric.label}

+
+ ))} +
+ ))} +
+
+ )} + +
+ ); +}; + +export default Compare; diff --git a/frontend/src/pages/CompareSuburbs.jsx b/frontend/src/pages/CompareSuburbs.jsx new file mode 100644 index 0000000..8287801 --- /dev/null +++ b/frontend/src/pages/CompareSuburbs.jsx @@ -0,0 +1,44 @@ +import {motion} from "framer-motion"; +import { useEffect, useState } from "react"; +import axios from "axios"; +import RunButton from "../components/Buttons"; +import BasicInput from "../components/Inputs"; +import Panel from "@/components/Blocks"; +import Loading from "@/components/Loading"; +import SimplePanel from "@/components/Panel3"; +import SuburbPanel from "@/components/Panel3"; +import Compare from "./Compare" + +// Compare Suburbs Page + +const CompareSuburbs = () => { + const maskVariants = { + hidden: { clipPath: "inset(0 0 100% 0)" }, + show: { + clipPath: "inset(0 0 0% 0)", + transition: { + duration: 1.2, + ease: [0.25, 0.1, 0.25, 1], + }, + }, + }; + return ( + <> + +
+

Compare Suburbs

+
+
+ +
+ +
+ + ) +} + +export default CompareSuburbs; \ No newline at end of file diff --git a/frontend/src/pages/ForBusinesses.jsx b/frontend/src/pages/ForBusinesses.jsx index e8aee96..1dc7233 100644 --- a/frontend/src/pages/ForBusinesses.jsx +++ b/frontend/src/pages/ForBusinesses.jsx @@ -33,7 +33,6 @@ const ForBusinesses = () => { - ); From 6817dd6be0a3cbd29f0add44f4239bb77076f0f4 Mon Sep 17 00:00:00 2001 From: Winnie Date: Sun, 18 May 2025 23:12:50 +1000 Subject: [PATCH 2/2] fixes --- frontend/src/pages/Compare.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Compare.jsx b/frontend/src/pages/Compare.jsx index db88f0b..a78739e 100644 --- a/frontend/src/pages/Compare.jsx +++ b/frontend/src/pages/Compare.jsx @@ -33,7 +33,7 @@ const results = [ investmentScore: 73.94, commercialScore: 74.23, medianPrice: '$780,000', - crimeRate: 'Low (3.2/10)', + crimeRate: '4.29', affordabilityIndex: '6.14', livabilityScore: 68.32, }, @@ -42,7 +42,7 @@ const results = [ investmentScore: 76, commercialScore: 81, medianPrice: '$720,000', - crimeRate: 'Moderate (5.1/10)', + crimeRate: '23.72', affordabilityIndex: '4.21', livabilityScore: 53.18, }, @@ -51,7 +51,7 @@ const results = [ investmentScore: 89, commercialScore: 68, medianPrice: '$850,000', - crimeRate: 'Low (2.7/10)', + crimeRate: '6.66', affordabilityIndex: '9.52', livabilityScore: 66.85, }