[IMP] website_sale: design ecommerce dashboard #4833

ldau-odoo · 2025-10-28T13:38:10Z

This PR adapts the e-commerce dashboard design by:

emphasizing the cards when there is data to display.
making the card active on click.
hiding the "To confirm" card when there is no data to display because
it's not a common case.

task-5177259

robodoo · 2025-10-28T13:38:13Z

This PR targets the un-managed branch odoo-dev/odoo:master-awesome-ecommerce-dashboard-nipl, it needs to be retargeted before it can be merged.

nipl-odoo

Hello Laetitia 👋🏻, thanks for the new design iteration, the dashboard’s looking really nice!
I’ve left a few comments on the JS diff. Not sure if you or I should handle those, so let me know if it’s on my side.

nipl-odoo · 2025-10-30T04:58:43Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js

+		useBus(this.env.searchModel, 'update', () => {
+			if(!this.getIsActiveSearchEquivalentToFilterCard(this.state.selectedFilter)) {
+				this.state.selectedFilter = null;
+			}
+		});
+


Instead of this, why don't you maintain a variable like I did with selectedDateFilter?
Because with this diff, if I select a similar filter as a card from the search bar, the card will stay selected, but the state variable will not be the same, which kinda feels weird for a state variable.

I would suggest setting a variable with the active filter values in this searchModel update and in onwillstart, you just compare that state variable with the current search items by sorting the same way you did in getIsActiveSearchEquivalentToFilterCard.

nipl-odoo · 2025-10-30T05:04:28Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js

