[ADD] awesome_dashboard: implement custom dashboard module

Developed a custom dashboard module using OWL and JavaScript to display
key business metrics in a dynamic and user-friendly interface.
The dashboard integrates with backend models to show real-time data using
cards and charts.This module demonstrates how to build interactive dashboards
in Odoo using client-side rendering and custom components.

Author: niyp-odoo

awesome_dashboard/static/src/dashboard.js

@@ -0,0 +1,78 @@
+/** @odoo-module **/
+
+import { Component, onWillStart, useState } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { DashboardItem } from "./dashboardItem/dashboarditem";
+import { rpc } from "@web/core/network/rpc";
+import { DashboardSetting } from "./dashboardSetting/dashboardsetting";
+import { PieChart } from "./piechart/piechart";
+
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+
+    static components = { Layout, DashboardItem, PieChart };
+
+    setup() {
+        const dashboardItemsRegistry = registry.category("awesome_dashboard");
+        this.items = dashboardItemsRegistry.getAll();
+        this.dialogService = useService("dialog");
+
+
+        this.action = useService("action");
+        this.statisticsService = useService("awesome_dashboard.statistics");
+        this.state = useState({ statistics: this.statisticsService.statistics });
+
+
+        this.displayState = useState({
+            disabledItems: [],
+            isLoading: true,
+        });
+        onWillStart(async () => {
+            try {
+                const fetchedDisabledItems = await rpc("/web/dataset/call_kw/res.users/get_dashboard_settings", {
+                    model: 'res.users',
+                    method: 'get_dashboard_settings',
+                    args: [],
+                    kwargs: {},
+                });
+                this.displayState.disabledItems = fetchedDisabledItems;
+            } catch (error) {
+                console.error("Error loading initial dashboard settings from server:", error);
+                this.displayState.disabledItems = [];
+            } finally {
+                this.displayState.isLoading = false;
+            }
+        });
+    }
+
+    updateSettings(newUncheckedItems) {
+        this.displayState.disabledItems.length = 0;
+        this.displayState.disabledItems.push(...newUncheckedItems);
+    }
+
+    openSettings() {
+        this.dialogService.add(DashboardSetting, {
+            items: this.items,
+            initialDisabledItems: this.displayState.disabledItems,
+            updateSettings: this.updateSettings.bind(this),
+        });
+    }
+
+    openCustomerView() {
+        this.action.doAction("base.action_partner_form")
+    }
+
+    openLeadsView() {
+        this.action.doAction({
+            type: 'ir.actions.act_window',
+            target: 'current',
+            res_model: 'crm.lead',
+            views: [[false, 'list'], [false, 'form']],
+        })
+    }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.xml

