From 92c0815732b198b1829aa8e8e2450307c04aa825 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 09:23:16 +0200
Subject: [PATCH 01/17] [ADD] awesome_owl: implement counter functionality and
 integrate into playground

---
 awesome_owl/static/src/counter/counter.js  | 13 +++++++++++++
 awesome_owl/static/src/counter/counter.xml | 11 +++++++++++
 awesome_owl/static/src/playground.js       |  2 ++
 awesome_owl/static/src/playground.xml      |  1 +
 4 files changed, 27 insertions(+)
 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..b1635cbeda3
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,13 @@
+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/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 00000000000..83b2dcf0d06
--- /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="d-inline-flex align-items-center gap-2 m-3 p-3 border">
+            <p>Counter: <t t-esc="state.value"/></p>
+            <button class="btn btn-primary" 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 657fb8b07bb..9f85177447d 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 { Counter } from "./counter/counter";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static components = { Counter };
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..bd85761eb76 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -5,6 +5,7 @@
         <div class="p-3">
             hello world
         </div>
+        <Counter/>
     </t>
 
 </templates>

From abd6da51ce693e965d3d14b75a9ff9c995ed6df1 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 09:25:28 +0200
Subject: [PATCH 02/17] [FIX] awesome_owl: add duplicate Counter component and
 maintain  aligned structure

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

diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index bd85761eb76..57879b36b88 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/>
         </div>
-        <Counter/>
     </t>
 
 </templates>

From 010fb2c1d7da18b480fe1ce684b4b9fa1192a8bc Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 09:57:09 +0200
Subject: [PATCH 03/17] [ADD] awesome_owl: create Card component and integrate
 into Playground

---
 awesome_owl/static/src/card/card.js   |  5 +++++
 awesome_owl/static/src/card/card.xml  | 11 +++++++++++
 awesome_owl/static/src/playground.js  |  5 ++---
 awesome_owl/static/src/playground.xml |  5 ++++-
 4 files changed, 22 insertions(+), 4 deletions(-)
 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..bc8ae23762d
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,5 @@
+import { Component } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.Card";
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..86596c4eb64
--- /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="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-esc="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 9f85177447d..dae12a5231a 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,9 +1,8 @@
-/** @odoo-module **/
-
 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 components = { Counter };
+    static components = { Counter, Card };
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 57879b36b88..ec1025dfd89 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -7,6 +7,9 @@
             <Counter/>
             <Counter/>
         </div>
+        <div class="p-3">
+            <Card title="'Card 1'" content="'This is the first card.'"></Card>
+            <Card title="'Card 2'" content="'This is the second card.'"></Card>
+        </div>
     </t>
-
 </templates>

From 35f6d8d253fbf0c806f611f8ee2de837380186a5 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 11:15:01 +0200
Subject: [PATCH 04/17] [ADD] awesome_owl: update Card component to use t-out
 for rendering props and adjust Playground to utilize dynamic content

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

diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 86596c4eb64..7a0f39cf6dc 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="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-esc="props.content"/></p>
+                <h5 class="card-title"><t t-out="props.title"/></h5>
+                <p class="card-text"><t t-out="props.content"/></p>
             </div>
         </div>
     </t>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index dae12a5231a..00fc95386e9 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,8 +1,13 @@
