Updated Pages

frontend/application.py

@@ -2,13 +2,14 @@
 from classes.auth import Auth
 import dash_core_components as dcc
 from dash.dependencies import Input, Output, State
-from utils.constants import home_page_location, login_location, dashboard_location, breakdown_location, news_location
+from utils.constants import home_page_location, login_location, dashboard_location, breakdown_location, news_location, faqs_location
 
 from pages.home import home
 from pages.login import login
 from pages.dashboard import dashboard
 from pages.breakdown import breakdown
 from pages.news import news
+from pages.faqs import faqs
 
 from layout.sidebar.sidebar_callbacks import toggle_collapse, toggle_classname
 
@@ -23,21 +24,26 @@
   Input("url", "pathname"),
   State("url", "pathname")
 )
-
 def render_page_content(pathname, state_path):
-    if pathname == login_location:
-        return login.layout
-    if pathname == home_page_location:
+    if pathname in [home_page_location, login_location, faqs_location,news_location]:
+        if pathname == home_page_location:
             return home.layout
-    if Auth.is_authenticated():
+        if pathname == login_location:
+            return login.layout
+        if pathname == faqs_location:
+            return faqs.layout
+        if pathname == news_location:
+            return news.layout
+
+    elif Auth.is_authenticated():
         if pathname == dashboard_location:
             return dashboard.layout
         if pathname == breakdown_location:
             return breakdown.layout
-        if pathname == news_location:
-            return news.layout    
+
     else:
         return dcc.Link("This page is only available when you are logged in. Click this to head back to login.", href=login_location, style=unauthenticatedStyle)
 
+
 if __name__ == "__main__":
     application.run(port=8080, debug=True, load_dotenv=True)

frontend/assets/style.css

@@ -3,6 +3,17 @@
   padding: 10% 0%;
 }
 
+.faq-card {
+  background-color: white;
+  border: 1px solid black;
+  margin-bottom: 10px;
+}
+
+.faq-button {
+  width: 100%;
+  text-align: left;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;

frontend/layout/sidebar/sidebar.py

@@ -6,6 +6,7 @@
 from utils.constants import dashboard_location
 from utils.constants import breakdown_location
 from utils.constants import news_location
+from utils.constants import faqs_location
 
 # we use the Row and Col components to construct the sidebar header
 # it consists of a title, and a toggle, the latter is hidden on large screens
@@ -70,6 +71,7 @@
                     dbc.NavLink("Financial Breakdown", href=breakdown_location, active="exact", className="nav-link",id="brea-link"),
                     dbc.NavLink("News", href=news_location, active="exact", className="nav-link",id="news-link"),
                     dbc.NavLink("Logout", href=login_location, active="exact", className="nav-link",id='logout-element-to-hide'),
+                    dbc.NavLink("Faqs", href=faqs_location, active="exact", className="nav-link")
                 ],
                 vertical=True,
                 pills=True,

frontend/pages/faqs/faqs.py

@@ -0,0 +1,59 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from dash.dependencies import Input, Output, State
+from app import app
+
+def generate_collapse_card(question, answer, id):
+    return dbc.Card([
+        dbc.CardHeader(
+            html.H2(
+                dbc.Button(
+                    question,
+                    color="link",
+                    id=f"button-{id}",
+                    style={"color": "black"},
+                    className="faq-button",
+                )
+            ),
+        ),
+        dbc.Collapse(
+            dbc.CardBody(answer),
+            id=f"collapse-{id}",
+        ),
+    ],
+    className="faq-card",
+    )
+
+layout = dbc.Container(
+    [
+        dbc.Row(
+            [
+                dbc.Col(
+                    [
+                        html.Div(
+                            html.H1("Frequently Asked Questions", id="faq_header", style={"textAlign": "center"}),
+                        ),
+                        html.Hr(),
+                        generate_collapse_card("How do we interact with chatbot?", "This is the answer to question 1.", 1),
+                        generate_collapse_card("How do I connect to my Bank Account?", "This is the answer to question 2.", 2),
+                        # Add as many questions as you need
+                    ],
+                    id="faq_col",
+                ),
+            ],
+            id="faq",
+        ),
+    ]
+)
+
+for i in range(1, 3):  # replace 3 with the number of questions + 1
+    @app.callback(
+        Output(f"collapse-{i}", "is_open"),
+        Output(f"button-{i}", "style"),
+        [Input(f"button-{i}", "n_clicks")],
+        [State(f"collapse-{i}", "is_open")],
+    )
+    def toggle_collapse(n, is_open):
+        if n:
+            return not is_open, {"color": "white" if not is_open else "black", "background-color": "black" if not is_open else "white"}
+        return is_open, {"color": "black", "background-color": "white"}

frontend/pages/news/data.py

@@ -1,20 +1,20 @@
 news_data = [
     {
         'id': 1,
-        'title': 'First news article',
-        'description': 'This is the first news article',
+        'title': 'T1 DOLFIN READY TO GO',
+        'description': 'The T1 DOLFIN project is fully prepared and ready to begin.',
         'content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
     },
     {
         'id': 2,
-        'title': 'Second news article',
-        'description': 'This is the second news article',
+        'title': 'ChatBot ready to enhance user experience',
+        'description': 'Making Conversations Smarter and More Engaging',
         'content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
     },
     {
         'id': 3,
-        'title': 'Third news article',
-        'description': 'This is the third news article',
+        'title': 'AI powered solution',
+        'description': 'Banking made easy',
         'content': ''
     }
 ]

frontend/utils/constants.py

@@ -6,5 +6,6 @@
 dashboard_location="/dashboard"
 breakdown_location="/breakdown"
 news_location="/news"
+faqs_location="/faqs"
 
 TIMEOUT = 60