Reflex Dashboard

dashboard/.gitignore

@@ -0,0 +1,5 @@
+*.db
+*.py[cod]
+.web
+__pycache__/
+assets/external/

dashboard/dashboard/dashboard.py

@@ -0,0 +1,6 @@
+import reflex as rx
+
+from .dashboardApp.main import dashboardApp
+
+app = rx.App(theme=rx.theme(accent_color="violet", scaling="95%"))
+app.add_page(dashboardApp(), route="/", title="Reflex Dashboard")

dashboard/dashboard/dashboardApp/main.py

@@ -0,0 +1,33 @@
+import reflex as rx
+from typing import Callable
+
+from .style import DashboardAppStyle
+
+from ..dashboardComponents.sideBar.main import dashboardSidebar
+from ..dashboardComponents.navBar.main import dashboardNavbar
+from ..dashboardComponents.statBar.main import dashboardStatbar
+from ..dashboardComponents.trafficBar.main import dashboardTrafficbar
+from ..dashboardComponents.expenseBar.main import dashboardExpensebar
+from ..dashboardComponents.employeeTable.main import dashbaordEmployee
+
+dashboardContentArea: Callable[[], rx.vstack()] = lambda: rx.vstack(
+    dashboardNavbar(),
+    dashboardStatbar(),
+    rx.hstack(
+        dashboardTrafficbar(),
+        dashboardExpensebar(),
+        **DashboardAppStyle.trafficAndExpenses,
+    ),
+    rx.box(dashbaordEmployee(), width="100%", padding="1em"),
+    **DashboardAppStyle.contentArea,
+)
+
+# ... Main app function here ...
+dashboardApp: Callable[[], rx.hstack] = lambda: rx.hstack(
+    # ... App side bar ...
+    dashboardSidebar(),
+    # ... App main content area ...
+    dashboardContentArea(),
+    # ... App style object ...
+    **DashboardAppStyle.base,
+)

dashboard/dashboard/dashboardApp/style.py

@@ -0,0 +1,41 @@
+from dataclasses import dataclass, field
+from typing import Dict
+
+
+@dataclass
+class DashboardAppStyle:
+    base: Dict[str, str] = field(
+        default_factory=lambda: {
+            "width": "100%",
+            "height": "100vh",
+            "spacing": "0",
+            "overscroll_behavior": "none",
+        }
+    )
+
+    contentArea: Dict[str, str] = field(
+        default_factory=lambda: {
+            "width": "100%",
+            "height": "100%",
+            "position": "relative",
+            "overflow": "scroll",
+            "spacing": "2",
+        }
+    )
+
+    trafficAndExpenses: Dict[str, str] = field(
+        default_factory=lambda: {
+            "width": "100%",
+            "height": "100%",
+            "display": "grid",
+            "grid_template_columns": [
+                f"repeat({i}, minmax(0, 1fr))" for i in [1, 1, 1, 1, 4, 4]
+            ],
+            "padding": "1em",
+            "row_gap": "1em",
+            "column_gap": "1em",
+        }
+    )
+
+
+DashboardAppStyle: DashboardAppStyle = DashboardAppStyle()

dashboard/dashboard/dashboardComponents/employeeTable/main.py

