Light1121 · Light1121 · Oct 11, 2025 · Oct 11, 2025 · Oct 11, 2025 · Oct 11, 2025
diff --git a/Frontend/src/_components/Form/FormField.tsx b/Frontend/src/_components/Form/FormField.tsx
@@ -15,7 +15,7 @@ const Label = styled.label`
   color: #3c3939;
   font-weight: 400;
   text-align: left;
-  margin-left: 1px;
+  margin-left: 15px;
 `
 
 interface FormFieldProps {

diff --git a/Frontend/src/_components/Header/Menu/LocSearchBar/LocSearchBar.tsx b/Frontend/src/_components/Header/Menu/LocSearchBar/LocSearchBar.tsx
@@ -1,6 +1,13 @@
-import type { FC } from 'react'
+import type { FC, ChangeEvent } from 'react'
 import styled from 'styled-components'
 
+interface LocSearchBarProps {
+  placeholder?: string
+  value: string
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onClick?: () => void
+}
+
 const LocSearchInput = styled.input`
   width: 100%;
   padding: 8px;
@@ -14,7 +21,22 @@ const LocSearchInput = styled.input`
     color: #333;
   }
 `
-const LocSearchBar: FC = () => {
-  return <LocSearchInput type="text" placeholder="Search..." />
+
+const LocSearchBar: FC<LocSearchBarProps> = ({
+  placeholder,
+  value,
+  onChange,
+  onClick,
+}) => {
+  return (
+    <LocSearchInput
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      onClick={onClick}
+    />
+  )
 }
+
 export default LocSearchBar
diff --git a/Frontend/src/_components/Header/Menu/compare/CompareMenu.tsx b/Frontend/src/_components/Header/Menu/compare/CompareMenu.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
-//import { Link } from 'react-router-dom'
+import { useState } from 'react'
 import styled from 'styled-components'
-import LocSearchBar from '../LocSearchBar'
 
 const AccordionItem = styled.div<{ isExpanded?: boolean }>`
   background-color: white;
@@ -43,20 +42,73 @@ const AccordionIcon = styled.span<{ isOpen?: boolean }>`
 
 const AccordionContent = styled.div<{ isOpen?: boolean }>`
   max-height: ${({ isOpen }) => (isOpen ? '500px' : '0')};
-  overflow: hidden;
+  overflow-y: auto;
   transition: max-height 0.3s ease;
   padding: ${({ isOpen }) => (isOpen ? '16px' : '0 16px')};
   background: rgba(255, 255, 255, 0.8);
 `
 
 const LocTitle = styled.h4`
