From d3e64a855ed46e7331cff9ff551f4d7a5ab4e936 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 09:41:25 +0200
Subject: [PATCH 01/20] [ADD] awesome_owl: Made Playground a counter

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

diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 657fb8b07bb..e48f10f9794 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,7 +1,15 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+
+    setup() {
+        this.state = useState({value : 0});
+    }
+
+    increment() {
+        this.state.value++;
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..ae2e6e17ab1 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -3,7 +3,8 @@
 
     <t t-name="awesome_owl.playground">
         <div class="p-3">
-            hello world
+            <p>Counter: <t t-esc="state.value"></t></p>
+            <button t-on-click="increment">+1</button>
         </div>
     </t>
 

From 0dd1fe8ef80be8301fe4ce609fd86d0a8703aafd Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 09:51:11 +0200
Subject: [PATCH 02/20] [ADD] awesome_owl: Added Counter component

---
 awesome_owl/static/src/counter/counter.js  | 15 +++++++++++++++
 awesome_owl/static/src/counter/counter.xml | 11 +++++++++++
 awesome_owl/static/src/playground.js       | 12 +++---------
 awesome_owl/static/src/playground.xml      |  4 ++--
 4 files changed, 31 insertions(+), 11 deletions(-)
 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/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 00000000000..53c7e8d3619
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,15 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+
+    setup() {
+        this.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..af2971b8968
--- /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-3">
+            <p>Counter: <t t-esc="state.value"></t></p>
+            <button 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 e48f10f9794..a95101cb9d3 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,15 +1,9 @@
 /** @odoo-module **/
 
-import { Component, useState } from "@odoo/owl";
+import { Component } from "@odoo/owl";
+import { Counter } from "./counter/counter.js";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-
-    setup() {
-        this.state = useState({value : 0});
-    }
-
-    increment() {
-        this.state.value++;
-    }
+    static components = { Counter };
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index ae2e6e17ab1..f040e7079d0 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -3,8 +3,8 @@
 
     <t t-name="awesome_owl.playground">
         <div class="p-3">
-            <p>Counter: <t t-esc="state.value"></t></p>
-            <button t-on-click="increment">+1</button>
+            <Counter/>
+            <Counter/>
         </div>
     </t>
 

From 967816bffe018be3e63343e301b7a833debec82c Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 10:46:28 +0200
Subject: [PATCH 03/20] [ADD] awesome_owl: Added Card component

---
 awesome_owl/static/src/card/card.js   | 12 ++++++++++++
 awesome_owl/static/src/card/card.xml  | 11 +++++++++++
 awesome_owl/static/src/playground.js  |  3 ++-
 awesome_owl/static/src/playground.xml |  4 ++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 awesome_owl/static/src/card/card.js
 create mode 100644 awesome_owl/static/src/card/card.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..7dd77ca46ab
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static defaultProps = {
+        title: "My card",
+        text: "Lorem ipsum",
+    };
+
+}
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..8d5c6a0e523
--- /dev/null
+++ b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.card">
+        <div class="p-3 border">
+            <h3><t t-esc="props.title"/></h3>
+            <t t-esc="props.text"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index a95101cb9d3..dce5c61a28d 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -2,8 +2,9 @@
 
 import { Component } from "@odoo/owl";
 import { Counter } from "./counter/counter.js";
+import { Card } from "./card/card.js";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter };
+    static components = { Counter, Card };
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index f040e7079d0..7dfcac8241a 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -6,6 +6,10 @@
             <Counter/>
             <Counter/>
         </div>
+        <div class="p-3">
+            <Card title="'Hello'" text="'Hello world'"/>
+            <Card title="'Goodbye'" text="'Goodbye world'"/>
+        </div>
     </t>
 
 </templates>

From c7cd317bcfa117e300ffca0a09484956e4efa318 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 11:01:29 +0200
Subject: [PATCH 04/20] [ADD] awesome_owl: Made card fields markupable

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

diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 8d5c6a0e523..b9b17466d5c 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -3,8 +3,8 @@
 
     <t t-name="awesome_owl.card">
         <div class="p-3 border">
