From 19a88829b514d0fab7e37f7751ba9728fd5c4c4e Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Tue, 29 Apr 2025 17:13:57 +0200
Subject: [PATCH 01/13] [IMP] awesome_owl: add counter component as sub
 component to playground

---
 awesome_owl/static/src/counter.js     | 15 +++++++++++++++
 awesome_owl/static/src/counter.xml    | 12 ++++++++++++
 awesome_owl/static/src/playground.js  |  6 ++++--
 awesome_owl/static/src/playground.xml |  7 +++----
 4 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 awesome_owl/static/src/counter.js
 create mode 100644 awesome_owl/static/src/counter.xml

diff --git a/awesome_owl/static/src/counter.js b/awesome_owl/static/src/counter.js
new file mode 100644
index 00000000000..02fd0c4463f
--- /dev/null
+++ b/awesome_owl/static/src/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++;
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter.xml b/awesome_owl/static/src/counter.xml
new file mode 100644
index 00000000000..dab97ec8f66
--- /dev/null
+++ b/awesome_owl/static/src/counter.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div>Hello World
+            <p>Counter: <t t-esc="state.value"/>
+            </p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    </t>
+
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 657fb8b07bb..88be179eb19 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,7 +1,9 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
+import { Counter } from "./counter";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-}
+    static components = { Counter };
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..70ab4b55795 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -2,9 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
-        </div>
+        <Counter></Counter>
+        <Counter></Counter>
     </t>
 
-</templates>
+</templates>
\ No newline at end of file

From 459b6a55b7e6eae4ab0c20643e1293b940d2b77c Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Wed, 30 Apr 2025 10:13:18 +0200
Subject: [PATCH 02/13] [IMP] awesome_owl: add props validation in card
 component

---
 awesome_owl/static/src/card.js        |  9 +++++++++
 awesome_owl/static/src/card.xml       | 17 +++++++++++++++++
 awesome_owl/static/src/playground.js  |  8 ++++++--
 awesome_owl/static/src/playground.xml |  2 ++
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 awesome_owl/static/src/card.js
 create mode 100644 awesome_owl/static/src/card.xml

diff --git a/awesome_owl/static/src/card.js b/awesome_owl/static/src/card.js
new file mode 100644
index 00000000000..34e09ef358a
--- /dev/null
+++ b/awesome_owl/static/src/card.js
@@ -0,0 +1,9 @@
+import { Component, useState } from "@odoo/owl"
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static props = {
+        title: String,
+        content: String,
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/card.xml b/awesome_owl/static/src/card.xml
new file mode 100644
index 00000000000..22694895486
--- /dev/null
+++ b/awesome_owl/static/src/card.xml
@@ -0,0 +1,17 @@
+<?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>
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 88be179eb19..e8805d467e9 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,9 +1,13 @@
 /** @odoo-module **/
 
-import { Component, useState } from "@odoo/owl";
+import { Component, markup } from "@odoo/owl";
 import { Counter } from "./counter";
+import { Card } from "./card";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter };
+    static components = { Counter, Card };
+
+    card1Content = markup("<div>Some Text in div Tag</div>");
+    card2Content = "<div>Some Text in div Tag</div>";
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 70ab4b55795..93729b112e7 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,6 +4,8 @@
     <t t-name="awesome_owl.playground">
         <Counter></Counter>
         <Counter></Counter>
+        <Card title="'my title'" content="card1Content"/>
+        <Card title="'my title'" content="card2Content"/>
     </t>
 
 </templates>
\ No newline at end of file

From 1d61c058fd44afe7e01ca6f581570ec5c1d1fa56 Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Wed, 30 Apr 2025 17:41:01 +0200
Subject: [PATCH 03/13] [IMP] awesome_owl: add input text to add todoitems
 dynamically

---
 awesome_owl/static/src/card.js        |  4 ++--
 awesome_owl/static/src/card.xml       |  2 +-
 awesome_owl/static/src/counter.js     |  8 +++++---
 awesome_owl/static/src/counter.xml    |  4 ++--
 awesome_owl/static/src/playground.js  | 17 ++++++++++++-----
 awesome_owl/static/src/playground.xml |  7 +++++--
 awesome_owl/static/src/todoitem.js    | 23 +++++++++++++++++++++++
 awesome_owl/static/src/todoitem.xml   | 16 ++++++++++++++++
 awesome_owl/static/src/todolist.js    |  7 +++++++
 awesome_owl/static/src/todolist.xml   |  8 ++++++++
 10 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 awesome_owl/static/src/todoitem.js
 create mode 100644 awesome_owl/static/src/todoitem.xml
 create mode 100644 awesome_owl/static/src/todolist.js
 create mode 100644 awesome_owl/static/src/todolist.xml

diff --git a/awesome_owl/static/src/card.js b/awesome_owl/static/src/card.js
index 34e09ef358a..739cce5eeb8 100644
--- a/awesome_owl/static/src/card.js
+++ b/awesome_owl/static/src/card.js
@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl"
+import { Component } from "@odoo/owl"
 
 export class Card extends Component {
     static template = "awesome_owl.card";
@@ -6,4 +6,4 @@ export class Card extends Component {
         title: String,
         content: String,
     }
-}
\ No newline at end of file
+}
diff --git a/awesome_owl/static/src/card.xml b/awesome_owl/static/src/card.xml
index 22694895486..f205a239c90 100644
--- a/awesome_owl/static/src/card.xml
+++ b/awesome_owl/static/src/card.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.card">
-        <div class="card d-inline-block m-2" style="width: 18rem;">
+        <div class="card d-inline-block m-2" style="border:1px solid black; width: 18rem;">
             <div class="card-body">
                 <h5 class="card-title">
                     <t t-esc="props.title"/>
diff --git a/awesome_owl/static/src/counter.js b/awesome_owl/static/src/counter.js
index 02fd0c4463f..2cf1c6040d8 100644
--- a/awesome_owl/static/src/counter.js
+++ b/awesome_owl/static/src/counter.js
@@ -1,9 +1,10 @@
-/** @odoo-module **/
-
 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 +12,6 @@ export class Counter extends Component {
 
     increment() {
         this.state.value++;
+        this.props.onChange();
     }
-}
\ No newline at end of file
+}
diff --git a/awesome_owl/static/src/counter.xml b/awesome_owl/static/src/counter.xml
index dab97ec8f66..eb694f9a94f 100644
--- a/awesome_owl/static/src/counter.xml
+++ b/awesome_owl/static/src/counter.xml
@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.counter">
-        <div>Hello World
+        <div style="border:1px solid black; width: 10rem;">Hello World
             <p>Counter: <t t-esc="state.value"/>
             </p>
-            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+            <button style="border:0.5px solid black;" class="btn btn-primary" t-on-click="increment">Increment</button>
         </div>
     </t>
 
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index e8805d467e9..a99da97ee1d 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,13 +1,20 @@
-/** @odoo-module **/
-
-import { Component, markup } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
 import { Counter } from "./counter";
 import { Card } from "./card";
+import { TodoList } from "./todolist";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter, Card };
+    static components = { Counter, Card, TodoList };
+
+    setup() {
+        this.state = useState({ sum: 0 });
+    }
 
     card1Content = markup("<div>Some Text in div Tag</div>");
     card2Content = "<div>Some Text in div Tag</div>";
-}
\ No newline at end of file
+
+    incrementSum() {
+        this.state.sum++;
+    }
+}
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 93729b112e7..06a056533d3 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -2,10 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <Counter></Counter>
-        <Counter></Counter>
+        <Counter onChange.bind="incrementSum"></Counter>
+        <Counter onChange.bind="incrementSum"></Counter>
+        <p>Counters Sum: <t t-esc="state.sum"/>
+        </p>
         <Card title="'my title'" content="card1Content"/>
         <Card title="'my title'" content="card2Content"/>
+        <TodoList/>
     </t>
 
 </templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/todoitem.js b/awesome_owl/static/src/todoitem.js
new file mode 100644
index 00000000000..1463d7d1d7f
--- /dev/null
+++ b/awesome_owl/static/src/todoitem.js
@@ -0,0 +1,23 @@
+import { Component, useState } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todoitem";
+
+    setup() {
+        this.state = useState({
+            todos: [],
+            idCounter: 0
+        });
+    };
+
+    addTodo(ev) {
+        if (ev.keyCode === 13) {
+            this.state.idCounter++
+            console.log(this.state.idCounter);
+            this.state.todos.push({
+                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
+            });
+            ev.target.value = "";
+        }
+    }
+}
diff --git a/awesome_owl/static/src/todoitem.xml b/awesome_owl/static/src/todoitem.xml
new file mode 100644
index 00000000000..1ff7681ecb1
--- /dev/null
+++ b/awesome_owl/static/src/todoitem.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <br/>
+        <input t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
+        <t t-foreach="state.todos" t-as="i" t-key="i.id">
+            <div style="border: 1px solid black">
+                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
+                    <t t-out="i.id+'. '+i.description"/>
+                </div>
+            </div>
+        </t>
+    </t>
+
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/todolist.js b/awesome_owl/static/src/todolist.js
new file mode 100644
index 00000000000..3b7930bedc2
--- /dev/null
+++ b/awesome_owl/static/src/todolist.js
@@ -0,0 +1,7 @@
+import { Component } from "@odoo/owl";
+import { TodoItem } from "./todoitem";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todolist";
+    static components = { TodoItem };
+}
diff --git a/awesome_owl/static/src/todolist.xml b/awesome_owl/static/src/todolist.xml
new file mode 100644
index 00000000000..fa50e35ccd5
--- /dev/null
+++ b/awesome_owl/static/src/todolist.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todolist">
+        <TodoItem/>
+    </t>
+
+</templates>
\ No newline at end of file