@@ -0,0 +1,165 @@
+from typing import Callable, Dict
+
+import reflex as rx
+
+
+employeeDataSet: list[dict[str, str]] = [
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
+        "name": "Alice Skydancer",
+        "job": "Engineer",
+        "email": "[email protected]",
+        "rate": "34",
+        "phone": "+1 213-555-0173",
+    },
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-6.png",
+        "name": "Frank Codebreaker",
+        "job": "Developer",
+        "email": "[email protected]",
+        "rate": "58",
+        "phone": "+1 310-555-0192",
+    },
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png",
+        "name": "Diana Windwalker",
+        "job": "Architect",
+        "email": "[email protected]",
+        "rate": "72",
+        "phone": "+1 415-555-0124",
+    },
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-11.png",
+        "name": "Nina Seawatcher",
+        "job": "Manager",
+        "email": "[email protected]",
+        "rate": "93",
+        "phone": "+1 408-555-0165",
+    },
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-9.png",
+        "name": "Sara Cloudshaper",
+        "job": "Engineer",
+        "email": "[email protected]",
+        "rate": "50",
+        "phone": "+1 323-555-0112",
+    },
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-10.png",
+        "name": "Tom Trailfinder",
+        "job": "Designer",
+        "email": "[email protected]",
+        "rate": "27",
+        "phone": "+1 805-555-0147",
+    },
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-12.png",
+        "name": "Oliver Hillclimber",
+        "job": "Developer",
+        "email": "[email protected]",
+        "rate": "65",
+        "phone": "+1 909-555-0189",
+    },
+    {
+        "avatar": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png",
+        "name": "Eli Stonecarver",
+        "job": "Manager",
+        "email": "[email protected]",
+        "rate": "88",
+        "phone": "+1 626-555-0186",
+    },
+]
+
+
+employeTableMenuItem: Callable[[str, str, str], rx.hstack] = (
+    lambda name, tag, color: rx.hstack(
+        rx.icon(tag=tag, size=14),
+        rx.text(name, font_size="11px", color_scheme="gray"),
+        color=color,
+        width="100%",
+        justify="start",
+        align="center",
+    )
+)
+
+emplyeeTableMenu: Callable[[], rx.menu.root] = lambda: rx.menu.root(
+    rx.menu.trigger(
+        rx.icon(tag="ellipsis", size=14, cursor="pointer"),
+    ),
+    rx.menu.content(
+        rx.menu.item(employeTableMenuItem("Send message", "mails", "inherit")),
+        rx.menu.item(employeTableMenuItem("Add note", "notepad-text", "inherit")),
+        rx.menu.item(employeTableMenuItem("Terminate Contract", "trash-2", "red")),
+        size="1",
+    ),
+)
+
+
+employeeDataRow: Callable[[Dict[str, str]], rx.table.row] = lambda data: rx.table.row(
+    rx.table.cell(
+        rx.hstack(
+            rx.avatar(src=data["avatar"], size="2", radius="full"),
+            rx.vstack(
+                rx.text(data["name"], font_size="12px", weight="medium"),
+                rx.text(
+                    data["job"],
+                    color_scheme="gray",
+                    font_size="10px",
+                    weight="medium",
+                ),
+                spacing="0",
+            ),
+            align="center",
+        ),
+    ),
+    rx.table.cell(
+        rx.vstack(
+            rx.text(data["email"], font_size="12px"),
+            rx.text("Email", color_scheme="gray", font_size="10px"),
+            spacing="0",
+        )
+    ),
+    rx.table.cell(
+        rx.text(data["phone"], color_scheme="gray", font_size="11px", weight="regular"),
+    ),
+    rx.table.cell(
+        rx.vstack(
+            rx.text(f"${data['rate']}.0/h", font_size="12px"),
+            rx.text("Rate", font_size="10px", color_scheme="gray"),
+            spacing="0",
+        )
+    ),
+    rx.table.cell(
+        rx.hstack(
+            rx.button(
+                rx.icon(tag="pencil", size=13, color="gray"),
+                variant="ghost",
+                cursor="pointer",
+            ),
+            emplyeeTableMenu(),
+        ),
+    ),
+    width="100%",
+    align="center",
+    white_space="nowrap",
+)
+
+
+dashbaordEmployee: Callable[[], rx.table.root] = lambda: rx.table.root(
+    rx.table.header(
+        rx.table.row(
+            rx.foreach(
+                ["Employee", "Email", "Phone", "Rate (USD)", ""],
+                lambda title: rx.table.column_header_cell(
+                    rx.text(title, font_size="12px", weight="bold")
+                ),
+            )
+        ),
+    ),
+    rx.table.body(
+        *[employeeDataRow(data) for data in employeeDataSet],
+    ),
+    width="100%",
+    variant="surface",
+    size="2",
+)

dashboard/dashboard/dashboardComponents/expenseBar/main.py

