From 1ac507ca1b377a9c5688fc3e5e4ef5841541a05f Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Thu, 20 Aug 2026 14:16:07 +0200
Subject: [PATCH 1/9] [ADD] awesome_owl: counters examples

---
 awesome_owl/static/src/card/card.js       | 22 ++++++++++++
 awesome_owl/static/src/counter/counter.js | 25 +++++++++++++
 awesome_owl/static/src/playground.js      | 43 +++++++++++++++++++++--
 awesome_owl/static/src/playground.xml     |  6 +---
 4 files changed, 89 insertions(+), 7 deletions(-)
 create mode 100644 awesome_owl/static/src/card/card.js
 create mode 100644 awesome_owl/static/src/counter/counter.js

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..2a8aaa75ad3
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,22 @@
+import { Component, xml } from "@odoo/owl"
+
+export class Card extends Component {
+    static props = {
+        title: String,
+        content: String,
+    }
+
+
+    static template = xml`
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title">
+                    <t t-esc="props.title"/>
+                </h5>
+                <p class="card-text">
+                    <t t-out="props.content"/>
+                </p>
+            </div>
+        </div>
+    `
+}
\ 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..da4de483b50
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,25 @@
+import { Component, useState, xml } from "@odoo/owl";
+
+export class Counter extends Component {
+    static props = { callback: Function }
+    
+    setup() {
+        this.state = useState({ value: 0 })
+    }
+
+    increment() {
+        this.state.value++
+        this.props.callback()
+    }
+
+    static template = xml`
+        <div>
+            <div class="p-3 border rounded">
+                <t t-esc="state.value" />
+                <button t-on-click="increment" class="btn btn-primary ml-2">
+                    +
+                </button>
+            </div>
+        </div>
+    `
+}
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 4ac769b0aa5..c9b8a02b628 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,5 +1,44 @@
-import { Component } from "@odoo/owl";
+import { Component, useState, xml, markup } from "@odoo/owl";
+
+import { Counter } from './counter/counter';
+import { Card } from './card/card';
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
+    setup() {
+        this.state = useState({ 
+            a: 0,
+            b: 0,
+            content: markup(`<h1 class="text-danger">hello</h1>`)
+        })
+    }
+
+    increment_a() {
+        this.state.a++
+    }
+
+    increment_b() {
+        this.state.b++
+    }
+
+    static template = xml`
+        <div>
+            <Counter callback.bind="increment_a" />
+            <Counter callback.bind="increment_b" />
+        </div>
+        
+        <br />
+
+        <div>
+            <Card title="'Hola'" content="state.content" />
+        </div>
+
+        <br />
+        
+        <div class="p-3">
+            Sum:
+            <t t-esc="state.a + state.b" />
+        </div>
+    `
+
+    static components = { Counter, Card }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..9a392c6f276 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
-        </div>
-    </t>
+    <t t-name="awesome_owl.playground" />
 
 </templates>

From b7cae6e5856f79b6035ca8594cfe6d2f98a3a6bf Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Thu, 20 Aug 2026 16:07:13 +0200
Subject: [PATCH 2/9] [ADD] awesome_owl : Chapter 1 tasks

