├── .codespellrc ├── .deploy └── temporary_db.py ├── .github └── workflows │ ├── check_export.yml │ ├── create-artifacts.yml │ ├── deploy.yml │ ├── list-templates.yml │ ├── pre-commit.yml │ └── publish-build.yml ├── .gitignore ├── .gitmodules ├── .pre-commit-config.yaml ├── README.md ├── account_management_dashboard ├── .gitignore ├── account_management_dashboard │ ├── __init__.py │ ├── account_management_dashboard.py │ ├── components │ │ ├── __init__.py │ │ ├── account_section.py │ │ ├── header.py │ │ ├── net_worth_graph.py │ │ ├── net_worth_summary.py │ │ ├── sidebar.py │ │ └── summary_section.py │ ├── models │ │ ├── __init__.py │ │ └── models.py │ └── states │ │ ├── __init__.py │ │ ├── account_state.py │ │ └── data.py ├── assets │ ├── design_white_simple.png │ ├── favicon.ico │ ├── simple_logo_bank.png │ └── simple_minimalist_bank.png ├── preview.webp ├── requirements.txt └── rxconfig.py ├── admin_dashboard ├── .gitignore ├── admin_dashboard │ ├── __init__.py │ ├── admin_dashboard.py │ ├── components │ │ ├── __init__.py │ │ ├── customer_details.py │ │ ├── data_table.py │ │ └── navigation.py │ ├── models │ │ ├── __init__.py │ │ └── models.py │ └── states │ │ ├── __init__.py │ │ ├── dashboard_state.py │ │ ├── data.py │ │ ├── navigation_state.py │ │ └── utils.py ├── assets │ └── favicon.ico ├── preview.webp ├── requirements.txt └── rxconfig.py ├── admin_panel ├── .gitignore ├── admin_panel │ ├── __init__.py │ ├── admin_panel.py │ ├── components │ │ ├── __init__.py │ │ ├── customer_form.py │ │ └── customer_table.py │ └── states │ │ ├── __init__.py │ │ └── customer_state.py ├── assets │ ├── favicon.ico │ └── preview.png ├── blocks │ └── __init__.py ├── requirements.txt └── rxconfig.py ├── ai_image_gen ├── .gitignore ├── README.md ├── ai_image_gen │ ├── __init__.py │ ├── ai_image_gen.py │ ├── backend │ │ ├── __init__.py │ │ ├── generation.py │ │ └── options.py │ ├── components │ │ ├── __init__.py │ │ ├── options_ui.py │ │ ├── prompt_list.py │ │ ├── react_zoom.py │ │ └── styles_preset.py │ ├── pages │ │ ├── __init__.py │ │ └── index.py │ ├── styles.py │ └── views │ │ ├── __init__.py │ │ ├── mobile_ui.py │ │ └── sidebar.py ├── assets │ ├── default.webp │ ├── favicon.ico │ ├── react-zoom.css │ ├── reflex_black.svg │ ├── reflex_white.svg │ └── styles │ │ ├── anime.webp │ │ ├── cartoon.webp │ │ ├── cinematic.webp │ │ ├── conceptart.webp │ │ ├── cyberpunk.webp │ │ ├── digitalart.webp │ │ ├── fantasy.webp │ │ ├── fortnite.webp │ │ ├── funkopop.webp │ │ ├── lowpoly.webp │ │ ├── photographic.webp │ │ ├── postapocalyptic.webp │ │ ├── radiant.webp │ │ ├── sketch.webp │ │ └── steampunk.webp ├── requirements.txt └── rxconfig.py ├── api_admin_panel ├── .gitignore ├── api_admin_panel │ ├── __init__.py │ ├── api_admin_panel.py │ ├── components │ │ ├── __init__.py │ │ ├── drawer.py │ │ ├── navbar.py │ │ ├── output.py │ │ └── query.py │ ├── pages │ │ ├── __init__.py │ │ └── dashboard.py │ ├── states │ │ ├── __init__.py │ │ ├── base.py │ │ └── queries.py │ └── styles.py ├── assets │ ├── favicon.ico │ └── github.svg ├── requirements.txt └── rxconfig.py ├── business_analytics_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── business_analytics_dashboard │ ├── __init__.py │ ├── business_analytics_dashboard.py │ ├── components │ │ ├── __init__.py │ │ ├── account_executive_metrics.py │ │ ├── average_salary_chart.py │ │ ├── department_pie_chart.py │ │ ├── sidebar.py │ │ └── tooltip_props.py │ ├── models │ │ ├── __init__.py │ │ └── employee.py │ └── states │ │ ├── __init__.py │ │ └── dashboard_state.py ├── preview.webp ├── requirements.txt └── rxconfig.py ├── chat_app ├── .gitignore ├── assets │ └── favicon.ico ├── chat_app │ ├── __init__.py │ ├── chat_app.py │ ├── components │ │ ├── __init__.py │ │ ├── chat_interface.py │ │ ├── input_area.py │ │ ├── message_bubble.py │ │ ├── preset_cards.py │ │ └── typing_indicator.py │ └── states │ │ ├── __init__.py │ │ └── chat_state.py ├── preview.png ├── requirements.txt └── rxconfig.py ├── ci_template ├── .gitignore ├── README.md ├── assets │ ├── favicon.ico │ ├── reflex_black.svg │ └── reflex_white.svg ├── cijob │ ├── __init__.py │ ├── backend │ │ ├── __init__.py │ │ └── table_state.py │ ├── cijob.py │ ├── components │ │ ├── __init__.py │ │ ├── navbar.py │ │ ├── sidebar.py │ │ └── status_badge.py │ ├── pages │ │ ├── __init__.py │ │ ├── about.py │ │ ├── dashboard.py │ │ └── settings.py │ ├── styles.py │ ├── templates │ │ ├── __init__.py │ │ └── template.py │ └── views │ │ ├── __init__.py │ │ ├── color_picker.py │ │ ├── radius_picker.py │ │ ├── scaling_picker.py │ │ └── table.py ├── data.csv ├── requirements.txt └── rxconfig.py ├── company_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── company_dashboard │ ├── __init__.py │ ├── company_dashboard.py │ ├── components │ │ ├── __init__.py │ │ ├── documents_table.py │ │ ├── header.py │ │ ├── key_metrics.py │ │ ├── sidebar.py │ │ └── visitors_chart.py │ └── states │ │ ├── __init__.py │ │ └── dashboard_state.py ├── preview.webp ├── requirements.txt └── rxconfig.py ├── customer_data_app ├── .gitignore ├── README.md ├── assets │ └── favicon.ico ├── customer_data │ ├── __init__.py │ ├── backend │ │ ├── __init__.py │ │ └── backend.py │ ├── components │ │ ├── __init__.py │ │ ├── form_field.py │ │ ├── stats_cards.py │ │ └── status_badges.py │ ├── customer_data.py │ └── views │ │ ├── __init__.py │ │ ├── navbar.py │ │ └── table.py ├── requirements.txt └── rxconfig.py ├── dalle ├── .gitignore ├── assets │ └── favicon.ico ├── dalle │ ├── __init__.py │ └── dalle.py ├── requirements.txt └── rxconfig.py ├── dashboard ├── .gitignore ├── README.md ├── assets │ ├── favicon.ico │ ├── reflex_black.svg │ ├── reflex_white.svg │ └── styles.css ├── dashboard │ ├── __init__.py │ ├── backend │ │ ├── __init__.py │ │ └── table_state.py │ ├── components │ │ ├── __init__.py │ │ ├── card.py │ │ ├── navbar.py │ │ ├── notification.py │ │ ├── profile_input.py │ │ ├── sidebar.py │ │ └── status_badge.py │ ├── dashboard.py │ ├── pages │ │ ├── __init__.py │ │ ├── about.py │ │ ├── index.py │ │ ├── profile.py │ │ ├── settings.py │ │ └── table.py │ ├── styles.py │ ├── templates │ │ ├── __init__.py │ │ └── template.py │ └── views │ │ ├── __init__.py │ │ ├── acquisition_view.py │ │ ├── charts.py │ │ ├── color_picker.py │ │ ├── radius_picker.py │ │ ├── scaling_picker.py │ │ ├── stats_cards.py │ │ └── table.py ├── items.csv ├── requirements.txt └── rxconfig.py ├── deploy.sh ├── futuristic_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── futuristic_dashboard │ ├── __init__.py │ ├── components │ │ ├── __init__.py │ │ ├── charts.py │ │ ├── header.py │ │ ├── main_content.py │ │ ├── right_sidebar.py │ │ └── sidebar.py │ ├── futuristic_dashboard.py │ └── states │ │ ├── __init__.py │ │ ├── dashboard_state.py │ │ └── data.py ├── requirements.txt └── rxconfig.py ├── manufacturing_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── blocks │ └── __init__.py ├── manufacturing_dashboard │ ├── __init__.py │ ├── components │ │ ├── __init__.py │ │ ├── dashboard_header.py │ │ ├── distribution_chart.py │ │ ├── metrics_summary.py │ │ ├── pie_chart.py │ │ ├── sidebar.py │ │ └── spc_chart.py │ ├── manufacturing_dashboard.py │ └── states │ │ ├── __init__.py │ │ └── dashboard_state.py ├── preview.webp ├── requirements.txt └── rxconfig.py ├── nba ├── .gitignore ├── assets │ ├── ball.svg │ ├── favicon.ico │ └── grid.css ├── nba │ ├── __init__.py │ ├── backend │ │ ├── __init__.py │ │ ├── backend.py │ │ ├── data_items.py │ │ └── player.py │ ├── components │ │ ├── __init__.py │ │ ├── item_badges.py │ │ └── stats_selector.py │ ├── nba.py │ └── views │ │ ├── __init__.py │ │ ├── navbar.py │ │ ├── stats.py │ │ └── table.py ├── nbastats.csv ├── requirements.txt └── rxconfig.py ├── retail_analytics_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── blocks │ └── __init__.py ├── preview.webp ├── requirements.txt ├── retail_analytics_dashboard │ ├── __init__.py │ ├── components │ │ ├── __init__.py │ │ ├── billing_cycle.py │ │ ├── customize_charts_dialog.py │ │ ├── overview_chart.py │ │ ├── overview_section.py │ │ ├── progress_bar.py │ │ └── sidebar.py │ ├── models │ │ ├── __init__.py │ │ └── models.py │ ├── retail_analytics_dashboard.py │ └── states │ │ ├── __init__.py │ │ ├── dashboard_state.py │ │ ├── data.py │ │ └── utils.py └── rxconfig.py ├── retail_dashboard ├── .gitignore ├── assets │ ├── favicon.ico │ └── preview.png ├── blocks │ └── __init__.py ├── requirements.txt ├── retail_dashboard │ ├── __init__.py │ ├── components │ │ ├── __init__.py │ │ ├── chart_utils.py │ │ ├── details_table.py │ │ ├── filter_dropdown.py │ │ ├── header.py │ │ └── sidebar.py │ ├── models │ │ ├── __init__.py │ │ └── entry.py │ ├── pages │ │ ├── __init__.py │ │ └── details_page.py │ ├── retail_dashboard.py │ └── states │ │ ├── __init__.py │ │ ├── dashboard_state.py │ │ └── data.py └── rxconfig.py ├── retention_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── preview.webp ├── requirements.txt ├── retention_dashboard │ ├── __init__.py │ ├── components │ │ ├── __init__.py │ │ ├── charts.py │ │ ├── layout.py │ │ ├── retention.py │ │ └── workflow.py │ ├── retention_dashboard.py │ └── states │ │ ├── __init__.py │ │ ├── dashboard_state.py │ │ ├── data.py │ │ ├── retention_state.py │ │ └── workflow_state.py └── rxconfig.py ├── ruff.toml ├── sales ├── .gitignore ├── README.md ├── assets │ └── favicon.ico ├── requirements.txt ├── rxconfig.py └── sales │ ├── __init__.py │ ├── backend │ ├── __init__.py │ ├── backend.py │ └── models.py │ ├── components │ ├── __init__.py │ ├── form_field.py │ └── gender_badges.py │ ├── sales.py │ └── views │ ├── __init__.py │ ├── email.py │ ├── navbar.py │ └── table.py ├── space_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── preview.webp ├── requirements.txt ├── rxconfig.py └── space_dashboard │ ├── __init__.py │ ├── components │ ├── __init__.py │ ├── alert_indicator.py │ ├── control_buttons.py │ ├── data_stream.py │ ├── environment.py │ ├── header.py │ ├── hq_coms.py │ ├── planets.py │ ├── pos_tracking.py │ ├── section_wrapper.py │ └── speed_display.py │ ├── space_dashboard.py │ └── states │ ├── __init__.py │ └── dashboard_state.py ├── stock_graph_app ├── .gitignore ├── assets │ └── favicon.ico ├── blocks │ └── __init__.py ├── preview.png ├── requirements.txt ├── rxconfig.py └── stock_graph_app │ ├── __init__.py │ ├── components │ ├── __init__.py │ └── stock_chart_display.py │ ├── states │ ├── __init__.py │ └── stock_state.py │ └── stock_graph_app.py ├── stock_market_dashboard ├── .gitignore ├── assets │ ├── favicon.ico │ └── styles.css ├── preview.webp ├── requirements.txt ├── rxconfig.py └── stock_market_dashboard │ ├── __init__.py │ ├── components │ ├── __init__.py │ ├── line_chart.py │ ├── main_header.py │ ├── options_table.py │ ├── orders_table.py │ ├── positions_table.py │ └── tooltip_props.py │ ├── models │ ├── __init__.py │ └── models.py │ ├── states │ ├── __init__.py │ ├── data.py │ └── trading_state.py │ └── stock_market_dashboard.py ├── table_dashboard ├── .gitignore ├── assets │ └── favicon.ico ├── preview.webp ├── requirements.txt ├── rxconfig.py └── table_dashboard │ ├── __init__.py │ ├── components │ ├── __init__.py │ ├── details_table.py │ ├── filter_dropdown.py │ ├── header.py │ └── sidebar.py │ ├── models │ ├── __init__.py │ └── entry.py │ ├── states │ ├── __init__.py │ ├── dashboard_state.py │ └── data.py │ └── table_dashboard.py ├── templates.json └── text_annotation_app ├── .gitignore ├── assets └── favicon.ico ├── preview.png ├── requirements.txt ├── rxconfig.py └── text_annotation_app ├── __init__.py ├── components ├── __init__.py └── ner_display.py ├── states ├── __init__.py └── ner_state.py └── text_annotation_app.py /.codespellrc: -------------------------------------------------------------------------------- 1 | [codespell] 2 | skip = *.csv 3 | ignore-words-list = 4 | chanel -------------------------------------------------------------------------------- /.deploy/temporary_db.py: -------------------------------------------------------------------------------- 1 | # reflex-dev/templates:.deploy/temporary_db.py to create default reflex.db when deployed 2 | import reflex as rx 3 | 4 | rx.utils.prerequisites.check_db_initialized() or rx.Model.alembic_init() 5 | rx.Model.migrate(autogenerate=True) 6 | -------------------------------------------------------------------------------- /.github/workflows/check_export.yml: -------------------------------------------------------------------------------- 1 | name: check-export 2 | env: 3 | REFLEX_DEP: "git+https://github.com/reflex-dev/reflex.git@main" 4 | REFLEX_TELEMETRY_ENABLED: false 5 | on: 6 | push: 7 | branches: [main] 8 | pull_request: 9 | branches: [main] 10 | workflow_dispatch: 11 | inputs: 12 | reflex_dep: 13 | description: "Reflex dep (raw pip spec)" 14 | 15 | jobs: 16 | list-templates: 17 | uses: ./.github/workflows/list-templates.yml 18 | 19 | check-export: 20 | needs: [list-templates] 21 | strategy: 22 | matrix: 23 | folder: ${{ fromJSON(needs.list-templates.outputs.templates) }} 24 | fail-fast: false 25 | runs-on: ubuntu-latest 26 | steps: 27 | - uses: actions/checkout@v4 28 | with: 29 | submodules: recursive 30 | - uses: actions/setup-python@v5 31 | with: 32 | python-version: 3.10.16 33 | - id: export-check 34 | run: | 35 | f=${{ matrix.folder }} 36 | if [[ ! -d $f ]]; then 37 | echo "$f is not a directory!" 38 | exit 1 39 | fi 40 | 41 | cd "$f" 42 | 43 | if [[ ! -f requirements.txt ]]; then 44 | echo "requirements.txt is MISSING" 45 | exit 1 46 | fi 47 | 48 | if !( grep -w "^reflex" requirements.txt >/dev/null 2>&1 ); then 49 | echo "requirements.txt does not contain 'reflex'" 50 | exit 1 51 | fi 52 | 53 | python -m venv venv 54 | source venv/bin/activate 55 | 56 | pip install '${{ github.event.inputs.reflex_dep || env.REFLEX_DEP }}' -r requirements.txt 57 | 58 | export OPENAI_API_KEY="dummy" 59 | reflex init 60 | reflex export | tee export_logs.txt 61 | for a in frontend.zip backend.zip; do 62 | if unzip -t "$a"; then 63 | echo "$a prepared as expected" 64 | else 65 | echo "ERROR: $a is not a valid zip file" 66 | exit 1 67 | fi 68 | done 69 | 70 | - name: Check for DeprecationWarning in logs 71 | run: | 72 | cd ${{ matrix.folder }} 73 | dep_lines=$(grep -i "DeprecationWarning:" export_logs.txt || true) 74 | if [ -n "$dep_lines" ]; then 75 | echo "Found Deprecation warning:" 76 | echo "$dep_lines" 77 | exit 1 78 | else 79 | echo "No deprecated code, all good." 80 | fi 81 | -------------------------------------------------------------------------------- /.github/workflows/create-artifacts.yml: -------------------------------------------------------------------------------- 1 | name: Zip and Publish Subfolders 2 | on: 3 | release: 4 | types: [published] 5 | jobs: 6 | zip-and-publish: 7 | runs-on: ubuntu-latest 8 | outputs: 9 | files: ${{ steps.list_zip_files.outputs.files }} 10 | steps: 11 | - name: Checkout code with submodules 12 | uses: actions/checkout@v3 13 | with: 14 | submodules: recursive 15 | - name: Create zip files for each subfolder 16 | run: | 17 | for dir in $(find . -mindepth 1 -maxdepth 1 -type d); do 18 | zip -r "${dir##*/}.zip" "$dir" 19 | done 20 | - name: List zip files 21 | id: list_zip_files 22 | run: | 23 | files=$(ls *.zip | jq -R . | jq -s . | tr -d '\n' | tr -d ' ') 24 | echo "files=$files" >> $GITHUB_OUTPUT 25 | shell: bash 26 | - name: Upload zip files as artifacts 27 | uses: actions/upload-artifact@v4 28 | with: 29 | name: zip-files 30 | path: "*.zip" 31 | 32 | upload-artifacts: 33 | needs: zip-and-publish 34 | runs-on: ubuntu-latest 35 | strategy: 36 | matrix: 37 | file: ${{ fromJson(needs.zip-and-publish.outputs.files) }} 38 | steps: 39 | - name: Download zip files 40 | uses: actions/download-artifact@v4 41 | with: 42 | name: zip-files 43 | - name: Debug output (file existence check) 44 | run: | 45 | if [ -e "${{ matrix.file }}" ]; then 46 | echo "File '${{ matrix.file }}' exists." 47 | else 48 | echo "File '${{ matrix.file }}' does not exist." 49 | fi 50 | shell: bash 51 | - name: Upload artifact 52 | uses: actions/upload-release-asset@v1 53 | env: 54 | GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }} 55 | with: 56 | upload_url: ${{ github.event.release.upload_url }} 57 | asset_path: ./${{ matrix.file }} 58 | asset_name: ${{ matrix.file }} 59 | asset_content_type: application/zip 60 | 61 | upload-templates-json: 62 | needs: upload-artifacts 63 | runs-on: ubuntu-latest 64 | steps: 65 | - name: Checkout repository 66 | uses: actions/checkout@v2 67 | - name: Upload templates.json as release asset 68 | uses: actions/upload-release-asset@v1 69 | env: 70 | GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }} 71 | with: 72 | upload_url: ${{ github.event.release.upload_url }} 73 | asset_path: ./templates.json 74 | asset_name: templates.json 75 | asset_content_type: application/json -------------------------------------------------------------------------------- /.github/workflows/list-templates.yml: -------------------------------------------------------------------------------- 1 | on: 2 | workflow_call: 3 | outputs: 4 | templates: 5 | description: 'List of templates' 6 | value: ${{ jobs.list-templates.outputs.templates }} 7 | jobs: 8 | list-templates: 9 | runs-on: ubuntu-latest 10 | outputs: 11 | templates: ${{ steps.generate-matrix.outputs.templates }} 12 | steps: 13 | - uses: actions/checkout@v4 14 | - name: List all templates 15 | id: generate-matrix 16 | run: | 17 | TEMPLATES="$(find . -not -name '.*' -maxdepth 1 -type d | cut -f2 -d/ | sort | grep -vw chakra_apps | jq -R | jq -s -c)" 18 | TEMPLATES=$(echo "$TEMPLATES" | jq -c '.') # Ensure valid JSON format 19 | echo "templates=$TEMPLATES" >> $GITHUB_OUTPUT 20 | - name: Debug output 21 | run: | 22 | echo "Templates: ${{ steps.generate-matrix.outputs.templates }}" -------------------------------------------------------------------------------- /.github/workflows/pre-commit.yml: -------------------------------------------------------------------------------- 1 | name: pre-commit 2 | 3 | on: 4 | pull_request: 5 | branches: ['main'] 6 | 7 | jobs: 8 | pre-commit: 9 | timeout-minutes: 30 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v4 13 | - uses: actions/setup-python@v4 14 | with: 15 | python-version: '3.12' 16 | 17 | - run: | 18 | pip install pre-commit 19 | pre-commit run --all-files 20 | -------------------------------------------------------------------------------- /.github/workflows/publish-build.yml: -------------------------------------------------------------------------------- 1 | name: Publish Templates 2 | 3 | on: 4 | workflow_dispatch: 5 | inputs: 6 | environment: 7 | description: 'Choose deployment environment' 8 | required: true 9 | type: choice 10 | options: 11 | - development 12 | - staging 13 | - production 14 | release_tag: 15 | description: 'Release tag (leave empty for latest)' 16 | required: false 17 | type: string 18 | 19 | jobs: 20 | prepare-release-info: 21 | runs-on: ubuntu-latest 22 | outputs: 23 | release_info: ${{ steps.get-release.outputs.result }} 24 | steps: 25 | - name: Get release info 26 | id: get-release 27 | uses: actions/github-script@v6 28 | with: 29 | github-token: ${{ secrets.GITHUB_TOKEN }} 30 | result-encoding: json 31 | script: | 32 | let release; 33 | if ('${{ github.event.inputs.release_tag }}') { 34 | release = await github.rest.repos.getReleaseByTag({ 35 | owner: context.repo.owner, 36 | repo: context.repo.repo, 37 | tag: '${{ github.event.inputs.release_tag }}' 38 | }); 39 | } else { 40 | release = await github.rest.repos.getLatestRelease({ 41 | owner: context.repo.owner, 42 | repo: context.repo.repo 43 | }); 44 | } 45 | console.log(release.data.tag_name); 46 | return release.data.tag_name; 47 | 48 | trigger-second-repo: 49 | needs: prepare-release-info 50 | runs-on: ubuntu-latest 51 | steps: 52 | - name: Trigger second repo 53 | uses: peter-evans/repository-dispatch@v2 54 | with: 55 | token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} 56 | repository: reflex-dev/flexgen 57 | event-type: release 58 | client-payload: '{"release": ${{ needs.prepare-release-info.outputs.release_info }}, "environment": "${{ github.event.inputs.environment }}"}' 59 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.db 2 | *.py[cod] 3 | .venv/ 4 | .vscode/ 5 | .web 6 | __pycache__/ 7 | venv/ 8 | */.DS_Store 9 | .idea -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "reflex-chat"] 2 | path = reflex-chat 3 | url = https://github.com/reflex-dev/reflex-chat.git 4 | [submodule "reflex-llamaindex-template"] 5 | path = reflex-llamaindex-template 6 | url = https://github.com/reflex-dev/reflex-llamaindex-template.git 7 | -------------------------------------------------------------------------------- /.pre-commit-config.yaml: -------------------------------------------------------------------------------- 1 | fail_fast: true 2 | 3 | repos: 4 | - repo: https://github.com/charliermarsh/ruff-pre-commit 5 | rev: v0.8.5 6 | hooks: 7 | - id: ruff-format 8 | args: ["."] 9 | - id: ruff 10 | args: ["--fix", "--exit-non-zero-on-fix"] 11 | 12 | - repo: https://github.com/codespell-project/codespell 13 | rev: v2.3.0 14 | hooks: 15 | - id: codespell 16 | args: ["."] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Reflex Templates 2 | 3 | A repository of Reflex template apps. 4 | 5 | 6 | # How to deploy templates 7 | If this a template for build, you must include a `preview.png` or `preview.webp` which will be used as the preview image. 8 | 9 | To get a url for your app, you must make a release with a valid reflex version. This can be difficult since part of the reflex opensource deployment pipeline is to create a release for every version to make sure that all templates work with it. So to get around this you must do a few things: 10 | ## Crafting a new release 11 | - Delete a release 12 | - Delete the relating tag 13 | - Recreate the deleted release and tag 14 | 15 | **NOTE:** Ideally do not delete the most recent release as to lessen the impact of this. ALSO if you are not deleting the most recent DO NOT mark the release as latest 16 | 17 | **Be warned that upon deleting the release on this repo will remove all the templates for anyone using that version of reflex until the release is recreated and all jobs related to the release are complete.** 18 | 19 | ## Get deployed URL 20 | One of the jobs from a release is to deploy the template. This will result in a url that anyone can go to, to view the template. You can find this either in the action logs or by searching for it in the Templates project in Cloud. 21 | 22 | ## Updating templates json 23 | Once you have completed all of the above steps you can now accurately update the `templates.json` 24 | Add a new/update the object in this file to have all the accurate information required. 25 | 26 | ## Getting updated packages 27 | Now that you have an accurate `templates.json` in main you can now craft a new phony release. This release unlike the other does not need to be of a real reflex version. It can, but weather it is or is not will not have any impact on the remaining steps. 28 | Once you have drafted a new release, and all the actions have finished (the deploy will fail if this is a phony release version). 29 | Then you can either kick off the deploy job on templates for `Publish Templates` or you can kick off the sister job in the build repo. 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /account_management_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | *.db 3 | *.py[cod] 4 | .web 5 | __pycache__ 6 | __pycache__/ 7 | assets/external/ 8 | .DS_Store 9 | .idea 10 | -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/account_management_dashboard/__init__.py -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/account_management_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from account_management_dashboard.components.account_section import ( 4 | account_category_section, 5 | ) 6 | from account_management_dashboard.components.header import header_component 7 | from account_management_dashboard.components.net_worth_graph import ( 8 | net_worth_graph_component, 9 | ) 10 | from account_management_dashboard.components.net_worth_summary import ( 11 | net_worth_summary, 12 | ) 13 | from account_management_dashboard.components.sidebar import sidebar 14 | from account_management_dashboard.components.summary_section import summary_section 15 | from account_management_dashboard.states.account_state import AccountState 16 | 17 | 18 | def index() -> rx.Component: 19 | """The main page of the financial dashboard.""" 20 | return rx.el.div( 21 | sidebar(), 22 | rx.el.main( 23 | header_component(), 24 | net_worth_summary(), 25 | net_worth_graph_component(), 26 | rx.el.div( 27 | rx.el.div( 28 | rx.foreach( 29 | AccountState.account_categories, 30 | account_category_section, 31 | ), 32 | class_name="flex-grow pr-0 lg:pr-8 mb-8 lg:mb-0", 33 | ), 34 | rx.el.div( 35 | summary_section(), 36 | class_name="w-full lg:w-80 flex-shrink-0", 37 | ), 38 | class_name="flex flex-col lg:flex-row", 39 | ), 40 | rx.toast.provider(), 41 | class_name="p-8 flex flex-col w-full min-h-[100vh] overflow-y-auto", 42 | ), 43 | class_name="flex flex-row bg-gray-50 min-h-screen w-full", 44 | ) 45 | 46 | 47 | app = rx.App( 48 | theme=rx.theme( 49 | appearance="light", 50 | has_background=False, 51 | radius="medium", 52 | accent_color="indigo", 53 | ) 54 | ) 55 | app.add_page(index, title="Accounts Dashboard") 56 | -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/account_management_dashboard/components/__init__.py -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/components/header.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from account_management_dashboard.states.account_state import AccountState 4 | 5 | 6 | def header_component() -> rx.Component: 7 | """The header component above the main content area.""" 8 | return rx.el.div( 9 | rx.el.h1( 10 | "Accounts", 11 | class_name="text-2xl font-semibold text-gray-900", 12 | ), 13 | rx.el.div( 14 | rx.el.button( 15 | rx.icon( 16 | tag="refresh_cw", 17 | class_name="w-4 h-4 mr-2", 18 | ), 19 | "Refresh all", 20 | on_click=AccountState.refresh_all, 21 | class_name="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition", 22 | ), 23 | rx.el.button( 24 | rx.icon(tag="plus", class_name="w-4 h-4 mr-2"), 25 | "Add account", 26 | on_click=AccountState.add_account, 27 | class_name="flex items-center px-4 py-2 text-sm font-medium text-white bg-orange-500 border border-transparent rounded-md shadow-sm hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition", 28 | ), 29 | class_name="flex items-center space-x-3 max-md:hidden", 30 | ), 31 | class_name="w-full flex items-center justify-between pb-6 border-b border-gray-200 mb-6", 32 | ) 33 | -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/components/net_worth_summary.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from account_management_dashboard.states.account_state import AccountState 4 | 5 | 6 | def net_worth_summary() -> rx.Component: 7 | """Displays the net worth and its change.""" 8 | change_color = rx.cond( 9 | AccountState.net_worth_change_amount >= 0, 10 | "text-green-600", 11 | "text-red-600", 12 | ) 13 | change_icon = rx.cond( 14 | AccountState.net_worth_change_amount >= 0, 15 | "arrow_up", 16 | "arrow_down", 17 | ) 18 | change_sign = rx.cond(AccountState.net_worth_change_amount >= 0, "+", "") 19 | return rx.el.div( 20 | rx.el.div( 21 | rx.el.span( 22 | "NET WORTH", 23 | class_name="text-xs font-medium text-gray-500 uppercase tracking-wider mr-2", 24 | ), 25 | rx.icon( 26 | tag="info", 27 | size=14, 28 | class_name="text-gray-400 cursor-pointer", 29 | ), 30 | class_name="flex items-center mb-1", 31 | ), 32 | rx.el.div( 33 | rx.el.span( 34 | "$", 35 | AccountState.net_worth.to_string(), 36 | class_name="text-3xl font-bold text-gray-900 mr-3", 37 | ), 38 | rx.el.div( 39 | rx.icon( 40 | tag=change_icon, 41 | size=16, 42 | class_name=f"mr-1 {change_color}", 43 | ), 44 | rx.el.span( 45 | change_sign, 46 | "$", 47 | AccountState.net_worth_change_amount.to_string(), 48 | f" ({AccountState.net_worth_change_percent.to_string()}%)", 49 | class_name=f"text-sm font-medium {change_color}", 50 | ), 51 | rx.el.span( 52 | " 1 month change", 53 | class_name="text-sm text-gray-500 ml-1", 54 | ), 55 | class_name="flex items-center", 56 | ), 57 | class_name="flex flex-wrap items-baseline gap-y-2", 58 | ), 59 | class_name="mb-6", 60 | ) 61 | -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/models/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/account_management_dashboard/models/__init__.py -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/models/models.py: -------------------------------------------------------------------------------- 1 | from typing import List, TypedDict 2 | 3 | 4 | class NetWorthDataPoint(TypedDict): 5 | date: str 6 | value: float 7 | 8 | 9 | class SparklinePoint(TypedDict): 10 | value: float 11 | 12 | 13 | class AccountDetail(TypedDict): 14 | id: str 15 | name: str 16 | type: str 17 | balance: float 18 | last_updated: str 19 | logo_url: str 20 | sparkline_data: List[SparklinePoint] 21 | 22 | 23 | class AccountCategory(TypedDict): 24 | category_name: str 25 | total_balance: float 26 | one_month_change: float 27 | one_month_change_percent: float 28 | accounts: List[AccountDetail] 29 | is_open: bool 30 | 31 | 32 | class AssetLiabilitySummaryItem(TypedDict): 33 | name: str 34 | value: float 35 | color: str 36 | -------------------------------------------------------------------------------- /account_management_dashboard/account_management_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/account_management_dashboard/states/__init__.py -------------------------------------------------------------------------------- /account_management_dashboard/assets/design_white_simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/assets/design_white_simple.png -------------------------------------------------------------------------------- /account_management_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /account_management_dashboard/assets/simple_logo_bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/assets/simple_logo_bank.png -------------------------------------------------------------------------------- /account_management_dashboard/assets/simple_minimalist_bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/assets/simple_minimalist_bank.png -------------------------------------------------------------------------------- /account_management_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/account_management_dashboard/preview.webp -------------------------------------------------------------------------------- /account_management_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | python-dateutil>=2.9.0 -------------------------------------------------------------------------------- /account_management_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="account_management_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /admin_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .venv/ 6 | venv/ 7 | .vscode/ 8 | .web 9 | __pycache__/ 10 | .DS_Store 11 | .idea/ 12 | -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_dashboard/admin_dashboard/__init__.py -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/admin_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | import reflex.components.radix.themes as rdxt 3 | 4 | from admin_dashboard.components.customer_details import customer_details 5 | from admin_dashboard.components.data_table import data_table 6 | from admin_dashboard.components.navigation import navigation 7 | 8 | 9 | def index() -> rx.Component: 10 | """The main page layout for the dashboard.""" 11 | return rdxt.theme( 12 | rx.el.div( 13 | navigation(), 14 | rx.el.div( 15 | data_table(), 16 | customer_details(), 17 | class_name="grid grid-cols-1 md:grid-cols-3", 18 | ), 19 | class_name="bg-gray-100 w-full h-screen", 20 | ), 21 | appearance="light", 22 | ) 23 | 24 | 25 | def mock_page(title: str) -> rx.Component: 26 | """Creates a simple mock page layout.""" 27 | return rdxt.theme( 28 | rx.el.div( 29 | navigation(), 30 | rx.el.div( 31 | rx.el.h1( 32 | title, 33 | class_name="text-2xl font-bold mb-4 text-gray-800", 34 | ), 35 | rx.el.p( 36 | f"Content for {title} goes here.", 37 | class_name="text-gray-600", 38 | ), 39 | class_name="p-6", 40 | ), 41 | class_name="bg-gray-100 h-screen", 42 | ), 43 | appearance="light", 44 | ) 45 | 46 | 47 | def sales_pipeline_page() -> rx.Component: 48 | """Mock Sales Pipeline page.""" 49 | return mock_page("Sales Pipeline") 50 | 51 | 52 | def hr_portal_page() -> rx.Component: 53 | """Mock HR Portal page.""" 54 | return mock_page("HR Portal") 55 | 56 | 57 | def customer_success_hub_page() -> rx.Component: 58 | """Mock Customer Success Hub page.""" 59 | return mock_page("Customer Success Hub") 60 | 61 | 62 | app = rx.App(theme=rx.theme(appearance="light"), stylesheets=[]) 63 | app.add_page(index, route="/") 64 | app.add_page(sales_pipeline_page, route="/sales-pipeline") 65 | app.add_page(hr_portal_page, route="/hr-portal") 66 | app.add_page(customer_success_hub_page, route="/customer-success-hub") 67 | -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_dashboard/admin_dashboard/components/__init__.py -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/components/navigation.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from admin_dashboard.states.navigation_state import NavigationState 4 | 5 | 6 | def navigation_item(text: str, href: str) -> rx.Component: 7 | """Creates a styled navigation link.""" 8 | return rx.el.a( 9 | text, 10 | href=href, 11 | class_name=rx.cond( 12 | NavigationState.current_page == href, 13 | "px-4 py-2 text-sm font-medium text-white bg-emerald-700 rounded-md shadow-sm whitespace-nowrap sm:whitespace-normal", 14 | "px-4 py-2 text-sm font-medium text-emerald-100 hover:bg-emerald-600 hover:text-white rounded-md transition-colors duration-150 ease-in-out whitespace-nowrap sm:whitespace-normal", 15 | ), 16 | ) 17 | 18 | 19 | def navigation() -> rx.Component: 20 | """The top navigation bar component.""" 21 | return rx.el.div( 22 | rx.el.div( 23 | rx.el.img( 24 | src="https://avatars.githubusercontent.com/u/104714959?s=200&v=4", 25 | class_name="h-8 w-auto mr-4 max-md:hidden", 26 | alt="App Logo", 27 | ), 28 | navigation_item("Sales Pipeline", "/sales-pipeline"), 29 | navigation_item("Customer Admin Panel", "/"), 30 | navigation_item("HR Portal", "/hr-portal"), 31 | navigation_item( 32 | "Customer Success Hub", 33 | "/customer-success-hub", 34 | ), 35 | class_name="flex items-center space-x-2 overflow-x-auto w-full", 36 | ), 37 | class_name="bg-emerald-800 px-6 py-2 shadow-md sticky top-0 left-0 w-full z-50 h-[56px]", 38 | ) 39 | -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/models/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_dashboard/admin_dashboard/models/__init__.py -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/models/models.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | from typing import ( 3 | Dict, 4 | List, 5 | Optional, 6 | TypedDict, 7 | Union, 8 | ) 9 | 10 | 11 | class CustomerData(TypedDict): 12 | id: int 13 | customer_name: str 14 | next_renewal: str 15 | revenue: float 16 | licenses: int 17 | active_licenses: int 18 | active_license_growth: int 19 | license_growth: int 20 | industry: str 21 | platform: str 22 | usage_history: List[Dict[str, Union[str, int]]] 23 | next_renewal_date: Optional[datetime] 24 | -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_dashboard/admin_dashboard/states/__init__.py -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/states/navigation_state.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | class NavigationState(rx.State): 5 | """State for managing navigation.""" 6 | 7 | @rx.var 8 | def current_page(self) -> str: 9 | """Get the current page route.""" 10 | return self.router.page.path 11 | -------------------------------------------------------------------------------- /admin_dashboard/admin_dashboard/states/utils.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | from typing import Optional 3 | 4 | 5 | def parse_date(date_str: str) -> Optional[datetime]: 6 | """Helper function to parse date strings into datetime objects. 7 | Handles common formats found in the data. Returns None if parsing fails. 8 | """ 9 | try: 10 | return datetime.strptime(date_str, "%b %d, %Y") 11 | except ValueError: 12 | try: 13 | return datetime.strptime(date_str, "%Y-%m-%d") 14 | except ValueError: 15 | return None 16 | -------------------------------------------------------------------------------- /admin_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /admin_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_dashboard/preview.webp -------------------------------------------------------------------------------- /admin_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | -------------------------------------------------------------------------------- /admin_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="admin_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /admin_panel/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | __pycache__/ 3 | *.py[cod] 4 | assets/external/ 5 | .web 6 | *.db 7 | -------------------------------------------------------------------------------- /admin_panel/admin_panel/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_panel/admin_panel/__init__.py -------------------------------------------------------------------------------- /admin_panel/admin_panel/admin_panel.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from admin_panel.components.customer_form import customer_edit_form 4 | from admin_panel.components.customer_table import customer_table 5 | from admin_panel.states.customer_state import CustomerState 6 | 7 | 8 | def index() -> rx.Component: 9 | return rx.el.div( 10 | rx.el.main( 11 | rx.el.div( 12 | rx.cond( 13 | CustomerState.error_message != "", 14 | rx.el.div( 15 | CustomerState.error_message, 16 | class_name=rx.cond( 17 | CustomerState.error_message.contains("Failed") 18 | | CustomerState.error_message.contains( 19 | "Failed to simulate" 20 | ), 21 | "mb-4 p-4 rounded-md text-sm bg-red-100 border border-red-300 text-red-700 shadow", 22 | "mb-4 p-4 rounded-md text-sm bg-yellow-100 border border-yellow-300 text-yellow-700 shadow", 23 | ), 24 | ), 25 | rx.fragment(), 26 | ), 27 | customer_table(), 28 | customer_edit_form(), 29 | class_name="mx-auto w-full lg:p-8 p-4", 30 | ) 31 | ), 32 | class_name="min-h-screen bg-gray-100 font-['Inter']", 33 | ) 34 | 35 | 36 | app = rx.App( 37 | theme=rx.theme(appearance="light"), 38 | head_components=[ 39 | rx.el.link( 40 | rel="preconnect", 41 | href="https://fonts.googleapis.com", 42 | ), 43 | rx.el.link( 44 | rel="preconnect", 45 | href="https://fonts.gstatic.com", 46 | crossorigin="", 47 | ), 48 | rx.el.link( 49 | href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap", 50 | rel="stylesheet", 51 | ), 52 | ], 53 | ) 54 | app.add_page(index, route="/", on_load=CustomerState.fetch_customers) 55 | -------------------------------------------------------------------------------- /admin_panel/admin_panel/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_panel/admin_panel/components/__init__.py -------------------------------------------------------------------------------- /admin_panel/admin_panel/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_panel/admin_panel/states/__init__.py -------------------------------------------------------------------------------- /admin_panel/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_panel/assets/favicon.ico -------------------------------------------------------------------------------- /admin_panel/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_panel/assets/preview.png -------------------------------------------------------------------------------- /admin_panel/blocks/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/admin_panel/blocks/__init__.py -------------------------------------------------------------------------------- /admin_panel/requirements.txt: -------------------------------------------------------------------------------- 1 | 2 | reflex>=0.7.13a1 3 | pandas -------------------------------------------------------------------------------- /admin_panel/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="admin_panel", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /ai_image_gen/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .venv/ 6 | venv/ 7 | .vscode/ 8 | .web 9 | __pycache__/ 10 | -------------------------------------------------------------------------------- /ai_image_gen/README.md: -------------------------------------------------------------------------------- 1 | # AI Image Generator 2 | 3 | This Reflex template uses [Replicate](https://replicate.com/) to generate images. 4 | 5 | ## Setup 6 | 7 | 1. Create your API token [here](https://replicate.com/account/api-tokens). 8 | 9 | 2. Export the API token as an environment variable: 10 | 11 | ``` 12 | export REPLICATE_API_TOKEN=your_api_token_here 13 | ``` 14 | 15 | Replace `your_api_key_here` with the actual API key you obtained from Replicate. 16 | 17 | 3. You're now ready to use the AI image generator! 18 | 19 | -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/ai_image_gen/__init__.py -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/ai_image_gen.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from . import styles 4 | 5 | # Import all the pages. 6 | from .pages import * 7 | 8 | app = rx.App( 9 | style=styles.base_style, 10 | stylesheets=styles.base_stylesheets, 11 | html_lang="en", 12 | html_custom_attrs={"className": "!scroll-smooth"}, 13 | theme=rx.theme( 14 | appearance="inherit", 15 | has_background=True, 16 | scaling="100%", 17 | radius="none", 18 | accent_color="violet", 19 | ), 20 | ) 21 | -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/ai_image_gen/backend/__init__.py -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/ai_image_gen/components/__init__.py -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/components/react_zoom.py: -------------------------------------------------------------------------------- 1 | """Reflex custom component ImageZoom.""" 2 | 3 | # Imported from https://github.com/picklelo/reflex-image-zoom 4 | 5 | import reflex as rx 6 | 7 | 8 | class ImageZoom(rx.Component): 9 | """ImageZoom component.""" 10 | 11 | # The React library to wrap. 12 | library = "react-medium-image-zoom" 13 | 14 | # The React component tag. 15 | tag = "Zoom" 16 | 17 | # If the tag is the default export from the module, you must set is_default = True. 18 | # This is normally used when components don't have curly braces around them when importing. 19 | is_default = True 20 | 21 | 22 | image_zoom = ImageZoom.create 23 | -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/pages/__init__.py: -------------------------------------------------------------------------------- 1 | from .index import index 2 | 3 | __all__ = ["index"] 4 | -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/styles.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | sidebar_width = ["100%", "100%", "100%", "375px", "450px"] 4 | border = f"1.5px solid {rx.color('gray', 5, True)}" 5 | content_max_width = "1280px" 6 | sidebar_bg = rx.color("gray", 2) 7 | content_bg_color = rx.color("gray", 1) 8 | 9 | image_style = { 10 | "decoding": "auto", 11 | "loading": "eager", 12 | "vertical_align": "middle", 13 | "object_fit": "contain", 14 | "width": "auto", 15 | } 16 | 17 | image_height = ["400px", "500px", "650px", "850px"] 18 | 19 | image_props = { 20 | "style": image_style, 21 | "width": "100%", 22 | "height": image_height, 23 | } 24 | 25 | button_props = { 26 | "size": "2", 27 | "cursor": "pointer", 28 | "variant": "outline", 29 | } 30 | 31 | box_shadow = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" 32 | 33 | base_stylesheets = [ 34 | "https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;600;700;800&display=swap", 35 | "react-zoom.css", 36 | ] 37 | 38 | base_style = { 39 | "font_family": "Roboto Flex", 40 | rx.icon: { 41 | "stroke_width": "1.75px", 42 | }, 43 | } 44 | -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/views/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/ai_image_gen/views/__init__.py -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/views/mobile_ui.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from .. import styles 4 | from ..components.options_ui import ( 5 | advanced_options, 6 | generate_button, 7 | output_selector, 8 | prompt_input, 9 | size_selector, 10 | style_selector, 11 | ) 12 | 13 | 14 | def mobile_ui(): 15 | return rx.box( 16 | rx.vstack( 17 | rx.vstack( 18 | prompt_input(), 19 | size_selector(), 20 | output_selector(), 21 | style_selector(), 22 | advanced_options(), 23 | width="100%", 24 | height="100%", 25 | align_items="flex-start", 26 | padding="1em", 27 | spacing="6", 28 | ), 29 | generate_button(), 30 | width="100%", 31 | spacing="0", 32 | ), 33 | display=["block", "block", "block", "none"], 34 | width="100%", 35 | height="100%", 36 | bg=rx.color("gray", 2), 37 | border_top=styles.border, 38 | ) 39 | -------------------------------------------------------------------------------- /ai_image_gen/ai_image_gen/views/sidebar.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from .. import styles 4 | from ..components.options_ui import ( 5 | advanced_options, 6 | generate_button, 7 | output_selector, 8 | prompt_input, 9 | sidebar_header, 10 | size_selector, 11 | style_selector, 12 | ) 13 | 14 | 15 | def sidebar(): 16 | return rx.box( 17 | rx.vstack( 18 | sidebar_header(), 19 | rx.flex( 20 | rx.vstack( 21 | prompt_input(), 22 | size_selector(), 23 | output_selector(), 24 | style_selector(), 25 | advanced_options(), 26 | width="100%", 27 | overflow_y="auto", 28 | align="start", 29 | padding="1em", 30 | spacing="6", 31 | ), 32 | overflow_y="auto", 33 | flex="1", 34 | height="100%", 35 | width="100%", 36 | ), 37 | generate_button(), 38 | width="100%", 39 | height="100%", 40 | spacing="0", 41 | ), 42 | display=["none", "none", "none", "block"], 43 | width=styles.sidebar_width, 44 | height="100vh", 45 | position="sticky", 46 | top="0px", 47 | left="0px", 48 | bg=styles.sidebar_bg, 49 | border_right=styles.border, 50 | ) 51 | -------------------------------------------------------------------------------- /ai_image_gen/assets/default.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/default.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/favicon.ico -------------------------------------------------------------------------------- /ai_image_gen/assets/reflex_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ai_image_gen/assets/reflex_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/anime.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/anime.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/cartoon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/cartoon.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/cinematic.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/cinematic.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/conceptart.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/conceptart.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/cyberpunk.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/cyberpunk.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/digitalart.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/digitalart.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/fantasy.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/fantasy.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/fortnite.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/fortnite.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/funkopop.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/funkopop.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/lowpoly.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/lowpoly.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/photographic.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/photographic.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/postapocalyptic.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/postapocalyptic.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/radiant.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/radiant.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/sketch.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/sketch.webp -------------------------------------------------------------------------------- /ai_image_gen/assets/styles/steampunk.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ai_image_gen/assets/styles/steampunk.webp -------------------------------------------------------------------------------- /ai_image_gen/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | replicate==0.26.0 3 | reflex-img-comparison-slider>=0.0.1 4 | requests -------------------------------------------------------------------------------- /ai_image_gen/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="ai_image_gen", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /api_admin_panel/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | *.db 3 | *.py[cod] 4 | .web 5 | __pycache__ 6 | __pycache__/ 7 | assets/external/ 8 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/__init__.py: -------------------------------------------------------------------------------- 1 | """Base template for Reflex.""" 2 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/api_admin_panel.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from api_admin_panel.pages import * 4 | 5 | 6 | class State(rx.State): 7 | """Define empty state to allow access to rx.State.router.""" 8 | 9 | 10 | app = rx.App() 11 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/api_admin_panel/api_admin_panel/components/__init__.py -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/components/drawer.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from api_admin_panel.states.queries import QueryAPI 4 | 5 | 6 | def render_data(data: tuple[str, str]): 7 | return rx.vstack( 8 | rx.text(data[0], weight="bold"), 9 | rx.input( 10 | value=data[1], 11 | width="100%", 12 | on_change=lambda value: QueryAPI.update_data(value, data), 13 | ), 14 | width="100%", 15 | spacing="2", 16 | ) 17 | 18 | 19 | def render_drawer_buttons(name: str, color: str, function: callable): 20 | return rx.badge( 21 | rx.text(name, width="100%", text_align="center"), 22 | color_scheme=color, 23 | on_click=function, 24 | variant="surface", 25 | padding="0.75em 1.25em", 26 | width="100%", 27 | cursor="pointer", 28 | ) 29 | 30 | 31 | def render_drawer(): 32 | return rx.drawer.root( 33 | rx.drawer.overlay(z_index="5"), 34 | rx.drawer.portal( 35 | rx.drawer.content( 36 | rx.vstack( 37 | rx.foreach(QueryAPI.selected_entry, render_data), 38 | rx.vstack( 39 | render_drawer_buttons( 40 | "Commit", "grass", QueryAPI.commit_changes 41 | ), 42 | render_drawer_buttons("Close", "ruby", QueryAPI.delta_drawer), 43 | padding="1em 0.5em", 44 | width="inherit", 45 | ), 46 | bg=rx.color_mode_cond("#faf9fb", "#1a181a"), 47 | height="100%", 48 | width="100%", 49 | padding="1.25em", 50 | ), 51 | top="auto", 52 | left="auto", 53 | height="100%", 54 | width="25em", 55 | on_interact_outside=QueryAPI.delta_drawer(), 56 | ), 57 | ), 58 | direction="right", 59 | open=QueryAPI.is_open, 60 | ) 61 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/components/navbar.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from api_admin_panel.states.base import BaseState 4 | from api_admin_panel.styles import text 5 | 6 | navbar: dict[str, str] = { 7 | "width": "100%", 8 | "padding": "1em 1.15em", 9 | "justify_content": "space-between", 10 | "bg": rx.color_mode_cond( 11 | "rgba(255, 255, 255, 0.81)", 12 | "rgba(18, 17, 19, 0.81)", 13 | ), 14 | "align_items": "center", 15 | "border_bottom": "1px solid rgba(46, 46, 46, 0.51)", 16 | } 17 | 18 | 19 | def render_navbar(): 20 | return rx.hstack( 21 | rx.hstack( 22 | rx.box( 23 | rx.text( 24 | "REST API Admin Panel", 25 | font_size="var(--chakra-fontSizes-lg)", 26 | **text, 27 | ), 28 | ), 29 | display="flex", 30 | align_items="center", 31 | ), 32 | rx.hstack( 33 | rx.button( 34 | BaseState.is_request, on_click=BaseState.toggle_query, cursor="pointer" 35 | ), 36 | rx.color_mode.button(), 37 | align_items="center", 38 | ), 39 | **navbar, 40 | ) 41 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/pages/__init__.py: -------------------------------------------------------------------------------- 1 | from .dashboard import dashboard 2 | 3 | __all__ = ["dashboard"] 4 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/pages/dashboard.py: -------------------------------------------------------------------------------- 1 | """The dashboard page.""" 2 | 3 | import reflex as rx 4 | 5 | from api_admin_panel.components.navbar import render_navbar 6 | from api_admin_panel.components.output import render_output 7 | from api_admin_panel.components.query import render_query_component 8 | from api_admin_panel.states.queries import QueryAPI 9 | 10 | 11 | @rx.page("/", on_load=QueryAPI.run_get_request) 12 | def dashboard() -> rx.Component: 13 | """The dashboard page. 14 | 15 | Returns: 16 | The UI for the dashboard page. 17 | 18 | """ 19 | return rx.vstack( 20 | render_navbar(), 21 | rx.hstack( 22 | render_query_component(), 23 | render_output(), 24 | width="100%", 25 | display="flex", 26 | flex_wrap="wrap", 27 | spacing="6", 28 | padding="2em 1em", 29 | ), 30 | spacing="4", 31 | ) 32 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/api_admin_panel/api_admin_panel/states/__init__.py -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/states/base.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | class BaseState(rx.State): 5 | query_component_toggle: str = "none" 6 | 7 | is_request: str = "New Request" 8 | 9 | def toggle_query(self): 10 | self.query_component_toggle = ( 11 | "flex" if self.query_component_toggle == "none" else "none" 12 | ) 13 | 14 | self.is_request = ( 15 | "New Request" if self.query_component_toggle == "none" else "Close Request" 16 | ) 17 | -------------------------------------------------------------------------------- /api_admin_panel/api_admin_panel/styles.py: -------------------------------------------------------------------------------- 1 | """Styles for the app.""" 2 | 3 | text: dict[str, str] = { 4 | "font_family": "var(--chakra-fonts-branding)", 5 | "font_weight": "var(--chakra-fontWeights-black)", 6 | } 7 | -------------------------------------------------------------------------------- /api_admin_panel/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/api_admin_panel/assets/favicon.ico -------------------------------------------------------------------------------- /api_admin_panel/assets/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /api_admin_panel/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | reflex-chakra 3 | -------------------------------------------------------------------------------- /api_admin_panel/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="api_admin_panel", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /business_analytics_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .web 2 | *.db 3 | .states 4 | assets/external/ 5 | *.py[cod] 6 | __pycache__/ 7 | .DS_Store 8 | .idea/ 9 | -------------------------------------------------------------------------------- /business_analytics_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/business_analytics_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/business_analytics_dashboard/business_analytics_dashboard/__init__.py -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/business_analytics_dashboard.py: -------------------------------------------------------------------------------- 1 | """Basic Dashboard App""" 2 | 3 | import reflex as rx 4 | 5 | from business_analytics_dashboard.components.account_executive_metrics import ( 6 | account_executive_metrics_table, 7 | ) 8 | from business_analytics_dashboard.components.average_salary_chart import ( 9 | average_salary_bar_chart, 10 | ) 11 | from business_analytics_dashboard.components.department_pie_chart import ( 12 | department_pie_chart, 13 | ) 14 | from business_analytics_dashboard.components.sidebar import sidebar 15 | from business_analytics_dashboard.states.dashboard_state import DashboardState 16 | 17 | 18 | def index() -> rx.Component: 19 | """The main dashboard page.""" 20 | return rx.el.div( 21 | sidebar(), 22 | rx.el.main( 23 | rx.el.h1( 24 | "Business Analytics Dashboard", 25 | class_name="text-3xl font-bold text-gray-800 mb-6", 26 | ), 27 | rx.el.div( 28 | department_pie_chart(), 29 | average_salary_bar_chart(), 30 | class_name="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6", 31 | ), 32 | account_executive_metrics_table(), 33 | class_name="p-4 bg-gray-100 h-[100vh] w-full overflow-y-auto", 34 | on_mount=DashboardState.fetch_dashboard_data, 35 | ), 36 | class_name="flex w-full min-h-screen", 37 | ) 38 | 39 | 40 | app = rx.App(theme=rx.theme(appearance="light")) 41 | app.add_page(index) 42 | -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/business_analytics_dashboard/business_analytics_dashboard/components/__init__.py -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/components/sidebar.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def sidebar_link(text: str, url: str, is_active: bool) -> rx.Component: 5 | """Creates a sidebar link component.""" 6 | return rx.el.a( 7 | rx.el.div( 8 | text, 9 | class_name=rx.cond( 10 | is_active, 11 | "bg-gray-200 px-4 py-2 rounded-md cursor-pointer", 12 | "hover:bg-gray-50 px-4 py-2 rounded-md cursor-pointer transition-colors", 13 | ), 14 | ), 15 | href=url, 16 | class_name="w-full", 17 | ) 18 | 19 | 20 | def sidebar() -> rx.Component: 21 | """The sidebar component for the dashboard.""" 22 | return rx.el.div( 23 | rx.el.div( 24 | rx.el.label("Analytics", class_name="text-lg font-bold"), 25 | class_name="px-6 py-2 mb-4 flex justify-start", 26 | ), 27 | rx.el.nav( 28 | sidebar_link("Sales Performance", "#", False), 29 | sidebar_link("Business Analytics", "#", True), 30 | sidebar_link("Financial Reporting", "#", False), 31 | sidebar_link("Marketing Analytics", "#", False), 32 | class_name="flex flex-col space-y-2 p-2", 33 | ), 34 | class_name="w-full max-w-[250px] border-r-1 border-gray-200 h-screen sticky top-0 left-0 max-lg:hidden", 35 | ) 36 | -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/components/tooltip_props.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | TOOLTIP_PROPS = { 4 | "separator": "", 5 | "cursor": False, 6 | "is_animation_active": False, 7 | "label_style": {"fontWeight": "500"}, 8 | "item_style": { 9 | "color": "currentColor", 10 | "display": "flex", 11 | "paddingBottom": "0px", 12 | "justifyContent": "space-between", 13 | "textTransform": "capitalize", 14 | }, 15 | "content_style": { 16 | "borderRadius": "5px", 17 | "boxShadow": "0px 24px 12px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0.00)), 0px 8px 8px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0.00)), 0px 2px 6px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0.00))", 18 | "fontFamily": "var(--font-instrument-sans)", 19 | "fontSize": "0.875rem", 20 | "lineHeight": "1.25rem", 21 | "fontWeight": "500", 22 | "letterSpacing": "-0.01rem", 23 | "minWidth": "8rem", 24 | "width": "200px", 25 | "padding": "0.375rem 0.625rem", 26 | "position": "relative", 27 | "background": rx.color("gray", 1), 28 | "borderColor": rx.color("gray", 4), 29 | }, 30 | } 31 | -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/models/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/business_analytics_dashboard/business_analytics_dashboard/models/__init__.py -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/models/employee.py: -------------------------------------------------------------------------------- 1 | from typing import TypedDict 2 | 3 | 4 | class Employee(TypedDict): 5 | employee_id: int 6 | first_name: str 7 | last_name: str 8 | email: str 9 | department: str 10 | salary: int 11 | projects_closed: int 12 | pending_projects: int 13 | -------------------------------------------------------------------------------- /business_analytics_dashboard/business_analytics_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/business_analytics_dashboard/business_analytics_dashboard/states/__init__.py -------------------------------------------------------------------------------- /business_analytics_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/business_analytics_dashboard/preview.webp -------------------------------------------------------------------------------- /business_analytics_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | faker>=37.1.0 -------------------------------------------------------------------------------- /business_analytics_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="business_analytics_dashboard", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /chat_app/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | __pycache__/ 3 | .web 4 | *.db 5 | assets/external/ 6 | *.py[cod] 7 | .DS_Store 8 | .idea/ -------------------------------------------------------------------------------- /chat_app/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/chat_app/assets/favicon.ico -------------------------------------------------------------------------------- /chat_app/chat_app/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/chat_app/chat_app/__init__.py -------------------------------------------------------------------------------- /chat_app/chat_app/chat_app.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from chat_app.components.chat_interface import chat_interface 4 | 5 | 6 | def index() -> rx.Component: 7 | """The main page of the chat application.""" 8 | return chat_interface() 9 | 10 | 11 | app = rx.App(theme=rx.theme(appearance="light")) 12 | app.add_page(index) 13 | -------------------------------------------------------------------------------- /chat_app/chat_app/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/chat_app/chat_app/components/__init__.py -------------------------------------------------------------------------------- /chat_app/chat_app/components/chat_interface.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from chat_app.components.input_area import input_area 4 | from chat_app.components.message_bubble import message_bubble 5 | from chat_app.components.preset_cards import preset_cards 6 | from chat_app.states.chat_state import ChatState 7 | 8 | 9 | def chat_interface() -> rx.Component: 10 | """The main chat interface component.""" 11 | return rx.el.div( 12 | rx.cond( 13 | ChatState.messages, 14 | rx.auto_scroll( 15 | rx.foreach( 16 | ChatState.messages, 17 | lambda m, i: message_bubble( 18 | m["text"], 19 | m["is_ai"], 20 | i == ChatState.messages.length() - 1, 21 | ), 22 | ), 23 | class_name="flex flex-col gap-4 pb-24 pt-6", 24 | ), 25 | preset_cards(), 26 | ), 27 | input_area(), 28 | class_name="h-screen flex flex-col bg-gray-50 w-full", 29 | ) 30 | -------------------------------------------------------------------------------- /chat_app/chat_app/components/input_area.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from chat_app.states.chat_state import ChatState 4 | 5 | 6 | def input_area() -> rx.Component: 7 | return rx.el.div( 8 | rx.el.div( 9 | rx.el.form( 10 | rx.el.textarea( 11 | name="message", 12 | placeholder="Ask me anything", 13 | enter_key_submit=True, 14 | class_name="bg-transparent resize-none outline-none text-base py-2 px-3 min-h-10 text-black max-h-36 peer !overflow-y-auto", 15 | auto_height=True, 16 | required=True, 17 | ), 18 | rx.box( 19 | rx.cond( 20 | ChatState.messages, 21 | rx.el.button( 22 | rx.icon("square-pen", size=16), 23 | title="New chat", 24 | class_name="rounded-full bg-white text-gray-500 p-2 shadow-sm size-9 inline-flex items-center justify-center hover:bg-gray-100 border transition-colors", 25 | type="button", 26 | on_click=ChatState.clear_messages, 27 | ), 28 | ), 29 | rx.el.button( 30 | rx.cond( 31 | ChatState.typing, 32 | rx.icon("loader-circle", class_name="animate-spin"), 33 | rx.icon("arrow-up"), 34 | ), 35 | class_name="self-end rounded-full bg-blue-500 text-white p-2 disabled:opacity-50 shadow-sm size-9 inline-flex items-center justify-center", 36 | disabled=ChatState.typing, 37 | ), 38 | class_name="flex flex-row mb-2 peer-placeholder-shown:[&>*:last-child]:opacity-50 peer-placeholder-shown:[&>*:last-child]:pointer-events-none w-full", 39 | justify_content=rx.cond( 40 | ChatState.messages, 41 | "space-between", 42 | "end", 43 | ), 44 | ), 45 | reset_on_submit=True, 46 | on_submit=ChatState.send_message, 47 | class_name="flex flex-col gap-2", 48 | ), 49 | class_name="rounded-3xl bg-background w-full border px-3 py-1 shadow-sm mx-auto z-10 focus-within:ring-blue-100 focus-within:ring-2 focus-within:shadow-none bg-white", 50 | ), 51 | class_name="px-6 fixed bottom-6 left-0 right-0 max-w-3xl mx-auto", 52 | ) 53 | -------------------------------------------------------------------------------- /chat_app/chat_app/components/message_bubble.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from chat_app.components.typing_indicator import typing_indicator 4 | 5 | 6 | def ai_bubble(message: str, is_last: bool = False) -> rx.Component: 7 | return rx.el.div( 8 | rx.el.div( 9 | rx.icon("bot", size=16), 10 | class_name="rounded-full bg-white text-black p-2 size-8 inline-flex items-center justify-center border", 11 | ), 12 | rx.cond( 13 | message, 14 | rx.el.p(message, class_name="text-sm sm:text-base"), 15 | rx.cond( 16 | is_last, 17 | typing_indicator(), 18 | ), 19 | ), 20 | class_name="text-black text-base max-w-4xl flex flex-row gap-4", 21 | ) 22 | 23 | 24 | def user_bubble(message: str) -> rx.Component: 25 | return rx.el.div( 26 | rx.el.p(message, class_name="text-sm sm:text-base"), 27 | class_name="text-white px-3 py-2 bg-blue-500 rounded-xl w-fit self-end max-w-[90%]", 28 | ) 29 | 30 | 31 | def message_bubble( 32 | message: str, is_ai: bool = False, is_last: bool = False 33 | ) -> rx.Component: 34 | return rx.el.div( 35 | rx.cond( 36 | is_ai, 37 | ai_bubble(message, is_last), 38 | user_bubble(message), 39 | ), 40 | class_name="w-full flex flex-col gap-6 mx-auto max-w-3xl px-8", 41 | ) 42 | -------------------------------------------------------------------------------- /chat_app/chat_app/components/preset_cards.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from chat_app.states.chat_state import ChatState 4 | 5 | 6 | def card(icon: str, title: str, description: str, color: str) -> rx.Component: 7 | return rx.el.button( 8 | rx.el.div( 9 | rx.icon(tag=icon, size=16, class_name=f"stroke-{color}-500"), 10 | rx.el.p(title, class_name="font-medium text-black text-base"), 11 | class_name="flex flex-row gap-2 items-center", 12 | ), 13 | rx.el.p(description, class_name="text-gray-500 text-sm font-medium"), 14 | on_click=ChatState.send_message({"message": description}), 15 | type="button", 16 | class_name="flex flex-col gap-1 border bg-white hover:bg-gray-100 shadow-sm px-4 py-3.5 rounded-xl text-start transition-colors flex-1", 17 | ) 18 | 19 | 20 | def preset_cards() -> rx.Component: 21 | return rx.el.div( 22 | rx.el.div( 23 | rx.el.div( 24 | rx.icon("bot", size=24), 25 | class_name="rounded-full bg-whit p-2 size-10 inline-flex items-center justify-center border", 26 | ), 27 | rx.el.p( 28 | "How can I help you today?", 29 | class_name="text-2xl md:text-3xl font-medium", 30 | ), 31 | class_name="text-black flex flex-row gap-4 items-center", 32 | ), 33 | rx.el.div( 34 | card( 35 | "message-circle", 36 | "Ask a question", 37 | "What is the capital of France?", 38 | "green", 39 | ), 40 | card( 41 | "calculator", 42 | "Solve a math problem", 43 | "What is the square root of 144?", 44 | "rose", 45 | ), 46 | card( 47 | "globe", 48 | "Get a fun fact", 49 | "Tell me an interesting fact about dolphins.", 50 | "blue", 51 | ), 52 | card( 53 | "book", 54 | "Recommend a book", 55 | "What's a good mystery novel for beginners?", 56 | "amber", 57 | ), 58 | class_name="gap-4 grid grid-cols-1 lg:grid-cols-2 w-full", 59 | ), 60 | class_name="top-1/3 left-1/2 absolute flex flex-col justify-center items-center gap-8 w-full max-w-[44rem] transform -translate-x-1/2 -translate-y-1/2 px-6", 61 | ) 62 | -------------------------------------------------------------------------------- /chat_app/chat_app/components/typing_indicator.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def typing_indicator() -> rx.Component: 5 | return rx.el.div( 6 | rx.el.div(class_name="size-1.5 bg-gray-500 rounded-full animate-bounce"), 7 | rx.el.div( 8 | class_name="size-1.5 bg-gray-400 rounded-full animate-bounce [animation-delay:0.2s]" 9 | ), 10 | rx.el.div( 11 | class_name="size-1.5 bg-gray-500 rounded-full animate-bounce [animation-delay:0.4s]" 12 | ), 13 | class_name="flex gap-1 justify-center items-center", 14 | ) 15 | -------------------------------------------------------------------------------- /chat_app/chat_app/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/chat_app/chat_app/states/__init__.py -------------------------------------------------------------------------------- /chat_app/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/chat_app/preview.png -------------------------------------------------------------------------------- /chat_app/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | openai -------------------------------------------------------------------------------- /chat_app/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="chat_app", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /ci_template/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .cursorignore 6 | .venv/ 7 | .vscode/ 8 | .web 9 | __pycache__/ 10 | venv/ 11 | -------------------------------------------------------------------------------- /ci_template/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Reflex! 2 | 3 | This is the base Reflex template - installed when you run `reflex init`. 4 | 5 | If you want to use a different template, pass the `--template` flag to `reflex init`. 6 | For example, if you want a more basic starting point, you can run: 7 | 8 | ```bash 9 | reflex init --template blank 10 | ``` 11 | 12 | ## About this Template 13 | 14 | This template has the following directory structure: 15 | 16 | ```bash 17 | ├── README.md 18 | ├── assets 19 | ├── rxconfig.py 20 | └── {your_app} 21 | ├── __init__.py 22 | ├── components 23 | │   ├── __init__.py 24 | │   ├── navbar.py 25 | │   └── sidebar.py 26 | ├── pages 27 | │   ├── __init__.py 28 | │   ├── about.py 29 | │   ├── dashboard.py 30 | │   └── settings.py 31 | ├── styles.py 32 | ├── templates 33 | │   ├── __init__.py 34 | │   └── template.py 35 | └── {your_app}.py 36 | ``` 37 | 38 | See the [Project Structure docs](https://reflex.dev/docs/getting-started/project-structure/) for more information on general Reflex project structure. 39 | 40 | ### Adding Pages 41 | 42 | In this template, the pages in your app are defined in `{your_app}/pages/`. 43 | Each page is a function that returns a Reflex component. 44 | For example, to edit this page you can modify `{your_app}/pages/index.py`. 45 | See the [pages docs](https://reflex.dev/docs/pages/routes/) for more information on pages. 46 | 47 | In this template, instead of using `rx.add_page` or the `@rx.page` decorator, 48 | we use the `@template` decorator from `{your_app}/templates/template.py`. 49 | 50 | To add a new page: 51 | 52 | 1. Add a new file in `{your_app}/pages/`. We recommend using one file per page, but you can also group pages in a single file. 53 | 2. Add a new function with the `@template` decorator, which takes the same arguments as `@rx.page`. 54 | 3. Import the page in your `{your_app}/pages/__init__.py` file and it will automatically be added to the app. 55 | 4. Order the pages in `{your_app}/components/sidebar.py` and `{your_app}/components/navbar.py`. 56 | 57 | 58 | ### Adding Components 59 | 60 | In order to keep your code organized, we recommend putting components that are 61 | used across multiple pages in the `{your_app}/components/` directory. 62 | 63 | In this template, we have a sidebar component in `{your_app}/components/sidebar.py`. 64 | 65 | ### Adding State 66 | 67 | As your app grows, we recommend using [substates](https://reflex.dev/docs/substates/overview/) 68 | to organize your state. 69 | 70 | You can either define substates in their own files, or if the state is 71 | specific to a page, you can define it in the page file itself. 72 | -------------------------------------------------------------------------------- /ci_template/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ci_template/assets/favicon.ico -------------------------------------------------------------------------------- /ci_template/assets/reflex_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ci_template/assets/reflex_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ci_template/cijob/__init__.py: -------------------------------------------------------------------------------- 1 | """Base template for Reflex.""" 2 | -------------------------------------------------------------------------------- /ci_template/cijob/backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ci_template/cijob/backend/__init__.py -------------------------------------------------------------------------------- /ci_template/cijob/cijob.py: -------------------------------------------------------------------------------- 1 | """Welcome to Reflex!.""" 2 | 3 | # Import all the pages. 4 | import reflex as rx 5 | 6 | from . import styles 7 | from .pages import * 8 | 9 | # Create the app. 10 | app = rx.App( 11 | style=styles.base_style, 12 | stylesheets=styles.base_stylesheets, 13 | ) 14 | -------------------------------------------------------------------------------- /ci_template/cijob/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ci_template/cijob/components/__init__.py -------------------------------------------------------------------------------- /ci_template/cijob/components/status_badge.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def _badge(status: str): 5 | badge_mapping = { 6 | "Completed": ("check", "Completed", "green"), 7 | "Pending": ("loader", "Pending", "yellow"), 8 | "Canceled": ("ban", "Canceled", "red"), 9 | } 10 | icon, text, color_scheme = badge_mapping.get( 11 | status, ("loader", "Pending", "yellow") 12 | ) 13 | return rx.badge( 14 | rx.icon(icon, size=16), 15 | text, 16 | color_scheme=color_scheme, 17 | radius="large", 18 | variant="surface", 19 | size="2", 20 | ) 21 | 22 | 23 | def status_badge(status: str): 24 | return rx.match( 25 | status, 26 | ("Completed", _badge("Completed")), 27 | ("Pending", _badge("Pending")), 28 | ("Canceled", _badge("Canceled")), 29 | _badge("Pending"), 30 | ) 31 | -------------------------------------------------------------------------------- /ci_template/cijob/pages/__init__.py: -------------------------------------------------------------------------------- 1 | from .about import about 2 | from .dashboard import dashboard 3 | from .settings import settings 4 | 5 | __all__ = ["about", "dashboard", "settings"] 6 | -------------------------------------------------------------------------------- /ci_template/cijob/pages/about.py: -------------------------------------------------------------------------------- 1 | """The about page of the app.""" 2 | 3 | from pathlib import Path 4 | 5 | import reflex as rx 6 | 7 | from .. import styles 8 | from ..templates import template 9 | 10 | 11 | @template(route="/about", title="About") 12 | def about() -> rx.Component: 13 | """The about page. 14 | 15 | Returns: 16 | The UI for the about page. 17 | 18 | """ 19 | with Path("README.md").open(encoding="utf-8") as readme: 20 | content = readme.read() 21 | return rx.markdown(content, component_map=styles.markdown_style) 22 | -------------------------------------------------------------------------------- /ci_template/cijob/pages/dashboard.py: -------------------------------------------------------------------------------- 1 | """The dashboard page.""" 2 | 3 | import reflex as rx 4 | 5 | from ..backend.table_state import TableState 6 | from ..templates import template 7 | from ..views.table import main_table 8 | 9 | 10 | @template(route="/", title="Dashboard", on_load=TableState.load_entries) 11 | def dashboard() -> rx.Component: 12 | """The dashboard page. 13 | 14 | Returns: 15 | The UI for the dashboard page. 16 | 17 | """ 18 | return rx.vstack( 19 | rx.heading("CI Job Dashboard", size="5"), 20 | main_table(), 21 | spacing="8", 22 | width="100%", 23 | ) 24 | -------------------------------------------------------------------------------- /ci_template/cijob/pages/settings.py: -------------------------------------------------------------------------------- 1 | """The settings page.""" 2 | 3 | import reflex as rx 4 | 5 | from ..templates import template 6 | from ..views.color_picker import primary_color_picker, secondary_color_picker 7 | from ..views.radius_picker import radius_picker 8 | from ..views.scaling_picker import scaling_picker 9 | 10 | 11 | @template(route="/settings", title="Settings") 12 | def settings() -> rx.Component: 13 | """The settings page. 14 | 15 | Returns: 16 | The UI for the settings page. 17 | 18 | """ 19 | return rx.vstack( 20 | rx.heading("Settings", size="5"), 21 | # Primary color picker 22 | rx.vstack( 23 | rx.hstack( 24 | rx.icon("palette", color=rx.color("accent", 10)), 25 | rx.heading("Primary color", size="6"), 26 | align="center", 27 | ), 28 | primary_color_picker(), 29 | spacing="4", 30 | width="100%", 31 | ), 32 | # Secondary color picker 33 | rx.vstack( 34 | rx.hstack( 35 | rx.icon("blend", color=rx.color("gray", 11)), 36 | rx.heading("Secondary color", size="6"), 37 | align="center", 38 | ), 39 | secondary_color_picker(), 40 | spacing="4", 41 | width="100%", 42 | ), 43 | # Radius picker 44 | radius_picker(), 45 | # Scaling picker 46 | scaling_picker(), 47 | spacing="7", 48 | width="100%", 49 | ) 50 | -------------------------------------------------------------------------------- /ci_template/cijob/styles.py: -------------------------------------------------------------------------------- 1 | """Styles for the app.""" 2 | 3 | import reflex as rx 4 | 5 | border_radius = "var(--radius-2)" 6 | border = f"1px solid {rx.color('gray', 5)}" 7 | text_color = rx.color("gray", 11) 8 | gray_color = rx.color("gray", 11) 9 | gray_bg_color = rx.color("gray", 3) 10 | accent_text_color = rx.color("accent", 10) 11 | accent_color = rx.color("accent", 1) 12 | accent_bg_color = rx.color("accent", 3) 13 | hover_accent_color = {"_hover": {"color": accent_text_color}} 14 | hover_accent_bg = {"_hover": {"background_color": accent_color}} 15 | content_width_vw = "90vw" 16 | sidebar_width = "32em" 17 | sidebar_content_width = "16em" 18 | max_width = "1480px" 19 | color_box_size = ["2.25rem", "2.25rem", "2.5rem"] 20 | 21 | 22 | template_page_style = { 23 | "padding_top": ["1em", "1em", "2em"], 24 | "padding_x": ["auto", "auto", "2em"], 25 | } 26 | 27 | template_content_style = { 28 | "padding": "1em", 29 | "margin_bottom": "2em", 30 | "min_height": "90vh", 31 | } 32 | 33 | link_style = { 34 | "color": accent_text_color, 35 | "text_decoration": "none", 36 | **hover_accent_color, 37 | } 38 | 39 | overlapping_button_style = { 40 | "background_color": "white", 41 | "border_radius": border_radius, 42 | } 43 | 44 | markdown_style = { 45 | "code": lambda text: rx.code(text, color_scheme="gray"), 46 | "codeblock": lambda text, **props: rx.code_block(text, **props, margin_y="1em"), 47 | "a": lambda text, **props: rx.link( 48 | text, 49 | **props, 50 | font_weight="bold", 51 | text_decoration="underline", 52 | text_decoration_color=accent_text_color, 53 | ), 54 | } 55 | 56 | box_shadow_style = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" 57 | 58 | color_picker_style = { 59 | "border_radius": "max(var(--radius-3), var(--radius-full))", 60 | "box_shadow": box_shadow_style, 61 | "cursor": "pointer", 62 | "display": "flex", 63 | "align_items": "center", 64 | "justify_content": "center", 65 | "transition": "transform 0.15s ease-in-out", 66 | "_active": { 67 | "transform": "translateY(2px) scale(0.95)", 68 | }, 69 | } 70 | 71 | 72 | base_stylesheets = [ 73 | "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" 74 | ] 75 | 76 | base_style = { 77 | "font_family": "Inter", 78 | } 79 | -------------------------------------------------------------------------------- /ci_template/cijob/templates/__init__.py: -------------------------------------------------------------------------------- 1 | from .template import template 2 | 3 | __all__ = ["template"] 4 | -------------------------------------------------------------------------------- /ci_template/cijob/views/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/ci_template/cijob/views/__init__.py -------------------------------------------------------------------------------- /ci_template/cijob/views/radius_picker.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from ..templates.template import ThemeState 4 | 5 | 6 | def radius_picker() -> rx.Component: 7 | return ( 8 | rx.vstack( 9 | rx.hstack( 10 | rx.icon("radius"), 11 | rx.heading("Radius", size="6"), 12 | align="center", 13 | ), 14 | rx.select( 15 | [ 16 | "none", 17 | "small", 18 | "medium", 19 | "large", 20 | "full", 21 | ], 22 | size="3", 23 | value=ThemeState.radius, 24 | on_change=ThemeState.set_radius, 25 | ), 26 | width="100%", 27 | ), 28 | ) 29 | -------------------------------------------------------------------------------- /ci_template/cijob/views/scaling_picker.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from ..templates.template import ThemeState 4 | 5 | 6 | def scaling_picker() -> rx.Component: 7 | return ( 8 | rx.vstack( 9 | rx.hstack( 10 | rx.icon("ruler"), 11 | rx.heading("Scaling", size="6"), 12 | align="center", 13 | ), 14 | rx.select( 15 | [ 16 | "90%", 17 | "95%", 18 | "100%", 19 | "105%", 20 | "110%", 21 | ], 22 | size="3", 23 | value=ThemeState.scaling, 24 | on_change=ThemeState.set_scaling, 25 | ), 26 | width="100%", 27 | ), 28 | ) 29 | -------------------------------------------------------------------------------- /ci_template/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /ci_template/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="cijob", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /company_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | *.db 2 | *.py[cod] 3 | .states 4 | assets/external/ 5 | .web 6 | __pycache__/ 7 | -------------------------------------------------------------------------------- /company_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/company_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /company_dashboard/company_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/company_dashboard/company_dashboard/__init__.py -------------------------------------------------------------------------------- /company_dashboard/company_dashboard/company_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from company_dashboard.components.documents_table import ( 4 | documents_table_section, 5 | ) 6 | from company_dashboard.components.header import header_bar 7 | from company_dashboard.components.key_metrics import key_metrics_section 8 | from company_dashboard.components.sidebar import sidebar 9 | from company_dashboard.components.visitors_chart import ( 10 | visitors_chart_section, 11 | ) 12 | from company_dashboard.states.dashboard_state import DashboardState 13 | 14 | 15 | def index() -> rx.Component: 16 | """The main dashboard page.""" 17 | return rx.el.div( 18 | sidebar(), 19 | rx.el.main( 20 | header_bar(), 21 | rx.el.div( 22 | key_metrics_section(), 23 | visitors_chart_section(), 24 | documents_table_section(), 25 | class_name="p-6 space-y-6", 26 | ), 27 | class_name="w-full h-[100vh] overflow-y-auto", 28 | ), 29 | class_name="flex flex-row bg-gray-50 h-[100vh] w-full overflow-hidden", 30 | on_mount=DashboardState.load_initial_data, 31 | ) 32 | 33 | 34 | app = rx.App( 35 | theme=rx.theme(appearance="light"), 36 | stylesheets=["https://cdn.tailwindcss.com"], 37 | style={ 38 | rx.el.label: {"font_family": "JetBrains Mono,ui-monospace,monospace"}, 39 | rx.el.span: {"font_family": "JetBrains Mono,ui-monospace,monospace"}, 40 | rx.el.h1: {"font_family": "JetBrains Mono,ui-monospace,monospace"}, 41 | rx.el.h2: {"font_family": "JetBrains Mono,ui-monospace,monospace"}, 42 | }, 43 | ) 44 | app.add_page(index, route="/") 45 | -------------------------------------------------------------------------------- /company_dashboard/company_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/company_dashboard/company_dashboard/components/__init__.py -------------------------------------------------------------------------------- /company_dashboard/company_dashboard/components/header.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def header_bar() -> rx.Component: 5 | """The header bar component.""" 6 | return rx.el.div( 7 | rx.el.div( 8 | rx.el.label( 9 | "reflex > build > ", 10 | class_name="text-sm font-semibold text-gray-500", 11 | ), 12 | rx.el.label( 13 | "dashboard", 14 | class_name="text-sm font-semibold text-gray-900", 15 | ), 16 | ), 17 | rx.el.div(), 18 | class_name="flex items-center justify-between h-12 px-6 bg-white border-b border-gray-200", 19 | ) 20 | -------------------------------------------------------------------------------- /company_dashboard/company_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/company_dashboard/company_dashboard/states/__init__.py -------------------------------------------------------------------------------- /company_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/company_dashboard/preview.webp -------------------------------------------------------------------------------- /company_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | faker>=37.0.0 -------------------------------------------------------------------------------- /company_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="company_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /customer_data_app/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | -------------------------------------------------------------------------------- /customer_data_app/README.md: -------------------------------------------------------------------------------- 1 | # Customer Data App 2 | 3 | This app is used to showcase and edit tabular data live in an app. It links up with a persistent database, such as [Neon](https://neon.tech). 4 | 5 | ## Usage 6 | 7 | First clone the repo locally. 8 | ```bash 9 | git clone https://github.com/reflex-dev/templates/tree/main/customer_data_app 10 | ``` 11 | Then set up a virtual environment as outlined in our documentation. After this run `pip install -r requirements.txt`. 12 | 13 | First, create migration scripts based on the `rx.Model` definitions and update 14 | the default sqlite database with that schema. This only needs to be done once 15 | when a new app is created. 16 | 17 | ```bash 18 | reflex db init 19 | ``` 20 | 21 | Then run the app with the following command: 22 | 23 | ```bash 24 | reflex run 25 | ``` 26 | 27 | ## Applying Database Schema Changes 28 | 29 | If changes are made to the database models after initialization, they can be 30 | applied by running the following commands: 31 | 32 | ```bash 33 | reflex db makemigrations --message "Brief description of the change" 34 | ``` 35 | 36 | ```bash 37 | reflex db migrate 38 | ``` 39 | 40 | ## Setting an external Database 41 | 42 | It is also possible to set an external database so that your data is not lost every time the app closes and so you can deploy your app and maintain data. 43 | 44 | In the `rxconfig.py` file we accept a `db_url` key and recognize the `DB_URL` 45 | environment variable. This can be set to any valid SQLAlchemy database URL. 46 | 47 | To set one run the following command in your terminal: 48 | 49 | ```bash 50 | export DB_URL="postgresql+psycopg://appuser:mysecretpassword@localhost:5432/mydatabase" 51 | ``` 52 | 53 | **Be sure to install the appropriate DB driver in your environment.** In the 54 | *example above, that would be `pip install "psycopg[binary]"`. 55 | 56 | After configuring a different database, execute `reflex db migrate` to populate 57 | it with the latest schema before running the app. -------------------------------------------------------------------------------- /customer_data_app/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/customer_data_app/assets/favicon.ico -------------------------------------------------------------------------------- /customer_data_app/customer_data/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/customer_data_app/customer_data/__init__.py -------------------------------------------------------------------------------- /customer_data_app/customer_data/backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/customer_data_app/customer_data/backend/__init__.py -------------------------------------------------------------------------------- /customer_data_app/customer_data/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/customer_data_app/customer_data/components/__init__.py -------------------------------------------------------------------------------- /customer_data_app/customer_data/components/form_field.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def form_field( 5 | label: str, 6 | placeholder: str, 7 | type: str, 8 | name: str, 9 | icon: str, 10 | default_value: str = "", 11 | ) -> rx.Component: 12 | return rx.form.field( 13 | rx.flex( 14 | rx.hstack( 15 | rx.icon(icon, size=16, stroke_width=1.5), 16 | rx.form.label(label), 17 | align="center", 18 | spacing="2", 19 | ), 20 | rx.form.control( 21 | rx.input( 22 | placeholder=placeholder, type=type, default_value=default_value 23 | ), 24 | as_child=True, 25 | ), 26 | direction="column", 27 | spacing="1", 28 | ), 29 | name=name, 30 | width="100%", 31 | ) 32 | -------------------------------------------------------------------------------- /customer_data_app/customer_data/components/status_badges.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def _badge(icon: str, text: str, color_scheme: str): 5 | return rx.badge( 6 | rx.icon(icon, size=16), 7 | text, 8 | color_scheme=color_scheme, 9 | radius="full", 10 | variant="soft", 11 | size="3", 12 | ) 13 | 14 | 15 | def status_badge(status: str): 16 | badge_mapping = { 17 | "Delivered": ("check", "Delivered", "green"), 18 | "Pending": ("loader", "Pending", "yellow"), 19 | "Cancelled": ("ban", "Cancelled", "red"), 20 | } 21 | return _badge(*badge_mapping.get(status, ("loader", "Pending", "yellow"))) 22 | -------------------------------------------------------------------------------- /customer_data_app/customer_data/customer_data.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from .components.stats_cards import stats_cards_group 4 | from .views.navbar import navbar 5 | from .views.table import main_table 6 | 7 | 8 | def index() -> rx.Component: 9 | return rx.vstack( 10 | navbar(), 11 | stats_cards_group(), 12 | rx.box( 13 | main_table(), 14 | width="100%", 15 | ), 16 | width="100%", 17 | spacing="6", 18 | padding_x=["1.5em", "1.5em", "3em"], 19 | ) 20 | 21 | 22 | app = rx.App( 23 | theme=rx.theme( 24 | appearance="dark", has_background=True, radius="large", accent_color="grass" 25 | ), 26 | ) 27 | 28 | app.add_page( 29 | index, 30 | title="Customer Data App", 31 | description="A simple app to manage customer data.", 32 | ) 33 | -------------------------------------------------------------------------------- /customer_data_app/customer_data/views/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/customer_data_app/customer_data/views/__init__.py -------------------------------------------------------------------------------- /customer_data_app/customer_data/views/navbar.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def navbar(): 5 | return rx.flex( 6 | rx.badge( 7 | rx.icon(tag="table-2", size=28), 8 | rx.heading("Customer Data App", size="6"), 9 | color_scheme="green", 10 | radius="large", 11 | align="center", 12 | variant="surface", 13 | padding="0.65rem", 14 | ), 15 | rx.spacer(), 16 | rx.hstack( 17 | rx.logo(), 18 | rx.color_mode.button(), 19 | align="center", 20 | spacing="3", 21 | ), 22 | spacing="2", 23 | flex_direction=["column", "column", "row"], 24 | align="center", 25 | width="100%", 26 | top="0px", 27 | padding_top="2em", 28 | ) 29 | -------------------------------------------------------------------------------- /customer_data_app/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | psycopg2-binary -------------------------------------------------------------------------------- /customer_data_app/rxconfig.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | import reflex as rx 4 | 5 | database_url = os.getenv("DATABASE_URL", "sqlite:///reflex.db") 6 | 7 | config = rx.Config( 8 | app_name="customer_data", 9 | db_url=database_url, 10 | tailwind=None, 11 | ) 12 | -------------------------------------------------------------------------------- /dalle/.gitignore: -------------------------------------------------------------------------------- 1 | assets/external/ 2 | .states 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | reflex.db 8 | -------------------------------------------------------------------------------- /dalle/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/dalle/assets/favicon.ico -------------------------------------------------------------------------------- /dalle/dalle/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/dalle/dalle/__init__.py -------------------------------------------------------------------------------- /dalle/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | openai>=1 3 | -------------------------------------------------------------------------------- /dalle/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="dalle", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .cursorignore 6 | .venv/ 7 | .vscode/ 8 | .web 9 | __pycache__/ 10 | venv/ 11 | -------------------------------------------------------------------------------- /dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /dashboard/assets/reflex_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /dashboard/assets/reflex_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /dashboard/assets/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow-y: scroll; 3 | } 4 | 5 | .recharts-cartesian-grid-horizontal line { 6 | stroke-dasharray: 0; 7 | stroke-opacity: 0.6 !important; 8 | stroke: var(--gray-7); 9 | } 10 | 11 | .recharts-cartesian-grid-vertical line { 12 | stroke-opacity: 0 !important; 13 | } 14 | 15 | .rt-BaseTabList { 16 | box-shadow: none; 17 | } 18 | -------------------------------------------------------------------------------- /dashboard/dashboard/__init__.py: -------------------------------------------------------------------------------- 1 | """Base template for Reflex.""" 2 | -------------------------------------------------------------------------------- /dashboard/dashboard/backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/dashboard/dashboard/backend/__init__.py -------------------------------------------------------------------------------- /dashboard/dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/dashboard/dashboard/components/__init__.py -------------------------------------------------------------------------------- /dashboard/dashboard/components/card.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from dashboard import styles 4 | 5 | 6 | def card(*children, **props): 7 | return rx.card( 8 | *children, 9 | box_shadow=styles.box_shadow_style, 10 | size="3", 11 | width="100%", 12 | **props, 13 | ) 14 | -------------------------------------------------------------------------------- /dashboard/dashboard/components/notification.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from reflex.components.radix.themes.base import ( 3 | LiteralAccentColor, 4 | ) 5 | 6 | from dashboard import styles 7 | 8 | 9 | def notification(icon: str, color: LiteralAccentColor, count: int) -> rx.Component: 10 | return rx.box( 11 | rx.icon_button( 12 | rx.icon(icon), 13 | padding="0.5rem", 14 | radius="full", 15 | variant="soft", 16 | color_scheme=color, 17 | size="3", 18 | ), 19 | rx.badge( 20 | rx.text(count, size="1"), 21 | radius="full", 22 | variant="solid", 23 | color_scheme=color, 24 | style=styles.notification_badge_style, 25 | ), 26 | position="relative", 27 | ) 28 | -------------------------------------------------------------------------------- /dashboard/dashboard/components/profile_input.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def profile_input( 5 | label: str, 6 | name: str, 7 | placeholder: str, 8 | type: str, 9 | icon: str, 10 | default_value: str = "", 11 | ) -> rx.Component: 12 | return rx.vstack( 13 | rx.hstack( 14 | rx.icon(icon, size=16, stroke_width=1.5), 15 | rx.text(label), 16 | width="100%", 17 | align="center", 18 | spacing="2", 19 | ), 20 | rx.input( 21 | placeholder=placeholder, 22 | type=type, 23 | default_value=default_value, 24 | width="100%", 25 | name=name, 26 | ), 27 | direction="column", 28 | spacing="1", 29 | width="100%", 30 | ) 31 | -------------------------------------------------------------------------------- /dashboard/dashboard/components/status_badge.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def _badge(status: str): 5 | badge_mapping = { 6 | "Completed": ("check", "Completed", "green"), 7 | "Pending": ("loader", "Pending", "yellow"), 8 | "Canceled": ("ban", "Canceled", "red"), 9 | } 10 | icon, text, color_scheme = badge_mapping.get( 11 | status, ("loader", "Pending", "yellow") 12 | ) 13 | return rx.badge( 14 | rx.icon(icon, size=16), 15 | text, 16 | color_scheme=color_scheme, 17 | radius="large", 18 | variant="surface", 19 | size="2", 20 | ) 21 | 22 | 23 | def status_badge(status: str): 24 | return rx.match( 25 | status, 26 | ("Completed", _badge("Completed")), 27 | ("Pending", _badge("Pending")), 28 | ("Canceled", _badge("Canceled")), 29 | _badge("Pending"), 30 | ) 31 | -------------------------------------------------------------------------------- /dashboard/dashboard/dashboard.py: -------------------------------------------------------------------------------- 1 | """Welcome to Reflex!.""" 2 | 3 | # Import all the pages. 4 | import reflex as rx 5 | 6 | from . import styles 7 | from .pages import * 8 | 9 | # Create the app. 10 | app = rx.App( 11 | style=styles.base_style, 12 | stylesheets=styles.base_stylesheets, 13 | ) 14 | -------------------------------------------------------------------------------- /dashboard/dashboard/pages/__init__.py: -------------------------------------------------------------------------------- 1 | from .about import about 2 | from .index import index 3 | from .profile import profile 4 | from .settings import settings 5 | from .table import table 6 | 7 | __all__ = ["about", "index", "profile", "settings", "table"] 8 | -------------------------------------------------------------------------------- /dashboard/dashboard/pages/about.py: -------------------------------------------------------------------------------- 1 | """The about page.""" 2 | 3 | from pathlib import Path 4 | 5 | import reflex as rx 6 | 7 | from .. import styles 8 | from ..templates import template 9 | 10 | 11 | @template(route="/about", title="About") 12 | def about() -> rx.Component: 13 | """The about page. 14 | 15 | Returns: 16 | The UI for the about page. 17 | """ 18 | with Path("README.md").open(encoding="utf-8") as readme: 19 | content = readme.read() 20 | return rx.markdown(content, component_map=styles.markdown_style) 21 | -------------------------------------------------------------------------------- /dashboard/dashboard/pages/settings.py: -------------------------------------------------------------------------------- 1 | """The settings page.""" 2 | 3 | import reflex as rx 4 | 5 | from ..templates import template 6 | from ..views.color_picker import primary_color_picker, secondary_color_picker 7 | from ..views.radius_picker import radius_picker 8 | from ..views.scaling_picker import scaling_picker 9 | 10 | 11 | @template(route="/settings", title="Settings") 12 | def settings() -> rx.Component: 13 | """The settings page. 14 | 15 | Returns: 16 | The UI for the settings page. 17 | 18 | """ 19 | return rx.vstack( 20 | rx.heading("Settings", size="5"), 21 | # Primary color picker 22 | rx.vstack( 23 | rx.hstack( 24 | rx.icon("palette", color=rx.color("accent", 10)), 25 | rx.heading("Primary color", size="6"), 26 | align="center", 27 | ), 28 | primary_color_picker(), 29 | spacing="4", 30 | width="100%", 31 | ), 32 | # Secondary color picker 33 | rx.vstack( 34 | rx.hstack( 35 | rx.icon("blend", color=rx.color("gray", 11)), 36 | rx.heading("Secondary color", size="6"), 37 | align="center", 38 | ), 39 | secondary_color_picker(), 40 | spacing="4", 41 | width="100%", 42 | ), 43 | # Radius picker 44 | radius_picker(), 45 | # Scaling picker 46 | scaling_picker(), 47 | spacing="7", 48 | width="100%", 49 | ) 50 | -------------------------------------------------------------------------------- /dashboard/dashboard/pages/table.py: -------------------------------------------------------------------------------- 1 | """The table page.""" 2 | 3 | import reflex as rx 4 | 5 | from ..backend.table_state import TableState 6 | from ..templates import template 7 | from ..views.table import main_table 8 | 9 | 10 | @template(route="/table", title="Table", on_load=TableState.load_entries) 11 | def table() -> rx.Component: 12 | """The table page. 13 | 14 | Returns: 15 | The UI for the table page. 16 | 17 | """ 18 | return rx.vstack( 19 | rx.heading("Table", size="5"), 20 | main_table(), 21 | spacing="8", 22 | width="100%", 23 | ) 24 | -------------------------------------------------------------------------------- /dashboard/dashboard/templates/__init__.py: -------------------------------------------------------------------------------- 1 | from .template import ThemeState, template 2 | 3 | __all__ = ["ThemeState", "template"] 4 | -------------------------------------------------------------------------------- /dashboard/dashboard/views/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/dashboard/dashboard/views/__init__.py -------------------------------------------------------------------------------- /dashboard/dashboard/views/acquisition_view.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | from reflex.components.radix.themes.base import LiteralAccentColor 3 | 4 | 5 | def flag(initials: str) -> rx.Component: 6 | return rx.image( 7 | src=f"https://flag.vercel.app/s/{initials}.svg", 8 | loading="lazy", 9 | decoding="async", 10 | width="24px", 11 | height="auto", 12 | border_radius="2px", 13 | ) 14 | 15 | 16 | def item( 17 | country: str, initials: str, progress: int, color: LiteralAccentColor 18 | ) -> rx.Component: 19 | return ( 20 | rx.hstack( 21 | rx.hstack( 22 | flag(initials), 23 | rx.text( 24 | country, 25 | size="3", 26 | weight="medium", 27 | display=["none", "none", "none", "none", "flex"], 28 | ), 29 | width=["10%", "10%", "10%", "10%", "25%"], 30 | align="center", 31 | spacing="3", 32 | ), 33 | rx.flex( 34 | rx.text( 35 | f"{progress}%", 36 | position="absolute", 37 | top="50%", 38 | left=["90%", "90%", "90%", "90%", "95%"], 39 | transform="translate(-50%, -50%)", 40 | size="1", 41 | ), 42 | rx.progress( 43 | value=progress, 44 | height="19px", 45 | color_scheme=color, 46 | width="100%", 47 | ), 48 | position="relative", 49 | width="100%", 50 | ), 51 | width="100%", 52 | border_radius="10px", 53 | align="center", 54 | justify="between", 55 | ), 56 | ) 57 | 58 | 59 | def acquisition() -> rx.Component: 60 | return rx.vstack( 61 | item("USA", "US", 46, "blue"), 62 | item("Canada", "CA", 33, "crimson"), 63 | item("France", "FR", 28, "plum"), 64 | item("Germany", "DE", 20, "green"), 65 | item("Spain", "ES", 15, "amber"), 66 | width="100%", 67 | spacing="6", 68 | ) 69 | -------------------------------------------------------------------------------- /dashboard/dashboard/views/radius_picker.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from ..templates.template import ThemeState 4 | 5 | 6 | def radius_picker() -> rx.Component: 7 | return ( 8 | rx.vstack( 9 | rx.hstack( 10 | rx.icon("radius"), 11 | rx.heading("Radius", size="6"), 12 | align="center", 13 | ), 14 | rx.select( 15 | [ 16 | "none", 17 | "small", 18 | "medium", 19 | "large", 20 | "full", 21 | ], 22 | size="3", 23 | value=ThemeState.radius, 24 | on_change=ThemeState.set_radius, 25 | ), 26 | width="100%", 27 | ), 28 | ) 29 | -------------------------------------------------------------------------------- /dashboard/dashboard/views/scaling_picker.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from ..templates.template import ThemeState 4 | 5 | 6 | def scaling_picker() -> rx.Component: 7 | return ( 8 | rx.vstack( 9 | rx.hstack( 10 | rx.icon("ruler"), 11 | rx.heading("Scaling", size="6"), 12 | align="center", 13 | ), 14 | rx.select( 15 | [ 16 | "90%", 17 | "95%", 18 | "100%", 19 | "105%", 20 | "110%", 21 | ], 22 | size="3", 23 | value=ThemeState.scaling, 24 | on_change=ThemeState.set_scaling, 25 | ), 26 | width="100%", 27 | ), 28 | ) 29 | -------------------------------------------------------------------------------- /dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="dashboard", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Exit immediately if a command exits with a non-zero status 4 | set -e 5 | 6 | # Validate input 7 | if [ -z "$1" ]; then 8 | echo "Error: No subfolder specified." 9 | echo "Usage: $0 " 10 | exit 1 11 | fi 12 | 13 | SUBFOLDER=$1 14 | EXTRA_ENV=$2 15 | 16 | # Ensure the subfolder exists 17 | if [ ! -d "$SUBFOLDER" ]; then 18 | echo "Error: Subfolder '$SUBFOLDER' does not exist." 19 | exit 1 20 | fi 21 | 22 | # Navigate to the subfolder 23 | cd "$SUBFOLDER" 24 | 25 | # Print the current working directory for debugging 26 | echo "Deploying content from: $(pwd)" 27 | 28 | # Check if reflex CLI is installed 29 | if ! command -v reflex &> /dev/null; then 30 | echo "Error: Reflex CLI not found. Please ensure it is installed." 31 | exit 1 32 | fi 33 | 34 | # Store the project ID in a variable 35 | template_id=$(reflex apps project-list --token $REFLEX_AUTH_TOKEN | awk '/templates/ {print $1}') 36 | 37 | echo "Starting deployment..." 38 | reflex deployv2 --token $REFLEX_AUTH_TOKEN --project $template_id --no-interactive $EXTRA_ENV 39 | echo "Deployment for '$SUBFOLDER' completed successfully." 40 | -------------------------------------------------------------------------------- /futuristic_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | .DS_Store 8 | .idea/ 9 | -------------------------------------------------------------------------------- /futuristic_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/futuristic_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /futuristic_dashboard/futuristic_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/futuristic_dashboard/futuristic_dashboard/__init__.py -------------------------------------------------------------------------------- /futuristic_dashboard/futuristic_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/futuristic_dashboard/futuristic_dashboard/components/__init__.py -------------------------------------------------------------------------------- /futuristic_dashboard/futuristic_dashboard/components/header.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from futuristic_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def dashboard_header() -> rx.Component: 7 | return rx.el.header( 8 | rx.el.div( 9 | rx.el.button( 10 | rx.icon(tag="menu", class_name="size-6"), 11 | on_click=DashboardState.toggle_mobile_sidebar, 12 | class_name="p-2 text-gray-400 hover:text-gray-200 md:hidden mr-4", 13 | ), 14 | rx.el.div( 15 | rx.icon( 16 | tag="search", 17 | class_name="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none", 18 | ), 19 | rx.el.input( 20 | placeholder="Search systems...", 21 | class_name="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-300 focus:outline-none focus:ring-1 focus:ring-cyan-500 focus:border-cyan-500 placeholder-gray-500", 22 | ), 23 | class_name="relative flex-grow max-w-xs hidden sm:block", 24 | ), 25 | class_name="flex items-center", 26 | ), 27 | rx.el.div( 28 | rx.el.button( 29 | rx.icon( 30 | tag="bell", 31 | class_name="text-gray-400 hover:text-gray-200", 32 | ), 33 | class_name="p-2 rounded-full hover:bg-gray-800", 34 | ), 35 | rx.el.button( 36 | rx.icon( 37 | tag="moon", 38 | class_name="text-gray-400 hover:text-gray-200", 39 | ), 40 | class_name="p-2 rounded-full hover:bg-gray-800", 41 | ), 42 | rx.el.div( 43 | class_name="w-8 h-8 rounded-full bg-cyan-500 ml-3 hidden sm:block" 44 | ), 45 | class_name="flex items-center space-x-1 sm:space-x-3", 46 | ), 47 | class_name="sticky top-0 z-30 flex items-center justify-between p-4 border-b border-gray-700/50 bg-gray-950/80 backdrop-blur-md", 48 | ) 49 | -------------------------------------------------------------------------------- /futuristic_dashboard/futuristic_dashboard/futuristic_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from futuristic_dashboard.components.header import dashboard_header 4 | from futuristic_dashboard.components.main_content import main_content 5 | from futuristic_dashboard.components.right_sidebar import right_sidebar 6 | from futuristic_dashboard.components.sidebar import sidebar 7 | from futuristic_dashboard.states.dashboard_state import DashboardState 8 | 9 | 10 | def index() -> rx.Component: 11 | return rx.el.div( 12 | sidebar(), 13 | rx.el.div( 14 | dashboard_header(), 15 | rx.el.div( 16 | main_content(), 17 | right_sidebar(), 18 | class_name="flex flex-1 overflow-hidden", 19 | ), 20 | class_name="flex flex-col flex-1 overflow-hidden", 21 | ), 22 | rx.cond( 23 | DashboardState.mobile_sidebar_open, 24 | rx.el.div( 25 | on_click=DashboardState.toggle_mobile_sidebar, 26 | class_name="fixed inset-0 bg-black/50 z-30 md:hidden", 27 | ), 28 | None, 29 | ), 30 | class_name="flex h-screen bg-gray-950 text-gray-300 relative", 31 | on_mount=DashboardState.update_time, 32 | ) 33 | 34 | 35 | app = rx.App( 36 | theme=rx.theme(appearance="light"), 37 | stylesheets=[ 38 | "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js" 39 | ], 40 | ) 41 | app.add_page(index) 42 | -------------------------------------------------------------------------------- /futuristic_dashboard/futuristic_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/futuristic_dashboard/futuristic_dashboard/states/__init__.py -------------------------------------------------------------------------------- /futuristic_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /futuristic_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="futuristic_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /manufacturing_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .web 2 | *.db 3 | .states 4 | assets/external/ 5 | *.py[cod] 6 | __pycache__/ 7 | .DS_Store 8 | .idea/ 9 | -------------------------------------------------------------------------------- /manufacturing_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/manufacturing_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /manufacturing_dashboard/blocks/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/manufacturing_dashboard/blocks/__init__.py -------------------------------------------------------------------------------- /manufacturing_dashboard/manufacturing_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/manufacturing_dashboard/manufacturing_dashboard/__init__.py -------------------------------------------------------------------------------- /manufacturing_dashboard/manufacturing_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/manufacturing_dashboard/manufacturing_dashboard/components/__init__.py -------------------------------------------------------------------------------- /manufacturing_dashboard/manufacturing_dashboard/components/dashboard_header.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from manufacturing_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def dashboard_header() -> rx.Component: 7 | """Renders the header section of the dashboard.""" 8 | return rx.el.div( 9 | rx.el.div( 10 | rx.el.h1( 11 | "CONTROL CHARTS DASHBOARD", 12 | class_name="text-xs font-semibold text-slate-400 tracking-wider uppercase mr-4", 13 | ), 14 | rx.el.button( 15 | rx.cond( 16 | DashboardState.is_running, 17 | "Running...", 18 | "Start Process", 19 | ), 20 | on_click=DashboardState.start_process, 21 | disabled=DashboardState.is_running, 22 | class_name=rx.cond( 23 | DashboardState.is_running, 24 | "px-4 py-1.5 text-sm font-medium text-slate-300 bg-slate-700 rounded-md opacity-50 cursor-not-allowed", 25 | "px-4 py-1.5 text-sm font-medium text-white bg-cyan-600 rounded-md hover:bg-cyan-700 transition-colors duration-150", 26 | ), 27 | ), 28 | class_name="flex flex-1 justify-between items-center border-b-2 border-cyan-600 pb-2", 29 | ), 30 | class_name="flex justify-between items-center mb-8", 31 | ) 32 | -------------------------------------------------------------------------------- /manufacturing_dashboard/manufacturing_dashboard/components/distribution_chart.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from manufacturing_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def distribution_chart() -> rx.Component: 7 | """Renders the vertical bar chart for distribution data.""" 8 | return rx.el.div( 9 | rx.el.h2( 10 | "Diameter Distribution", 11 | class_name="text-xl font-semibold text-slate-200 mb-2 text-center px-4 pt-4", 12 | ), 13 | rx.recharts.bar_chart( 14 | rx.recharts.cartesian_grid( 15 | stroke_dasharray="3 3", 16 | stroke="#475569", 17 | horizontal=True, 18 | vertical=False, 19 | ), 20 | rx.recharts.x_axis(data_key="name", type_="category", hide=True), 21 | rx.recharts.y_axis( 22 | type_="number", 23 | allow_decimals=False, 24 | axis_line=False, 25 | tick_line=False, 26 | width=30, 27 | stroke="#94a3b8", 28 | font_size="10px", 29 | ), 30 | rx.recharts.bar( 31 | data_key="value", 32 | fill="#fbbf24", 33 | radius=[4, 4, 0, 0], 34 | is_animation_active=False, 35 | label_list={ 36 | "position": "right", 37 | "fill": "#e2e8f0", 38 | "font_size": "10px", 39 | "offset": 5, 40 | }, 41 | ), 42 | data=DashboardState.distribution_data, 43 | layout="vertical", 44 | bar_category_gap="25%", 45 | margin={ 46 | "top": 10, 47 | "right": 30, 48 | "left": 5, 49 | "bottom": 0, 50 | }, 51 | width="100%", 52 | height=320, 53 | ), 54 | class_name="bg-slate-800 rounded-lg shadow-lg border border-slate-700 h-[380px] flex flex-col w-full", 55 | ) 56 | -------------------------------------------------------------------------------- /manufacturing_dashboard/manufacturing_dashboard/components/pie_chart.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from manufacturing_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def ooc_pie_chart() -> rx.Component: 7 | """Renders the Pie chart showing % OOC per Parameter.""" 8 | return rx.el.div( 9 | rx.el.h2( 10 | "% OOC per Parameter", 11 | class_name="text-xl font-semibold text-slate-200 mb-4 text-center", 12 | ), 13 | rx.recharts.pie_chart( 14 | rx.recharts.pie( 15 | rx.foreach( 16 | DashboardState.pie_data, 17 | lambda item, index: rx.recharts.cell(fill=item["fill"]), 18 | ), 19 | data=DashboardState.pie_data, 20 | data_key="value", 21 | name_key="name", 22 | cx="50%", 23 | cy="50%", 24 | outer_radius="80%", 25 | inner_radius="40%", 26 | padding_angle=2, 27 | label_line=False, 28 | label=False, 29 | is_animation_active=False, 30 | ), 31 | rx.recharts.legend( 32 | layout="vertical", 33 | vertical_align="middle", 34 | align="right", 35 | icon_size=10, 36 | icon_type="square", 37 | wrapper_style={ 38 | "fontSize": "12px", 39 | "color": "#94a3b8", 40 | }, 41 | ), 42 | margin={ 43 | "top": 5, 44 | "right": 5, 45 | "left": 5, 46 | "bottom": 5, 47 | }, 48 | height=320, 49 | width="100%", 50 | ), 51 | class_name="bg-slate-800 p-6 rounded-lg shadow-lg border border-slate-700 h-[380px] flex flex-col justify-between w-full", 52 | ) 53 | -------------------------------------------------------------------------------- /manufacturing_dashboard/manufacturing_dashboard/manufacturing_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from manufacturing_dashboard.components.dashboard_header import dashboard_header 4 | from manufacturing_dashboard.components.metrics_summary import metrics_summary 5 | from manufacturing_dashboard.components.pie_chart import ooc_pie_chart 6 | from manufacturing_dashboard.components.sidebar import sidebar 7 | from manufacturing_dashboard.components.spc_chart import spc_chart 8 | 9 | 10 | def index() -> rx.Component: 11 | """The main dashboard page.""" 12 | return rx.el.div( 13 | sidebar(), 14 | rx.el.main( 15 | dashboard_header(), 16 | metrics_summary(), 17 | spc_chart(), 18 | rx.el.div( 19 | ooc_pie_chart(), 20 | class_name="mt-6 grid grid-cols-1 gap-6", 21 | ), 22 | class_name="w-full p-8 overflow-y-auto bg-slate-900 text-slate-100 min-h-screen lg:ml-64", 23 | ), 24 | class_name="flex max-h-screen w-full", 25 | ) 26 | 27 | 28 | app = rx.App( 29 | theme=rx.theme(appearance="light"), 30 | style={ 31 | "font_family": "'Inter', sans-serif", 32 | "height": "100%", 33 | "background_color": "#0f172a", 34 | "::selection": { 35 | "background_color": "#06b6d4", 36 | "color": "#ffffff", 37 | }, 38 | "body": {"height": "100%", "margin": 0}, 39 | "#__next": {"height": "100%"}, 40 | }, 41 | ) 42 | app.add_page(index) 43 | -------------------------------------------------------------------------------- /manufacturing_dashboard/manufacturing_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/manufacturing_dashboard/manufacturing_dashboard/states/__init__.py -------------------------------------------------------------------------------- /manufacturing_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/manufacturing_dashboard/preview.webp -------------------------------------------------------------------------------- /manufacturing_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | faker>=37.1.0 -------------------------------------------------------------------------------- /manufacturing_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="manufacturing_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /nba/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | -------------------------------------------------------------------------------- /nba/assets/ball.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nba/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/nba/assets/favicon.ico -------------------------------------------------------------------------------- /nba/assets/grid.css: -------------------------------------------------------------------------------- 1 | .recharts-cartesian-grid-horizontal line { 2 | stroke-dasharray: 0; 3 | stroke-opacity: 0.7 !important; 4 | stroke: var(--gray-6); 5 | } 6 | 7 | .recharts-cartesian-grid-vertical line { 8 | stroke-opacity: 0 !important; 9 | } -------------------------------------------------------------------------------- /nba/nba/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/nba/nba/__init__.py -------------------------------------------------------------------------------- /nba/nba/backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/nba/nba/backend/__init__.py -------------------------------------------------------------------------------- /nba/nba/backend/player.py: -------------------------------------------------------------------------------- 1 | from typing import Union 2 | 3 | import reflex as rx 4 | 5 | 6 | class Player(rx.Base): 7 | """The player class.""" 8 | 9 | name: str 10 | team: str 11 | number: int 12 | position: str 13 | age: int 14 | height: str 15 | weight: int 16 | college: str 17 | salary: Union[int, str] # Can also be a string for the NaN values 18 | -------------------------------------------------------------------------------- /nba/nba/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/nba/nba/components/__init__.py -------------------------------------------------------------------------------- /nba/nba/components/item_badges.py: -------------------------------------------------------------------------------- 1 | from typing import Dict, List 2 | 3 | import reflex as rx 4 | from reflex.components.radix.themes.base import ( 5 | LiteralAccentColor, 6 | ) 7 | 8 | from ..backend.backend import State 9 | 10 | 11 | def _get_item_color( 12 | item: str, items_dict: Dict[str, LiteralAccentColor] 13 | ) -> rx.Component: 14 | return rx.match(item, *[(t, items_dict.get(t, "blue")) for t in items_dict], "blue") 15 | 16 | 17 | badge_props = { 18 | "radius": "full", 19 | "variant": "surface", 20 | "size": "3", 21 | "margin": "5px", 22 | "cursor": "pointer", 23 | "style": {"_hover": {"opacity": 0.75}}, 24 | } 25 | 26 | 27 | def _selected_item_badge( 28 | item_name: str, items_dict: Dict[str, LiteralAccentColor], item: str 29 | ) -> rx.Component: 30 | return rx.badge( 31 | item, 32 | rx.icon("x", size=18), 33 | color_scheme=_get_item_color(item, items_dict), 34 | **badge_props, 35 | on_click=lambda: State.remove_selected(item_name, item), 36 | ) 37 | 38 | 39 | def _unselected_item_badge( 40 | item_name: str, items_dict: Dict[str, LiteralAccentColor], items: List 41 | ) -> rx.Component: 42 | return rx.cond( 43 | State.selected_items[item_name].contains(items[0]), 44 | rx.box(), 45 | rx.badge( 46 | items[0], 47 | rx.icon("plus", size=18), 48 | color_scheme=_get_item_color(items[0], items_dict), 49 | **badge_props, 50 | on_click=lambda: State.add_selected(item_name, items[0]), 51 | ), 52 | ) 53 | 54 | 55 | def _badge(text: str, color_scheme: LiteralAccentColor) -> rx.Component: 56 | return rx.badge( 57 | text, color_scheme=color_scheme, radius="large", variant="surface", size="3" 58 | ) 59 | 60 | 61 | def item_badge(item: str, item_dict: Dict[str, LiteralAccentColor]) -> rx.Component: 62 | return rx.match( 63 | item, 64 | *[(t, _badge(t, item_dict.get(t, "blue"))) for t in item_dict], 65 | _badge("item", "blue"), 66 | ) 67 | -------------------------------------------------------------------------------- /nba/nba/nba.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from .backend.backend import State 4 | from .views.navbar import navbar 5 | from .views.stats import stats_ui 6 | from .views.table import main_table 7 | 8 | 9 | def _tabs_trigger(text: str, icon: str, value: str): 10 | return rx.tabs.trigger( 11 | rx.hstack( 12 | rx.icon(icon, size=24), 13 | rx.heading(text, size="5"), 14 | spacing="2", 15 | align="center", 16 | width="100%", 17 | ), 18 | value=value, 19 | ) 20 | 21 | 22 | def index() -> rx.Component: 23 | return rx.vstack( 24 | navbar(), 25 | rx.tabs.root( 26 | rx.tabs.list( 27 | _tabs_trigger("Table", "table-2", value="table"), 28 | _tabs_trigger("Stats", "bar-chart-3", value="stats"), 29 | ), 30 | rx.tabs.content( 31 | main_table(), 32 | margin_top="1em", 33 | value="table", 34 | ), 35 | rx.tabs.content( 36 | stats_ui(), 37 | margin_top="1em", 38 | value="stats", 39 | ), 40 | default_value="table", 41 | width="100%", 42 | ), 43 | width="100%", 44 | spacing="6", 45 | padding_x=["1.5em", "1.5em", "3em", "5em"], 46 | padding_y=["1.25em", "1.25em", "2em"], 47 | ) 48 | 49 | 50 | base_stylesheets = [ 51 | "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap", 52 | "grid.css", 53 | ] 54 | 55 | base_style = { 56 | "font_family": "Inter", 57 | } 58 | 59 | app = rx.App( 60 | style=base_style, 61 | stylesheets=base_stylesheets, 62 | theme=rx.theme( 63 | appearance="light", has_background=True, radius="large", accent_color="orange" 64 | ), 65 | ) 66 | app.add_page( 67 | index, 68 | on_load=State.load_entries, 69 | title="NBA Data", 70 | description="NBA Data for the 2015-2016 season.", 71 | ) 72 | -------------------------------------------------------------------------------- /nba/nba/views/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/nba/nba/views/__init__.py -------------------------------------------------------------------------------- /nba/nba/views/navbar.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def navbar(): 5 | return rx.flex( 6 | rx.hstack( 7 | rx.image(src="/ball.svg", height="38px"), 8 | rx.heading("NBA DATA", size="7"), 9 | rx.badge( 10 | "2015-2016 season", 11 | radius="full", 12 | align="center", 13 | color_scheme="orange", 14 | variant="surface", 15 | ), 16 | align="center", 17 | ), 18 | rx.spacer(), 19 | rx.hstack( 20 | rx.logo(), 21 | rx.color_mode.button(), 22 | align="center", 23 | spacing="3", 24 | ), 25 | spacing="2", 26 | flex_direction=["column", "column", "row"], 27 | align="center", 28 | width="100%", 29 | top="0px", 30 | ) 31 | -------------------------------------------------------------------------------- /nba/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | pandas 3 | -------------------------------------------------------------------------------- /nba/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="nba", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /retail_analytics_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | .DS_Store 8 | .idea/ 9 | -------------------------------------------------------------------------------- /retail_analytics_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_analytics_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /retail_analytics_dashboard/blocks/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_analytics_dashboard/blocks/__init__.py -------------------------------------------------------------------------------- /retail_analytics_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_analytics_dashboard/preview.webp -------------------------------------------------------------------------------- /retail_analytics_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_analytics_dashboard/retail_analytics_dashboard/__init__.py -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_analytics_dashboard/retail_analytics_dashboard/components/__init__.py -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/components/overview_section.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from retail_analytics_dashboard.components.overview_chart import overview_chart 4 | from retail_analytics_dashboard.states.dashboard_state import DashboardState 5 | 6 | 7 | def overview_section() -> rx.Component: 8 | """The overview section with metric charts.""" 9 | return rx.el.section( 10 | rx.el.div( 11 | rx.el.h2( 12 | "Overview", 13 | class_name="text-xl font-semibold text-gray-800", 14 | ), 15 | rx.el.div( 16 | rx.el.button( 17 | rx.icon( 18 | tag="settings", 19 | class_name="w-4 h-4 mr-2", 20 | ), 21 | "Edit", 22 | on_click=DashboardState.toggle_customize_dialog, 23 | class_name="ml-auto flex items-center px-3 py-1.5 border border-gray-300 bg-white rounded-md text-sm text-gray-700 hover:bg-gray-50 shadow-sm", 24 | ), 25 | class_name="flex items-center space-x-2", 26 | ), 27 | class_name="flex justify-between items-center mb-6", 28 | ), 29 | rx.el.div( 30 | rx.foreach( 31 | DashboardState.visible_overview_metrics, 32 | overview_chart, 33 | ), 34 | class_name="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", 35 | ), 36 | ) 37 | -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/components/progress_bar.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from retail_analytics_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def progress_bar( 7 | label: rx.Var[str], 8 | value: rx.Var[str], 9 | total: rx.Var[str], 10 | percentage: rx.Var[float], 11 | ) -> rx.Component: 12 | """A simple progress bar component.""" 13 | return rx.el.div( 14 | rx.el.div( 15 | rx.el.p(label, class_name="text-sm text-gray-600"), 16 | rx.el.p( 17 | f"{value} / {total}", 18 | class_name="text-sm font-medium text-gray-800", 19 | ), 20 | class_name="flex justify-between mb-1", 21 | ), 22 | rx.el.div( 23 | rx.el.div( 24 | class_name="bg-indigo-600 h-2 rounded-full", 25 | style={"width": percentage.to_string() + "%"}, 26 | ), 27 | class_name="w-full bg-gray-200 rounded-full h-2", 28 | ), 29 | ) 30 | 31 | 32 | def cost_progress_bar( 33 | items: rx.Var[list[dict]], 34 | ) -> rx.Component: 35 | """A multi-segment progress bar for costs with remaining budget display.""" 36 | return rx.el.div( 37 | rx.el.div( 38 | rx.foreach( 39 | items, 40 | lambda item: rx.el.div( 41 | class_name=item["color"] 42 | + " h-2 first:rounded-l-full last:rounded-r-full", 43 | style={"width": item["percentage"].to_string() + "%"}, 44 | ), 45 | ), 46 | class_name="flex w-full bg-gray-200 rounded-full h-2 overflow-hidden", 47 | ), 48 | rx.el.div( 49 | rx.foreach( 50 | items, 51 | lambda item: rx.el.div( 52 | rx.el.span(class_name="w-2 h-2 rounded-full mr-2 " + item["color"]), 53 | rx.el.span( 54 | f"{item['label']} ({item['value']} / {item['percentage']}%)", 55 | class_name="text-xs text-gray-600", 56 | ), 57 | class_name="flex items-center", 58 | ), 59 | ), 60 | class_name="mt-2 space-y-1", 61 | ), 62 | rx.el.p( 63 | "Remaining $", 64 | DashboardState.remaining_budget_value.to_string(), 65 | " (", 66 | DashboardState.remaining_budget_percentage.to_string(), 67 | "%) / $", 68 | DashboardState.total_budget.to_string(), 69 | class_name="text-xs text-gray-500 mt-2 text-right", 70 | ), 71 | ) 72 | -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/models/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_analytics_dashboard/retail_analytics_dashboard/models/__init__.py -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/models/models.py: -------------------------------------------------------------------------------- 1 | from typing import List, TypedDict 2 | 3 | 4 | class NavItem(TypedDict): 5 | name: str 6 | icon: str 7 | active: bool 8 | 9 | 10 | class ShortcutItem(TypedDict): 11 | name: str 12 | icon: str 13 | 14 | 15 | class BillingStat(TypedDict): 16 | label: str 17 | value: str 18 | total: str 19 | percentage: float 20 | 21 | 22 | class CostItem(TypedDict): 23 | label: str 24 | value: str 25 | value_num: float 26 | percentage: float 27 | color: str 28 | 29 | 30 | class ChartDataPoint(TypedDict): 31 | date: str 32 | value1: int 33 | value2: int 34 | 35 | 36 | class OverviewMetric(TypedDict): 37 | id: str 38 | title: str 39 | change: str 40 | change_color: str 41 | value: str 42 | previous_value: str 43 | chart_data: List[ChartDataPoint] 44 | -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/retail_analytics_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from retail_analytics_dashboard.components.billing_cycle import billing_cycle 4 | from retail_analytics_dashboard.components.customize_charts_dialog import ( 5 | customize_charts_dialog, 6 | ) 7 | from retail_analytics_dashboard.components.overview_section import overview_section 8 | from retail_analytics_dashboard.components.sidebar import sidebar 9 | 10 | 11 | def index() -> rx.Component: 12 | """The main dashboard page.""" 13 | return rx.el.div( 14 | sidebar(), 15 | rx.el.main( 16 | billing_cycle(), 17 | rx.el.div(class_name="mt-6"), 18 | overview_section(), 19 | class_name="flex-1 p-6 bg-gray-50 overflow-y-auto", 20 | ), 21 | customize_charts_dialog(), 22 | class_name="flex min-h-screen relative", 23 | ) 24 | 25 | 26 | app = rx.App(theme=rx.theme(appearance="light")) 27 | app.add_page(index) 28 | -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_analytics_dashboard/retail_analytics_dashboard/states/__init__.py -------------------------------------------------------------------------------- /retail_analytics_dashboard/retail_analytics_dashboard/states/utils.py: -------------------------------------------------------------------------------- 1 | import datetime 2 | import random 3 | from typing import List 4 | 5 | from retail_analytics_dashboard.models.models import ChartDataPoint 6 | 7 | 8 | def generate_chart_data( 9 | start_date_str: str, 10 | end_date_str: str, 11 | num_points: int = 30, 12 | min_val1: int = 50, 13 | max_val1: int = 200, 14 | min_val2: int = 30, 15 | max_val2: int = 150, 16 | ) -> List[ChartDataPoint]: 17 | data: List[ChartDataPoint] = [] 18 | start_date = datetime.datetime.strptime(start_date_str, "%d/%m/%Y") 19 | end_date = datetime.datetime.strptime(end_date_str, "%d/%m/%Y") 20 | date_delta = (end_date - start_date) / (num_points - 1) 21 | for i in range(num_points): 22 | current_date = start_date + date_delta * i 23 | data.append( 24 | { 25 | "date": current_date.strftime("%d/%m/%Y"), 26 | "value1": random.randint(min_val1, max_val1), 27 | "value2": random.randint(min_val2, max_val2), 28 | } 29 | ) 30 | return data 31 | -------------------------------------------------------------------------------- /retail_analytics_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="retail_analytics_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /retail_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | assets/external/ 2 | __pycache__/ 3 | *.db 4 | .web 5 | .states 6 | *.py[cod] 7 | -------------------------------------------------------------------------------- /retail_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /retail_dashboard/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/assets/preview.png -------------------------------------------------------------------------------- /retail_dashboard/blocks/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/blocks/__init__.py -------------------------------------------------------------------------------- /retail_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | pandas -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/retail_dashboard/__init__.py -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/retail_dashboard/components/__init__.py -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/components/chart_utils.py: -------------------------------------------------------------------------------- 1 | TOOLTIP_PROPS = { 2 | "cursor": {"fill": "rgba(200, 200, 200, 0.1)"}, 3 | "content_style": { 4 | "backgroundColor": "white", 5 | "borderColor": "lightgray", 6 | "borderRadius": "8px", 7 | "boxShadow": "2px 2px 5px rgba(0,0,0,0.1)", 8 | "padding": "10px", 9 | }, 10 | "label_style": {"fontWeight": "bold", "color": "#333"}, 11 | "item_style": {"fontSize": "12px", "color": "#555"}, 12 | } 13 | -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/models/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/retail_dashboard/models/__init__.py -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/models/entry.py: -------------------------------------------------------------------------------- 1 | from typing import Literal, TypedDict 2 | 3 | 4 | class DetailEntry(TypedDict): 5 | id: int 6 | owner: str 7 | status: Literal["Live", "Inactive", "Archived"] 8 | country: str 9 | stability: int 10 | costs: float 11 | last_edited: str 12 | -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/pages/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/retail_dashboard/pages/__init__.py -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/pages/details_page.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from retail_dashboard.components.details_table import details_table 4 | from retail_dashboard.components.header import header as details_page_header 5 | 6 | 7 | def details_page_layout() -> rx.Component: 8 | """The main layout for the Details page.""" 9 | return rx.el.div( 10 | details_page_header(), 11 | details_table(), 12 | class_name="p-2 md:p-6", 13 | ) 14 | -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/retail_dashboard.py: -------------------------------------------------------------------------------- 1 | from typing import Callable 2 | 3 | import reflex as rx 4 | 5 | from retail_dashboard.components.sidebar import sidebar 6 | from retail_dashboard.pages.details_page import details_page_layout 7 | from retail_dashboard.states.dashboard_state import DashboardState 8 | 9 | 10 | def page_with_sidebar( 11 | content_func: Callable[[], rx.Component], 12 | ) -> rx.Component: 13 | """Main page layout with sidebar and content area.""" 14 | return rx.el.div( 15 | sidebar(), 16 | rx.el.main( 17 | content_func(), 18 | class_name="flex-1 overflow-y-auto bg-gray-50 p-0", 19 | ), 20 | rx.el.div( 21 | class_name=rx.cond( 22 | DashboardState.show_status_filter 23 | | DashboardState.show_country_filter 24 | | DashboardState.show_costs_filter, 25 | "fixed inset-0 bg-black bg-opacity-20 z-20", 26 | "hidden", 27 | ), 28 | on_click=DashboardState.close_filter_dropdowns, 29 | ), 30 | class_name="flex h-screen font-['Inter']", 31 | ) 32 | 33 | 34 | def details_route() -> rx.Component: 35 | """Route for the Details page.""" 36 | return page_with_sidebar(details_page_layout) 37 | 38 | 39 | def index() -> rx.Component: 40 | """Default route, now pointing to details page.""" 41 | return details_route() 42 | 43 | 44 | app = rx.App( 45 | theme=rx.theme(appearance="light"), 46 | head_components=[ 47 | rx.el.link( 48 | rel="preconnect", 49 | href="https://fonts.googleapis.com", 50 | ), 51 | rx.el.link( 52 | rel="preconnect", 53 | href="https://fonts.gstatic.com", 54 | crossorigin="", 55 | ), 56 | rx.el.link( 57 | href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap", 58 | rel="stylesheet", 59 | ), 60 | ], 61 | ) 62 | app.add_page(index, route="/") 63 | -------------------------------------------------------------------------------- /retail_dashboard/retail_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retail_dashboard/retail_dashboard/states/__init__.py -------------------------------------------------------------------------------- /retail_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="retail_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /retention_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | .DS_Store 8 | .idea/ 9 | -------------------------------------------------------------------------------- /retention_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retention_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /retention_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retention_dashboard/preview.webp -------------------------------------------------------------------------------- /retention_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /retention_dashboard/retention_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retention_dashboard/retention_dashboard/__init__.py -------------------------------------------------------------------------------- /retention_dashboard/retention_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retention_dashboard/retention_dashboard/components/__init__.py -------------------------------------------------------------------------------- /retention_dashboard/retention_dashboard/retention_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from retention_dashboard.components.layout import layout 4 | 5 | 6 | def index() -> rx.Component: 7 | """The main page of the app.""" 8 | return layout() 9 | 10 | 11 | app = rx.App(theme=rx.theme(appearance="light")) 12 | app.add_page(index, route="/") 13 | -------------------------------------------------------------------------------- /retention_dashboard/retention_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/retention_dashboard/retention_dashboard/states/__init__.py -------------------------------------------------------------------------------- /retention_dashboard/retention_dashboard/states/dashboard_state.py: -------------------------------------------------------------------------------- 1 | from typing import Literal 2 | 3 | import reflex as rx 4 | 5 | 6 | class DashboardState(rx.State): 7 | """State to manage the active tab in the dashboard.""" 8 | 9 | active_tab: Literal["Support", "Retention", "Workflow", "Agents"] = "Retention" 10 | 11 | @rx.event 12 | def set_active_tab( 13 | self, 14 | tab: Literal["Support", "Retention", "Workflow", "Agents"], 15 | ): 16 | """Sets the active tab.""" 17 | self.active_tab = tab 18 | -------------------------------------------------------------------------------- /retention_dashboard/retention_dashboard/states/retention_state.py: -------------------------------------------------------------------------------- 1 | from typing import List, Optional, TypedDict 2 | 3 | import reflex as rx 4 | 5 | from retention_dashboard.states.data import retention_data_raw 6 | 7 | 8 | class RetentionWeekData(TypedDict): 9 | value: Optional[float] 10 | count: Optional[int] 11 | 12 | 13 | class RetentionCohortData(TypedDict): 14 | cohort: str 15 | initial_customers: int 16 | weeks: List[RetentionWeekData] 17 | 18 | 19 | class RetentionState(rx.State): 20 | """State for the Cohort Retention tab.""" 21 | 22 | column_headers: list[str] = [ 23 | "Cohort", 24 | "Week 0", 25 | "Week 1", 26 | "Week 2", 27 | "Week 3", 28 | "Week 4", 29 | "Week 5", 30 | "Week 6", 31 | "Week 7", 32 | "Week 8", 33 | "Week 9", 34 | ] 35 | retention_data: list[RetentionCohortData] = retention_data_raw 36 | 37 | def get_cell_color(self, percentage: float) -> str: 38 | """Returns background color based on percentage.""" 39 | if percentage >= 80: 40 | return "bg-blue-600" 41 | elif percentage >= 60: 42 | return "bg-blue-500" 43 | elif percentage >= 40: 44 | return "bg-blue-400" 45 | elif percentage >= 20: 46 | return "bg-blue-300" 47 | elif percentage > 0: 48 | return "bg-blue-200" 49 | return "bg-gray-100" 50 | -------------------------------------------------------------------------------- /retention_dashboard/retention_dashboard/states/workflow_state.py: -------------------------------------------------------------------------------- 1 | from typing import Dict, List, TypedDict 2 | 3 | import reflex as rx 4 | 5 | 6 | class ChartData(TypedDict): 7 | name: str 8 | value: int 9 | percentage: float 10 | fill: str 11 | 12 | 13 | class WorkflowState(rx.State): 14 | """State for the Workflow tab.""" 15 | 16 | test_quota: int = 34 17 | departments: List[str] = [ 18 | "Customer Service", 19 | "Technical Support", 20 | "Billing Support", 21 | "Claims Processing", 22 | "Account Management", 23 | "Sales Support", 24 | ] 25 | excluded_departments: Dict[str, bool] = {dept: False for dept in departments} 26 | completed_cases_data: list[ChartData] = [ 27 | { 28 | "name": "Completed", 29 | "value": 11327, 30 | "percentage": 100.0, 31 | "fill": "#3b82f6", 32 | } 33 | ] 34 | test_results_data_tested: list[ChartData] = [ 35 | { 36 | "name": "Tested", 37 | "value": 3874, 38 | "percentage": 34.2, 39 | "fill": "#3b82f6", 40 | } 41 | ] 42 | test_results_data_untested: list[ChartData] = [ 43 | { 44 | "name": "Untested", 45 | "value": 7453, 46 | "percentage": 65.8, 47 | "fill": "#d1d5db", 48 | } 49 | ] 50 | impact_data_error_free: list[ChartData] = [ 51 | { 52 | "name": "Error-free", 53 | "value": 3413, 54 | "percentage": 30.1, 55 | "fill": "#10b981", 56 | } 57 | ] 58 | impact_data_corrected: list[ChartData] = [ 59 | { 60 | "name": "Corrected", 61 | "value": 461, 62 | "percentage": 4.1, 63 | "fill": "#ef4444", 64 | } 65 | ] 66 | 67 | @rx.event 68 | def set_test_quota(self, value: str): 69 | """Sets the test quota value from the slider.""" 70 | self.test_quota = int(value) 71 | 72 | @rx.event 73 | def toggle_department(self, dept_name: str): 74 | """Toggles the exclusion status of a department.""" 75 | self.excluded_departments[dept_name] = not self.excluded_departments[dept_name] 76 | -------------------------------------------------------------------------------- /retention_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="retention_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /ruff.toml: -------------------------------------------------------------------------------- 1 | # Define which rules to enable 2 | output-format = "concise" 3 | 4 | # Exclude specific files or directories (e.g., migrations or test data) 5 | exclude = [ 6 | ".git", 7 | ".venv", 8 | "migrations", 9 | "tests/data", 10 | ] 11 | # Define line length (matches Black by default) 12 | line-length = 88 13 | 14 | [lint] 15 | select = ["B", "C4", "E", "ERA", "F", "FURB", "I", "PERF", "PTH", "RUF", "SIM", "T", "W"] 16 | ignore = ["E501", "F403", "RUF012"] 17 | 18 | 19 | # Add per-file specific configurations 20 | [lint.per-file-ignores] 21 | # Ignore docstring checks in tests 22 | "tests/**/*.py" = ["D"] 23 | # Ignore all linter checks for certain scripts 24 | "scripts/*.py" = ["ALL"] 25 | # Never lint the alembic files 26 | "*/alembic/*" = ["ALL"] 27 | -------------------------------------------------------------------------------- /sales/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | reflex.db 8 | -------------------------------------------------------------------------------- /sales/README.md: -------------------------------------------------------------------------------- 1 | # Sales Template - Quick Start Guide 2 | Welcome to your new sales app template! This template is built with Reflex and integrates OpenAI for enhanced AI-driven features. 3 | 4 | ## Setup Instructions 5 | Follow these steps to get your app up and running quickly. 6 | 7 | ## 1. Install Dependencies 8 | First, install all the necessary dependencies: 9 | 10 | ```shell 11 | pip install -r requirements.txt 12 | ``` 13 | 14 | ## 2. Initialize Database 15 | 16 | ```shell 17 | reflex db init 18 | ``` 19 | 20 | ## 3. Set Your OpenAI API Key 21 | To utilize OpenAI in this template, you need to set your OPENAI_API_KEY environment variable. Here’s how you can set it based on your operating system: 22 | 23 | ### On Linux / macOS: 24 | ```shell 25 | export OPENAI_API_KEY=your-openai-api-key 26 | ``` 27 | 28 | ### On Windows (Command Prompt): 29 | ```shell 30 | set OPENAI_API_KEY=your-openai-api-key 31 | ``` 32 | 33 | ### On Windows (PowerShell): 34 | ```shell 35 | $env:OPENAI_API_KEY="your-openai-api-key" 36 | ``` 37 | 38 | ### 4. Run the App 39 | After setting up your environment variable, you can start the app: 40 | 41 | ```shell 42 | reflex run 43 | ``` 44 | This will launch the app locally and you can interact with it in your browser. 45 | 46 | ### Notes 47 | - Make sure you have your OpenAI API key. If you don’t have one, you can get it by signing up at [OpenAI](https://openai.com/api/). 48 | - You can permanently set the environment variable in your shell configuration (e.g., `.bashrc` or `.zshrc` for Linux/macOS) to avoid setting it every time. 49 | Enjoy building with Reflex and OpenAI! 50 | 51 | ## Applying Database Schema Changes 52 | 53 | If changes are made to the database models after initialization, they can be 54 | applied by running the following commands: 55 | 56 | ```bash 57 | reflex db makemigrations --message "Brief description of the change" 58 | ``` 59 | 60 | ```bash 61 | reflex db migrate 62 | ``` 63 | -------------------------------------------------------------------------------- /sales/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/sales/assets/favicon.ico -------------------------------------------------------------------------------- /sales/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 2 | openai>=1 3 | -------------------------------------------------------------------------------- /sales/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="sales", 5 | tailwind=None, 6 | ) 7 | -------------------------------------------------------------------------------- /sales/sales/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/sales/sales/__init__.py -------------------------------------------------------------------------------- /sales/sales/backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/sales/sales/backend/__init__.py -------------------------------------------------------------------------------- /sales/sales/backend/models.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | class Customer(rx.Model, table=True): # type: ignore 5 | """The customer model.""" 6 | 7 | customer_name: str 8 | email: str 9 | age: int 10 | gender: str 11 | location: str 12 | job: str 13 | salary: int 14 | -------------------------------------------------------------------------------- /sales/sales/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/sales/sales/components/__init__.py -------------------------------------------------------------------------------- /sales/sales/components/form_field.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def form_field( 5 | label: str, 6 | placeholder: str, 7 | type: str, 8 | name: str, 9 | icon: str, 10 | default_value: str = "", 11 | ) -> rx.Component: 12 | return rx.form.field( 13 | rx.flex( 14 | rx.hstack( 15 | rx.icon(icon, size=16, stroke_width=1.5), 16 | rx.form.label(label), 17 | align="center", 18 | spacing="2", 19 | ), 20 | rx.form.control( 21 | rx.input( 22 | placeholder=placeholder, type=type, default_value=default_value 23 | ), 24 | as_child=True, 25 | ), 26 | direction="column", 27 | spacing="1", 28 | ), 29 | name=name, 30 | width="100%", 31 | ) 32 | -------------------------------------------------------------------------------- /sales/sales/components/gender_badges.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def _badge(text: str, color_scheme: str): 5 | return rx.badge( 6 | text, color_scheme=color_scheme, radius="full", variant="soft", size="3" 7 | ) 8 | 9 | 10 | def gender_badge(gender: str): 11 | badge_mapping = { 12 | "Male": ("♂️ Male", "blue"), 13 | "Female": ("♀️ Female", "pink"), 14 | "Other": ("Other", "gray"), 15 | } 16 | return _badge(*badge_mapping.get(gender, ("Other", "gray"))) 17 | -------------------------------------------------------------------------------- /sales/sales/sales.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from .backend.backend import State 4 | from .views.email import email_gen_ui 5 | from .views.navbar import navbar 6 | from .views.table import main_table 7 | 8 | 9 | def index() -> rx.Component: 10 | return rx.vstack( 11 | navbar(), 12 | rx.flex( 13 | rx.box(main_table(), width=["100%", "100%", "100%", "60%"]), 14 | email_gen_ui(), 15 | spacing="6", 16 | width="100%", 17 | flex_direction=["column", "column", "column", "row"], 18 | ), 19 | height="100vh", 20 | bg=rx.color("accent", 1), 21 | width="100%", 22 | spacing="6", 23 | padding_x=["1.5em", "1.5em", "3em"], 24 | padding_y=["1em", "1em", "2em"], 25 | ) 26 | 27 | 28 | app = rx.App( 29 | theme=rx.theme( 30 | appearance="light", has_background=True, radius="large", accent_color="blue" 31 | ), 32 | ) 33 | app.add_page( 34 | index, 35 | on_load=State.load_entries, 36 | title="Sales App", 37 | description="Generate personalized sales emails.", 38 | ) 39 | -------------------------------------------------------------------------------- /sales/sales/views/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/sales/sales/views/__init__.py -------------------------------------------------------------------------------- /sales/sales/views/navbar.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def navbar(): 5 | return rx.flex( 6 | rx.badge( 7 | rx.icon(tag="mails", size=28), 8 | rx.heading("Personalized Sales", size="6"), 9 | radius="large", 10 | align="center", 11 | color_scheme="blue", 12 | variant="surface", 13 | padding="0.65rem", 14 | ), 15 | rx.spacer(), 16 | rx.hstack( 17 | rx.logo(), 18 | rx.color_mode.button(), 19 | align="center", 20 | spacing="3", 21 | ), 22 | spacing="2", 23 | flex_direction=["column", "column", "row"], 24 | align="center", 25 | width="100%", 26 | top="0px", 27 | ) 28 | -------------------------------------------------------------------------------- /space_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | .DS_Store 8 | .idea/ -------------------------------------------------------------------------------- /space_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/space_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /space_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/space_dashboard/preview.webp -------------------------------------------------------------------------------- /space_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /space_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="space_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/space_dashboard/space_dashboard/__init__.py -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/space_dashboard/space_dashboard/components/__init__.py -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/alert_indicator.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def alert_indicator() -> rx.Component: 7 | """A flashing red alert indicator.""" 8 | return rx.el.div( 9 | rx.el.div( 10 | DashboardState.alert_value.to_string(), 11 | class_name="text-white text-xs font-bold", 12 | ), 13 | class_name="absolute top-10 right-10 w-10 h-10 bg-red-600 rounded-full flex items-center justify-center border-2 border-red-400 shadow-lg animate-pulse", 14 | ) 15 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/control_buttons.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def control_buttons() -> rx.Component: 7 | """The bottom center control buttons.""" 8 | return rx.el.div( 9 | rx.foreach( 10 | DashboardState.control_buttons, 11 | lambda button_text: rx.el.button( 12 | button_text, 13 | class_name="flex-1 bg-gradient-to-br from-blue-900/50 to-black/40 border border-cyan-700/50 rounded text-cyan-300 text-sm uppercase tracking-wider py-3 px-4 hover:bg-cyan-900/50 hover:border-cyan-500 transition-all duration-200 font-semibold", 14 | ), 15 | ), 16 | class_name="grid grid-cols-2 gap-3 mt-8 w-full px-4 sm:px-0", 17 | ) 18 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/data_stream.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.components.section_wrapper import section_wrapper 4 | from space_dashboard.states.dashboard_state import ( 5 | DashboardState, 6 | StreamData, 7 | ) 8 | 9 | 10 | def data_stream_item(data: StreamData) -> rx.Component: 11 | """Displays a single data stream item.""" 12 | return rx.el.div( 13 | rx.el.p( 14 | data["label"], 15 | class_name="text-sm text-cyan-400 uppercase font-semibold", 16 | ), 17 | rx.el.p( 18 | data["value"].to_string(), 19 | class_name="text-lg text-white font-mono", 20 | ), 21 | class_name="text-center p-2", 22 | ) 23 | 24 | 25 | def data_stream_section() -> rx.Component: 26 | """The Data Stream section.""" 27 | return section_wrapper( 28 | "DATA_STREAM", 29 | rx.el.div( 30 | rx.foreach( 31 | DashboardState.data_stream_data, 32 | data_stream_item, 33 | ), 34 | class_name="grid grid-cols-3 gap-2", 35 | ), 36 | ) 37 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/environment.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.components.section_wrapper import section_wrapper 4 | from space_dashboard.states.dashboard_state import ( 5 | DashboardState, 6 | EnvData, 7 | ) 8 | 9 | 10 | def environment_item(data: EnvData) -> rx.Component: 11 | """Displays a single environment metric.""" 12 | return rx.el.div( 13 | rx.el.div( 14 | rx.el.div( 15 | rx.el.span( 16 | data["unit"], 17 | class_name="text-xs text-cyan-400 font-bold", 18 | ), 19 | class_name="w-12 h-12 rounded-full border-2 border-cyan-600 flex items-center justify-center mr-4 bg-black/20", 20 | ), 21 | class_name="flex-shrink-0", 22 | ), 23 | rx.el.div( 24 | rx.el.p( 25 | data["label"], 26 | class_name="text-xs text-cyan-400 uppercase", 27 | ), 28 | rx.el.p( 29 | data["value"], 30 | class_name="text-2xl text-white font-light tracking-wide", 31 | ), 32 | class_name="flex-grow", 33 | ), 34 | class_name="flex items-center mb-4", 35 | ) 36 | 37 | 38 | def environment_section() -> rx.Component: 39 | """The environment monitoring section.""" 40 | return section_wrapper( 41 | "ENVIRONMENT", 42 | rx.foreach( 43 | DashboardState.environment_data, 44 | environment_item, 45 | ), 46 | ) 47 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/header.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def header() -> rx.Component: 7 | """The dashboard header.""" 8 | return rx.el.header( 9 | rx.el.div( 10 | rx.el.span("// ", class_name="text-cyan-600"), 11 | rx.el.span( 12 | "ARES_DASHBOARD", 13 | class_name="text-white font-semibold tracking-wider", 14 | ), 15 | class_name="text-lg", 16 | ), 17 | rx.el.div( 18 | rx.el.span( 19 | DashboardState.user_status, 20 | class_name="text-gray-400 text-xs uppercase tracking-wider mr-2", 21 | ), 22 | rx.el.span( 23 | DashboardState.live_status, 24 | class_name="text-green-500 text-xs font-bold", 25 | ), 26 | class_name="flex items-center max-md:hidden", 27 | ), 28 | class_name="flex justify-between items-center w-full px-6 py-4 border-b border-blue-800/50", 29 | ) 30 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/hq_coms.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.components.section_wrapper import section_wrapper 4 | from space_dashboard.states.dashboard_state import ( 5 | ComData, 6 | DashboardState, 7 | ) 8 | 9 | 10 | def hq_com_item(data: ComData) -> rx.Component: 11 | """Displays a single HQ Coms channel.""" 12 | return rx.el.div( 13 | rx.el.p( 14 | f"{data['channel']} [{data['value'].to_string()}]", 15 | class_name="text-sm text-cyan-300 font-mono", 16 | ), 17 | class_name="p-1", 18 | ) 19 | 20 | 21 | def hq_coms_section() -> rx.Component: 22 | """The HQ Communications section.""" 23 | return section_wrapper( 24 | "HQ_COMS", 25 | rx.el.div( 26 | rx.foreach(DashboardState.hq_coms_data, hq_com_item), 27 | class_name="grid grid-cols-2 gap-x-4 gap-y-1", 28 | ), 29 | ) 30 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/planets.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.components.section_wrapper import section_wrapper 4 | from space_dashboard.states.dashboard_state import ( 5 | DashboardState, 6 | PlanetData, 7 | ) 8 | 9 | 10 | def planet_item(data: PlanetData) -> rx.Component: 11 | """Displays a single planet distance.""" 12 | return rx.el.div( 13 | rx.el.div( 14 | rx.el.div( 15 | class_name=f"w-8 h-8 rounded-full {data['color']} mr-4 border-2 border-white/50" 16 | ), 17 | class_name="flex-shrink-0", 18 | ), 19 | rx.el.div( 20 | rx.el.p( 21 | data["name"], 22 | class_name="text-sm text-cyan-400 uppercase font-semibold", 23 | ), 24 | rx.el.p( 25 | data["distance"], 26 | class_name="text-xl text-white font-light tracking-wide", 27 | ), 28 | class_name="flex-grow", 29 | ), 30 | class_name="flex items-center mb-3", 31 | ) 32 | 33 | 34 | def planets_section() -> rx.Component: 35 | """The planets distance section.""" 36 | return section_wrapper( 37 | "PLANETS", 38 | rx.foreach(DashboardState.planets_data, planet_item), 39 | ) 40 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/pos_tracking.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.components.section_wrapper import section_wrapper 4 | from space_dashboard.states.dashboard_state import ( 5 | DashboardState, 6 | PosData, 7 | ) 8 | 9 | 10 | def pos_tracking_item(data: PosData) -> rx.Component: 11 | """Displays a single position tracking metric with a progress bar.""" 12 | return rx.el.div( 13 | rx.el.div( 14 | rx.el.span( 15 | f"{data['label']}:", 16 | class_name="text-sm text-cyan-400 mr-2 font-semibold", 17 | ), 18 | rx.el.span( 19 | data["value"].to_string(), 20 | class_name="text-sm text-white font-mono", 21 | ), 22 | class_name="flex justify-between items-center mb-1", 23 | ), 24 | rx.el.progress( 25 | value=data["value"], 26 | max=100, 27 | class_name="w-full h-1.5 bg-blue-900/50 rounded-full overflow-hidden", 28 | ), 29 | class_name="mb-3", 30 | ) 31 | 32 | 33 | def pos_tracking_section() -> rx.Component: 34 | """The Position Tracking section.""" 35 | return section_wrapper( 36 | "POS_TRACKING", 37 | rx.foreach( 38 | DashboardState.pos_tracking_data, 39 | pos_tracking_item, 40 | ), 41 | ) 42 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/section_wrapper.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | 4 | def section_wrapper(title: str, *children, **props) -> rx.Component: 5 | """A styled container for dashboard sections.""" 6 | return rx.el.div( 7 | rx.el.h2( 8 | title, 9 | class_name="text-xs uppercase text-cyan-500 tracking-wider font-semibold mb-3", 10 | ), 11 | rx.el.div(*children), 12 | class_name="bg-gradient-to-br from-blue-900/30 to-black/30 p-4 rounded-lg border border-blue-800/50 shadow-lg", 13 | **props, 14 | ) 15 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/components/speed_display.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.states.dashboard_state import DashboardState 4 | 5 | 6 | def speed_display() -> rx.Component: 7 | """The central speed display.""" 8 | return rx.el.div( 9 | rx.el.div( 10 | rx.el.div( 11 | rx.el.div( 12 | rx.el.p( 13 | DashboardState.current_speed.to_string(), 14 | class_name="text-6xl text-white font-thin tracking-tighter mb-1", 15 | ), 16 | rx.el.p( 17 | "km/h", 18 | class_name="text-xl text-cyan-400 uppercase tracking-widest", 19 | ), 20 | class_name="flex flex-col items-center justify-center text-center", 21 | ), 22 | class_name="w-64 h-64 rounded-full border-2 border-cyan-600/50 flex items-center justify-center bg-black/10 shadow-inner", 23 | ), 24 | class_name="w-80 h-80 rounded-full border border-cyan-700/40 p-2 flex items-center justify-center bg-black/10", 25 | ), 26 | class_name="w-96 h-96 rounded-full border border-blue-800/30 p-4 flex items-center justify-center bg-gradient-to-br from-blue-900/10 to-black/20 shadow-2xl relative", 27 | ) 28 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/space_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from space_dashboard.components.alert_indicator import alert_indicator 4 | from space_dashboard.components.control_buttons import control_buttons 5 | from space_dashboard.components.data_stream import data_stream_section 6 | from space_dashboard.components.environment import environment_section 7 | from space_dashboard.components.header import header 8 | from space_dashboard.components.hq_coms import hq_coms_section 9 | from space_dashboard.components.planets import planets_section 10 | from space_dashboard.components.pos_tracking import pos_tracking_section 11 | from space_dashboard.components.speed_display import speed_display 12 | 13 | 14 | def index() -> rx.Component: 15 | """The main dashboard page.""" 16 | return rx.el.div( 17 | header(), 18 | rx.el.main( 19 | rx.el.div( 20 | rx.el.div( 21 | environment_section(), 22 | planets_section(), 23 | class_name="flex flex-col gap-6", 24 | ), 25 | rx.el.div( 26 | rx.el.div( 27 | speed_display(), 28 | alert_indicator(), 29 | control_buttons(), 30 | class_name="flex flex-col items-center justify-center flex-grow relative", 31 | ), 32 | class_name="flex items-center justify-center", 33 | ), 34 | rx.el.div( 35 | hq_coms_section(), 36 | pos_tracking_section(), 37 | data_stream_section(), 38 | class_name="flex flex-col gap-6", 39 | ), 40 | class_name="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 flex-grow", 41 | ), 42 | class_name="flex flex-col flex-grow", 43 | ), 44 | class_name="min-h-screen bg-gradient-to-br from-blue-950 via-black to-blue-950 text-cyan-200 flex flex-col", 45 | ) 46 | 47 | 48 | app = rx.App(theme=rx.theme(appearance="light")) 49 | app.add_page(index) 50 | -------------------------------------------------------------------------------- /space_dashboard/space_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/space_dashboard/space_dashboard/states/__init__.py -------------------------------------------------------------------------------- /stock_graph_app/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | __pycache__/ 3 | *.db 4 | assets/external/ 5 | .web 6 | *.py[cod] 7 | -------------------------------------------------------------------------------- /stock_graph_app/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_graph_app/assets/favicon.ico -------------------------------------------------------------------------------- /stock_graph_app/blocks/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_graph_app/blocks/__init__.py -------------------------------------------------------------------------------- /stock_graph_app/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_graph_app/preview.png -------------------------------------------------------------------------------- /stock_graph_app/requirements.txt: -------------------------------------------------------------------------------- 1 | 2 | reflex>=0.7.13a1 3 | yfinance>=0.2.61 -------------------------------------------------------------------------------- /stock_graph_app/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="stock_graph_app", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /stock_graph_app/stock_graph_app/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_graph_app/stock_graph_app/__init__.py -------------------------------------------------------------------------------- /stock_graph_app/stock_graph_app/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_graph_app/stock_graph_app/components/__init__.py -------------------------------------------------------------------------------- /stock_graph_app/stock_graph_app/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_graph_app/stock_graph_app/states/__init__.py -------------------------------------------------------------------------------- /stock_graph_app/stock_graph_app/stock_graph_app.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from stock_graph_app.components.stock_chart_display import ( 4 | stock_graph_page, 5 | ) 6 | 7 | 8 | def index() -> rx.Component: 9 | return rx.el.div( 10 | stock_graph_page(), 11 | class_name="min-h-screen bg-[#202123] flex items-center justify-center p-4 font-['Inter']", 12 | ) 13 | 14 | 15 | app = rx.App( 16 | theme=rx.theme(appearance="light"), 17 | head_components=[ 18 | rx.el.link( 19 | rel="preconnect", 20 | href="https://fonts.googleapis.com", 21 | ), 22 | rx.el.link( 23 | rel="preconnect", 24 | href="https://fonts.gstatic.com", 25 | crossorigin="", 26 | ), 27 | rx.el.link( 28 | href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap", 29 | rel="stylesheet", 30 | ), 31 | ], 32 | ) 33 | app.add_page(index) 34 | -------------------------------------------------------------------------------- /stock_market_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | __pycache__/ 3 | *.py[cod] 4 | *.db 5 | assets/external/ 6 | .web 7 | .DS_Store 8 | .idea/ 9 | -------------------------------------------------------------------------------- /stock_market_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_market_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /stock_market_dashboard/assets/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_market_dashboard/assets/styles.css -------------------------------------------------------------------------------- /stock_market_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_market_dashboard/preview.webp -------------------------------------------------------------------------------- /stock_market_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /stock_market_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="stock_market_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /stock_market_dashboard/stock_market_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_market_dashboard/stock_market_dashboard/__init__.py -------------------------------------------------------------------------------- /stock_market_dashboard/stock_market_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_market_dashboard/stock_market_dashboard/components/__init__.py -------------------------------------------------------------------------------- /stock_market_dashboard/stock_market_dashboard/components/tooltip_props.py: -------------------------------------------------------------------------------- 1 | TOOLTIP_PROPS = { 2 | "separator": ": ", 3 | "cursor": False, 4 | "is_animation_active": False, 5 | "label_style": { 6 | "fontWeight": "500", 7 | "color": "#cbd5e1", 8 | }, 9 | "item_style": { 10 | "color": "#e5e7eb", 11 | "display": "flex", 12 | "paddingBottom": "0px", 13 | "justifyContent": "space-between", 14 | "textTransform": "capitalize", 15 | }, 16 | "content_style": { 17 | "backgroundColor": "rgba(31, 41, 55, 0.8)", 18 | "borderColor": "#4b5563", 19 | "borderWidth": "1px", 20 | "borderRadius": "5px", 21 | "boxShadow": "0px 4px 6px rgba(0, 0, 0, 0.1)", 22 | "fontFamily": "inherit", 23 | "fontSize": "0.75rem", 24 | "lineHeight": "1rem", 25 | "fontWeight": "500", 26 | "minWidth": "8rem", 27 | "padding": "0.375rem 0.625rem", 28 | "position": "relative", 29 | }, 30 | } 31 | -------------------------------------------------------------------------------- /stock_market_dashboard/stock_market_dashboard/models/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_market_dashboard/stock_market_dashboard/models/__init__.py -------------------------------------------------------------------------------- /stock_market_dashboard/stock_market_dashboard/models/models.py: -------------------------------------------------------------------------------- 1 | from typing import Literal, TypedDict, Union 2 | 3 | 4 | class ChartDataPoint(TypedDict): 5 | time: str 6 | price: float 7 | 8 | 9 | class Option(TypedDict): 10 | type: Literal["Call", "Put"] 11 | mark: float 12 | percent_change_to: float 13 | delta: float 14 | oi: int 15 | volume: int 16 | iv: float 17 | low: float 18 | high: float 19 | bid: float 20 | ask: float 21 | strike: float 22 | gamma: float 23 | 24 | 25 | class Order(TypedDict): 26 | symbol: str 27 | status: Literal["Sending", "Working", "Filled", "Canceled"] 28 | side: Literal["Buy", "Sell"] 29 | type: Literal["Market", "Limit", "Stop market"] 30 | qty: int 31 | total_cost: float 32 | 33 | 34 | class Position(TypedDict): 35 | symbol: str 36 | qty: float 37 | mkt_val: float 38 | day_return: float 39 | day_percent: float 40 | total_ret: float 41 | mark: float 42 | avg_cost: float 43 | bid: float 44 | ask: float 45 | delta: float 46 | gamma: float 47 | theta: float 48 | iv: Union[float, None] 49 | type: Literal["Equities", "Options"] 50 | dte: Union[int, str] 51 | 52 | 53 | class StockInfo(TypedDict): 54 | symbol: str 55 | price: float 56 | change: float 57 | change_percent: float 58 | volume: str 59 | open: float 60 | high: float 61 | low: float 62 | close: float 63 | -------------------------------------------------------------------------------- /stock_market_dashboard/stock_market_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/stock_market_dashboard/stock_market_dashboard/states/__init__.py -------------------------------------------------------------------------------- /stock_market_dashboard/stock_market_dashboard/stock_market_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from stock_market_dashboard.components.line_chart import trading_line_chart 4 | from stock_market_dashboard.components.main_header import main_header 5 | from stock_market_dashboard.components.options_table import options_table 6 | from stock_market_dashboard.components.orders_table import orders_table 7 | from stock_market_dashboard.components.positions_table import positions_table 8 | from stock_market_dashboard.states.trading_state import TradingState 9 | 10 | 11 | def index() -> rx.Component: 12 | """The main page component for the trading dashboard.""" 13 | return rx.el.div( 14 | main_header(), 15 | rx.el.main( 16 | trading_line_chart(), 17 | options_table(), 18 | orders_table(), 19 | positions_table(), 20 | class_name="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4", 21 | ), 22 | class_name="min-h-screen bg-gray-900 text-gray-300 font-sans", 23 | on_mount=TradingState.start_simulation, 24 | ) 25 | 26 | 27 | app = rx.App( 28 | theme=rx.theme(appearance="light"), 29 | stylesheets=["/styles.css"], 30 | ) 31 | app.add_page(index, route="/") 32 | -------------------------------------------------------------------------------- /table_dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | assets/external/ 3 | *.db 4 | *.py[cod] 5 | .web 6 | __pycache__/ 7 | .DS_Store 8 | .idea/ 9 | -------------------------------------------------------------------------------- /table_dashboard/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/table_dashboard/assets/favicon.ico -------------------------------------------------------------------------------- /table_dashboard/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/table_dashboard/preview.webp -------------------------------------------------------------------------------- /table_dashboard/requirements.txt: -------------------------------------------------------------------------------- 1 | pandas 2 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /table_dashboard/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="table_dashboard", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /table_dashboard/table_dashboard/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/table_dashboard/table_dashboard/__init__.py -------------------------------------------------------------------------------- /table_dashboard/table_dashboard/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/table_dashboard/table_dashboard/components/__init__.py -------------------------------------------------------------------------------- /table_dashboard/table_dashboard/models/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/table_dashboard/table_dashboard/models/__init__.py -------------------------------------------------------------------------------- /table_dashboard/table_dashboard/models/entry.py: -------------------------------------------------------------------------------- 1 | from typing import ( 2 | Literal, 3 | TypedDict, 4 | ) 5 | 6 | 7 | class DetailEntry(TypedDict): 8 | id: int 9 | owner: str 10 | status: Literal["Live", "Inactive", "Archived"] 11 | region: str 12 | stability: int 13 | costs: float 14 | last_edited: str 15 | -------------------------------------------------------------------------------- /table_dashboard/table_dashboard/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/table_dashboard/table_dashboard/states/__init__.py -------------------------------------------------------------------------------- /table_dashboard/table_dashboard/table_dashboard.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from table_dashboard.components.details_table import details_table 4 | from table_dashboard.components.header import header 5 | from table_dashboard.components.sidebar import sidebar 6 | from table_dashboard.states.dashboard_state import DashboardState 7 | 8 | 9 | def index() -> rx.Component: 10 | """The main dashboard page.""" 11 | return rx.el.div( 12 | sidebar(), 13 | rx.el.main( 14 | rx.el.div( 15 | header(), 16 | details_table(), 17 | class_name="p-6 space-y-6", 18 | ), 19 | class_name="flex-1 overflow-y-auto", 20 | ), 21 | rx.el.div( 22 | class_name=rx.cond( 23 | DashboardState.show_status_filter 24 | | DashboardState.show_region_filter 25 | | DashboardState.show_costs_filter, 26 | "fixed inset-0 z-5", 27 | "hidden", 28 | ), 29 | on_click=DashboardState.close_filter_dropdowns, 30 | ), 31 | class_name="flex h-screen", 32 | ) 33 | 34 | 35 | app = rx.App(theme=rx.theme(appearance="light")) 36 | app.add_page(index) 37 | -------------------------------------------------------------------------------- /text_annotation_app/.gitignore: -------------------------------------------------------------------------------- 1 | .states 2 | *.db 3 | *.py[cod] 4 | .web 5 | __pycache__ 6 | __pycache__/ 7 | assets/external/ 8 | .DS_Store 9 | .idea/ 10 | -------------------------------------------------------------------------------- /text_annotation_app/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/text_annotation_app/assets/favicon.ico -------------------------------------------------------------------------------- /text_annotation_app/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/text_annotation_app/preview.png -------------------------------------------------------------------------------- /text_annotation_app/requirements.txt: -------------------------------------------------------------------------------- 1 | reflex>=0.7.13a1 -------------------------------------------------------------------------------- /text_annotation_app/rxconfig.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | config = rx.Config( 4 | app_name="text_annotation_app", 5 | plugins=[rx.plugins.TailwindV3Plugin()], 6 | ) 7 | -------------------------------------------------------------------------------- /text_annotation_app/text_annotation_app/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/text_annotation_app/text_annotation_app/__init__.py -------------------------------------------------------------------------------- /text_annotation_app/text_annotation_app/components/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/text_annotation_app/text_annotation_app/components/__init__.py -------------------------------------------------------------------------------- /text_annotation_app/text_annotation_app/states/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reflex-dev/templates/4a3d150e469d4d1816a59d90644399e7eadef875/text_annotation_app/text_annotation_app/states/__init__.py -------------------------------------------------------------------------------- /text_annotation_app/text_annotation_app/text_annotation_app.py: -------------------------------------------------------------------------------- 1 | import reflex as rx 2 | 3 | from text_annotation_app.components.ner_display import ner_component 4 | from text_annotation_app.states.ner_state import NerState 5 | 6 | 7 | def index() -> rx.Component: 8 | """The main page of the app.""" 9 | return rx.el.div( 10 | ner_component(), 11 | on_mount=NerState.process_text_on_load, 12 | class_name="min-h-screen bg-gray-50 p-4", 13 | ) 14 | 15 | 16 | app = rx.App(theme=rx.theme(appearance="light")) 17 | app.add_page(index, route="/") 18 | --------------------------------------------------------------------------------