-  border: none;
-  text-align: middle;
   margin: 4px 0;
   font-size: 14px;
   font-family: 'Instrument Sans', sans-serif;
 `
 
+const LocSearchInput = styled.input`
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 8px;
+  border: 1px solid #c2e9ff;
+  background: #c2e9ff;
+  color: #333;
+  border-radius: 4px;
+  font-size: 14px;
+  &::placeholder {
+    color: #333;
+  }
+`
+
+const ToggleButton = styled.button<{ disabled?: boolean }>`
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: #007acc;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-family: 'Instrument Sans', sans-serif;
+  cursor: pointer;
+  font-size: 0.85rem;
+  margin-top: 8px;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  &:hover {
+    background-color: #005f99;
+  }
+`
+
+const SearchResultsColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: #e5f3ff;
+  border-radius: 6px;
+  max-height: 150px;
+  overflow-y: auto;
+  padding: 8px;
+  font-size: 0.85rem;
+`
+
+const ResultItem = styled.div<{ selected?: boolean }>`
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: ${({ selected }) => (selected ? '#c2e9ff' : 'transparent')};
+
+  &:hover {
+    background-color: #d0eaff;
+  }
+`
+
 interface CompareMenuProps {
   isLoc1Open: boolean
   isLoc2Open: boolean
@@ -66,6 +118,17 @@ interface CompareMenuProps {
   closeLoc2: () => void
 }
 
+const australianStates = [
+  'New South Wales',
+  'Victoria',
+  'Queensland',
+  'South Australia',
+  'Western Australia',
+  'Tasmania',
+  'Northern Territory',
+  'Australian Capital Territory',
+]
+
 const CompareMenu: FC<CompareMenuProps> = ({
   isLoc1Open,
   isLoc2Open,
@@ -74,8 +137,69 @@ const CompareMenu: FC<CompareMenuProps> = ({
   closeLoc1,
   closeLoc2,
 }) => {
+  const [searchInput1, setSearchInput1] = useState('')
+  const [searchInput2, setSearchInput2] = useState('')
+  const [results1, setResults1] = useState<string[]>([])
+  const [results2, setResults2] = useState<string[]>([])
+  const [pendingSelection1, setPendingSelection1] = useState<string | null>(
+    null,
+  )
+  const [pendingSelection2, setPendingSelection2] = useState<string | null>(
+    null,
+  )
+  const [selected1, setSelected1] = useState<string | null>(null)
+  const [selected2, setSelected2] = useState<string | null>(null)
+
+  const handleSearch1 = (value: string) => {
+    setSearchInput1(value)
+    setResults1(
+      australianStates.filter((state) =>
+        state.toLowerCase().includes(value.toLowerCase()),
+      ),
+    )
+    setPendingSelection1(null)
+  }
+
+  const handleSearch2 = (value: string) => {
+    setSearchInput2(value)
+    setResults2(
+      australianStates.filter((state) =>
+        state.toLowerCase().includes(value.toLowerCase()),
+      ),
+    )
+    setPendingSelection2(null)
+  }
+
+  const handleClickResult1 = (loc: string) => setPendingSelection1(loc)
+  const handleClickResult2 = (loc: string) => setPendingSelection2(loc)
+
+  const toggleSelection1 = () => {
+    if (pendingSelection1) {
+      setSelected1(pendingSelection1)
+      setSearchInput1(pendingSelection1)
+      setResults1([])
+      setPendingSelection1(null)
+    } else {
+      setSelected1(null)
+      setSearchInput1('')
+    }
+  }
+
+  const toggleSelection2 = () => {
+    if (pendingSelection2) {
+      setSelected2(pendingSelection2)
+      setSearchInput2(pendingSelection2)
+      setResults2([])
+      setPendingSelection2(null)
+    } else {
+      setSelected2(null)
+      setSearchInput2('')
+    }
+  }
+
   return (
     <>
+      {/* Location 1 */}
       <AccordionItem isExpanded={isLoc1Open}>
         <AccordionButton
           onClick={() => {
@@ -87,11 +211,34 @@ const CompareMenu: FC<CompareMenuProps> = ({
         </AccordionButton>
         <AccordionContent isOpen={isLoc1Open}>
           <LocTitle>Set Location 1</LocTitle>
-
-          <LocSearchBar />
+          <LocSearchInput
+            placeholder="Search Location 1"
+            value={searchInput1}
+            onChange={(e) => handleSearch1(e.target.value)}
+          />
+          {results1.length > 0 && (
+            <SearchResultsColumn>
+              {results1.map((item, idx) => (
+                <ResultItem
+                  key={idx}
+                  onClick={() => handleClickResult1(item)}
+                  selected={pendingSelection1 === item}
+                >
+                  {item}
+                </ResultItem>
+              ))}
+            </SearchResultsColumn>
+          )}
+          <ToggleButton
+            disabled={!pendingSelection1 && !selected1}
+            onClick={toggleSelection1}
+          >
+            {selected1 ? 'Deselect' : 'Select'}
+          </ToggleButton>
         </AccordionContent>
       </AccordionItem>
 
+      {/* Location 2 */}
       <AccordionItem isExpanded={isLoc2Open}>
         <AccordionButton
           onClick={() => {
@@ -103,8 +250,30 @@ const CompareMenu: FC<CompareMenuProps> = ({
         </AccordionButton>
         <AccordionContent isOpen={isLoc2Open}>
           <LocTitle>Set Location 2</LocTitle>
-
-          <LocSearchBar />
+          <LocSearchInput
+            placeholder="Search Location 2"
+            value={searchInput2}
+            onChange={(e) => handleSearch2(e.target.value)}
+          />
+          {results2.length > 0 && (
+            <SearchResultsColumn>
+              {results2.map((item, idx) => (
+                <ResultItem
+                  key={idx}
+                  onClick={() => handleClickResult2(item)}
+                  selected={pendingSelection2 === item}
+                >
+                  {item}
+                </ResultItem>
+              ))}
+            </SearchResultsColumn>
+          )}
+          <ToggleButton
+            disabled={!pendingSelection2 && !selected2}
+            onClick={toggleSelection2}
+          >
+            {selected2 ? 'Deselect' : 'Select'}
+          </ToggleButton>
         </AccordionContent>
       </AccordionItem>
     </>

diff --git a/Frontend/src/_components/Header/SearchBar/AIdropdown.tsx b/Frontend/src/_components/Header/SearchBar/AIdropdown.tsx
@@ -2,29 +2,93 @@ import type { FC } from 'react'
 import styled from 'styled-components'
 import { renderAIContent } from '@/_components/ContextHooks/aiRender'
 
-const Container = styled.div`
+const Container = styled.div<{ width: number }>`
   position: absolute;
-  top: 45px;
+  top: 100%;
   left: 0;
-  width: 100%;
-  min-width: 660px;
-  max-width: 720px;
+  width: ${({ width }) => width}px;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
   border: 1px solid #eaeaea;
-  padding: 12px 0;
+  padding: 12px 16px;
   max-height: 520px;
   overflow-y: auto;
-  z-index: 100000;
+  font-family: 'Instrument Sans', sans-serif;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  z-index: 1000;
+`
+
+const ButtonRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+`
+
+const AIButton = styled.button`
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: none;
+  background-color: #007acc;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+
+  &:hover {
+    background-color: #005f99;
+  }
+`
+
+const TextBlock = styled.div`
+  color: #333;
+  line-height: 1.6;
+  white-space: pre-wrap;
 `
 
 interface AIDropdownProps {
   prompt: string
+  aiState: 'idle' | 'loading' | 'done'
+  loadingDots: number
+  onAskAI: () => void
+  onClear: () => void
+  inputWidth: number
+  aiDescription?: string
 }
 
-const AIdropdown: FC<AIDropdownProps> = ({ prompt }) => {
-  return <Container>{renderAIContent(prompt)}</Container>
+const AIdropdown: FC<AIDropdownProps> = ({
+  prompt,
+  aiState,
+  loadingDots,
+  onAskAI,
+  onClear,
+  inputWidth,
+  aiDescription = 'Ask the AI to generate a response based on your input.',
+}) => {
+  return (
+    <Container width={inputWidth} onMouseDown={(e) => e.preventDefault()}>
+      {aiState === 'idle' && (
+        <>
+          <TextBlock>{aiDescription}</TextBlock>
+          <ButtonRow>
+            <AIButton onClick={onAskAI}>Ask AI</AIButton>
+          </ButtonRow>
+        </>
+      )}
+      {aiState === 'loading' && (
+        <TextBlock>AI Response: Loading{'.'.repeat(loadingDots)}</TextBlock>
+      )}
+      {aiState === 'done' && (
+        <>
+          <TextBlock>AI Response: {renderAIContent(prompt)}</TextBlock>
+          <ButtonRow>
+            <AIButton onClick={onClear}>Clear</AIButton>
+          </ButtonRow>
+        </>
+      )}
+    </Container>
+  )
 }
 
 export default AIdropdown