From 7669576a354db7de20253b298294df956ec2f0b0 Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Mon, 27 Jul 2026 09:45:59 +0200
Subject: [PATCH 01/10] [ADD] awesome_owl: chapter 1 - OWL components

---
 awesome_owl/controllers/__init__.py           |  2 +-
 awesome_owl/controllers/controllers.py        |  2 +-
 awesome_owl/static/src/card/card.js           | 22 ++++++++++
 awesome_owl/static/src/card/card.xml          | 26 ++++++++++++
 awesome_owl/static/src/counter/counter.js     | 19 +++++++++
 awesome_owl/static/src/counter/counter.xml    | 11 +++++
 awesome_owl/static/src/playground.js          | 19 ++++++++-
 awesome_owl/static/src/playground.xml         | 28 +++++++++++--
 awesome_owl/static/src/todo_list/todo_item.js | 25 ++++++++++++
 .../static/src/todo_list/todo_item.xml        | 13 ++++++
 awesome_owl/static/src/todo_list/todo_list.js | 40 +++++++++++++++++++
 .../static/src/todo_list/todo_list.xml        | 12 ++++++
 awesome_owl/static/src/utils.js               |  9 +++++
 awesome_owl/views/templates.xml               |  1 +
 14 files changed, 221 insertions(+), 8 deletions(-)
 create mode 100644 awesome_owl/static/src/card/card.js
 create mode 100644 awesome_owl/static/src/card/card.xml
 create mode 100644 awesome_owl/static/src/counter/counter.js
 create mode 100644 awesome_owl/static/src/counter/counter.xml
 create mode 100644 awesome_owl/static/src/todo_list/todo_item.js
 create mode 100644 awesome_owl/static/src/todo_list/todo_item.xml
 create mode 100644 awesome_owl/static/src/todo_list/todo_list.js
 create mode 100644 awesome_owl/static/src/todo_list/todo_list.xml
 create mode 100644 awesome_owl/static/src/utils.js

diff --git a/awesome_owl/controllers/__init__.py b/awesome_owl/controllers/__init__.py
index 457bae27e11..b0f26a9a602 100644
--- a/awesome_owl/controllers/__init__.py
+++ b/awesome_owl/controllers/__init__.py
@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-from . import controllers
\ No newline at end of file
+from . import controllers
diff --git a/awesome_owl/controllers/controllers.py b/awesome_owl/controllers/controllers.py
index bccfd6fe283..92dfad42a20 100644
--- a/awesome_owl/controllers/controllers.py
+++ b/awesome_owl/controllers/controllers.py
@@ -3,7 +3,7 @@
 
 class OwlPlayground(http.Controller):
     @http.route(['/awesome_owl'], type='http', auth='public')
-    def show_playground(self):
+    def show_playground(self, **kwargs):
         """
         Renders the owl playground page
         """
diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..c2a3828ddc5
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,22 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.Card";
+    static props = {
+        title: String,
+        slots: {
+            type: Object,
+            shape: {
+                default: Object,
+            },
+        },
+    };
+
+    setup() {
+        this.state = useState({ isOpen: true });
+    }
+
+    toggle() {
+        this.state.isOpen = !this.state.isOpen;
+    }
+}
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..9488b8bacc3
--- /dev/null
+++ b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.Card">
+        <div class="card">
+            <div class="card-body">
+
+                <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
+                    <button class="btn btn-sm btn-light invisible" aria-hidden="true">
+                        <i class="fa fa-chevron-up"/>
+                    </button>
+
+                    <h5 class="card-title mb-0 text-center flex-grow-1"><t t-esc="props.title"/></h5>
+
+                    <button class="btn btn-sm btn-light" t-on-click="toggle">
+                        <i t-att-class="state.isOpen ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"/>
+                    </button>
+                </div>
+
+                <div class="card-text" t-if="state.isOpen">
+                    <t t-slot="default"/>
+                </div>
+
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 00000000000..b351d71572e
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,19 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.Counter";
+    static props = {
+        onChange: { type: Function, optional: true },
+    };
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
+    }
+}
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 00000000000..0b997366ffd
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.Counter">
+        <div class="p-2 border rounded d-flex align-items-center gap-2">
+            <span>Counter: <t t-esc="state.value"/></span>
+            <button class="btn btn-primary bg-primary text-white" t-on-click="increment">
+                Increment
+            </button>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 4ac769b0aa5..792892ed57e 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,5 +1,20 @@
-import { Component } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
+import { TodoList } from "./todo_list/todo_list";
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
+    static template = "awesome_owl.Playground";
+    static components = { Counter, Card, TodoList };
+
+    setup() {
+        this.state = useState({ sum: 0 });
+
+        this.rawContent = "<div class='text-primary'>some content</div>";
+        this.htmlContent = markup(this.rawContent);
+    }
+
+    incrementSum() {
+        this.state.sum++;
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..3dd285538ff 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -1,10 +1,30 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
+    <t t-name="awesome_owl.Playground">
+        <div class="o_playground d-flex flex-column align-items-center justify-content-center vh-100 gap-3">
 
-    <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+            <Card title="'Counters'">
+                <div class="d-flex align-items-center gap-3 mb-3">
+                    <Counter onChange.bind="incrementSum"/>
+                    <Counter onChange.bind="incrementSum"/>
+                </div>
+                <div class="justify-content-center d-flex">
+                    The sum is: <t t-esc="state.sum"/>
+                </div>
+            </Card>
+
+            <div class="d-flex justify-content-center flex-wrap gap-2">
+                <Card title="'HTML Content'">
+                    <t t-out="htmlContent"/>
+                </Card>
+                <Card title="'Raw Content'">
+                    <t t-out="rawContent"/>
+                </Card>
+            </div>
+
+            <Card title="'Todo List'">
+                <TodoList/>
+            </Card>
         </div>
     </t>
-
 </templates>
diff --git a/awesome_owl/static/src/todo_list/todo_item.js b/awesome_owl/static/src/todo_list/todo_item.js
new file mode 100644
index 00000000000..37fa70d5920
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_item.js
@@ -0,0 +1,25 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.TodoItem";
+    static props = {
+        todo: {
+            type: Object,
+            shape: {
+                id: Number,
+                description: String,
+                isCompleted: Boolean,
+            },
+        },
+        toggleTodo: Function,
+        removeTodo: Function,
+    };
+
+    onToggle() {
+        this.props.toggleTodo(this.props.todo.id);
+    }
+
+    onRemove() {
+        this.props.removeTodo(this.props.todo.id);
+    }
+}
diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
new file mode 100644
index 00000000000..01c1f455a6d
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoItem">
+        <div class="p-2 border-bottom d-flex align-items-center gap-2"
+             t-att-class="{ 'text-muted text-decoration-line-through': props.todo.isCompleted }">
+
+             <input type="checkbox" class="form-check-input mt-0" t-att-checked="props.todo.isCompleted" t-on-change="onToggle"/>
+            <span><t t-esc="props.todo.id"/>.</span>
+            <span><t t-esc="props.todo.description"/></span>
+            <span class="fa fa-remove text-danger ms-auto" style="cursor: pointer;" t-on-click="onRemove"/>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
new file mode 100644
index 00000000000..0eef3b20168
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -0,0 +1,40 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todo_item";
+import { useAutofocus } from "../utils";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.TodoList";
+    static components = { TodoItem };
+    static props = {};
+
+    setup() {
+        this.todos = useState([]);
+        this.id = 1;
+
+        useAutofocus("input");
+    }
+
+    addTodo(event) {
+        if (event.keyCode === 13) {
+            const description = event.target.value.trim();
+            if (description) {
+                this.todos.push({
+                    id: this.id++,
+                    description: description,
+                    isCompleted: false,
+                });
+                event.target.value = "";
+            }
+        }
+    }
+
+    toggleTodo(id) {
+        const todo = this.todos.find((todo) => todo.id === id);
+        if (todo) todo.isCompleted = !todo.isCompleted;
+    }
+
+    removeTodo(id) {
+        const index = this.todos.findIndex((todo) => todo.id === id);
+        if (index >= 0) this.todos.splice(index, 1);
+    }
+}
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
new file mode 100644
index 00000000000..eb1de3d2cb2
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoList">
+        <div class="card p-3 bg-white border rounded">
+            <input t-ref="input" type="text" class="form-control mb-1" placeholder="Add a todo" t-on-keyup="addTodo"/>
+
+            <t t-foreach="todos" t-as="todo" t-key="todo.id">
+                <TodoItem todo="todo" toggleTodo.bind="toggleTodo" removeTodo.bind="removeTodo"/>
+            </t>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 00000000000..34b64cce84f
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,9 @@
+import { useRef, onMounted } from "@odoo/owl";
+
+export function useAutofocus(nameOfElementRef) {
+    const targetElementRef = useRef(nameOfElementRef);
+    onMounted(() => {
+        const htmlElement = targetElementRef.el;
+        if (htmlElement) htmlElement.focus();
+    });
+}
diff --git a/awesome_owl/views/templates.xml b/awesome_owl/views/templates.xml
index aa54c1a7241..6a673c233c3 100644
--- a/awesome_owl/views/templates.xml
+++ b/awesome_owl/views/templates.xml
@@ -4,6 +4,7 @@
             <html>
                 <head>
                     <link type="image/x-icon" rel="shortcut icon" href="/web/static/img/favicon.ico"/>
