initial commit

Dockerfile

@@ -1,37 +1,40 @@
-# ----------------------
+#------------------------
 # STAGE 1: Backend build
-# ----------------------
-
+#------------------------
 FROM python:3.9-slim-buster as backend
-
 WORKDIR /app/backend
 
-COPY web_app/backend/requirements.txt .
+# Copy necessary files
+COPY requirements.txt .
+COPY build_scripts/build.sh .
 
-RUN apt-get update && apt-get install -y --no-install-recommends gcc g++
-RUN pip install --no-cache-dir -r requirements.txt
-RUN pip install pandas
+# Set environment variable, make the script executable and run it
+ENV STAGE=backend
+RUN chmod +x ./build.sh && \
+    ./build.sh backend && \
+    rm -rf /var/lib/apt/lists/*
 
+# Copy the rest of the backend app
 COPY web_app/backend/ .
 
 CMD ["python", "run.py"]
 
-# -------------------------
+#-------------------------
 # STAGE 2: Frontend build
-# -------------------------
-
+#-------------------------
 FROM node:14-alpine as frontend
-
 WORKDIR /app/frontend
 
-COPY web_app/frontend/package*.json ./
-
-RUN npm install
-
+# Grouped copy for package-related files and the frontend app
+COPY web_app/frontend/package*.json .
 COPY web_app/frontend/ .
+COPY build_scripts/build.sh .
+
+# Set environment variables, make the script executable and run it
+ENV STAGE=frontend
 
-RUN npm run build
+RUN chmod +x ./build.sh && ./build.sh frontend
 
 EXPOSE 3000
+CMD ["serve", "-s", "dist", "-l", "3000"]
 
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

Dockerfile.test

@@ -1,28 +0,0 @@
-# Use the official Python 3.9 image
-FROM python:3.9
- 
-# Set the working directory to /code
-WORKDIR /code
- 
-# Copy the current directory contents into the container at /code
-COPY ./requirements.txt /code/requirements.txt
- 
-# Install requirements.txt 
-RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
- 
-# Set up a new user named "user" with user ID 1000
-RUN useradd -m -u 1000 user
-# Switch to the "user" user
-USER user
-# Set home to the user's home directory
-ENV HOME=/home/user \
-    PATH=/home/user/.local/bin:$PATH
- 
-# Set the working directory to the user's home directory
-WORKDIR $HOME/app
- 
-# Copy the current directory contents into the container at $HOME/app setting the owner to the user
-COPY --chown=user . $HOME/app
- 
-# Start the FastAPI app on port 7860, the default port expected by Spaces
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README

@@ -1 +0,0 @@
-# Hello

README.md

@@ -1,5 +1,5 @@
 ---
-title: Luminlab-web-app
+title: web-app-temp
 emoji: ⚡
 colorFrom: yellow
 colorTo: gray
@@ -8,5 +8,3 @@ pinned: false
 license: cc-by-nc-2.0
 app_port: 3000
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

build_scripts/build.sh

@@ -0,0 +1,28 @@
+#!/bin/sh
+set -e
+
+# Check the STAGE environment variable
+if [ "$STAGE" = "backend" ]; then
+
+    # Update and install dependencies
+    apt-get update && apt-get install -y --no-install-recommends gcc g++
+
+    # Install python dependencies
+    pip install --no-cache-dir -r requirements.txt
+
+elif [ "$STAGE" = "frontend" ]; then
+
+    # Install dependencies
+    npm install
+
+    # Adjust permissions and build in a single command
+    chown -R node:node /app/frontend
+    npm run build
+
+    # Install serve
+    npm install -g serve
+
+else
+    echo "Error: Invalid or no STAGE specified"
+    exit 1
+fi

docker-compose.dev.yml

@@ -5,7 +5,7 @@ services:
       context: .
       target: backend
     ports:
-      - 5001:5000
+      - 5000:5000
 
   frontend:
       image: node:alpine
@@ -23,14 +23,6 @@ services:
       depends_on:
         - backend
 
-  dl:
-    build: 
-      context: .
-      dockerfile: Dockerfile
-    image: pytorch/pytorch:1.13.0-cuda11.6-cudnn8-runtime
-    tty: true
-    stdin_open: true
-
 volumes:
   postgres_data:
 

docker-compose.prod.yml

@@ -5,7 +5,7 @@ services:
       context: .
       target: backend
     ports:
-      - 5001:5000
+      - 5000:5000
     environment:
       - DATABASE_URL=postgresql://${DB_USER}:${DB_PASS}@${DB_HOST}:${DB_PORT}/${DB_NAME}
     depends_on:

nginx.conf

@@ -1,30 +1,26 @@
-# The events block configures the connection handling capabilities of Nginx.
-events {
-    # The worker_connections directive specifies the maximum number of simultaneous connections
-    # that a single worker process can handle.
-    worker_connections 1024;
-}
+events {}
 
-# The http block is where you define directives for handling HTTP requests.
 http {
-    upstream frontend {
-        server frontend:3000;
-    }
-    
     upstream backend {
         server backend:5000;
     }
+    upstream frontend {
+        server frontend:3000;
+    }
 
     server {
-        listen 80;
-        
-        location / {
-            proxy_pass http://frontend;
-        }
+        listen 8081;
 
         location /api/ {
             proxy_pass http://backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+        }
+
+        location / {
+            proxy_pass http://frontend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
         }
     }
 }
-

requirements.txt

@@ -1,3 +1,182 @@
-fastapi==0.74.*
-requests==2.27.*
-uvicorn[standard]==0.17.*
+aiohttp==3.8.5
+aiosignal==1.3.1
+anyio==3.7.1
+appnope==0.1.3
+argon2-cffi==21.3.0
+argon2-cffi-bindings==21.2.0
+arrow==1.2.3
+astor==0.8.1
+asttokens==2.2.1
+async-lru==2.0.4
+async-timeout==4.0.2
+attrs==23.1.0
+Babel==2.12.1
+backcall==0.2.0
+backoff==2.2.1
+beautifulsoup4==4.12.2
+bleach==6.0.0
+blinker==1.6.2
+cachetools==5.3.1
+certifi==2023.7.22
+cffi==1.15.1
+charset-normalizer==3.2.0
+chroma-hnswlib==0.7.1
+chromadb==0.4.3
+click==8.1.4
+coloredlogs==15.0.1
+comm==0.1.4
+contourpy==1.1.0
+cssselect==1.2.0
+cssutils==2.7.1
+cycler==0.11.0
+dataclasses-json==0.5.13
+debugpy==1.6.7
+decorator==5.1.1
+defusedxml==0.7.1
+dnspython==2.4.1
+docopt==0.6.2
+executing==1.2.0
+faiss-cpu==1.7.4
+fastapi==0.99.1
+fastjsonschema==2.18.0
+Flask==2.3.2
+Flask-Cors==4.0.0
+Flask-SQLAlchemy==3.0.5
+flatbuffers==23.5.26
+fonttools==4.41.1
+fpdf==1.7.2
+fqdn==1.5.1
+frozenlist==1.4.0
+h11==0.14.0
+httptools==0.6.0
+humanfriendly==10.0
+idna==3.4
+importlib-resources==6.0.0
+ipykernel==6.25.0
+ipython==8.14.0
+ipython-genutils==0.2.0
+ipywidgets==8.1.0
+isoduration==20.11.0
+itsdangerous==2.1.2
+jedi==0.18.2
+Jinja2==3.1.2
+joblib==1.3.1
+json5==0.9.14
+jsonpointer==2.4
+jsonschema==4.18.6
+jsonschema-specifications==2023.7.1
+jupyter==1.0.0
+jupyter-console==6.6.3
+jupyter-events==0.7.0
+jupyter-lsp==2.2.0
+jupyter_client==8.3.0
+jupyter_core==5.3.1
+jupyter_server==2.7.0
+jupyter_server_terminals==0.4.4
+jupyterlab==4.0.4
+jupyterlab-pygments==0.2.2
+jupyterlab-widgets==3.0.8
+jupyterlab_server==2.24.0
+kiwisolver==1.4.4
+langchain==0.0.247
+langsmith==0.0.15
+loguru==0.7.0
+lxml==4.9.3
+MarkupSafe==2.1.3
+marshmallow==3.20.1
+matplotlib==3.7.2
+matplotlib-inline==0.1.6
+mistune==3.0.1
+monotonic==1.6
+mpmath==1.3.0
+multidict==6.0.4
+mypy-extensions==1.0.0
+nbclient==0.8.0
+nbconvert==7.7.3
+nbformat==5.9.2
+nest-asyncio==1.5.7
+notebook==7.0.2
+notebook_shim==0.2.3
+numexpr==2.8.4
+numpy==1.25.1
+onnxruntime==1.15.1
+openai==0.27.8
+openapi-schema-pydantic==1.2.4
+overrides==7.3.1
+packaging==23.1
+pandas==1.5.3
+pandasai==0.7.2
+pandocfilters==1.5.0
+parso==0.8.3
+pexpect==4.8.0
+pickleshare==0.7.5
+Pillow==10.0.0
+pinecone-client==2.2.2
+pipreqs==0.4.13
+platformdirs==3.10.0
+plotly==5.15.0
+posthog==3.0.1
+premailer==3.10.0
+prometheus-client==0.17.1
+prompt-toolkit==3.0.39
+protobuf==4.23.4
+psutil==5.9.5
+#psycopg2-binary==2.9.1
+ptyprocess==0.7.0
+pulsar-client==3.2.0
+pure-eval==0.2.2
+pycparser==2.21
+pydantic==1.10.12
+Pygments==2.15.1
+pyparsing==3.0.9
+PyPika==0.48.9
+python-dateutil==2.8.2
+python-dotenv==1.0.0
+python-json-logger==2.0.7
+pytz==2023.3
+PyYAML==6.0.1
+pyzmq==25.1.0
+qtconsole==5.4.3
+QtPy==2.3.1
+referencing==0.30.2
+regex==2023.6.3
+requests==2.31.0
+rfc3339-validator==0.1.4
+rfc3986-validator==0.1.1
+rpds-py==0.9.2
+scikit-learn==1.3.0
+scipy==1.11.1
+Send2Trash==1.8.2
+six==1.16.0
+sniffio==1.3.0
+soupsieve==2.4.1
+SQLAlchemy==2.0.18
+stack-data==0.6.2
+starlette==0.27.0
+sympy==1.12
+tenacity==8.2.2
+terminado==0.17.1
+threadpoolctl==3.2.0
+tiktoken==0.4.0
+tinycss2==1.2.1
+tokenizers==0.13.3
+tornado==6.3.2
+tqdm==4.65.0
+traitlets==5.9.0
+typing-inspect==0.9.0
+typing_extensions==4.7.1
+uri-template==1.3.0
+urllib3==2.0.4
+uvicorn==0.23.1
+uvloop==0.17.0
+watchfiles==0.19.0
+wcwidth==0.2.6
+webcolors==1.13
+webencodings==0.5.1
+websocket-client==1.6.1
+websockets==11.0.3
+Werkzeug==2.3.6
+widgetsnbextension==4.0.8
+yagmail==0.15.293
+yarg==0.1.9
+yarl==1.9.2

web_app/backend/app/__init__.py

@@ -2,11 +2,5 @@ from flask import Flask  # Import the Flask module
 from flask_cors import CORS  # Import the CORS module
 
 app = Flask(__name__)  # Initialize a Flask web app
-CORS(app)  # Implement Cross-Origin Resource Sharing (CORS) on the Flask app
-
-from app import chatbot, home, models  # Import modules from the "app" package (assuming it's in the same directory)
-
-# Use the app's context to perform actions related to the app
-with app.app_context():
-    models.db.drop_all()
-    models.db.create_all()
+cors = CORS(app)
+from app import chatbot_routes, home, models  # Import modules from the "app" package (assuming it's in the same directory)

web_app/backend/app/answers_model.py

@@ -1,10 +1,75 @@
-from pandasai import PandasAI
-from pandasai.llm.openai import OpenAI
-from dotenv import load_dotenv
+import pinecone
+from dotenv import load_dotenv, find_dotenv
+from langchain.embeddings.openai import OpenAIEmbeddings
+from langchain.memory import ConversationBufferMemory
+from langchain.vectorstores import Pinecone
+from langchain.chat_models import ChatOpenAI
+from langchain.chains import RetrievalQA
+from langchain import PromptTemplate
 
-# Load the environment variables
-load_dotenv()
+# Load environment variables
+load_dotenv(find_dotenv())
+
+# Setting up embeddings
+embedder = OpenAIEmbeddings()
+
+# Setting up the vectorstore
+pinecone.init(environment="us-west4-gcp")
+index = pinecone.Index('seai-website')
+
+#Set up the retriever
+vectorstore = Pinecone(index, embedder.embed_query, 'text')
+
+# Setting up the llm
+llm = ChatOpenAI(temperature=0.0)
+
+# Setting up the prompt template
+template = """
+    Use the following context (delimited by <ctx></ctx>) and the chat history (delimited by <hs></hs>) to answer the question:
+    ------
+    <ctx>
+    {context}
+    </ctx>
+    ------
+    <hs>
+    {history}
+    </hs>
+    ------
+    {question}
+    Answer:
+"""
+prompt = PromptTemplate(
+    input_variables=["history", "context", "question"],
+    template=template,
+)
+
+# Setting up the memory
+memory = ConversationBufferMemory(memory_key="history", input_key="question")
+
+# Setting up the QA chain
+qa = RetrievalQA.from_chain_type(
+    llm=ChatOpenAI(),
+    chain_type='stuff',
+    retriever=vectorstore.as_retriever(),
+    verbose=True,
+    chain_type_kwargs={
+        "verbose": True,
+        "prompt": prompt,
+        "memory": memory
+    }
+)
+
+def generate_question_response(query: str) -> str:
+    return qa.run(query)
+
+if __name__ == "__main__":
+    # Sample query
+    test_query = "What is the capital of France?"
+    
+    # Generate a response using the model
+    response = generate_question_response(test_query)
+    
+    # Print the query and its response
+    print(f"Query: {test_query}")
+    print(f"Response: {response}")
 
-# Initialize the OpenAI and PandasAI
-llm = OpenAI(model = "gpt-3.5-turbo-16k", temperature = 0.0)
-pandas_ai = PandasAI(llm, conversational = True)

web_app/backend/app/{chatbot.py → chatbot_routes.py}

@@ -1,40 +1,38 @@
 from app import app
 from flask import send_from_directory, jsonify, request
-import pandas as pd
-from pandasai import PandasAI
-from pandasai.llm.openai import OpenAI
-from os import environ
 import os
-from dotenv import load_dotenv
+from dotenv import load_dotenv, find_dotenv
 from app.question_model import generate_response
-from app.answers_model import pandas_ai
-
-print(os.getcwd())
+from app.answers_model import generate_question_response
+from fpdf import FPDF
+import yagmail
 
 # Load the environment variables
-load_dotenv()
+load_dotenv(find_dotenv())
 
-CURRENT_DIRECTORY = os.path.dirname(__file__)
-DATA_PATH = os.path.join(CURRENT_DIRECTORY, 'data', 'BER_Small.csv')
+print(f"Loading .env from: {find_dotenv()}")
 
-df = pd.read_csv(DATA_PATH, encoding='ISO-8859-1', low_memory=False)
+# Add a route to help with error handling
+@app.errorhandler(500)
+def internal_error(error):
+    app.logger.error("Server Error: %s", error)
+    return jsonify(message="Internal Server Error"), 500
 
 # Route to handle user prompt questions
 @app.route('/sendText', methods=['POST'])
 def handle_text():
     try:
         data = request.get_json()
-        print(data)
         print(f'Received text: {data["text"]}')
 
-        # Process the dataframe
-        output = pandas_ai(df, prompt = data["text"])
+        # Use the new model to get the output
+        output = generate_question_response(data["text"])
         print(f'Output: {output}')
     
         return jsonify(message='Received!', output=output), 200
     except Exception as e:
-        print(f'Error occurred: {e}')
-        return jsonify(message='Error occurred', error=str(e), type=str(type(e))), 500
+        app.logger.error(f"Error occurred during sendText: {e}")
+        return jsonify(message='Error occurred during sendText', error=str(e), type=str(type(e))), 500
 
 # Route to handle suggested questions
 @app.route('/sendQuestions', methods=['POST'])
@@ -58,5 +56,57 @@ def handle_questions():
 
         return jsonify(message='Received!', output=output), 200
     except Exception as e:
-        print(f'Error occurred: {e}')
-        return jsonify(message='Error occurred', error=str(e), type=str(type(e))), 500
+        app.logger.error(f"Error occurred during sendText: {e}")
+        return jsonify(message='Error occurred during sendText', error=str(e), type=str(type(e))), 500
+
+@app.route('/exportChat', methods=['POST'])
+def export_chat():
+    email = request.json.get('email')
+    chat_history = request.json.get('chatHistory')
+
+    # Convert chatHistory to PDF
+    pdf_file = create_pdf_from_chat_history(chat_history)
+
+    # Send the PDF to the email
+    send_pdf_to_email(email, pdf_file)
+
+    return jsonify({"message": f"Email sent to: {email}"}), 200
+
+def create_pdf_from_chat_history(chat_history):
+    # Initialize the Python PDF library, FPDF
+    pdf = FPDF()
+    
+    # Add a new page to the PDF
+    pdf.add_page()
+    
+    # Set the font for the page (Arial, size 12)
+    pdf.set_font("Arial", size = 12)
+
+    # Loop through the chat history
+    for chat in chat_history:
+        # Add each question and answer to the PDF as a multiline text box
+        pdf.multi_cell(190, 10, f"Q: {chat['question']}\nA: {chat['response']}")
+
+    # Define the name of the generated PDF file
+    filename = "chat_history.pdf"
+
+    # Generate the PDF and save it to a file
+    pdf.output(name=filename, dest='F').encode("latin1")
+
+    # Return the filename for later usage
+    return filename
+
+def send_pdf_to_email(email, pdf_file):
+    # Initialize yagmail client with email and password
+    yag = yagmail.SMTP(user="leo.defig", password="dummyPASSWORD123") 
+    
+    # Use yagmail to send an email with the PDF file as an attachment
+    yag.send(
+        to=email,
+        subject="Your Chat History",
+        contents="Please find attached the chat history.",
+        attachments=pdf_file,
+    )
+
+    # After sending the email, delete the PDF file from local storage
+    os.remove(pdf_file)

web_app/backend/app/data/chain.json

@@ -0,0 +1,57 @@
+{
+    "memory": null,
+    "verbose": false,
+    "tags": null,
+    "metadata": null,
+    "prompt": {
+        "input_variables": [
+            "input"
+        ],
+        "output_parser": null,
+        "partial_variables": {},
+        "messages": [
+            {
+                "content": "You are a world class algorithm for extracting information in structured formats.",
+                "additional_kwargs": {}
+            },
+            {
+                "content": "Use the given format to extract information from the following input:",
+                "additional_kwargs": {},
+                "example": false
+            },
+            {
+                "prompt": {
+                    "input_variables": [
+                        "input"
+                    ],
+                    "output_parser": null,
+                    "partial_variables": {},
+                    "template": "{input}",
+                    "template_format": "f-string",
+                    "validate_template": true,
+                    "_type": "prompt"
+                },
+                "additional_kwargs": {}
+            },
+            {
+                "content": "Tips: Make sure to answer in the correct format",
+                "additional_kwargs": {},
+                "example": false
+            }
+        ],
+        "_type": "chat"
+    },
+    "llm": {
+        "model_name": "gpt-3.5-turbo",
+        "model": "gpt-3.5-turbo",
+        "request_timeout": null,
+        "max_tokens": null,
+        "stream": false,
+        "n": 1,
+        "temperature": 0.0,
+        "_type": "openai-chat"
+    },
+    "output_key": "function",
+    "output_parser": {
+        "args_only": true,
+        "pydantic_schema": 

web_app/backend/app/data/dropped_features.txt

@@ -0,0 +1,15 @@
+"ThirdEnerProdDelivered","UvalueDoor","DeliveredEnergyPumpsFans","SecondFloorHeight",
+"gsdHSSupplSystemEff","SecondPartLTotalContribution","FirstEnerProdC02EmissionFactor","FirstEnerProdDeliveredLow",
+"LowEnergyLightingPercent","C02SupplementaryWater","FirstFloorArea","ZeroLossCollectorEff",
+"FirstEnerConsumedDelivered","ThirdFloorHeight","InsulationThickness","ThirdWallUValue",
+"SecondFloorArea","FanPowerManuDeclaredValue","CHPHeatEff","GroundFloorUValue",
+"CollectorHeatLossCoEff","UValueFloor","WHMainSystemEff","PrimaryEnergySupplementaryWater",
+"ThirdFloorArea","WHEffAdjFactor","UValueRoof","PermeabilityTestResult",
+"TotalC02Emissions","FirstHeatGenPlantEff","ThirdPercentageHeat","prob_smarea_error_0corr",
+"PercentageDraughtStripped","CHPUnitHeatFraction","SecondPercentageHeat","FirstFloorHeight",
+"TotalPrimaryEnergyFact","DoorArea","HSSupplSystemEff","TempFactorUnadj",
+"RenewEPren","SecondHeatGenPlantEff","CombiBoilerAddLoss","SolarStorageVolume",
+"ThirdHeatGenPlantEff","HSEffAdjFactor","FirstWallUValue","HeatExchangerEff",
+"ThirdPartLTotalContribution","DeliveredEnergySecondarySpace","AnnualSolarRadiation","FirstPercentageHeat",
+"DeclaredLossFactor","WaterStorageVolume","RoomInRoofArea","FirstPartLTotalContribution",
+"SecondWallUValue","SecondEnerProdDelivered","RER","ThermalBridgingFactor"

web_app/backend/app/data/pinecone_tut.ipynb

@@ -1,370 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": 13,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "import pinecone \n",
-    "import pandas as pd\n",
-    "\n",
-    "api_key = \"22e9da2e-64bc-47c6-b4a2-d0d220210aff\"\n",
-    "pinecone.init(api_key=api_key, environment='us-west4-gcp')"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 10,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#Giving our index a name\n",
-    "index_name = \"lumin-question-data\"\n",
-    "\n",
-    "#Delete index if it already exists\n",
-    "if index_name in pinecone.list_indexes():\n",
-    "    pinecone.delete_index(index_name)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 11,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Create Pinecone index\n",
-    "dimensions = 3\n",
-    "pinecone.create_index(name = index_name, dimension = dimensions, metric = 'cosine', shards = 1)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 12,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "index = pinecone.Index(index_name=index_name)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 16,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<div>\n",
-       "<style scoped>\n",
-       "    .dataframe tbody tr th:only-of-type {\n",
-       "        vertical-align: middle;\n",
-       "    }\n",
-       "\n",
-       "    .dataframe tbody tr th {\n",
-       "        vertical-align: top;\n",
-       "    }\n",
-       "\n",
-       "    .dataframe thead th {\n",
-       "        text-align: right;\n",
-       "    }\n",
-       "</style>\n",
-       "<table border=\"1\" class=\"dataframe\">\n",
-       "  <thead>\n",
-       "    <tr style=\"text-align: right;\">\n",
-       "      <th></th>\n",
-       "      <th>id</th>\n",
-       "      <th>vector</th>\n",
-       "    </tr>\n",
-       "  </thead>\n",
-       "  <tbody>\n",
-       "    <tr>\n",
-       "      <th>0</th>\n",
-       "      <td>A</td>\n",
-       "      <td>[0.1, 0.2, 0.3]</td>\n",
-       "    </tr>\n",
-       "    <tr>\n",
-       "      <th>1</th>\n",
-       "      <td>B</td>\n",
-       "      <td>[0.2, 0.3, 0.4]</td>\n",
-       "    </tr>\n",
-       "    <tr>\n",
-       "      <th>2</th>\n",
-       "      <td>C</td>\n",
-       "      <td>[0.3, 0.4, 0.5]</td>\n",
-       "    </tr>\n",
-       "    <tr>\n",
-       "      <th>3</th>\n",
-       "      <td>D</td>\n",
-       "      <td>[0.4, 0.5, 0.6]</td>\n",
-       "    </tr>\n",
-       "    <tr>\n",
-       "      <th>4</th>\n",
-       "      <td>E</td>\n",
-       "      <td>[0.5, 0.6, 0.7]</td>\n",
-       "    </tr>\n",
-       "  </tbody>\n",
-       "</table>\n",
-       "</div>"
-      ],
-      "text/plain": [
-       "  id           vector\n",
-       "0  A  [0.1, 0.2, 0.3]\n",
-       "1  B  [0.2, 0.3, 0.4]\n",
-       "2  C  [0.3, 0.4, 0.5]\n",
-       "3  D  [0.4, 0.5, 0.6]\n",
-       "4  E  [0.5, 0.6, 0.7]"
-      ]
-     },
-     "execution_count": 16,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "#Load the dataframe\n",
-    "df = pd.DataFrame(\n",
-    "    data={\n",
-    "        \"id\": [\"A\", \"B\", \"C\", \"D\", \"E\"],\n",
-    "        \"vector\": [\n",
-    "            [0.1, 0.2, 0.3],\n",
-    "            [0.2, 0.3, 0.4],\n",
-    "            [0.3, 0.4, 0.5],\n",
-    "            [0.4, 0.5, 0.6],\n",
-    "            [0.5, 0.6, 0.7]]\n",
-    "    }\n",
-    ")\n",
-    "  \n",
-    "df"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 17,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "{'upserted_count': 5}"
-      ]
-     },
-     "execution_count": 17,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "index.upsert(vectors=zip(df['id'], df['vector']))"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 18,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "{'dimension': 3,\n",
-       " 'index_fullness': 0.0,\n",
-       " 'namespaces': {'': {'vector_count': 5}},\n",
-       " 'total_vector_count': 5}"
-      ]
-     },
-     "execution_count": 18,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "index.describe_index_stats()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 19,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "{'results': [{'matches': [{'id': 'E',\n",
-       "                           'score': 0.990867436,\n",
-       "                           'values': [0.5, 0.6, 0.7]},\n",
-       "                          {'id': 'D',\n",
-       "                           'score': 0.986927509,\n",
-       "                           'values': [0.4, 0.5, 0.6]}],\n",
-       "              'namespace': ''}]}"
-      ]
-     },
-     "execution_count": 19,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "index.query(\n",
-    "    queries=[[2,2,2]],\n",
-    "    top_k=2,\n",
-    "    include_values=True\n",
-    ")"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 20,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "['lumin-question-data']"
-      ]
-     },
-     "execution_count": 20,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "pinecone.list_indexes()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 22,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "IndexDescription(name='lumin-question-data', metric='cosine', replicas=1, dimension=3.0, shards=1, pods=1, pod_type='p1.x1', status={'ready': True, 'state': 'Ready'}, metadata_config=None, source_collection='')"
-      ]
-     },
-     "execution_count": 22,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "pinecone.describe_index(\"lumin-question-data\")"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 30,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "import random \n",
-    "\n",
-    "ids = [\"a\", \"b\", \"c\", \"d\", \"e\"]\n",
-    "vecs = [[random.random() for _ in range(3)] for _ in range(len(ids))]"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 31,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "[[0.5582998198744755, 0.01804592916533032, 0.06927366246378208],\n",
-       " [0.19606955177481333, 0.9497032707066528, 0.08713643524214854],\n",
-       " [0.06740320859564719, 0.5796438198602569, 0.2521688997698266],\n",
-       " [0.08410319865807259, 0.0442919355259529, 0.6309807322716778],\n",
-       " [0.7629393424814093, 0.02832065828346908, 0.6747540161958138]]"
-      ]
-     },
-     "execution_count": 31,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "vecs"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 32,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "index = pinecone.Index(\"lumin-question-data\")"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 33,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "{'upserted_count': 5}"
-      ]
-     },
-     "execution_count": 33,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "index.upsert(vectors=zip(ids, vecs))"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 36,
-   "metadata": {},
-   "outputs": [
-    {
-     "ename": "AttributeError",
-     "evalue": "'Index' object has no attribute 'delete_index'",
-     "output_type": "error",
-     "traceback": [
-      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
-      "\u001b[0;31mAttributeError\u001b[0m                            Traceback (most recent call last)",
-      "Cell \u001b[0;32mIn[36], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m index\u001b[39m.\u001b[39;49mdelete_index(\u001b[39m\"\u001b[39m\u001b[39mlumin-question-data\u001b[39m\u001b[39m\"\u001b[39m)\n",
-      "\u001b[0;31mAttributeError\u001b[0m: 'Index' object has no attribute 'delete_index'"
-     ]
-    }
-   ],
-   "source": [
-    "index.delete_index(\"lumin-question-data\")"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.11.4"
-  },
-  "orig_nbformat": 4
- },
- "nbformat": 4,
- "nbformat_minor": 2
-}

web_app/backend/app/models.py

@@ -1,12 +1,12 @@
-from flask_sqlalchemy import SQLAlchemy
-from app import app
+#from flask_sqlalchemy import SQLAlchemy
+#from app import app
 
 #Connect to the database
-app.config["SQLALCHEMY_DATABASE_URI"] = ("postgresql://luminlab:Lumin#adapt2023@194.29.101.181:5433/luminlab_db")
+#app.config["SQLALCHEMY_DATABASE_URI"] = ("postgresql://luminlab:Lumin#adapt2023@194.29.101.181:5433/luminlab_db")
 
-db = SQLAlchemy(app)
+#db = SQLAlchemy(app)
 
-class User(db.Model):
+"""class User(db.Model):
     __tablename__ = 'user'
     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
     first_name = db.Column(db.String(50), nullable=False)
@@ -29,4 +29,4 @@ class User(db.Model):
 
 # create an application context
 with app.app_context():
-    db.create_all()
+    db.create_all()"""

web_app/backend/app/pinecone_q.ipynb

@@ -1,133 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {},
-   "outputs": [
-    {
-     "name": "stderr",
-     "output_type": "stream",
-     "text": [
-      "/opt/homebrew/lib/python3.11/site-packages/pinecone/index.py:4: TqdmWarning: IProgress not found. Please update jupyter and ipywidgets. See https://ipywidgets.readthedocs.io/en/stable/user_install.html\n",
-      "  from tqdm.autonotebook import tqdm\n"
-     ]
-    },
-    {
-     "data": {
-      "text/plain": [
-       "True"
-      ]
-     },
-     "execution_count": 1,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "from langchain.document_loaders.csv_loader import CSVLoader\n",
-    "from langchain.vectorstores import FAISS\n",
-    "from langchain.embeddings.openai import OpenAIEmbeddings\n",
-    "from langchain.prompts import PromptTemplate\n",
-    "from langchain.chat_models import ChatOpenAI\n",
-    "from langchain.chains import LLMChain\n",
-    "from dotenv import load_dotenv\n",
-    "import pandas as pd\n",
-    "\n",
-    "import pinecone\n",
-    "\n",
-    "\n",
-    "\n",
-    "load_dotenv()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 4,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#set the file path\n",
-    "file_path = \"/Users/leo/Programming/luminlab/web_app/backend/app/data/BER_Small.csv\"\n",
-    "df = pd.read_csv(file_path, encoding='ISO-8859-1', low_memory=False)\n",
-    "\n",
-    "#load the data\n",
-    "loader = CSVLoader(file_path=file_path)\n",
-    "documents = loader.load()\n",
-    "embeddings = OpenAIEmbeddings()\n",
-    "\n",
-    "#set up pinecone\n",
-    "api_key = \"22e9da2e-64bc-47c6-b4a2-d0d220210aff\"\n",
-    "pinecone.init(api_key=api_key, environment='us-west4-gcp')\n",
-    "index_name = \"lumin-answers\"\n",
-    "\n",
-    "\n",
-    "# Create Pinecone index\n",
-    "dimensions = df.shape[1]\n",
-    "\n",
-    "#Delete index if it already exists\n",
-    "if index_name in pinecone.list_indexes():\n",
-    "    pinecone.delete_index(index_name)\n",
-    "    \n",
-    "pinecone.create_index(name = index_name, dimension = dimensions, metric = 'cosine', shards = 1)\n",
-    "\n",
-    "#Init the index so that we can interact with it\n",
-    "index = pinecone.Index(index_name)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 5,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "{'dimension': 212,\n",
-       " 'index_fullness': 0.0,\n",
-       " 'namespaces': {},\n",
-       " 'total_vector_count': 0}"
-      ]
-     },
-     "execution_count": 5,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "index.describe_index_stats()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "index = "
-   ]
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.11.4"
-  },
-  "orig_nbformat": 4
- },
- "nbformat": 4,
- "nbformat_minor": 2
-}

web_app/backend/app/question_model.py

@@ -4,10 +4,12 @@ from langchain.embeddings.openai import OpenAIEmbeddings
 from langchain.prompts import PromptTemplate
 from langchain.chat_models import ChatOpenAI
 from langchain.chains import LLMChain
-from dotenv import load_dotenv
+from dotenv import load_dotenv, find_dotenv
 import os
 
-load_dotenv()
+# Load the environment variables
+load_dotenv(find_dotenv())
+
 
 # Load the data
 # Get the directory of the current file
@@ -49,7 +51,22 @@ llm = ChatOpenAI(temperature=0, model = "gpt-3.5-turbo-16k")
 
 # Define a template for the prompts to the language model
 template = """
-...
+    You are a extremely intelligent online assistant who's goal is to act as a 
+    reccomendation system for the user. The user will ask you questions about the 
+    retrofitting of their home in Ireland and you will provide them with the next two most
+    logical questions for them to ask. Your suggested questions should be similar to the 
+    best practice examples that I will provide you with. The examples are structured as RootQuestion
+    being the original question asked by the user and FollowUp1 and FollowUp2 being the next two
+    questions that the user should ask.
+
+    Below is the question that you have received from the user:
+    {question}
+
+    Here is a list of the best practice examples that you should try to emulate:
+    {examples}
+
+    Please return the most logical next two questions for the user to ask.
+    Ensure that you only send back exactly two follow-up questions.
 """
 
 # Define the template for the prompt with the input variables and template
@@ -89,4 +106,4 @@ def generate_response(message):
     # Convert follow-up questions into a string response
     response = '\n'.join(follow_ups)
 
-    return response
+    return response

web_app/backend/requirements.txt

@@ -1,102 +0,0 @@
-aiohttp==3.8.5
-aiosignal==1.3.1
-anyio==3.7.1
-appnope==0.1.3
-astor==0.8.1
-asttokens==2.2.1
-async-timeout==4.0.2
-attrs==23.1.0
-backcall==0.2.0
-backoff==2.2.1
-blinker==1.6.2
-certifi==2023.7.22
-charset-normalizer==3.2.0
-chroma-hnswlib==0.7.1
-chromadb==0.4.3
-click==8.1.4
-coloredlogs==15.0.1
-contourpy==1.1.0
-cycler==0.11.0
-dataclasses-json==0.5.13
-decorator==5.1.1
-executing==1.2.0
-faiss-cpu==1.7.4
-fastapi==0.99.1
-Flask==2.3.2
-Flask-Cors==4.0.0
-Flask-SQLAlchemy==3.0.5
-flatbuffers==23.5.26
-fonttools==4.41.1
-frozenlist==1.4.0
-h11==0.14.0
-httptools==0.6.0
-humanfriendly==10.0
-idna==3.4
-importlib-resources==6.0.0
-ipython==8.14.0
-itsdangerous==2.1.2
-jedi==0.18.2
-Jinja2==3.1.2
-kiwisolver==1.4.4
-langchain==0.0.247
-langsmith==0.0.15
-MarkupSafe==2.1.3
-marshmallow==3.20.1
-matplotlib==3.7.2
-matplotlib-inline==0.1.6
-monotonic==1.6
-mpmath==1.3.0
-multidict==6.0.4
-mypy-extensions==1.0.0
-numexpr==2.8.4
-numpy==1.25.1
-onnxruntime==1.15.1
-openai==0.27.8
-openapi-schema-pydantic==1.2.4
-overrides==7.3.1
-packaging==23.1
-pandas==1.5.3
-pandasai==0.7.2
-parso==0.8.3
-pexpect==4.8.0
-pickleshare==0.7.5
-Pillow==10.0.0
-plotly==5.15.0
-posthog==3.0.1
-prompt-toolkit==3.0.39
-protobuf==4.23.4
-psycopg2-binary==2.9.1
-ptyprocess==0.7.0
-pulsar-client==3.2.0
-pure-eval==0.2.2
-pydantic==1.10.12
-Pygments==2.15.1
-pyparsing==3.0.9
-PyPika==0.48.9
-python-dateutil==2.8.2
-python-dotenv==1.0.0
-pytz==2023.3
-PyYAML==6.0.1
-regex==2023.6.3
-requests==2.31.0
-six==1.16.0
-sniffio==1.3.0
-SQLAlchemy==2.0.18
-stack-data==0.6.2
-starlette==0.27.0
-sympy==1.12
-tenacity==8.2.2
-tiktoken==0.4.0
-tokenizers==0.13.3
-tqdm==4.65.0
-traitlets==5.9.0
-typing-inspect==0.9.0
-typing_extensions==4.7.1
-urllib3==2.0.4
-uvicorn==0.23.1
-uvloop==0.17.0
-watchfiles==0.19.0
-wcwidth==0.2.6
-websockets==11.0.3
-Werkzeug==2.3.6
-yarl==1.9.2

web_app/backend/run.py

@@ -1,4 +1,4 @@
 from app import app
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0")
+    app.run(host="0.0.0.0", port=5000, debug=True)

web_app/frontend/package.json

@@ -7,17 +7,27 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start": "npm run dev"
   },
   "dependencies": {
+    "@deck.gl/core": "^8.9.23",
+    "@deck.gl/extensions": "^8.9.23",
+    "@deck.gl/geo-layers": "^8.9.23",
+    "@deck.gl/layers": "^8.9.23",
+    "@deck.gl/mesh-layers": "^8.9.23",
+    "@deck.gl/react": "^8.9.23",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
     "axios": "^1.4.0",
-    "esbuild": "^0.18.17",
+    "esbuild": "^0.18.18",
+    "mapbox-gl": "^2.15.0",
+    "maplibre-gl": "^3.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.3",
     "react-router-dom": "^6.14.2",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.4.0"
@@ -25,11 +35,11 @@
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "^4.0.4",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.7"
+    "vite": "^4.4.8"
   }
 }

web_app/frontend/src/App.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import Navbar from './components/Navbar';
+// import Navbar from './components/Navbar';
 // import Footer from './components/Footer';
 import { Box } from '@mui/system';
 
 const App = ({ children }) => {
   return (
     <>
-      <Navbar />
+      {/* <Navbar /> */}
       <Box flexGrow={1}>
         {children}
       </Box>

web_app/frontend/src/AppRouter.jsx

@@ -2,22 +2,26 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import App from './App';
 import LandingPage from './pages/LandingPage';
-import ChatBot from './pages/ChatBot';
 import AboutPage from './pages/AboutPage';
 import ContactPage from './pages/ContactPage';
-import DashboardPage from './pages/DashboardPage';
+import DashboardPage from './pages/DashboardPage-old';
 import ChatPage from './pages/ChatPage';
+import ReportsPage from './pages/ReportsPage';
+import CityPage from './pages/CityPage';
+import ResourcesPage from './pages/ResourcesPage';
 
 const AppRouter = () => (
   <Router>
     <App>
       <Routes>
         <Route path="/" element={<LandingPage />} />
-        <Route path="/chatbot" element={<ChatBot />} />
         <Route path="/about" element={<AboutPage />} />
         <Route path="/contact" element={<ContactPage />} />
         <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="/dashboard/chat" element={<ChatPage />}/>
+        <Route path="/dashboard/reports" element={<ReportsPage />}/>
+        <Route path="/dashboard/city" element={<CityPage />}/>
+        <Route path="/dashboard/resources" element={<ResourcesPage />}/>
       </Routes>
     </App>
   </Router>

web_app/frontend/src/components/ChatHistory.jsx

@@ -27,10 +27,10 @@ const ChatHistory = ({ chatHistory, handleFollowUp }) => {
               <Card 
                 sx={{ 
                   my: 0, 
-                  mt: index === 0 ? 6 : 2,  // Conditional margin-top depending on the index
+                  mt: index === 0 ? 1 : 2,  // Conditional margin-top depending on the index
                   mx: 2,
-                  width: '100%', 
-                  maxWidth: 'calc(100% - 48px)', // Calculated max-width to provide spacing on larger screens
+                  // width: '100%', 
+                  // maxWidth: 'calc(100% - 48px)', // Calculated max-width to provide spacing on larger screens
                 }}
               >
                 <CardContent>

web_app/frontend/src/components/ChatInput.jsx

@@ -17,17 +17,18 @@ const ChatInput = ({
       component="form"
       onSubmit={handleFormSubmit}
       sx={{
-        position: 'fixed',
+        position: 'flex',
         bottom: 0,
         left: 0,
         right: 0,
-        backgroundColor: '#404040',
+        backgroundColor: '#1D5B79',
         borderTop: '1px solid #DDD',
         py: 1,
         px: 2,
         display: 'flex',
         justifyContent: 'space-between',
         minHeight: 80,
+        borderRadius:'15px'
       }}
     >
       <TextField
@@ -40,11 +41,12 @@ const ChatInput = ({
         rowsmax={2}
         variant="outlined"
         disabled={loading}
-        sx={{ flexGrow: 1, maxHeight: '80%', mr: 1, ml: -1, backgroundColor: '#606060' }}
+        sx={{ flexGrow: 1, maxHeight: '80%', mr: 1, ml: -1, backgroundColor: 'rgba(255, 255, 255, 0.8)',
+        borderRadius:'15px'}}
       />
 
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
-        <Button type="submit" color="primary" variant="contained" disabled={loading} sx={{ height: '100%', mr: 1 }}>
+        <Button type="submit" color="primary" variant="contained" disabled={loading} sx={{ backgroundColor:'#5499de' , height: '100%', mr: 1, borderRadius:'15px'}}>
           {loading ? <CircularProgress size={24} /> : <PaperPlaneIcon />}
         </Button>
         
@@ -56,7 +58,7 @@ const ChatInput = ({
             height: '100%',
             width: 50,
             backgroundColor: grey[300],
-            borderRadius: '4px',
+            borderRadius:'15px'
           }}
         >
           <RefreshIcon />

web_app/frontend/src/components/Map3D-old.jsx

@@ -0,0 +1,137 @@
+import React, {useState, useEffect} from 'react';
+import {createRoot} from 'react-dom/client';
+import {Map} from 'react-map-gl';
+import maplibregl from 'maplibre-gl';
+import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
+import DeckGL from '@deck.gl/react';
+import {PolygonLayer} from '@deck.gl/layers';
+import {TripsLayer} from '@deck.gl/geo-layers';
+import { Box } from '@mui/system';
+
+
+// Source data CSV, Attribution to CARTO, OpenStreetMap contributors to deck.gl trips-layer example
+const DATA_URL = {
+  BUILDINGS:'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/buildings.json', // eslint-disable-line
+  TRIPS: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json' // eslint-disable-line
+};
+
+const ambientLight = new AmbientLight({
+  color: [255, 255, 255],
+  intensity: 1.0
+});
+
+const pointLight = new PointLight({
+  color: [255, 255, 255],
+  intensity: 2.0,
+  position: [-74.05, 40.7, 8000]
+});
+
+const lightingEffect = new LightingEffect({ambientLight, pointLight});
+
+const material = {
+  ambient: 0.1,
+  diffuse: 0.6,
+  shininess: 32,
+  specularColor: [60, 64, 70]
+};
+
+const DEFAULT_THEME = {
+  buildingColor: [74, 80, 87],
+  trailColor0: [253, 128, 93],
+  trailColor1: [23, 184, 190],
+  material,
+  effects: [lightingEffect]
+};
+
+const INITIAL_VIEW_STATE = {
+  longitude: -6.2760296,
+  latitude: 53.362321,
+  zoom: 13,
+  pitch: 45,
+  bearing: 0
+};
+
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';
+
+const landCover = [
+  [
+    [-74.0, 40.7],
+    [-74.02, 40.7],
+    [-74.02, 40.72],
+    [-74.0, 40.72]
+  ]
+];
+
+export default function Map3D({
+    buildings = DATA_URL.BUILDINGS,
+    trips = DATA_URL.TRIPS,
+    trailLength = 180,
+    initialViewState = INITIAL_VIEW_STATE,
+    mapStyle = MAP_STYLE,
+    theme = DEFAULT_THEME,
+    loopLength = 1800,
+    animationSpeed = 1
+  }) {
+    const [time, setTime] = useState(0);
+    const [animation] = useState({});
+  
+    const animate = () => {
+      setTime(t => (t + animationSpeed) % loopLength);
+      animation.id = window.requestAnimationFrame(animate);
+    };
+  
+    useEffect(() => {
+      animation.id = window.requestAnimationFrame(animate);
+      return () => window.cancelAnimationFrame(animation.id);
+    }, [animation]);
+  
+    const layers = [
+      new PolygonLayer({
+        id: 'ground',
+        data: landCover,
+        getPolygon: f => f,
+        stroked: false,
+        getFillColor: [0, 0, 0, 0]
+      }),
+      new TripsLayer({
+        id: 'trips',
+        data: trips,
+        getPath: d => d.path,
+        getTimestamps: d => d.timestamps,
+        getColor: d => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
+        opacity: 0.3,
+        widthMinPixels: 2,
+        rounded: true,
+        trailLength,
+        currentTime: time,
+  
+        shadowEnabled: false
+      }),
+      new PolygonLayer({
+        id: 'buildings',
+        data: buildings,
+        extruded: true,
+        wireframe: false,
+        opacity: 0.5,
+        getPolygon: f => f.polygon,
+        getElevation: f => f.height,
+        getFillColor: theme.buildingColor,
+        material: theme.material
+      })
+    ];
+  
+    return (
+        <Box sx={{ width: '100%', height: '100%', position: 'relative', borderRadius: '15px', overflow: 'hidden'}}>
+            <DeckGL
+                style={{ width: '100%', height: '100%', position: 'absolute'}}
+                layers={layers}
+                effects={theme.effects}
+                initialViewState={initialViewState}
+                controller={true}
+            >
+                <Map reuseMaps mapLib={maplibregl} mapStyle={mapStyle} preventStyleDiffing={true} attributionControl={false} />
+            </DeckGL>
+        </Box>
+    );
+  }
+  

web_app/frontend/src/components/Map3D.jsx

@@ -0,0 +1,155 @@
+import React, {useState, useEffect} from 'react';
+import {createRoot} from 'react-dom/client';
+import {Map} from 'react-map-gl';
+import maplibregl from 'maplibre-gl';
+import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
+import DeckGL from '@deck.gl/react';
+import {PolygonLayer} from '@deck.gl/layers';
+import {TripsLayer} from '@deck.gl/geo-layers';
+import { Box } from '@mui/system';
+
+
+// Source data CSV, Attribution to CARTO, OpenStreetMap contributors to deck.gl trips-layer example
+const DATA_URL = {
+//   BUILDINGS:'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/buildings.json', // eslint-disable-line
+    BUILDINGS: '/map1.json'
+};
+
+const ambientLight = new AmbientLight({
+  color: [255, 255, 255],
+  intensity: 6.0
+});
+
+const pointLight = new PointLight({
+  color: [255, 255, 255],
+  intensity: 1.0,
+  position: [-6.4741164,
+    53.4622087, 8000]
+});
+
+// const lightingEffect = new LightingEffect({ambientLight, pointLight});
+const lightingEffect = new LightingEffect({ambientLight, pointLight});
+
+
+const material = {
+  ambient: 0.1,
+  diffuse: 0.6,
+  shininess: 32,
+  specularColor: [60, 64, 70]
+};
+
+const DEFAULT_THEME = {
+  buildingColor: [51, 204, 255],
+  trailColor0: [253, 128, 93],
+  trailColor1: [23, 184, 190],
+  material,
+  effects: [lightingEffect]
+};
+
+const INITIAL_VIEW_STATE = {
+  longitude: -6.269218,
+  latitude: 53.342505,
+  zoom: 14.64,
+  pitch: 59.31,
+  bearing: 0
+};
+
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';
+
+const landCover = [
+  [
+    [-74.0, 40.7],
+    [-74.02, 40.7],
+    [-74.02, 40.72],
+    [-74.0, 40.72]
+  ]
+];
+
+export default function Map3D({
+    buildings = DATA_URL.BUILDINGS,
+    initialViewState = INITIAL_VIEW_STATE,
+    mapStyle = MAP_STYLE,
+    theme = DEFAULT_THEME,
+  }) {
+    const [buildingData, setBuildingData] = useState(null);
+    const [viewState, setViewState] = useState(initialViewState); // Add this line to manage view state
+
+    useEffect(() => {
+        fetch(buildings)
+          .then((response) => response.json())
+          .then((json) => {
+            const allData = json.datasets[0].data.allData.map(([feature]) => feature);
+            setBuildingData(allData);
+          })
+          .catch((error) => {
+            console.error('Error fetching buildings data:', error);
+          });
+      }, [buildings]);
+    
+    if (!buildingData) {
+    return <div>Loading...</div>;
+    }
+
+    const layers = [
+        new PolygonLayer({
+            id: 'ground',
+            data: landCover,
+            getPolygon: f => f,
+            stroked: false,
+            getFillColor: [0, 0, 0, 0]
+        }),
+        new PolygonLayer({
+            id: 'buildings',
+            data: buildingData,
+            extruded: true,
+            wireframe: false,
+            opacity: 0.5,
+            getPolygon: (f) => f.geometry.coordinates[0][0],
+            getElevation: (f) => f.properties.Height_Met,
+            getFillColor: theme.buildingColor,
+            material: theme.material,
+          })
+    ];
+
+    const onViewStateChange = ({ viewState }) => {
+        setViewState(viewState);
+    };
+  
+    return (
+        <Box sx={{ width: '100%', height: '100%', position: 'relative', borderRadius: '15px', overflow: 'hidden'}}>
+            <DeckGL
+                style={{ width: '100%', height: '100%', position: 'absolute'}}
+                layers={layers}
+                effects={theme.effects}
+                initialViewState={initialViewState}
+                controller={true}
+                viewState={viewState}
+                onViewStateChange={onViewStateChange}
+            >
+                <Map reuseMaps mapLib={maplibregl} mapStyle={mapStyle} preventStyleDiffing={true} attributionControl={false} />
+            </DeckGL>
+            <div
+        style={{
+          position: 'absolute',
+          bottom: '10px',
+          right: '10px',
+          color: 'white',
+          background: 'rgba(0, 0, 0, 0.5)',
+          padding: '5px',
+          borderRadius: '5px',
+        }}
+      >
+        Longitude: {viewState.longitude.toFixed(6)}
+        <br />
+        Latitude: {viewState.latitude.toFixed(6)}
+        <br />
+        Zoom: {viewState.zoom.toFixed(2)}
+        <br />
+        Pitch: {viewState.pitch.toFixed(2)}
+        <br />
+        Bearing: {viewState.bearing.toFixed(2)}
+      </div>
+        </Box>
+    );
+  }
+  

web_app/frontend/src/components/Navbar.jsx

@@ -5,8 +5,7 @@ import { Menu, Close } from '@mui/icons-material';
 import { Link, useLocation } from 'react-router-dom';
 import './Navbar.css'
 
-// Define the Navbar component
-const Navbar = () => {
+const Navbar = ({bgColor = 'rgba(255, 255, 255, 0.1)', fontColor = 'white'}) => {
   const [open, setOpen] = useState(false);
   const location = useLocation();
   const [currentPage, setCurrentPage] = useState('');
@@ -22,24 +21,21 @@ const Navbar = () => {
   };
   
   return (
-    // AppBar component to create the top navigation bar
-    <AppBar position="absolute" style={{ backgroundColor: 'transparent', boxShadow: 'none' }}>
-      {/* Toolbar component to contain the navigation content */}
-      <Toolbar style={{ display: 'flex', justifyContent: 'space-between', margin: '10px', borderRadius: '15px', backgroundColor: 'rgba(255, 255, 255, 0.1)' }}>
-        {/* Link to the home page with a logo and text */}
+    <AppBar position="absolute" style={{ backgroundColor:'transparent', boxShadow: 'none' }}>
+      <Toolbar style={{ display: 'flex', justifyContent: 'space-between', margin: '10px', borderRadius: '15px', backgroundColor:bgColor }}>
         <Link className="logo" to="/" style={{ textDecoration: 'none', padding: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <Typography style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold' }}>
+          <Typography style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', color: fontColor}}>
             LuminLab
           </Typography>
-          <Divider orientation="vertical" flexItem sx={{ bgcolor: 'white', width: '1px', mx: 2 }}/>
-          <Typography style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold' }}>
+          <Divider orientation="vertical" flexItem sx={{ bgcolor: fontColor, width: '1px', mx: 2 }}/>
+          <Typography style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', color: fontColor}}>
             {currentPage}
           </Typography>
         </Link>
 
         <Box display={{ xs: 'block', sm: 'none' }}>
           <IconButton 
-            color="inherit" 
+            color={fontColor}
             onClick={handleToggle}
           >
             {open ? <Close /> : <Menu />}
@@ -58,29 +54,29 @@ const Navbar = () => {
                 marginTop: '76px',
                 marginRight: '10px',
                 marginLeft: '10px',
-                backgroundColor: '#F6FDFF',
+                backgroundColor: bgColor,
                 boxShadow: '1',
-                color:'#4568dc'
+                color: fontColor
               }
             }}
             transitionDuration={200}
             TransitionComponent={Fade}
           >
-            <MenuItem onClick={() => setOpen(false)} component={Link} to="/about" style={{ fontWeight: 'bold' }}>About</MenuItem>
-            <MenuItem onClick={() => setOpen(false)} component={Link} to="/contact" style={{ fontWeight: 'bold' }}>Contact</MenuItem>
+            <MenuItem onClick={() => setOpen(false)} component={Link} to="/about" style={{ fontWeight: 'bold'}}>About</MenuItem>
+            <MenuItem onClick={() => setOpen(false)} component={Link} to="/contact" style={{ fontWeight: 'bold' }}>Client Communications</MenuItem>
             <MenuItem onClick={() => setOpen(false)} component={Link} to="/dashboard" style={{ fontWeight: 'bold' }}>Dashboard</MenuItem>
             {/* <MenuItem onClick={() => setOpen(false)} component={Link} to="/team" style={{ fontWeight: 'bold' }}>Team</MenuItem> */}
           </Drawer>
         </Box>
 
         <Box display={{ sm: 'flex', xs: 'none' }}>
-          <Button className="nav-link" color="inherit" component={Link} to="/about" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px'}}>
+          <Button className="nav-link" color="inherit" component={Link} to="/about" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px', color: fontColor}}>
             About
           </Button>
-          <Button className="nav-link" color="inherit" component={Link} to="/contact" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px'}}>
-            Contact
+          <Button className="nav-link" color="inherit" component={Link} to="/contact" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px', color: fontColor}}>
+            Client Communications
           </Button>
-          <Button className="nav-link" color="inherit" component={Link} to="/dashboard" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px'}}>
+          <Button className="nav-link" color="inherit" component={Link} to="/dashboard" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px', color: fontColor}}>
             Dashboard
           </Button>
           {/* <Button className="nav-link" color="inherit" component={Link} to="/team" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold'}}>
@@ -92,6 +88,5 @@ const Navbar = () => {
   );
 };
 
-// Export the Navbar component as default
 export default Navbar;
  

web_app/frontend/src/components/StartCard.jsx

@@ -30,21 +30,24 @@ const StartCard = ({ inputText }) => {
             <CardContent>
               {/* Typography for the title */}
               <Typography
-                variant="h6"
-                sx={{
-                  textAlign: 'center',
-                  WebkitBackgroundClip: 'text',
-                  WebkitTextFillColor: 'transparent',
-                  backgroundImage:
-                    'linear-gradient(90deg, #F46737 0%, #FFA53C 30%, #FBFF3C 60%, #49C628 100%)', // Gradient text effect
-                  pb: 0, // Remove bottom padding
-                  mb: 0, // Remove bottom margin
-                  mr: -10, // Adjust right margin
-                }}
+                  variant="h6"
+                  sx={{
+                      textAlign: 'center',
+                      // You can add or adjust font-related styles if necessary, for example:
+                      // fontFamily: 'Your preferred font-family here',
+                      // fontWeight: 'normal',
+                      // fontSize: '1rem',
+                      // color: 'black', // or any other color you prefer
+                      pl: -100,
+                      pr: 12,
+                      pb: 0, // Remove bottom padding
+                      mb: 0, // Remove bottom margin
+                      mr: -10, // Adjust right margin
+                  }}
               >
-                Unsure Where to Start?
+                  Unsure Where to Start?
               </Typography>
-            </CardContent>
+          </CardContent>
           </Card>
         </Grid>
         {/* Render the ButtonGrid component */}

web_app/frontend/src/components/emailService.jsx

@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+const handleSendEmail = async (email) => {
+    try {
+        // Fetch chatHistory from localStorage
+        const storedChatHistory = localStorage.getItem('chatHistory');
+        
+        // If it doesn't exist or is empty, return
+        if (!storedChatHistory || storedChatHistory.length === 0) {
+            console.error("Chat history is empty.");
+            return;
+        }
+        
+        const response = await axios.post('http://localhost:5000/exportChat', {
+            email: email,
+            chatHistory: JSON.parse(storedChatHistory) // Convert the stringified JSON to an object
+        });
+
+        console.log(response.data);
+
+    } catch (error) {
+        console.error("Error sending email:", error);
+    }
+};
+
+export default handleSendEmail;

web_app/frontend/src/hooks/useChat.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import axios from 'axios';
-
 /**
  * Custom hook for managing chat-related state and functionality.
  * It handles input text, chat history, loading state, history navigation, and form submission.
@@ -24,8 +23,8 @@ export default function useChatHandler() {
     setLoading(true);
     let success = false;
     try {
-      const sendTextResponse = await axios.post('http://localhost:5001/sendText', { text });
-      const sendQuestionsResponse = await axios.post('http://localhost:5001/sendQuestions', { text });
+      const sendTextResponse = await axios.post('http://127.0.0.1:5000/sendText', { text });
+      const sendQuestionsResponse = await axios.post('http://127.0.0.1:5000/sendQuestions', { text });
   
       const newChatItem = {
         question: text,
@@ -60,18 +59,18 @@ export default function useChatHandler() {
     setChatHistory([...chatHistory]);
   
     try {
-      const response = await axios.post('http://localhost:5001/sendText', { 
+      const response = await axios.post('http://127.0.0.1:5000/sendText', { 
         text: chatHistory[chatItemIndex].followUps[followUpIndex].text 
       });
   
-      // update the response and loading state
+      // Update the response and loading state
       chatHistory[chatItemIndex].followUps[followUpIndex].response = response.data.output;
       chatHistory[chatItemIndex].followUps[followUpIndex].loading = false;
   
-      // Here, you might also want to get new follow-up questions based on the follow-up response.
-      const sendQuestionsResponse = await axios.post('http://localhost:5001/sendQuestions', { text: response.data.output });
+      // Get new follow-up questions based on the follow-up response.
+      const sendQuestionsResponse = await axios.post('http://127.0.0.1:5000/sendQuestions', { text: response.data.output });
   
-      // You can then add these to your followUp array.
+      // Add to FollowUp array
       const newFollowUps = sendQuestionsResponse.data.output.followUps.map(followUp => ({
         text: followUp,
         response: null,
@@ -152,4 +151,3 @@ export default function useChatHandler() {
   };
   
 }
- 

web_app/frontend/src/pages/AboutPage.jsx

@@ -2,23 +2,25 @@ import React from 'react';
 import { Container, Typography, Button, Grid, styled, Paper} from '@mui/material';
 import { Link } from 'react-router-dom';
 import { Box } from '@mui/system';
+import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
 
 const AboutPage = () => {
   return (
     <>
+      <Navbar />
       <Box 
-      sx={{ 
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        minHeight: '100vh', 
-        width: '100%',
-        backgroundImage: 'linear-gradient(to bottom, #4568dc, #b06ab3)', 
-        backgroundRepeat: 'no-repeat', 
-        backgroundSize: 'cover',
-        zIndex: -1
-      }}
+        sx={{ 
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          minHeight: '100vh', 
+          width: '100%',
+          backgroundImage: 'linear-gradient(to bottom, #1D5B79, #1D5B79)', 
+          backgroundRepeat: 'no-repeat', 
+          backgroundSize: 'cover',
+          zIndex: -1
+        }}
       />
       <Box sx={{ 
         position: 'absolute',

web_app/frontend/src/pages/ChatBot.jsx

@@ -1,76 +0,0 @@
-// Import required dependencies and components
-import React, { useState} from 'react';
-import { Box } from '@mui/material';
-import useChatHandler from '../hooks/useChat.js';
-import ChatHistory from '../components/ChatHistory.jsx';
-import ChatInput from '../components/ChatInput.jsx';
-import StartCard from '../components/StartCard.jsx';
-
-// The ChatBot component which manages and displays the chat feature
-function ChatBot() {
-  // State to hold the current index in chat history navigation, initialized to -1
-  const [historyIndex, setHistoryIndex] = useState(-1);
-  // State to hold whether we are currently navigating through history, initialized to false
-  const [isHistoryNavigation, setIsHistoryNavigation] = useState(false);
-  
-  // Hook to handle chat logic, returns various state and handler functions
-  const {
-    inputText,
-    handleInputChange,
-    chatHistory,
-    loading,
-    handleSubmit,
-    handleKeyDown,
-    clearChatHistory,
-    handleFollowUp,  // include handleFollowUp here
-  } = useChatHandler();
-  
-
-  // Function to submit a message, takes an event and prevents the page from refreshing
-  const handleFormSubmit = (e) => {
-    e.preventDefault();
-    handleSubmit(inputText); // Pass the current input text to the handleSubmit function
-  };
-
-  return (
-    <>
-      {/* Container for the gradient background */}
-      <Box 
-        sx={{ 
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          minHeight: '100vh', 
-          width: '100%',
-          backgroundImage: 'linear-gradient(to bottom, #4568dc, #b06ab3)', 
-          backgroundRepeat: 'no-repeat', 
-          backgroundSize: 'cover',
-          zIndex: -1
-        }}
-      />
-
-      {/* Container for the chat history */}
-      <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', mt: 6 }}>
-        {/* Display the StartCard component only when the chat history is empty and the chat is not loading */}
-        {chatHistory.length === 0 && !loading && <StartCard inputText={inputText} />}
-
-        {/* Chat history component, displays past messages */}
-        <ChatHistory chatHistory={chatHistory} handleFollowUp={handleFollowUp} />
-      </Box>
-
-      {/* Chat input component, where users type and submit their messages */}
-      <ChatInput 
-        inputText={inputText} 
-        handleInputChange={handleInputChange} 
-        handleKeyDown={handleKeyDown} 
-        handleFormSubmit={handleFormSubmit}
-        loading={loading} 
-        clearChatHistory={clearChatHistory} 
-      />
-    </>
-  );
-}
-  
-// Export the ChatBot component
-export default ChatBot;
- 

web_app/frontend/src/pages/ChatPage.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText } from '@mui/material';
+import React, { useState } from 'react';
+import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText, ListItemIcon } from '@mui/material';
 import { Box } from '@mui/system';
 import { Link, Outlet } from 'react-router-dom';
 import ChatIcon from '@mui/icons-material/Chat';
@@ -7,6 +7,27 @@ import PieChartIcon from '@mui/icons-material/PieChart';
 import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
 import BookIcon from '@mui/icons-material/Book';
 
+import GridViewSharpIcon from '@mui/icons-material/GridViewSharp';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PersonIcon from '@mui/icons-material/Person';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import SendIcon from '@mui/icons-material/Send';
+
+
+import Navbar from '../components/Navbar';
+
+import useChatHandler from '../hooks/useChat.js';
+
+import ChatHistory from '../components/ChatHistory';
+import ChatInput from '../components/ChatInput';
+import StartCard from '../components/StartCard';
+import handleSendEmail from '../components/emailService';
+
+import './scrollbar.css';
+
+import axios from 'axios';
+
+
 const ChatPage = () => {
 
   const services = [
@@ -16,74 +37,176 @@ const ChatPage = () => {
     { title: 'Useful Resources', link: '/dashboard/resources', icon: <BookIcon style={{ fontSize: 60 }} /> },
   ];
 
-  const menuOptions = ["Settings", "Profile", "Sign out"];
+  const handleSendEmail = async (email) => {
+    try {
+        const response = await axios.post('http://localhost:5000/exportChat', {
+            email: email
+        });
+
+        // You can handle the response here if needed.
+        console.log(response.data);
+
+    } catch (error) {
+        console.error("Error sending email:", error);
+    }
+  };
+
+  const menuOptions = [
+    { title: 'Dashboard', link: '/dashboard', icon: <GridViewSharpIcon style={{ fontSize:25, color: 'black'}} />},
+    { title: 'Settings', link: '/dashboard/settings', icon: <SettingsIcon style={{ fontSize:25, color: 'black'}} /> },
+    { title: 'Profile', link: '/dashboard/profile', icon: <PersonIcon style={{ fontSize: 25, color: 'black' }} /> },
+    { title: 'Sign out', link: '/logout', icon: <ExitToAppIcon style={{ fontSize: 25, color: 'black' }} /> },
+  ];
+
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [isHistoryNavigation, setIsHistoryNavigation] = useState(false);
   
+  const {
+    inputText,
+    handleInputChange,
+    chatHistory,
+    loading,
+    handleSubmit,
+    handleKeyDown,
+    clearChatHistory,
+    handleFollowUp,
+  } = useChatHandler();
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    handleSubmit(inputText);
+  };
+
   return (
     <>
-      <Box 
-        sx={{ 
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          minHeight: '100vh', 
-          width: '100%',
-          backgroundImage: 'linear-gradient(to bottom, #4568dc, #b06ab3)', 
-          backgroundRepeat: 'no-repeat', 
-          backgroundSize: 'cover',
-          zIndex: -1
-        }}
-      />
-      <Box 
-        sx={{ 
-          position: 'absolute',
-          top: '84px', 
-          left: '10px', 
-          right: '10px', 
-          height: '85vh', 
-          backgroundColor:'transparent',
-          borderRadius:'15px',
-        }}
-      >
+          <Navbar />
+          <Box 
+            sx={{ 
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              minHeight: '100vh', 
+              width: '100%',
+              backgroundImage: 'linear-gradient(to bottom, #1D5B79, #1D5B79)', 
+              backgroundRepeat: 'no-repeat', 
+              backgroundSize: 'cover',
+              zIndex: -1
+            }}
+          />
+          <Box 
+            sx={{ 
+              position: 'absolute',
+              top: '84px', 
+              left: '10px', 
+              right: '10px', 
+              height: '85vh', 
+              backgroundColor:'transparent',
+              borderRadius:'15px',
+            }}
+          >
         <Grid container sx={{ backgroundColor: 'transparent', flexGrow: 1, height: '100%', borderRadius:'15px'}}>
           <Grid item xs={3}>
-            <Box sx={{ borderRadius: '15px', p:2, marginRight:'10px', height:'calc(100%)', backgroundColor: 'rgba(255, 255, 255, 0.7)', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
-              <List sx={{backgroundColor:"white", borderRadius:"15px"}}>
+            <Box 
+              sx={{ 
+                borderRadius: '15px', 
+                p:2, 
+                marginRight:'10px', 
+                height:'calc(100%)', 
+                backgroundColor: 'rgba(255, 255, 255, 0.7)', 
+                boxSizing: 'border-box', 
+                display: 'flex', 
+                flexDirection: 'column', 
+                justifyContent: 'space-between' 
+              }}
+            >
+              <List sx={{backgroundColor:"white", borderRadius:"15px", mb: 2}}>
                 {menuOptions.map((option, index) => (
-                  <ListItem button key={index}>
-                    <ListItemText primary={option} />
+                  <ListItem button key={index} component={Link} to={option.link}>
+                    <ListItemIcon>
+                      {option.icon}
+                    </ListItemIcon>
+                    <ListItemText primary={option.title} />
                   </ListItem>
                 ))}
               </List>
+              <Box 
+                sx={{ 
+                  display: 'flex', 
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  p:1, 
+                  backgroundColor:'white', 
+                  borderRadius: '15px',
+                  marginBottom: 'auto' // Pushes items below it to the bottom
+                }}
+              >
+                <Typography variant="body2" sx={{fontWeight: 'bold', mb: 1, paddingLeft: '3px'}}>
+                    Export chat as PDF
+                </Typography>
+                <Box sx={{width: '100%', display: 'flex', alignItems: 'center'}}>
+                  <input 
+                    type="email" 
+                    placeholder="Enter your email" 
+                    style={{ 
+                      flexGrow: 1, 
+                      padding: '8px 12px', 
+                      border: '1px solid #ccc', 
+                      borderRadius: '5px', 
+                      marginRight: '10px' 
+                    }}
+                  />
+                  <IconButton color="primary" onClick={() => handleSendEmail(document.querySelector('input[type="email"]').value)}>
+                      <SendIcon />  
+                  </IconButton>
+                </Box>
+              </Box>
               <List 
-                sx={{
+                sx={{ 
                   textAlign: 'center',
                   backgroundColor:"white", 
                   borderRadius:"15px",
                 }}
               >
                 <ListItem button>
-                <ListItemText primary={<Typography sx={{ fontSize: '14px' }}>Terms and Conditions</Typography>} />
+                  <ListItemText primary={<Typography sx={{ fontSize: '14px' }}>Terms and Conditions</Typography>} />
                 </ListItem>
               </List>
-
-
             </Box>
           </Grid>
-          <Grid container spacing={0} sx={{height: '100%', boxSizing: 'border-box'}} xs={9}>
-            <Box sx={{ 
-              borderRadius: '15px', 
-              p: 2, 
-              flexGrow: 1, 
-              backgroundColor: 'rgba(255, 255, 255, 0.8)', 
-              boxSizing: 'border-box'
-            }}>
+
+          
+            <Grid item container spacing={0} sx={{height: '100%', boxSizing: 'border-box'}} xs={9}>
+              <Box sx={{ 
+                borderRadius: '15px', 
+                p: 2, 
+                marginLeft: '10px', 
+                flexGrow: 1, 
+                backgroundColor: 'rgba(255, 255, 255, 0.8)', 
+                boxSizing: 'border-box',
+                display: 'flex', // Make this a flex container
+                flexDirection: 'column' // Column direction
+              }}>
+                <Box sx={{ flexGrow: 1, overflow: 'auto' }} className="custom-scrollbar">
+                  {chatHistory.length === 0 && !loading && <StartCard inputText={inputText} />}
+                  <ChatHistory chatHistory={chatHistory} handleFollowUp={handleFollowUp} />
+                </Box>
+                <Box sx={{ mt:'10px' }}>
+                  <ChatInput
+                    inputText={inputText}
+                    handleInputChange={handleInputChange}
+                    handleKeyDown={handleKeyDown}
+                    handleFormSubmit={handleFormSubmit}
+                    loading={loading}
+                    clearChatHistory={clearChatHistory}
+                  />
+              </Box>
             </Box>
           </Grid>
         </Grid>
       </Box>
-      <Outlet />
-    </>
-  );
+    <Outlet />
+  </>
+);
 };
 
 export default ChatPage;

web_app/frontend/src/pages/CityPage.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText, ListItemIcon } from '@mui/material';
+import { Box } from '@mui/system';
+import { Link, Outlet } from 'react-router-dom';
+import ChatIcon from '@mui/icons-material/Chat';
+import PieChartIcon from '@mui/icons-material/PieChart';
+import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
+import MapIcon from '@mui/icons-material/Map';
+import BookIcon from '@mui/icons-material/Book';
+
+import GridViewSharpIcon from '@mui/icons-material/GridViewSharp';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PersonIcon from '@mui/icons-material/Person';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+
+import Navbar from '../components/Navbar';
+import Map3D from '../components/Map3D';
+
+
+const CityPage = () => {
+
+  const services = [
+    { title: 'ChatBot', link: '/dashboard/chat', icon: <ChatIcon style={{ fontSize: 60 }} /> },
+    { title: 'Statistics and Charts', link: '/dashboard/stats', icon: <PieChartIcon style={{ fontSize: 60 }} /> },
+    { title: '3D Models', link: '/dashboard/3dmodels', icon: <ThreeDRotationIcon style={{ fontSize: 60 }} /> },
+    { title: 'Useful Resources', link: '/dashboard/resources', icon: <BookIcon style={{ fontSize: 60 }} /> },
+  ];
+
+  const menuOptions = [
+    { title: 'Dashboard', link: '/dashboard', icon: <GridViewSharpIcon style={{ fontSize:25, color: 'black'}} />},
+    { title: 'Settings', link: '/dashboard/settings', icon: <SettingsIcon style={{ fontSize:25, color: 'black'}} /> },
+    { title: 'Profile', link: '/dashboard/profile', icon: <PersonIcon style={{ fontSize: 25, color: 'black' }} /> },
+    { title: 'Sign out', link: '/logout', icon: <ExitToAppIcon style={{ fontSize: 25, color: 'black' }} /> },
+  ];
+  
+  return (
+    <>
+      <Navbar />
+      <Box 
+        sx={{ 
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          minHeight: '100vh', 
+          width: '100%',
+          backgroundImage: 'linear-gradient(to bottom, #1D5B79, #1D5B79)', 
+          backgroundRepeat: 'no-repeat', 
+          backgroundSize: 'cover',
+          zIndex: -1
+        }}
+      />
+      <Box 
+        sx={{ 
+          position: 'absolute',
+          top: '84px', 
+          left: '10px', 
+          right: '10px', 
+          height: '85vh', 
+          backgroundColor:'transparent',
+          borderRadius:'15px',
+        }}
+      >
+        <Grid container sx={{ backgroundColor: 'transparent', flexGrow: 1, height: '100%', borderRadius:'15px'}}>
+          <Grid item xs={3}>
+            <Box sx={{ borderRadius: '15px', p:2, marginRight:'10px', height:'calc(100%)', backgroundColor: 'rgba(255, 255, 255, 0.7)', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
+              <List sx={{backgroundColor:"white", borderRadius:"15px"}}>
+                {menuOptions.map((option, index) => (
+                  <ListItem button key={index} component={Link} to={option.link}>
+                    <ListItemIcon>
+                      {option.icon}
+                    </ListItemIcon>
+                    <ListItemText primary={option.title} />
+                  </ListItem>
+                ))}
+              </List>
+              <List 
+                sx={{ 
+                  textAlign: 'center',
+                  backgroundColor:"white", 
+                  borderRadius:"15px",
+                }}
+              >
+                <ListItem button>
+                <ListItemText primary={<Typography sx={{ fontSize: '14px' }}>Terms and Conditions</Typography>} />
+                </ListItem>
+              </List>
+            </Box>
+          </Grid>
+          <Grid item container spacing={0} sx={{height: '100%', boxSizing: 'border-box'}} xs={9}>
+            <Box sx={{ 
+              borderRadius: '15px', 
+              p: 2, 
+              marginLeft: '10px', 
+              flexGrow: 1, 
+              backgroundColor: 'rgba(255, 255, 255, 0.8)', 
+              boxSizing: 'border-box',
+              display: 'flex',
+              width: '100%',
+              height: '100%',
+            }}>
+              <Map3D />
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+      <Outlet />
+    </>
+);
+
+}
+export default CityPage;
+

web_app/frontend/src/pages/ContactPage.jsx

@@ -2,23 +2,25 @@ import React from 'react';
 import { Container, Typography, Button } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { Box } from '@mui/system';
+import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
 
 const ContactPage = () => {
   return (
     <>
+      <Navbar />
       <Box 
-      sx={{ 
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        minHeight: '100vh', 
-        width: '100%',
-        backgroundImage: 'linear-gradient(to bottom, #4568dc, #b06ab3)', 
-        backgroundRepeat: 'no-repeat', 
-        backgroundSize: 'cover',
-        zIndex: -1
-      }}
+        sx={{ 
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          minHeight: '100vh', 
+          width: '100%',
+          backgroundImage: 'linear-gradient(to bottom, #1D5B79, #1D5B79)', 
+          backgroundRepeat: 'no-repeat', 
+          backgroundSize: 'cover',
+          zIndex: -1
+        }}
       />
       <Box sx={{ 
         position: 'absolute',

web_app/frontend/src/pages/DashboardPage-new.jsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText } from '@mui/material';
+import { Box } from '@mui/system';
+import { Link } from 'react-router-dom';
+import ChatIcon from '@mui/icons-material/Chat';
+import PieChartIcon from '@mui/icons-material/PieChart';
+import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
+import BookIcon from '@mui/icons-material/Book';
+import './DashboardPage.css';
+import Navbar from '../components/Navbar';
+
+const DashboardPage = () => {
+
+  const services = [
+    { title: 'ChatBot', link: '/dashboard/chat', icon: <ChatIcon className="services-card-icon" /> },
+    { title: 'Statistics and Charts', link: '/dashboard/stats', icon: <PieChartIcon className="services-card-icon" /> },
+    { title: '3D Models', link: '/dashboard/3dmodels', icon: <ThreeDRotationIcon className="services-card-icon" /> },
+    { title: 'Useful Resources', link: '/dashboard/resources', icon: <BookIcon className="services-card-icon" /> },
+  ];
+
+  const menuOptions = ["Settings", "Profile", "Sign out"];
+  
+  const [colors, setColors] = useState({
+    bgColor: '',
+    fontColor: '',
+  });
+  
+  useEffect(() => {
+    document.documentElement.classList.add('light-theme');
+    
+    const updateColors = () => {
+      const computedStyle = getComputedStyle(document.documentElement);
+      const bgColor = computedStyle.getPropertyValue('--primary').trim();
+      const fontColor = computedStyle.getPropertyValue('--text').trim();
+      
+      setColors({ bgColor, fontColor });
+    };
+    
+    const toggleTheme = (event) => {
+      if (event.ctrlKey && event.key === 'q') {
+        document.documentElement.classList.toggle('light-theme');
+        document.documentElement.classList.toggle('dark-theme');
+        
+        updateColors();
+      }
+    };
+    
+    window.addEventListener('keydown', toggleTheme);
+    updateColors();
+      return () => {
+      window.removeEventListener('keydown', toggleTheme);
+    };
+  }, []);
+  
+
+  return (
+    <>
+      <Navbar bgColor={colors.bgColor} fontColor={"#102317"}/>
+      <Box className="dashboard-background" />
+      <Box className="main-container">
+        <Grid container className="main-grid">
+
+          {/* Menu Grid */}
+          <Grid item xs={3} className="menu-grid">
+            <Box className="menu-box">
+              <List className="menu-list-1">
+                {menuOptions.map((option, index) => (
+                  <ListItem button key={index}>
+                    <ListItemText primary={option} />
+                  </ListItem>
+                ))}
+              </List>
+              <List className="menu-list-2">
+                <ListItem button>
+                  <ListItemText primary={<Typography className="menu-list-item">Terms and Conditions</Typography>} />
+                </ListItem>
+              </List>
+            </Box>
+          </Grid>
+
+          <Grid item container spacing={0} className="services-grid" xs={9}>
+            {services.map((service, index) => (
+              <Grid item xs={6} className={"services-grid-item"} key={index}>
+                <Box className={`services-box services-box-${index}`}>
+                  <Card className={"services-card"}>
+                    <CardActionArea component={Link} to={service.link} className={"services-card-action-area"}>
+                      <CardContent className="services-card-content">
+                        {service.icon}
+                        <Typography variant="body1" className="services-card-typography">{service.title}</Typography>
+                      </CardContent>
+                    </CardActionArea>
+                  </Card>
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+      </Box>
+    </>
+);
+
+};
+export default DashboardPage;
+

web_app/frontend/src/pages/DashboardPage-old.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText, ListItemIcon } from '@mui/material';
+import { Box } from '@mui/system';
+import { Link } from 'react-router-dom';
+import ChatIcon from '@mui/icons-material/Chat';
+import PieChartIcon from '@mui/icons-material/PieChart';
+import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
+import MapIcon from '@mui/icons-material/Map';
+import BookIcon from '@mui/icons-material/Book';
+
+import GridViewSharpIcon from '@mui/icons-material/GridViewSharp';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PersonIcon from '@mui/icons-material/Person';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+
+import Navbar from '../components/Navbar';
+// import './DashboardPage.css';
+
+
+const DashboardPage = () => {
+
+  const services = [
+    { title: 'Chat Assistant', link: '/dashboard/chat', icon: <ChatIcon style={{ fontSize: 60 }} /> },
+    { title: 'Reports and plans', link: '/dashboard/reports', icon: <PieChartIcon style={{ fontSize: 60 }} /> },
+    { title: 'My city in 3D', link: '/dashboard/city', icon: <MapIcon style={{ fontSize: 60 }} /> },
+    { title: 'Useful Resources', link: '/dashboard/resources', icon: <BookIcon style={{ fontSize: 60 }} /> },
+  ];
+
+  const menuOptions = [
+    { title: 'Dashboard', link: '/dashboard', icon: <GridViewSharpIcon style={{ fontSize:25, color: 'black'}} />},
+    { title: 'Settings', link: '/dashboard/settings', icon: <SettingsIcon style={{ fontSize:25, color: 'black'}} /> },
+    { title: 'Profile', link: '/dashboard/profile', icon: <PersonIcon style={{ fontSize: 25, color: 'black' }} /> },
+    { title: 'Sign out', link: '/logout', icon: <ExitToAppIcon style={{ fontSize: 25, color: 'black' }} /> },
+  ];
+  
+  return (
+    <>
+        <Navbar />
+        <Box 
+            sx={{ 
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                minHeight: '100vh', 
+                width: '100%',
+                backgroundImage: 'linear-gradient(to bottom, #1D5B79, #1D5B79)', 
+                backgroundRepeat: 'no-repeat', 
+                backgroundSize: 'cover',
+                zIndex: -1
+            }}
+        />
+        <Box 
+            sx={{ 
+                position: 'absolute',
+                top: '84px', 
+                left: '10px', 
+                right: '10px', 
+                height: '85vh', 
+                backgroundColor:'transparent',
+                borderRadius:'15px',
+            }}
+        >
+            <Grid container sx={{ backgroundColor: 'transparent', flexGrow: 1, height: '100%', borderRadius:'15px'}}>
+                {/* Menu Grid */}
+                <Grid item xs={3}>
+                    <Box sx={{ borderRadius: '15px', p:2, marginRight:'10px', height:'calc(100%)', backgroundColor: 'rgba(255, 255, 255, 0.7)', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
+                        <List sx={{backgroundColor:"white", borderRadius:"15px"}}>
+                            {menuOptions.map((option, index) => (
+                                <ListItem button key={index} component={Link} to={option.link}>
+                                    <ListItemIcon>
+                                        {option.icon}
+                                    </ListItemIcon>
+                                    <ListItemText primary={option.title} />
+                                </ListItem>
+                            ))}
+                        </List>
+                        <List 
+                            sx={{ 
+                                textAlign: 'center',
+                                backgroundColor:"white", 
+                                borderRadius:"15px",
+                            }}
+                        >
+                            <ListItem button>
+                                <ListItemText primary={<Typography sx={{ fontSize: '14px' }}>Terms and Conditions</Typography>} />
+                            </ListItem>
+                        </List>
+                    </Box>
+                </Grid>
+
+                {/* Services Grid */}
+                <Grid item container spacing={0} sx={{height: '100%', boxSizing: 'border-box'}} xs={9}>
+                    {services.map((service, index) => (
+                        <Grid item xs={6} sx={{display:'flex', flexDirection:'column'}} key={index}>
+                            <Box sx={{ 
+                                borderRadius: '15px', 
+                                p: 2, 
+                                marginLeft: '10px', 
+                                marginRight: (index % 2 !== 0) ? '0px' : '10px', 
+                                marginBottom: (index < 2) ? '10px' : '0px', 
+                                marginTop: (index >= 2) ? '10px' : '0px', 
+                                flexGrow: 1, 
+                                backgroundColor: 'rgba(255, 255, 255, 0.8)', 
+                                boxSizing: 'border-box'
+                            }}>
+                                <Card sx={{height: '100%', borderRadius: '15px'}}>
+                                    <CardActionArea component={Link} to={service.link} sx={{height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column'}}>
+                                        <CardContent sx={{textAlign: 'center'}}>
+                                            {service.icon}
+                                            <Typography variant="body1" sx={{mt: 1}}>{service.title}</Typography>
+                                        </CardContent>
+                                    </CardActionArea>
+                                </Card>
+                            </Box>
+                        </Grid>
+                    ))}
+                </Grid>
+            </Grid>
+        </Box>
+    </>
+);
+};
+
+export default DashboardPage;
+

web_app/frontend/src/pages/DashboardPage.css

@@ -0,0 +1,164 @@
+:root.dark-theme {
+  --text: #f4faf7;
+  --background: #102317;
+  --primary: #aae4c7;
+  --secondary: #060b0e;
+  --accent: #a1c2d7;
+}
+
+:root.light-theme {
+  --text: #102317;
+  --background: #f4faf7;
+  --primary: #aae4c7;
+  --secondary: #c6dae6;
+  --accent: #437a9c;
+}
+
+/* MAIN CONTAINER*/
+
+.dashboard-background {
+position: absolute;
+top: 0;
+left: 0;
+min-height: 100vh; 
+width: 100%;
+background-color: var(--background); 
+background-repeat: no-repeat; 
+background-size: cover;
+z-index: -1;
+}
+
+.main-container {
+position: absolute;
+top: 84px;
+left: 10px;
+right: 10px;
+height: 85vh;
+background-color: transparent;
+border-radius: 15px;
+}
+
+.main-grid {
+background-color: transparent;
+flex-grow: 1;
+height: 100%;
+border-radius: 15px;
+}
+
+
+/* MENU */
+
+/* .menu-grid {
+} */
+
+.menu-box {
+border-radius: 15px;
+padding: 10px;
+margin-right: 10px;
+height: calc(100%);
+background-color: var(--accent);
+box-sizing: border-box;
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+}
+
+.menu-list-1 {
+background-color: var(--secondary);
+color: var(--text);
+border-radius: 15px;
+}
+
+.menu-list-2 {
+text-align: center;
+background-color: var(--secondary);
+color: var(--text);
+border-radius: 15px;
+}
+
+.menu-list-item {
+font-size: 14px;
+}
+
+/* SERVICE DASHBOARD */
+
+.services-grid {
+height: 100%;
+box-sizing: border-box;
+}
+
+.services-grid-item {
+display: flex;
+flex-direction: column;
+}
+
+.services-box {
+border-radius: 15px;
+padding: 10px;
+margin-left: 10px;
+flex-grow: 1;
+background-color: var(--accent);
+box-sizing: border-box;
+color: var(--secondary)
+}
+
+.services-card {
+height: 100%;
+border-radius: 15px !important;
+background-color: var(--secondary) !important;
+}
+
+.services-card-action-area {
+height: 100%;
+display: flex;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+background-color: 'blue' !important;
+
+}
+
+.services-card-content {
+display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+height: 90%;
+background-color: 'blue' !important;
+
+}
+
+.services-card-typography {
+margin-top: 1;
+color: var(--text);
+}
+
+.services-card-icon {
+font-size: 60px !important;
+color: var(--text);
+}
+
+/* SERVICES GRID ITEMS */
+.services-box-0 {
+margin-right: 10px;
+margin-bottom: 10px;
+margin-top: 0px;
+}
+
+.services-box-1 {
+margin-right: 0px;
+margin-bottom: 10px;
+margin-top: 0px;
+}
+
+.services-box-2 {
+margin-right: 10px;
+margin-bottom: 0px;
+margin-top: 10px;
+}
+
+.services-box-3 {
+margin-right: 0px;
+margin-bottom: 0px;
+margin-top: 10px;
+}

web_app/frontend/src/pages/LandingPage.jsx

@@ -3,10 +3,12 @@ import { Container, Typography, Button } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { Box } from '@mui/system';
 import Footer from '../components/Footer';
+import Navbar from '../components/Navbar';
 
 const LandingPage = () => {
   return (
     <>
+      <Navbar />
       <Box 
       sx={{ 
         position: 'absolute',
@@ -31,7 +33,7 @@ const LandingPage = () => {
         <Typography variant="h2" align="center" color="white" gutterBottom>
           Building a sustainable Dublin
         </Typography>
-        <Button variant="contained" color="primary" component={Link} to="/chatbot" style={{ margin: '10px', borderRadius: '8px', backgroundColor: 'rgba(255, 255, 255, 0.2)' }}>
+        <Button variant="contained" color="primary" component={Link} to="/dashboard/chat" style={{ margin: '10px', borderRadius: '8px', backgroundColor: 'rgba(255, 255, 255, 0.2)' }}>
           <Typography style={{ textTransform: 'none', fontSize: '16px'}}>
             Try it out
           </Typography>

web_app/frontend/src/pages/{DashboardPage.jsx → ReportsPage.jsx}

@@ -1,13 +1,21 @@
 import React from 'react';
-import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText } from '@mui/material';
+import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText, ListItemIcon } from '@mui/material';
 import { Box } from '@mui/system';
-import { Link } from 'react-router-dom';
+import { Link, Outlet } from 'react-router-dom';
 import ChatIcon from '@mui/icons-material/Chat';
 import PieChartIcon from '@mui/icons-material/PieChart';
 import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
+import MapIcon from '@mui/icons-material/Map';
 import BookIcon from '@mui/icons-material/Book';
 
-const DashboardPage = () => {
+import GridViewSharpIcon from '@mui/icons-material/GridViewSharp';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PersonIcon from '@mui/icons-material/Person';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+
+import Navbar from '../components/Navbar';
+
+const ReportsPage = () => {
 
   const services = [
     { title: 'ChatBot', link: '/dashboard/chat', icon: <ChatIcon style={{ fontSize: 60 }} /> },
@@ -16,10 +24,16 @@ const DashboardPage = () => {
     { title: 'Useful Resources', link: '/dashboard/resources', icon: <BookIcon style={{ fontSize: 60 }} /> },
   ];
 
-  const menuOptions = ["Settings", "Profile", "Sign out"];
+  const menuOptions = [
+    { title: 'Dashboard', link: '/dashboard', icon: <GridViewSharpIcon style={{ fontSize:25, color: 'black'}} />},
+    { title: 'Settings', link: '/dashboard/settings', icon: <SettingsIcon style={{ fontSize:25, color: 'black'}} /> },
+    { title: 'Profile', link: '/dashboard/profile', icon: <PersonIcon style={{ fontSize: 25, color: 'black' }} /> },
+    { title: 'Sign out', link: '/logout', icon: <ExitToAppIcon style={{ fontSize: 25, color: 'black' }} /> },
+  ];
   
   return (
     <>
+      <Navbar />
       <Box 
         sx={{ 
           position: 'absolute',
@@ -27,7 +41,7 @@ const DashboardPage = () => {
           left: 0,
           minHeight: '100vh', 
           width: '100%',
-          backgroundImage: 'linear-gradient(to bottom, #4568dc, #b06ab3)', 
+          backgroundImage: 'linear-gradient(to bottom, #1D5B79, #1D5B79)', 
           backgroundRepeat: 'no-repeat', 
           backgroundSize: 'cover',
           zIndex: -1
@@ -45,17 +59,20 @@ const DashboardPage = () => {
         }}
       >
         <Grid container sx={{ backgroundColor: 'transparent', flexGrow: 1, height: '100%', borderRadius:'15px'}}>
-          <Grid item xs={3}>
+        <Grid item xs={3}>
             <Box sx={{ borderRadius: '15px', p:2, marginRight:'10px', height:'calc(100%)', backgroundColor: 'rgba(255, 255, 255, 0.7)', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
               <List sx={{backgroundColor:"white", borderRadius:"15px"}}>
                 {menuOptions.map((option, index) => (
-                  <ListItem button key={index}>
-                    <ListItemText primary={option} />
+                  <ListItem button key={index} component={Link} to={option.link}>
+                    <ListItemIcon>
+                      {option.icon}
+                    </ListItemIcon>
+                    <ListItemText primary={option.title} />
                   </ListItem>
                 ))}
               </List>
               <List 
-                sx={{
+                sx={{ 
                   textAlign: 'center',
                   backgroundColor:"white", 
                   borderRadius:"15px",
@@ -65,40 +82,24 @@ const DashboardPage = () => {
                 <ListItemText primary={<Typography sx={{ fontSize: '14px' }}>Terms and Conditions</Typography>} />
                 </ListItem>
               </List>
-
-
             </Box>
           </Grid>
           <Grid container spacing={0} sx={{height: '100%', boxSizing: 'border-box'}} xs={9}>
-            {services.map((service, index) => (
-              <Grid item xs={6} sx={{display:'flex', flexDirection:'column'}} key={index}>
-                  <Box sx={{ 
-                    borderRadius: '15px', 
-                    p: 2, 
-                    marginLeft: '10px', 
-                    marginRight: (index % 2 !== 0) ? '0px' : '10px', 
-                    marginBottom: (index < 2) ? '10px' : '0px', 
-                    marginTop: (index >= 2) ? '10px' : '0px', 
-                    flexGrow: 1, 
-                    backgroundColor: 'rgba(255, 255, 255, 0.8)', 
-                    boxSizing: 'border-box'
-                  }}>
-                  <Card sx={{height: '100%', borderRadius: '15px'}}>
-                  <CardActionArea component={Link} to={service.link} sx={{height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column'}}>
-                      <CardContent sx={{textAlign: 'center'}}>
-                        {service.icon}
-                        <Typography variant="body1" sx={{mt: 1}}>{service.title}</Typography>
-                      </CardContent>
-                    </CardActionArea>
-                  </Card>
-                </Box>
-              </Grid>
-            ))}
+            <Box sx={{ 
+              borderRadius: '15px', 
+              p: 2, 
+              marginLeft: '10px', 
+              flexGrow: 1, 
+              backgroundColor: 'rgba(255, 255, 255, 0.8)', 
+              boxSizing: 'border-box'
+            }}>
+            </Box>
           </Grid>
         </Grid>
       </Box>
+      <Outlet />
     </>
   );
 };
 
-export default DashboardPage;
+export default ReportsPage;

web_app/frontend/src/pages/ResourcesPage.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Typography, Grid, Card, CardContent, CardActionArea, IconButton, Tooltip, List, ListItem, ListItemText, ListItemIcon } from '@mui/material';
+import { Box } from '@mui/system';
+import { Link, Outlet } from 'react-router-dom';
+import ChatIcon from '@mui/icons-material/Chat';
+import PieChartIcon from '@mui/icons-material/PieChart';
+import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
+import MapIcon from '@mui/icons-material/Map';
+import BookIcon from '@mui/icons-material/Book';
+
+import GridViewSharpIcon from '@mui/icons-material/GridViewSharp';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PersonIcon from '@mui/icons-material/Person';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+
+import Navbar from '../components/Navbar';
+
+const ResourcesPage = () => {
+
+  const services = [
+    { title: 'ChatBot', link: '/dashboard/chat', icon: <ChatIcon style={{ fontSize: 60 }} /> },
+    { title: 'Statistics and Charts', link: '/dashboard/stats', icon: <PieChartIcon style={{ fontSize: 60 }} /> },
+    { title: '3D Models', link: '/dashboard/3dmodels', icon: <ThreeDRotationIcon style={{ fontSize: 60 }} /> },
+    { title: 'Useful Resources', link: '/dashboard/resources', icon: <BookIcon style={{ fontSize: 60 }} /> },
+  ];
+
+  const menuOptions = [
+    { title: 'Dashboard', link: '/dashboard', icon: <GridViewSharpIcon style={{ fontSize:25, color: 'black'}} />},
+    { title: 'Settings', link: '/dashboard/settings', icon: <SettingsIcon style={{ fontSize:25, color: 'black'}} /> },
+    { title: 'Profile', link: '/dashboard/profile', icon: <PersonIcon style={{ fontSize: 25, color: 'black' }} /> },
+    { title: 'Sign out', link: '/logout', icon: <ExitToAppIcon style={{ fontSize: 25, color: 'black' }} /> },
+  ];
+  
+  return (
+    <>
+      <Navbar />
+      <Box 
+        sx={{ 
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          minHeight: '100vh', 
+          width: '100%',
+          backgroundImage: 'linear-gradient(to bottom, #1D5B79, #1D5B79)', 
+          backgroundRepeat: 'no-repeat', 
+          backgroundSize: 'cover',
+          zIndex: -1
+        }}
+      />
+      <Box 
+        sx={{ 
+          position: 'absolute',
+          top: '84px', 
+          left: '10px', 
+          right: '10px', 
+          height: '85vh', 
+          backgroundColor:'transparent',
+          borderRadius:'15px',
+        }}
+      >
+        <Grid container sx={{ backgroundColor: 'transparent', flexGrow: 1, height: '100%', borderRadius:'15px'}}>
+        <Grid item xs={3}>
+            <Box sx={{ borderRadius: '15px', p:2, marginRight:'10px', height:'calc(100%)', backgroundColor: 'rgba(255, 255, 255, 0.7)', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
+              <List sx={{backgroundColor:"white", borderRadius:"15px"}}>
+                {menuOptions.map((option, index) => (
+                  <ListItem button key={index} component={Link} to={option.link}>
+                    <ListItemIcon>
+                      {option.icon}
+                    </ListItemIcon>
+                    <ListItemText primary={option.title} />
+                  </ListItem>
+                ))}
+              </List>
+              <List 
+                sx={{ 
+                  textAlign: 'center',
+                  backgroundColor:"white", 
+                  borderRadius:"15px",
+                }}
+              >
+                <ListItem button>
+                <ListItemText primary={<Typography sx={{ fontSize: '14px' }}>Terms and Conditions</Typography>} />
+                </ListItem>
+              </List>
+            </Box>
+          </Grid>
+          <Grid container spacing={0} sx={{height: '100%', boxSizing: 'border-box'}} xs={9}>
+            <Box sx={{ 
+              borderRadius: '15px', 
+              p: 2, 
+              marginLeft: '10px', 
+              flexGrow: 1, 
+              backgroundColor: 'rgba(255, 255, 255, 0.8)', 
+              boxSizing: 'border-box'
+            }}>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+      <Outlet />
+    </>
+  );
+};
+
+export default ResourcesPage;

web_app/frontend/src/pages/scrollbar.css

@@ -0,0 +1,20 @@
+.custom-scrollbar {
+height: 500px; /* Set your desired height */
+overflow: auto;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+width: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+background: #f1f1f1;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+background: #1D5B79;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+background: #1D5B79;
+}

web_app/frontend/vite.config.js

@@ -1,14 +1,18 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  build: {
+    rollupOptions: {
+      external: ['@deck.gl/extensions']
+    }
+  },
   server: {
     host: true,
     port: 3000,
-     watch: {
-       usePolling: true
-     }
+    watch: {
+      usePolling: true
+    }
   }
-})
+});