+		this.state.selectedFilter = filters;
+	}
+
+	getIsActiveSearchEquivalentToFilterCard(filters) {


Maybe rename to compareFilter or isSameFilter if you want a shorter name. Up to you, though :p

nipl-odoo · 2025-10-30T05:15:15Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.scss

+html .o_web_client > .o_action_manager > .o_website_sale_dashboard_kanban_view .o_content,
+html .o_web_client > .o_action_manager > .o_website_sale_dashboard_list_view .o_content {


I am no CSS expert (correct me if I am wrong), but maybe

.o_website_sale_dashboard_kanban_view .o_content, .o_website_sale_dashboard_list_view .o_content {}

this is enough, no? 🤔 Also move this to addons/website_sale/static/src/views/website_sale_kanban_view.scss and addons/website_sale/static/src/views/website_sale_list_view.scss it looks like their home.

nipl-odoo · 2025-10-30T05:19:33Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml

-                    <DateFilterButton update.bind="updateDashboardState" selectedFilter="state.selectedFilter"/>
+            <div class="d-none d-lg-flex border rounded-3 py-3">
+                <div class="o_date_filter_wrapper d-flex align-items-center">
+                    <DateFilterButton update.bind="updateDashboardState" selectedFilter="state.selectedDateFilter"/>


Maybe also rename DateFilterButton's prop to selectedDateFilter, it's clearer, no?

nipl-odoo · 2025-10-30T05:22:00Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js

@@ -10,10 +10,17 @@ export class WebsiteSaleDashboard extends Component {
 	setup() {
 		this.state = useState({
 			eCommerceData: {},
-			selectedFilter: DATE_OPTIONS[0],
+			selectedDateFilter: DATE_OPTIONS[0],
+			selectedFilter: null,


Suggested change

selectedFilter: null,

selectedFilter: [],

should be declared as an empty array since you will be maintaining an array with this variable

nipl-odoo · 2025-10-30T05:46:42Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js

+		if (!filters) {
+			return false;
+		}
+		const activeSearchFilterNames = this.env.searchModel.getSearchItems(el => el.isActive && el.type === 'filter')?.map(el => el.name).sort();
+		return filters.length === activeSearchFilterNames?.length && filters.sort().every((val, i) => val === activeSearchFilterNames[i]);


Instead of comparing with the searchModel's filters, maybe you can properly maintain the state variable and compare it.

So basically state variable will contain a subset of searchModel items (only with type filters), and you use that state variable to compare with the filters array in here.

ldau-odoo · 2025-10-31T15:24:55Z

Hey @nipl-odoo,
thanks for the feedback!
I've solved most of it, I'd rather leave the js to you, you'll be more efficient than me on this one :D
A member of my team will also do a quick check

Brieuc-brd

Good job @ldau-odoo, it looks nice 👍

I've made a first pass, see my comments below.

Thanks !

.../website_sale/static/src/js/website_sale_dashboard/date_filter_button/date_filter_button.xml

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.scss

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.dark.scss

Brieuc-brd · 2025-11-03T07:55:45Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.js

+		}
+		const filters = filterName == 'to_confirm' ? [filterName, 'from_website'] : [filterName, 'from_website','order_confirmed'];
+		if(this.isSameFilter(filters)) {
+			dashboardCardClasses.push('o_dashboard_card--active');


If you apply my suggestion you should change this class as well.

Suggested change

dashboardCardClasses.push('o_dashboard_card--active');

dashboardCardClasses.push('active');

Brieuc-brd · 2025-11-03T08:27:30Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml

 <templates>
    <t t-name="website_sale.WebsiteSaleDashboard">
-        <div class="o_website_sale_dashboard container-fluid d-flex flex-wrap justify-content-between align-items-start gap-3 p-3 border-bottom">
+        <div class="o_website_sale_dashboard container-fluid d-flex justify-content-between align-items-center gap-3 p-3 border-bottom">


To handle easily the size of dashboard cards (and avoid custom css like this : , I wonder if it wouldn't be easier to use grid 🤔 something like this :

<div class="o_website_sale_dashboard container-fluid grid gap-3 p-3 border-bottom">  <div class="g-col-12 g-col-lg-5"> ... </div>  <div class="g-col-7 d-none d-lg-flex"> ... </div> </div>

You could easily manage the size depending on breakpoints 👍

I preferred to do it differently and fix the size, otherwise the right side wasn't great.

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml

Brieuc-brd · 2025-11-03T08:45:33Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml

-                        <h2 class="m-0 fw-bold o_dashboard_card_data" t-esc="state.eCommerceData['overall']['to_fulfill']"/>
-                        <h4 class="fw-semibold text-muted o_dashboard_card_text">To Fulfill</h4>
-                    </a>
+                    <span class="o_dashboard_card_data fs-4 fw-bolder" t-esc="state.eCommerceData['overall']['to_fulfill']"/>


o_dashboard_card_data is no longer used if I'm not mistaken, you can remove it (same for the other iterations).

I kept it in order to use it to target the number and colour it (that way I can remove the famous text-body that was overwriting the colour I had defined).

Brieuc-brd · 2025-11-03T08:46:12Z

addons/website_sale/static/src/js/website_sale_dashboard/website_sale_dashboard.xml

-                        </h3>
-                        <div class="fw-semibold text-muted o_dashboard_card_text">Visitors</div>
+                        </span>
+                        <span class="o_dashboard_card_text fs-6 text-body fw-bold">Visitors</span>


Are you sure text-body is necessary here (same for the other iterations) ? 🤔

(see comment above)

This commit adapts the ecommerce dashboard design by: - emphasizing the cards when there is data to display. - making the card active on click. - hiding the "To confirm" card when there is no data to display because it's not a common case. task-5177259

ldau-odoo force-pushed the master-awesome-ecommerce-dashboard-ldau branch 2 times, most recently from c14465f to fdeda0a Compare October 29, 2025 13:08

nipl-odoo reviewed Oct 30, 2025

View reviewed changes

ldau-odoo force-pushed the master-awesome-ecommerce-dashboard-ldau branch from fdeda0a to 190c448 Compare October 31, 2025 14:38

Brieuc-brd requested changes Nov 3, 2025

View reviewed changes

ldau-odoo force-pushed the master-awesome-ecommerce-dashboard-ldau branch from 190c448 to fb510a9 Compare November 4, 2025 10:42

ldau-odoo requested a review from Brieuc-brd November 4, 2025 12:06

nipl-odoo force-pushed the master-awesome-ecommerce-dashboard-nipl branch from 30351d5 to 8a3d7df Compare November 4, 2025 13:27

ldau-odoo force-pushed the master-awesome-ecommerce-dashboard-ldau branch from fb510a9 to bb0079c Compare November 4, 2025 15:52

nipl-odoo force-pushed the master-awesome-ecommerce-dashboard-nipl branch 2 times, most recently from 4aa1139 to 91a027e Compare November 6, 2025 07:23

ldau-odoo force-pushed the master-awesome-ecommerce-dashboard-ldau branch from bb0079c to 02ce7bb Compare November 6, 2025 15:39

ldau-odoo force-pushed the master-awesome-ecommerce-dashboard-ldau branch from 02ce7bb to b42e24c Compare November 12, 2025 14:40

		html .o_web_client > .o_action_manager > .o_website_sale_dashboard_kanban_view .o_content,
		html .o_web_client > .o_action_manager > .o_website_sale_dashboard_list_view .o_content {

	dashboardCardClasses.push('o_dashboard_card--active');
	dashboardCardClasses.push('active');

[IMP] website_sale: design ecommerce dashboard #4833

Are you sure you want to change the base?

[IMP] website_sale: design ecommerce dashboard #4833

Uh oh!

Conversation

ldau-odoo commented Oct 28, 2025

Uh oh!

robodoo commented Oct 28, 2025

Uh oh!

nipl-odoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ldau-odoo commented Oct 31, 2025

Uh oh!

Brieuc-brd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants