├── .gitignore ├── LICENSE ├── README.md ├── assets ├── favicon.ico └── logo.jpg ├── dashboard ├── __init__.py ├── dashboard.py ├── data.py ├── graphs.py ├── navigation.py ├── pages │ ├── __init__.py │ ├── index.py │ ├── team.py │ └── tools.py ├── styles.py └── template.py ├── requirements.txt └── rxconfig.py /.gitignore: -------------------------------------------------------------------------------- 1 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 2 | # For a library or package, you might want to ignore these files since the code is 3 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 4 | # Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. 5 | # Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. 6 | # This is especially recommended for binary packages to ensure reproducibility, and is more 7 | # commonly ignored for libraries. 8 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 9 | # https://pdm.fming.dev/#use-with-ide 10 | # https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control 11 | # in version control. 12 | # install all needed dependencies. 13 | # intended to run in multiple environments; otherwise, check them in: 14 | # pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it 15 | # JetBrains specific template is maintained in a separate JetBrains.gitignore that can 16 | # Usually these files are written by a python script from a template 17 | # and can be added to the global gitignore or merged into this file. For a more nuclear 18 | # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore 19 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 20 | # option (not recommended) you can uncomment the following to ignore the entire idea folder. 21 | # .python-version 22 | # Byte-compiled / optimized / DLL files 23 | # C extensions 24 | # Celery stuff 25 | # Cython debug symbols 26 | # Distribution / packaging 27 | # Django stuff: 28 | # Environments 29 | # Flask stuff: 30 | # IPython 31 | # Installer logs 32 | # Jupyter Notebook 33 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm 34 | # PyBuilder 35 | # PyCharm 36 | # PyInstaller 37 | # Pyre type checker 38 | # Rope project settings 39 | # SageMath parsed files 40 | # Scrapy stuff: 41 | # Sphinx documentation 42 | # Spyder project settings 43 | # Translations 44 | # Unit test / coverage reports 45 | # mkdocs documentation 46 | # mypy 47 | # pdm 48 | # pipenv 49 | # poetry 50 | # pyenv 51 | # pytype static type analyzer 52 | #.idea/ 53 | #Pipfile.lock 54 | #pdm.lock 55 | #poetry.lock 56 | *$py.class 57 | *.cover 58 | *.db 59 | *.egg 60 | *.egg-info/ 61 | *.log 62 | *.manifest 63 | *.mo 64 | *.pot 65 | *.py,cover 66 | *.py[cod] 67 | *.sage.py 68 | *.so 69 | *.spec 70 | .Python 71 | .cache 72 | .coverage 73 | .coverage.* 74 | .dmypy.json 75 | .eggs/ 76 | .env 77 | .hypothesis/ 78 | .installed.cfg 79 | .ipynb_checkpoints 80 | .mypy_cache/ 81 | .nox/ 82 | .pdm.toml 83 | .pybuilder/ 84 | .pyre/ 85 | .pytest_cache/ 86 | .pytype/ 87 | .ropeproject 88 | .scrapy 89 | .spyderproject 90 | .spyproject 91 | .tox/ 92 | .venv 93 | .web 94 | .webassets-cache 95 | /site 96 | ENV/ 97 | MANIFEST 98 | __pycache__/ 99 | __pypackages__/ 100 | build/ 101 | celerybeat-schedule 102 | celerybeat.pid 103 | cover/ 104 | coverage.xml 105 | cython_debug/ 106 | db.sqlite3 107 | db.sqlite3-journal 108 | develop-eggs/ 109 | dist/ 110 | dmypy.json 111 | docs/_build/ 112 | downloads/ 113 | eggs/ 114 | env.bak/ 115 | env/ 116 | htmlcov/ 117 | instance/ 118 | ipython_config.py 119 | lib/ 120 | lib64/ 121 | local_settings.py 122 | nosetests.xml 123 | parts/ 124 | pip-delete-this-directory.txt 125 | pip-log.txt 126 | profile_default/ 127 | sdist/ 128 | share/python-wheels/ 129 | target/ 130 | var/ 131 | venv.bak/ 132 | venv/ 133 | wheels/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | LLAMA 2 COMMUNITY LICENSE AGREEMENT 2 | Llama 2 Version Release Date: July 18, 2023 3 | 4 | "Agreement" means the terms and conditions for use, reproduction, distribution and 5 | modification of the Llama Materials set forth herein. 6 | 7 | "Documentation" means the specifications, manuals and documentation 8 | accompanying Llama 2 distributed by Meta at ai.meta.com/resources/models-and- 9 | libraries/llama-downloads/. 10 | 11 | "Licensee" or "you" means you, or your employer or any other person or entity (if 12 | you are entering into this Agreement on such person or entity's behalf), of the age 13 | required under applicable laws, rules or regulations to provide legal consent and that 14 | has legal authority to bind your employer or such other person or entity if you are 15 | entering in this Agreement on their behalf. 16 | 17 | "Llama 2" means the foundational large language models and software and 18 | algorithms, including machine-learning model code, trained model weights, 19 | inference-enabling code, training-enabling code, fine-tuning enabling code and other 20 | elements of the foregoing distributed by Meta at ai.meta.com/resources/models-and- 21 | libraries/llama-downloads/. 22 | 23 | "Llama Materials" means, collectively, Meta's proprietary Llama 2 and 24 | Documentation (and any portion thereof) made available under this Agreement. 25 | 26 | "Meta" or "we" means Meta Platforms Ireland Limited (if you are located in or, if you 27 | are an entity, your principal place of business is in the EEA or Switzerland) and Meta 28 | Platforms, Inc. (if you are located outside of the EEA or Switzerland). 29 | 30 | By clicking "I Accept" below or by using or distributing any portion or element of the 31 | Llama Materials, you agree to be bound by this Agreement. 32 | 33 | 1. License Rights and Redistribution. 34 | 35 | a. Grant of Rights. You are granted a non-exclusive, worldwide, non- 36 | transferable and royalty-free limited license under Meta's intellectual property or 37 | other rights owned by Meta embodied in the Llama Materials to use, reproduce, 38 | distribute, copy, create derivative works of, and make modifications to the Llama 39 | Materials. 40 | 41 | b. Redistribution and Use. 42 | 43 | i. If you distribute or make the Llama Materials, or any derivative works 44 | thereof, available to a third party, you shall provide a copy of this Agreement to such 45 | third party. 46 | ii. If you receive Llama Materials, or any derivative works thereof, from 47 | a Licensee as part of an integrated end user product, then Section 2 of this 48 | Agreement will not apply to you. 49 | 50 | iii. You must retain in all copies of the Llama Materials that you 51 | distribute the following attribution notice within a "Notice" text file distributed as a 52 | part of such copies: "Llama 2 is licensed under the LLAMA 2 Community License, 53 | Copyright (c) Meta Platforms, Inc. All Rights Reserved." 54 | 55 | iv. Your use of the Llama Materials must comply with applicable laws 56 | and regulations (including trade compliance laws and regulations) and adhere to the 57 | Acceptable Use Policy for the Llama Materials (available at 58 | https://ai.meta.com/llama/use-policy), which is hereby incorporated by reference into 59 | this Agreement. 60 | 61 | v. You will not use the Llama Materials or any output or results of the 62 | Llama Materials to improve any other large language model (excluding Llama 2 or 63 | derivative works thereof). 64 | 65 | 2. Additional Commercial Terms. If, on the Llama 2 version release date, the 66 | monthly active users of the products or services made available by or for Licensee, 67 | or Licensee's affiliates, is greater than 700 million monthly active users in the 68 | preceding calendar month, you must request a license from Meta, which Meta may 69 | grant to you in its sole discretion, and you are not authorized to exercise any of the 70 | rights under this Agreement unless or until Meta otherwise expressly grants you 71 | such rights. 72 | 73 | 3. Disclaimer of Warranty. UNLESS REQUIRED BY APPLICABLE LAW, THE 74 | LLAMA MATERIALS AND ANY OUTPUT AND RESULTS THEREFROM ARE 75 | PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, 76 | EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, ANY 77 | WARRANTIES OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY, OR 78 | FITNESS FOR A PARTICULAR PURPOSE. YOU ARE SOLELY RESPONSIBLE 79 | FOR DETERMINING THE APPROPRIATENESS OF USING OR REDISTRIBUTING 80 | THE LLAMA MATERIALS AND ASSUME ANY RISKS ASSOCIATED WITH YOUR 81 | USE OF THE LLAMA MATERIALS AND ANY OUTPUT AND RESULTS. 82 | 83 | 4. Limitation of Liability. IN NO EVENT WILL META OR ITS AFFILIATES BE 84 | LIABLE UNDER ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, TORT, 85 | NEGLIGENCE, PRODUCTS LIABILITY, OR OTHERWISE, ARISING OUT OF THIS 86 | AGREEMENT, FOR ANY LOST PROFITS OR ANY INDIRECT, SPECIAL, 87 | CONSEQUENTIAL, INCIDENTAL, EXEMPLARY OR PUNITIVE DAMAGES, EVEN 88 | IF META OR ITS AFFILIATES HAVE BEEN ADVISED OF THE POSSIBILITY OF 89 | ANY OF THE FOREGOING. 90 | 91 | 5. Intellectual Property. 92 | 93 | a. No trademark licenses are granted under this Agreement, and in 94 | connection with the Llama Materials, neither Meta nor Licensee may use any name 95 | or mark owned by or associated with the other or any of its affiliates, except as 96 | required for reasonable and customary use in describing and redistributing the 97 | Llama Materials. 98 | 99 | b. Subject to Meta's ownership of Llama Materials and derivatives made by or 100 | for Meta, with respect to any derivative works and modifications of the Llama 101 | Materials that are made by you, as between you and Meta, you are and will be the 102 | owner of such derivative works and modifications. 103 | 104 | c. If you institute litigation or other proceedings against Meta or any entity 105 | (including a cross-claim or counterclaim in a lawsuit) alleging that the Llama 106 | Materials or Llama 2 outputs or results, or any portion of any of the foregoing, 107 | constitutes infringement of intellectual property or other rights owned or licensable 108 | by you, then any licenses granted to you under this Agreement shall terminate as of 109 | the date such litigation or claim is filed or instituted. You will indemnify and hold 110 | harmless Meta from and against any claim by any third party arising out of or related 111 | to your use or distribution of the Llama Materials. 112 | 113 | 6. Term and Termination. The term of this Agreement will commence upon your 114 | acceptance of this Agreement or access to the Llama Materials and will continue in 115 | full force and effect until terminated in accordance with the terms and conditions 116 | herein. Meta may terminate this Agreement if you are in breach of any term or 117 | condition of this Agreement. Upon termination of this Agreement, you shall delete 118 | and cease use of the Llama Materials. Sections 3, 4 and 7 shall survive the 119 | termination of this Agreement. 120 | 121 | 7. Governing Law and Jurisdiction. This Agreement will be governed and 122 | construed under the laws of the State of California without regard to choice of law 123 | principles, and the UN Convention on Contracts for the International Sale of Goods 124 | does not apply to this Agreement. The courts of California shall have exclusive 125 | jurisdiction of any dispute arising out of this Agreement. 126 | 127 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dashboard Template 2 | 3 | This is a Reflex starter template for a dashboard app. 4 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/dashboard-template/1d35721e4ccc071c3919792869a0a65a9d5cba73/assets/favicon.ico -------------------------------------------------------------------------------- /assets/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/dashboard-template/1d35721e4ccc071c3919792869a0a65a9d5cba73/assets/logo.jpg -------------------------------------------------------------------------------- /dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/dashboard-template/1d35721e4ccc071c3919792869a0a65a9d5cba73/dashboard/__init__.py -------------------------------------------------------------------------------- /dashboard/dashboard.py: -------------------------------------------------------------------------------- 1 | """The main Dashboard App.""" 2 | 3 | from rxconfig import config 4 | 5 | import reflex as rx 6 | 7 | from dashboard.styles import BACKGROUND_COLOR, FONT_FAMILY, THEME, STYLESHEETS 8 | 9 | from dashboard.pages.tools import tools 10 | from dashboard.pages.team import team 11 | from dashboard.pages.index import index 12 | 13 | # Create app instance and add index page. 14 | app = rx.App( 15 | theme=THEME, 16 | stylesheets=STYLESHEETS, 17 | ) 18 | 19 | app.add_page(index, route="/") 20 | app.add_page(tools, route="/tools") 21 | app.add_page(team, route="/team") 22 | -------------------------------------------------------------------------------- /dashboard/data.py: -------------------------------------------------------------------------------- 1 | """Mock data to populate the dashboard charts and tables.""" 2 | 3 | import reflex as rx 4 | from dashboard.graphs import Area, Line 5 | 6 | stat_card_data = [ 7 | [ 8 | "Today's Money", 9 | "$53,000", 10 | "+2%", 11 | ], 12 | [ 13 | "Today's Users", 14 | "2,300", 15 | "+5%", 16 | ], 17 | [ 18 | "Today's Orders", 19 | "1,400", 20 | "-3%", 21 | ], 22 | [ 23 | "Today's Sales", 24 | "$23,000", 25 | "+2%", 26 | ], 27 | ] 28 | 29 | line_chart_data = [ 30 | {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400}, 31 | {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210}, 32 | {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290}, 33 | {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000}, 34 | {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181}, 35 | {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500}, 36 | {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100}, 37 | ] 38 | 39 | 40 | lines = [ 41 | Line(data_key="pv", stroke="#8884d8"), 42 | Line(data_key="uv", stroke="var(--accent-8)"), 43 | ] 44 | 45 | 46 | pie_chart_data = [ 47 | {"name": "Group A", "value": 400, "fill": "var(--red-7)"}, 48 | {"name": "Group B", "value": 300, "fill": "var(--green-7)"}, 49 | {"name": "Group C", "value": 300, "fill": "var(--purple-7)"}, 50 | {"name": "Group D", "value": 200, "fill": "var(--blue-7)"}, 51 | {"name": "Group E", "value": 278, "fill": "var(--yellow-7)"}, 52 | {"name": "Group F", "value": 189, "fill": "var(--pink-7)"}, 53 | ] 54 | 55 | area_chart_data = line_chart_data 56 | 57 | areas = [ 58 | Area(data_key="pv", stroke="#8884d8", fill="#8884d8"), 59 | Area(data_key="uv", stroke="var(--accent-8)", fill="var(--accent-8)"), 60 | ] 61 | 62 | 63 | tabular_data = [ 64 | ["Full name", "Email", "Group"], 65 | ["Danilo Sousa", "danilo@example.com", rx.badge("Developer")], 66 | ["Zahra Ambessa", "zahra@example.com", rx.badge("Admin", variant="surface")], 67 | ["Jasper Eriksson", "jasper@example.com", rx.badge("Developer")], 68 | ] 69 | -------------------------------------------------------------------------------- /dashboard/graphs.py: -------------------------------------------------------------------------------- 1 | """Library of customized graphs and tables for the dashboard.""" 2 | from __future__ import annotations 3 | 4 | import reflex as rx 5 | 6 | 7 | def card(*children, **props): 8 | return rx.card( 9 | *children, 10 | box_shadow="rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;", 11 | **props, 12 | ) 13 | 14 | 15 | def stat_card(title: str, stat, delta) -> rx.Component: 16 | color = "var(--red-9)" if delta[0] == "-" else "var(--green-9)" 17 | arrow = "decrease" if delta[0] == "-" else "increase" 18 | return card( 19 | rx.hstack( 20 | rx.vstack( 21 | rx.text(title), 22 | rx.chakra.stat( 23 | rx.hstack( 24 | rx.chakra.stat_number(stat, color=color), 25 | rx.chakra.stat_help_text( 26 | rx.chakra.stat_arrow(type_=arrow), delta[1:] 27 | ), 28 | ), 29 | ), 30 | ), 31 | ), 32 | ) 33 | 34 | 35 | def table(tabular_data: list[list]): 36 | return rx.table.root( 37 | rx.table.header( 38 | rx.table.row( 39 | *[rx.table.column_header_cell(cell) for cell in tabular_data[0]], 40 | ), 41 | ), 42 | rx.table.body( 43 | *[ 44 | rx.table.row( 45 | *[ 46 | rx.table.row_header_cell(cell) 47 | if i == 0 48 | else rx.table.cell(cell) 49 | for i, cell in enumerate(row) 50 | ], 51 | ) 52 | for row in tabular_data[1:] 53 | ], 54 | ), 55 | ) 56 | 57 | 58 | class Line(rx.Base): 59 | data_key: str 60 | stroke: str 61 | 62 | 63 | def line_chart(data: rx.Var | list[dict], data_key: str, lines: list[Line]): 64 | return card( 65 | rx.recharts.line_chart( 66 | *[ 67 | rx.recharts.line(data_key=line.data_key, stroke=line.stroke) 68 | for line in lines 69 | ], 70 | rx.recharts.x_axis(data_key=data_key), 71 | rx.recharts.y_axis(), 72 | rx.recharts.legend(), 73 | data=data, 74 | height=300, 75 | ) 76 | ) 77 | 78 | 79 | def pie_chart(data: rx.Var | list[dict], data_key: str, name_key: str): 80 | return card( 81 | rx.recharts.pie_chart( 82 | rx.recharts.pie( 83 | data=data, 84 | data_key=data_key, 85 | name_key=name_key, 86 | cx="50%", 87 | cy="50%", 88 | label=True, 89 | ), 90 | rx.recharts.legend(), 91 | height=300, 92 | ) 93 | ) 94 | 95 | 96 | class Area(rx.Base): 97 | data_key: str 98 | stroke: str 99 | fill: str 100 | 101 | 102 | def area_chart(data: rx.Var | list[dict], data_key: str, areas: list[Area]): 103 | return card( 104 | rx.recharts.area_chart( 105 | *[ 106 | rx.recharts.area( 107 | data_key=area.data_key, stroke=area.stroke, fill=area.fill 108 | ) 109 | for area in areas 110 | ], 111 | rx.recharts.x_axis(data_key=data_key), 112 | rx.recharts.y_axis(), 113 | rx.recharts.legend(), 114 | data=data, 115 | height=400, 116 | ) 117 | ) 118 | -------------------------------------------------------------------------------- /dashboard/navigation.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from reflex.components import lucide 3 | 4 | from dashboard.styles import FONT_FAMILY 5 | 6 | 7 | def sidebar_link(text: str, href: str, icon: str): 8 | return rx.link( 9 | rx.flex( 10 | rx.icon_button( 11 | rx.icon(tag=icon, weight=16, height=16), 12 | variant="soft", 13 | ), 14 | text, 15 | py="2", 16 | px="4", 17 | spacing="3", 18 | align="baseline", 19 | direction="row", 20 | font_family=FONT_FAMILY, 21 | ), 22 | href=href, 23 | width="100%", 24 | border_radius="8px", 25 | _hover={ 26 | "background": "rgba(255, 255, 255, 0.1)", 27 | "backdrop_filter": "blur(10px)", 28 | }, 29 | ) 30 | 31 | 32 | def sidebar( 33 | *sidebar_links, 34 | **props, 35 | ) -> rx.Component: 36 | logo_src = props.get("logo_src", "/logo.jpg") 37 | heading = props.get("heading", "NOT SET") 38 | return rx.vstack( 39 | rx.hstack( 40 | rx.image(src=logo_src, height="28px", border_radius="8px"), 41 | rx.heading( 42 | heading, 43 | font_family=FONT_FAMILY, 44 | size="7", 45 | ), 46 | width="100%", 47 | spacing="7", 48 | ), 49 | rx.divider(margin_y="3"), 50 | rx.vstack( 51 | *sidebar_links, 52 | padding_y="1em", 53 | ), 54 | width="250px", 55 | position="fixed", 56 | height="100%", 57 | left="0px", 58 | top="0px", 59 | align_items="left", 60 | z_index="10", 61 | backdrop_filter="blur(10px)", 62 | padding="2em", 63 | ) 64 | 65 | 66 | dashboard_sidebar = sidebar( 67 | sidebar_link(text="Dashboard", href="/", icon="bar_chart_3"), 68 | sidebar_link(text="Tools", href="/tools", icon="settings"), 69 | sidebar_link(text="Team", href="/team", icon="users"), 70 | logo_src="/logo.jpg", 71 | heading="REFLEX", 72 | ) 73 | 74 | 75 | class State(rx.State): 76 | pass 77 | 78 | 79 | def navbar(heading: str) -> rx.Component: 80 | return rx.hstack( 81 | rx.heading(heading, font_family=FONT_FAMILY, size="7"), 82 | rx.spacer(), 83 | rx.menu.root( 84 | rx.menu.trigger( 85 | rx.button( 86 | "Menu", 87 | lucide.icon(tag="chevron_down", weight=16, height=16), 88 | font_family=FONT_FAMILY, 89 | variant="soft", 90 | ), 91 | ), 92 | rx.menu.content( 93 | rx.menu.item("Settings"), 94 | rx.menu.item("Profile"), 95 | rx.menu.item("Logout"), 96 | font_family=FONT_FAMILY, 97 | variant="soft", 98 | ), 99 | variant="soft", 100 | font_family=FONT_FAMILY, 101 | ), 102 | position="fixed", 103 | width="calc(100% - 250px)", 104 | top="0px", 105 | z_index="1000", 106 | padding_x="2em", 107 | padding_top="2em", 108 | padding_bottom="1em", 109 | backdrop_filter="blur(10px)", 110 | ) 111 | -------------------------------------------------------------------------------- /dashboard/pages/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/dashboard-template/1d35721e4ccc071c3919792869a0a65a9d5cba73/dashboard/pages/__init__.py -------------------------------------------------------------------------------- /dashboard/pages/index.py: -------------------------------------------------------------------------------- 1 | """The main index page.""" 2 | 3 | import reflex as rx 4 | from dashboard.data import ( 5 | line_chart_data, 6 | lines, 7 | pie_chart_data, 8 | area_chart_data, 9 | areas, 10 | stat_card_data, 11 | tabular_data, 12 | ) 13 | from dashboard.graphs import ( 14 | area_chart, 15 | line_chart, 16 | pie_chart, 17 | stat_card, 18 | table, 19 | ) 20 | from dashboard.navigation import navbar 21 | from dashboard.template import template 22 | 23 | # Content in a grid layout. 24 | 25 | 26 | def content_grid(): 27 | return rx.chakra.grid( 28 | *[ 29 | rx.chakra.grid_item(stat_card(*c), col_span=1, row_span=1) 30 | for c in stat_card_data 31 | ], 32 | rx.chakra.grid_item( 33 | line_chart(data=line_chart_data, data_key="name", lines=lines), 34 | col_span=3, 35 | row_span=2, 36 | ), 37 | rx.chakra.grid_item( 38 | pie_chart(data=pie_chart_data, data_key="value", name_key="name"), 39 | row_span=2, 40 | col_span=1, 41 | ), 42 | rx.chakra.grid_item(table(tabular_data=tabular_data), col_span=4, row_span=2), 43 | rx.chakra.grid_item( 44 | area_chart(data=area_chart_data, data_key="name", areas=areas), 45 | col_span=3, 46 | row_span=2, 47 | ), 48 | template_columns="repeat(4, 1fr)", 49 | width="100%", 50 | gap=4, 51 | row_gap=8, 52 | ) 53 | 54 | 55 | @template 56 | def index() -> rx.Component: 57 | return rx.box( 58 | navbar(heading="Dashboard"), 59 | rx.box( 60 | content_grid(), 61 | margin_top="calc(50px + 2em)", 62 | padding="2em", 63 | ), 64 | padding_left="250px", 65 | ) 66 | -------------------------------------------------------------------------------- /dashboard/pages/team.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from dashboard.navigation import navbar 4 | from dashboard.template import template 5 | 6 | @template 7 | def team() -> rx.Component: 8 | return rx.box( 9 | navbar(heading="Team"), 10 | rx.box( 11 | rx.text("placeholder"), 12 | margin_top="calc(50px + 2em)", 13 | padding="2em", 14 | ), 15 | padding_left="250px", 16 | ) 17 | 18 | -------------------------------------------------------------------------------- /dashboard/pages/tools.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from dashboard.navigation import navbar 4 | from dashboard.template import template 5 | 6 | @template 7 | def tools() -> rx.Component: 8 | return rx.box( 9 | navbar(heading="Tools"), 10 | rx.box( 11 | rx.text("placeholder"), 12 | margin_top="calc(50px + 2em)", 13 | padding="2em", 14 | ), 15 | padding_left="250px", 16 | ) 17 | -------------------------------------------------------------------------------- /dashboard/styles.py: -------------------------------------------------------------------------------- 1 | """The style classes and constants for the Dashboard App.""" 2 | 3 | from reflex.components.radix import themes as rx 4 | 5 | THEME = rx.theme( 6 | appearance="light", 7 | has_background=True, 8 | radius="large", 9 | accent_color="iris", 10 | scaling="100%", 11 | panel_background="solid", 12 | ) 13 | 14 | STYLESHEETS = ["https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"] 15 | 16 | FONT_FAMILY = "Share Tech Mono" 17 | BACKGROUND_COLOR = "var(--accent-2)" 18 | -------------------------------------------------------------------------------- /dashboard/template.py: -------------------------------------------------------------------------------- 1 | from typing import Callable 2 | 3 | import reflex as rx 4 | 5 | from dashboard.navigation import dashboard_sidebar 6 | from dashboard.styles import BACKGROUND_COLOR, FONT_FAMILY 7 | 8 | 9 | def template(page: Callable[[], rx.Component]) -> rx.Component: 10 | return rx.box( 11 | dashboard_sidebar, 12 | page(), 13 | rx.logo(), 14 | background_color=BACKGROUND_COLOR, 15 | font_family=FONT_FAMILY, 16 | padding_bottom="4em", 17 | ) 18 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.4.5 2 | -------------------------------------------------------------------------------- /rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="dashboard", 5 | ) 6 | --------------------------------------------------------------------------------