From 010cd69c25c9da308ec7d27f28168c54ce55605d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Thu, 20 Aug 2026 13:15:59 +0200
Subject: [PATCH 01/22] [IMP] awesome_owl: counter & card

---
 awesome_owl/static/src/card/card.js        |  6 ++++++
 awesome_owl/static/src/card/card.xml       | 15 +++++++++++++++
 awesome_owl/static/src/counter/counter.js  | 11 +++++++++++
 awesome_owl/static/src/counter/counter.xml | 13 +++++++++++++
 awesome_owl/static/src/playground.js       |  5 ++++-
 awesome_owl/static/src/playground.xml      |  4 ++++
 6 files changed, 53 insertions(+), 1 deletion(-)
 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

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..8beee894094
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,6 @@
+import { Component } from "@odoo/owl";
+
+export class Card extends Component {
+  static template = "awesome_owl.card";
+
+}
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..6df30f51cea
--- /dev/null
+++ b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.card">
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title"><t t-esc="props.title"/></h5>
+                <p class="card-text">
+                    <t t-out="props.content"/>
+                </p>
+            </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..a70870dfc46
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,11 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+  static template = "awesome_owl.counter";
+
+  state = useState({ value: 0 });
+
+  increment() {
+    this.state.value++;
+  }
+}
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 00000000000..1f1cd5d6e54
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div class="p-3">
+            Counter: <t t-esc="state.value"/>
+            <button class="btn btn-primary" t-on-click="increment">
+                Click Me!
+            </button>
+        </div>
+    </t>
+
+</templates>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 4ac769b0aa5..d364736df60 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,5 +1,8 @@
 import { Component } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
+  static template = "awesome_owl.playground";
+  static components = { Counter, Card };
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..468b7d7e9d3 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,6 +4,10 @@
     <t t-name="awesome_owl.playground">
         <div class="p-3">
             hello world
+            <Counter/>
+            <Counter/>
+            <Card title="'Hehe'" content="'Hihihi'"/>
+            <Card title="'HOHO'" content="'Huhuhuh'"/>
         </div>
     </t>
 

From bbb218c81daad8f565b16e6d5e8f027b83de369d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Thu, 20 Aug 2026 14:07:47 +0200
Subject: [PATCH 02/22] [IMP] awesome_owl: C1-4

---
 awesome_owl/static/src/playground.js  | 5 ++++-
 awesome_owl/static/src/playground.xml | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index d364736df60..c455da42f86 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,8 +1,11 @@
