Implementation of the Odoo Estate module as outlined in the official tutorial

awesome_dashboard/static/src/dashboard/component/dashboardItem.js

@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+export class DashboardItem extends Component {
+     static template = "awesome_dashboard.DashBoardItem";
+    static props = {
+        size: {
+            type : Number,
+            optional: true,
+            default : 1
+        }
+    }
+}

awesome_dashboard/static/src/dashboard/component/dashboardItem.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+   <t t-name="awesome_dashboard.DashBoardItem">
+      <div class="card d-inline-block m-2" style="width: {{18 * props.size}}rem;">
+         <div class="card-body">
+               <div class="card-text" >
+                  <t t-slot="default"/>
+               </div>
+         </div>
+      </div>
+   </t>
+</templates>

awesome_dashboard/static/src/dashboard/component/dashboard_settings_dialog.js

@@ -0,0 +1,36 @@
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+
+export class DashboardSettingsDialog extends Component {
+    static template = "awesome_dashboard.DashboardSettingsDialog";
+    static components = { Dialog };
+
+     static props = {
+        items: Array,
+        removedIds: Array,
+        onSave: Function,
+        close: { type: Function, optional: false },
+    };
+
+    setup() {
+        this.state = useState({
+            selected: new Set(this.props.items.map(i => i.id).filter(id => !this.props.removedIds.includes(id))),
+        });
+
+        this.toggleItem = (id) => {
+            if (this.state.selected.has(id)) {
+                this.state.selected.delete(id);
+            } else {
+                this.state.selected.add(id);
+            }
+        };
+    }
+
+    save() {
+        const unchecked = this.props.items
+            .map(item => item.id)
+            .filter(id => !this.state.selected.has(id));
+        this.props.onSave(unchecked);
+        this.props.close();
+    }
+}

awesome_dashboard/static/src/dashboard/component/dashboard_settings_dialog.xml

@@ -0,0 +1,21 @@
+<t t-name="awesome_dashboard.DashboardSettingsDialog" owl="1">
+    <Dialog title="'Customize Dashboard'" t-on-close="props.close">
+        <div class="p-3">
+            <t t-foreach="props.items" t-as="item" t-key="item.id">
+                <div class="form-check mb-2">
+                    <input type="checkbox"
+                           class="form-check-input"
+                           t-att-id="item.id"
+                           t-att-checked="state.selected.has(item.id) ? true : undefined"
+                           t-on-change="() => toggleItem(item.id)" />
+                    <label class="form-check-label" t-att-for="item.id">
+                        <t t-esc="item.description"/>
+                    </label>
+                </div>
+            </t>
+        </div>
+        <t t-set-slot="footer">
+            <button type="button" class="btn btn-primary" t-on-click="save">Apply</button>
+        </t>
+    </Dialog>
+</t>

awesome_dashboard/static/src/dashboard/component/numberCard.js

@@ -0,0 +1,8 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component{
+   static template = "awesome_dashboard.NumberCard";
+   static props = ["title", "value"];
+}

awesome_dashboard/static/src/dashboard/component/numberCard.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.NumberCard" owl="1">
+        <div class="text-center p-4">
+            <h6 class="text-muted text-uppercase mb-2"><t t-esc="props.title" /></h6>
+            <p class="display-6 fw-bold text-primary mb-0"><t t-esc="props.value" /></p>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/component/pieChart.js