-            <h3><t t-esc="props.title"/></h3>
-            <t t-esc="props.text"/>
+            <h3><t t-out="props.title"/></h3>
+            <t t-out="props.text"/>
         </div>
     </t>
 
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index dce5c61a28d..078d431cc9b 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,10 +1,16 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, markup } from "@odoo/owl";
 import { Counter } from "./counter/counter.js";
 import { Card } from "./card/card.js";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
     static components = { Counter, Card };
+
+    raw_card_title = "<u>Hello</u>";
+    raw_card_text = "<u>World</u>";
+
+    card_title = markup(this.raw_card_title);
+    card_text = markup(this.raw_card_text);
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 7dfcac8241a..ff94fc06a08 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -7,8 +7,8 @@
             <Counter/>
         </div>
         <div class="p-3">
-            <Card title="'Hello'" text="'Hello world'"/>
-            <Card title="'Goodbye'" text="'Goodbye world'"/>
+            <Card title="raw_card_title" text="raw_card_text"/>
+            <Card title="card_title" text="card_text"/>
         </div>
     </t>
 

From 50a34fe21a1da624ce429ecaf4147e35a553aa8b Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 11:17:04 +0200
Subject: [PATCH 05/20] [ADD] awesome_owl: Added props validation on Card
 component

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

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 7dd77ca46ab..a383e006c0d 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -4,9 +4,9 @@ import { Component } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
-    static defaultProps = {
-        title: "My card",
-        text: "Lorem ipsum",
+    static props = {
+        title: String,
+        text: String
     };
 
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index ff94fc06a08..e6682659470 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -9,6 +9,7 @@
         <div class="p-3">
             <Card title="raw_card_title" text="raw_card_text"/>
             <Card title="card_title" text="card_text"/>
+            <Card titl="card_title" text="card_text"/>  <!-- Will create an error -->
         </div>
     </t>
 

From 96adfed0ba3e34d5fdfd42ca55b00f1dece662f9 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 11:18:00 +0200
Subject: [PATCH 06/20] [FIX] awesome_owl: Removed the invalid Card

---
 awesome_owl/static/src/playground.xml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index e6682659470..ff94fc06a08 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -9,7 +9,6 @@
         <div class="p-3">
             <Card title="raw_card_title" text="raw_card_text"/>
             <Card title="card_title" text="card_text"/>
-            <Card titl="card_title" text="card_text"/>  <!-- Will create an error -->
         </div>
     </t>
 

From b7bd6eecdcb131a6ef8264de4c3e68e7a211cb34 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 11:37:29 +0200
Subject: [PATCH 07/20] [ADD] awesome_owl: Added a sum of counters

---
 awesome_owl/static/src/counter/counter.js |  4 ++++
 awesome_owl/static/src/playground.js      | 10 +++++++++-
 awesome_owl/static/src/playground.xml     |  8 +++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index 53c7e8d3619..09cd2389032 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -4,6 +4,9 @@ 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});
@@ -11,5 +14,6 @@ export class Counter extends Component {
 
     increment() {
         this.state.value++;
+        this.props.onChange();
     }
 }
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 078d431cc9b..7f5245c8a2c 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Component, markup } from "@odoo/owl";
+import { Component, markup, useState } from "@odoo/owl";
 import { Counter } from "./counter/counter.js";
 import { Card } from "./card/card.js";
 
