How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat

import sys
import subprocess
subprocess.run([sys.executable, “-m”, “pip”, “install”, “-q”, “nicegui”], check=True)

import threading, time, random, asyncio, base64, socket
from datetime import datetime
from nicegui import ui, events

class State:
def __init__(self):
self.todos = [
{“id”: 1, “task”: “Explore NiceGUI”, “done”: True, “priority”: “High”},
{“id”: 2, “task”: “Build a dashboard”, “done”: False, “priority”: “Medium”},
{“id”: 3, “task”: “Deploy to production”, “done”: False, “priority”: “Low”},
]
self.next_id = 4
self.metrics = {“users”: 1247, “revenue”: 8420, “orders”: 53}
self.series = [random.uniform(20, 80) for _ in range(20)]
self.messages = [{“role”: “assistant”,
“text”: “Hi! Type something and I will echo it back.”}]

state = State()

def page_shell(active: str) -> None:
dark = ui.dark_mode()
drawer = ui.left_drawer(value=True).classes(“bg-grey-2”)
with drawer:
ui.label(“Navigation”).classes(“text-lg font-bold p-2”)
for label, path, icon in [
(“Dashboard”, “/”, “dashboard”),
(“Todos”, “/todos”, “check_circle”),
(“Form”, “/form”, “edit_note”),
(“Upload”, “/upload”, “upload_file”),
(“Chat”, “/chat”, “chat”),
]:
cls = “w-full” + (” bg-primary text-white” if label == active else “”)
ui.button(label,
on_click=lambda p=path: ui.navigate.to(p),
icon=icon).classes(cls).props(“flat align=left no-caps”)

with ui.header(elevated=True).classes(“items-center justify-between bg-primary”):
with ui.row().classes(“items-center”):
ui.button(on_click=drawer.toggle, icon=”menu”).props(“flat color=white”)
ui.label(“🚀 NiceGUI Tutorial”).classes(“text-xl font-semibold text-white”)
ui.button(icon=”dark_mode”, on_click=dark.toggle).props(“flat color=white”)

with ui.footer().classes(“bg-grey-3 text-black justify-center”):
ui.label(“Built with NiceGUI · Tutorial Demo”)