@@ -0,0 +1,50 @@
+/** @odoo-module **/
+
+import { loadJS } from "@web/core/assets";
+import { Component, onWillStart,useRef,onWillUpdateProps,onMounted } from "@odoo/owl";
+
+export class PieChart extends Component{
+
+    static template = "awesome_dashboard.pie_chart"
+
+    setup(){
+        this.canvasRef = useRef("canvas")
+        onWillStart(async()=>{
+            await loadJS("/web/static/lib/Chart/Chart.js")
+        })
+        onMounted(() => {
+            this.renderChart();
+        });
+        onWillUpdateProps((nextProps) => {
+            if (this.chart) {
+                this.chart.destroy();
+            }
+            this.renderChart(nextProps.data);
+        });
+    }
+
+    renderChart(){
+        const labels = Object.keys(this.props.data);
+        const data = Object.values(this.props.data);
+        const color = ["#007BFF", "#FFA500", "#808090",];
+        const ctx = this.canvasRef.el.getContext("2d");
+        this.chart = new Chart(ctx,{
+            type:"pie",
+            data:{
+                labels:labels,
+                datasets: [
+                    {
+                        data:data,
+                        backgroundColor: color
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+            },
+
+        })
+
+    }
+}

awesome_dashboard/static/src/dashboard/component/pieChart.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+<t t-name="awesome_dashboard.pie_chart">
+    <h4>
+        <t t-esc="props.title"/>
+    </h4>
+    <div>
+        <canvas t-ref="canvas"/>
+    </div>
+</t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,65 @@
+/** @odoo-module **/
+
+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 "./component/dashboardItem";
+import { PieChart } from "./component/pieChart";
+import { NumberCard } from "./component/numberCard";
+import { DashboardSettingsDialog } from "./component/dashboard_settings_dialog";
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = {Layout, DashboardItem, PieChart, NumberCard}
+
+    setup(){
+        let staticsService = useService("awesome_dashboard.statistics");
+        this.dialog = useService("dialog");
+        this.display = {controlPanel: {} };
+        this.action = useService("action");
+        this.stats = useState(staticsService.data);
+        this.removedItemIds = useState(this.getRemovedItems());
+        this.items = registry.category("awesome_dashboard.items").getAll();
+    }
+
+    openCustomersKanban()
+    {
+         this.action.doAction("base.action_partner_form");
+    }
+
+    openLeads()
+    {
+        this.action.doAction({
+            type: 'ir.actions.act_window',
+            name: "Leads",
+            res_model: "crm.lead",
+            views:[
+                [false,"list"],
+                [false,"form"]
+            ]
+        });
+
+    }
+
+    get visibleItems() {
+        return this.items.filter(item => !this.removedItemIds.includes(item.id));
+    }
+
+    getRemovedItems() {
+        return JSON.parse(localStorage.getItem("awesome_dashboard.removed_items") || "[]");
+    }
+
+    openSettings()
+    {
+         this.dialog.add(DashboardSettingsDialog, {
+            items: this.items,
+            removedIds: this.removedItemIds,
+            onSave: (removed) => {
+                localStorage.setItem("awesome_dashboard.removed_items", JSON.stringify(removed));
+                this.removedItemIds.splice(0, this.removedItemIds.length, ...removed);
+            }
+        });
+    }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <Layout display="display" className="'o_dashboard h-100'">
+            <t t-set-slot="layout-buttons">
+                <button class="btn btn-primary" t-on-click="openCustomersKanban">Customers</button>
+                <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
+                <button type="button" class="btn btn-outline-secondary" t-on-click="openSettings">
+                    <i class="fa fa-cog me-1"/> Settings
+                </button>
+            </t>
+
+            <div class="o_dashboard_content d-flex flex-wrap gap-3 p-3">
+                <t t-foreach="visibleItems" t-as="item" t-key="item.id">
+                    <DashboardItem size="item.size || 1">
+                        <t t-set="itemProps" t-value="item.props ? item.props(stats) : { data: stats }"/>
+                        <t t-component="item.Component" t-props="itemProps"/>
+                    </DashboardItem>
+                </t>
+            </div>
+        </Layout>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -0,0 +1,69 @@
+
+import { registry } from "@web/core/registry";
+import { PieChart } from "./component/pieChart"; 
+import { NumberCard } from "./component/numberCard";
+import { _t } from "@web/core/l10n/translation";
+
+const dashboardItems = [
+     {
+        id: "nb_new_orders",
+        description: _t("Number of new orders"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: _t("New Orders This Month"),
+            value: data.nb_new_orders,
+        }),
+    },
+    {
+        id: "total_amount",
+        description: _t("Total order amount"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: "Total Order Amount",
+            value: data.total_amount,
+        }),
+    },
+    {
+        id: "average_quantity",
+        description: _t("Average t-shirt quantity"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: _t("Avg T-shirts per Order"),
+            value: data.average_quantity,
+        }),
+    },
+    {
+        id: "nb_cancelled_orders",
+        description:_t("Cancelled Orders"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: "Cancelled Orders",
+            value: data.nb_cancelled_orders,
+        }),
+    },
+    {
+        id: "average_time",
+        description: _t("Avg processing time"),
+        Component: NumberCard,
+        size: 2,
+        props: (data) => ({
+            title: "Avg Time to Ship/Cancel",
+            value: data.average_time + " min",
+        }),
+    },
+    {
+        id: "pie_chart",
+        description:_t("Orders by size"),
+        Component: PieChart,
+        size: 2,
+        props: (data) => ({ data: data.orders_by_size }),
+    },
+];
+
+for (const item of dashboardItems) {
+    registry.category("awesome_dashboard.items").add(item.id, item);
+}

awesome_dashboard/static/src/dashboard/service/dashboardStatisticsService.js

@@ -0,0 +1,35 @@
+import { rpc } from "@web/core/network/rpc";
+import { registry } from "@web/core/registry";
+import { reactive } from "@odoo/owl";
+
+const dashboardStatisticsService = { 
+
+        start() {
+        const stats = reactive({
+            nb_new_orders: 0,
+            total_amount: 0,
+            average_quantity: 0,
+            nb_cancelled_orders: 0,
+            average_time: 0,
+            orders_by_size: { m: 0, s: 0, xl: 0 }
+        });
+        async function fetchStatistics() {
+            const result =   await rpc("/awesome_dashboard/statistics");
+            if (result) {
+            Object.assign(stats, result);
+          }
+        }
+
+        fetchStatistics();
+
+        setInterval(() => {
+            fetchStatistics();
+        }, 10601000);
+        return {
+            data : stats
+        };
+    },
+
+}
+
+registry.category("services").add("awesome_dashboard.statistics", dashboardStatisticsService);

awesome_dashboard/static/src/dashboard_action.js

@@ -0,0 +1,14 @@
+/** @odoo-module **/
+
+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'" />
+    `;
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader);

awesome_owl/__manifest__.py

@@ -33,6 +33,7 @@
             'web/static/lib/bootstrap/scss/_variables.scss',
             'web/static/lib/bootstrap/scss/_maps.scss',
             ('include', 'web._assets_bootstrap'),
+            ("include", "web._assets_bootstrap_backend"),
             ('include', 'web._assets_core'),
             'web/static/src/libs/fontawesome/css/font-awesome.css',
             'awesome_owl/static/src/**/*',