@@ -13,4 +13,12 @@ export class Playground extends Component {
 
     card_title = markup(this.raw_card_title);
     card_text = markup(this.raw_card_text);
+
+    setup() {
+        this.state = useState({counter_sum: 2});
+    }
+
+    incrementSum() {
+        this.state.counter_sum++;
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index ff94fc06a08..b474583f178 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -2,11 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            <Counter/>
-            <Counter/>
+        <div class="p-3 border">
+            <h2>Sum: <t t-esc="state.counter_sum"/></h2>
+            <Counter onChange.bind="incrementSum"/>
+            <Counter onChange.bind="incrementSum"/>
         </div>
         <div class="p-3">
+            <Counter/>
             <Card title="raw_card_title" text="raw_card_text"/>
             <Card title="card_title" text="card_text"/>
         </div>

From 13e6dd1645d6785cd1d21c90dd4f8803b2555f80 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 14:23:13 +0200
Subject: [PATCH 08/20] [ADD] awesome_owl: Added Todo list

---
 awesome_owl/static/src/playground.js      |  3 ++-
 awesome_owl/static/src/playground.xml     |  3 +++
 awesome_owl/static/src/todo/todo_item.js  | 17 +++++++++++++++++
 awesome_owl/static/src/todo/todo_item.xml | 10 ++++++++++
 awesome_owl/static/src/todo/todo_list.js  | 16 ++++++++++++++++
 awesome_owl/static/src/todo/todo_list.xml | 12 ++++++++++++
 6 files changed, 60 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 7f5245c8a2c..6112f5dd1da 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -3,10 +3,11 @@
 import { Component, markup, useState } from "@odoo/owl";
 import { Counter } from "./counter/counter.js";
 import { Card } from "./card/card.js";
+import { TodoList } from "./todo/todo_list.js";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter, Card };
+    static components = { Counter, Card, TodoList };
 
     raw_card_title = "<u>Hello</u>";
     raw_card_text = "<u>World</u>";
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index b474583f178..179f7e26a46 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -12,6 +12,9 @@
             <Card title="raw_card_title" text="raw_card_text"/>
             <Card title="card_title" text="card_text"/>
         </div>
+        <div>
+            <TodoList/>
+        </div>
     </t>
 
 </templates>
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..7fa589b3baf
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -0,0 +1,17 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+    static props = {
+        todo: {
+            type: Object,
+            shape: {
+                id: Number,
+                description: String,
+                isCompleted: Boolean
+            }
+        }
+    };
+}
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..fe603471e17
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todo_item">
+        <div class="p-3">
+            <t t-esc="props.todo.id"/>. <t t-esc="props.todo.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..c6d18275a31
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todo_item.js";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = { TodoItem };
+
+    setup() {
+        this.todos = useState([
+            { id: 1, description: "Hello world", isCompleted: true },
+            { id: 2, description: "Find out", 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..1100f8d5649
--- /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-3">
+            <t t-foreach="todos" t-as="todo" t-key="todo.id">
+                <TodoItem todo="todo"/>
+            </t>
+        </div>
+    </t>
+
+</templates>

From fa2bec9d9d07cf5e0b6a81bcb4b7ee9caf4e5319 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 14:34:52 +0200
Subject: [PATCH 09/20] [ADD] awesome_owl: Displayed completed todo items

---
 awesome_owl/static/src/todo/todo_item.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
index fe603471e17..042842748d5 100644
--- a/awesome_owl/static/src/todo/todo_item.xml
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_item">
-        <div class="p-3">
+        <div t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}"> 
             <t t-esc="props.todo.id"/>. <t t-esc="props.todo.description"/>
         </div>
     </t>

From ab3a537022b461085d13cd3a4359332f012b7b1e Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 23 May 2025 14:51:38 +0200
Subject: [PATCH 10/20] [ADD] awesome_owl: Added todo input

---
 awesome_owl/static/src/todo/todo_list.js  | 23 +++++++++++++++++++----
 awesome_owl/static/src/todo/todo_list.xml |  1 +
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index c6d18275a31..d5693adbc88 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -7,10 +7,25 @@ export class TodoList extends Component {
     static template = "awesome_owl.todo_list";
     static components = { TodoItem };
 
+    lastId = 1;
+
     setup() {
-        this.todos = useState([
-            { id: 1, description: "Hello world", isCompleted: true },
-            { id: 2, description: "Find out", isCompleted: false }
-        ]);
+        this.todos = useState([]);
+    }
+
+    addTodo(event) {
+        const enterKeycode = 13;
+        if(event.keyCode !== enterKeycode || event.target.value == '') {
+            return;
+        }
+
+        let newTodo = {
+            id: this.lastId++,
+            description: event.target.value,
+            isCompleted: false
+        };
+
+        this.todos.push(newTodo);
+        event.target.value = '';
     }
 }
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index 1100f8d5649..bd78f11e59e 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -2,6 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_list">
+        <input type="text" class="form-control" placeholder="Enter a new task" t-on-keyup="addTodo"/>
         <div class="p-3">
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
                 <TodoItem todo="todo"/>

From c151c0a90c18d70ec97610f8891cca7d4dc38b2e Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Mon, 26 May 2025 11:46:17 +0200
Subject: [PATCH 11/20] [ADD] awesome_owl: Auto focused the todolist input

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

diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index d5693adbc88..e0a8fe999de 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
 import { TodoItem } from "./todo_item.js";
 
 export class TodoList extends Component {
@@ -11,6 +11,10 @@ export class TodoList extends Component {
 
     setup() {
         this.todos = useState([]);
+        this.inputRef = useRef("todo_input");
+        onMounted(() => {
+            this.inputRef.el.focus();
+        });
     }
 
     addTodo(event) {
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index bd78f11e59e..c2e8ef5091f 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_list">
-        <input type="text" class="form-control" placeholder="Enter a new task" t-on-keyup="addTodo"/>
+        <input t-ref="todo_input" type="text" class="form-control" placeholder="Enter a new task" t-on-keyup="addTodo"/>
         <div class="p-3">
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
                 <TodoItem todo="todo"/>

From 1fc2fd2edf4cebed6043a3baf77cb78a1bd1ef1b Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Mon, 26 May 2025 14:27:30 +0200
Subject: [PATCH 12/20] [ADD] awesome_owl: Added completion checkbox to todos

---
 awesome_owl/static/src/todo/todo_item.js  | 4 ++++
 awesome_owl/static/src/todo/todo_item.xml | 1 +
 2 files changed, 5 insertions(+)

diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
index 7fa589b3baf..56b038268b5 100644
--- a/awesome_owl/static/src/todo/todo_item.js
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -14,4 +14,8 @@ export class TodoItem extends Component {
             }
         }
     };
+
+    toggleState() {
+        this.props.todo.isCompleted = !this.props.todo.isCompleted;
+    }
 }
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
index 042842748d5..9204748f43f 100644
--- a/awesome_owl/static/src/todo/todo_item.xml
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -2,6 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_item">
+        <input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-change="toggleState"/>
         <div t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}"> 
             <t t-esc="props.todo.id"/>. <t t-esc="props.todo.description"/>
         </div>

From 883657b8749a5d4de1c227e481b5cd95b65f6d25 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Tue, 27 May 2025 21:10:08 +0200
Subject: [PATCH 13/20] [ADD] awesome_owl: Added remove button to todo items

---
 awesome_owl/static/src/todo/todo_item.js  | 8 +++++++-
 awesome_owl/static/src/todo/todo_item.xml | 3 ++-
 awesome_owl/static/src/todo/todo_list.js  | 7 +++++++
 awesome_owl/static/src/todo/todo_list.xml | 2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
index 56b038268b5..bbddbd50d84 100644
--- a/awesome_owl/static/src/todo/todo_item.js
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -12,10 +12,16 @@ export class TodoItem extends Component {
                 description: String,
                 isCompleted: Boolean
             }
-        }
+        },
+        removeFromList: Function
     };
 
     toggleState() {
         this.props.todo.isCompleted = !this.props.todo.isCompleted;
     }
