[IMP]: awesome_dashboard: Implement real life update, lazy loading and generic dashboard.

- Convert statistics into a shared reactive object in the service, reload it every 10 minutes, and let any displayed dashboard update instantly via useState.
- Bundle all dashboard files together and load them on demand using LazyComponent so the code only loads when the user actually views the dashboard.
- Replace hard-coded dashboard content with a configurable items list, using dynamic components and props to support different types of cards like NumberCard and PieChartCard.

Author: aarp-odoo

awesome_dashboard/__manifest__.py

@@ -25,6 +25,9 @@
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
         ],
+        'awesome_dashboard.dashboard:': [
+            'awesome_dashboard/static/src/dashboard/**/*'
+        ],
     },
     'license': 'AGPL-3'
 }

awesome_dashboard/static/src/dashboard.js

@@ -0,0 +1,14 @@
+import { Component } from '@odoo/owl'
+
+export class NumberCard extends Component {
+    static template = "awesome_dashboard.numberCard"
+    static components = {}
+    static props = {
+        title: {
+            type: String
+        },
+        value: {
+            type: Number | String
+        }
+    }
+}

awesome_dashboard/static/src/dashboard/NumberCard/number_card.js

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="awesome_dashboard.numberCard">
+        <h2 class="text-lg-center">
+            <t t-esc="props.title"/>
+        </h2>
+        <div class="text-success text-bold text-lg-center" style="font-size: 38px; font-weight: bold">
+            <t t-esc="props.value"/>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/NumberCard/number_card.xml

@@ -7,8 +7,11 @@ export class PieChart extends Component {
     static template = "awesome_dashboard.PieChart";
 
     static props = {
-        tshirtSales: {
-            type: Object,
+        title: {
+            type: String,
+        },
+        value: {
+            type: String | Number,
         }
     }
 
@@ -21,17 +24,17 @@ export class PieChart extends Component {
         useEffect(() => {
             this.createChart();
             return () => this.chart?.destroy();
-        }, () => []);
+        });
     }
 
     getChartConfig() {
-        if (!this.props.tshirtSales) return {};
+        if (!this.props.value) return {};
         return {
             type: 'pie',
             data: {
-                labels: Object.keys(this.props.tshirtSales),
+                labels: Object.keys(this.props.value),
                 datasets: [{
-                    data: Object.values(this.props.tshirtSales),
+                    data: Object.values(this.props.value),
                 }]
             },
             options: {

awesome_dashboard/static/src/pie_chart/pie_chart.js renamed to awesome_dashboard/static/src/dashboard/PieChartCard/pie_chart.js

@@ -0,0 +1,84 @@
+/** @odoo-module **/
+
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { DashboardItem } from "../dashboard_item/dashboard_item";
+import { PieChart } from "./PieChartCard/pie_chart";
+import { dashboardCards } from "./dashboard_items";
+import { Component, useState } from "@odoo/owl";
+
+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.stats);
+        this.items = useState(dashboardCards);
+    }
+
+    get cards() {
+        return [
+            {
+                id: "nb_new_orders",
+                description: "New t-shirt orders this month.",
+                size: 2,
+                props: (data) => ({
+                    title: "Number of new orders this month",
+                    value: this.result.nb_new_orders,
+                }),
+            },
+            {
+                id: "total_amount",
+                description: "New orders this month.",
+                size: 2,
+                title: "Total amount of new order this month",
+                value: this.result.total_amount,
+            },
+            {
+                id: "average_quantity",
+                description: "Average amount of t-shirt.",
+                size: 2,
+                title: "Average amount of t-shirt by order this month",
+                value: this.result.average_quantity,
+            },
+            {
+                id: "nb_cancelled_orders",
+                description: "Cancelled orders this month.",
+                size: 2,
+                title: "Number of cancelled orders this month",
+                value: this.result.nb_cancelled_orders,
+            },
+            {
+                id: "average_time",
+                description: "Average time for an order to reach conclusion (sent or cancelled).",
+                size: 2,
+                title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+                value: this.result.average_time,
+            }
+        ]
+    }
+
+    get chart() {
+        return this.result.orders_by_size;
+    }
+
+    openCustomers() {
+        this.action.doAction("base.action_partner_form");
+    }
+    
+    openLeads() {
+        this.action.doAction({
+            type: 'ir.actions.act_window',
+            name: _t('Leads'),
+            target: 'current',
+            res_model: 'crm.lead',
+            views: [[false, 'kanban'], [false, 'list'], [false, 'form']], // [view_id, view_type]
+        });
+    }
+}
+
+registry.category("lazy_components").add("awesome_dashboard.LazyComponent", AwesomeDashboard);

awesome_dashboard/static/src/pie_chart/pie_chart.xml renamed to awesome_dashboard/static/src/dashboard/PieChartCard/pie_chart.xml

@@ -10,19 +10,26 @@
 
             <div class="d-flex flex-wrap gap-3 m-3">
                 <div class="d-flex flex-wrap gap-3">
-                    <t t-foreach="cards" t-as="card" t-key="card.id">
+                    <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-log="itemProp"/>
+                            <t t-component="item.Component" t-props="itemProp"/>
+                        </DashboardItem>
+                    </t>
+                    <!-- <t t-foreach="cards" t-as="card" t-key="card.id">
                         <DashboardItem size="card.size">
                             <p class="mb-0" style="text-align: left;" t-esc="card.title"/>
                             <t t-set-slot="value">
                                 <t t-esc="card.value"/>
                             </t>
                         </DashboardItem>
-                    </t>
+                    </t> -->
                 </div>
-                <DashboardItem size="2">
+                <!-- <DashboardItem size="2">
                     <p class="mb-0 text-center">T-Shirt orders by size</p>
-                    <PieChart tshirtSales="this.result.orders_by_size"/>
-                </DashboardItem>
+                    <PieChart tshirtSales="chart"/>
+                </DashboardItem> -->
             </div>
         </Layout>
     </t>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,66 @@
+
+import { NumberCard } from "./NumberCard/number_card";
+import { PieChart } from "./PieChartCard/pie_chart";
+
+export const dashboardCards = [
+    {
+        id: "nb_new_orders",
+        description: "New t-shirt orders this month.",
+        Component: NumberCard,
+        size: 2,
+        props: (data) => ({
+            title: "Number of new orders this month",
+            value: data.nb_new_orders,
+        }),
+    },
+    {
+        id: "total_amount",
+        description: "New orders this month.",
+        Component: NumberCard,
+        size: 2,
+        props: (data) => ({
+            title: "Total amount of new order this month",
+            value: data.total_amount,
+        }),
+    },
+    {
+        id: "average_quantity",
+        description: "Average amount of t-shirt.",
+        Component: NumberCard,
+        size: 2,
+        props: (data) => ({
+            title: "Average amount of t-shirt by order this month",
+            value: data.average_quantity,
+        }),
+    },
+    {
+        id: "nb_cancelled_orders",
+        description: "Cancelled orders this month.",
+        Component: NumberCard,
+        size: 2,
+        props: (data) => ({
+            title: "Number of cancelled orders this month",
+            value: data.nb_cancelled_orders,
+        }),
+    },
+    {
+        id: "average_time",
+        description: "Average time for an order to reach conclusion (sent or cancelled).",
+        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: "orders_by_size",
+        description: "T-shirt orders grouped by their size.",
+        Component: PieChart,
+        size: 2,
+        props: (data) => ({
+            title: "T-shirt order by size",
+            value: data.orders_by_size,
+        }),
+    }
+]