+                    <t t-call-assets="web.assets_backend" t-css="true" t-js="false"/>
                     <t t-call-assets="awesome_owl.assets_playground"/>
                 </head>
 

From 045883fa99b20b8f0b83187ba035a0397862a43e Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Tue, 28 Jul 2026 16:28:26 +0200
Subject: [PATCH 02/10] [ADD] awesome_dashboard: chapter 2 - build a dashboard

---
 awesome_dashboard/__manifest__.py             |  2 +-
 awesome_dashboard/static/src/dashboard.js     | 39 ++++++++++++++++++-
 awesome_dashboard/static/src/dashboard.scss   |  3 ++
 awesome_dashboard/static/src/dashboard.xml    | 22 +++++++++--
 .../src/dashboard_item/dashboard_item.js      | 15 +++++++
 .../src/dashboard_item/dashboard_item.xml     | 10 +++++
 awesome_owl/static/src/playground.js          |  1 +
 awesome_owl/static/src/playground.xml         |  2 +-
 .../static/src/todo_list/todo_item.xml        |  4 +-
 9 files changed, 88 insertions(+), 10 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard.scss
 create mode 100644 awesome_dashboard/static/src/dashboard_item/dashboard_item.js
 create mode 100644 awesome_dashboard/static/src/dashboard_item/dashboard_item.xml

diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index a1cd72893d7..363bf63fcb5 100644
--- a/awesome_dashboard/__manifest__.py
+++ b/awesome_dashboard/__manifest__.py
@@ -10,7 +10,7 @@
         Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
     """,
 
-    'author': "Odoo",
+    'author': "Odoo S.A.",
     'website': "https://www.odoo.com/",
     'category': 'Tutorials',
     'version': '0.1',
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index c4fb245621b..199f29d4622 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,8 +1,43 @@
-import { Component } from "@odoo/owl";
+import { Component, useSubEnv } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { DashboardItem } from "./dashboard_item/dashboard_item";
 
-class AwesomeDashboard extends Component {
+export class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, DashboardItem };
+    static props = { "*": true };
+
+    setup() {
+        useSubEnv({
+            config: {
+                ...this.env.config,
+                breadcrumbs: [{ name: "Dashboard" }],
+            },
+        });
+
+        this.action = useService("action");
+        this.display = {
+            controlPanel: {},
+        };
+    }
+
+    openCustomers() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    openLeads() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: "All leads",
+            res_model: "crm.lead",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        });
+    }
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.scss b/awesome_dashboard/static/src/dashboard.scss
new file mode 100644
index 00000000000..778961a748e
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: $gray-200;
+}
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 1a2ac9a2fed..72ae881d2f0 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -1,8 +1,22 @@
-<?xml version="1.0" encoding="UTF-8" ?>
+<?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
-    </t>
+        <Layout className="'o_dashboard h-100'" display="display">
+            <t t-set-slot="layout-buttons">
+                <button class="btn btn-primary me-1" t-on-click="openCustomers">Customers</button>
+                <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
+            </t>
 
+            <div class="p-3 d-flex flex-wrap">
+                <DashboardItem>
+                    <h5 class="card-title">Card 1</h5>
+                    <p class="card-text">First item content.</p>
+                </DashboardItem>
+                <DashboardItem size="2">
+                    <h5 class="card-title">Card 2</h5>
+                    <p class="card-text">Second item content.</p>
+                </DashboardItem>
+            </div>
+        </Layout>
+    </t>
 </templates>
diff --git a/awesome_dashboard/static/src/dashboard_item/dashboard_item.js b/awesome_dashboard/static/src/dashboard_item/dashboard_item.js
new file mode 100644
index 00000000000..360e803d5d6
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.js
@@ -0,0 +1,15 @@
+import { Component } from '@odoo/owl';
+
+export class DashboardItem extends Component {
+    static template = 'awesome_dashboard.DashboardItem';
+    static props = {
+        slots: Object,
+        size: {
+            type: Number,
+            optional: true
+        },
+    };
+    static defaultProps = {
+        size: 1,
+    };
+}
diff --git a/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
new file mode 100644
index 00000000000..cad9fcf46e1
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardItem">
+        <div class="card shadow-sm m-2" t-attf-style="width: {{ props.size * 18 }}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 792892ed57e..dfa15eba9f9 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -6,6 +6,7 @@ import { TodoList } from "./todo_list/todo_list";
 export class Playground extends Component {
     static template = "awesome_owl.Playground";
     static components = { Counter, Card, TodoList };
+    static props = {};
 
     setup() {
         this.state = useState({ sum: 0 });
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 3dd285538ff..32fcd1223f2 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -9,7 +9,7 @@
                     <Counter onChange.bind="incrementSum"/>
                 </div>
                 <div class="justify-content-center d-flex">
-                    The sum is: <t t-esc="state.sum"/>
+                    The sum is: <t t-out="state.sum"/>
                 </div>
             </Card>
 
diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
index 01c1f455a6d..c38e1d83e00 100644
--- a/awesome_owl/static/src/todo_list/todo_item.xml
+++ b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -5,8 +5,8 @@
              t-att-class="{ 'text-muted text-decoration-line-through': props.todo.isCompleted }">
 
              <input type="checkbox" class="form-check-input mt-0" t-att-checked="props.todo.isCompleted" t-on-change="onToggle"/>
-            <span><t t-esc="props.todo.id"/>.</span>
-            <span><t t-esc="props.todo.description"/></span>
+            <span><t t-out="props.todo.id"/>.</span>
+            <span><t t-out="props.todo.description"/></span>
             <span class="fa fa-remove text-danger ms-auto" style="cursor: pointer;" t-on-click="onRemove"/>
         </div>
     </t>

From 61e0cfeb0884e0e006a1a927701af217bfe8db68 Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Tue, 28 Jul 2026 17:00:47 +0200
Subject: [PATCH 03/10] [IMP] awesome_dashboard: chapter 2 - add some
 statistics

---
 awesome_dashboard/static/src/dashboard.js     | 12 ++++++---
 awesome_dashboard/static/src/dashboard.xml    | 26 +++++++++++++++----
 .../src/dashboard_item/dashboard_item.xml     |  4 +--
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 199f29d4622..98361068550 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,7 +1,8 @@
-import { Component, useSubEnv } from "@odoo/owl";
+import { Component, useSubEnv, onWillStart, useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
+import { rpc } from "@web/core/network/rpc";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
 
 export class AwesomeDashboard extends Component {
@@ -18,9 +19,12 @@ export class AwesomeDashboard extends Component {
         });
 
         this.action = useService("action");
-        this.display = {
-            controlPanel: {},
-        };
+        this.display = { controlPanel: {} };
+
+        this.stats = useState({ data: {} });
+        onWillStart(async () => {
+            this.stats.data = await rpc("/awesome_dashboard/statistics");
+        });
     }
 
     openCustomers() {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 72ae881d2f0..670ac146280 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -7,14 +7,30 @@
                 <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
 
-            <div class="p-3 d-flex flex-wrap">
+            <div class="p-3 d-flex flex-wrap gap-3">
                 <DashboardItem>
-                    <h5 class="card-title">Card 1</h5>
-                    <p class="card-text">First item content.</p>
+                    <div class="h6 text-muted">Average amount of t-shirt by order this month</div>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_quantity"/>
                 </DashboardItem>
+
                 <DashboardItem size="2">
-                    <h5 class="card-title">Card 2</h5>
-                    <p class="card-text">Second item content.</p>
+                    <div class="h6 text-muted">Average time for an order to go from 'new' to 'sent' or 'cancelled'</div>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_time"/>
+                </DashboardItem>
+
+                <DashboardItem>
+                    <div class="h6 text-muted">Number of new orders this month</div>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_new_orders"/>
+                </DashboardItem>
+
+                <DashboardItem>
+                    <div class="h6 text-muted">Number of cancelled orders this month</div>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_cancelled_orders"/>
+                </DashboardItem>
+
+                <DashboardItem>
+                    <div class="h6 text-muted">Total amount of new orders this month</div>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.total_amount"/>
                 </DashboardItem>
             </div>
         </Layout>
diff --git a/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
index cad9fcf46e1..3b367985b4e 100644
--- a/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_dashboard.DashboardItem">
-        <div class="card shadow-sm m-2" t-attf-style="width: {{ props.size * 18 }}rem;">
-            <div class="card-body">
+        <div class="card shadow-sm m-2" t-attf-style="min-width: {{ (props.size || 1) * 18 }}rem; width: max-content;">
+            <div class="card-body text-center d-flex flex-column justify-content-center">
                 <t t-slot="default"/>
             </div>
         </div>

From 465ce1a9a75e409c20b790f7f5fbf1166b196f78 Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Tue, 28 Jul 2026 17:07:09 +0200
Subject: [PATCH 04/10] [IMP] awesome_dashboard: chapter 2 - add a stats
 service

---
 awesome_dashboard/static/src/dashboard.js          |  3 ++-
 awesome_dashboard/static/src/dashboard.xml         | 10 +++++-----
 awesome_dashboard/static/src/statistics_service.js | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 awesome_dashboard/static/src/statistics_service.js

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 98361068550..89f58a3064f 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -20,10 +20,11 @@ export class AwesomeDashboard extends Component {
 
         this.action = useService("action");
         this.display = { controlPanel: {} };
+        const statisticService = useService("awesome_dashboard.statistics");
 
         this.stats = useState({ data: {} });
         onWillStart(async () => {
-            this.stats.data = await rpc("/awesome_dashboard/statistics");
+            this.stats = await statisticService.loadStatistics();
         });
     }
 
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 670ac146280..00be626e058 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -10,27 +10,27 @@
             <div class="p-3 d-flex flex-wrap gap-3">
                 <DashboardItem>
                     <div class="h6 text-muted">Average amount of t-shirt by order this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_quantity"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.average_quantity"/>
                 </DashboardItem>
 
                 <DashboardItem size="2">
                     <div class="h6 text-muted">Average time for an order to go from 'new' to 'sent' or 'cancelled'</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_time"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.average_time"/>
                 </DashboardItem>
 
                 <DashboardItem>
                     <div class="h6 text-muted">Number of new orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_new_orders"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.nb_new_orders"/>
                 </DashboardItem>
 
                 <DashboardItem>
                     <div class="h6 text-muted">Number of cancelled orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_cancelled_orders"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.nb_cancelled_orders"/>
                 </DashboardItem>
 
                 <DashboardItem>
                     <div class="h6 text-muted">Total amount of new orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.total_amount"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.total_amount"/>
                 </DashboardItem>
             </div>
         </Layout>
diff --git a/awesome_dashboard/static/src/statistics_service.js b/awesome_dashboard/static/src/statistics_service.js
new file mode 100644
index 00000000000..a42620bb11a
--- /dev/null
+++ b/awesome_dashboard/static/src/statistics_service.js
@@ -0,0 +1,14 @@
+import { registry } from "@web/core/registry";
+import { memoize } from "@web/core/utils/functions";
+import { rpc } from "@web/core/network/rpc";
+
+const statisticsService = {
+    start() {
+        const loadStatistics = memoize(() => rpc("/awesome_dashboard/statistics"));
+        return {
+            loadStatistics,
+        };
+    },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);

From c1bc176acd1111d0f86976ef40fb9c50319dd02e Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Wed, 29 Jul 2026 09:44:55 +0200
Subject: [PATCH 05/10] [IMP] awesome_dashboard: chapter 2 - add a pie chart

---
 awesome_dashboard/static/src/dashboard.js     |  8 ++--
 awesome_dashboard/static/src/dashboard.xml    | 14 +++---
 .../static/src/pie_chart/pie_char.xml         |  9 ++++
 .../static/src/pie_chart/pie_chart.js         | 44 +++++++++++++++++++
 4 files changed, 67 insertions(+), 8 deletions(-)
 create mode 100644 awesome_dashboard/static/src/pie_chart/pie_char.xml
 create mode 100644 awesome_dashboard/static/src/pie_chart/pie_chart.js

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 89f58a3064f..c99a2722d3d 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -4,10 +4,11 @@ import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { rpc } from "@web/core/network/rpc";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
+import { PieChart } from "./pie_chart/pie_chart";
 
 export class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, DashboardItem };
+    static components = { Layout, DashboardItem, PieChart };
     static props = { "*": true };
 
     setup() {
@@ -20,11 +21,12 @@ export class AwesomeDashboard extends Component {
 
         this.action = useService("action");
         this.display = { controlPanel: {} };
-        const statisticService = useService("awesome_dashboard.statistics");
+        this.statisticsService = useService("awesome_dashboard.statistics");
 
         this.stats = useState({ data: {} });
         onWillStart(async () => {
-            this.stats = await statisticService.loadStatistics();
+            const result = await this.statisticsService.loadStatistics();
+            this.stats.data = result || {};
         });
     }
 
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 00be626e058..e51e7eeb7d2 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -10,27 +10,31 @@
             <div class="p-3 d-flex flex-wrap gap-3">
                 <DashboardItem>
                     <div class="h6 text-muted">Average amount of t-shirt by order this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.average_quantity"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_quantity"/>
                 </DashboardItem>
 
                 <DashboardItem size="2">
                     <div class="h6 text-muted">Average time for an order to go from 'new' to 'sent' or 'cancelled'</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.average_time"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_time"/>
                 </DashboardItem>
 
                 <DashboardItem>
                     <div class="h6 text-muted">Number of new orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.nb_new_orders"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_new_orders"/>
                 </DashboardItem>
 
                 <DashboardItem>
                     <div class="h6 text-muted">Number of cancelled orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.nb_cancelled_orders"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_cancelled_orders"/>
                 </DashboardItem>
 
                 <DashboardItem>
                     <div class="h6 text-muted">Total amount of new orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.total_amount"/>
+                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.total_amount"/>
+                </DashboardItem>
+
+                <DashboardItem size="2" t-if="stats.data and stats.data.orders_by_size">
+                    <PieChart data="stats.data.orders_by_size"/>
                 </DashboardItem>
             </div>
         </Layout>
diff --git a/awesome_dashboard/static/src/pie_chart/pie_char.xml b/awesome_dashboard/static/src/pie_chart/pie_char.xml
new file mode 100644
index 00000000000..8477cace7e0
--- /dev/null
+++ b/awesome_dashboard/static/src/pie_chart/pie_char.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.PieChart">
+        <div class="d-flex flex-column align-items-center justify-content-center h-100">
+            <div class="h6 text-muted mb-3">T-Shirt Orders by Size</div>
+            <canvas t-ref="canvas"/>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_dashboard/static/src/pie_chart/pie_chart.js b/awesome_dashboard/static/src/pie_chart/pie_chart.js
new file mode 100644
index 00000000000..de1a2840995
--- /dev/null
+++ b/awesome_dashboard/static/src/pie_chart/pie_chart.js
@@ -0,0 +1,44 @@
+import { Component, onWillStart, onMounted, onWillUnmount, useRef } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.PieChart";
+    static props = {
+        data: Object,
+    };
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+
+        onWillStart(async () => {
+            await loadJS("/web/static/lib/Chart/Chart.js");
+        });
+
+        onMounted(() => {
+            this.renderChart();
+        });
+
+        onWillUnmount(() => {
+            if (this.chart) {
+                this.chart.destroy();
+            }
+        });
+    }
+
+    renderChart() {
+        const labels = Object.keys(this.props.data);
+        const data = Object.values(this.props.data);
+
+        this.chart = new Chart(this.canvasRef.el, {
+            type: "pie",
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        data: data,
+                    },
+                ],
+            },
+        });
+    }
+}

From 5c9d3b0606df382000bf8541e4fc3c6f9406b25c Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Wed, 29 Jul 2026 11:50:20 +0200
Subject: [PATCH 06/10] [IMP] awesome_dashboard: chapter 2 - add real life
 update on the pie chart

---
 awesome_dashboard/static/src/dashboard.js     | 20 ++------
 awesome_dashboard/static/src/dashboard.xml    | 51 ++++++++++---------
 .../static/src/pie_chart/pie_chart.js         | 20 ++++----
 .../static/src/statistics_service.js          | 17 +++++--
 4 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index c99a2722d3d..83179ae14d0 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,8 +1,7 @@
-import { Component, useSubEnv, onWillStart, useState } from "@odoo/owl";
+import { Component, useSubEnv, useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
-import { rpc } from "@web/core/network/rpc";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
 import { PieChart } from "./pie_chart/pie_chart";
 
@@ -12,22 +11,9 @@ export class AwesomeDashboard extends Component {
     static props = { "*": true };
 
     setup() {
-        useSubEnv({
-            config: {
-                ...this.env.config,
-                breadcrumbs: [{ name: "Dashboard" }],
-            },
-        });
-
-        this.action = useService("action");
         this.display = { controlPanel: {} };
-        this.statisticsService = useService("awesome_dashboard.statistics");
-
-        this.stats = useState({ data: {} });
-        onWillStart(async () => {
-            const result = await this.statisticsService.loadStatistics();
-            this.stats.data = result || {};
-        });
+        this.action = useService("action");
+        this.stats = useState(useService("awesome_dashboard.statistics"));
     }
 
     openCustomers() {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index e51e7eeb7d2..b9cbc7191d3 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -1,40 +1,45 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        <Layout className="'o_dashboard h-100'" display="display">
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
             <t t-set-slot="layout-buttons">
-                <button class="btn btn-primary me-1" t-on-click="openCustomers">Customers</button>
+                <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
                 <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
-
-            <div class="p-3 d-flex flex-wrap gap-3">
+            <div class="d-flex flex-wrap" t-if="stats.isReady">
                 <DashboardItem>
-                    <div class="h6 text-muted">Average amount of t-shirt by order this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_quantity"/>
+                    Average amount of t-shirt by order this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="stats.average_quantity"/>
+                    </div>
                 </DashboardItem>
-
-                <DashboardItem size="2">
-                    <div class="h6 text-muted">Average time for an order to go from 'new' to 'sent' or 'cancelled'</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.average_time"/>
+                <DashboardItem>
+                    Average time for an order to go from 'new' to 'sent' or 'cancelled'
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="stats.average_time"/>
+                    </div>
                 </DashboardItem>
-
                 <DashboardItem>
-                    <div class="h6 text-muted">Number of new orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_new_orders"/>
+                    Number of new orders this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="stats.nb_new_orders"/>
+                    </div>
                 </DashboardItem>
-
                 <DashboardItem>
-                    <div class="h6 text-muted">Number of cancelled orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.nb_cancelled_orders"/>
+                    Number of cancelled orders this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="stats.nb_cancelled_orders"/>
+                    </div>
                 </DashboardItem>
-
                 <DashboardItem>
-                    <div class="h6 text-muted">Total amount of new orders this month</div>
-                    <div class="fs-1 fw-bold text-success text-center" t-esc="stats.data.total_amount"/>
+                    Total amount of new orders this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="stats.total_amount"/>
+                    </div>
                 </DashboardItem>
-
-                <DashboardItem size="2" t-if="stats.data and stats.data.orders_by_size">
-                    <PieChart data="stats.data.orders_by_size"/>
+                <DashboardItem size="2">
+                    Shirt orders by size
+                    <PieChart data="stats['orders_by_size']" label="'Shirt orders by size'"/>
                 </DashboardItem>
             </div>
         </Layout>
diff --git a/awesome_dashboard/static/src/pie_chart/pie_chart.js b/awesome_dashboard/static/src/pie_chart/pie_chart.js
index de1a2840995..2e03ea8d522 100644
--- a/awesome_dashboard/static/src/pie_chart/pie_chart.js
+++ b/awesome_dashboard/static/src/pie_chart/pie_chart.js
@@ -1,40 +1,38 @@
-import { Component, onWillStart, onMounted, onWillUnmount, useRef } from "@odoo/owl";
 import { loadJS } from "@web/core/assets";
+import { Component, onWillStart, useRef, onMounted, onWillUnmount, onPatched } from "@odoo/owl";
 
 export class PieChart extends Component {
     static template = "awesome_dashboard.PieChart";
     static props = {
+        label: String,
         data: Object,
     };
 
     setup() {
         this.canvasRef = useRef("canvas");
-
-        onWillStart(async () => {
-            await loadJS("/web/static/lib/Chart/Chart.js");
-        });
-
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
         onMounted(() => {
             this.renderChart();
         });
-
+        onPatched(() => {
+            this.chart.destroy();
+            this.renderChart();
+        });
         onWillUnmount(() => {
-            if (this.chart) {
-                this.chart.destroy();
-            }
+            this.chart.destroy();
         });
     }
 
     renderChart() {
         const labels = Object.keys(this.props.data);
         const data = Object.values(this.props.data);
-
         this.chart = new Chart(this.canvasRef.el, {
             type: "pie",
             data: {
                 labels: labels,
                 datasets: [
                     {
+                        label: this.props.label,
                         data: data,
                     },
                 ],
diff --git a/awesome_dashboard/static/src/statistics_service.js b/awesome_dashboard/static/src/statistics_service.js
index a42620bb11a..e34882ca091 100644
--- a/awesome_dashboard/static/src/statistics_service.js
+++ b/awesome_dashboard/static/src/statistics_service.js
@@ -1,13 +1,20 @@
 import { registry } from "@web/core/registry";
-import { memoize } from "@web/core/utils/functions";
+import { reactive } from "@odoo/owl";
 import { rpc } from "@web/core/network/rpc";
 
 const statisticsService = {
     start() {
-        const loadStatistics = memoize(() => rpc("/awesome_dashboard/statistics"));
-        return {
-            loadStatistics,
-        };
+        const statistics = reactive({ isReady: false });
+
+        async function loadData() {
+            const updates = await rpc("/awesome_dashboard/statistics");
+            Object.assign(statistics, updates, { isReady: true });
+        }
+
+        setInterval(loadData, 5 * 1000);
+        loadData();
+
+        return statistics;
     },
 };
 

From 85de8fa44cce71376be2d1a3492a326f52eddd54 Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Wed, 29 Jul 2026 15:09:02 +0200
Subject: [PATCH 07/10] [IMP] awesome_dashboard: chapter 2 - add a lazy load

---
 awesome_dashboard/__manifest__.py                    |  3 +++
 .../static/src/{ => dashboard}/dashboard.js          |  9 ++++++++-
 .../static/src/{ => dashboard}/dashboard.xml         |  0
 .../{ => dashboard}/dashboard_item/dashboard_item.js |  0
 .../dashboard_item/dashboard_item.xml                |  0
 .../src/{ => dashboard}/pie_chart/pie_char.xml       |  0
 .../src/{ => dashboard}/pie_chart/pie_chart.js       |  0
 .../static/src/{ => dashboard}/statistics_service.js |  0
 awesome_dashboard/static/src/dashboard_action.js     | 12 ++++++++++++
 9 files changed, 23 insertions(+), 1 deletion(-)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.js (81%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard_item/dashboard_item.js (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard_item/dashboard_item.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/pie_chart/pie_char.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/pie_chart/pie_chart.js (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/statistics_service.js (100%)
 create mode 100644 awesome_dashboard/static/src/dashboard_action.js

diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index 363bf63fcb5..09086732f0f 100644
--- a/awesome_dashboard/__manifest__.py
+++ b/awesome_dashboard/__manifest__.py
@@ -25,6 +25,9 @@
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
         ],
+        'awesome_dashboard.dashboard': [
+            'awesome_dashboard/static/src/dashboard/**/*',
+        ],
     },
     'license': 'AGPL-3'
 }
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
similarity index 81%
rename from awesome_dashboard/static/src/dashboard.js
rename to awesome_dashboard/static/src/dashboard/dashboard.js
index 83179ae14d0..dc88e30e5ed 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -11,6 +11,13 @@ export class AwesomeDashboard extends Component {
     static props = { "*": true };
 
     setup() {
+        useSubEnv({
+            config: {
+                ...this.env.config,
+                breadcrumbs: [{ name: "Dashboard" }],
+            },
+        });
+
         this.display = { controlPanel: {} };
         this.action = useService("action");
         this.stats = useState(useService("awesome_dashboard.statistics"));
@@ -33,4 +40,4 @@ export class AwesomeDashboard extends Component {
     }
 }
 
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard.xml
rename to awesome_dashboard/static/src/dashboard/dashboard.xml
diff --git a/awesome_dashboard/static/src/dashboard_item/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.js
similarity index 100%
rename from awesome_dashboard/static/src/dashboard_item/dashboard_item.js
rename to awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.js
diff --git a/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml b/awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
rename to awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.xml
diff --git a/awesome_dashboard/static/src/pie_chart/pie_char.xml b/awesome_dashboard/static/src/dashboard/pie_chart/pie_char.xml
similarity index 100%
rename from awesome_dashboard/static/src/pie_chart/pie_char.xml
rename to awesome_dashboard/static/src/dashboard/pie_chart/pie_char.xml
diff --git a/awesome_dashboard/static/src/pie_chart/pie_chart.js b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
similarity index 100%
rename from awesome_dashboard/static/src/pie_chart/pie_chart.js
rename to awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
diff --git a/awesome_dashboard/static/src/statistics_service.js b/awesome_dashboard/static/src/dashboard/statistics_service.js
similarity index 100%
rename from awesome_dashboard/static/src/statistics_service.js
rename to awesome_dashboard/static/src/dashboard/statistics_service.js
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js
new file mode 100644
index 00000000000..8908a02c343
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_action.js
@@ -0,0 +1,12 @@
+import { registry } from "@web/core/registry";
+import { LazyComponent } from "@web/core/assets";
+import { Component, xml } from "@odoo/owl";
+
+class AwesomeDashboardLoader extends Component {
+    static components = { LazyComponent };
+    static template = xml`
+        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" props="props"/>
+    `;
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader);

From b60e493222fb5640d8884a434b60cd319f0c6afd Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Wed, 29 Jul 2026 16:01:11 +0200
Subject: [PATCH 08/10] [IMP] awesome_dashboard: chapter 2 - make the dashboard
 generic

---
 .../static/src/dashboard/dashboard.js         |  5 +-
 .../static/src/dashboard/dashboard.xml        | 40 ++-----------
 .../static/src/dashboard/dashboard_items.js   | 60 +++++++++++++++++++
 .../src/dashboard/number_card/number_card.js  |  9 +++
 .../src/dashboard/number_card/number_card.xml | 11 ++++
 .../pie_chart/{pie_char.xml => pie_chart.xml} |  0
 .../pie_chart_card/pie_chart_card.js          | 11 ++++
 .../pie_chart_card/pie_chart_card.xml         |  9 +++
 8 files changed, 109 insertions(+), 36 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard/dashboard_items.js
 create mode 100644 awesome_dashboard/static/src/dashboard/number_card/number_card.js
 create mode 100644 awesome_dashboard/static/src/dashboard/number_card/number_card.xml
 rename awesome_dashboard/static/src/dashboard/pie_chart/{pie_char.xml => pie_chart.xml} (100%)
 create mode 100644 awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js
 create mode 100644 awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index dc88e30e5ed..686c97905cf 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -3,11 +3,11 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
-import { PieChart } from "./pie_chart/pie_chart";
+import { items } from "./dashboard_items";
 
 export class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, DashboardItem, PieChart };
+    static components = { Layout, DashboardItem };
     static props = { "*": true };
 
     setup() {
@@ -21,6 +21,7 @@ export class AwesomeDashboard extends Component {
         this.display = { controlPanel: {} };
         this.action = useService("action");
         this.stats = useState(useService("awesome_dashboard.statistics"));
+        this.items = items;
     }
 
     openCustomers() {
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
index b9cbc7191d3..023c1cf47c5 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard.xml
@@ -7,40 +7,12 @@
                 <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
             <div class="d-flex flex-wrap" t-if="stats.isReady">
-                <DashboardItem>
-                    Average amount of t-shirt by order this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="stats.average_quantity"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Average time for an order to go from 'new' to 'sent' or 'cancelled'
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="stats.average_time"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Number of new orders this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="stats.nb_new_orders"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Number of cancelled orders this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="stats.nb_cancelled_orders"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Total amount of new orders this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="stats.total_amount"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem size="2">
-                    Shirt orders by size
-                    <PieChart data="stats['orders_by_size']" label="'Shirt orders by size'"/>
-                </DashboardItem>
+                <t t-foreach="items" t-as="item" t-key="item.id">
+                    <DashboardItem size="item.size || 1">
+                        <t t-set="itemProp" t-value="item.props ? item.props(stats) : {'data': stats}"/>
+                        <t t-component="item.Component" t-props="itemProp"/>
+                    </DashboardItem>
+                </t>
             </div>
         </Layout>
     </t>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
new file mode 100644
index 00000000000..95e4a35ce74
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -0,0 +1,60 @@
+import { NumberCard } from "./number_card/number_card";
+import { PieChartCard } from "./pie_chart_card/pie_chart_card";
+
+export const items = [
+    {
+        id: "average_quantity",
+        description: "Average amount of t-shirt",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Average amount of t-shirt by order this month",
+            value: data.average_quantity,
+        }),
+    },
+    {
+        id: "average_time",
+        description: "Average time",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+            value: data.average_time,
+        }),
+    },
+    {
+        id: "nb_new_orders",
+        description: "Number of new orders",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Number of new orders this month",
+            value: data.nb_new_orders,
+        }),
+    },
+    {
+        id: "nb_cancelled_orders",
+        description: "Number of cancelled orders",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Number of cancelled orders this month",
+            value: data.nb_cancelled_orders,
+        }),
+    },
+    {
+        id: "total_amount",
+        description: "Total amount",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Total amount of new orders this month",
+            value: data.total_amount,
+        }),
+    },
+    {
+        id: "orders_by_size",
+        description: "Shirt orders by size",
+        Component: PieChartCard,
+        size: 2,
+        props: (data) => ({
+            label: "Shirt orders by size",
+            data: data.orders_by_size,
+        }),
+    },
+];
diff --git a/awesome_dashboard/static/src/dashboard/number_card/number_card.js b/awesome_dashboard/static/src/dashboard/number_card/number_card.js
new file mode 100644
index 00000000000..857b7ca51ab
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/number_card/number_card.js
@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component {
+    static template = "awesome_dashboard.NumberCard";
+    static props = {
+        title: String,
+        value: [Number, String],
+    };
+}
diff --git a/awesome_dashboard/static/src/dashboard/number_card/number_card.xml b/awesome_dashboard/static/src/dashboard/number_card/number_card.xml
new file mode 100644
index 00000000000..447b6e906c2
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/number_card/number_card.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.NumberCard">
+        <div>
+            <t t-esc="props.title"/>
+            <div class="fs-1 fw-bold text-success text-center">
+                <t t-esc="props.value"/>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart/pie_char.xml b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard/pie_chart/pie_char.xml
rename to awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js
new file mode 100644
index 00000000000..12822329244
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js
@@ -0,0 +1,11 @@
+import { Component } from "@odoo/owl";
+import { PieChart } from "../pie_chart/pie_chart";
+
+export class PieChartCard extends Component {
+    static template = "awesome_dashboard.PieChartCard";
+    static components = { PieChart };
+    static props = {
+        label: String,
+        data: Object,
+    };
+}
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml
new file mode 100644
index 00000000000..5dbac81fec6
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.PieChartCard">
+        <div>
+            <t t-esc="props.label"/>
+            <PieChart data="props.data" label="props.label"/>
+        </div>
+    </t>
+</templates>

From 24f3396e4db67e780b53a9a67c0598f13aeeb724 Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Wed, 29 Jul 2026 16:12:26 +0200
Subject: [PATCH 09/10] [IMP] awesome_dashboard: chapter 2 - make the dashboard
 extensible

---
 .../static/src/dashboard/dashboard.js         |   2 +-
 .../static/src/dashboard/dashboard_items.js   | 120 +++++++++---------
 2 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index 686c97905cf..83e4a375f46 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -21,7 +21,7 @@ export class AwesomeDashboard extends Component {
         this.display = { controlPanel: {} };
         this.action = useService("action");
         this.stats = useState(useService("awesome_dashboard.statistics"));
-        this.items = items;
+        this.items = registry.category("awesome_dashboard").getAll();
     }
 
     openCustomers() {
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
index 95e4a35ce74..c7326e56839 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_items.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -1,60 +1,66 @@
+import { registry } from "@web/core/registry";
 import { NumberCard } from "./number_card/number_card";
 import { PieChartCard } from "./pie_chart_card/pie_chart_card";
 
-export const items = [
-    {
-        id: "average_quantity",
-        description: "Average amount of t-shirt",
-        Component: NumberCard,
-        props: (data) => ({
-            title: "Average amount of t-shirt by order this month",
-            value: data.average_quantity,
-        }),
-    },
-    {
-        id: "average_time",
-        description: "Average time",
-        Component: NumberCard,
-        props: (data) => ({
-            title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
-            value: data.average_time,
-        }),
-    },
-    {
-        id: "nb_new_orders",
-        description: "Number of new orders",
-        Component: NumberCard,
-        props: (data) => ({
-            title: "Number of new orders this month",
-            value: data.nb_new_orders,
-        }),
-    },
-    {
-        id: "nb_cancelled_orders",
-        description: "Number of cancelled orders",
-        Component: NumberCard,
-        props: (data) => ({
-            title: "Number of cancelled orders this month",
-            value: data.nb_cancelled_orders,
-        }),
-    },
-    {
-        id: "total_amount",
-        description: "Total amount",
-        Component: NumberCard,
-        props: (data) => ({
-            title: "Total amount of new orders this month",
-            value: data.total_amount,
-        }),
-    },
-    {
-        id: "orders_by_size",
-        description: "Shirt orders by size",
-        Component: PieChartCard,
-        size: 2,
-        props: (data) => ({
-            label: "Shirt orders by size",
-            data: data.orders_by_size,
-        }),
-    },
-];
+const awesomeDashboardRegistry = registry.category("awesome_dashboard");
+
+awesomeDashboardRegistry.add("average_quantity", {
+    id: "average_quantity",
+    description: "Average amount of t-shirt",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Average amount of t-shirt by order this month",
+        value: data.average_quantity,
+    }),
+});
+
+awesomeDashboardRegistry.add("average_time", {
+    id: "average_time",
+    description: "Average time",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+        value: data.average_time,
+    }),
+});
+
+awesomeDashboardRegistry.add("nb_new_orders", {
+    id: "nb_new_orders",
+    description: "Number of new orders",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Number of new orders this month",
+        value: data.nb_new_orders,
+    }),
+});
+
+awesomeDashboardRegistry.add("nb_cancelled_orders", {
+    id: "nb_cancelled_orders",
+    description: "Number of cancelled orders",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Number of cancelled orders this month",
+        value: data.nb_cancelled_orders,
+    }),
+});
+
+awesomeDashboardRegistry.add("total_amount", {
+    id: "total_amount",
+    description: "Total amount",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Total amount of new orders this month",
+        value: data.total_amount,
+    }),
+});
+
+awesomeDashboardRegistry.add("orders_by_size", {
+    id: "orders_by_size",
+    description: "Shirt orders by size",
+    Component: PieChartCard,
+    size: 2,
+    props: (data) => ({
+        label: "Shirt orders by size",
+        data: data.orders_by_size,
+    }),
+});

From ed7f761606743a03ddd928f8c571e9eeba348db9 Mon Sep 17 00:00:00 2001
From: "Tony Michel (tomic)" <tomic@odoo.com>
Date: Wed, 29 Jul 2026 17:19:55 +0200
Subject: [PATCH 10/10] [IMP] awesome_dashboard: chapter 2 - allow adding and
 removing dashboard items

---
 .../static/src/dashboard/dashboard.js         | 61 ++++++++++++++++++-
 .../static/src/dashboard/dashboard.xml        | 22 ++++++-
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index 83e4a375f46..748a496d30c 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -4,6 +4,9 @@ import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
 import { items } from "./dashboard_items";
+import { Dialog } from "@web/core/dialog/dialog";
+import { browser } from "@web/core/browser/browser";
+import { CheckBox } from "@web/core/checkbox/checkbox";
 
 export class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
@@ -21,7 +24,29 @@ export class AwesomeDashboard extends Component {
         this.display = { controlPanel: {} };
         this.action = useService("action");
         this.stats = useState(useService("awesome_dashboard.statistics"));
-        this.items = registry.category("awesome_dashboard").getAll();
+        this.dialog = useService("dialog");
+
+        const stored = browser.localStorage.getItem("disabledDashboardItems");
+        this.state = useState({
+            disabledItems: stored ? JSON.parse(stored) : [],
+        });
+    }
+
+    get items() {
+        const allItems = registry.category("awesome_dashboard").getAll();
+        return allItems.filter((item) => !this.state.disabledItems.includes(item.id));
+    }
+
+    updateConfiguration(newDisabledItems) {
+        this.state.disabledItems = newDisabledItems;
+    }
+
+    openConfiguration() {
+        this.dialog.add(ConfigurationDialog, {
+            items: this.items,
+            disabledItems: this.state.disabledItems,
+            onUpdateConfiguration: this.updateConfiguration.bind(this),
+        })
     }
 
     openCustomers() {
@@ -41,4 +66,38 @@ export class AwesomeDashboard extends Component {
     }
 }
 
+class ConfigurationDialog extends Component {
+    static template = "awesome_dashboard.ConfigurationDialog";
+    static components = { Dialog, CheckBox };
+    static props = ["close", "items", "disabledItems", "onUpdateConfiguration"];
+
+    setup() {
+        this.items = useState(this.props.items.map((item) => {
+            return {
+                ...item,
+                enabled: !this.props.disabledItems.includes(item.id),
+            }
+        }));
+    }
+
+    done() {
+        this.props.close();
+    }
+
+    onChange(checked, changedItem) {
+        changedItem.enabled = checked;
+        const newDisabledItems = Object.values(this.items).filter(
+            (item) => !item.enabled
+        ).map((item) => item.id)
+
+        browser.localStorage.setItem(
+            "disabledDashboardItems",
+            newDisabledItems,
+        );
+
+        this.props.onUpdateConfiguration(newDisabledItems);
+    }
+
+}
+
 registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
index 023c1cf47c5..1aed7212803 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard.xml
@@ -3,9 +3,14 @@
     <t t-name="awesome_dashboard.AwesomeDashboard">
         <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
             <t t-set-slot="layout-buttons">
-                <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
+                <button class="btn btn-primary" t-on-click="openCustomers">Customers</button>
                 <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
+            <t t-set-slot="control-panel-additional-actions">
+                <button t-on-click="openConfiguration" class="btn p-0 ms-1 border-0">
+                    <i class="fa fa-cog"></i>
+                </button>
+            </t>
             <div class="d-flex flex-wrap" t-if="stats.isReady">
                 <t t-foreach="items" t-as="item" t-key="item.id">
                     <DashboardItem size="item.size || 1">
@@ -16,4 +21,19 @@
             </div>
         </Layout>
     </t>
+
+    <t t-name="awesome_dashboard.ConfigurationDialog">
+        <Dialog title="'Dashboard Configuration'">
+            <div class="d-flex flex-column gap-2">
+                <t t-foreach="items" t-as="item" t-key="item.id">
+                    <CheckBox value="item.enabled" onChange="(checked) => this.onChange(checked, item)">
+                        <t t-esc="item.description || item.id"/>
+                    </CheckBox>
+                </t>
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="done">Close</button>
+            </t>
+        </Dialog>
+    </t>
 </templates>