@@ -0,0 +1,28 @@
+<?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: {} }">
+            <t t-set-slot="control-panel-create-button">
+                <button type="button" class="btn btn-primary o-kanban-button-new" t-on-click="openCustomerView">Customer</button>
+                <button type="button" class="btn btn-primary o-kanban-button-new" t-on-click="openLeadsView">Leads</button>
+            </t>
+            <t t-set-slot="control-panel-additional-actions">
+                <button type="button" icon="fa-cog" class="btn btn-light"
+                    t-on-click="openSettings">
+                    <i class="fa fa-cog" />
+                </button>
+            </t>
+            <div class="dashboard-items">
+                <t t-foreach="this.items" t-as="item" t-key="item.id">
+                    <DashboardItem size="item.size || 1"
+                        t-if="!this.displayState.disabledItems.includes(item.id)">
+                        <t t-set="itemProp" t-value="item.props ? item.props(this.state.statistics) : {'data': this.state.statistics}"/>
+                        <t t-component="item.Component" t-props="itemProp" />
+                    </DashboardItem>
+                </t>
+            </div>
+        </Layout>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,11 @@
+/** @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/dashboard.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardItem">
+        <t t-set="itemSize" t-value="props.size or 1"/>
+        <div t-attf-class="o_dashboard_item"
+            t-attf-style="width: #{18 * itemSize}rem;">
+            <t t-slot="default"/>
+        </div>
+    </t>
+</templates>

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

@@ -0,0 +1,54 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { rpc } from "@web/core/network/rpc";
+import { _t } from "@web/core/l10n/translation";
+
+export class DashboardSetting extends Component {
+    static template = "awesome_dashboard.setting";
+
+    static components = { Dialog };
+
+    static props = {
+        close: { type: Function }
+    };
+
+    setup() {
+        const items = this.props.items || {};
+
+        const initialDisabledItems = this.props.initialDisabledItems || [];
+
+        this.settingDisplayItems = Object.values(items).map((item) => ({
+            ...item,
+            checked: !initialDisabledItems.includes(item.id),
+        }))
+    }
+
+    _t(...args) {
+        return _t(...args);
+    }
+
+    onChange(checked, itemInDialog) {
+        const targetItem = this.settingDisplayItems.find(i => i.id === itemInDialog.id);
+        if (targetItem) {
+            targetItem.checked = checked;
+        }
+    }
+
+    async confirmDone() {
+        const newDisableItems = this.settingDisplayItems.filter((item) => !item.checked).map((item) => item.id);
+
+        await rpc("/web/dataset/call_kw/res.users/set_dashboard_settings", {
+            model: 'res.users',
+            method: 'set_dashboard_settings',
+            args: [newDisableItems],
+            kwargs: {},
+        });
+
+        if (this.props.updateSettings) {
+            this.props.updateSettings(newDisableItems);
+        }
+        this.props.close();
+    }
+}

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

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.setting">
+        <Dialog title="_t('Dashboard Items Configuration')">
+            <div class="p-3">
+                <h2>Select items to display on your dashboard:</h2>
+                <div t-foreach="settingDisplayItems" t-as="item" t-key="item.id" class="form-check mb-2">
+                    <input
+                        type="checkbox"
+                        class="form-check-input"
+                        t-att-id="'settings_item_' + item.id"
+                        t-att-checked="item.checked"
+                        t-on-change="(ev) => this.onChange(ev.target.checked, item)"
+                    />
+                    <label class="form-check-label" t-att-for="'settings_item_' + item.id">
+                        <t t-out="item.description"/>
+                    </label>
+                </div>
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="confirmDone">Done</button>
+                <button class="btn btn-secondary ms-2" t-on-click="props.close">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboardSetting/dashboardsetting.js

@@ -0,0 +1,40 @@
+.o_dashboard{
+    background-color: gray;
+}
+.o_dashboard_stat_block {
+    text-align: center;
+    margin-bottom: 24px;
+}
+
+.o_dashboard_stat_label {
+    font-weight: normal;
+    margin-bottom: 10px;
+    display: block;
+}
+
+.o_dashboard_stat_value {
+    font-size: 48px;
+    color: #228B22;
+    font-weight: bold;
+}
+.o_dashboard_item {
+    background: #fff;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+    padding: 1rem;
+    margin: 1rem;
+    display: inline-flex;
+    justify-content: center;
+    vertical-align: top;
+    min-height: 3rem;
+}
+
+@media (max-width: 426px) {
+    .o_dashboard_item {
+        width: 100% !important;
+        display: flex;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+        box-sizing: border-box;
+    }
+}

awesome_dashboard/static/src/dashboard/dashboardSetting/dashboardsetting.xml

@@ -0,0 +1,70 @@
+import { NumberCard } from "./numbercard/numbercard";
+import { PieChartCard } from "./piechartcard/piechartcard";
+import { registry } from "@web/core/registry";
+import { _t } from "@web/core/l10n/translation";
+
+const items = [
+    {
+        id: "nb_new_orders",
+        description: _t("The number of new orders, this month"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: _t("New Orders This Month:"),
+            value: data.data.nb_new_orders
+        }),
+    },
+    {
+        id: "total_amount",
+        description: _t("The total amount of orders, this month"),
+        Component: NumberCard,
+        size: 2,
+        props: (data) => ({
+            title: "Total Amount This Month:",
+            value: data.data.total_amount
+        }),
+    },
+    {
+        id: "average_quantity",
+        description: _t("The average number of t-shirts by order"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: _t("Avg. T-Shirts per Order:"),
+            value: data.data.average_quantity
+        }),
+    },
+    {
+        id: "nb_cancelled_orders",
+        description: _t("The number of cancelled orders, this month"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: _t("Cancelled Orders:"),
+            value: data.data.nb_cancelled_orders
+        }),
+    },
+    {
+        id: "average_time",
+        description: _t("The average time (in hours) elapsed between the moment an order is created, and the moment is it sent"),
+        Component: NumberCard,
+        size: 1,
+        props: (data) => ({
+            title: _t("Avg. Time New → Sent/Cancelled:"),
+            value: data.data.average_time
+        }),
+    },
+    {
+        id: "orders_by_size",
+        description: _t("Number of shirts ordered based on size"),
+        Component: PieChartCard,
+        size: 3,
+        props: (data) => ({
+            title: _t("Shirt orders by size:"),
+            value: data.data.orders_by_size
+        }),
+    }
+]
+items.forEach((item) => {
+    registry.category("awesome_dashboard").add(item.id, item)
+});