From c387d41f46ed22d5616adbde71be7d6f2897887a Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Fri, 2 May 2025 11:11:36 +0200
Subject: [PATCH 04/13] [IMP] awesome_owl: add auto focus hook on todolist text
 input

---
 awesome_owl/static/src/card.xml       |  2 +-
 awesome_owl/static/src/counter.xml    |  2 +-
 awesome_owl/static/src/playground.xml |  2 +-
 awesome_owl/static/src/todoitem.js    | 19 ++-----------------
 awesome_owl/static/src/todoitem.xml   | 12 ++----------
 awesome_owl/static/src/todolist.js    | 21 ++++++++++++++++++++-
 awesome_owl/static/src/todolist.xml   | 12 ++++++++++--
 awesome_owl/static/src/utils.js       |  9 +++++++++
 8 files changed, 46 insertions(+), 33 deletions(-)
 create mode 100644 awesome_owl/static/src/utils.js

diff --git a/awesome_owl/static/src/card.xml b/awesome_owl/static/src/card.xml
index f205a239c90..1c6d2fe9d37 100644
--- a/awesome_owl/static/src/card.xml
+++ b/awesome_owl/static/src/card.xml
@@ -14,4 +14,4 @@
         </div>
     </t>
 
-</templates>
\ No newline at end of file
+</templates>
diff --git a/awesome_owl/static/src/counter.xml b/awesome_owl/static/src/counter.xml
index eb694f9a94f..a7df4ecc185 100644
--- a/awesome_owl/static/src/counter.xml
+++ b/awesome_owl/static/src/counter.xml
@@ -9,4 +9,4 @@
         </div>
     </t>
 
-</templates>
\ No newline at end of file
+</templates>
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 06a056533d3..3021f0c3f92 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -11,4 +11,4 @@
         <TodoList/>
     </t>
 