---
 awesome_owl/static/src/card/card.js      | 27 +++++++---
 awesome_owl/static/src/playground.js     | 63 ++++++++++++++++++++++--
 awesome_owl/static/src/todo/todo_item.js | 31 ++++++++++++
 awesome_owl/static/src/todo/todo_list.js | 23 +++++++++
 4 files changed, 132 insertions(+), 12 deletions(-)
 create mode 100644 awesome_owl/static/src/todo/todo_item.js
 create mode 100644 awesome_owl/static/src/todo/todo_list.js

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 2a8aaa75ad3..017e940fe9a 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -1,21 +1,32 @@
-import { Component, xml } from "@odoo/owl"
+import { Component, xml, useState } from "@odoo/owl"
 
 export class Card extends Component {
     static props = {
         title: String,
-        content: String,
+        slots: { type: Object, optional: true },
     }
 
+    setup() {
+        this.state = useState({isOpen: false});
+    }
+
+    handleToggle() {{
+        this.state.isOpen = !this.state.isOpen;
+    }}
+
 
     static template = xml`
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
-                <h5 class="card-title">
-                    <t t-esc="props.title"/>
-                </h5>
-                <p class="card-text">
-                    <t t-out="props.content"/>
-                </p>
+                <div class="d-flex justify-content-between mb-1">
+                    <h5 class="card-title">
+                        <t t-esc="props.title"/>
+                    </h5>
+                    <button t-on-click="handleToggle">Toggle</button>
+                </div>
+                <div t-if="state.isOpen" class="card-text">
+                    <t t-slot="default"/>
+                </div>
             </div>
         </div>
     `
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index c9b8a02b628..3e3f9baea2b 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -2,14 +2,18 @@ import { Component, useState, xml, markup } from "@odoo/owl";
 
 import { Counter } from './counter/counter';
 import { Card } from './card/card';
+import { TodoList } from './todo/todo_list';
 
 export class Playground extends Component {
     setup() {
         this.state = useState({ 
             a: 0,
             b: 0,
-            content: markup(`<h1 class="text-danger">hello</h1>`)
+            c: 0,
+            content: markup(`<h1 class="text-danger">hello</h1>`),
+            task_id: 1,
         })
+        this.todos = useState([]);
     }
 
     increment_a() {
@@ -20,6 +24,43 @@ export class Playground extends Component {
         this.state.b++
     }
 
+    increment_c() {
+        this.state.c++
+    }
+
+    handleKeyup(ev) {
+        const key = ev.key;
+
+        if (key === "Enter" && ev.target.value) {
+            this.todos.push({
+                id: this.state.task_id,
+                description: ev.target.value,
+                isCompleted: false,
+            })
+
+            this.state.task_id++;
+            ev.target.value = "";
+
+            return;
+        }
+    }
+
+    toggleTodo(id) {
+        const idx = this.todos.findIndex(t => t.id === id);
+
+        if (idx !== -1) {
+            const old = this.todos[idx].isCompleted;
+            this.todos[idx].isCompleted = !old;
+        }
+    }
+
+    removeTodo(id) {
+        const idx = this.todos.findIndex(t => t.id === id);
+
+
+        if (idx !== -1) this.todos.splice(idx, 1);
+    }
+
     static template = xml`
         <div>
             <Counter callback.bind="increment_a" />
@@ -29,16 +70,30 @@ export class Playground extends Component {
         <br />
 
         <div>
-            <Card title="'Hola'" content="state.content" />
+            <Card title="'Hola'">
+                <Counter callback.bind="increment_c" />
+            </Card>
         </div>
 
         <br />
         
         <div class="p-3">
             Sum:
-            <t t-esc="state.a + state.b" />
+            <t t-esc="state.a + state.b + state.c" />
+        </div>
+
+        <br />
+
+        <input t-on-keyup="handleKeyup" />
+
+        <div>
+            <TodoList 
+                list="todos" 
+                toggleTodo.bind="toggleTodo"
+                removeTodo.bind="removeTodo"
+            />
         </div>
     `
 
-    static components = { Counter, Card }
+    static components = { Counter, Card, TodoList }
 }
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..5dc7b8cb663
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_item.js
@@ -0,0 +1,31 @@
+import { Component, xml } from "@odoo/owl";
+
+
+export class TodoItem extends Component {
+    static props = { 
+        id: Number,
+        description: String,
+        isCompleted: Boolean,
+        toggleTodo: Function,
+        removeTodo: Function
+    }
+    
+    static template = xml`
+        <div class="border d-flex gap-1 align-items-center">   
+            <input type="checkbox" t-att-checked="props.isCompleted" t-on-change="() => props.toggleTodo(props.id)" />
+            <div 
+                class=""
+                t-att-class="{
+                    'text-muted text-decoration-line-through':  props.isCompleted,
+                }"
+            >
+                <span>
+                    <t t-esc="props.id" />.
+                    <t t-esc="props.description" />
+                </span>
+            </div>
+
+            <span class="fa fa-remove text-danger" t-on-click="() => props.removeTodo(props.id)"/>
+        </div>
+    `
+}
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..4b96aaf45d8
--- /dev/null
+++ b/awesome_owl/static/src/todo/todo_list.js
@@ -0,0 +1,23 @@
+import { Component, xml } from "@odoo/owl";
+
+import { TodoItem } from "./todo_item";
+
+export class TodoList extends Component {
+    static props = { list: Array, toggleTodo: Function, removeTodo: Function }
+
+    static template = xml`
+        <div class="border">
+            <t t-foreach="props.list" t-as="t" t-key="t.id">
+                <TodoItem 
+                    id="t.id"
+                    description="t.description"
+                    isCompleted="t.isCompleted"
+                    toggleTodo.bind="props.toggleTodo"
+                    removeTodo.bind="props.removeTodo"
+                />  
+            </t>
+        </div>
+    `
+
+    static components = { TodoItem }
+}

From 6f445406ab2e5b15c568acd03cf70fce35bdcdd5 Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Fri, 21 Aug 2026 13:51:46 +0200
Subject: [PATCH 3/9] [ADD] awesome_dashboard: base dashboard

---
 awesome_dashboard/__manifest__.py             |  4 ++
 awesome_dashboard/static/src/dashboard.js     |  8 ---
 .../static/src/dashboard/dashboard.js         | 63 +++++++++++++++++++
 .../static/src/dashboard/dashboard.scss       |  3 +
 .../static/src/{ => dashboard}/dashboard.xml  |  0
 .../static/src/dashboard/dashboard_item.js    | 24 +++++++
 .../src/dashboard/statistics_service.js       | 22 +++++++
 .../static/src/dashboard_action.js            | 13 ++++
 .../static/src/piechart/piechart.js           | 31 +++++++++
 9 files changed, 160 insertions(+), 8 deletions(-)
 delete mode 100644 awesome_dashboard/static/src/dashboard.js
 create mode 100644 awesome_dashboard/static/src/dashboard/dashboard.js
 create mode 100644 awesome_dashboard/static/src/dashboard/dashboard.scss
 rename awesome_dashboard/static/src/{ => dashboard}/dashboard.xml (100%)
 create mode 100644 awesome_dashboard/static/src/dashboard/dashboard_item.js
 create mode 100644 awesome_dashboard/static/src/dashboard/statistics_service.js
 create mode 100644 awesome_dashboard/static/src/dashboard_action.js
 create mode 100644 awesome_dashboard/static/src/piechart/piechart.js

diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py
index a1cd72893d7..bd10cc6fc0c 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.js b/awesome_dashboard/static/src/dashboard.js
deleted file mode 100644
index c4fb245621b..00000000000
--- a/awesome_dashboard/static/src/dashboard.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from "@odoo/owl";
-import { registry } from "@web/core/registry";
-
-class AwesomeDashboard extends Component {
-    static template = "awesome_dashboard.AwesomeDashboard";
-}
-
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
new file mode 100644
index 00000000000..b023a96df5a
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -0,0 +1,63 @@
+import { Component, xml, onWillStart } from "@odoo/owl";
+
+import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { loadJS } from "@web/core/assets";
+
+import { DashboardItem } from "./dashboard_item";
+import { PieChart } from "../piechart/piechart";
+
+class AwesomeDashboard extends Component {
+    static template = xml`
+        <div class="p-2 d-flex gap-2">
+            <button t-on-click="gotoCustomers"  class="btn btn-primary">Customers</button>
+            <button t-on-click="gotoLeads" class="btn btn-primary">Leads</button>
+        </div>
+        <Layout display="{ controlPanel: {} }" className="'o_dashboard h-100'">
+            <t t-foreach="stats" t-as="s" t-key="s.key">
+                <DashboardItem title="s.title" size="s.size">
+                    <t t-esc="state[s.key]"/>
+                </DashboardItem>
+            </t>
+            <DashboardItem title="'Shirt orders by size'" size="2">
+                <PieChart data="state.orders_by_size"/>
+            </DashboardItem>
+        </Layout>
+    `;
+
+    static components = { Layout, DashboardItem, PieChart }
+
+    setup() {
+        this.action = useService("action")
+        this.state = useService("awesome_dashboard.statistics")
+
+        this.stats = [
+            { title: "Average amount of t-shirt by order this month", key: "average_quantity", size: 1.5 },
+            { title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'", key: "average_time", size: 2 },
+            { title: "Number of new orders this month", key: "nb_new_orders", size: 1 },
+            { title: "Number of cancelled orders this month", key: "nb_cancelled_orders", size: 1.5 },
+            { title: "Total amount of new orders this month", key: "total_amount", size: 1.5 },
+        ]
+        
+        onWillStart(async () => {
+            await loadJS("/web/static/lib/Chart/Chart.js")
+        })
+    }
+
+    gotoCustomers() {
+        this.action.doAction("base.action_partner_form")
+    }
+
+    gotoLeads() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: "Leads",
+            res_model: "crm.lead",
+            views: [[false, 'list'], [false, 'form']],
+        })
+    }
+    
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.scss b/awesome_dashboard/static/src/dashboard/dashboard.scss
new file mode 100644
index 00000000000..769fc1e72f9
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: gray;
+}
\ No newline at end of file
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/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item.js
new file mode 100644
index 00000000000..e83a43f3a73
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.js
@@ -0,0 +1,24 @@
+import { Component, xml, useState } from "@odoo/owl"
+
+export class DashboardItem extends Component {
+    static props = {
+        slots: { type: Object, optional: true },
+        size: { type: Number, optional: true },
+        title: { type: String }
+    }
+
+    static defaultProps = { size: 1 }
+
+    static template = xml`
+        <div class="card d-inline-block m-2" t-attf-style="width: {{18 * props.size}}rem;">
+            <div class="card-body d-flex flex-column justify-content-center">
+                <h3 class="card-title text-center">
+                    <t t-esc="props.title"/>
+                </h3>
+                <span class="fs-1 text-center text-primary">
+                    <t t-slot="default"/>
+                </span>
+            </div>
+        </div>
+    `
+}
\ No newline at end of file
diff --git a/awesome_dashboard/static/src/dashboard/statistics_service.js b/awesome_dashboard/static/src/dashboard/statistics_service.js
new file mode 100644
index 00000000000..4224ab5b76b
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/statistics_service.js
@@ -0,0 +1,22 @@
+import { reactive } from "@odoo/owl";
+
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+
+const statisticsService = {
+    async _loadData(statistics) {
+        const updates = await rpc("/awesome_dashboard/statistics");
+        Object.assign(statistics, updates, { isReady: true });
+    },
+
+    start() {
+        const statistics = reactive({ isReady: false });
+
+        setInterval(() => this._loadData(statistics), 10_000);
+        this._loadData(statistics);
+
+        return statistics;
+    },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js
new file mode 100644
index 00000000000..7b75ec1b3e4
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_action.js
@@ -0,0 +1,13 @@
+import { Component, xml } from "@odoo/owl";
+
+import { registry } from "@web/core/registry";
+import { LazyComponent } from "@web/core/assets";
+
+class AwesomeDashboardLoader extends Component {
+    static components = { LazyComponent };
+    static template = xml`
+        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" props="props"/>
+    `;
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader);
diff --git a/awesome_dashboard/static/src/piechart/piechart.js b/awesome_dashboard/static/src/piechart/piechart.js
new file mode 100644
index 00000000000..e57c5eab4a0
--- /dev/null
+++ b/awesome_dashboard/static/src/piechart/piechart.js
@@ -0,0 +1,31 @@
+import { Component, xml, onMounted, onWillUnmount, useRef } from "@odoo/owl";
+
+export class PieChart extends Component {
+    static props = {
+        data: { type: Object },
+    };
+
+    static template = xml`
+        <div class="w-50 mx-auto">
+            <canvas t-ref="canvas"/>
+        </div>
+    `;
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+
+        onMounted(() => {
+            this.chart = new Chart(this.canvasRef.el, {
+                type: "pie",
+                data: {
+                    labels: Object.keys(this.props.data),
+                    datasets: [{ data: Object.values(this.props.data) }],
+                },
+            });
+        });
+
+        onWillUnmount(() => {
+            this.chart.destroy();
+        });
+    }
+}

