How to Create a Multi-Page NiceGUI App with Async Chat, CRUD Operation, Real-Time Dashboard and File Upload.

Import Sys
Import subprocess
subprocess.run([sys.executable, "-m", "pip", "install", "-q", "nicegui"], check=True)


Asyncio import, threading time, socket, base64
Import datetime from datetime
Events imported from Nicegui




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()




def page_shell(active: str) -> None:
   dark = ui.dark_mode()
   drawer = ui.left_drawer(value=True).classes("bg-grey-2")
 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")


 To the right of the footer, click on the ui.footer().classes("bg-grey-3 text-black justify-center"):
       ui.label("Built with NiceGUI · Tutorial Demo")