Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions awesome_dashboard/static/src/dashboard.js

This file was deleted.

15 changes: 15 additions & 0 deletions awesome_dashboard/static/src/dashboard.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.dashboard-card-wrapper {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-card {
border-radius: 1rem;
transition: all 0.3s ease-in-out;
cursor: pointer;
}

.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

8 changes: 0 additions & 8 deletions awesome_dashboard/static/src/dashboard.xml

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// .o_dashboard_cards {
// display: flex;
// flex-wrap: wrap;
// gap: 1rem;
// }

.dashboard-item {
background: white;
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

h5 {
font-size: 1rem;
margin-bottom: 0.5rem;
text-align: center;
}

p {
font-size: 1.5rem;
font-weight: bold;
color: green;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Component } from "@odoo/owl";

export class DashboardItem extends Component {
static template = "awesome_dashboard.DashboardItem";
static props = { size: { type: Number, optional: true, default: 1 } };
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<templates xml:space="preserve">
<t t-name="awesome_dashboard.DashboardItem">
<div class="card p-3 m-1 h-100 shadow-sm dashboard-card animate-hover">
<div class="card-body overflow-auto">
<t t-slot="default"/>
</div>
</div>
</t>
</templates>

Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Component } from "@odoo/owl";

export class NumberCard extends Component {
static template = "awesome_dashboard.NumberCard";
static props = {
label: String,
value: [Number, String],
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<templates xml:space="preserve">
<t t-name="awesome_dashboard.NumberCard">
<h4 class="text-nowrap">
<t t-out="props.label"/>
</h4>
<p class="fs-2 fw-bold">
<t t-out="props.value"/>
</p>
</t>
</templates>
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/** @odoo-module **/

import { Component, useRef, onWillStart, onMounted, onWillUpdateProps } from '@odoo/owl';
import { loadJS } from "@web/core/assets";

export class PieChart extends Component {
static template = 'awesome_dashboard.PieChart';

static props = {
data: Object,
};

setup() {
this.canvasRef = useRef('chartCanvas');
this.chart = null;

onWillStart(async () => {
await loadJS("/web/static/lib/Chart/Chart.js");
});

onMounted(() => {
this.renderChart();
});

onWillUpdateProps((nextProps) => {
if (this.chart) {
// Update dataset data with new props
this.chart.data.labels = Object.keys(nextProps.data);
this.chart.data.datasets[0].data = Object.values(nextProps.data);
this.chart.update(); // ✅ Trigger re-render
}
});
}

renderChart() {
const ctx = this.canvasRef.el.getContext('2d');
this.chart = new Chart(ctx, {
type: "pie",
data: {
labels: Object.keys(this.props.data),
datasets: [
{
label: "Orders by T-shirt Size",
data: Object.values(this.props.data),
backgroundColor: [
"#3498db", "#2ecc71", "#f1c40f", "#e67e22", "#9b59b6"
],
borderWidth: 1
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: "right"
}
}
}
});
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<t t-name="awesome_dashboard.PieChart" owl="1">
<div class="w-100 h-100">
<canvas t-ref="chartCanvas" style="width: 100%; height: 300px;"></canvas>
</div>
</t>
55 changes: 55 additions & 0 deletions awesome_dashboard/static/src/dashboard/dashboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Component, useState, onWillStart } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";
import { registry } from "@web/core/registry";
import { Layout } from "@web/search/layout";
import { DashboardItem } from "./components/dashboard_item/dashboard_item";
import { NumberCard } from "./components/number_card/number_card";
import { PieChart } from "./components/pie_chart/pie_chart";
import { SettingDialog } from "./setting/setting_dialog";

class AwesomeDashboard extends Component {
static template = "awesome_dashboard.AwesomeDashboard";
static components = { Layout, DashboardItem, NumberCard, PieChart };

setup() {
this.dialogService = useService("dialog");
this.action = useService("action");
this.statisticsService = useService("awesome_dashboard.statistics");
this.statistics = useState(this.statisticsService.data);
this.state = useState({ hiddenItems: JSON.parse(localStorage.getItem("awesome_dashboard_hidden_items")) || [] });
}

openCustomers = () => {
this.action.doAction("base.action_partner_customer_form", {
views: [[false, "kanban"]],
});
}

openLeads = () => {
this.action.doAction({
type: "ir.actions.act_window",
name: "Leads",
res_model: "crm.lead",
views: [
[false, "list"],
[false, "form"]
]
});
}

getFilteredItems = () => {
const hiddenSet = new Set(this.state.hiddenItems);
return registry.category("awesome_dashboard.items").getAll().filter(item => !hiddenSet.has(item.id));
}

openSettings = () => {
this.dialogService.add(SettingDialog, {
onApply: (hiddenItems) => {
localStorage.setItem("awesome_dashboard_hidden_items", JSON.stringify(hiddenItems));
this.state.hiddenItems = hiddenItems;
}
});
}
}

registry.category("lazy_components").add("awesome_dashboard.dashboard", AwesomeDashboard);
26 changes: 26 additions & 0 deletions awesome_dashboard/static/src/dashboard/dashboard.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="awesome_dashboard.AwesomeDashboard">
<div class="o_action">
<Layout display="{ controlPanel: {} }" className="'o_dashboard '">
<t t-set-slot="control-panel-create-button">
<button class="btn btn-primary" t-on-click="openCustomers"> Customers</button>
<button class="btn btn-secondary" t-on-click="openLeads"> Leads </button>
</t>
<t t-set-slot="control-panel-additional-actions">
<button class="btn p-0" t-on-click="openSettings">
<i class="fa fa-cog">Settings</i>
</button>
</t>
<div class="d-flex flex-wrap text-center">
<t t-foreach="getFilteredItems()" t-as="item" t-key="item.id">
<DashboardItem size="item.size || 1">
<t t-set="itemProps" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
<t t-component="item.component" t-props="itemProps"/>
</DashboardItem>
</t>
</div>
</Layout>
</div>
</t>
</templates>
73 changes: 73 additions & 0 deletions awesome_dashboard/static/src/dashboard/dashboard_items.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { registry } from "@web/core/registry"
import { NumberCard } from "./components/number_card/number_card";
import { PieChart } from "./components/pie_chart/pie_chart";
import { _t } from "@web/core/l10n/translation";

const dashboardRegistry = registry.category("awesome_dashboard.items");


dashboardRegistry.add("average_quantity", {
id: "average_quantity",
description: _t("Average amount of t-shirt"),
component: NumberCard,
size: 2,
props: (data) => ({
label: _t("Average Quantity"),
value: data.average_quantity,
}),
});

dashboardRegistry.add("average_time", {
id: "average_time",
description: _t("Average order processing time"),
component: NumberCard,
size: 2,
props: (data) => ({
label: _t("Average time"),
value: data.average_time,
}),
});

dashboardRegistry.add("nb_new_orders", {
id: "nb_new_orders",
description: _t("New orders this month"),
component: NumberCard,
size: 1,
props: (data) => ({
label: _t("New orders this month"),
value: data.nb_new_orders,
}),
});

dashboardRegistry.add("nb_cancelled_orders", {
id: "nb_cancelled_orders",
description: _t("Cancelled orders this month"),
component: NumberCard,
size: 1,
props: (data) => ({
label: _t("Number of Cancelled Orders this month"),
value: data.nb_cancelled_orders,
}),
});

dashboardRegistry.add("total_amount", {
id: "total_amount",
description: _t("Total sales amount"),
component: NumberCard,
size: 1,
props: (data) => ({
label: _t("Total amount of new Orders This Month"),
value: data.total_amount,
}),
});

dashboardRegistry.add("orders_by_size", {
id: "orders_by_size",
description: _t("Shirt orders by size"),
component: PieChart,
size: 2,
props: (data) => ({
label: _t("Shirt orders by size"),
data: data.orders_by_size,
}),
});
36 changes: 36 additions & 0 deletions awesome_dashboard/static/src/dashboard/services/statistics.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { registry } from "@web/core/registry";
import { rpc } from "@web/core/network/rpc";
import { reactive } from "@odoo/owl";
import { memoize } from "@web/core/utils/functions";


export const statisticsService = {

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 }
});

const loadStatistics = memoize(async () => {
const result = await rpc("/awesome_dashboard/statistics", {});
if (result) {
Object.assign(stats, result);
}
});

loadStatistics();

setInterval(() => {
loadStatistics();
}, 1000);

return { data: stats };
},
};

registry.category("services").add("awesome_dashboard.statistics", statisticsService);
Loading