-</templates>
\ No newline at end of file
+</templates>
diff --git a/awesome_owl/static/src/todoitem.js b/awesome_owl/static/src/todoitem.js
index 1463d7d1d7f..ecdaf15ba0b 100644
--- a/awesome_owl/static/src/todoitem.js
+++ b/awesome_owl/static/src/todoitem.js
@@ -2,22 +2,7 @@ import { Component, useState } from "@odoo/owl";
 
 export class TodoItem extends Component {
     static template = "awesome_owl.todoitem";
-
-    setup() {
-        this.state = useState({
-            todos: [],
-            idCounter: 0
-        });
-    };
-
-    addTodo(ev) {
-        if (ev.keyCode === 13) {
-            this.state.idCounter++
-            console.log(this.state.idCounter);
-            this.state.todos.push({
-                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
-            });
-            ev.target.value = "";
-        }
+    static props = {
+        todo: Object
     }
 }
diff --git a/awesome_owl/static/src/todoitem.xml b/awesome_owl/static/src/todoitem.xml
index 1ff7681ecb1..5a5aa28e4af 100644
--- a/awesome_owl/static/src/todoitem.xml
+++ b/awesome_owl/static/src/todoitem.xml
@@ -2,15 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todoitem">
-        <br/>
-        <input t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
-        <t t-foreach="state.todos" t-as="i" t-key="i.id">
-            <div style="border: 1px solid black">
-                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
-                    <t t-out="i.id+'. '+i.description"/>
-                </div>
-            </div>
-        </t>
+        <t t-out="props.todo.id+'. '+props.todo.description"/>
     </t>
 
-</templates>
\ No newline at end of file
+</templates>
diff --git a/awesome_owl/static/src/todolist.js b/awesome_owl/static/src/todolist.js
index 3b7930bedc2..1004558d573 100644
--- a/awesome_owl/static/src/todolist.js
+++ b/awesome_owl/static/src/todolist.js
@@ -1,7 +1,26 @@
-import { Component } from "@odoo/owl";
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
 import { TodoItem } from "./todoitem";
+import { useAutofocus } from "./utils";
 
 export class TodoList extends Component {
     static template = "awesome_owl.todolist";
     static components = { TodoItem };
+
+    setup() {
+        this.state = useState({
+            todos: [],
+            idCounter: 0
+        });
+        useAutofocus("input_todo");
+    };
+
+    addTodo(ev) {
+        if (ev.keyCode === 13) {
+            this.state.idCounter++
+            this.state.todos.push({
+                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
+            });
+            ev.target.value = "";
+        }
+    };
 }
diff --git a/awesome_owl/static/src/todolist.xml b/awesome_owl/static/src/todolist.xml
index fa50e35ccd5..827c7a526b5 100644
--- a/awesome_owl/static/src/todolist.xml
+++ b/awesome_owl/static/src/todolist.xml
@@ -2,7 +2,15 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todolist">
-        <TodoItem/>
+        <br/>
+        <input t-ref="input_todo" t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
+        <t t-foreach="state.todos" t-as="i" t-key="i.id">
+            <div style="border: 1px solid black">
+                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
+                    <TodoItem todo= "i"/>
+                </div>
+            </div>
+        </t>
     </t>
 
-</templates>
\ No newline at end of file
+</templates>
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 00000000000..9c0f35a6353
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "@odoo/owl";
+
+export function useAutofocus(refName) {
+  let ref = useRef(refName);
+  useEffect(
+    (el) => el && el.focus(),
+    () => [ref.el]
+  );
+}

From 1891fa1a9cf6aed502dcb7b582dad60a35acc3aa Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Fri, 2 May 2025 13:29:05 +0200
Subject: [PATCH 05/13] [IMP] awesome_owl: allow to toggle todoitems as
 completed or not completed

---
 awesome_owl/static/src/todoitem.js  | 3 ++-
 awesome_owl/static/src/todoitem.xml | 1 +
 awesome_owl/static/src/todolist.js  | 5 +++++
 awesome_owl/static/src/todolist.xml | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/awesome_owl/static/src/todoitem.js b/awesome_owl/static/src/todoitem.js
index ecdaf15ba0b..efd8bac0dbd 100644
--- a/awesome_owl/static/src/todoitem.js
+++ b/awesome_owl/static/src/todoitem.js
@@ -3,6 +3,7 @@ import { Component, useState } from "@odoo/owl";
 export class TodoItem extends Component {
     static template = "awesome_owl.todoitem";
     static props = {
-        todo: Object
+        todo: Object,
+        onToggleState: Function,
     }
 }
diff --git a/awesome_owl/static/src/todoitem.xml b/awesome_owl/static/src/todoitem.xml
index 5a5aa28e4af..0542303bbfd 100644
--- a/awesome_owl/static/src/todoitem.xml
+++ b/awesome_owl/static/src/todoitem.xml
@@ -2,6 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todoitem">
+        <input type="checkbox" t-on-change="()=> props.onToggleState(props.todo.id)"/>
         <t t-out="props.todo.id+'. '+props.todo.description"/>
     </t>
 
diff --git a/awesome_owl/static/src/todolist.js b/awesome_owl/static/src/todolist.js
index 1004558d573..85188c9c2d4 100644
--- a/awesome_owl/static/src/todolist.js
+++ b/awesome_owl/static/src/todolist.js
@@ -23,4 +23,9 @@ export class TodoList extends Component {
             ev.target.value = "";
         }
     };
+
+    toggleState(todoId) {
+        let todo = this.state.todos.find(todo => todo.id === todoId);
+        todo.isCompleted = !todo.isCompleted;
+    }
 }
diff --git a/awesome_owl/static/src/todolist.xml b/awesome_owl/static/src/todolist.xml
index 827c7a526b5..79eb8680385 100644
--- a/awesome_owl/static/src/todolist.xml
+++ b/awesome_owl/static/src/todolist.xml
@@ -7,7 +7,7 @@
         <t t-foreach="state.todos" t-as="i" t-key="i.id">
             <div style="border: 1px solid black">
                 <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
-                    <TodoItem todo= "i"/>
+                    <TodoItem todo= "i" onToggleState.bind="toggleState"/>
                 </div>
             </div>
         </t>

From 00c9d0f1433c1c6c50c806cf20edcdf1a08d46d0 Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Fri, 2 May 2025 13:34:20 +0200
Subject: [PATCH 06/13] [IMP] awesome_owl: allow to toggle todoitem as
 completed ot not completed

---
 awesome_owl/static/src/todoitem.js | 2 +-
 awesome_owl/static/src/todolist.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/awesome_owl/static/src/todoitem.js b/awesome_owl/static/src/todoitem.js