-import { Component } from "@odoo/owl";
+import { Component, markup } from "@odoo/owl";
 import { Counter } from "./counter/counter";
 import { Card } from "./card/card";
 
 export class Playground extends Component {
   static template = "awesome_owl.playground";
   static components = { Counter, Card };
+
+  card1Content = '<div class="text-primary">some content 1</div>';
+  card2Content = markup('<div class="text-primary">some content 2</div>');
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 468b7d7e9d3..c9a09c1b141 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -6,8 +6,8 @@
             hello world
             <Counter/>
             <Counter/>
-            <Card title="'Hehe'" content="'Hihihi'"/>
-            <Card title="'HOHO'" content="'Huhuhuh'"/>
+            <Card title="'Card 1'" content="card1Content"/>
+            <Card title="'Card 2'" content="card2Content"/>
         </div>
     </t>
 

From d71c7d25dd67b173dae5a4e5b15e8e43f6e4e03f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Thu, 20 Aug 2026 14:12:37 +0200
Subject: [PATCH 03/22] [IMP] awesome_owl: C1-5

---
 awesome_owl/static/src/card/card.js   | 2 +-
 awesome_owl/static/src/playground.xml | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 8beee894094..c9de5d52527 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -2,5 +2,5 @@ import { Component } from "@odoo/owl";
 
 export class Card extends Component {
   static template = "awesome_owl.card";
-
+  static props = ['title?', 'content']
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index c9a09c1b141..8b5495e9023 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -8,6 +8,7 @@
             <Counter/>
             <Card title="'Card 1'" content="card1Content"/>
             <Card title="'Card 2'" content="card2Content"/>
+            <Card content="'card 3 - No title'"/>
         </div>
     </t>
 

From 74a5c6936e43b2d075eae7a74ab049af353d0df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Thu, 20 Aug 2026 14:45:02 +0200
Subject: [PATCH 04/22] [IMP] awesome_owl: C1-6

---
 awesome_owl/static/src/counter/counter.js | 2 ++
 awesome_owl/static/src/playground.js      | 8 +++++++-
 awesome_owl/static/src/playground.xml     | 5 +++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index a70870dfc46..5e0ceb2183b 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -2,10 +2,12 @@ import { Component, useState } from "@odoo/owl";
 
 export class Counter extends Component {
   static template = "awesome_owl.counter";
+  static props = ['onChange?']
 
   state = useState({ value: 0 });
 
   increment() {
     this.state.value++;
+    this.props.onChange?.();
   }
 }
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index c455da42f86..0652415089e 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,4 +1,4 @@
-import { Component, markup } from "@odoo/owl";
+import { Component, markup, useState } from "@odoo/owl";
 import { Counter } from "./counter/counter";
 import { Card } from "./card/card";
 
@@ -6,6 +6,12 @@ export class Playground extends Component {
   static template = "awesome_owl.playground";
   static components = { Counter, Card };
 
+  state = useState({ value: 0 });
+
   card1Content = '<div class="text-primary">some content 1</div>';
   card2Content = markup('<div class="text-primary">some content 2</div>');
+
+  incrementSum() {
+    this.state.value++;
+  }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 8b5495e9023..55a5b7ded25 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,8 +4,9 @@
     <t t-name="awesome_owl.playground">
         <div class="p-3">
             hello world
-            <Counter/>
-            <Counter/>
+            <Counter onChange.bind="incrementSum"/>
+            <Counter onChange.bind="incrementSum"/>
+            <p>Sum: <t t-esc="state.value"/></p>
             <Card title="'Card 1'" content="card1Content"/>
             <Card title="'Card 2'" content="card2Content"/>
             <Card content="'card 3 - No title'"/>

From 10a00caac6e0531c777b7d19ef55464a28432798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Thu, 20 Aug 2026 17:16:03 +0200
Subject: [PATCH 05/22] [IMP] awesome_owl: C1-7+8

---
 awesome_owl/static/src/playground.js      |  3 ++-
 awesome_owl/static/src/playground.xml     |  1 +
 awesome_owl/static/src/todo/todo_item.js  |  6 ++++++
 awesome_owl/static/src/todo/todo_item.xml | 11 +++++++++++
 awesome_owl/static/src/todo/todo_list.js  | 10 ++++++++++
 awesome_owl/static/src/todo/todo_list.xml | 12 ++++++++++++
 6 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 awesome_owl/static/src/todo/todo_item.js
 create mode 100644 awesome_owl/static/src/todo/todo_item.xml
 create mode 100644 awesome_owl/static/src/todo/todo_list.js
 create mode 100644 awesome_owl/static/src/todo/todo_list.xml

diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 0652415089e..2f890565dd5 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,10 +1,11 @@
 import { Component, markup, useState } from "@odoo/owl";
 import { Counter } from "./counter/counter";
 import { Card } from "./card/card";
+import { TodoList } from "./todo/todo_list";
 
 export class Playground extends Component {
   static template = "awesome_owl.playground";
-  static components = { Counter, Card };
+  static components = { Counter, Card, TodoList };
 
   state = useState({ value: 0 });
 
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 55a5b7ded25..d9a3cc289e7 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -10,6 +10,7 @@
             <Card title="'Card 1'" content="card1Content"/>
             <Card title="'Card 2'" content="card2Content"/>
             <Card content="'card 3 - No title'"/>
+            <TodoList/>
         </div>
     </t>
 
diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
new file mode 100644
index 00000000000..2c89fa044b0
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -0,0 +1,6 @@
+import { Component, useState } from "@odoo/owl";
+
+export class TodoItem extends Component {
+  static template = "awesome_owl.todo_item";
+  static props = ['id', 'description', 'isCompleted?']
+}
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
new file mode 100644
index 00000000000..46fb8624669
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todo_item">
+        <div class="p-1" t-att-class="{'text-muted text-decoration-line-through': props.isCompleted}">
+            <bf><t t-esc="props.id"/>. </bf>
+            <t t-esc="props.description"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
new file mode 100644
index 00000000000..c969b24ddac
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -0,0 +1,10 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todo_item";
+
+export class TodoList extends Component {
+  static template = "awesome_owl.todo_list";
+  static components = { TodoItem };
+
+  state = useState({ items: [{ id: 2, description: "buy brocolli", isCompleted: true }, { id: 3, description: "buy milk", isCompleted: false }] });
+
+}
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
new file mode 100644
index 00000000000..96c4504def5
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todo_list">
+        <div class="p-1">
+            <t t-foreach="state.items" t-as="i" t-key="i.id">
+                <TodoItem id="i.id" description="i.description" isCompleted="i.isCompleted"/>
+            </t>
+        </div>
+    </t>
+
+</templates>

From d99f7c9613202417762fc6332b955887b0a0336b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Thu, 20 Aug 2026 17:28:48 +0200
Subject: [PATCH 06/22] [IMP] awesome_owl: C1-9

---
 awesome_owl/static/src/todo/todo_list.js  | 11 ++++++++++-
 awesome_owl/static/src/todo/todo_list.xml |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index c969b24ddac..2094bc2697a 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -5,6 +5,15 @@ export class TodoList extends Component {
   static template = "awesome_owl.todo_list";
   static components = { TodoItem };
 
-  state = useState({ items: [{ id: 2, description: "buy brocolli", isCompleted: true }, { id: 3, description: "buy milk", isCompleted: false }] });
+  // { id: 2, description: "buy brocolli", isCompleted: true }
+  // { id: 3, description: "buy soy milk", isCompleted: false }
+  state = useState({ items: [], count: 0 });
+
+  addTodo(ev) {
+    if (ev.key === "Enter" && ev.target.value.trim() !== ""){
+      this.state.items.push({ 'id': this.state.count++, 'description': ev.target.value, 'isCompleted': false });
+      ev.target.value = ""
+    }
+  }
 
 }
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index 96c4504def5..f00d2cd129c 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -7,6 +7,7 @@
                 <TodoItem id="i.id" description="i.description" isCompleted="i.isCompleted"/>
             </t>
         </div>
+        <input type="text" placeholder="Add a todo" t-on-keyup="addTodo"/>
     </t>
 
 </templates>

From 341732e406656c6b26e0f124aaf25d3b9772209f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Fri, 21 Aug 2026 13:56:21 +0200
Subject: [PATCH 07/22] [IMP] awesome_owl: C1-10

---
 awesome_owl/static/src/todo/todo_list.js  | 7 +++++--
 awesome_owl/static/src/todo/todo_list.xml | 2 +-
 awesome_owl/static/src/utils.js           | 9 +++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 awesome_owl/static/src/utils.js

diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index 2094bc2697a..26104b9183f 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -1,12 +1,11 @@
 import { Component, useState } from "@odoo/owl";
 import { TodoItem } from "./todo_item";
+import { useAutoFocus } from "../utils"
 
 export class TodoList extends Component {
   static template = "awesome_owl.todo_list";
   static components = { TodoItem };
 
-  // { id: 2, description: "buy brocolli", isCompleted: true }
-  // { id: 3, description: "buy soy milk", isCompleted: false }
   state = useState({ items: [], count: 0 });
 
   addTodo(ev) {
@@ -16,4 +15,8 @@ export class TodoList extends Component {
     }
   }
 
+  setup() {
+    useAutoFocus("todo-input")
+  }
+
 }
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index f00d2cd129c..871d6704b0d 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -7,7 +7,7 @@
                 <TodoItem id="i.id" description="i.description" isCompleted="i.isCompleted"/>
             </t>
         </div>
-        <input type="text" placeholder="Add a todo" t-on-keyup="addTodo"/>
+        <input type="text" t-ref="todo-input" placeholder="Add a todo" t-on-keyup="addTodo"/>
     </t>
 
 </templates>
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 00000000000..dd255757856
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,9 @@
+import { useRef, useEffect } from "@odoo/owl";
+
+export function useAutoFocus(name) {
+  let ref = useRef(name);
+  useEffect(
+    (el) => el && el.focus(),
+    () => [ref.el]
+  );
+}

From 3a0788d775e2df725eed45b88c10baa353f17c99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Fri, 21 Aug 2026 14:47:49 +0200
Subject: [PATCH 08/22] [IMP] awesome_owl: C1-11

---
 awesome_owl/static/src/todo/todo_item.js  |  2 +-
 awesome_owl/static/src/todo/todo_item.xml |  5 +++--
 awesome_owl/static/src/todo/todo_list.js  | 15 +++++++++++----
 awesome_owl/static/src/todo/todo_list.xml |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
index 2c89fa044b0..724fb71270f 100644
--- a/awesome_owl/static/src/todo/todo_item.js
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -2,5 +2,5 @@ import { Component, useState } from "@odoo/owl";
 
 export class TodoItem extends Component {
   static template = "awesome_owl.todo_item";
-  static props = ['id', 'description', 'isCompleted?']
+  static props = ['id', 'description', 'isCompleted?', 'toggleState']
 }
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
index 46fb8624669..35253014238 100644
--- a/awesome_owl/static/src/todo/todo_item.xml
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -2,8 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_item">
-        <div class="p-1" t-att-class="{'text-muted text-decoration-line-through': props.isCompleted}">
-            <bf><t t-esc="props.id"/>. </bf>
+        <div t-att-class="{'text-muted text-decoration-line-through': props.isCompleted}">
+            <input type="checkbox" t-att="{'checked': props.isCompleted}" t-on-change="() => props.toggleState(props.id)"/>
+            <bf> <t t-esc="props.id"/>. </bf>
             <t t-esc="props.description"/>
         </div>
     </t>
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index 26104b9183f..7704b852ab5 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -6,17 +6,24 @@ export class TodoList extends Component {
   static template = "awesome_owl.todo_list";
   static components = { TodoItem };
 
-  state = useState({ items: [], count: 0 });
+
+  setup() {
+    this.state = useState({ items: [], count: 0 });
+    useAutoFocus("todo-input");
+    this.toggleItemState = this.toggleItemState.bind(this);
+  }
 
   addTodo(ev) {
     if (ev.key === "Enter" && ev.target.value.trim() !== ""){
       this.state.items.push({ 'id': this.state.count++, 'description': ev.target.value, 'isCompleted': false });
-      ev.target.value = ""
+      ev.target.value = "";
     }
   }
 
-  setup() {
-    useAutoFocus("todo-input")
+  toggleItemState(id) {
+    const item = this.state.items.find(item => item.id == id);
+    item['isCompleted'] = !item['isCompleted'];
   }
 
+
 }
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index 871d6704b0d..ce43ae0bf37 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -4,7 +4,7 @@
     <t t-name="awesome_owl.todo_list">
         <div class="p-1">
             <t t-foreach="state.items" t-as="i" t-key="i.id">
-                <TodoItem id="i.id" description="i.description" isCompleted="i.isCompleted"/>
+                <TodoItem id="i.id" description="i.description" isCompleted="i.isCompleted" toggleState="toggleItemState"/>
             </t>
         </div>
         <input type="text" t-ref="todo-input" placeholder="Add a todo" t-on-keyup="addTodo"/>

From 1d583bcc8f30be1bd4dc7e567f5263869defd90d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 10:29:24 +0200
Subject: [PATCH 09/22] [IMP] awesome_owl: C1-12

---
 awesome_owl/static/src/todo/todo_item.js  | 2 +-
 awesome_owl/static/src/todo/todo_item.xml | 1 +
 awesome_owl/static/src/todo/todo_list.js  | 6 ++++++
 awesome_owl/static/src/todo/todo_list.xml | 7 ++++++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
index 724fb71270f..df56ad30626 100644
--- a/awesome_owl/static/src/todo/todo_item.js
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -2,5 +2,5 @@ import { Component, useState } from "@odoo/owl";
 
 export class TodoItem extends Component {
   static template = "awesome_owl.todo_item";
-  static props = ['id', 'description', 'isCompleted?', 'toggleState']
+  static props = ['id', 'description', 'isCompleted?', 'toggleState', 'removeTodo']
 }
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
index 35253014238..3870e998924 100644
--- a/awesome_owl/static/src/todo/todo_item.xml
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -6,6 +6,7 @@
             <input type="checkbox" t-att="{'checked': props.isCompleted}" t-on-change="() => props.toggleState(props.id)"/>
             <bf> <t t-esc="props.id"/>. </bf>
             <t t-esc="props.description"/>
+            <span class="fa fa-remove p-1" t-on-click="() => props.removeTodo(props.id)"/>
         </div>
     </t>
 
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index 7704b852ab5..d1fc401ecbf 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -11,6 +11,7 @@ export class TodoList extends Component {
     this.state = useState({ items: [], count: 0 });
     useAutoFocus("todo-input");
     this.toggleItemState = this.toggleItemState.bind(this);
+    this.removeTodo = this.removeTodo.bind(this);
   }
 
   addTodo(ev) {
@@ -25,5 +26,10 @@ export class TodoList extends Component {
     item['isCompleted'] = !item['isCompleted'];
   }
 
+  removeTodo(id) {
+    const item_index = this.state.items.findIndex(item => item.id == id);
+    this.state.items.splice(item_index, 1);
+  }
+
 
 }
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index ce43ae0bf37..8d6cefa7af7 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -4,7 +4,12 @@
     <t t-name="awesome_owl.todo_list">
         <div class="p-1">
             <t t-foreach="state.items" t-as="i" t-key="i.id">
-                <TodoItem id="i.id" description="i.description" isCompleted="i.isCompleted" toggleState="toggleItemState"/>
+                <TodoItem id="i.id"
+                    description="i.description"
+                    isCompleted="i.isCompleted"
+                    toggleState="toggleItemState"
+                    removeTodo="removeTodo"
+                />
             </t>
         </div>
         <input type="text" t-ref="todo-input" placeholder="Add a todo" t-on-keyup="addTodo"/>

From 218074a1896b02b3ececd271ecb95f00c03995c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 10:33:57 +0200
Subject: [PATCH 10/22] [IMP] awesome_owl: C1-13

---
 awesome_owl/static/src/card/card.js   | 2 +-
 awesome_owl/static/src/card/card.xml  | 4 +---
 awesome_owl/static/src/playground.xml | 9 ++++++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index c9de5d52527..590a1cf657f 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -2,5 +2,5 @@ import { Component } from "@odoo/owl";
 
 export class Card extends Component {
   static template = "awesome_owl.card";
-  static props = ['title?', 'content']
+  static props = ['title?', 'slots']
 }
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 6df30f51cea..2ec51605223 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -5,9 +5,7 @@
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
                 <h5 class="card-title"><t t-esc="props.title"/></h5>
-                <p class="card-text">
-                    <t t-out="props.content"/>
-                </p>
+                <t t-slot="default"/>
             </div>
         </div>
     </t>
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index d9a3cc289e7..9b25b9145f2 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -7,9 +7,12 @@
             <Counter onChange.bind="incrementSum"/>
             <Counter onChange.bind="incrementSum"/>
             <p>Sum: <t t-esc="state.value"/></p>
-            <Card title="'Card 1'" content="card1Content"/>
-            <Card title="'Card 2'" content="card2Content"/>
-            <Card content="'card 3 - No title'"/>
+            <Card title="'Card 1'">
+                <Counter/>
+            </Card>
+            <Card title="'Card 2'">
+                Hey !
+            </Card>
             <TodoList/>
         </div>
     </t>

From 746fe84aa2e4bf78716cca66b9c1eebdb3108ab9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 10:40:48 +0200
Subject: [PATCH 11/22] [IMP] awesome_owl: C1-14

---
 awesome_owl/static/src/card/card.js  | 6 +++++-
 awesome_owl/static/src/card/card.xml | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 590a1cf657f..be545f485e8 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -1,6 +1,10 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
   static template = "awesome_owl.card";
   static props = ['title?', 'slots']
+
+  setup() {
+    this.state = useState({ open: true });
+  }
 }
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 2ec51605223..e34b162fb66 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -4,8 +4,8 @@
     <t t-name="awesome_owl.card">
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
-                <h5 class="card-title"><t t-esc="props.title"/></h5>
-                <t t-slot="default"/>
+                <h5 class="card-title"><t t-esc="props.title"/><span class="fa fa-sort" t-on-click="() => state.open = !state.open"/></h5>
+                <t t-if="state.open" t-slot="default"/>
             </div>
         </div>
     </t>

From cb2c4b72921cc1bd5ab55f3d839bb61021f9cbee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 10:51:31 +0200
Subject: [PATCH 12/22] [IMP] awesome_dashboard: C2-1

---
 awesome_dashboard/static/src/dashboard.js   | 4 +++-
 awesome_dashboard/static/src/dashboard.scss | 3 +++
 awesome_dashboard/static/src/dashboard.xml  | 4 +++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard.scss

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index c4fb245621b..0ae2ed3cbde 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,8 +1,10 @@
 import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
 
 class AwesomeDashboard extends Component {
-    static template = "awesome_dashboard.AwesomeDashboard";
+  static template = "awesome_dashboard.AwesomeDashboard";
+  static components = { Layout };
 }
 
 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..2508cc740ad
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: palegoldenrod;
+}
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 1a2ac9a2fed..298edccd7de 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -2,7 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
+            hello dashboard
+        </Layout>
     </t>
 
 </templates>

From 43447a8629bed7adad571131dce14f7f4834b81f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 11:10:22 +0200
Subject: [PATCH 13/22] [IMP] awesome_dashboard: C2-2

---
 awesome_dashboard/static/src/dashboard.js  | 19 +++++++++++++++++++
 awesome_dashboard/static/src/dashboard.xml |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 0ae2ed3cbde..1f2f3c447f1 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,10 +1,29 @@
 import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
 
 class AwesomeDashboard extends Component {
   static template = "awesome_dashboard.AwesomeDashboard";
   static components = { Layout };
+
+  setup() {
+    this.action = useService("action");
+  }
+
+  openPartnerForm() {
+    this.action.doAction("base.action_partner_form");
+  }
+
+  openLeads() {
+    this.action.doAction({
+      type: 'ir.actions.act_window',
+      name: '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.xml b/awesome_dashboard/static/src/dashboard.xml
index 298edccd7de..525e3c87659 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -3,6 +3,10 @@
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
         <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
+            <t t-set-slot="control-panel-create-button">
+                <button t-on-click="openPartnerForm" type="button" class="btn btn-primary" title="Customers">Customers</button>
+                <button t-on-click="openLeads" type="button" class="btn btn-primary" title="Leads">Leads</button>
+            </t>
             hello dashboard
         </Layout>
     </t>

From 02530865c0894e55374529a9d39d2745a6c9049e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 11:47:19 +0200
Subject: [PATCH 14/22] [IMP] awesome_dashboard: C2-3

---
 .../static/src/dashboard-item/dashboard-item.js      | 12 ++++++++++++
 .../static/src/dashboard-item/dashboard-item.xml     | 12 ++++++++++++
 awesome_dashboard/static/src/dashboard.js            |  3 ++-
 awesome_dashboard/static/src/dashboard.xml           |  7 ++++++-
 4 files changed, 32 insertions(+), 2 deletions(-)
 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/static/src/dashboard-item/dashboard-item.js b/awesome_dashboard/static/src/dashboard-item/dashboard-item.js
new file mode 100644
index 00000000000..32cff9d3743
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard-item/dashboard-item.js
@@ -0,0 +1,12 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+  static template = "awesome_dashboard.dashboard_item";
+  static props = {
+    slots: {type: Object, optional: true},
+    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..ee08ad926bd
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard-item/dashboard-item.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_item">
+        <div class="card d-inline-block m-2" t-att-style="`width: ${18*props.size}rem`">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 1f2f3c447f1..181af5d6b54 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -2,10 +2,11 @@ import { Component } 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 {
   static template = "awesome_dashboard.AwesomeDashboard";
-  static components = { Layout };
+  static components = { Layout, DashboardItem };
 
   setup() {
     this.action = useService("action");
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 525e3c87659..809420df8c9 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -7,7 +7,12 @@
                 <button t-on-click="openPartnerForm" type="button" class="btn btn-primary" title="Customers">Customers</button>
                 <button t-on-click="openLeads" type="button" class="btn btn-primary" title="Leads">Leads</button>
             </t>
-            hello dashboard
+            <DashboardItem>
+                hi !
+            </DashboardItem>
+            <DashboardItem size="2">
+                hi but bigger ?
+            </DashboardItem>
         </Layout>
     </t>
 

From 26262189a971127cfd8be026999e03c22e422c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 13:43:25 +0200
Subject: [PATCH 15/22] [IMP] awesome_dashboard: C2-4

---
 .../src/dashboard-item/dashboard-item.js      |  2 +-
 .../dashboard-number-item.js                  |  8 +++++++
 .../dashboard-number-item.xml                 | 13 ++++++++++++
 awesome_dashboard/static/src/dashboard.js     |  9 ++++++--
 awesome_dashboard/static/src/dashboard.xml    | 21 +++++++++++++++++++
 5 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.js
 create mode 100644 awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.xml

diff --git a/awesome_dashboard/static/src/dashboard-item/dashboard-item.js b/awesome_dashboard/static/src/dashboard-item/dashboard-item.js
index 32cff9d3743..f190aaa953a 100644
--- a/awesome_dashboard/static/src/dashboard-item/dashboard-item.js
+++ b/awesome_dashboard/static/src/dashboard-item/dashboard-item.js
@@ -3,7 +3,7 @@ import { Component } from "@odoo/owl";
 export class DashboardItem extends Component {
   static template = "awesome_dashboard.dashboard_item";
   static props = {
-    slots: {type: Object, optional: true},
+    slots: { type: Object, optional: true },
     size: { type: Number, optional: true },
   };
   static defaultProps = {
diff --git a/awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.js b/awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.js
new file mode 100644
index 00000000000..935a970913d
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.js
@@ -0,0 +1,8 @@
+import { Component } from "@odoo/owl";
+import { DashboardItem } from "../dashboard-item/dashboard-item";
+
+export class DashboardNumberItem extends Component {
+  static template = "awesome_dashboard.dashboard_number_item";
+  static props = ['description', 'number'];
+  static components = { DashboardItem };
+}
diff --git a/awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.xml b/awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.xml
new file mode 100644
index 00000000000..586dfd01bd1
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_number_item">
+        <DashboardItem>
+            <center>
+                <h5><t t-esc="props.description"/></h5>
+                <h3><t t-esc="props.number"/></h3>
+            </center>
+        </DashboardItem>
+    </t>
+
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 181af5d6b54..c2a72cab778 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,15 +1,20 @@
-import { Component } from "@odoo/owl";
+import { Component, onWillStart } 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 { DashboardNumberItem } from "./dashboard-number-item/dashboard-number-item";
 
 class AwesomeDashboard extends Component {
   static template = "awesome_dashboard.AwesomeDashboard";
-  static components = { Layout, DashboardItem };
+  static components = { Layout, DashboardItem, DashboardNumberItem };
 
   setup() {
     this.action = useService("action");
+    onWillStart(async () => {
+      this.result = await rpc("/awesome_dashboard/statistics", {});
+    });
   }
 
   openPartnerForm() {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 809420df8c9..3b098417b2d 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -13,6 +13,27 @@
             <DashboardItem size="2">
                 hi but bigger ?
             </DashboardItem>
+
+            <DashboardNumberItem
+                description="'Number of new orders this month'"
+                number="result.nb_new_orders"
+            />
+            <DashboardNumberItem
+                description="'Total amount of new orders this month'"
+                number="result.total_amount"
+            />
+            <DashboardNumberItem
+                description="'Average amount of t-shirt by order this month'"
+                number="result.average_quantity"
+            />
+            <DashboardNumberItem
+                description="'Number of cancelled orders this month'"
+                number="result.nb_cancelled_orders"
+            />
+            <DashboardNumberItem
+                description="'Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’'"
+                number="result.average_time"
+            />
         </Layout>
     </t>
 

From fea777d17117ed612023472853460a0094f0b5d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 15:42:28 +0200
Subject: [PATCH 16/22] [IMP] awesome_dashboard: C2-5

---
 .../core/awesome_dashboard/statistics_service.js   | 14 ++++++++++++++
 awesome_dashboard/static/src/dashboard.js          |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js

diff --git a/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js b/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js
new file mode 100644
index 00000000000..5fe6e643c8f
--- /dev/null
+++ b/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js
@@ -0,0 +1,14 @@
+import { rpc } from "@web/core/network/rpc";
+import { memoize } from "@web/core/utils/functions";
+import { registry } from "@web/core/registry";
+
+
+const statisticsService = {
+    start() {
+        return {
+            loadStatistics: memoize(() => rpc("/awesome_dashboard/statistics")),
+        };
+    },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index c2a72cab778..caa36f09076 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -2,7 +2,6 @@ import { Component, onWillStart } 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 { DashboardNumberItem } from "./dashboard-number-item/dashboard-number-item";
 
@@ -12,8 +11,9 @@ class AwesomeDashboard extends Component {
 
   setup() {
     this.action = useService("action");
+    const statisticsService = useService("awesome_dashboard.statistics");
     onWillStart(async () => {
-      this.result = await rpc("/awesome_dashboard/statistics", {});
+      this.result = await statisticsService.loadStatistics();
     });
   }
 

From 11e11ae70ab7bf5a966d412b0a742d9c2a7f983c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Mon, 24 Aug 2026 16:50:48 +0200
Subject: [PATCH 17/22] [IMP] awesome_dashboard: C2-6

---
 awesome_dashboard/static/src/dashboard.js     |  3 +-
 awesome_dashboard/static/src/dashboard.xml    |  4 ++
 .../static/src/pie-chart/pie-chart.js         | 55 +++++++++++++++++++
 .../static/src/pie-chart/pie-chart.xml        | 13 +++++
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 awesome_dashboard/static/src/pie-chart/pie-chart.js
 create mode 100644 awesome_dashboard/static/src/pie-chart/pie-chart.xml

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index caa36f09076..4212799f8cc 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 { DashboardItem } from "./dashboard-item/dashboard-item";
 import { DashboardNumberItem } from "./dashboard-number-item/dashboard-number-item";
+import { PieChart } from "./pie-chart/pie-chart";
 
 class AwesomeDashboard extends Component {
   static template = "awesome_dashboard.AwesomeDashboard";
-  static components = { Layout, DashboardItem, DashboardNumberItem };
+  static components = { Layout, DashboardItem, DashboardNumberItem, PieChart };
 
   setup() {
     this.action = useService("action");
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 3b098417b2d..1c2f4f51342 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -34,6 +34,10 @@
                 description="'Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’'"
                 number="result.average_time"
             />
+
+            <DashboardItem>
+                <PieChart data="result.orders_by_size"/>
+            </DashboardItem>
         </Layout>
     </t>
 
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..a85684e831c
--- /dev/null
+++ b/awesome_dashboard/static/src/pie-chart/pie-chart.js
@@ -0,0 +1,55 @@
+import { Component, onWillStart, useRef, useEffect } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+  static template = "awesome_dashboard.pie_chart"
+  static props = ['data']
+
+  setup() {
+    this.chart = null;
+    this.canvasRef = useRef("canvas");
+    this.title = "Shirt orders by size"
+    onWillStart(async () => loadJS('/web/static/lib/Chart/Chart.js'));
+
+    useEffect(() => {
+      this.renderChart();
+      return () => {
+        if (this.chart) {
+          this.chart.destroy();
+        }
+      };
+    });
+  }
+
+  renderChart() {
+    const labels = Object.keys(this.props.data);
+    const data = Object.values(this.props.data);
+    const config = {
+      type: "doughnut",
+      data: {
+        datasets: [
+          {
+            data: data,
+            backgroundColor: ["#1f77b4", "#dddddd"],
+          },
+        ],
+        labels: labels,
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: 5,
+        },
+        plugins: {
+          title: {
+            display: true,
+            text: this.title,
+            padding: 4,
+          },
+        },
+      },
+    };
+    this.chart = new Chart(this.canvasRef.el, config);
+  }
+}
diff --git a/awesome_dashboard/static/src/pie-chart/pie-chart.xml b/awesome_dashboard/static/src/pie-chart/pie-chart.xml
new file mode 100644
index 00000000000..a3db9bc373d
--- /dev/null
+++ b/awesome_dashboard/static/src/pie-chart/pie-chart.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.pie_chart">
+        <div>
+            <canvas t-ref="canvas"/>
+            <span class="o_gauge_value position-absolute start-0 end-0 bottom-0 text-center">
+                Chart
+            </span>
+        </div>
+    </t>
+
+</templates>

From a9714047a4a3a83a69120149c7663c607532a839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Tue, 25 Aug 2026 10:54:29 +0200
Subject: [PATCH 18/22] [IMP] awesome_dashboard: C2-7

---
 .../awesome_dashboard/statistics_service.js   | 20 +++++++++++++------
 awesome_dashboard/static/src/dashboard.js     |  7 +++----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js b/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js
index 5fe6e643c8f..f26143de128 100644
--- a/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js
+++ b/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js
@@ -1,14 +1,22 @@
+import { reactive } from "@odoo/owl";
 import { rpc } from "@web/core/network/rpc";
-import { memoize } from "@web/core/utils/functions";
 import { registry } from "@web/core/registry";
 
 
 const statisticsService = {
-    start() {
-        return {
-            loadStatistics: memoize(() => rpc("/awesome_dashboard/statistics")),
-        };
-    },
+  start() {
+    const stats = reactive({});
+
+    async function loadStats() {
+      const stats_data = await rpc("/awesome_dashboard/statistics");
+      Object.assign(stats, stats_data);
+    }
+
+    loadStats();
+    setInterval(loadStats, 10000*60);
+
+    return stats;
+  },
 };
 
 registry.category("services").add("awesome_dashboard.statistics", statisticsService);
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 4212799f8cc..114972e3828 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,4 +1,4 @@
-import { Component, onWillStart } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
@@ -13,9 +13,8 @@ class AwesomeDashboard extends Component {
   setup() {
     this.action = useService("action");
     const statisticsService = useService("awesome_dashboard.statistics");
-    onWillStart(async () => {
-      this.result = await statisticsService.loadStatistics();
-    });
+
+    this.result = useState(statisticsService);
   }
 
   openPartnerForm() {

From 3d949f2362528ad122ffa5aa6a589023f345e4ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Tue, 25 Aug 2026 11:30:57 +0200
Subject: [PATCH 19/22] [IMP] awesome_dashboard: C2-8

---
 awesome_dashboard/__manifest__.py                    |  5 ++++-
 .../core/awesome_dashboard/statistics_service.js     |  0
 .../{ => dashboard}/dashboard-item/dashboard-item.js |  0
 .../dashboard-item/dashboard-item.xml                |  0
 .../dashboard-number-item/dashboard-number-item.js   |  0
 .../dashboard-number-item/dashboard-number-item.xml  |  0
 .../static/src/{ => dashboard}/dashboard.js          |  4 ++--
 .../static/src/{ => dashboard}/dashboard.scss        |  0
 .../static/src/{ => dashboard}/dashboard.xml         |  0
 .../src/{ => dashboard}/pie-chart/pie-chart.js       |  0
 .../src/{ => dashboard}/pie-chart/pie-chart.xml      |  0
 awesome_dashboard/static/src/dashboard_action.js     | 12 ++++++++++++
 12 files changed, 18 insertions(+), 3 deletions(-)
 rename awesome_dashboard/static/src/{ => dashboard}/core/awesome_dashboard/statistics_service.js (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}/dashboard-number-item/dashboard-number-item.js (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard-number-item/dashboard-number-item.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.js (91%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.scss (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/pie-chart/pie-chart.js (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/pie-chart/pie-chart.xml (100%)
 create mode 100644 awesome_dashboard/static/src/dashboard_action.js

diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index a1cd72893d7..ec653ae92dc 100644
--- a/awesome_dashboard/__manifest__.py
+++ b/awesome_dashboard/__manifest__.py
@@ -23,7 +23,10 @@
     ],
     'assets': {
         'web.assets_backend': [
-            'awesome_dashboard/static/src/**/*',
+            'awesome_dashboard/static/src/dashboard_action.js',
+        ],
+        'awesome_dashboard.dashboard_bundle': [
+            'awesome_dashboard/static/src/dashboard/**/*'
         ],
     },
     'license': 'AGPL-3'
diff --git a/awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js b/awesome_dashboard/static/src/dashboard/core/awesome_dashboard/statistics_service.js
similarity index 100%
rename from awesome_dashboard/static/src/core/awesome_dashboard/statistics_service.js
rename to awesome_dashboard/static/src/dashboard/core/awesome_dashboard/statistics_service.js
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/dashboard-number-item/dashboard-number-item.js b/awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.js
similarity index 100%
rename from awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.js
rename to awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.js
diff --git a/awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.xml b/awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard-number-item/dashboard-number-item.xml
rename to awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.xml
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
similarity index 91%
rename from awesome_dashboard/static/src/dashboard.js
rename to awesome_dashboard/static/src/dashboard/dashboard.js
index 114972e3828..df238d9d824 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -1,7 +1,7 @@
 import { Component, useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
-import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
+import { Layout } from "@web/search/layout";
 import { DashboardItem } from "./dashboard-item/dashboard-item";
 import { DashboardNumberItem } from "./dashboard-number-item/dashboard-number-item";
 import { PieChart } from "./pie-chart/pie-chart";
@@ -32,4 +32,4 @@ class AwesomeDashboard extends Component {
 
 }
 
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
+registry.category("lazy_components").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.scss b/awesome_dashboard/static/src/dashboard/dashboard.scss
similarity index 100%
rename from awesome_dashboard/static/src/dashboard.scss
rename to awesome_dashboard/static/src/dashboard/dashboard.scss
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/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/pie-chart/pie-chart.xml b/awesome_dashboard/static/src/dashboard/pie-chart/pie-chart.xml
similarity index 100%
rename from awesome_dashboard/static/src/pie-chart/pie-chart.xml
rename to awesome_dashboard/static/src/dashboard/pie-chart/pie-chart.xml
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js
new file mode 100644
index 00000000000..0e6ee71d0a8
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_action.js
@@ -0,0 +1,12 @@
+import { Component, xml } from "@odoo/owl";
+import { LazyComponent } from "@web/core/assets";
+import { registry } from "@web/core/registry";
+
+class AwesomeDashboardLazy extends Component {
+  static components = { LazyComponent };
+    static template = xml`
+    <LazyComponent bundle="'awesome_dashboard.dashboard_bundle'" Component="'awesome_dashboard.dashboard'" />
+    `;
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLazy);

From 96cc8fe29ab1c1b618a1a3b2f2fde7a1555e2b06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Tue, 25 Aug 2026 14:34:07 +0200
Subject: [PATCH 20/22] [IMP] awesome_dashboard: C2-9

---
 .../dashboard-number-item.js                  |  8 ---
 .../dashboard-number-item.xml                 | 13 ----
 .../static/src/dashboard/dashboard.js         |  9 +--
 .../static/src/dashboard/dashboard.xml        | 37 ++----------
 .../static/src/dashboard/dashboard_items.js   | 59 +++++++++++++++++++
 .../src/dashboard/number-card/number-card.js  |  8 +++
 .../src/dashboard/number-card/number-card.xml | 11 ++++
 .../pie-chart-card/pie-chart-card.js          |  9 +++
 .../pie-chart-card/pie-chart-card.xml         |  9 +++
 9 files changed, 107 insertions(+), 56 deletions(-)
 delete mode 100644 awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.js
 delete mode 100644 awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.xml
 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
 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-number-item/dashboard-number-item.js b/awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.js
deleted file mode 100644
index 935a970913d..00000000000
--- a/awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from "@odoo/owl";
-import { DashboardItem } from "../dashboard-item/dashboard-item";
-
-export class DashboardNumberItem extends Component {
-  static template = "awesome_dashboard.dashboard_number_item";
-  static props = ['description', 'number'];
-  static components = { DashboardItem };
-}
diff --git a/awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.xml b/awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.xml
deleted file mode 100644
index 586dfd01bd1..00000000000
--- a/awesome_dashboard/static/src/dashboard/dashboard-number-item/dashboard-number-item.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates xml:space="preserve">
-
-    <t t-name="awesome_dashboard.dashboard_number_item">
-        <DashboardItem>
-            <center>
-                <h5><t t-esc="props.description"/></h5>
-                <h3><t t-esc="props.number"/></h3>
-            </center>
-        </DashboardItem>
-    </t>
-
-</templates>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index df238d9d824..f5bc2507e5d 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -3,18 +3,19 @@ import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { Layout } from "@web/search/layout";
 import { DashboardItem } from "./dashboard-item/dashboard-item";
-import { DashboardNumberItem } from "./dashboard-number-item/dashboard-number-item";
-import { PieChart } from "./pie-chart/pie-chart";
+import { items } from "./dashboard_items";
 
 class AwesomeDashboard extends Component {
   static template = "awesome_dashboard.AwesomeDashboard";
-  static components = { Layout, DashboardItem, DashboardNumberItem, PieChart };
+  static components = { Layout, DashboardItem, items };
 
   setup() {
     this.action = useService("action");
     const statisticsService = useService("awesome_dashboard.statistics");
 
-    this.result = useState(statisticsService);
+    this.statistics = useState(statisticsService);
+
+    this.items = items
   }
 
   openPartnerForm() {
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
index 1c2f4f51342..1fd2f4c12e2 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard.xml
@@ -7,37 +7,12 @@
                 <button t-on-click="openPartnerForm" type="button" class="btn btn-primary" title="Customers">Customers</button>
                 <button t-on-click="openLeads" type="button" class="btn btn-primary" title="Leads">Leads</button>
             </t>
-            <DashboardItem>
-                hi !
-            </DashboardItem>
-            <DashboardItem size="2">
-                hi but bigger ?
-            </DashboardItem>
-
-            <DashboardNumberItem
-                description="'Number of new orders this month'"
-                number="result.nb_new_orders"
-            />
-            <DashboardNumberItem
-                description="'Total amount of new orders this month'"
-                number="result.total_amount"
-            />
-            <DashboardNumberItem
-                description="'Average amount of t-shirt by order this month'"
-                number="result.average_quantity"
-            />
-            <DashboardNumberItem
-                description="'Number of cancelled orders this month'"
-                number="result.nb_cancelled_orders"
-            />
-            <DashboardNumberItem
-                description="'Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’'"
-                number="result.average_time"
-            />
-
-            <DashboardItem>
-                <PieChart data="result.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(statistics) : {'data': statistics}"/>
+                  <t t-component="item.Component" t-props="itemProp" />
+               </DashboardItem>
+            </t>
         </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..d06cf001a42
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -0,0 +1,59 @@
+import { NumberCard } from "./number-card/number-card";
+import { PieChartCard } from "./pie-chart-card/pie-chart-card";
+
+export const items = [
+  {
+    id: "nb_new_orders",
+    description: "Number of new orders this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Number of new orders this month",
+      value: data.nb_new_orders,
+    }),
+  },
+  {
+    id: "total_amount",
+    description: "Total amount of new orders this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Total amount of new orders this month",
+      value: data.total_amount,
+    }),
+  },
+  {
+    id: "average_quantity",
+    description: "Average amount of t-shirt by order this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Average amount of t-shirt by order this month",
+      value: data.average_quantity,
+    }),
+  },
+  {
+    id: "nb_cancelled_orders",
+    description: "Number of cancelled orders this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Number of cancelled orders this month",
+      value: data.nb_cancelled_orders,
+    }),
+  },
+  {
+    id: "average_time",
+    description: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+      value: data.average_time,
+    }),
+  },
+  {
+    id: "orders_by_size",
+    description: "Orders by size",
+    Component: PieChartCard,
+    props: (data) => ({
+      title: "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..f586334528e
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/number-card/number-card.js
@@ -0,0 +1,8 @@
+import { Component } from "@odoo/owl";
+import { DashboardItem } from "../dashboard-item/dashboard-item";
+
+export class NumberCard extends Component {
+  static template = "awesome_dashboard.number_card";
+  static props = ['title', 'value'];
+  static components = { DashboardItem };
+}
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..0efb0a51475
--- /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.number_card">
+        <center>
+            <h5><t t-esc="props.title"/></h5>
+            <h3><t t-esc="props.value"/></h3>
+        </center>
+    </t>
+
+</templates>
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..fe2ae29ff8c
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie-chart-card/pie-chart-card.js
@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+import { DashboardItem } from "../dashboard-item/dashboard-item";
+import { PieChart } from "../pie-chart/pie-chart";
+
+export class PieChartCard extends Component {
+  static template = "awesome_dashboard.pie_chart_card";
+  static props = ['title', 'data'];
+  static components = { DashboardItem, PieChart };
+}
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..f56f1d0f746
--- /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.pie_chart_card">
+        <h5><t t-esc="props.title"/></h5>
+        <PieChart data="props.data"/>
+    </t>
+
+</templates>

From ddd4cab9491015b61eae448254846c71af835ea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Tue, 25 Aug 2026 14:46:30 +0200
Subject: [PATCH 21/22] [IMP] awesome_dashboard: C2-10

---
 awesome_dashboard/static/src/dashboard/dashboard.js       | 5 ++---
 awesome_dashboard/static/src/dashboard/dashboard_items.js | 7 ++++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index f5bc2507e5d..aeac7f81c31 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -3,11 +3,10 @@ import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { Layout } from "@web/search/layout";
 import { DashboardItem } from "./dashboard-item/dashboard-item";
-import { items } from "./dashboard_items";
 
 class AwesomeDashboard extends Component {
   static template = "awesome_dashboard.AwesomeDashboard";
-  static components = { Layout, DashboardItem, items };
+  static components = { Layout, DashboardItem };
 
   setup() {
     this.action = useService("action");
@@ -15,7 +14,7 @@ class AwesomeDashboard extends Component {
 
     this.statistics = useState(statisticsService);
 
-    this.items = items
+    this.items = registry.category("awesome_dashboard").getAll();
   }
 
   openPartnerForm() {
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
index d06cf001a42..cd33aec087f 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_items.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -1,7 +1,8 @@
 import { NumberCard } from "./number-card/number-card";
 import { PieChartCard } from "./pie-chart-card/pie-chart-card";
+import { registry } from "@web/core/registry";
 
-export const items = [
+const items = [
   {
     id: "nb_new_orders",
     description: "Number of new orders this month",
@@ -57,3 +58,7 @@ export const items = [
     }),
   },
 ];
+
+for (const item of items) {
+  registry.category("awesome_dashboard").add("awesome_dashboard." + item.id, item);
+}

From 94f5cad952988d6c931c43965176f6b3d47fd308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9licien=20=28feraz=29?= <feraz@odoo.com>
Date: Tue, 25 Aug 2026 17:26:43 +0200
Subject: [PATCH 22/22] [IMP] awesome_dashboard: C2-11

---
 .../static/src/dashboard/dashboard.js         | 22 ++++++++++-
 .../static/src/dashboard/dashboard.xml        |  7 +++-
 .../settings-dialog/settings-dialog.js        | 38 +++++++++++++++++++
 .../settings-dialog/settings-dialog.xml       | 20 ++++++++++
 .../static/src/dashboard_action.js            |  3 +-
 5 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.js
 create mode 100644 awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.xml

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index aeac7f81c31..241b9a99964 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -3,18 +3,34 @@ import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { Layout } from "@web/search/layout";
 import { DashboardItem } from "./dashboard-item/dashboard-item";
+import { SettingsDialog } from "./settings-dialog/settings-dialog";
 
 class AwesomeDashboard extends Component {
   static template = "awesome_dashboard.AwesomeDashboard";
   static components = { Layout, DashboardItem };
+  static props = [];
 
   setup() {
     this.action = useService("action");
     const statisticsService = useService("awesome_dashboard.statistics");
+    this.dialog = useService('dialog');
 
     this.statistics = useState(statisticsService);
 
-    this.items = registry.category("awesome_dashboard").getAll();
+    this.state = useState({ items: this.getDisplayedItems() });
+
+  }
+
+  getDisplayedItems() {
+    const filtered_item_ids = localStorage.getItem("awesome_dashboard.displayed_items") ?? [];
+    return registry
+      .category("awesome_dashboard")
+      .getAll()
+      .filter((item) => !filtered_item_ids.includes(item.id));
+  }
+
+  reloadDashboard() {
+    this.state.items = this.getDisplayedItems();
   }
 
   openPartnerForm() {
@@ -30,6 +46,10 @@ class AwesomeDashboard extends Component {
     });
   }
 
+  openSettingsDialog() {
+    this.dialog.add(SettingsDialog, {}, { onClose: () => this.reloadDashboard() });
+  }
+
 }
 
 registry.category("lazy_components").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
index 1fd2f4c12e2..fcae74453a7 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard.xml
@@ -7,7 +7,12 @@
                 <button t-on-click="openPartnerForm" type="button" class="btn btn-primary" title="Customers">Customers</button>
                 <button t-on-click="openLeads" type="button" class="btn btn-primary" title="Leads">Leads</button>
             </t>
-            <t t-foreach="items" t-as="item" t-key="item.id">
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="btn" t-on-click="openSettingsDialog" title="Settings">
+                    <i class="fa fa-cog"/>
+                </button>
+            </t>
+            <t t-foreach="state.items" t-as="item" t-key="item.id">
                <DashboardItem size="item.size || 1">
                   <t t-set="itemProp" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
                   <t t-component="item.Component" t-props="itemProp" />
diff --git a/awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.js b/awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.js
new file mode 100644
index 00000000000..f5d78d25628
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.js
@@ -0,0 +1,38 @@
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog"
+import { registry } from "@web/core/registry";
+
+
+export class SettingsDialog extends Component {
+  static template = "awesome_dashboard.settings_dialog";
+  static props = ['close'];
+  static components = { Dialog };
+
+  setup() {
+    this.state = useState({ items: {} });
+
+    const items = registry.category("awesome_dashboard").getAll();
+
+    const filtered_ids = localStorage.getItem("awesome_dashboard.displayed_items") ?? [];
+
+    for (var i of items) {
+      this.state.items[i.id] = { display: !filtered_ids.includes(i.id), description: i.description };
+    }
+    this.toggleDisplay = this.toggleDisplay.bind(this);
+    this.onSave = this.onSave.bind(this);
+  }
+
+  toggleDisplay(id) {
+    this.state.items[id].display = !this.state.items[id].display;
+  }
+
+  onSave() {
+    const filtered_ids = Object.entries(this.state.items)
+      .filter(([id, item]) => !item.display)
+      .map(([id]) => id);
+
+    localStorage.setItem("awesome_dashboard.displayed_items", filtered_ids)
+    this.props.close();
+  }
+
+}
diff --git a/awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.xml b/awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.xml
new file mode 100644
index 00000000000..738377acfd6
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.settings_dialog">
+        <Dialog title="'Dashboard items configuration'">
+            <t t-foreach="Object.entries(state.items)" t-as="entry" t-key="entry[0]">
+                <input
+                    type="checkbox"
+                    t-att-checked="entry[1].display"
+                    t-on-change="() => this.toggleDisplay(entry[0])"/>
+                <t t-esc="entry[1].description"/>
+                <br/>
+            </t>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onSave">Done</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js
index 0e6ee71d0a8..3d7d553d247 100644
--- a/awesome_dashboard/static/src/dashboard_action.js
+++ b/awesome_dashboard/static/src/dashboard_action.js
@@ -4,9 +4,10 @@ import { registry } from "@web/core/registry";
 
 class AwesomeDashboardLazy extends Component {
   static components = { LazyComponent };
-    static template = xml`
+  static template = xml`
     <LazyComponent bundle="'awesome_dashboard.dashboard_bundle'" Component="'awesome_dashboard.dashboard'" />
     `;
+  static props = ['*'];
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLazy);