[ADD] estate and awesome dashboard: add estate module for property selling and build awesome_dashboard using owl

awesome_dashboard/__manifest__.py

@@ -23,7 +23,10 @@
     ],
     'assets': {
         'web.assets_backend': [
-            'awesome_dashboard/static/src/**/*',
+            'awesome_dashboard/static/src/lazy_load_wrapper.js',
+        ],
+        'awesome_dashboard.dashboard': [
+            'awesome_dashboard/static/src/dashboard/**/*',
         ],
     },
     'license': 'AGPL-3'

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,47 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import { Layout } from "@web/search/layout";
+import { DashboardItem } from "./dashboard_item";
+import { Piechart } from "./piechart";
+import { registry } from "@web/core/registry";
+import { DBModal } from "./dashboard_setting_modal";
+
+export class AwesomeDashboard extends Component {
+  static template = "awesome_dashboard.AwesomeDashboard";
+
+  static components = { Layout, DashboardItem, Piechart };
+
+  setup() {
+    this.action = useService("action");
+    this.statisticService = useService("load_statistics");
+    this.data = useState(this.statisticService);
+    this.dialog = useService("dialog");
+  }
+
+  openMyModal() {
+    this.dialog.add(DBModal, {
+      items: this.data.stats,
+      chart: this.data.chartData,
+    });
+  }
+
+  viewCustomers() {
+    this.action.doAction("base.action_partner_form");
+  }
+
+  viewLeads() {
+    this.action.doAction({
+      type: "ir.actions.act_window",
+      target: "current",
+      res_model: "crm.lead",
+      views: [
+        [false, "form"],
+        [false, "list"],
+      ],
+    });
+  }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -0,0 +1,6 @@
+.o_dashboard {
+    background-color: #111827;
+    .db-item-title {
+        font-size:18px;
+    }
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,26 @@
+<?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 class="btn btn-primary" t-on-click="viewCustomers">Customers</button>
+                    <button class="btn btn-primary ms-2" t-on-click="viewLeads">Leads</button>
+                    <span class="fa fa-gear cursor-pointer mt-2 mx-2" t-on-click="openMyModal"/>
+            </t>
+            <div class="flex-wrap d-flex  gap-3 p-3">
+                <t t-if="this.data.stats.length > 0">
+                    <t t-foreach="this.data.stats" t-as="stat" t-key="stat.title">
+                        <t t-if="stat.isVisible">
+                            <DashboardItem title="stat.title" value="stat.value" size="stat.size"/>
+                        </t>
+                    </t>
+                    <t t-if="this.data.chartData.isVisible">
+                        <Piechart chartData="this.data.chartData"/>
+                    </t>
+                </t>
+            </div>
+        </Layout>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_item.js

@@ -0,0 +1,15 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+  static template = "awesome_dashboard.dashboard_item";
+
+  static components = {};
+
+  static props = ["size", "title", "value"];
+
+  static defaultProps = {
+    size: 1,
+  };
+}

awesome_dashboard/static/src/dashboard/dashboard_item.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_item">
+        <div t-att-style="`width:${18*props.size}rem`" class="bg-light p-3 rounded">
+             <p t-out="props.title" class="db-item-title"/>
+             <h1 t-out="props.value" class="text-success"/>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_setting_modal.js

@@ -0,0 +1,46 @@
+import { Component } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+
+export class DBModal extends Component {
+  static template = "awesome_dashboard.db_modal";
+  static components = { Dialog };
+
+  static props = ['items','chart']
+
+  setup() {
+    this.items = this.props.items;
+    this.chart = this.props.chart;
+    this.visibleList = this.items.reduce((acc, crr) => {
+      if (crr?.isVisible) {
+        acc?.push(crr?.id);
+      }
+      return acc;
+    }, []);
+
+    if (this.chart.isVisible) {
+      this.visibleList.push("chart");
+    }
+  }
+
+  handleItemToggle = (_, id) => {
+    if (this.visibleList.includes(id)) {
+      this.visibleList = this.visibleList.filter((i) => i !== id);
+    } else {
+      this.visibleList.push(id);
+    }
+  };
+
+  handleApplySetting() {
+    this.items.forEach((item) => {
+      item.isVisible = this.visibleList.includes(item?.id);
+    });
+
+    this.chart.isVisible = this.visibleList.includes("chart");
+
+    localStorage.setItem(
+      "dashboardItemVisibility",
+      JSON.stringify(this.visibleList)
+    );
+    this.props.close();
+  }
+}

awesome_dashboard/static/src/dashboard/dashboard_setting_modal.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+  <t t-name="awesome_dashboard.db_modal">
+    <Dialog title="'Dashboard items configuration'">
+       <h4>Which cards do you wish to see ?</h4>
+       <t t-foreach="this.items" t-as="item" t-key="item.title">
+         <div class="d-flex align-items-center mb-1">
+           <input type="checkbox" t-on-change="(e)=>handleItemToggle(e,item.id)" t-att-checked="item.isVisible"/>
+           <p class="mb-0 ms-2" t-out="item.title"/>
+         </div>
+       </t>
+        <div class="d-flex align-items-center mb-1">
+           <input type="checkbox" t-on-change="(e)=>handleItemToggle(e,'chart')" t-att-checked="this.chart.isVisible"/>
+           <p class="mb-0 ms-2">T-shirts Sales by size</p>
+         </div>
+       <t t-set-slot="footer">
+          <button class="btn btn-primary" t-on-click="handleApplySetting">Apply</button>
+       </t>
+    </Dialog>
+  </t>
+</templates>

awesome_dashboard/static/src/dashboard/piechart.js

@@ -0,0 +1,59 @@
+import { Component, onWillStart, useRef, useEffect } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class Piechart extends Component {
+  static template = "awesome_dashboard.piechart";
+
+  static components = {};
+
+  static props = ["chartData"];
+
+  setup() {
+    this.canvasRef = useRef("canvas");
+    this.chart = null;
+    this.chartData = this.props.chartData;
+    onWillStart(() => loadJS(["/web/static/lib/Chart/Chart.js"]));
+    useEffect(
+      () => this.renderChart(),
+      () => [this.chartData]
+    );
+  }
+
+  renderChart() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.chart = new Chart(this.canvasRef.el, {
+      data: this.chartData,
+      type: "pie",
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            position: "bottom",
+            labels: {
+              padding: 20,
+              usePointStyle: true,
+              pointStyle: "rect",
+              font: {
+                size: 16,
+                weight: "bold",
+                color: "#fff",
+              },
+            },
+          },
+          title: {
+            display: true,
+            text: "T-Shirt Sales by Size",
+            font: {
+              size: 16,
+              weight: "bold",
+            },
+            padding: 0,
+          },
+        },
+      },
+    });
+  }
+}

