From 874a1e02e42ea6b20f33e461d0dba4635f401da0 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Tue, 23 Sep 2025 15:36:57 +0200
Subject: [PATCH 01/23] [ADD] 8 Section

---
 .vscode/launch.json                        | 26 ++++++++++++++++++++++
 awesome_owl/static/src/card/card.js        | 15 +++++++++++++
 awesome_owl/static/src/card/card.xml       | 15 +++++++++++++
 awesome_owl/static/src/counter/counter.js  | 22 ++++++++++++++++++
 awesome_owl/static/src/counter/counter.xml | 11 +++++++++
 awesome_owl/static/src/playground.js       | 21 +++++++++++++----
 awesome_owl/static/src/playground.xml      | 12 ++++++----
 awesome_owl/static/src/todo/todo_item.js   | 18 +++++++++++++++
 awesome_owl/static/src/todo/todo_item.xml  | 13 +++++++++++
 awesome_owl/static/src/todo/todo_list.js   | 15 +++++++++++++
 awesome_owl/static/src/todo/todo_list.xml  | 17 ++++++++++++++
 11 files changed, 177 insertions(+), 8 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 awesome_owl/static/src/card/card.js
 create mode 100644 awesome_owl/static/src/card/card.xml
 create mode 100644 awesome_owl/static/src/counter/counter.js
 create mode 100644 awesome_owl/static/src/counter/counter.xml
 create mode 100644 awesome_owl/static/src/todo/todo_item.js
 create mode 100644 awesome_owl/static/src/todo/todo_item.xml
 create mode 100644 awesome_owl/static/src/todo/todo_list.js
 create mode 100644 awesome_owl/static/src/todo/todo_list.xml

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000000..cdc9bed8035
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Run (Update)",
+            "type": "debugpy",
+            "request": "launch",
+            "python": "/usr/bin/python3",
+            "program": "/home/odoo/odoo/odoo-bin",
+            "console": "integratedTerminal",
+            "args": [
+                "--database", "rd-demo",
+                "--dev", "xml",
+                // "-u", "we_guarantee",
+                "--addons-path", "/home/odoo/enterprise,/home/odoo/odoo/addons,/home/odoo/tutorials",
+                "--log-level", "info",
+                "--limit-time-real=0",
+                "--limit-time-cpu=0",
+            ],
+            "variablePresentation": {},
+        },
+    ]
+}
diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..83c54f82a4d
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,15 @@
+import { Component, markup } from "@odoo/owl";
+
+export class Card extends Component {
+   static template = "awesome_owl.Card"
+
+    static props = {
+        title: String,
+        content:{
+            type: String,
+            optional: true,
+        },
+        
+    };
+  
+}
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..f1f12536b24
--- /dev/null
+++ b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.Card" owl="1">
+        <div class="card d-inline-block m-2">
+            <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/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 00000000000..2bf2da49318
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,22 @@
+import { Component , useState} from "@odoo/owl";
+
+export class Counter extends Component {
+   static template = "awesome_owl.Counter";
+   static props = {
+        onChange: {
+            type: Function,
+            optional: true,
+        }
+   };
+
+   setup() {
+       this.state =useState({ value: 0 });
+   }
+
+   increment() {
+       this.state.value ++;
+       if (this.props.onChange){
+            this.props.onChange();
+       }
+   }
+}
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 00000000000..1b56b5ea32f
--- /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" owl="1">
+       <div class="p-3">
+           <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..dc65a5ecbba 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,7 +1,20 @@
-/** @odoo-module **/
-
-import { Component } from "@odoo/owl";
+import { Component, markup , useState} from "@odoo/owl";
+import { Card } from "./card/card"; // Import the Card component
+import { Counter } from "./counter/counter";
+import { TodoList } from "./todo/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-}
+    static components = { Card , Counter, TodoList };
+    setup() {
+        this.htmlContent = markup("<div class='text-primary'>some content</div>");
+        this.state = useState({ sum : 2 });
+        this.incrementSum = this.incrementSum.bind(this);
+    }
+
+    incrementSum() {
+        console.log("hamza");
+        this.state.sum ++;
+    }
+    
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..2536fbcf4a6 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -1,10 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+   <t t-name="awesome_owl.playground" owl="1">
+        <Counter  onChange="incrementSum"/>
+        <Counter  onChange="incrementSum"/>
+        <Card title="'hamza'" content="htmlContent"/>
+        <div>
+                <p>The Sum is: <t t-esc="state.sum"/></p>
         </div>
-    </t>
+        <TodoList/>
+   </t>
 
 </templates>
diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
new file mode 100644
index 00000000000..a77bf512c90
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -0,0 +1,18 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+
+    static props = {
+        todo: {
+            type: Object,
+            shape: {
+                id : Number,
+                description : String,
+                isCompleted : Boolean,
+            },
+        },
+    };
+    
+}
+
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
new file mode 100644
index 00000000000..3e693ea1f12
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todo_item" owl="1">
+        <div class="o_todo_item" t-att-class="{ 'text-decoration-line-through': props.todo.isCompleted, 'text-muted': props.todo.isCompleted }">
+            <span t-esc="props.todo.id"/>
+            <span>. </span>
+            <span t-esc="props.todo.description"/>
+        </div>
+    </t>
+
+</templates>
+
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
new file mode 100644
index 00000000000..f5d0b1c633b
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -0,0 +1,15 @@
+import { Component, useState } from "@odoo/owl";
+
+import { TodoItem } from "./todo_item"; 
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = { TodoItem }; 
+
+    setup() {
+        this.todos = useState([
+            { id: 2, description: "write tutorial", isCompleted: false },
+            { id: 3, description: "buy milk", isCompleted: true },
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
new file mode 100644
index 00000000000..77bae695cc1
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todo_list" owl="1">
+        <div class="card d-inline-block m-2">
+            <div class="card d-inline-block m-2">
+                <div class="o_todo_list">
+                    <t t-foreach="todos" t-as="todo" t-key="todo.id">
+                        <TodoItem todo="todo"/>
+                    </t>
+                </div>      
+            </div>
+        </div>
+    </t>
+
+</templates>
+

From 32c21b465a3bbc496943241530d5b53e97f8c246 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Tue, 23 Sep 2025 16:37:28 +0200
Subject: [PATCH 02/23] [ADD] 9th section

---
 awesome_owl/static/src/playground.js      |  6 +++---
 awesome_owl/static/src/todo/todo_list.js  | 23 ++++++++++++++++++-----
 awesome_owl/static/src/todo/todo_list.xml |  3 +++
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index dc65a5ecbba..5633a246f99 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -8,13 +8,13 @@ export class Playground extends Component {
     static components = { Card , Counter, TodoList };
     setup() {
         this.htmlContent = markup("<div class='text-primary'>some content</div>");
-        this.state = useState({ sum : 2 });
+        this.state = useState({ sum : 0 });
         this.incrementSum = this.incrementSum.bind(this);
     }
 
     incrementSum() {
-        console.log("hamza");
         this.state.sum ++;
     }
     
-}
\ No newline at end of file
+}
+
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index f5d0b1c633b..69b0aa76bcc 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -7,9 +7,22 @@ export class TodoList extends Component {
     static components = { TodoItem }; 
 
     setup() {
-        this.todos = useState([
-            { id: 2, description: "write tutorial", isCompleted: false },
-            { id: 3, description: "buy milk", isCompleted: true },
-        ]);
+        this.todos = useState([]);
+        this.state = useState({ counter_id : 0});
     }
-}
\ No newline at end of file
+
+    addTodo(ev) {
+        if (ev.keyCode === 13 && ev.target.value){
+            const newTodo = {
+                id : this.state.counter_id,
+                description : ev.target.value,
+                isCompleted : false,
+            }
+            this.state.counter_id ++;
+            this.todos.push(newTodo);
+            ev.target.value = "";
+        };
+        
+    }
+}
+
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index 77bae695cc1..bbc8a61f980 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -5,6 +5,9 @@
         <div class="card d-inline-block m-2">
             <div class="card d-inline-block m-2">
                 <div class="o_todo_list">
+                    <input placeholder="Add a Task"
+                        t-on-keyup="addTodo"
+                        />
                     <t t-foreach="todos" t-as="todo" t-key="todo.id">
                         <TodoItem todo="todo"/>
                     </t>

From 21928ba869d8ab5f755ea76d75bb620af71db650 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Tue, 23 Sep 2025 17:14:14 +0200
Subject: [PATCH 03/23] [ADD] Chapter 10

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

diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index 69b0aa76bcc..965659934c5 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -1,7 +1,8 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
 
 import { TodoItem } from "./todo_item"; 
 
+
 export class TodoList extends Component {
     static template = "awesome_owl.todo_list";
     static components = { TodoItem }; 
@@ -9,6 +10,10 @@ export class TodoList extends Component {
     setup() {
         this.todos = useState([]);
         this.state = useState({ counter_id : 0});
+        this.inputRef = useRef('newTodoInput');
+        onMounted(() => {
+            this.inputRef.el.focus();
+        })
     }
 
     addTodo(ev) {
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index bbc8a61f980..b657904003a 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -7,6 +7,7 @@
                 <div class="o_todo_list">
                     <input placeholder="Add a Task"
                         t-on-keyup="addTodo"
+                        t-ref="newTodoInput"
                         />
                     <t t-foreach="todos" t-as="todo" t-key="todo.id">
                         <TodoItem todo="todo"/>

From f8be1b75b9b89a5990f75f26149b138c20d25fa4 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 09:44:54 +0200
Subject: [PATCH 04/23] [ADD] Chapter 11

---
 awesome_owl/static/src/todo/todo_item.js  | 9 +++++++++
 awesome_owl/static/src/todo/todo_item.xml | 4 ++++
 awesome_owl/static/src/todo/todo_list.js  | 7 +++++++
 awesome_owl/static/src/todo/todo_list.xml | 2 +-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
index a77bf512c90..327827df6e3 100644
--- a/awesome_owl/static/src/todo/todo_item.js
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -12,7 +12,16 @@ export class TodoItem extends Component {
                 isCompleted : Boolean,
             },
         },
+        toggleState: {
+            type: Function,
+            optional: true,
+        },
     };
     
+    onToggleState() {
+        if (this.props.toggleState){
+            this.props.toggleState(this.props.todo.id)
+        }
+    }
 }
 
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
index 3e693ea1f12..9fec528afd6 100644
--- a/awesome_owl/static/src/todo/todo_item.xml
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -3,6 +3,10 @@
 
     <t t-name="awesome_owl.todo_item" owl="1">
         <div class="o_todo_item" t-att-class="{ 'text-decoration-line-through': props.todo.isCompleted, 'text-muted': props.todo.isCompleted }">
+            <input type="checkbox" 
+            t-att="props.todo.isCompleted"
+            t-on-change="onToggleState"
+            />
             <span t-esc="props.todo.id"/>
             <span>. </span>
             <span t-esc="props.todo.description"/>
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index 965659934c5..521a88f6a34 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -29,5 +29,12 @@ export class TodoList extends Component {
         };
         
     }
+
+    toggleTodoState(todoId){
+        const todo = this.todos.find(t=>t.id === todoId);
+        if (todo) {
+            todo.isCompleted = !todo.isCompleted;
+        }
+    }
 }
 
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index b657904003a..be5f486b60c 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -10,7 +10,7 @@
                         t-ref="newTodoInput"
                         />
                     <t t-foreach="todos" t-as="todo" t-key="todo.id">
-                        <TodoItem todo="todo"/>
+                        <TodoItem todo="todo" toggleState.bind="toggleTodoState"/>
                     </t>
                 </div>      
             </div>

From 41e82cc6039256749cbf1f660ea88d819366fd72 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 10:04:28 +0200
Subject: [PATCH 05/23] [ADD] Section 12

---
 awesome_owl/static/src/todo/todo_item.js  | 10 ++++++++++
 awesome_owl/static/src/todo/todo_item.xml | 12 +++++++++---
 awesome_owl/static/src/todo/todo_list.js  |  7 +++++++
 awesome_owl/static/src/todo/todo_list.xml |  2 +-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
index 327827df6e3..41a5074278c 100644
--- a/awesome_owl/static/src/todo/todo_item.js
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -16,6 +16,10 @@ export class TodoItem extends Component {
             type: Function,
             optional: true,
         },
+        removeTodo: {
+            type: Function,
+            optional: true,
+        }
     };
     
     onToggleState() {
@@ -23,5 +27,11 @@ export class TodoItem extends Component {
             this.props.toggleState(this.props.todo.id)
         }
     }
+
+    onDeleteTodo() {
+        if (this.props.removeTodo) {
+            this.props.removeTodo(this.props.todo.id)
+        }
+    }
 }
 
diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml
index 9fec528afd6..0ba2d7c13b6 100644
--- a/awesome_owl/static/src/todo/todo_item.xml
+++ b/awesome_owl/static/src/todo/todo_item.xml
@@ -2,14 +2,20 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_item" owl="1">
-        <div class="o_todo_item" t-att-class="{ 'text-decoration-line-through': props.todo.isCompleted, 'text-muted': props.todo.isCompleted }">
+        <div class="o_todo_item" t-att-class="{
+                    'text-decoration-line-through': props.todo.isCompleted,
+                    'text-muted': props.todo.isCompleted }"
+          >
             <input type="checkbox" 
-            t-att="props.todo.isCompleted"
-            t-on-change="onToggleState"
+                   t-att="props.todo.isCompleted"
+                   t-on-change="onToggleState"
             />
             <span t-esc="props.todo.id"/>
             <span>. </span>
             <span t-esc="props.todo.description"/>
+            <span class="fa fa-remove"
+                  t-on-click="onDeleteTodo"
+            />
         </div>
     </t>
 
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index 521a88f6a34..fb42ec57c50 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -36,5 +36,12 @@ export class TodoList extends Component {
             todo.isCompleted = !todo.isCompleted;
         }
     }
+
+    DeleteTodo(todoId){
+        const todoIndex = this.todos.findIndex(t=>t.id === todoId);
+        if (todoIndex !== -1){
+            this.todos.splice(todoIndex, 1)
+        }
+    }
 }
 
diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml
index be5f486b60c..2fc46642adc 100644
--- a/awesome_owl/static/src/todo/todo_list.xml
+++ b/awesome_owl/static/src/todo/todo_list.xml
@@ -10,7 +10,7 @@
                         t-ref="newTodoInput"
                         />
                     <t t-foreach="todos" t-as="todo" t-key="todo.id">
-                        <TodoItem todo="todo" toggleState.bind="toggleTodoState"/>
+                        <TodoItem todo="todo" toggleState.bind="toggleTodoState" removeTodo.bind="DeleteTodo"/>
                     </t>
                 </div>      
             </div>

From a4fc1716466ba7dbf3f2346c01d2038449a59b74 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 10:25:50 +0200
Subject: [PATCH 06/23] [ADD] Section 13

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

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 83c54f82a4d..bedccc32362 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -9,7 +9,9 @@ export class Card extends Component {
             type: String,
             optional: true,
         },
-        
+        slots:Object, // I added this to allow slots inside cards
+   
     };
   
 }
+
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index f1f12536b24..c94fd5a8808 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -6,10 +6,11 @@
             <div class="card-body">
                 <h5 class="card-title"><t t-esc="props.title"/></h5>
                 <p class="card-text">
-                    <t t-out="props.content"/>
+                    <t t-slot="default"/>
                 </p>
             </div>
         </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 2536fbcf4a6..b0d339c01ef 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,7 +4,9 @@
    <t t-name="awesome_owl.playground" owl="1">
         <Counter  onChange="incrementSum"/>
         <Counter  onChange="incrementSum"/>
-        <Card title="'hamza'" content="htmlContent"/>
+        <Card title="'hamza'">
+            <Counter/>
+        </Card>
         <div>
                 <p>The Sum is: <t t-esc="state.sum"/></p>
         </div>
@@ -12,3 +14,4 @@
    </t>
 
 </templates>
+

From 0ecf95d88a51f7e9d861c6d044ecb7eba2d7599b Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 10:38:09 +0200
Subject: [PATCH 07/23] [ADD] section 14

---
 awesome_owl/static/src/card/card.js  | 11 +++++++++--
 awesome_owl/static/src/card/card.xml | 19 ++++++++++++-------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index bedccc32362..df17893733a 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -1,4 +1,4 @@
-import { Component, markup } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
    static template = "awesome_owl.Card"
@@ -10,8 +10,15 @@ export class Card extends Component {
             optional: true,
         },
         slots:Object, // I added this to allow slots inside cards
-   
     };
+
+    setup(){
+        this.state = useState({open : true});
+    }
+
+    ontoggleVisibility() {
+        this.state.open = !this.state.open;
+    }
   
 }
 
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index c94fd5a8808..c9594077f40 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -2,14 +2,19 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.Card" owl="1">
-        <div class="card d-inline-block m-2">
-            <div class="card-body">
-                <h5 class="card-title"><t t-esc="props.title"/></h5>
-                <p class="card-text">
-                    <t t-slot="default"/>
-                </p>
+        <header>
+            <button t-on-click="ontoggleVisibility"/>
+        </header>
+        <t t-if="state.open">
+            <div class="card d-inline-block m-2">
+                <div class="card-body">
+                    <h5 class="card-title"><t t-esc="props.title"/></h5>
+                    <p class="card-text">
+                        <t t-slot="default"/>
+                    </p>
+                </div>
             </div>
-        </div>
+        </t>
     </t>
 
 </templates>

From a5fc2c220a80df1050cc683ce9ed3e34e76449fd Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 11:58:04 +0200
Subject: [PATCH 08/23] [ADD] Chapter 2 , Section 1 n 2

---
 awesome_dashboard/static/src/dashboard.css |  4 ++++
 awesome_dashboard/static/src/dashboard.js  | 21 +++++++++++++++++++--
 awesome_dashboard/static/src/dashboard.xml | 11 ++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard.css

diff --git a/awesome_dashboard/static/src/dashboard.css b/awesome_dashboard/static/src/dashboard.css
new file mode 100644
index 00000000000..b8e9df84291
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard.css
@@ -0,0 +1,4 @@
+.o_dashboard {
+    background-color: #f0f0f0;
+}
+
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 637fa4bb972..1f8ab010577 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,10 +1,27 @@
-/** @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");
+    }
+    openCustomers() {
+        this.action.doAction("base.action_partner_form");
+    }
+    openLeads() {
+        this.action.doAction({
+            type: 'ir.actions.act_window',
+            name: 'CRM 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.xml b/awesome_dashboard/static/src/dashboard.xml
index 1a2ac9a2fed..9a1ed2f3847 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -2,7 +2,16 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout className="'o_dashboard h-100'" display="{ controlPanel: {} }">
+            <p> HAMZAAAAAAAAAAAAAAAAA </p>
+            <div class="o-awesome-dashboard-content">
+                <span>
+                    <button t-on-click="openCustomers">Customer</button>
+                    <button t-on-click="openLeads">Leads</button>
+                </span>
+            </div>
+        </Layout>
     </t>
 
 </templates>
+

From abb7b5ef19ac8e301d1ea47a3da5c004dd3507e9 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 13:19:14 +0200
Subject: [PATCH 09/23] [ADD] Section 3

---
 awesome_dashboard/static/src/dashboard.js     |  3 ++-
 awesome_dashboard/static/src/dashboard.xml    | 26 ++++++++++++-------
 .../static/src/dashboard_item.js              | 19 ++++++++++++++
 .../static/src/dashboard_item.xml             | 13 ++++++++++
 4 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard_item.js
 create mode 100644 awesome_dashboard/static/src/dashboard_item.xml

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 1f8ab010577..66db9e3e8fd 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -2,10 +2,11 @@ import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import {useService} from "@web/core/utils/hooks";
+import { DashboardItem } from "./dashboard_item";
 
 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 9a1ed2f3847..676f29a007e 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -1,17 +1,25 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.AwesomeDashboard">
-        <Layout className="'o_dashboard h-100'" display="{ controlPanel: {} }">
-            <p> HAMZAAAAAAAAAAAAAAAAA </p>
+<t t-name="awesome_dashboard.AwesomeDashboard" owl="1">
+    <Layout className="'o_dashboard h-100'" display="{ controlPanel: {} }">
+        <t t-set-slot="layout-buttons">
+            <button class="btn btn-primary" t-on-click="openCustomers">Customers</button>
+            <button class="btn btn-secondary" t-on-click="openLeads">Leads</button>
+        </t>
+        <t t-set-slot="default">
             <div class="o-awesome-dashboard-content">
-                <span>
-                    <button t-on-click="openCustomers">Customer</button>
-                    <button t-on-click="openLeads">Leads</button>
-                </span>
+                
+                <DashboardItem>
+                    <p> Here lies the dark </p>
+                </DashboardItem>
+                <DashboardItem size='2'>
+                    <p> Ilove milk </p>
+                </DashboardItem>
             </div>
-        </Layout>
-    </t>
+        </t>
+    </Layout>
+</t>
 
 </templates>
 
diff --git a/awesome_dashboard/static/src/dashboard_item.js b/awesome_dashboard/static/src/dashboard_item.js
new file mode 100644
index 00000000000..1a2307224d6
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item.js
@@ -0,0 +1,19 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.dashboard_item";
+    static props = {
+        size: {
+            type: Number,
+            default: 1,
+            optional: true,
+        },
+        slots: {
+            type: Object,
+        },
+    };
+    get Width() {
+        return 18*this.props.size
+    }
+}
+
diff --git a/awesome_dashboard/static/src/dashboard_item.xml b/awesome_dashboard/static/src/dashboard_item.xml
new file mode 100644
index 00000000000..7f117782f2c
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_item" owl='1'>
+        <div class="card d-inline-block m-2" t-attf-style="width: {{Width}}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+
+</templates>
+

From ef33a663bf9112982a6daa498dcbb3750938b1b6 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 13:55:17 +0200
Subject: [PATCH 10/23] [ADD] Section 4

---
 awesome_dashboard/static/src/dashboard.js  |  8 ++++--
 awesome_dashboard/static/src/dashboard.xml | 30 +++++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 66db9e3e8fd..c1e5f493185 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,14 +1,18 @@
-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 { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item";
+import { rpc } from "@web/core/network/rpc";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
     static components = { Layout, DashboardItem }
     setup() {
         this.action = useService("action");
+        onWillStart(async () => {
+            this.result = await rpc("/awesome_dashboard/statistics");
+        });
     }
     openCustomers() {
         this.action.doAction("base.action_partner_form");
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 676f29a007e..20f4436758d 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -11,10 +11,34 @@
             <div class="o-awesome-dashboard-content">
                 
                 <DashboardItem>
-                    <p> Here lies the dark </p>
+                    Average amount of t-shirt by order this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="result.average_quantity"/>
+                    </div>
                 </DashboardItem>
-                <DashboardItem size='2'>
-                    <p> Ilove milk </p>
+                <DashboardItem>
+                    Average time for an order to go from 'new' to 'sent' or 'cancelled'
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="result.average_time"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem>
+                    Number of new orders this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="result.nb_new_orders"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem>
+                    Number of cancelled orders this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="result.nb_cancelled_orders"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem>
+                    Total amount of new orders this month
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="result.total_amount"/>
+                    </div>
                 </DashboardItem>
             </div>
         </t>

From 34ffcc5cdb31e9ad2abccb1b7bbedfb198fcbc08 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 14:52:50 +0200
Subject: [PATCH 11/23] [ADD] Section 5

---
 awesome_dashboard/static/src/dashboard.js       |  6 ++++--
 .../static/src/statistics_service.js            | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 2 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 c1e5f493185..9b77070ce6f 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,4 +1,4 @@
-import { Component, onWillStart } from "@odoo/owl";
+import { Component, onWillStart,useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
@@ -10,8 +10,10 @@ class AwesomeDashboard extends Component {
     static components = { Layout, DashboardItem }
     setup() {
         this.action = useService("action");
+        this.statistics = useService("awesome_dashboard.statistics");
+        
         onWillStart(async () => {
-            this.result = await rpc("/awesome_dashboard/statistics");
+            this.result = await this.statistics.loadStatistics();
         });
     }
     openCustomers() {
diff --git a/awesome_dashboard/static/src/statistics_service.js b/awesome_dashboard/static/src/statistics_service.js
new file mode 100644
index 00000000000..4f76680e0dc
--- /dev/null
+++ b/awesome_dashboard/static/src/statistics_service.js
@@ -0,0 +1,17 @@
+import { registry } from "@web/core/registry";
+import { memoize } from "@web/core/utils/functions";
+import { rpc } from "@web/core/network/rpc";
+
+
+const statisticsService = {
+    start() {
+
+        return {
+            loadStatistics: memoize(async () => await rpc("/awesome_dashboard/statistics")),
+            
+        };
+    },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);
+

From abb94b68f5e785cc8623d313f2b2aa3eae52fa7d Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Wed, 24 Sep 2025 17:11:03 +0200
Subject: [PATCH 12/23] [ADD] Section 6

---
 awesome_dashboard/static/src/dashboard.js  |  5 ++-
 awesome_dashboard/static/src/dashboard.xml |  4 +++
 awesome_dashboard/static/src/pie_chart.js  | 41 ++++++++++++++++++++++
 awesome_dashboard/static/src/pie_chart.xml | 13 +++++++
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 awesome_dashboard/static/src/pie_chart.js
 create mode 100644 awesome_dashboard/static/src/pie_chart.xml

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 9b77070ce6f..d7c1fe3d420 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -3,17 +3,20 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item";
+import { PieChart } from "./pie_chart";
+
 import { rpc } from "@web/core/network/rpc";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, DashboardItem }
+    static components = { Layout, DashboardItem, PieChart }
     setup() {
         this.action = useService("action");
         this.statistics = useService("awesome_dashboard.statistics");
         
         onWillStart(async () => {
             this.result = await this.statistics.loadStatistics();
+            console.log(this.result);
         });
     }
     openCustomers() {
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 20f4436758d..6359cf3e1ad 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -40,6 +40,10 @@
                         <t t-esc="result.total_amount"/>
                     </div>
                 </DashboardItem>
+                <DashboardItem>
+                    Shirt order by size
+                    <PieChart label="'Orders By Size'" data="result.orders_by_size"/>
+                </DashboardItem>
             </div>
         </t>
     </Layout>
diff --git a/awesome_dashboard/static/src/pie_chart.js b/awesome_dashboard/static/src/pie_chart.js
new file mode 100644
index 00000000000..961af819fe8
--- /dev/null
+++ b/awesome_dashboard/static/src/pie_chart.js
@@ -0,0 +1,41 @@
+import { Component, onWillStart,useRef, onMounted, onWillUnmount } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.pie_chart";
+    static props = {
+        label: String,
+        data : Object,
+    }
+    setup(){
+        this.canvasRef = useRef("canvas_pie");
+        onWillStart(async () => loadJS("/web/static/lib/Chart/Chart.js"));
+        onMounted(()=> {
+            this.renderChart();
+            }   
+        );
+        onWillUnmount(()=> {
+            this.chart.destroy();
+        });
+
+
+    }
+
+    renderChart(){
+        this.chart = new Chart(this.canvasRef.el,{
+            type: 'pie',
+            data : {
+                labels : Object.keys(this.props.data),
+                datasets:[
+                    {
+                    label: this.props.label,
+                    data : Object.values(this.props.data),
+                    },
+                ],
+            }
+        })
+
+    }
+}
+
diff --git a/awesome_dashboard/static/src/pie_chart.xml b/awesome_dashboard/static/src/pie_chart.xml
new file mode 100644
index 00000000000..f3e28576278
--- /dev/null
+++ b/awesome_dashboard/static/src/pie_chart.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.pie_chart" owl='1'>
+        <div t-att-class="'h-100 ' + props.class">
+            <div class="h-100 position-relative">
+                <canvas t-ref="canvas_pie" />
+            </div>
+        </div>
+    </t>
+
+</templates>
+

From 8c7d4484ee575ad4dbf634c8594c4bfd68003c3b Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Thu, 25 Sep 2025 09:53:34 +0200
Subject: [PATCH 13/23] [ADD] Section 7

---
 awesome_dashboard/static/src/dashboard.js        |  8 +-------
 awesome_dashboard/static/src/dashboard.xml       |  2 +-
 .../static/src/statistics_service.js             | 16 +++++++++++-----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index d7c1fe3d420..c7961efec94 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -5,19 +5,13 @@ import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item";
 import { PieChart } from "./pie_chart";
 
-import { rpc } from "@web/core/network/rpc";
-
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
     static components = { Layout, DashboardItem, PieChart }
     setup() {
         this.action = useService("action");
         this.statistics = useService("awesome_dashboard.statistics");
-        
-        onWillStart(async () => {
-            this.result = await this.statistics.loadStatistics();
-            console.log(this.result);
-        });
+        this.result = useState(this.statistics);
     }
     openCustomers() {
         this.action.doAction("base.action_partner_form");
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 6359cf3e1ad..4148be6c443 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -8,7 +8,7 @@
             <button class="btn btn-secondary" t-on-click="openLeads">Leads</button>
         </t>
         <t t-set-slot="default">
-            <div class="o-awesome-dashboard-content">
+            <div class="o-awesome-dashboard-content" t-if="statistics.isReady">
                 
                 <DashboardItem>
                     Average amount of t-shirt by order this month
diff --git a/awesome_dashboard/static/src/statistics_service.js b/awesome_dashboard/static/src/statistics_service.js
index 4f76680e0dc..64cd61d8433 100644
--- a/awesome_dashboard/static/src/statistics_service.js
+++ b/awesome_dashboard/static/src/statistics_service.js
@@ -1,15 +1,21 @@
 import { registry } from "@web/core/registry";
-import { memoize } from "@web/core/utils/functions";
 import { rpc } from "@web/core/network/rpc";
+import { reactive } from "@odoo/owl"
 
 
 const statisticsService = {
     start() {
 
-        return {
-            loadStatistics: memoize(async () => await rpc("/awesome_dashboard/statistics")),
-            
-        };
+        const statistics = reactive({isReady : false});
+
+        async function loadingData() {
+            const data = await rpc("/awesome_dashboard/statistics");
+            Object.assign(statistics,data,{isReady : true});
+            setInterval(loadingData, 10*60*1000);
+        }
+
+        loadingData();
+        return statistics;
     },
 };
 

From 3dbc265c113fea2d4a45bebd614202d7ed382cf8 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Thu, 25 Sep 2025 10:44:33 +0200
Subject: [PATCH 14/23] [ADD] Section 8

---
 awesome_dashboard/__manifest__.py                   |  4 ++++
 .../static/src/{ => dashboard}/dashboard.css        |  0
 .../static/src/{ => dashboard}/dashboard.js         |  2 +-
 .../static/src/{ => dashboard}/dashboard.xml        |  0
 .../static/src/{ => dashboard}/dashboard_item.js    |  0
 .../static/src/{ => dashboard}/dashboard_item.xml   |  0
 .../static/src/{ => dashboard}/pie_chart.js         |  0
 .../static/src/{ => dashboard}/pie_chart.xml        |  0
 .../src/{ => dashboard}/statistics_service.js       |  0
 awesome_dashboard/static/src/dashboard_action.js    | 13 +++++++++++++
 10 files changed, 18 insertions(+), 1 deletion(-)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.css (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.js (92%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard_item.js (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard_item.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/pie_chart.js (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/pie_chart.xml (100%)
 rename awesome_dashboard/static/src/{ => dashboard}/statistics_service.js (100%)
 create mode 100644 awesome_dashboard/static/src/dashboard_action.js

diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index 31406e8addb..1456d530b42 100644
--- a/awesome_dashboard/__manifest__.py
+++ b/awesome_dashboard/__manifest__.py
@@ -24,6 +24,10 @@
     'assets': {
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
+            ('remove', 'awesome_dashboard/static/src/dashboard/*'),
+        ],
+        'awesome_dashboard.dashboard': [
+            'awesome_dashboard/static/src/dashboard/*',
         ],
     },
     'license': 'AGPL-3'
diff --git a/awesome_dashboard/static/src/dashboard.css b/awesome_dashboard/static/src/dashboard/dashboard.css
similarity index 100%
rename from awesome_dashboard/static/src/dashboard.css
rename to awesome_dashboard/static/src/dashboard/dashboard.css
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
similarity index 92%
rename from awesome_dashboard/static/src/dashboard.js
rename to awesome_dashboard/static/src/dashboard/dashboard.js
index c7961efec94..bf7b228cbe5 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -27,5 +27,5 @@ class AwesomeDashboard extends Component {
     }
 }
 
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
 
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard.xml
rename to awesome_dashboard/static/src/dashboard/dashboard.xml
diff --git a/awesome_dashboard/static/src/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item.js
similarity index 100%
rename from awesome_dashboard/static/src/dashboard_item.js
rename to awesome_dashboard/static/src/dashboard/dashboard_item.js
diff --git a/awesome_dashboard/static/src/dashboard_item.xml b/awesome_dashboard/static/src/dashboard/dashboard_item.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard_item.xml
rename to awesome_dashboard/static/src/dashboard/dashboard_item.xml
diff --git a/awesome_dashboard/static/src/pie_chart.js b/awesome_dashboard/static/src/dashboard/pie_chart.js
similarity index 100%
rename from awesome_dashboard/static/src/pie_chart.js
rename to awesome_dashboard/static/src/dashboard/pie_chart.js
diff --git a/awesome_dashboard/static/src/pie_chart.xml b/awesome_dashboard/static/src/dashboard/pie_chart.xml
similarity index 100%
rename from awesome_dashboard/static/src/pie_chart.xml
rename to awesome_dashboard/static/src/dashboard/pie_chart.xml
diff --git a/awesome_dashboard/static/src/statistics_service.js b/awesome_dashboard/static/src/dashboard/statistics_service.js
similarity index 100%
rename from awesome_dashboard/static/src/statistics_service.js
rename to awesome_dashboard/static/src/dashboard/statistics_service.js
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js
new file mode 100644
index 00000000000..26212c7acbb
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_action.js
@@ -0,0 +1,13 @@
+import { Component, xml } from "@odoo/owl";
+import {LazyComponent } from "@web/core/assets";
+import { registry } from "@web/core/registry";
+
+export class AwesomeDashboardLoader extends Component {
+    static components = { LazyComponent };
+    static template = xml`
+        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" />
+    `;
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader);
+

From 3f92bd4d2718b529382c27513c323fd4bf22bcf6 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Fri, 26 Sep 2025 15:40:07 +0200
Subject: [PATCH 15/23] [ADD] Section 9

---
 awesome_dashboard/__manifest__.py             |  5 +-
 .../static/src/dashboard/dashboard.js         | 11 ++--
 .../static/src/dashboard/dashboard.xml        | 43 ++----------
 .../static/src/dashboard/dashboard_item.js    |  2 +-
 .../static/src/dashboard/dashboard_items.js   | 65 +++++++++++++++++++
 .../src/dashboard/numbercard/number_card.js   | 14 ++++
 .../src/dashboard/numbercard/number_card.xml  | 14 ++++
 .../dashboard/{ => pie_chart}/pie_chart.js    |  7 +-
 .../dashboard/{ => pie_chart}/pie_chart.xml   |  0
 .../dashboard/piechartcard/pirchart_card.js   | 16 +++++
 .../dashboard/piechartcard/pirchart_card.xml  | 14 ++++
 .../src/dashboard/statistics_service.js       |  3 +-
 .../static/src/dashboard_action.js            |  4 +-
 awesome_owl/static/src/card/card.js           |  4 +-
 awesome_owl/static/src/counter/counter.js     |  8 +--
 awesome_owl/static/src/counter/counter.xml    |  3 +-
 awesome_owl/static/src/playground.js          |  4 +-
 awesome_owl/static/src/playground.xml         |  2 +-
 awesome_owl/static/src/todo/todo_item.js      |  8 +--
 awesome_owl/static/src/todo/todo_list.js      |  6 +-
 20 files changed, 163 insertions(+), 70 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard/dashboard_items.js
 create mode 100644 awesome_dashboard/static/src/dashboard/numbercard/number_card.js
 create mode 100644 awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
 rename awesome_dashboard/static/src/dashboard/{ => pie_chart}/pie_chart.js (93%)
 rename awesome_dashboard/static/src/dashboard/{ => pie_chart}/pie_chart.xml (100%)
 create mode 100644 awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.js
 create mode 100644 awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.xml

diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index 1456d530b42..3c8f618888e 100644
--- a/awesome_dashboard/__manifest__.py
+++ b/awesome_dashboard/__manifest__.py
@@ -24,10 +24,11 @@
     'assets': {
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
-            ('remove', 'awesome_dashboard/static/src/dashboard/*'),
+            ('remove', 'awesome_dashboard/static/src/dashboard/**/*'),
+            
         ],
         'awesome_dashboard.dashboard': [
-            'awesome_dashboard/static/src/dashboard/*',
+            'awesome_dashboard/static/src/dashboard/**/*',
         ],
     },
     'license': 'AGPL-3'
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index bf7b228cbe5..eacc01abe91 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -3,23 +3,26 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item";
-import { PieChart } from "./pie_chart";
+import { PieChart } from "./pie_chart/pie_chart";
+import { items } from "./dashboard_items";
+import { _t } from "@web/core/l10n/translation";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
     static components = { Layout, DashboardItem, PieChart }
     setup() {
         this.action = useService("action");
-        this.statistics = useService("awesome_dashboard.statistics");
-        this.result = useState(this.statistics);
+        this.result = useState(useService("awesome_dashboard.statistics"));
+        this.items = items;
     }
     openCustomers() {
         this.action.doAction("base.action_partner_form");
     }
     openLeads() {
+       
         this.action.doAction({
             type: 'ir.actions.act_window',
-            name: 'CRM Leads',
+            name: _t('CRM Leads'),
             target: 'current',
             res_model: 'crm.lead',
             views: [[false,'list'],[false, 'form']],
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
index 4148be6c443..995f1c5f0f0 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard.xml
@@ -8,42 +8,13 @@
             <button class="btn btn-secondary" t-on-click="openLeads">Leads</button>
         </t>
         <t t-set-slot="default">
-            <div class="o-awesome-dashboard-content" t-if="statistics.isReady">
-                
-                <DashboardItem>
-                    Average amount of t-shirt by order this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="result.average_quantity"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Average time for an order to go from 'new' to 'sent' or 'cancelled'
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="result.average_time"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Number of new orders this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="result.nb_new_orders"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Number of cancelled orders this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="result.nb_cancelled_orders"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Total amount of new orders this month
-                    <div class="fs-1 fw-bold text-success text-center">
-                        <t t-esc="result.total_amount"/>
-                    </div>
-                </DashboardItem>
-                <DashboardItem>
-                    Shirt order by size
-                    <PieChart label="'Orders By Size'" data="result.orders_by_size"/>
-                </DashboardItem>
+            <div class="o-awesome-dashboard-content" t-if="result.isReady">
+                <t t-foreach="items" t-as="item" t-key="item.id">
+                    <DashboardItem size="item.size || 1">
+                        <t t-set="itemProp" t-value="item.props ? item.props(result) : {'data': result}"/>
+                        <t t-component="item.Component" t-props="itemProp" />
+                    </DashboardItem>
+                </t>
             </div>
         </t>
     </Layout>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item.js
index 1a2307224d6..a2c5866b9a7 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_item.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.js
@@ -5,7 +5,7 @@ export class DashboardItem extends Component {
     static props = {
         size: {
             type: Number,
-            default: 1,
+            defaultProps: 1,
             optional: true,
         },
         slots: {
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
new file mode 100644
index 00000000000..74f2e83609e
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -0,0 +1,65 @@
+import { NumberCard } from "./numbercard/number_card";
+import { PieChartCard } from "./piechartcard/pirchart_card";
+
+export const items = [
+    {
+        id: "average_quantity",
+        description: "Average amount of t-shirt",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Average amount of tees ordered this month",
+            value: data.average_quantity,
+        })
+    },
+
+    {
+        id: "average_time",
+        description: "Average time of an order",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+            value: data.average_time,
+        })
+    },
+
+    {
+        id: "nb_new_orders",
+        description: "Number of new orders this month",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Number of new orders this month",
+            value: data.nb_new_orders,
+        })
+    },
+
+    {
+        id: "nb_cancelled_orders",
+        description: "Number of cancelled orders this month",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Number of cancelled orders this month",
+            value: data.nb_cancelled_orders,
+        })
+    },
+
+    {
+        id: "total_amount",
+        description: "Total amount of new orders this month",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Total amount of new orders this month",
+            value: data.total_amount,
+        })
+    },
+
+    {
+        id: "orders_pir_chart",
+        description: "Shirt order by size",
+        Component: PieChartCard,
+        props: (data) => ({
+            title: "Shirt order by size",
+            data: data.orders_by_size,
+        })
+    },
+
+]
\ No newline at end of file
diff --git a/awesome_dashboard/static/src/dashboard/numbercard/number_card.js b/awesome_dashboard/static/src/dashboard/numbercard/number_card.js
new file mode 100644
index 00000000000..c06428085f6
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/numbercard/number_card.js
@@ -0,0 +1,14 @@
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component {
+    static template = "awesome_dashboard.numbercard";
+    static props = {
+        title: {
+            type: String,
+        },
+        value: {
+            type: Number,
+        },
+    };
+}
+
diff --git a/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml b/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
new file mode 100644
index 00000000000..9dbdc155129
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.numbercard" owl='1'>
+        <div class="d-flex flex-wrap">
+            <t t-esc="props.title"/>
+            <div class="fs-1 fw-bold text-success text-center">
+                 <t t-esc="props.value"/>
+            </div>
+        </div>
+    </t>
+
+</templates>
+
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart.js b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
similarity index 93%
rename from awesome_dashboard/static/src/dashboard/pie_chart.js
rename to awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
index 961af819fe8..5dfbcbd9ad5 100644
--- a/awesome_dashboard/static/src/dashboard/pie_chart.js
+++ b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
@@ -13,13 +13,12 @@ export class PieChart extends Component {
         onWillStart(async () => loadJS("/web/static/lib/Chart/Chart.js"));
         onMounted(()=> {
             this.renderChart();
-            }   
-        );
+        });  
+            
         onWillUnmount(()=> {
-            this.chart.destroy();
+            this.chart?.destroy();
         });
 
-
     }
 
     renderChart(){
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart.xml b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard/pie_chart.xml
rename to awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
diff --git a/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.js b/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.js
new file mode 100644
index 00000000000..9eecd286698
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.js
@@ -0,0 +1,16 @@
+import { Component } from "@odoo/owl";
+import { PieChart } from "../pie_chart/pie_chart";
+
+export class PieChartCard extends Component {
+    static components = { PieChart }
+    static template = "awesome_dashboard.piechartcard";
+    static props = {
+        title: {
+            type: String,
+        },
+        data: {
+            type: Object,
+        },
+    };
+}
+
diff --git a/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.xml b/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.xml
new file mode 100644
index 00000000000..03bc0663f13
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.piechartcard" owl='1'>
+        <div t-att-class="'h-100 ' + props.class">
+            <div class="h-100 position-relative">
+                <t t-esc="props.title"/>
+                <PieChart data="props.data" label = "''"/>
+            </div>
+        </div>
+    </t>
+
+</templates>
+
diff --git a/awesome_dashboard/static/src/dashboard/statistics_service.js b/awesome_dashboard/static/src/dashboard/statistics_service.js
index 64cd61d8433..39bdcf5dd6a 100644
--- a/awesome_dashboard/static/src/dashboard/statistics_service.js
+++ b/awesome_dashboard/static/src/dashboard/statistics_service.js
@@ -11,10 +11,11 @@ const statisticsService = {
         async function loadingData() {
             const data = await rpc("/awesome_dashboard/statistics");
             Object.assign(statistics,data,{isReady : true});
-            setInterval(loadingData, 10*60*1000);
+            
         }
 
         loadingData();
+        setInterval(loadingData, 10*60*1000);
         return statistics;
     },
 };
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js
index 26212c7acbb..c00005754a6 100644
--- a/awesome_dashboard/static/src/dashboard_action.js
+++ b/awesome_dashboard/static/src/dashboard_action.js
@@ -4,8 +4,8 @@ import { registry } from "@web/core/registry";
 
 export class AwesomeDashboardLoader extends Component {
     static components = { LazyComponent };
-    static template = xml`
-        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" />
+    static template = xml `
+        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" props="props"/>
     `;
 }
 
diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index df17893733a..bfa08c956e5 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -9,14 +9,14 @@ export class Card extends Component {
             type: String,
             optional: true,
         },
-        slots:Object, // I added this to allow slots inside cards
+        slots: Object, // I added this to allow slots inside cards
     };
 
     setup(){
         this.state = useState({open : true});
     }
 
-    ontoggleVisibility() {
+    onToggleVisibility() {
         this.state.open = !this.state.open;
     }
   
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index 2bf2da49318..c92194e61d6 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -10,13 +10,11 @@ export class Counter extends Component {
    };
 
    setup() {
-       this.state =useState({ value: 0 });
+       this.state = useState({ value: 0 });
    }
 
    increment() {
-       this.state.value ++;
-       if (this.props.onChange){
-            this.props.onChange();
-       }
+       this.state.value++;
+       this.props.onChange?.();
    }
 }
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
index 1b56b5ea32f..15d6d402e58 100644
--- a/awesome_owl/static/src/counter/counter.xml
+++ b/awesome_owl/static/src/counter/counter.xml
@@ -8,4 +8,5 @@
        </div>
    </t>
 
-</templates>
\ No newline at end of file
+</templates>
+
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 5633a246f99..37609ece487 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,5 +1,5 @@
 import { Component, markup , useState} from "@odoo/owl";
-import { Card } from "./card/card"; // Import the Card component
+import { Card } from "./card/card";
 import { Counter } from "./counter/counter";
 import { TodoList } from "./todo/todo_list";
 
@@ -13,7 +13,7 @@ export class Playground extends Component {
     }
 
     incrementSum() {
-        this.state.sum ++;
+        this.state.sum++;
     }
     
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index b0d339c01ef..68cc2f03e05 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,7 +4,7 @@
    <t t-name="awesome_owl.playground" owl="1">
         <Counter  onChange="incrementSum"/>
         <Counter  onChange="incrementSum"/>
-        <Card title="'hamza'">
+        <Card title="'counter card'">
             <Counter/>
         </Card>
         <div>
diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js
index 41a5074278c..e59997f2475 100644
--- a/awesome_owl/static/src/todo/todo_item.js
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -23,15 +23,11 @@ export class TodoItem extends Component {
     };
     
     onToggleState() {
-        if (this.props.toggleState){
-            this.props.toggleState(this.props.todo.id)
-        }
+        this.props.toggleState?.(this.props.todo.id);
     }
 
     onDeleteTodo() {
-        if (this.props.removeTodo) {
-            this.props.removeTodo(this.props.todo.id)
-        }
+        this.props.removeTodo?.(this.props.todo.id);
     }
 }
 
diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js
index fb42ec57c50..9e76c5f4f08 100644
--- a/awesome_owl/static/src/todo/todo_list.js
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -23,21 +23,21 @@ export class TodoList extends Component {
                 description : ev.target.value,
                 isCompleted : false,
             }
-            this.state.counter_id ++;
+            this.state.counter_id++;
             this.todos.push(newTodo);
             ev.target.value = "";
         };
         
     }
 
-    toggleTodoState(todoId){
+    toggleTodoState(todoId) {
         const todo = this.todos.find(t=>t.id === todoId);
         if (todo) {
             todo.isCompleted = !todo.isCompleted;
         }
     }
 
-    DeleteTodo(todoId){
+    DeleteTodo(todoId) {
         const todoIndex = this.todos.findIndex(t=>t.id === todoId);
         if (todoIndex !== -1){
             this.todos.splice(todoIndex, 1)

From f4f128c67e3fa21115ca26dd1d73558377039d65 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Fri, 26 Sep 2025 15:45:06 +0200
Subject: [PATCH 16/23] [FIX] added end of line on dashboard_items file

---
 awesome_dashboard/static/src/dashboard/dashboard_items.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
index 74f2e83609e..e62a84f9b21 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_items.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -62,4 +62,5 @@ export const items = [
         })
     },
 
-]
\ No newline at end of file
+]
+

From 350d4cf175ae02ae8fe4d41317c32ffe48d61cd5 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Fri, 26 Sep 2025 15:52:55 +0200
Subject: [PATCH 17/23] [ADD] Section 10

---
 awesome_dashboard/static/src/dashboard/dashboard.js       | 3 ++-
 awesome_dashboard/static/src/dashboard/dashboard_items.js | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index eacc01abe91..8bafd131316 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -13,7 +13,8 @@ class AwesomeDashboard extends Component {
     setup() {
         this.action = useService("action");
         this.result = useState(useService("awesome_dashboard.statistics"));
-        this.items = items;
+        this.items = registry.category("awesome_dashboard").getAll();
+
     }
     openCustomers() {
         this.action.doAction("base.action_partner_form");
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
index e62a84f9b21..dafc1d155a3 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_items.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -1,5 +1,6 @@
 import { NumberCard } from "./numbercard/number_card";
 import { PieChartCard } from "./piechartcard/pirchart_card";
+import { registry } from "@web/core/registry";
 
 export const items = [
     {
@@ -64,3 +65,7 @@ export const items = [
 
 ]
 
+items.forEach(item => {
+    registry.category("awesome_dashboard").add(item.id, item);
+})
+

From d1388b116ad02f42b88c77698ed65b09403be13b Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Fri, 26 Sep 2025 17:37:58 +0200
Subject: [PATCH 18/23] [ADD] Section 11

---
 .../static/src/dashboard/config_dialog.js     | 44 +++++++++++++++++++
 .../static/src/dashboard/config_dialog.xml    | 21 +++++++++
 .../static/src/dashboard/dashboard.js         | 24 ++++++++--
 .../static/src/dashboard/dashboard.xml        |  7 ++-
 .../static/src/dashboard/dashboard_item.xml   |  2 +-
 .../src/dashboard/pie_chart/pie_chart.xml     |  2 +-
 6 files changed, 92 insertions(+), 8 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard/config_dialog.js
 create mode 100644 awesome_dashboard/static/src/dashboard/config_dialog.xml

diff --git a/awesome_dashboard/static/src/dashboard/config_dialog.js b/awesome_dashboard/static/src/dashboard/config_dialog.js
new file mode 100644
index 00000000000..34d4f3f6be4
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/config_dialog.js
@@ -0,0 +1,44 @@
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { items } from "./dashboard_items";
+import { registry } from "@web/core/registry";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { browser } from "@web/core/browser/browser";
+
+
+export class ConfigDialog extends Component {
+    static template = "awesome_dashboard.ConfigDialog";
+    static components = { Dialog, CheckBox }; 
+    static props = ["close", "items", "disabledItems", "onUpdateConfigs"];
+    setup() {
+        // create object for each item with an enabled property
+        this.items = useState(this.props.items.map((item) => {
+            return {
+                ...item,
+                enabled: !this.props.disabledItems.includes(item.id),
+            }
+        }));
+        
+    }
+    
+    // adds the unchecked item to the disabled list
+    onChange(checkedItems, Item) {
+        Item.enabled = checkedItems;
+      
+        const updatedDisabledItems = Object.values(this.items).filter(
+            (item) => !item.enabled
+        ).map((item) => item.id);
+
+        browser.localStorage.setItem(
+            "disabledItems", updatedDisabledItems,
+        );
+
+        this.props.onUpdateConfigs(updatedDisabledItems);
+    }
+
+    done() {
+        this.props.close();
+    }
+    
+}
+
diff --git a/awesome_dashboard/static/src/dashboard/config_dialog.xml b/awesome_dashboard/static/src/dashboard/config_dialog.xml
new file mode 100644
index 00000000000..975eba8d94a
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/config_dialog.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.ConfigDialog" >
+        <Dialog title="'Dashboard items configuration'">
+                Which cards do you whish to see ?
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                    <CheckBox value="item.enabled" onChange="(ev) => this.onChange(ev, item)">
+                        <t t-esc="item.description"/>
+                    </CheckBox>
+            </t>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="done">
+                    Done
+                </button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
+
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index 8bafd131316..2458d4c5619 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -3,22 +3,38 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item";
-import { PieChart } from "./pie_chart/pie_chart";
-import { items } from "./dashboard_items";
+import { ConfigDialog } from "./config_dialog";
+import { browser } from "@web/core/browser/browser";
 import { _t } from "@web/core/l10n/translation";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, DashboardItem, PieChart }
+    static components = { Layout, DashboardItem }
     setup() {
         this.action = useService("action");
         this.result = useState(useService("awesome_dashboard.statistics"));
         this.items = registry.category("awesome_dashboard").getAll();
-
+        this.dialog = useService("dialog");
+        // retreive disabled items
+        this.state = useState({
+            disabledItems: browser.localStorage.getItem("disabledItems")?.split(",") || []
+        });
     }
     openCustomers() {
         this.action.doAction("base.action_partner_form");
     }
+    openConfigs() {
+        this.dialog.add(ConfigDialog, {
+            items: this.items,
+            disabledItems: this.state.disabledItems,
+            onUpdateConfigs: this.updateConfigs.bind(this),
+        });
+    }
+    // update the list of disabeled items
+    updateConfigs(newDisabledItems) {
+        this.state.disabledItems = newDisabledItems;
+    }
+
     openLeads() {
        
         this.action.doAction({
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml
index 995f1c5f0f0..43ee18533de 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard.xml
@@ -1,16 +1,19 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-<t t-name="awesome_dashboard.AwesomeDashboard" owl="1">
+<t t-name="awesome_dashboard.AwesomeDashboard" >
     <Layout className="'o_dashboard h-100'" display="{ controlPanel: {} }">
         <t t-set-slot="layout-buttons">
             <button class="btn btn-primary" t-on-click="openCustomers">Customers</button>
             <button class="btn btn-secondary" t-on-click="openLeads">Leads</button>
+            <button t-on-click="openConfigs" class="btn p-0 ms-1 border-0">
+                <i class="fa fa-cog"></i>
+            </button>
         </t>
         <t t-set-slot="default">
             <div class="o-awesome-dashboard-content" t-if="result.isReady">
                 <t t-foreach="items" t-as="item" t-key="item.id">
-                    <DashboardItem size="item.size || 1">
+                    <DashboardItem t-if="!state.disabledItems.includes(item.id)"  size="item.size || 1">
                         <t t-set="itemProp" t-value="item.props ? item.props(result) : {'data': result}"/>
                         <t t-component="item.Component" t-props="itemProp" />
                     </DashboardItem>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.xml b/awesome_dashboard/static/src/dashboard/dashboard_item.xml
index 7f117782f2c..b00e7118de1 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_item.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.dashboard_item" owl='1'>
+    <t t-name="awesome_dashboard.dashboard_item">
         <div class="card d-inline-block m-2" t-attf-style="width: {{Width}}rem;">
             <div class="card-body">
                 <t t-slot="default"/>
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
index f3e28576278..cb9d26c2128 100644
--- a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
+++ b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.pie_chart" owl='1'>
+    <t t-name="awesome_dashboard.pie_chart" >
         <div t-att-class="'h-100 ' + props.class">
             <div class="h-100 position-relative">
                 <canvas t-ref="canvas_pie" />

From 8262cb2685cab204afe568237ddb110f17926395 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Mon, 29 Sep 2025 09:46:49 +0200
Subject: [PATCH 19/23] [FIX] Section 9

---
 .../static/src/dashboard/dashboard.js         |  2 +-
 .../static/src/dashboard/dashboard_item.js    |  4 +--
 .../static/src/dashboard/dashboard_item.xml   |  2 +-
 .../static/src/dashboard/dashboard_items.js   | 29 ++++++++++---------
 .../src/dashboard/numbercard/number_card.js   |  2 +-
 .../src/dashboard/numbercard/number_card.xml  |  2 +-
 .../src/dashboard/pie_chart/pie_chart.js      |  7 +++--
 .../src/dashboard/pie_chart/pie_chart.xml     |  2 +-
 .../{pirchart_card.js => piechart_card.js}    |  2 +-
 .../{pirchart_card.xml => piechart_card.xml}  |  4 +--
 10 files changed, 30 insertions(+), 26 deletions(-)
 rename awesome_dashboard/static/src/dashboard/piechartcard/{pirchart_card.js => piechart_card.js} (84%)
 rename awesome_dashboard/static/src/dashboard/piechartcard/{pirchart_card.xml => piechart_card.xml} (70%)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index 2458d4c5619..988d804e8fd 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -39,7 +39,7 @@ class AwesomeDashboard extends Component {
        
         this.action.doAction({
             type: 'ir.actions.act_window',
-            name: _t('CRM Leads'),
+            name: _t("CRM Leads"),
             target: 'current',
             res_model: 'crm.lead',
             views: [[false,'list'],[false, 'form']],
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item.js
index a2c5866b9a7..637592608e3 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_item.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.js
@@ -1,11 +1,11 @@
 import { Component } from "@odoo/owl";
 
 export class DashboardItem extends Component {
-    static template = "awesome_dashboard.dashboard_item";
+    static template = "awesome_dashboard.DashboardItem";
+    static defaultProps = { size: 1};
     static props = {
         size: {
             type: Number,
-            defaultProps: 1,
             optional: true,
         },
         slots: {
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.xml b/awesome_dashboard/static/src/dashboard/dashboard_item.xml
index b00e7118de1..59ba238fd35 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_item.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.dashboard_item">
+    <t t-name="awesome_dashboard.DashboardItem">
         <div class="card d-inline-block m-2" t-attf-style="width: {{Width}}rem;">
             <div class="card-body">
                 <t t-slot="default"/>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
index dafc1d155a3..d92ef34ffcd 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_items.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -1,64 +1,65 @@
 import { NumberCard } from "./numbercard/number_card";
-import { PieChartCard } from "./piechartcard/pirchart_card";
+import { PieChartCard } from "./piechartcard/piechart_card";
 import { registry } from "@web/core/registry";
+import { _t } from "@web/core/l10n/translation";
 
 export const items = [
     {
         id: "average_quantity",
-        description: "Average amount of t-shirt",
+        description: _t("Average amount of t-shirt"),
         Component: NumberCard,
         props: (data) => ({
-            title: "Average amount of tees ordered this month",
+            title: _t("Average amount of tees ordered this month"),
             value: data.average_quantity,
         })
     },
 
     {
         id: "average_time",
-        description: "Average time of an order",
+        description: _t("Average time of an order"),
         Component: NumberCard,
         props: (data) => ({
-            title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+            title: _t("Average time for an order to go from 'new' to 'sent' or 'cancelled'"),
             value: data.average_time,
         })
     },
 
     {
         id: "nb_new_orders",
-        description: "Number of new orders this month",
+        description: _t("Number of new orders this month"),
         Component: NumberCard,
         props: (data) => ({
-            title: "Number of new orders this month",
+            title: _t("Number of new orders this month"),
             value: data.nb_new_orders,
         })
     },
 
     {
         id: "nb_cancelled_orders",
-        description: "Number of cancelled orders this month",
+        description: _t("Number of cancelled orders this month"),
         Component: NumberCard,
         props: (data) => ({
-            title: "Number of cancelled orders this month",
+            title: _t("Number of cancelled orders this month"),
             value: data.nb_cancelled_orders,
         })
     },
 
     {
         id: "total_amount",
-        description: "Total amount of new orders this month",
+        description: _t("Total amount of new orders this month"),
         Component: NumberCard,
         props: (data) => ({
-            title: "Total amount of new orders this month",
+            title: _t("Total amount of new orders this month"),
             value: data.total_amount,
         })
     },
 
     {
-        id: "orders_pir_chart",
-        description: "Shirt order by size",
+        id: "orders_pie_chart",
+        description: _t("Shirt order by size"),
         Component: PieChartCard,
         props: (data) => ({
-            title: "Shirt order by size",
+            title: _t("Shirt order by size"),
             data: data.orders_by_size,
         })
     },
diff --git a/awesome_dashboard/static/src/dashboard/numbercard/number_card.js b/awesome_dashboard/static/src/dashboard/numbercard/number_card.js
index c06428085f6..9b52b682dde 100644
--- a/awesome_dashboard/static/src/dashboard/numbercard/number_card.js
+++ b/awesome_dashboard/static/src/dashboard/numbercard/number_card.js
@@ -1,7 +1,7 @@
 import { Component } from "@odoo/owl";
 
 export class NumberCard extends Component {
-    static template = "awesome_dashboard.numbercard";
+    static template = "awesome_dashboard.NumberCard";
     static props = {
         title: {
             type: String,
diff --git a/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml b/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
index 9dbdc155129..e418f1c0f00 100644
--- a/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
+++ b/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.numbercard" owl='1'>
+    <t t-name="awesome_dashboard.NumberCard" owl='1'>
         <div class="d-flex flex-wrap">
             <t t-esc="props.title"/>
             <div class="fs-1 fw-bold text-success text-center">
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
index 5dfbcbd9ad5..0b2d13cc5cc 100644
--- a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
+++ b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
@@ -3,9 +3,12 @@ import { loadJS } from "@web/core/assets";
 
 
 export class PieChart extends Component {
-    static template = "awesome_dashboard.pie_chart";
+    static template = "awesome_dashboard.PieChart";
     static props = {
-        label: String,
+        label: {
+            type: String,
+            optional: true,
+        },
         data : Object,
     }
     setup(){
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
index cb9d26c2128..5d5030f84cf 100644
--- a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
+++ b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.pie_chart" >
+    <t t-name="awesome_dashboard.PieChart" >
         <div t-att-class="'h-100 ' + props.class">
             <div class="h-100 position-relative">
                 <canvas t-ref="canvas_pie" />
diff --git a/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.js b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.js
similarity index 84%
rename from awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.js
rename to awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.js
index 9eecd286698..6c3e65478f1 100644
--- a/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.js
+++ b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.js
@@ -3,7 +3,7 @@ import { PieChart } from "../pie_chart/pie_chart";
 
 export class PieChartCard extends Component {
     static components = { PieChart }
-    static template = "awesome_dashboard.piechartcard";
+    static template = "awesome_dashboard.PieChartCard";
     static props = {
         title: {
             type: String,
diff --git a/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.xml b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.xml
similarity index 70%
rename from awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.xml
rename to awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.xml
index 03bc0663f13..aee6bf61e8b 100644
--- a/awesome_dashboard/static/src/dashboard/piechartcard/pirchart_card.xml
+++ b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.xml
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.piechartcard" owl='1'>
+    <t t-name="awesome_dashboard.PieChartCard" owl='1'>
         <div t-att-class="'h-100 ' + props.class">
             <div class="h-100 position-relative">
                 <t t-esc="props.title"/>
-                <PieChart data="props.data" label = "''"/>
+                <PieChart data="props.data"/>
             </div>
         </div>
     </t>

From fff2bf53eb21b3317bdc54e445730761f92bff4c Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Mon, 29 Sep 2025 09:54:49 +0200
Subject: [PATCH 20/23] [FIX] removed the config file

---
 .vscode/launch.json | 26 --------------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index cdc9bed8035..00000000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Run (Update)",
-            "type": "debugpy",
-            "request": "launch",
-            "python": "/usr/bin/python3",
-            "program": "/home/odoo/odoo/odoo-bin",
-            "console": "integratedTerminal",
-            "args": [
-                "--database", "rd-demo",
-                "--dev", "xml",
-                // "-u", "we_guarantee",
-                "--addons-path", "/home/odoo/enterprise,/home/odoo/odoo/addons,/home/odoo/tutorials",
-                "--log-level", "info",
-                "--limit-time-real=0",
-                "--limit-time-cpu=0",
-            ],
-            "variablePresentation": {},
-        },
-    ]
-}

From 8dd8fcccde326a958b734467f0949f665caf06a0 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Tue, 30 Sep 2025 10:04:30 +0200
Subject: [PATCH 21/23] [ADD] Section 12

---
 awesome_dashboard/__init__.py                 |  1 +
 awesome_dashboard/__manifest__.py             |  2 +-
 awesome_dashboard/controllers/__init__.py     |  2 +-
 awesome_dashboard/models/__init__.py          |  1 +
 .../models/res_users_settings.py              |  9 +++++
 .../{ => config_dialog}/config_dialog.js      |  7 ----
 .../{ => config_dialog}/config_dialog.xml     |  0
 .../static/src/dashboard/dashboard.css        |  7 ++++
 .../static/src/dashboard/dashboard.js         | 11 +++---
 .../static/src/dashboard/dashboard_item.js    |  2 +-
 .../static/src/dashboard/dashboard_item.xml   |  2 +-
 .../static/src/dashboard/dashboard_items.js   |  2 +-
 .../src/dashboard/pie_chart/pie_chart.js      | 38 ++++++++++++++++---
 .../dashboard/piechartcard/piechart_card.js   |  1 +
 14 files changed, 63 insertions(+), 22 deletions(-)
 create mode 100644 awesome_dashboard/models/__init__.py
 create mode 100644 awesome_dashboard/models/res_users_settings.py
 rename awesome_dashboard/static/src/dashboard/{ => config_dialog}/config_dialog.js (81%)
 rename awesome_dashboard/static/src/dashboard/{ => config_dialog}/config_dialog.xml (100%)

diff --git a/awesome_dashboard/__init__.py b/awesome_dashboard/__init__.py
index b0f26a9a602..aa4d0fd63a9 100644
--- a/awesome_dashboard/__init__.py
+++ b/awesome_dashboard/__init__.py
@@ -1,3 +1,4 @@
 # -*- coding: utf-8 -*-
 
 from . import controllers
+from . import models
diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index 3c8f618888e..855171f60ce 100644
--- a/awesome_dashboard/__manifest__.py
+++ b/awesome_dashboard/__manifest__.py
@@ -16,7 +16,7 @@
     'version': '0.1',
     'application': True,
     'installable': True,
-    'depends': ['base', 'web', 'mail', 'crm'],
+    'depends': ['base', 'web', 'mail', 'crm','sale'],
 
     'data': [
         'views/views.xml',
diff --git a/awesome_dashboard/controllers/__init__.py b/awesome_dashboard/controllers/__init__.py
index 457bae27e11..b0f26a9a602 100644
--- a/awesome_dashboard/controllers/__init__.py
+++ b/awesome_dashboard/controllers/__init__.py
@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-from . import controllers
\ No newline at end of file
+from . import controllers
diff --git a/awesome_dashboard/models/__init__.py b/awesome_dashboard/models/__init__.py
new file mode 100644
index 00000000000..9d40d166df5
--- /dev/null
+++ b/awesome_dashboard/models/__init__.py
@@ -0,0 +1 @@
+from . import res_users_settings
\ No newline at end of file
diff --git a/awesome_dashboard/models/res_users_settings.py b/awesome_dashboard/models/res_users_settings.py
new file mode 100644
index 00000000000..50ca22ce1f2
--- /dev/null
+++ b/awesome_dashboard/models/res_users_settings.py
@@ -0,0 +1,9 @@
+# models/res_users.py
+from odoo import models, fields
+
+class ResUsersSettings(models.Model):
+    _inherit = ["res.users.settings"]
+
+    disabled_items = fields.Char(
+        string="Awesome Dashboard Disabled Items",
+    )
diff --git a/awesome_dashboard/static/src/dashboard/config_dialog.js b/awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.js
similarity index 81%
rename from awesome_dashboard/static/src/dashboard/config_dialog.js
rename to awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.js
index 34d4f3f6be4..84e51ba3df2 100644
--- a/awesome_dashboard/static/src/dashboard/config_dialog.js
+++ b/awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.js
@@ -1,9 +1,6 @@
 import { Component, useState } from "@odoo/owl";
 import { Dialog } from "@web/core/dialog/dialog";
-import { items } from "./dashboard_items";
-import { registry } from "@web/core/registry";
 import { CheckBox } from "@web/core/checkbox/checkbox";
-import { browser } from "@web/core/browser/browser";
 
 
 export class ConfigDialog extends Component {
@@ -29,10 +26,6 @@ export class ConfigDialog extends Component {
             (item) => !item.enabled
         ).map((item) => item.id);
 
-        browser.localStorage.setItem(
-            "disabledItems", updatedDisabledItems,
-        );
-
         this.props.onUpdateConfigs(updatedDisabledItems);
     }
 
diff --git a/awesome_dashboard/static/src/dashboard/config_dialog.xml b/awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.xml
similarity index 100%
rename from awesome_dashboard/static/src/dashboard/config_dialog.xml
rename to awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.xml
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.css b/awesome_dashboard/static/src/dashboard/dashboard.css
index b8e9df84291..90a9bb80806 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.css
+++ b/awesome_dashboard/static/src/dashboard/dashboard.css
@@ -1,4 +1,11 @@
 .o_dashboard {
     background-color: #f0f0f0;
 }
+@media (max-width: 767.98px) {
+  .o_dashboard .card {
+    width: 100% !important;      /* force full width */
+    max-width: 100% !important;
+    display: block !important;   /* no inline-block on mobile */
+  }
+}
 
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index 988d804e8fd..a4026ee3497 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -1,11 +1,11 @@
-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 "./dashboard_item";
-import { ConfigDialog } from "./config_dialog";
-import { browser } from "@web/core/browser/browser";
+import { ConfigDialog } from "./config_dialog/config_dialog";
 import { _t } from "@web/core/l10n/translation";
+import { user } from "@web/core/user";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
@@ -15,9 +15,9 @@ class AwesomeDashboard extends Component {
         this.result = useState(useService("awesome_dashboard.statistics"));
         this.items = registry.category("awesome_dashboard").getAll();
         this.dialog = useService("dialog");
-        // retreive disabled items
+        
         this.state = useState({
-            disabledItems: browser.localStorage.getItem("disabledItems")?.split(",") || []
+            disabledItems: user.settings.disabled_items || [],
         });
     }
     openCustomers() {
@@ -33,6 +33,7 @@ class AwesomeDashboard extends Component {
     // update the list of disabeled items
     updateConfigs(newDisabledItems) {
         this.state.disabledItems = newDisabledItems;
+        user.setUserSettings("disabled_items", this.state.disabledItems)
     }
 
     openLeads() {
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item.js
index 637592608e3..a905545373f 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_item.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.js
@@ -12,7 +12,7 @@ export class DashboardItem extends Component {
             type: Object,
         },
     };
-    get Width() {
+    get itemWidth() {
         return 18*this.props.size
     }
 }
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.xml b/awesome_dashboard/static/src/dashboard/dashboard_item.xml
index 59ba238fd35..cc26acdb805 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_item.xml
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.DashboardItem">
-        <div class="card d-inline-block m-2" t-attf-style="width: {{Width}}rem;">
+        <div class="card d-inline-block m-2" t-attf-style="width: {{itemWidth}}rem;">
             <div class="card-body">
                 <t t-slot="default"/>
             </div>
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
index d92ef34ffcd..3ee2f1b5ab1 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_items.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -60,7 +60,7 @@ export const items = [
         Component: PieChartCard,
         props: (data) => ({
             title: _t("Shirt order by size"),
-            data: data.orders_by_size,
+            data: data.orders_by_size, 
         })
     },
 
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
index 0b2d13cc5cc..3b442df0cf9 100644
--- a/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
+++ b/awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js
@@ -1,5 +1,7 @@
-import { Component, onWillStart,useRef, onMounted, onWillUnmount } from "@odoo/owl";
+import { Component, onWillStart,useRef, onMounted, onWillUnmount, useEnv } from "@odoo/owl";
 import { loadJS } from "@web/core/assets";
+import { _t } from "@web/core/l10n/translation";
+
 
 
 export class PieChart extends Component {
@@ -9,10 +11,15 @@ export class PieChart extends Component {
             type: String,
             optional: true,
         },
-        data : Object,
+        data: Object,
+        clickview: {
+            type: Function,
+            optional: true,
+        },
     }
-    setup(){
+    setup() {
         this.canvasRef = useRef("canvas_pie");
+        this.env = useEnv();
         onWillStart(async () => loadJS("/web/static/lib/Chart/Chart.js"));
         onMounted(()=> {
             this.renderChart();
@@ -24,7 +31,9 @@ export class PieChart extends Component {
 
     }
 
-    renderChart(){
+  
+
+    renderChart() {
         this.chart = new Chart(this.canvasRef.el,{
             type: 'pie',
             data : {
@@ -35,8 +44,27 @@ export class PieChart extends Component {
                     data : Object.values(this.props.data),
                     },
                 ],
+            },
+            options:{
+                events: ['click'],
+                onClick: (ev, section) => {
+                    console.log(section);
+                    const index = section[0].index
+                    console.log("heere maybee ?");
+                    const size = Object.keys(this.props.data)[index];
+                    this.env.services.action.doAction({
+                        type:'ir.actions.act_window',
+                        name: _t("Orders - Size " + size),
+                        target: 'current',
+                        res_model: 'sale.order',
+                        views: [[false,'list']],
+                        domain: [['order_line.name', 'ilike', size]],
+                    
+                })
+
             }
-        })
+            },
+        });
 
     }
 }
diff --git a/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.js b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.js
index 6c3e65478f1..66d17cf7216 100644
--- a/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.js
+++ b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.js
@@ -11,6 +11,7 @@ export class PieChartCard extends Component {
         data: {
             type: Object,
         },
+
     };
 }
 

From bce32b6349490f8e38b2750042d4e9ed26307b82 Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Tue, 30 Sep 2025 10:16:54 +0200
Subject: [PATCH 22/23] [FIX] Addressed code review feedback

---
 .gitignore                                    |  2 ++
 .vscode/launch.json                           | 26 +++++++++++++++++++
 .../dashboard/config_dialog/config_dialog.js  |  3 +--
 .../static/src/dashboard/dashboard.js         |  2 +-
 .../src/dashboard/numbercard/number_card.xml  |  2 +-
 .../dashboard/piechartcard/piechart_card.xml  |  2 +-
 6 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.gitignore b/.gitignore
index b6e47617de1..61af8745c5f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -127,3 +127,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+.vscode/launch.js
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000000..cdc9bed8035
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Run (Update)",
+            "type": "debugpy",
+            "request": "launch",
+            "python": "/usr/bin/python3",
+            "program": "/home/odoo/odoo/odoo-bin",
+            "console": "integratedTerminal",
+            "args": [
+                "--database", "rd-demo",
+                "--dev", "xml",
+                // "-u", "we_guarantee",
+                "--addons-path", "/home/odoo/enterprise,/home/odoo/odoo/addons,/home/odoo/tutorials",
+                "--log-level", "info",
+                "--limit-time-real=0",
+                "--limit-time-cpu=0",
+            ],
+            "variablePresentation": {},
+        },
+    ]
+}
diff --git a/awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.js b/awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.js
index 84e51ba3df2..b6a39eced4d 100644
--- a/awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.js
+++ b/awesome_dashboard/static/src/dashboard/config_dialog/config_dialog.js
@@ -8,7 +8,7 @@ export class ConfigDialog extends Component {
     static components = { Dialog, CheckBox }; 
     static props = ["close", "items", "disabledItems", "onUpdateConfigs"];
     setup() {
-        // create object for each item with an enabled property
+        
         this.items = useState(this.props.items.map((item) => {
             return {
                 ...item,
@@ -18,7 +18,6 @@ export class ConfigDialog extends Component {
         
     }
     
-    // adds the unchecked item to the disabled list
     onChange(checkedItems, Item) {
         Item.enabled = checkedItems;
       
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index a4026ee3497..7432e11252b 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -30,7 +30,7 @@ class AwesomeDashboard extends Component {
             onUpdateConfigs: this.updateConfigs.bind(this),
         });
     }
-    // update the list of disabeled items
+    
     updateConfigs(newDisabledItems) {
         this.state.disabledItems = newDisabledItems;
         user.setUserSettings("disabled_items", this.state.disabledItems)
diff --git a/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml b/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
index e418f1c0f00..619c1fba23b 100644
--- a/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
+++ b/awesome_dashboard/static/src/dashboard/numbercard/number_card.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.NumberCard" owl='1'>
+    <t t-name="awesome_dashboard.NumberCard" >
         <div class="d-flex flex-wrap">
             <t t-esc="props.title"/>
             <div class="fs-1 fw-bold text-success text-center">
diff --git a/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.xml b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.xml
index aee6bf61e8b..7ea9d414d97 100644
--- a/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.xml
+++ b/awesome_dashboard/static/src/dashboard/piechartcard/piechart_card.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_dashboard.PieChartCard" owl='1'>
+    <t t-name="awesome_dashboard.PieChartCard" >
         <div t-att-class="'h-100 ' + props.class">
             <div class="h-100 position-relative">
                 <t t-esc="props.title"/>

From 3a7ac6c1accb068cdec5a383b807ab749905e4bb Mon Sep 17 00:00:00 2001
From: hamza <hasaa@odoo.com>
Date: Tue, 30 Sep 2025 14:45:00 +0200
Subject: [PATCH 23/23] [IMP] awesome_dashboard: fixed the styling to pass the
 CI

---
 awesome_dashboard/__manifest__.py              | 4 ++--
 awesome_dashboard/models/__init__.py           | 2 +-
 awesome_dashboard/models/res_users_settings.py | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index 855171f60ce..2b96c7ca699 100644
--- a/awesome_dashboard/__manifest__.py
+++ b/awesome_dashboard/__manifest__.py
@@ -16,7 +16,7 @@
     'version': '0.1',
     'application': True,
     'installable': True,
-    'depends': ['base', 'web', 'mail', 'crm','sale'],
+    'depends': ['base', 'web', 'mail', 'crm', 'sale'],
 
     'data': [
         'views/views.xml',
@@ -25,7 +25,7 @@
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
             ('remove', 'awesome_dashboard/static/src/dashboard/**/*'),
-            
+
         ],
         'awesome_dashboard.dashboard': [
             'awesome_dashboard/static/src/dashboard/**/*',
diff --git a/awesome_dashboard/models/__init__.py b/awesome_dashboard/models/__init__.py
index 9d40d166df5..82fcc4bfe96 100644
--- a/awesome_dashboard/models/__init__.py
+++ b/awesome_dashboard/models/__init__.py
@@ -1 +1 @@
-from . import res_users_settings
\ No newline at end of file
+from . import res_users_settings
diff --git a/awesome_dashboard/models/res_users_settings.py b/awesome_dashboard/models/res_users_settings.py
index 50ca22ce1f2..b6efc3c0c6c 100644
--- a/awesome_dashboard/models/res_users_settings.py
+++ b/awesome_dashboard/models/res_users_settings.py
@@ -1,6 +1,7 @@
 # models/res_users.py
 from odoo import models, fields
 
+
 class ResUsersSettings(models.Model):
     _inherit = ["res.users.settings"]