-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 };
+
+    setup() {
+        this.s1 = "<div class='text-primary'>some content</div>";
+        this.s2 = markup("<div class='text-primary'>some content</div>");
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index ec1025dfd89..93e3ffd2511 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -8,8 +8,8 @@
             <Counter/>
         </div>
         <div class="p-3">
-            <Card title="'Card 1'" content="'This is the first card.'"></Card>
-            <Card title="'Card 2'" content="'This is the second card.'"></Card>
+            <Card title="'Card 1'" content="s1"></Card>
+            <Card title="'Card 2'" content="s2"></Card>
         </div>
     </t>
 </templates>

From 33d9d61c5dc292ad4af735bbeb539afa6c07f90b Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 11:28:20 +0200
Subject: [PATCH 05/17] [ADD] awesome_owl: define props for Card and Counter
 components to enhance functionality

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

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index bc8ae23762d..03e2f9ff39b 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -2,4 +2,8 @@ import { Component } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.Card";
+    static props = {
+        title: { type: String },
+        content: { type: String, optional: true },
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index b1635cbeda3..2ddccff3f11 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -2,6 +2,9 @@ import { Component, useState } from "@odoo/owl";
 
 export class Counter extends Component {
     static template = "awesome_owl.Counter";
+    static props = {
+        initialValue: { type: Number, optional: true, default: 0, validate: (value) => value >= 0 },
+    };
 
     setup() {
         this.state = useState({ value: 0 });

From 7caed05f55caca673c83eff56c474bd00f278046 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 11:51:59 +0200
Subject: [PATCH 06/17] [ADD] awesome_owl: enhance Counter component with
 onChange prop and integrate sum functionality in Playground

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

diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index 2ddccff3f11..f2c60324ea0 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -4,6 +4,7 @@ export class Counter extends Component {
     static template = "awesome_owl.Counter";
     static props = {
         initialValue: { type: Number, optional: true, default: 0, validate: (value) => value >= 0 },
+        onChange: { type: Function, optional: true },
     };
 
     setup() {
@@ -12,5 +13,8 @@ export class Counter extends Component {
 
     increment() {
         this.state.value++;
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 00fc95386e9..99e4cdf46b8 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";
 
@@ -9,5 +9,10 @@ export class Playground extends Component {
     setup() {
         this.s1 = "<div class='text-primary'>some content</div>";
         this.s2 = markup("<div class='text-primary'>some content</div>");
+        this.sum = useState({ value: 0 });
+    }
+
+    incrementSum() {
+        this.sum.value++;
     }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 93e3ffd2511..63dd17ca1a5 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"/>
+            <div>The sum is: <t t-esc="sum.value"/></div>
         </div>
         <div class="p-3">
             <Card title="'Card 1'" content="s1"></Card>

From 99ade4c2036d0055f17371210df0737f61ff5f3a Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 15:16:39 +0200
Subject: [PATCH 07/17] [ADD] awesome_owl: integrate TodoList component and
 create TodoItem for task management

---
 awesome_owl/static/src/playground.js           |  3 ++-
 awesome_owl/static/src/playground.xml          |  3 +++
 awesome_owl/static/src/todo_list/todo_item.js  | 14 ++++++++++++++
 awesome_owl/static/src/todo_list/todo_item.xml |  9 +++++++++
 awesome_owl/static/src/todo_list/todo_list.js  | 16 ++++++++++++++++
 awesome_owl/static/src/todo_list/todo_list.xml | 10 ++++++++++
 6 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 awesome_owl/static/src/todo_list/todo_item.js
 create mode 100644 awesome_owl/static/src/todo_list/todo_item.xml
 create mode 100644 awesome_owl/static/src/todo_list/todo_list.js
 create mode 100644 awesome_owl/static/src/todo_list/todo_list.xml

diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 99e4cdf46b8..b1c13c12b1d 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_list/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter, Card };
+    static components = { Counter, Card, TodoList };
 
     setup() {
         this.s1 = "<div class='text-primary'>some content</div>";
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 63dd17ca1a5..ed02c834d93 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -12,5 +12,8 @@
             <Card title="'Card 1'" content="s1"></Card>
             <Card title="'Card 2'" content="s2"></Card>
         </div>
+        <div class="d-inline-flex p-3 m-3 border">
+            <TodoList />
+        </div>
     </t>
 </templates>
diff --git a/awesome_owl/static/src/todo_list/todo_item.js b/awesome_owl/static/src/todo_list/todo_item.js
new file mode 100644
index 00000000000..730ff686c9c
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_item.js
@@ -0,0 +1,14 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.TodoItem";
+    static props = {
+        todo: { type: Object,
+            shape: {
+                id: { type: Number, default: 0 },
+                description: { type: String, default: "" },
+                isCompleted: { type: Boolean, default: false },
+            }
+        }
+    };
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
new file mode 100644
index 00000000000..803016a0879
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoItem">
+        <div class="todo-item d-flex align-items-center justify-content-between">
+            <t t-esc="props.todo.id"/>
+            <t t-esc="props.todo.description"/>
+        </div>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
new file mode 100644
index 00000000000..18e612175c3
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -0,0 +1,16 @@
+import {Component, useState} from "@odoo/owl";
+import {TodoItem} from "./todo_item";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.TodoList";
+    static components = {TodoItem};
+
+    setup() {
+        this.todos = useState([
+                {id: 1, description: "Buy groceries", isCompleted: false},
+                {id: 2, description: "Walk the dog", isCompleted: false},
+                {id: 3, description: "Read a book", isCompleted: true},
+            ],
+        );
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
new file mode 100644
index 00000000000..a05ada55464
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoList">
+        <div class="todo-list align-items-center gap-2 m-3 p-3 border">
+            <t t-foreach="todos" t-as="todo" t-key="todo.id">
+                <TodoItem todo="todo" />
+            </t>
+        </div>
+    </t>
+</templates>
\ No newline at end of file

From 722fa7e8d37e3b83481d6f3f3bff511745004036 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 15:37:20 +0200
Subject: [PATCH 08/17] [ADD] awesome_owl: modify TodoItem component to
 conditionally apply styles based on task completion status

---
 awesome_owl/static/src/todo_list/todo_item.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
index 803016a0879..a2505d9bea2 100644
--- a/awesome_owl/static/src/todo_list/todo_item.xml
+++ b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.TodoItem">
-        <div class="todo-item d-flex align-items-center justify-content-between">
+        <div t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted, '': !props.todo.isCompleted}">
             <t t-esc="props.todo.id"/>
             <t t-esc="props.todo.description"/>
         </div>
     </t>
-</templates>
\ No newline at end of file
+</templates>

From 86ee05525911dbf961502dd89d432ce6625da5ae Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Wed, 28 May 2025 16:16:22 +0200
Subject: [PATCH 09/17] [ADD] awesome_owl: implement dynamic todo addition in
 TodoList component

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

diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
index 18e612175c3..fc857a00804 100644
--- a/awesome_owl/static/src/todo_list/todo_list.js
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -6,11 +6,18 @@ export class TodoList extends Component {
     static components = {TodoItem};
 
     setup() {
-        this.todos = useState([
-                {id: 1, description: "Buy groceries", isCompleted: false},
-                {id: 2, description: "Walk the dog", isCompleted: false},
-                {id: 3, description: "Read a book", isCompleted: true},
-            ],
-        );
+        this.todos = useState([]);
+    }
+
+    addTodo(ev) {
+        if (ev.keyCode === 13 && ev.target.value.trim() != "") {
+            const newTodo = {
+                id: this.todos.length + 1,
+                description: ev.target.value.trim(),
+                isCompleted: false,
+            };
+            this.todos.push(newTodo);
+            ev.target.value = "";
+        }
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
index a05ada55464..ec82f6ef984 100644
--- a/awesome_owl/static/src/todo_list/todo_list.xml
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -2,6 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="awesome_owl.TodoList">
         <div class="todo-list align-items-center gap-2 m-3 p-3 border">
+            <input type="text" class="form-control" placeholder="Add a new todo" t-on-keyup="addTodo"/>
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
                 <TodoItem todo="todo" />
             </t>

From cf1b7929af50e198c876c70b3032882aac29e658 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Fri, 30 May 2025 09:15:35 +0200
Subject: [PATCH 10/17] [ADD] awesome_owl: implement autofocus utility and
 integrate it in TodoList component

---
 awesome_owl/static/src/todo_list/todo_list.js  |  2 ++
 awesome_owl/static/src/todo_list/todo_list.xml |  2 +-
 awesome_owl/static/src/utils.js                | 13 +++++++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 awesome_owl/static/src/utils.js

diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
index fc857a00804..0d9af640047 100644
--- a/awesome_owl/static/src/todo_list/todo_list.js
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -1,5 +1,6 @@
 import {Component, useState} from "@odoo/owl";
 import {TodoItem} from "./todo_item";
+import { useAutofocus } from "../utils";
 
 export class TodoList extends Component {
     static template = "awesome_owl.TodoList";
@@ -7,6 +8,7 @@ export class TodoList extends Component {
 
     setup() {
         this.todos = useState([]);
+        useAutofocus("input")
     }
 
     addTodo(ev) {
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
index ec82f6ef984..d950a54bd5b 100644
--- a/awesome_owl/static/src/todo_list/todo_list.xml
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="awesome_owl.TodoList">
         <div class="todo-list align-items-center gap-2 m-3 p-3 border">
-            <input type="text" class="form-control" placeholder="Add a new todo" t-on-keyup="addTodo"/>
+            <input type="text" class="form-control" placeholder="Add a new todo" t-on-keyup="addTodo" t-ref="input"/>
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
                 <TodoItem todo="todo" />
             </t>
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 00000000000..026c6c1b076
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,13 @@
+import {useRef, onMounted} from "@odoo/owl";
+
+export function useAutofocus(input) {
+    const inputRef = useRef(input);
+
+    onMounted(() => {
+        if (inputRef.el) {
+            inputRef.el.focus();
+        }
+    });
+
+    return { inputRef };
+}
\ No newline at end of file

From d35d10a878644c4a19709ecc98729df138e2dc94 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Fri, 30 May 2025 09:44:27 +0200
Subject: [PATCH 11/17] [ADD] awesome_owl: implement toggle and remove
 functionality in TodoItem and TodoList components

---
 awesome_owl/static/src/todo_list/todo_item.js  | 12 +++++++++++-
 awesome_owl/static/src/todo_list/todo_item.xml | 10 +++++++---
 awesome_owl/static/src/todo_list/todo_list.js  | 13 +++++++++++++
 awesome_owl/static/src/todo_list/todo_list.xml |  2 +-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/awesome_owl/static/src/todo_list/todo_item.js b/awesome_owl/static/src/todo_list/todo_item.js
index 730ff686c9c..4030485b157 100644
--- a/awesome_owl/static/src/todo_list/todo_item.js
+++ b/awesome_owl/static/src/todo_list/todo_item.js
@@ -9,6 +9,16 @@ export class TodoItem extends Component {
                 description: { type: String, default: "" },
                 isCompleted: { type: Boolean, default: false },
             }
-        }
+        },
+        toggleState: { type: Function, optional: true },
+        removeTodo: { type: Function, optional: true },
     };
+
+    onChange() {
+        this.props.toggleState(this.props.todo.id);
+    }
+    
+    onRemove() {
+        this.props.removeTodo(this.props.todo.id);
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
index a2505d9bea2..c4eb7c25a84 100644
--- a/awesome_owl/static/src/todo_list/todo_item.xml
+++ b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -1,9 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.TodoItem">
-        <div t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted, '': !props.todo.isCompleted}">
-            <t t-esc="props.todo.id"/>
-            <t t-esc="props.todo.description"/>
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" t-att-id="props.todo.id" t-att-checked="props.todo.isCompleted" t-on-change="onChange"/>
+            <label t-att-for="props.todo.id"  t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted, '': !props.todo.isCompleted}">
+                <t t-esc="props.todo.id"/>
+                <t t-esc="props.todo.description"/>
+            </label>
+            <span role="botton" class="fa fa-remove" t-on-click="onRemove"/>
         </div>
     </t>
 </templates>
diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
index 0d9af640047..eb38b1694d7 100644
--- a/awesome_owl/static/src/todo_list/todo_list.js
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -22,4 +22,17 @@ export class TodoList extends Component {
             ev.target.value = "";
         }
     }
+    toggleTodo(id) {
+        const todo = this.todos.find(todo => todo.id === id);
+        if (todo) {
+            todo.isCompleted = !todo.isCompleted;
+        }
+    }
+
+    removeTodo(id) {
+        const index = this.todos.findIndex(todo => todo.id === id);
+        if (index !== -1) {
+            this.todos.splice(index, 1);
+        }
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
index d950a54bd5b..f3d1d9f4021 100644
--- a/awesome_owl/static/src/todo_list/todo_list.xml
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -4,7 +4,7 @@
         <div class="todo-list align-items-center gap-2 m-3 p-3 border">
             <input type="text" class="form-control" placeholder="Add a new todo" t-on-keyup="addTodo" t-ref="input"/>
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
-                <TodoItem todo="todo" />
+                <TodoItem todo="todo" toggleState.bind="toggleTodo" removeTodo.bind="removeTodo"/>
             </t>
         </div>
     </t>

From 73465b9174076043aa9d481e235b1af326a53736 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Fri, 30 May 2025 10:00:42 +0200
Subject: [PATCH 12/17] [ADD] awesome_owl: update Card component to use slots
 for dynamic content rendering

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

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 03e2f9ff39b..74c112db376 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -4,6 +4,9 @@ export class Card extends Component {
     static template = "awesome_owl.Card";
     static props = {
         title: { type: String },
-        content: { type: String, optional: true },
+        slots: {
+            type: Object,
+            shape: { default:true },
+        }
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 7a0f39cf6dc..eb5d0d5efb8 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -4,7 +4,7 @@
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
                 <h5 class="card-title"><t t-out="props.title"/></h5>
-                <p class="card-text"><t t-out="props.content"/></p>
+                <p class="card-text"><t t-slot="default"/></p>
             </div>
         </div>
     </t>
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index ed02c834d93..65298c9a32a 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -9,8 +9,12 @@
             <div>The sum is: <t t-esc="sum.value"/></div>
         </div>
         <div class="p-3">
-            <Card title="'Card 1'" content="s1"></Card>
-            <Card title="'Card 2'" content="s2"></Card>
+            <Card title="'Card 1'"> 
+                <p>This is the content of Card 1.</p>
+            </Card>
+            <Card title="'Card 2'">
+                <Counter onChange.bind="incrementSum"/>
+            </Card>
         </div>
         <div class="d-inline-flex p-3 m-3 border">
             <TodoList />

From 82ac6adb96b238215528916b1c7c1790a07ce61d Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Fri, 30 May 2025 10:19:36 +0200
Subject: [PATCH 13/17] [ADD] awesome_owl: enhance Card component with toggle
 functionality and state management

---
 awesome_owl/static/src/card/card.js  | 12 +++++++++++-
 awesome_owl/static/src/card/card.xml |  9 +++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 74c112db376..a36b44300d3 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -1,4 +1,4 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.Card";
@@ -7,6 +7,16 @@ export class Card extends Component {
         slots: {
             type: Object,
             shape: { default:true },
+        },
+    }
+    
+    setup() {
+        this.state = useState({ isToggled: true });
+    }
+    toggle() {
+        this.state.isToggled = !this.state.isToggled;
+        if (this.props.onChange) {
+            this.props.onChange(this.state.isToggled);
         }
     }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index eb5d0d5efb8..9b662da71a5 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -3,8 +3,13 @@
     <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-out="props.title"/></h5>
-                <p class="card-text"><t t-slot="default"/></p>
+                <h5 class="card-title">
+                    <t t-out="props.title"/>
+                    <button class="btn" t-on-click="toggle">Toggle</button>
+                </h5>
+                <p class="card-text" t-if="state.isToggled">
+                    <t t-slot="default"/>
+                </p>
             </div>
         </div>
     </t>

From 1e85def6878bfd0f777d539d99a7d4ac44f23933 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Mon, 2 Jun 2025 09:58:18 +0200
Subject: [PATCH 14/17] [ADD] awesome_dashboard: implement layout and buttons
 for customer and leads actions

---
 awesome_dashboard/static/src/dashboard.js   | 27 +++++++++++++++++++++
 awesome_dashboard/static/src/dashboard.scss |  3 +++
 awesome_dashboard/static/src/dashboard.xml  |  8 +++++-
 3 files changed, 37 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..fceea180f24 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -2,9 +2,36 @@
 
 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");
+        this.display = {
+            controlPanel: {},
+        };
+    }
+
+        openCustomerView() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    openLeads() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: "All leads",
+            res_model: "crm.lead",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        });
+    }
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.scss b/awesome_dashboard/static/src/dashboard.scss
new file mode 100644
index 00000000000..49a8d6a691f
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: rgb(86, 72, 90);
+}
\ No newline at end of file
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 1a2ac9a2fed..58c1df94324 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -2,7 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout display="display" className="'o_dashboard h-100'">
+            <t t-set-slot="layout-buttons">
+                <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
+                <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
+            </t>
+            content goes here
+        </Layout>   
     </t>
 
 </templates>

From 5a048a9829a52cd50d77b77eb490c3847735e5c1 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Mon, 2 Jun 2025 10:01:26 +0200
Subject: [PATCH 15/17] [ADD] awesome_dashboard: add DashboardItem component
 and integrate it into AwesomeDashboard layout

---
 awesome_dashboard/static/src/dashboard.js        |  4 ++--
 awesome_dashboard/static/src/dashboard.xml       | 12 +++++++++++-
 .../static/src/dashboard_item/dashboard_item.js  | 16 ++++++++++++++++
 .../static/src/dashboard_item/dashboard_item.xml | 10 ++++++++++
 4 files changed, 39 insertions(+), 3 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.js b/awesome_dashboard/static/src/dashboard.js
index fceea180f24..230fc12eb82 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -4,11 +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"
 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 58c1df94324..c677f756d0d 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -7,7 +7,17 @@
                 <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
                 <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
-            content goes here
+            <div class="d-flex flex-wrap">
+                <DashboardItem>
+                    some content
+                </DashboardItem>
+                <DashboardItem size="2">
+                    I love milk
+                </DashboardItem>
+                <DashboardItem>
+                    some content
+                </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..24373d4836b
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.js
@@ -0,0 +1,16 @@
+import { Component } from "@odoo/owl";
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.DashboardItem"
+    static props = {
+        slots: {
+            type: Object,
+            optional: true,
+            default: () => ({}),
+        },
+        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..d023340bb59
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardItem">
+        <div class="card m-2 border-dark" t-attf-style="width: {{18*props.size}}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>
\ No newline at end of file

From 0cd0cbc75aeca69019692d5a1ed78e9bb6d7adb8 Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Mon, 2 Jun 2025 13:20:45 +0200
Subject: [PATCH 16/17] [ADD] awesome_dashboard: fetch and display statistics
 in DashboardItem components

---
 awesome_dashboard/static/src/dashboard.js  |  6 +++++-
 awesome_dashboard/static/src/dashboard.xml | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 230fc12eb82..0a7de097ff5 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"
+import { rpc } from "@web/core/network/rpc";
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
 
@@ -15,6 +16,9 @@ class AwesomeDashboard extends Component {
         this.display = {
             controlPanel: {},
         };
+        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 c677f756d0d..ff654ba4f90 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -9,13 +9,24 @@
             </t>
             <div class="d-flex flex-wrap">
                 <DashboardItem>
-                    some content
+                    Number of new orders this month
+                    <t t-esc="statistics.nb_new_orders"/>
                 </DashboardItem>
-                <DashboardItem size="2">
-                    I love milk
+                <DashboardItem>
+                    Total amount of new orders this month
+                    <t t-esc="statistics.total_amount"/>
+                </DashboardItem>
+                <DashboardItem>
+                    Average amount of t-shirt by order this month
+                    <t t-esc="statistics.average_quantity"/>
+                </DashboardItem>
+                <DashboardItem>
+                    Number of cancelled orders this month
+                    <t t-esc="statistics.nb_cancelled_orders"/>
                 </DashboardItem>
                 <DashboardItem>
-                    some content
+                    Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’
+                    <t t-esc="statistics.average_time"/>
                 </DashboardItem>
             </div>
         </Layout>   

From 1ff36c0a8e1e4f234859f73cc931d2d26e4b9c2c Mon Sep 17 00:00:00 2001
From: oumaima-aarabe <111888559+oumaima-aarabe@users.noreply.github.com>
Date: Mon, 2 Jun 2025 13:44:25 +0200
Subject: [PATCH 17/17] [ADD] awesome_dashboard: implement statistics service
 for loading dashboard statistics

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

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 0a7de097ff5..0c19267a96c 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -5,7 +5,6 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item/dashboard_item"
-import { rpc } from "@web/core/network/rpc";
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
 
@@ -13,11 +12,12 @@ class AwesomeDashboard extends Component {
 
     setup() {
         this.action = useService("action");
+        this.statistics = useService("awesome_dashboard.statistics");
         this.display = {
             controlPanel: {},
         };
         onWillStart(async () => {
-            this.statistics = await rpc("awesome_dashboard/statistics", {});
+            this.statistics = await this.statistics.loadStatistics();
         });
     }
 
diff --git a/awesome_dashboard/static/src/statistics.js b/awesome_dashboard/static/src/statistics.js
new file mode 100644
index 00000000000..9f7a1b19a09
--- /dev/null
+++ b/awesome_dashboard/static/src/statistics.js
@@ -0,0 +1,14 @@
+import { registry } from "@web/core/registry";
+import { memoize } from "@web/core/utils/functions";
+import { rpc } from "@web/core/network/rpc";
+
+const statistics = {
+    async: ["loadStatistics"],
+    start() {
+        return {
+            loadStatistics: memoize(() => rpc("/awesome_dashboard/statistics")),
+        };
+    },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statistics);
\ No newline at end of file