awesome_dashboard/static/src/dashboard/piechart.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.piechart">
+        <div class="bg-light p-3 rounded">
+            <canvas t-ref="canvas"/>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/statistic.js

@@ -0,0 +1,62 @@
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { reactive } from "@odoo/owl";
+
+const statsMap = {
+  average_quantity: { id: 1, title: "Average quanitity order" },
+  average_time: { id: 2, title: "Average time for order from new to sent" },
+  nb_cancelled_orders: { id: 3, title: "Number of cancelled order this month" },
+  nb_new_orders: { id: 4, title: "Number of new orders this month" },
+  total_amount: { id: 5, title: "Total amount of new orders" },
+};
+
+const statisticService = {
+  start() {
+    let stats = reactive([]);
+    let chartData = reactive({});
+    const loadStatistics = async () => {
+      const result = await rpc("/awesome_dashboard/statistics");
+      const dbItemVisibility = localStorage.getItem("dashboardItemVisibility");
+      let formatedres = Object.entries(result).reduce((prev, [key, value]) => {
+        const item = statsMap[key];
+
+        if (item) {
+          prev.push({
+            id: item?.id,
+            title: item?.title,
+            size: item?.title?.length > 30 ? 2 : 1,
+            value,
+            isVisible: dbItemVisibility
+              ? dbItemVisibility.includes(item?.id)
+              : true,
+          });
+        } else if (typeof value === "object") {
+          chartData.labels = Object.keys(value);
+          chartData.datasets = [
+            {
+              label: "Order by size",
+              data: Object.values(value),
+            },
+          ];
+          chartData.isVisible = dbItemVisibility
+            ? dbItemVisibility.includes("chart")
+            : true;
+        }
+        return prev;
+      }, []);
+
+      stats?.push(...formatedres);
+
+      return { stats, chartData };
+    };
+
+    loadStatistics();
+
+    return {
+      stats,
+      chartData,
+    };
+  },
+};
+
+registry.category("services").add("load_statistics", statisticService);

awesome_dashboard/static/src/lazy_load_wrapper.js

@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { LazyComponent } from "@web/core/assets";
+import { xml, Component } from "@odoo/owl";
+
+class DashoboardLazyLoader extends Component {
+  static components = { LazyComponent };
+  static template = xml`
+        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" />
+    `;
+}
+
+registry
+  .category("actions")
+  .add("awesome_dashboard.dashboard", DashoboardLazyLoader);

awesome_owl/static/src/card.js

@@ -0,0 +1,15 @@
+import { Component , useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+
+    static components = { }
+
+    setup(){
+        this.showCardContent = useState({value:true});
+    }
+
+    toggleCardContent(){
+        this.showCardContent.value = !this.showCardContent.value;
+    }
+}

awesome_owl/static/src/card.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.card">
+        <div class="card mt-4">
+            <div class="card-header  d-flex justify-content-between align-items-center">
+                <h4 class="header-title mb-0">
+                    <t t-slot="card-title"/>
+                </h4>
+                <span class="fa  cursor-pointer" t-att-class="showCardContent.value ? 'fa-chevron-up': 'fa-chevron-down'" t-on-click="toggleCardContent"></span>
+            </div>
+
+            <div class="card-body" t-att-class="showCardContent.value ? 'd-flex' : 'd-none'">
+                <t t-slot="card-content"/>
+            </div>
+
+        </div>
+    </t>
+
+</templates>