+
+    removeTodo() {
+        let todoId = this.props.todo.id;
+        this.props.removeFromList(todoId);
+    }
 }
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
index 9204748f43f..4f933415c2a 100644
--- a/awesome_owl/static/src/todo/todo_item.xml
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -2,9 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_item">
-        <input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-change="toggleState"/>
         <div t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}"> 
+            <input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-change="toggleState"/>
             <t t-esc="props.todo.id"/>. <t t-esc="props.todo.description"/>
+            <span class="fa fa-remove" t-on-click="removeTodo"/>
         </div>
     </t>
 
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index e0a8fe999de..ccf769d1955 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -32,4 +32,11 @@ export class TodoList extends Component {
         this.todos.push(newTodo);
         event.target.value = '';
     }
+
+    removeFromList(todoId) {
+        let index = this.todos.findIndex(todo => todo.id === todoId);
+        if(index > -1) {
+            this.todos.splice(index, 1);
+        }
+    }
 }
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index c2e8ef5091f..7f64e5d262a 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -5,7 +5,7 @@
         <input t-ref="todo_input" type="text" class="form-control" placeholder="Enter a new task" t-on-keyup="addTodo"/>
         <div class="p-3">
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
-                <TodoItem todo="todo"/>
+                <TodoItem todo="todo" removeFromList.bind="removeFromList"/>
             </t>
         </div>
     </t>