index efd8bac0dbd..b8b799b002f 100644
--- a/awesome_owl/static/src/todoitem.js
+++ b/awesome_owl/static/src/todoitem.js
@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl";
+import { Component } from "@odoo/owl";
 
 export class TodoItem extends Component {
     static template = "awesome_owl.todoitem";
diff --git a/awesome_owl/static/src/todolist.js b/awesome_owl/static/src/todolist.js
index 85188c9c2d4..dbe5ac8ecbc 100644
--- a/awesome_owl/static/src/todolist.js
+++ b/awesome_owl/static/src/todolist.js
@@ -1,4 +1,4 @@
-import { Component, useState, useRef, onMounted } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 import { TodoItem } from "./todoitem";
 import { useAutofocus } from "./utils";
 

From 383d906058649ac875239f84740fe7d40ecc2a5a Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Fri, 2 May 2025 13:42:25 +0200
Subject: [PATCH 07/13] [IMP] awesome_owl: allow to delete todoitem

---
 awesome_owl/static/src/todoitem.js  | 1 +
 awesome_owl/static/src/todoitem.xml | 7 +++++--
 awesome_owl/static/src/todolist.js  | 9 ++++++++-
 awesome_owl/static/src/todolist.xml | 6 ++----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/awesome_owl/static/src/todoitem.js b/awesome_owl/static/src/todoitem.js
index b8b799b002f..7d31fb33b56 100644
--- a/awesome_owl/static/src/todoitem.js
+++ b/awesome_owl/static/src/todoitem.js
@@ -5,5 +5,6 @@ export class TodoItem extends Component {
     static props = {
         todo: Object,
         onToggleState: Function,
+        onRemoveTodo: Function,
     }
 }
diff --git a/awesome_owl/static/src/todoitem.xml b/awesome_owl/static/src/todoitem.xml
index 0542303bbfd..fbc388e5f43 100644
--- a/awesome_owl/static/src/todoitem.xml
+++ b/awesome_owl/static/src/todoitem.xml
@@ -2,8 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todoitem">
-        <input type="checkbox" t-on-change="()=> props.onToggleState(props.todo.id)"/>
-        <t t-out="props.todo.id+'. '+props.todo.description"/>
+        <input type="checkbox" t-on-change="() => props.onToggleState(props.todo.id)"/>
+        <div t-att-class="{'text-muted': props.todo.isCompleted, 'text-decoration-line-through': props.todo.isCompleted}">
+            <t t-out="props.todo.id + '. ' + props.todo.description"/>
+        </div>
+        <span t-on-click="() => props.onRemoveTodo(props.todo.id)" class="fa fa-remove"></span>
     </t>
 
 </templates>
diff --git a/awesome_owl/static/src/todolist.js b/awesome_owl/static/src/todolist.js
index dbe5ac8ecbc..e30df5e2d45 100644
--- a/awesome_owl/static/src/todolist.js
+++ b/awesome_owl/static/src/todolist.js
@@ -25,7 +25,14 @@ export class TodoList extends Component {
     };
 
     toggleState(todoId) {
-        let todo = this.state.todos.find(todo => todo.id === todoId);
+        const todo = this.state.todos.find(todo => todo.id === todoId);
         todo.isCompleted = !todo.isCompleted;
     }
+
+    removeTodo(todoId) {
+        const index = this.state.todos.findIndex(todo => todo.id === todoId);
+        if (index >= 0) {
+            this.state.todos.splice(index, 1);
+        }
+    }
 }
diff --git a/awesome_owl/static/src/todolist.xml b/awesome_owl/static/src/todolist.xml
index 79eb8680385..88c73269506 100644
--- a/awesome_owl/static/src/todolist.xml
+++ b/awesome_owl/static/src/todolist.xml
@@ -4,11 +4,9 @@
     <t t-name="awesome_owl.todolist">
         <br/>
         <input t-ref="input_todo" t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
-        <t t-foreach="state.todos" t-as="i" t-key="i.id">
+        <t t-foreach="state.todos" t-as="todo" t-key="todo.id">
             <div style="border: 1px solid black">
-                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
-                    <TodoItem todo= "i" onToggleState.bind="toggleState"/>
-                </div>
+                <TodoItem todo="todo" onToggleState.bind="toggleState" onRemoveTodo.bind="removeTodo"/>
             </div>
         </t>
     </t>

From 0f17c8ad7ba65e59afd0ad3c72c70f092f88134d Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Mon, 5 May 2025 10:41:44 +0200
Subject: [PATCH 08/13] [IMP] awesome_owl: make card content defined by slots

---
 awesome_owl/static/src/card.js        | 12 ++++++++++--
 awesome_owl/static/src/card.xml       |  6 +++---
 awesome_owl/static/src/playground.xml | 10 ++++++----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/awesome_owl/static/src/card.js b/awesome_owl/static/src/card.js
index 739cce5eeb8..5671e8676cc 100644
--- a/awesome_owl/static/src/card.js
+++ b/awesome_owl/static/src/card.js
@@ -1,9 +1,17 @@
-import { Component } from "@odoo/owl"
+import { Component, useState } from "@odoo/owl"
 
 export class Card extends Component {
     static template = "awesome_owl.card";
     static props = {
         title: String,
-        content: String,
+        slots: Object,
+    };
+
+    setup() {
+        this.state = useState({ isOpen: true });
+    }
+
+    toggleState() {
+        this.state.isOpen = !this.state.isOpen;
     }
 }
