Make UI better

src/main.css

@@ -5,4 +5,49 @@ strong, b {
 
 .css-179jfzq .sidebar{
     height: auto;
+}
+
+.content{
+    margin-left: 5%;
+    margin-right: 5%;
+}
+
+.header.sticky{
+    overflow:auto;
+}
+
+.header-content{
+    margin-left: 2%;
+    margin-right: 7%;
+}
+
+.MuiButtonBase-root.MuiTab-root{
+    border: 1px solid var(--color-primary); /* Thin line with 1px width, change color as needed */
+    border-radius: 25px; /* Adjust this value for more or less rounding */
+    padding: 10px; /* Optional: adds padding inside the rounded border */
+    margin: 10px;
+    text-transform: none;
+    width: 12%;
+}
+
+.MuiButtonBase-root.MuiTab-root.Mui-selected{
+    background-color: var(--color-primary);
+    color: white;
+}
+
+
+.css-6fy833 p{
+    opacity: 0;
+}
+
+
+
+.css-6fy833 .MuiToggleButtonGroup-root{
+    top: 0.1rem !important;
+    right: 0.5rem ! important;
+    position: fixed;
+}
+
+.taipy-chart{
+    margin:3px;
 }

src/main.py

@@ -40,4 +40,4 @@
     # #############################################################################
 
     gui = Gui(pages=pages)
-    gui.run(title="Sales Prediction")
+    gui.run(title="Sales Prediction", margin="0px")

src/pages/root.py

@@ -15,7 +15,57 @@
 
 Please refer to https://docs.taipy.io/en/latest/manuals/gui/pages for more details.
 """
+import taipy.gui.builder as tgb
 
-from taipy.gui import Markdown
 
-root_page = Markdown("pages/root.md")
+def creates_pages(pages):
+    return [(f"/{page}", page.replace("_", " ").title()) for page in list(pages)[1:]]
+
+
+with tgb.Page() as root_page:
+    with tgb.part("header sticky"):
+        with tgb.layout(
+            "110px 10rem 1 9rem",
+            columns__mobile="110px 10rem 1 35rem",
+            class_name="header-content",
+        ):
+            tgb.image("favicon.png", width="50px")
+            tgb.text("Sales **Dashboard**", mode="md")
+            tgb.navbar(
+                lov="{creates_pages(pages)}",
+            )
+
+            tgb.text(
+                "Welcome **back**!",
+                mode="md",
+            )
+
+    with tgb.part("content"):
+        with tgb.layout(columns="1 1 1"):
+            with tgb.part():
+                tgb.text("# **Total** sales:", mode="md")
+                tgb.text(lambda data: f"### US $ {int(data['Total'].sum())}", mode="md")
+
+            with tgb.part():
+                tgb.text("# Average **Rating**:", mode="md")
+                tgb.text(
+                    lambda data: f"### {round(data['Rating'].mean(), 1)}", mode="md"
+                )
+
+            with tgb.part():
+                tgb.text("# Average **Sales**:", mode="md")
+                tgb.text(
+                    lambda data: f"### US $ {round(data['Total'].mean(), 2)}", mode="md"
+                )
+
+        with tgb.expandable(
+            title="Data",
+            expanded=False,
+        ):
+            tgb.table("{data}")
+
+        tgb.html("br")
+
+        tgb.content()
+
+        tgb.toggle(theme=True)