From 5127c6018a922544764bb36322c2880e369d26a0 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Tue, 27 May 2025 23:17:31 +0200
Subject: [PATCH 14/20] [ADD] awesome_owl: Added card slots

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

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index a383e006c0d..74e5f3c740f 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -6,7 +6,12 @@ export class Card extends Component {
     static template = "awesome_owl.card";
     static props = {
         title: String,
-        text: String
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            }
+        }
     };
 
 }
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index b9b17466d5c..0bd77f4a3da 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -4,7 +4,7 @@
     <t t-name="awesome_owl.card">
         <div class="p-3 border">
             <h3><t t-out="props.title"/></h3>
-            <t t-out="props.text"/>
+            <t t-slot="default"/>
         </div>
     </t>
 
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 179f7e26a46..ba9f4905580 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -9,8 +9,12 @@
         </div>
         <div class="p-3">
             <Counter/>
-            <Card title="raw_card_title" text="raw_card_text"/>
-            <Card title="card_title" text="card_text"/>
+            <Card title="raw_card_title">
+                <Counter/>
+            </Card>
+            <Card title="card_title">
+                <p>Lorem ipsum</p>
+            </Card>
         </div>
         <div>
             <TodoList/>

From 637889ed208b31b9084d69165139f59de9768891 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Tue, 27 May 2025 23:19:08 +0200
Subject: [PATCH 15/20] [FIX] awesome_owl: Fixed error when counter doesnt have
 a onChange attribute

---
 awesome_owl/static/src/counter/counter.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index 09cd2389032..5ef958c236b 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -14,6 +14,8 @@ export class Counter extends Component {
 
     increment() {
         this.state.value++;
-        this.props.onChange();
+        if(this.props.onChange) {
+            this.props.onChange();
+        }
     }
 }

From 160427b09438ae0be18de9d9551b62e7c8915e48 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Wed, 28 May 2025 15:25:53 +0200
Subject: [PATCH 16/20] [ADD] awesome_owl: Added Toggle button to cards

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

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 74e5f3c740f..3d829f98bdc 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
@@ -14,4 +14,12 @@ export class Card extends Component {
         }
     };
 
+    setup() {
+        this.state = useState({displayed: false});
+    }
+
+    toggleDisplay() {
+        this.state.displayed = !this.state.displayed;
+    }
+
 }
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 0bd77f4a3da..f835073e546 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -3,8 +3,8 @@
 
     <t t-name="awesome_owl.card">
         <div class="p-3 border">
-            <h3><t t-out="props.title"/></h3>
-            <t t-slot="default"/>
+            <h3><t t-out="props.title"/><button t-on-click="toggleDisplay">Toggle</button></h3>
+            <t t-if="state.displayed" t-slot="default"/>
         </div>
     </t>
 

From 027240c24b70ceea261362580c450e8a965532b6 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Wed, 28 May 2025 17:36:04 +0200
Subject: [PATCH 17/20] [ADD] awesome_dashboard: Added Layout to dashboard

---
 awesome_dashboard/static/src/dashboard.js   | 8 ++++++++
 awesome_dashboard/static/src/dashboard.scss | 3 +++
 awesome_dashboard/static/src/dashboard.xml  | 3 ++-
 3 files changed, 13 insertions(+), 1 deletion(-)
 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 637fa4bb972..d08bacb4ec5 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -2,9 +2,17 @@
 
 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 components = { Layout };
+
+    setup() {
+        this.display = {
+            controlPanel: {}
+        };
+    }
 }
 
 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..e82d541295d
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+  background-color: grey;
+}
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 1a2ac9a2fed..4c69bfc5e65 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -2,7 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout display="display" className="'o_dashboard h-100'">
+        </Layout>
     </t>
 
 </templates>

From da6d58ef92b1c9e0a8c549b6f39e66102081bb42 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 30 May 2025 09:46:38 +0200
Subject: [PATCH 18/20] [ADD] awesome_dashboard: Added Customer and Lead
 buttons to dashboard

---
 awesome_dashboard/static/src/dashboard.js  | 18 ++++++++++++++++++
 awesome_dashboard/static/src/dashboard.xml |  2 ++
 2 files changed, 20 insertions(+)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index d08bacb4ec5..83a0625445b 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -3,6 +3,7 @@
 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";