diff --git a/awesome_owl/static/src/card.xml b/awesome_owl/static/src/card.xml
index 1c6d2fe9d37..db66a69a79d 100644
--- a/awesome_owl/static/src/card.xml
+++ b/awesome_owl/static/src/card.xml
@@ -6,12 +6,12 @@
             <div class="card-body">
                 <h5 class="card-title">
                     <t t-esc="props.title"/>
+                    <button style="border:0.5px solid purple;" class="btn btn-primary" t-on-click="toggleState">Hide/Show</button>
                 </h5>
-                <p class="card-text">
-                    <t t-out="props.content"/>
+                <p class="card-text" t-if="state.isOpen">
+                    <t t-slot="default"/>
                 </p>
             </div>
         </div>
     </t>
-
 </templates>
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 3021f0c3f92..26be130adc1 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -2,12 +2,14 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <Counter onChange.bind="incrementSum"></Counter>
-        <Counter onChange.bind="incrementSum"></Counter>
         <p>Counters Sum: <t t-esc="state.sum"/>
         </p>
-        <Card title="'my title'" content="card1Content"/>
-        <Card title="'my title'" content="card2Content"/>
+        <Card title="'Card 1'">
+            <Counter onChange.bind="incrementSum"></Counter>
+        </Card>
+        <Card title="'Card 2'">
+            <Counter onChange.bind="incrementSum"></Counter>
+        </Card>
         <TodoList/>
     </t>
 

From 99bac3efb6276ae1e61ea4c7a08592efc55c4604 Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Mon, 5 May 2025 14:03:25 +0200
Subject: [PATCH 09/13] [IMP] awesome_dashboard: add customers and leads action
 buttons

---
 awesome_dashboard/static/src/dashboard.js   | 23 +++++++++++++++++++--
 awesome_dashboard/static/src/dashboard.scss |  3 +++
 awesome_dashboard/static/src/dashboard.xml  |  4 +++-
 3 files changed, 27 insertions(+), 3 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 637fa4bb972..5bfab7e3ef9 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,10 +1,29 @@
-/** @odoo-module **/
-
 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");
+    }
+
+    openCustomersView() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    async openLeadsView() {
+        this.action.doAction({
+            type: 'ir.actions.act_window',
+            name: ('Leads'),
+            target: 'current',
+            res_model: 'crm.lead',
+            views: [[false, 'list'], [false, 'form']],
+        });
+    }
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.scss b/awesome_dashboard/static/src/dashboard.scss
new file mode 100644
index 00000000000..b8d05922ba0
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: rgb(234, 243, 246);
+}
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 1a2ac9a2fed..3924d4437eb 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
+        <button t-on-click="openCustomersView">Customers</button>
+        <button t-on-click="openLeadsView">Leads</button>
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">some content</Layout>
     </t>
 
 </templates>

From d91de1e216cd99e2f3603e1a22412ee94f8e19bd Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Mon, 5 May 2025 14:53:12 +0200
Subject: [PATCH 10/13] [IMP] awesome_dashboard: add generic dashboarditem to
 dashboard

---
 awesome_dashboard/static/src/dashboard.js      | 13 +++++++------
 awesome_dashboard/static/src/dashboard.xml     |  5 ++++-
 awesome_dashboard/static/src/dashboarditem.js  | 13 +++++++++++++
 awesome_dashboard/static/src/dashboarditem.xml | 11 +++++++++++
 awesome_owl/static/src/todolist.js             |  4 ++--
 5 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboarditem.js
 create mode 100644 awesome_dashboard/static/src/dashboarditem.xml

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 5bfab7e3ef9..446262cf77f 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 "./dashboarditem";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout }
+    static components = { Layout, DashboardItem };
 
     setup() {
         this.action = useService("action");
@@ -17,11 +18,11 @@ class AwesomeDashboard extends Component {
 
     async openLeadsView() {
         this.action.doAction({
-            type: 'ir.actions.act_window',
-            name: ('Leads'),
-            target: 'current',
-            res_model: 'crm.lead',
-            views: [[false, 'list'], [false, 'form']],
+            type: "ir.actions.act_window",
+            name: ("Leads"),
+            target: "current",
+            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 3924d4437eb..488528862f3 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -4,7 +4,10 @@
     <t t-name="awesome_dashboard.AwesomeDashboard">
         <button t-on-click="openCustomersView">Customers</button>
         <button t-on-click="openLeadsView">Leads</button>
-        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">some content</Layout>
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
+            <DashboardItem>Card 1 Content</DashboardItem>
+            <DashboardItem size="2">Card 2 Content</DashboardItem>
+        </Layout>
     </t>
 
 </templates>
diff --git a/awesome_dashboard/static/src/dashboarditem.js b/awesome_dashboard/static/src/dashboarditem.js
new file mode 100644
index 00000000000..5733389a547
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboarditem.js
@@ -0,0 +1,13 @@
+import { Component } from "@odoo/owl"
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.dashboarditem";
+    static props = {
+        size: {
+            type: Number,
+            default: 1,
+            optional: true,
+        },
+        slots: Object,
+    };
+}
diff --git a/awesome_dashboard/static/src/dashboarditem.xml b/awesome_dashboard/static/src/dashboarditem.xml
new file mode 100644
index 00000000000..87b49473432
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboarditem.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboarditem">
+        <div class="card d-inline-block m-2" t-attf-style="width: {{18*props.size}}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/todolist.js b/awesome_owl/static/src/todolist.js
index e30df5e2d45..91495e986a1 100644
--- a/awesome_owl/static/src/todolist.js
+++ b/awesome_owl/static/src/todolist.js
@@ -9,7 +9,7 @@ export class TodoList extends Component {
     setup() {
         this.state = useState({
             todos: [],
-            idCounter: 0
+            idCounter: 0,
         });
         useAutofocus("input_todo");
     };
@@ -18,7 +18,7 @@ export class TodoList extends Component {
         if (ev.keyCode === 13) {
             this.state.idCounter++
             this.state.todos.push({
-                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
+                "id": this.state.idCounter, "description": ev.target.value, "isCompleted": false
             });
             ev.target.value = "";
         }

From c122a8de562985503958e3311ed9c8502d8533a4 Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Mon, 5 May 2025 16:49:03 +0200
Subject: [PATCH 11/13] [IMP] awesome_dashboard: add statistics cards to the
 dashboard

---
 awesome_dashboard/static/src/dashboard.js  |  7 +++-
 awesome_dashboard/static/src/dashboard.xml | 42 ++++++++++++++++++++--
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 446262cf77f..fdb79c30176 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,8 +1,9 @@
-import { Component } from "@odoo/owl";
+import { Component, onWillStart, useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboarditem";
+import { rpc } from "@web/core/network/rpc";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
@@ -10,6 +11,10 @@ class AwesomeDashboard extends Component {
 
     setup() {
         this.action = useService("action");
+        this.state = useState({ statistics: {} });
+        onWillStart(async () => {
+            this.state.statistics = await rpc("/awesome_dashboard/statistics");
+        });
     }
 
     openCustomersView() {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 488528862f3..fec41698f45 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -5,8 +5,46 @@
         <button t-on-click="openCustomersView">Customers</button>
         <button t-on-click="openLeadsView">Leads</button>
         <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
-            <DashboardItem>Card 1 Content</DashboardItem>
-            <DashboardItem size="2">Card 2 Content</DashboardItem>
+            <DashboardItem size="2">
+                <div style="text-align: center;">
+                    <h4>Number of new orders this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="state.statistics.nb_new_orders"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="1">
+                <div style="text-align: center;">
+                    <h4>Number of cancelled orders this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="state.statistics.nb_cancelled_orders"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="1">
+                <div style="text-align: center;">
+                    <h4>Average amount of t-shirt by order this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="state.statistics.average_quantity"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="2">
+                <div style="text-align: center;">
+                    <h4>Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="state.statistics.average_time"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="3">
+                <div style="text-align: center;">
+                    <h4>Total amount of new orders this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="state.statistics.total_amount"/>
+                    </h3>
+                </div>
+            </DashboardItem>
         </Layout>
     </t>
 

From 451124f757eb4ac229296e9ace0f88d54257a926 Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Tue, 6 May 2025 11:12:04 +0200
Subject: [PATCH 12/13] [IMP] awesome_dashboard: use memoization to load
 statistics

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

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index fdb79c30176..578ba991cf0 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -3,7 +3,6 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboarditem";
-import { rpc } from "@web/core/network/rpc";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
@@ -11,10 +10,7 @@ class AwesomeDashboard extends Component {
 
     setup() {
         this.action = useService("action");
-        this.state = useState({ statistics: {} });
-        onWillStart(async () => {
-            this.state.statistics = await rpc("/awesome_dashboard/statistics");
-        });
+        this.statistics = useState(useService("awesome_dashboard.statistics"));
     }
 
     openCustomersView() {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index fec41698f45..fc4c751e7f0 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -9,7 +9,7 @@
                 <div style="text-align: center;">
                     <h4>Number of new orders this month</h4>
                     <h3 style="color: green;">
-                        <t t-esc="state.statistics.nb_new_orders"/>
+                        <t t-esc="this.statistics.nb_new_orders"/>
                     </h3>
                 </div>
             </DashboardItem>
@@ -17,7 +17,7 @@
                 <div style="text-align: center;">
                     <h4>Number of cancelled orders this month</h4>
                     <h3 style="color: green;">
-                        <t t-esc="state.statistics.nb_cancelled_orders"/>
+                        <t t-esc="this.statistics.nb_cancelled_orders"/>
                     </h3>
                 </div>
             </DashboardItem>
@@ -25,7 +25,7 @@
                 <div style="text-align: center;">
                     <h4>Average amount of t-shirt by order this month</h4>
                     <h3 style="color: green;">
-                        <t t-esc="state.statistics.average_quantity"/>
+                        <t t-esc="this.statistics.average_quantity"/>
                     </h3>
                 </div>
             </DashboardItem>
@@ -33,7 +33,7 @@
                 <div style="text-align: center;">
                     <h4>Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’</h4>
                     <h3 style="color: green;">
-                        <t t-esc="state.statistics.average_time"/>
+                        <t t-esc="this.statistics.average_time"/>
                     </h3>
                 </div>
             </DashboardItem>
@@ -41,7 +41,7 @@
                 <div style="text-align: center;">
                     <h4>Total amount of new orders this month</h4>
                     <h3 style="color: green;">
-                        <t t-esc="state.statistics.total_amount"/>
+                        <t t-esc="this.statistics.total_amount"/>
                     </h3>
                 </div>
             </DashboardItem>
diff --git a/awesome_dashboard/static/src/statistics_service.js b/awesome_dashboard/static/src/statistics_service.js
new file mode 100644
index 00000000000..f62ca6f5f37
--- /dev/null
+++ b/awesome_dashboard/static/src/statistics_service.js
@@ -0,0 +1,17 @@
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { memoize } from "@web/core/utils/functions";
+
+async function loadStatistics() {
+    const memoizedRpc = memoize(rpc);
+    const statistics = await memoizedRpc("/awesome_dashboard/statistics");
+    return statistics;
+}
+
+export const statisticsService = {
+    async start() {
+        return await loadStatistics();
+    },
+}
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);

From b5964b6dfb29b22726efc1ee6f5b7da9aa07d9f8 Mon Sep 17 00:00:00 2001
From: msho-odoo <msho@odoo.com>
Date: Tue, 6 May 2025 17:07:01 +0200
Subject: [PATCH 13/13] [IMP] awesome_dashboard: add piechart of orders sizes

---
 awesome_dashboard/static/src/dashboard.js  |  5 ++--
 awesome_dashboard/static/src/dashboard.xml |  5 ++++
 awesome_dashboard/static/src/piechart.js   | 34 ++++++++++++++++++++++
 awesome_dashboard/static/src/piechart.xml  |  7 +++++
 4 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 awesome_dashboard/static/src/piechart.js
 create mode 100644 awesome_dashboard/static/src/piechart.xml

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 578ba991cf0..85ee10249d7 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,12 +1,13 @@
-import { Component, onWillStart, useState } 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";
 import { DashboardItem } from "./dashboarditem";
+import { PieChart } from "./piechart";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, DashboardItem };
+    static components = { Layout, DashboardItem, PieChart };
 
     setup() {
         this.action = useService("action");
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index fc4c751e7f0..03dbf6a3b33 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -45,6 +45,11 @@
                     </h3>
                 </div>
             </DashboardItem>
+            <DashboardItem size="2">
+                <div style="text-align: center;">
+                    <PieChart data="this.statistics"/>
+                </div>
+            </DashboardItem>
         </Layout>
     </t>
 
diff --git a/awesome_dashboard/static/src/piechart.js b/awesome_dashboard/static/src/piechart.js
new file mode 100644
index 00000000000..ee95a7fa944
--- /dev/null
+++ b/awesome_dashboard/static/src/piechart.js
@@ -0,0 +1,34 @@
+import { Component, onWillStart, onMounted, onWillUnmount, useRef } from "@odoo/owl"
+import { loadJS } from "@web/core/assets"
+import { getColor } from "@web/core/colors/colors"
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.piechart";
+    static props = {
+        data: Object,
+    }
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+        onMounted(() => this.renderChart());
+        onWillUnmount(() => this.chart.destroy());
+    }
+
+    renderChart() {
+        const chartLabels = Object.keys(this.props.data.orders_by_size)
+        this.chart = new Chart(this.canvasRef.el, {
+            type: 'pie',
+            data: {
+                labels: chartLabels,
+                datasets: [
+                    {
+                        label: "Sizes Chart",
+                        data: Object.values(this.props.data.orders_by_size),
+                        backgroundColor: chartLabels.map((_, index) => getColor(index)),
+                    }
+                ]
+            }
+        });
+    }
+}
diff --git a/awesome_dashboard/static/src/piechart.xml b/awesome_dashboard/static/src/piechart.xml
new file mode 100644
index 00000000000..71b1bca306f
--- /dev/null
+++ b/awesome_dashboard/static/src/piechart.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.piechart">
+        <canvas t-ref="canvas"/>
+    </t>
+</templates>