kj4c · cheriseeee · May 19, 2025 · May 19, 2025
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -2,6 +2,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import './Navbar.css'
 import { GiFamilyHouse } from 'react-icons/gi';
+import Profile from './Profile';
 const Navbar = () => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -55,6 +56,7 @@ const Navbar = () => {
                     Compare Suburbs
                 </motion.button>
             </div>
+            <Profile/>
         </div>
     )
 }

diff --git a/frontend/src/components/Profile.jsx b/frontend/src/components/Profile.jsx
@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+import { FiDatabase } from "react-icons/fi";
+import BasicInput from "./Inputs";
+
+const Profile = () => {
+    const [modal, setModal] = useState(false);
+    const [cusId, setCusId] = useState('');
+    const [index, setIndex] = useState(0);
+
+    const baseSelections = ['Default', 'Default (small)'];
+    const [selections, setSelections] = useState(baseSelections);
+
+    const defaultIds = [
+        "76d3b838-5880-4320-b42f-8bd8273ab6a0",
+        "34c762a2-e1cd-44a7-a9ea-56f22d64989e"
+    ];
+
+    useEffect(() => {
+        const savedId = localStorage.getItem('id');
+        if (savedId && !defaultIds.includes(savedId)) {
+            setCusId(savedId);
+            setSelections([...baseSelections, 'Custom']);
+            setIndex(2);
+        } else if (savedId) {
+            const foundIndex = defaultIds.indexOf(savedId);
+            setIndex(foundIndex !== -1 ? foundIndex : 0);
+        }
+    }, []);
+
+    const handleSelectChange = (e) => {
+        const newIndex = parseInt(e.target.value);
+        setIndex(newIndex);
+
+        if (newIndex < 2) {
+            localStorage.setItem('id', defaultIds[newIndex]);
+        } else if (cusId) {
+            localStorage.setItem('id', cusId);
+        }
+    };
+
+    const handleCusIdChange = (e) => {
+        const value = e.target.value.trim();
+        setCusId(value);
+
+        if (value) {
+            localStorage.setItem('id', value);
+            if (!selections.includes('Custom')) {
+                setSelections([...baseSelections, 'Custom']);
+                setIndex(2); // auto-select custom
+            }
+        } else {
+            localStorage.removeItem('id');
+            setSelections(baseSelections);
+            if (index === 2) setIndex(0); // Reset to Default
+        }
+    };
+
+    return (
+        <div className="h-full relative">
+            <FiDatabase className="text-4xl" onClick={() => setModal(!modal)} />
+            {modal && (
+                <div className="absolute right-0 top-13 z-100 border border-white/30 bg-[#080929] rounded-sm p-4">
+                    <p className="text-xl pb-2 text-gray-300">Dataset</p>
+                    <select
+                        value={index}
+                        onChange={handleSelectChange}
+                        className="pr-10 bg-[linear-gradient(to_top_right,rgba(24,44,88,0.4)_13.2%,rgba(227,228,252,0.02)_88.27%)] text-[#CF9FFF] border border-[#c8c8c8] rounded-md px-6 py-4 cursor-pointer transition duration-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-[#466fba]"
+                    >
+                        {selections.map((opt, i) => (
+                            <option key={i} value={i} className="text-black">
+                                {opt}
+                            </option>
+                        ))}
+                    </select>
+
+                    <input
+                            type="text"
+                            placeholder="Custom dataset ID"
+                            value={cusId}
+                            onChange={handleCusIdChange}
+                            className="w-full bg-[#1e1a36] text-white mt-2
+                                placeholder:text-gray-400 border border-[#2a263d] 
+                                rounded-xl px-5 py-3 focus:outline-none
+                                focus:border-[#ffffffe0] focus:border-1 focus:bg-none focus:bg-[#0b0a27] shadow-inner"
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Profile;
diff --git a/frontend/src/pages/CommercialRecs.jsx b/frontend/src/pages/CommercialRecs.jsx
@@ -17,13 +17,19 @@ import {
 } from "recharts";
 
 const CommercialRecs = () => {
-  const [id, setId] = useState(null);
   const [topN, setTopN] = useState(10);
   const [loading, setLoading] = useState(false);
   const [recs, setRecs] = useState(null);
   const [isOpen, setIsOpen] = useState(false);
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchPrice = async () => {
+    const id = getId();
     if (id == null) {
       alert("no id given");
       return;
@@ -66,13 +72,6 @@ const CommercialRecs = () => {
         ]}
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Dataset ID"
-          onChange={(e) => setId(e.target.value || null)}
-        />
-
         <BasicInput
           type="number"
           name="top_n"

diff --git a/frontend/src/pages/CommercialRecsTargeted.jsx b/frontend/src/pages/CommercialRecsTargeted.jsx
@@ -9,13 +9,20 @@ import Panel from "@/components/Blocks";
 import Loading from "@/components/Loading";
 
 const CommercialRecommendationsTargeted = () => {
-  const [id, setId] = useState(null);
   const [topN, setTopN] = useState(10);
   const [loading, setLoading] = useState(false);
   const [recs, setRecs] = useState(null);
   const [isOpen, setIsOpen] = useState(false);
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
+
   const fetchPrice = async () => {
+    const id = getId();
     if (id == null) {
       alert("no id given");
       return;
@@ -69,12 +76,6 @@ const CommercialRecommendationsTargeted = () => {
         ]}
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Dataset ID"
-          onChange={(e) => setId(e.target.value || null)}
-        />
 
         <BasicInput
           type="number"

diff --git a/frontend/src/pages/CrimeWeight.jsx b/frontend/src/pages/CrimeWeight.jsx
@@ -7,7 +7,6 @@ import Loading from "@/components/Loading";
 import { Button } from "@/components/ui/button";
 
 const CrimeWeight = () => {
-  const [id, setId] = useState(null);
   const [suburbInput, setSuburbInput] = useState("");
   const [suburbs, setSuburbs] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -24,7 +23,15 @@ const CrimeWeight = () => {
     setSuburbs(suburbs.filter((s) => s !== sub));
   };
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
+
   const fetchData = async () => {
+    const id = getId();
     if (!id) {
       alert("Please enter an ID");
       return;
@@ -77,14 +84,6 @@ const CrimeWeight = () => {
         description="Check the weighted crime rate per 10,000 population by suburbs. Crimes are weighted by their severity."
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Enter ID"
-          value={id || ""}
-          onChange={(e) => setId(e.target.value)}
-        />
-
         <div className="flex gap-2 mb-4 justify-center items-center">
           <BasicInput
             type="text"

diff --git a/frontend/src/pages/InfluenceFactor.jsx b/frontend/src/pages/InfluenceFactor.jsx
@@ -7,12 +7,19 @@ import Panel from "@/components/Blocks";
 const InfluenceFactor = () => {
   const [loading, setLoading] = useState(false);
   const [factor, setFactor] = useState(null);
-  const [id, setId] = useState(null);
   const [targetCol, setTargetCol] = useState(null);
   const [filterCol, setFilterCol] = useState(null);
   const [filterVal, setFilterVal] = useState(null);
   const [dropCol, setDropCol] = useState(null);
+
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId()
     if (id === null) {
       alert("missing id");
       return;
@@ -51,18 +58,6 @@ const InfluenceFactor = () => {
         description="Provides a ranked list of real estate features effecting the target variable (from most impactful to least impactful)"
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="text"
           name="id"

diff --git a/frontend/src/pages/InvestmentPotential.jsx b/frontend/src/pages/InvestmentPotential.jsx
@@ -16,10 +16,16 @@ import {
 const InvestmentPotential = () => {
   const [loading, setLoading] = useState(false);
   const [investPotential, setInvestPotential] = useState(null);
-  const [id, setId] = useState(null);
   const [topN, setTopN] = useState(null);
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; 
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId();
     if (id == null) {
       alert("missing id");
       return;
@@ -63,18 +69,6 @@ const InvestmentPotential = () => {
         ]}
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Dataset ID"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="number"
           name="top_n"

diff --git a/frontend/src/pages/PropertyAffordabilityIndex.jsx b/frontend/src/pages/PropertyAffordabilityIndex.jsx
@@ -20,7 +20,6 @@ const PropertyAffordabilityIndex = () => {
   const [income, setIncome] = useState("32292");
   const [affordabilityData, setAffordabilityData] = useState(null);
   const [mapHtml, setMapHtml] = useState(null);
-  const [id, setId] = useState(null);
   const [minIndex, setMinIndex] = useState(0);
   const [sortConfig, setSortConfig] = useState({
     key: "norm_affordability_index",
@@ -46,7 +45,14 @@ const PropertyAffordabilityIndex = () => {
     }, 10000);
   };
 
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchData = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -110,18 +116,6 @@ const PropertyAffordabilityIndex = () => {
         }
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <BasicInput
           type="text"
           name="income"

diff --git a/frontend/src/pages/PropertyPrices.jsx b/frontend/src/pages/PropertyPrices.jsx
@@ -8,7 +8,6 @@ const PropertyPrices = () => {
   const [loading, setLoading] = useState(false);
   const [loaded, setLoaded] = useState(false);
   const [price, setPrice] = useState("");
-  const [id, setId] = useState(null);
 
   const [minPrice, setMinPrice] = useState(null);
   const [maxPrice, setMaxPrice] = useState(null);
@@ -22,7 +21,15 @@ const PropertyPrices = () => {
   const [maxSize, setMaxSize] = useState(null);
   const [type, setType] = useState(null);
 
+
+  const getId = () => {
+    const storedId = localStorage.getItem('id');
+    if (!storedId) return "76d3b838-5880-4320-b42f-8bd8273ab6a0"; // fallback to 'Default'
+
+    return storedId;
+  };
   const fetchPrice = async () => {
+    const id = getId()
     if (id == null) {
       alert("missing id");
       return;
@@ -85,18 +92,6 @@ const PropertyPrices = () => {
         description="Explore average property prices with optional filters like suburb, size and features. "
         loading={loading}
       >
-        <BasicInput
-          type="text"
-          name="id"
-          placeholder="Id"
-          onChange={(e) => {
-            if (e.target.value !== "") {
-              setId(e.target.value);
-            } else {
-              setId(null);
-            }
-          }}
-        />
         <p>Price range:</p>
         <BasicInput
           type="text"