main app shell and overview page

.gitignore

@@ -0,0 +1,5 @@
+# ignore virtual environment
+chartbot/
+
+# ignore python cache
+__pycache__/

app.py

@@ -0,0 +1,74 @@
+import dash
+from dash import html, _dash_renderer
+import dash_mantine_components as dmc
+import dash_bootstrap_components as dbc
+ 
+_dash_renderer._set_react_version("18.2.0")
+
+app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.BOOTSTRAP])
+
+header = dmc.Flex(
+    [
+        dmc.Image(src="http://geneaipilot.thermofisher.com/assets/tfs.png",
+            h=35, w=185, className="ps-3 position-absolute top-50 start-0 translate-middle-y"),
+        dmc.Anchor("EmPower.AI", size="xl", fw=530, 
+                                    href="/", underline="never", c="black",
+                                    style={"margin-left": 210},
+                                    className="position-absolute top-50 start-0 translate-middle-y"),
+    ],
+    direction={"base": "column", "sm": "row"},
+    gap={"base": "sm", "sm": "lg"},
+    justify={"sm": "center"},
+)
+
+left_nav_bar = html.Div(
+    [
+        dmc.NavLink(
+            label="Overview",
+            href="/",
+            active=True
+        ),
+        dmc.NavLink(
+            label="ChaRtBot",
+            #leftSection=get_icon(icon="tabler:fingerprint"),
+            childrenOffset=28,
+            opened=True,
+            children=[
+                dmc.NavLink(label="English Women's Football Matches (2011 - 2024)", description="Demo data",),
+                dmc.NavLink(label="US Presidential Elections (1976-2020)", description="Demo data",),
+                dmc.NavLink(label="Space Missions (2000 - 2022)", description="Demo data",),
+                dmc.NavLink(label="Amazon Purchases 2021 Sample", description="Demo data",),
+                dmc.NavLink(label="Upload your data")
+            ],
+        ),
+        dmc.NavLink(
+            label="Product roadmap"
+        ),
+        dmc.NavLink(
+            label="FAQs",
+            href="/faqs",
+        )
+    ], 
+    style={"width": 240, "margin-top": 10, "margin-left": 10, "font-weight": "bold"}
+)
+
+app_shell = dmc.AppShell(
+    [
+        dmc.AppShellHeader(header),
+        dmc.AppShellNavbar(left_nav_bar),
+        dmc.AppShellMain([dash.page_container]),
+    ],
+    header={"height": 70},
+    padding="xl",
+    zIndex=1400,
+    navbar={
+        "width": 260,
+        "breakpoint": "sm",
+        "collapsed": {"mobile": True},
+    },
+)
+
+app.layout = dmc.MantineProvider([app_shell])
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

assets/custom.css

@@ -0,0 +1,8 @@
+.app-title {
+    font-size: 3em;
+    font-family: Helvetica;
+}
+
+body, a, h1, h2, h3, h4, h5, h6  {
+    font-family: Helvetica;
+}

pages/overview.py

@@ -0,0 +1,30 @@
+import dash
+from dash import html
+import dash_mantine_components as dmc
+import dash_bootstrap_components as dbc
+
+from utils import components
+
+dash.register_page(__name__, path='/', name='Overview', order=1)
+
+layout = dbc.Container([
+    dbc.Col([
+        dmc.Title("EmPower.AI - A cost-effective reporting ChaRtBot", className="app-title"),
+        html.Hr(),
+        dmc.Text("Like a ChatBot, wherein the user can upload a CSV file and enter a prompt, or ask a question.",
+                 size="xl"),
+        dmc.Text("Unlinke a ChatBot which responds in plain text, this ChaRtBot will generate data visualizations (charts) in response to the user's query.",
+                 size="xl"),                
+
+        html.Br(),
+
+        dmc.Group([
+            components.summary_card("Try the ChaRtBot", "Test the ChaRtBot with popular pre-defined datasets or upload your own .csv or .xlsx data.", isButtonMenu=True),
+
+            components.summary_card("Roadmap for EmPower.AI", "Check out the product roadmap for EmPower.AI and how it can help Thermo Fisher Scientific Inc."),
+
+            components.summary_card("FAQs", "Check out the answers to some of the Frequently Asked Questions regarding EmPower.AI."),     
+
+        ], justify="center"),       
+    ])
+])

utils/components.py

@@ -0,0 +1,39 @@
+import dash_mantine_components as dmc
+
+def summary_card(
+        title: str,
+        description: str,
+        isButtonMenu: bool = False
+    ) -> dmc.Card:
+    if isButtonMenu:
+        return dmc.Card([
+            dmc.CardSection([
+                dmc.Text(title, size="xl", fw=500),
+                dmc.Divider(variant="solid"),
+                dmc.Space(h="sm"),
+                dmc.Text(description, size="sm"),
+                dmc.Space(h="md"),
+                dmc.Menu([
+                    dmc.MenuTarget(dmc.Button("Get Started", color="#E71316", className="float-end")),
+                    dmc.MenuDropdown([
+                        dmc.MenuItem("English Women's Football Matches (2011 - 2024)", href="/chartbot/football"),
+                        dmc.MenuItem("US Presidential Elections (1976-2020)", href="/chartbot/us-elections"),
+                        dmc.MenuItem("Space Missions (2000 - 2022)", href="/chartbot/space-missions"),
+                        dmc.MenuItem("Amazon Purchases 2021 Sample", href="/chartbot/amazon-purchases"),
+                        dmc.MenuItem("Upload your data", href="/chartbot")
+                    ])
+                ])
+            ], style={"margin": 10})                    
+        ], withBorder=True, radius="md", w=320)
+    
+    else:
+        return dmc.Card([
+            dmc.CardSection([
+                dmc.Text(title, size="xl", fw=500),
+                dmc.Divider(variant="solid"),
+                dmc.Space(h="sm"),
+                dmc.Text(description, size="sm"),
+                dmc.Space(h="md"),
+                dmc.Button("Get Started", color="#E71316", className="float-end")
+            ], style={"margin": 10})                    
+        ], withBorder=True, radius="md", w=320)