@@ -0,0 +1,58 @@
+import reflex as rx
+from typing import Callable
+
+from .style import DashboardExpenseBarStyle
+
+expenseDataSet = [
+    {"month": "Jan", "new": 45, "overdue": 12},
+    {"month": "Feb", "new": 38, "overdue": 15},
+    {"month": "Mar", "new": 50, "overdue": 8},
+    {"month": "Apr", "new": 60, "overdue": 20},
+    {"month": "May", "new": 70, "overdue": 10},
+    {"month": "Jun", "new": 55, "overdue": 18},
+    {"month": "Jul", "new": 48, "overdue": 25},
+    {"month": "Aug", "new": 65, "overdue": 12},
+    {"month": "Sep", "new": 58, "overdue": 16},
+    {"month": "Oct", "new": 62, "overdue": 14},
+    {"month": "Nov", "new": 50, "overdue": 22},
+    {"month": "Dec", "new": 75, "overdue": 9},
+]
+
+
+dashboardExpensebar: Callable[[], rx.vstack] = lambda: rx.vstack(
+    rx.vstack(
+        rx.heading("Monthly Expenses", size="4", weight="bold"),
+        rx.text("January - December 2024", size="1", color=rx.color("slate", 11)),
+        spacing="1",
+    ),
+    rx.divider(height="1rem", opacity="0"),
+    rx.recharts.bar_chart(
+        rx.recharts.graphing_tooltip(
+            label_style={"fontWeight": "700"}, item_style={"padding": "0px"}
+        ),
+        rx.recharts.cartesian_grid(horizontal=True, vertical=False),
+        *[
+            rx.recharts.bar(
+                data_key=name,
+                fill=rx.color("gray", 8) if index == 1 else rx.color("violet", 10),
+            )
+            for index, name in enumerate(["new", "overdue"])
+        ],
+        rx.recharts.x_axis(data_key="month", axis_line=False),
+        data=expenseDataSet,
+        height=300,
+        bar_size=10,
+        bar_gap=5,
+        bar_category_gap="2%",
+    ),
+    rx.vstack(
+        rx.heading("Expenses up by 5.2% this year", size="2", weight="bold"),
+        rx.text(
+            "Showing total expenses for the last 12 months",
+            size="1",
+            color=rx.color("slate", 11),
+        ),
+        spacing="1",
+    ),
+    **DashboardExpenseBarStyle.base,
+)

dashboard/dashboard/dashboardComponents/expenseBar/style.py

@@ -0,0 +1,21 @@
+from dataclasses import dataclass, field
+from typing import Dict
+
+import reflex as rx
+
+
+@dataclass
+class DashboardExpenseBarStyle:
+    base: Dict[str, str] = field(
+        default_factory=lambda: {
+            "height": "100%",
+            "padding": "1em",
+            "grid_column": "span 3",
+            "border_radius": "8px",
+            "background": rx.color("gray", 2),
+            "border": f"1px solid {rx.color('gray', 4)}",
+        }
+    )
+
+
+DashboardExpenseBarStyle: DashboardExpenseBarStyle = DashboardExpenseBarStyle()

dashboard/dashboard/dashboardComponents/navBar/main.py

@@ -0,0 +1,58 @@
+import reflex as rx
+from typing import Callable
+
+from .style import DashboardNavBarStyle
+
+
+navbarAvatar: Callable[[], rx.avatar] = lambda: rx.avatar(
+    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png",
+    size="2",
+    radius="full",
+)
+
+utilityIconMap = {
+    2: {"icon": "info", "msg": "Help & Support"},
+    1: {"icon": "bell", "msg": "Notifications"},
+    0: {"icon": "activity", "msg": "Activity"},
+}
+
+navbarUtilityIcons: Callable[[str, str], rx.hover_card] = (
+    lambda icon, msg: rx.hover_card.root(
+        rx.hover_card.trigger(
+            rx.icon(tag=icon, size=14, color=rx.color("slate", 11)),
+            cursor="pointer",
+        ),
+        rx.hover_card.content(rx.text(msg, size="1", weight="bold"), size="1"),
+    )
+)
+
+theme = rx.el.button(
+    rx.color_mode.icon(
+        light_component=rx.icon(
+            "moon",
+            size=14,
+            color=rx.color("slate", 12),
+        ),
+        dark_component=rx.icon(
+            "sun",
+            size=14,
+            color=rx.color("slate", 12),
+        ),
+    ),
+    on_click=rx.toggle_color_mode,
+)
+
+dashboardNavbar: Callable[[], rx.hstack] = lambda: rx.hstack(
+    rx.hstack(
+        *[
+            navbarUtilityIcons(item["icon"], item["msg"])
+            for item in utilityIconMap.values()
+        ],
+        theme,
+        align="center",
+        spacing="5",
+    ),
+    rx.divider(width="0.75px", height="24px", orientation="vertical"),
+    navbarAvatar(),
+    **DashboardNavBarStyle.base,
+)