@@ -12,6 +13,23 @@ class AwesomeDashboard extends Component {
         this.display = {
             controlPanel: {}
         };
+        this.action = useService("action");
+    }
+
+    openCustomerView() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    openLeadView() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: "Leads",
+            res_model: "crm.lead",
+            views: [
+                [false, "list"],
+                [false, "form"]
+            ]
+        });
     }
 }
 
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 4c69bfc5e65..e05092e0cef 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -3,6 +3,8 @@
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
         <Layout display="display" className="'o_dashboard h-100'">
+            <button t-on-click="openCustomerView">Customers</button>
+            <button t-on-click="openLeadView">Leads</button>
         </Layout>
     </t>
 

From f9c56c2b437201f3cf7cc3ee2d6b96cc5bbb9b75 Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 30 May 2025 11:18:42 +0200
Subject: [PATCH 19/20] [ADD] awesome_dashboard: Added DashboardItem

---
 awesome_dashboard/static/src/dashboard.js      |  3 ++-
 awesome_dashboard/static/src/dashboard.xml     | 11 +++++++++++
 .../src/dashboard_item/dashboard_item.js       | 18 ++++++++++++++++++
 .../src/dashboard_item/dashboard_item.xml      |  8 ++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)
 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.js b/awesome_dashboard/static/src/dashboard.js
index 83a0625445b..2ff9d06d00d 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -4,10 +4,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.js";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout };
+    static components = { Layout, DashboardItem };
 
     setup() {
         this.display = {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index e05092e0cef..4543d7f1c0b 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -5,6 +5,17 @@
         <Layout display="display" className="'o_dashboard h-100'">
             <button t-on-click="openCustomerView">Customers</button>
             <button t-on-click="openLeadView">Leads</button>
+            <div class="d-flex flex-warp">
+                <DashboardItem>
+                    Hello world
+                </DashboardItem>
+                <DashboardItem size="1.5">
+                    HELLO WORLD
+                </DashboardItem>
+                <DashboardItem>
+                    Test
+                </DashboardItem>
+            </div>
         </Layout>
     </t>
 
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..a684a566d2a
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.js
@@ -0,0 +1,18 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.DashboardItem";
+    static props = {
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            }
+        },
+        size: {
+            type: Number,
+            default: 1,
+            optional: true
+        }
+    }
+}
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..87b4ea394b8
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardItem">
+        <div class="border" t-attf-style="width: {{18*props.size}}rem;">
+            <t t-slot="default"/>
+        </div>
+    </t>
+</templates>

From 8f94a9e9ca76857b279b00ab579a6be2b76cb35e Mon Sep 17 00:00:00 2001
From: Backendt <matisse.beckandt@proton.me>
Date: Fri, 30 May 2025 16:35:20 +0200
Subject: [PATCH 20/20] [ADD] awesome_dashboard: Added statistics

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

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 2ff9d06d00d..b4360779cbe 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,10 +1,11 @@
 /** @odoo-module **/
 
-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 { DashboardItem } from "./dashboard_item/dashboard_item.js";
+import { rpc } from "@web/core/network/rpc";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
@@ -15,6 +16,10 @@ class AwesomeDashboard extends Component {
             controlPanel: {}
         };
         this.action = useService("action");
+
+        onWillStart(async () => {
+            this.statistics = await rpc("/awesome_dashboard/statistics");
+        });
     }
 
     openCustomerView() {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 4543d7f1c0b..ebbd439dc77 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -7,13 +7,24 @@
             <button t-on-click="openLeadView">Leads</button>
             <div class="d-flex flex-warp">
                 <DashboardItem>
-                    Hello world
+                    <p>New orders this month</p>
+                    <t t-esc="statistics.nb_new_orders"/>
                 </DashboardItem>
                 <DashboardItem size="1.5">
-                    HELLO WORLD
+                    <p>Total new orders</p>
+                    <t t-esc="statistics.total_amount"/>
                 </DashboardItem>
                 <DashboardItem>
-                    Test
+                    <p>Average monthly orders</p>
+                    <t t-esc="statistics.average_quantity"/>
+                </DashboardItem>
+                <DashboardItem>
+                    <p>Orders cancelled this month</p>
+                    <t t-esc="statistics.nb_cancelled_orders"/>
+                </DashboardItem>
+                <DashboardItem>
+                    <p>Average order processing time</p>
+                    <t t-esc="statistics.average_time"/>
                 </DashboardItem>
             </div>
         </Layout>