From 6ca84ff47fae134ae6d0af7b63252e4888ac62f8 Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Mon, 24 Aug 2026 10:54:51 +0200
Subject: [PATCH 4/9] [ADD] awesome_owl: generic dashboard & dashboard items

---
 .../static/src/dashboard/dashboard.js         | 34 +++------
 .../static/src/dashboard/dashboard_item.js    | 12 +---
 .../static/src/dashboard/dashboard_items.js   | 71 +++++++++++++++++++
 .../static/src/dashboard/number_card.js       | 17 +++++
 .../static/src/dashboard/pie_chart_card.js    | 19 +++++
 .../static/src/piechart/piechart.js           |  6 +-
 6 files changed, 125 insertions(+), 34 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard/dashboard_items.js
 create mode 100644 awesome_dashboard/static/src/dashboard/number_card.js
 create mode 100644 awesome_dashboard/static/src/dashboard/pie_chart_card.js

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index b023a96df5a..a38d2f8cad0 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -1,12 +1,11 @@
-import { Component, xml, onWillStart } from "@odoo/owl";
+import { Component, xml } from "@odoo/owl";
 
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
-import { loadJS } from "@web/core/assets";
 
 import { DashboardItem } from "./dashboard_item";
-import { PieChart } from "../piechart/piechart";
+import "./dashboard_items";
 
 class AwesomeDashboard extends Component {
     static template = xml`
@@ -15,34 +14,21 @@ class AwesomeDashboard extends Component {
             <button t-on-click="gotoLeads" class="btn btn-primary">Leads</button>
         </div>
         <Layout display="{ controlPanel: {} }" className="'o_dashboard h-100'">
-            <t t-foreach="stats" t-as="s" t-key="s.key">
-                <DashboardItem title="s.title" size="s.size">
-                    <t t-esc="state[s.key]"/>
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <DashboardItem size="item.size || 1">
+                    <t t-set="itemProp" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
+                    <t t-component="item.Component" t-props="itemProp" />
                 </DashboardItem>
             </t>
-            <DashboardItem title="'Shirt orders by size'" size="2">
-                <PieChart data="state.orders_by_size"/>
-            </DashboardItem>
         </Layout>
     `;
 
-    static components = { Layout, DashboardItem, PieChart }
+    static components = { Layout, DashboardItem }
 
     setup() {
         this.action = useService("action")
-        this.state = useService("awesome_dashboard.statistics")
-
-        this.stats = [
-            { title: "Average amount of t-shirt by order this month", key: "average_quantity", size: 1.5 },
-            { title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'", key: "average_time", size: 2 },
-            { title: "Number of new orders this month", key: "nb_new_orders", size: 1 },
-            { title: "Number of cancelled orders this month", key: "nb_cancelled_orders", size: 1.5 },
-            { title: "Total amount of new orders this month", key: "total_amount", size: 1.5 },
-        ]
-        
-        onWillStart(async () => {
-            await loadJS("/web/static/lib/Chart/Chart.js")
-        })
+        this.statistics = useService("awesome_dashboard.statistics")
+        this.items = registry.category("awesome_dashboard").getAll()
     }
 
     gotoCustomers() {
@@ -57,7 +43,7 @@ class AwesomeDashboard extends Component {
             views: [[false, 'list'], [false, 'form']],
         })
     }
-    
+
 }
 
 registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item.js
index e83a43f3a73..544e56b6fb9 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_item.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_item.js
@@ -1,10 +1,9 @@
-import { Component, xml, useState } from "@odoo/owl"
+import { Component, xml } from "@odoo/owl"
 
 export class DashboardItem extends Component {
     static props = {
         slots: { type: Object, optional: true },
         size: { type: Number, optional: true },
-        title: { type: String }
     }
 
     static defaultProps = { size: 1 }
@@ -12,13 +11,8 @@ export class DashboardItem extends Component {
     static template = xml`
         <div class="card d-inline-block m-2" t-attf-style="width: {{18 * props.size}}rem;">
             <div class="card-body d-flex flex-column justify-content-center">
-                <h3 class="card-title text-center">
-                    <t t-esc="props.title"/>
-                </h3>
-                <span class="fs-1 text-center text-primary">
-                    <t t-slot="default"/>
-                </span>
+                <t t-slot="default"/>
             </div>
         </div>
     `
-}
\ No newline at end of file
+}
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..e35fd046416
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -0,0 +1,71 @@
+import { registry } from "@web/core/registry"
+
+import { NumberCard } from "./number_card"
+import { PieChartCard } from "./pie_chart_card"
+
+const items = [
+    {
+        id: "average_quantity",
+        description: "Average amount of t-shirt",
+        Component: NumberCard,
+        size: 1.5,
+        props: (data) => ({
+            title: "Average amount of t-shirt by order this month",
+            value: data.average_quantity,
+        }),
+    },
+    {
+        id: "average_time",
+        description: "Average time for an order",
+        Component: NumberCard,
+        size: 2,
+        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: "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: "Cancelled orders this month",
+        Component: NumberCard,
+        size: 1.5,
+        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,
+        size: 1.5,
+        props: (data) => ({
+            title: "Total amount of new orders this month",
+            value: data.total_amount,
+        }),
+    },
+    {
+        id: "orders_by_size",
+        description: "Shirt orders by size",
+        Component: PieChartCard,
+        size: 2,
+        props: (data) => ({
+            title: "Shirt orders by size",
+            values: data.orders_by_size,
+        }),
+    },
+]
+
+const itemsRegistry = registry.category("awesome_dashboard")
+for (const item of items) {
+    itemsRegistry.add(item.id, item)
+}
diff --git a/awesome_dashboard/static/src/dashboard/number_card.js b/awesome_dashboard/static/src/dashboard/number_card.js
new file mode 100644
index 00000000000..3b3b381c683
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/number_card.js
@@ -0,0 +1,17 @@
+import { Component, xml } from "@odoo/owl"
+
+export class NumberCard extends Component {
+    static props = {
+        title: { type: String },
+        value: { type: [Number, String] },
+    }
+
+    static template = xml`
+        <h3 class="card-title text-center">
+            <t t-esc="props.title"/>
+        </h3>
+        <span class="fs-1 text-center text-primary">
+            <t t-esc="props.value"/>
+        </span>
+    `
+}
diff --git a/awesome_dashboard/static/src/dashboard/pie_chart_card.js b/awesome_dashboard/static/src/dashboard/pie_chart_card.js
new file mode 100644
index 00000000000..2af32cfd6bb
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/pie_chart_card.js
@@ -0,0 +1,19 @@
+import { Component, xml } from "@odoo/owl"
+
+import { PieChart } from "../piechart/piechart"
+
+export class PieChartCard extends Component {
+    static props = {
+        title: { type: String },
+        values: { type: Object },
+    }
+
+    static components = { PieChart }
+
+    static template = xml`
+        <h3 class="card-title text-center">
+            <t t-esc="props.title"/>
+        </h3>
+        <PieChart data="props.values"/>
+    `
+}
diff --git a/awesome_dashboard/static/src/piechart/piechart.js b/awesome_dashboard/static/src/piechart/piechart.js
index e57c5eab4a0..10bf4ef9961 100644
--- a/awesome_dashboard/static/src/piechart/piechart.js
+++ b/awesome_dashboard/static/src/piechart/piechart.js
@@ -1,4 +1,6 @@
-import { Component, xml, onMounted, onWillUnmount, useRef } from "@odoo/owl";
+import { Component, xml, onMounted, onWillStart, onWillUnmount, useRef } from "@odoo/owl";
+
+import { loadJS } from "@web/core/assets";
 
 export class PieChart extends Component {
     static props = {
@@ -14,6 +16,8 @@ export class PieChart extends Component {
     setup() {
         this.canvasRef = useRef("canvas");
 
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+
         onMounted(() => {
             this.chart = new Chart(this.canvasRef.el, {
                 type: "pie",

From f31f01f09f8c05b9ba225eb36bf80ef641102974 Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Mon, 24 Aug 2026 11:23:40 +0200
Subject: [PATCH 5/9] [ADD] awesome_dashboard: add & remove items dialog

---
 .../static/src/dashboard/dashboard.js         | 19 ++++++--
 .../static/src/dashboard/settings_dialog.js   | 44 +++++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 awesome_dashboard/static/src/dashboard/settings_dialog.js

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index a38d2f8cad0..e128d9118be 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -1,10 +1,12 @@
-import { Component, xml } from "@odoo/owl";
+import { Component, xml, useState } from "@odoo/owl";
 
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
+import { browser } from "@web/core/browser/browser";
 
 import { DashboardItem } from "./dashboard_item";
+import { SettingsDialog } from "./settings_dialog";
 import "./dashboard_items";
 
 class AwesomeDashboard extends Component {
@@ -12,10 +14,13 @@ class AwesomeDashboard extends Component {
         <div class="p-2 d-flex gap-2">
             <button t-on-click="gotoCustomers"  class="btn btn-primary">Customers</button>
             <button t-on-click="gotoLeads" class="btn btn-primary">Leads</button>
+            <button t-on-click="openSettings" class="btn btn-secondary ms-auto" title="Settings">
+                <i class="fa fa-cog"/>
+            </button>
         </div>
         <Layout display="{ controlPanel: {} }" className="'o_dashboard h-100'">
             <t t-foreach="items" t-as="item" t-key="item.id">
-                <DashboardItem size="item.size || 1">
+                <DashboardItem t-if="!item.disabled" size="item.size || 1">
                     <t t-set="itemProp" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
                     <t t-component="item.Component" t-props="itemProp" />
                 </DashboardItem>
@@ -27,8 +32,16 @@ class AwesomeDashboard extends Component {
 
     setup() {
         this.action = useService("action")
+        this.dialog = useService("dialog")
         this.statistics = useService("awesome_dashboard.statistics")
-        this.items = registry.category("awesome_dashboard").getAll()
+        const disabled = JSON.parse(browser.localStorage.getItem("disabled_dashboard_items") || "[]")
+        this.items = useState(registry.category("awesome_dashboard").getAll().map(
+            (item) => ({ ...item, disabled: disabled.includes(item.id) })
+        ))
+    }
+
+    openSettings() {
+        this.dialog.add(SettingsDialog, { items: this.items })
     }
 
     gotoCustomers() {
diff --git a/awesome_dashboard/static/src/dashboard/settings_dialog.js b/awesome_dashboard/static/src/dashboard/settings_dialog.js
new file mode 100644
index 00000000000..47f7d97682a
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/settings_dialog.js
@@ -0,0 +1,44 @@
+import { Component, xml, useState } from "@odoo/owl"
+
+import { Dialog } from "@web/core/dialog/dialog"
+import { CheckBox } from "@web/core/checkbox/checkbox"
+import { browser } from "@web/core/browser/browser"
+
+export class SettingsDialog extends Component {
+    static props = {
+        items: { type: Array },
+        close: { type: Function },
+    }
+
+    static components = { Dialog, CheckBox }
+
+    static template = xml`
+        <Dialog title="'Dashboard items configuration'">
+            Which cards do you wish to see?
+            <t t-foreach="props.items" t-as="item" t-key="item.id">
+                <CheckBox value="!disabled[item.id]" onChange="() => disabled[item.id] = !disabled[item.id]">
+                    <t t-esc="item.description"/>
+                </CheckBox>
+            </t>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onApply">Apply</button>
+            </t>
+        </Dialog>
+    `
+
+    setup() {
+        this.disabled = useState({})
+        for (const item of this.props.items) {
+            this.disabled[item.id] = item.disabled
+        }
+    }
+
+    onApply() {
+        for (const item of this.props.items) {
+            item.disabled = this.disabled[item.id]
+        }
+        const ids = this.props.items.filter((item) => item.disabled).map((item) => item.id)
+        browser.localStorage.setItem("disabled_dashboard_items", JSON.stringify(ids))
+        this.props.close()
+    }
+}

From 7c480dccf1b4d6c94625cc13fb341bc7a96f98a9 Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Mon, 24 Aug 2026 11:34:14 +0200
Subject: [PATCH 6/9] [ADD] awesome_dashboard: make sure everything can be
 translated

---
 .../static/src/dashboard/dashboard.js         |  3 ++-
 .../static/src/dashboard/dashboard_items.js   | 25 ++++++++++---------
 .../static/src/dashboard/settings_dialog.js   |  4 ++-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index e128d9118be..3f04729a7b2 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -4,6 +4,7 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { browser } from "@web/core/browser/browser";
+import { _t } from "@web/core/l10n/translation";
 
 import { DashboardItem } from "./dashboard_item";
 import { SettingsDialog } from "./settings_dialog";
@@ -51,7 +52,7 @@ class AwesomeDashboard extends Component {
     gotoLeads() {
         this.action.doAction({
             type: "ir.actions.act_window",
-            name: "Leads",
+            name: _t("Leads"),
             res_model: "crm.lead",
             views: [[false, 'list'], [false, 'form']],
         })
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_items.js b/awesome_dashboard/static/src/dashboard/dashboard_items.js
index e35fd046416..a0525a3fca3 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard_items.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard_items.js
@@ -1,4 +1,5 @@
 import { registry } from "@web/core/registry"
+import { _t } from "@web/core/l10n/translation"
 
 import { NumberCard } from "./number_card"
 import { PieChartCard } from "./pie_chart_card"
@@ -6,60 +7,60 @@ import { PieChartCard } from "./pie_chart_card"
 const items = [
     {
         id: "average_quantity",
-        description: "Average amount of t-shirt",
+        description: _t("Average amount of t-shirt"),
         Component: NumberCard,
         size: 1.5,
         props: (data) => ({
-            title: "Average amount of t-shirt by order this month",
+            title: _t("Average amount of t-shirt by order this month"),
             value: data.average_quantity,
         }),
     },
     {
         id: "average_time",
-        description: "Average time for an order",
+        description: _t("Average time for an order"),
         Component: NumberCard,
         size: 2,
         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: "New orders this month",
+        description: _t("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: "Cancelled orders this month",
+        description: _t("Cancelled orders this month"),
         Component: NumberCard,
         size: 1.5,
         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,
         size: 1.5,
         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_by_size",
-        description: "Shirt orders by size",
+        description: _t("Shirt orders by size"),
         Component: PieChartCard,
         size: 2,
         props: (data) => ({
-            title: "Shirt orders by size",
+            title: _t("Shirt orders by size"),
             values: data.orders_by_size,
         }),
     },
diff --git a/awesome_dashboard/static/src/dashboard/settings_dialog.js b/awesome_dashboard/static/src/dashboard/settings_dialog.js
index 47f7d97682a..1f5d799494d 100644
--- a/awesome_dashboard/static/src/dashboard/settings_dialog.js
+++ b/awesome_dashboard/static/src/dashboard/settings_dialog.js
@@ -3,6 +3,7 @@ import { Component, xml, useState } from "@odoo/owl"
 import { Dialog } from "@web/core/dialog/dialog"
 import { CheckBox } from "@web/core/checkbox/checkbox"
 import { browser } from "@web/core/browser/browser"
+import { _t } from "@web/core/l10n/translation"
 
 export class SettingsDialog extends Component {
     static props = {
@@ -13,7 +14,7 @@ export class SettingsDialog extends Component {
     static components = { Dialog, CheckBox }
 
     static template = xml`
-        <Dialog title="'Dashboard items configuration'">
+        <Dialog title="title">
             Which cards do you wish to see?
             <t t-foreach="props.items" t-as="item" t-key="item.id">
                 <CheckBox value="!disabled[item.id]" onChange="() => disabled[item.id] = !disabled[item.id]">
@@ -27,6 +28,7 @@ export class SettingsDialog extends Component {
     `
 
     setup() {
+        this.title = _t("Dashboard items configuration")
         this.disabled = useState({})
         for (const item of this.props.items) {
             this.disabled[item.id] = item.disabled

From afb9729375f116da512ddf633a98dd00a75d1bb7 Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Mon, 24 Aug 2026 11:44:24 +0200
Subject: [PATCH 7/9] [ADD] awesome_dashboard: responsive cards on mobile

---
 awesome_dashboard/static/src/dashboard/dashboard.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/awesome_dashboard/static/src/dashboard/dashboard.scss b/awesome_dashboard/static/src/dashboard/dashboard.scss
index 769fc1e72f9..32220f725f4 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.scss
+++ b/awesome_dashboard/static/src/dashboard/dashboard.scss
@@ -1,3 +1,11 @@
 .o_dashboard {
     background-color: gray;
+}
+
+@media (max-width: 768px) {
+    .o_dashboard .card {
+        display: block !important;
+        // override the inline width set by DashboardItem
+        width: auto !important;
+    }
 }
\ No newline at end of file

From 6ca7b18ed665c37b2263c37308b6d779ee7ec07c Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Mon, 24 Aug 2026 15:39:33 +0200
Subject: [PATCH 8/9] [ADD] awesome_dashboard: open shirts sold by clicking on
 pie graph

---
 awesome_dashboard/__init__.py                 |  1 +
 awesome_dashboard/__manifest__.py             |  2 +-
 awesome_dashboard/models/__init__.py          |  1 +
 awesome_dashboard/models/sale_order.py        | 10 ++++++++++
 .../static/src/piechart/piechart.js           | 20 +++++++++++++++++++
 5 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 awesome_dashboard/models/__init__.py
 create mode 100644 awesome_dashboard/models/sale_order.py

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 bd10cc6fc0c..602c63b67a6 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/models/__init__.py b/awesome_dashboard/models/__init__.py
new file mode 100644
index 00000000000..6aacb753131
--- /dev/null
+++ b/awesome_dashboard/models/__init__.py
@@ -0,0 +1 @@
+from . import sale_order
diff --git a/awesome_dashboard/models/sale_order.py b/awesome_dashboard/models/sale_order.py
new file mode 100644
index 00000000000..af837ff9258
--- /dev/null
+++ b/awesome_dashboard/models/sale_order.py
@@ -0,0 +1,10 @@
+from odoo import fields, models
+
+
+class SaleOrder(models.Model):
+    _inherit = 'sale.order'
+
+    size = fields.Selection(
+        [('s', 'S'), ('m', 'M'), ('xl', 'XL')],
+        string="T-shirt size",
+    )
diff --git a/awesome_dashboard/static/src/piechart/piechart.js b/awesome_dashboard/static/src/piechart/piechart.js
index 10bf4ef9961..f9fcc9e042a 100644
--- a/awesome_dashboard/static/src/piechart/piechart.js
+++ b/awesome_dashboard/static/src/piechart/piechart.js
@@ -1,6 +1,8 @@
 import { Component, xml, onMounted, onWillStart, onWillUnmount, useRef } from "@odoo/owl";
 
 import { loadJS } from "@web/core/assets";
+import { useService } from "@web/core/utils/hooks";
+import { _t } from "@web/core/l10n/translation";
 
 export class PieChart extends Component {
     static props = {
@@ -15,6 +17,7 @@ export class PieChart extends Component {
 
     setup() {
         this.canvasRef = useRef("canvas");
+        this.action = useService("action");
 
         onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
 
@@ -25,6 +28,9 @@ export class PieChart extends Component {
                     labels: Object.keys(this.props.data),
                     datasets: [{ data: Object.values(this.props.data) }],
                 },
+                options: {
+                    onClick: (ev, elements) => this.onClick(elements),
+                },
             });
         });
 
@@ -32,4 +38,18 @@ export class PieChart extends Component {
             this.chart.destroy();
         });
     }
+
+    onClick([element]) {
+        if (!element) {
+            return;
+        }
+        const size = this.chart.data.labels[element.index];
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: _t("Orders of size %s", size),
+            res_model: "sale.order",
+            domain: [["size", "=", size]],
+            views: [[false, "list"], [false, "form"]],
+        });
+    }
 }

From 1601ce89cb40536865d565635e0ae3ab5cd0c4c0 Mon Sep 17 00:00:00 2001
From: "Juan I. Casareski" <juica@odoo.com>
Date: Tue, 25 Aug 2026 10:50:14 +0200
Subject: [PATCH 9/9] [ADD] awesome_dashboard: save disabled items to server

---
 awesome_dashboard/models/__init__.py          |  1 +
 awesome_dashboard/models/res_users.py         | 15 +++++++++++++
 .../static/src/dashboard/dashboard.js         | 14 ++++++++----
 .../src/dashboard/disabled_items_service.js   | 22 +++++++++++++++++++
 .../static/src/dashboard/settings_dialog.js   |  5 +++--
 5 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 awesome_dashboard/models/res_users.py
 create mode 100644 awesome_dashboard/static/src/dashboard/disabled_items_service.js

diff --git a/awesome_dashboard/models/__init__.py b/awesome_dashboard/models/__init__.py
index 6aacb753131..b6d3b8ca69b 100644
--- a/awesome_dashboard/models/__init__.py
+++ b/awesome_dashboard/models/__init__.py
@@ -1 +1,2 @@
+from . import res_users
 from . import sale_order
diff --git a/awesome_dashboard/models/res_users.py b/awesome_dashboard/models/res_users.py
new file mode 100644
index 00000000000..bb3610905d7
--- /dev/null
+++ b/awesome_dashboard/models/res_users.py
@@ -0,0 +1,15 @@
+from odoo import fields, models
+
+
+class ResUsers(models.Model):
+    _inherit = 'res.users'
+
+    dashboard_disabled_items = fields.Char(default='[]')
+
+    @property
+    def SELF_READABLE_FIELDS(self):
+        return super().SELF_READABLE_FIELDS + ['dashboard_disabled_items']
+
+    @property
+    def SELF_WRITEABLE_FIELDS(self):
+        return super().SELF_WRITEABLE_FIELDS + ['dashboard_disabled_items']
diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js
index 3f04729a7b2..9d9e12f72f7 100644
--- a/awesome_dashboard/static/src/dashboard/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard/dashboard.js
@@ -1,14 +1,14 @@
-import { Component, xml, useState } from "@odoo/owl";
+import { Component, xml, useState, onWillStart } from "@odoo/owl";
 
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
-import { browser } from "@web/core/browser/browser";
 import { _t } from "@web/core/l10n/translation";
 
 import { DashboardItem } from "./dashboard_item";
 import { SettingsDialog } from "./settings_dialog";
 import "./dashboard_items";
+import "./disabled_items_service";
 
 class AwesomeDashboard extends Component {
     static template = xml`
@@ -35,10 +35,16 @@ class AwesomeDashboard extends Component {
         this.action = useService("action")
         this.dialog = useService("dialog")
         this.statistics = useService("awesome_dashboard.statistics")
-        const disabled = JSON.parse(browser.localStorage.getItem("disabled_dashboard_items") || "[]")
+        this.disabledItems = useService("awesome_dashboard.disabled_items")
         this.items = useState(registry.category("awesome_dashboard").getAll().map(
-            (item) => ({ ...item, disabled: disabled.includes(item.id) })
+            (item) => ({ ...item, disabled: false })
         ))
+        onWillStart(async () => {
+            const disabled = await this.disabledItems.load()
+            for (const item of this.items) {
+                item.disabled = disabled.includes(item.id)
+            }
+        })
     }
 
     openSettings() {
diff --git a/awesome_dashboard/static/src/dashboard/disabled_items_service.js b/awesome_dashboard/static/src/dashboard/disabled_items_service.js
new file mode 100644
index 00000000000..cc2bfc506f5
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard/disabled_items_service.js
@@ -0,0 +1,22 @@
+import { registry } from "@web/core/registry";
+import { user } from "@web/core/user";
+
+const disabledItemsService = {
+    dependencies: ["orm"],
+
+    start(env, { orm }) {
+        return {
+            async load() {
+                const [data] = await orm.read("res.users", [user.userId], ["dashboard_disabled_items"]);
+                return JSON.parse(data.dashboard_disabled_items || "[]");
+            },
+            save(ids) {
+                return orm.write("res.users", [user.userId], {
+                    dashboard_disabled_items: JSON.stringify(ids),
+                });
+            },
+        };
+    },
+};
+
+registry.category("services").add("awesome_dashboard.disabled_items", disabledItemsService);
diff --git a/awesome_dashboard/static/src/dashboard/settings_dialog.js b/awesome_dashboard/static/src/dashboard/settings_dialog.js
index 1f5d799494d..c6ae04ab68f 100644
--- a/awesome_dashboard/static/src/dashboard/settings_dialog.js
+++ b/awesome_dashboard/static/src/dashboard/settings_dialog.js
@@ -2,7 +2,7 @@ import { Component, xml, useState } from "@odoo/owl"
 
 import { Dialog } from "@web/core/dialog/dialog"
 import { CheckBox } from "@web/core/checkbox/checkbox"
-import { browser } from "@web/core/browser/browser"
+import { useService } from "@web/core/utils/hooks"
 import { _t } from "@web/core/l10n/translation"
 
 export class SettingsDialog extends Component {
@@ -29,6 +29,7 @@ export class SettingsDialog extends Component {
 
     setup() {
         this.title = _t("Dashboard items configuration")
+        this.disabledItems = useService("awesome_dashboard.disabled_items")
         this.disabled = useState({})
         for (const item of this.props.items) {
             this.disabled[item.id] = item.disabled
@@ -40,7 +41,7 @@ export class SettingsDialog extends Component {
             item.disabled = this.disabled[item.id]
         }
         const ids = this.props.items.filter((item) => item.disabled).map((item) => item.id)
-        browser.localStorage.setItem("disabled_dashboard_items", JSON.stringify(ids))
+        this.disabledItems.save(ids)
         this.props.close()
     }
 }