From 71f5e10e5f82b42e3cf66cb2bf376cff0bbdf6b2 Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Mon, 24 Aug 2026 23:02:45 +0100 Subject: [PATCH] Enhance Sales Overview Component with Additional Statistics and InfoCollapse Sections - Updated SalesOverview to include new collapsible sections for Listing, Marketplace, and Client statistics, improving data organization and visibility. - Added detailed statistics for Sales Order History, Confirmed Sales Orders, Listing History, Draft Listings, Marketplace History, Ready Marketplaces, Client History, and Active Clients. - Refactored useCollapseState to manage the expanded state of new sections, ensuring a cohesive user experience across the dashboard. --- .../Dashboard/Sales/SalesOverview.jsx | 197 +++++++++++++++++- src/database/models/Client.js | 14 ++ src/database/models/Listing.js | 38 ++++ src/database/models/Marketplace.js | 32 +++ src/database/models/SalesOrder.js | 12 ++ 5 files changed, 290 insertions(+), 3 deletions(-) diff --git a/src/components/Dashboard/Sales/SalesOverview.jsx b/src/components/Dashboard/Sales/SalesOverview.jsx index 0981fa77..175fdac1 100644 --- a/src/components/Dashboard/Sales/SalesOverview.jsx +++ b/src/components/Dashboard/Sales/SalesOverview.jsx @@ -1,15 +1,27 @@ import { Flex } from 'antd' -import useCollapseState from '../hooks/useCollapseState' +import useCollapseState from '../hooks/useCollapseState.jsx' import StatsDisplay from '../common/StatsDisplay' +import ModelHistoryDisplay from '../common/ModelHistoryDisplay' import InfoCollapse from '../common/InfoCollapse' import ScrollBox from '../common/ScrollBox' +import ObjectTable from '../common/ObjectTable' const SalesOverview = () => { const [collapseState, updateCollapseState] = useCollapseState( 'SalesOverview', { + salesOrderStats: true, + listingStats: true, + marketplaceStats: true, clientStats: true, - salesOrderStats: true + salesOrderHistory: true, + confirmedSalesOrders: true, + listingHistory: true, + draftListings: true, + marketplaceHistory: true, + readyMarketplaces: true, + clientHistory: true, + activeClients: true } ) @@ -27,13 +39,13 @@ const SalesOverview = () => { updateCollapseState('salesOrderStats', isActive) } className='no-t-padding-collapse' collapseKey='salesOrderStats' - canCollapse={false} > { + + + updateCollapseState('listingStats', isActive) + } + className='no-t-padding-collapse' + collapseKey='listingStats' + > + + + + + + + updateCollapseState('marketplaceStats', isActive) + } + className='no-t-padding-collapse' + collapseKey='marketplaceStats' + > + + + + + + + updateCollapseState('clientStats', isActive) + } + className='no-t-padding-collapse' + collapseKey='clientStats' + > + + + + + + + + + updateCollapseState('salesOrderHistory', isActive) + } + collapseKey='salesOrderHistory' + canCollapse={false} + > + + + + updateCollapseState('confirmedSalesOrders', isActive) + } + collapseKey='confirmedSalesOrders' + canCollapse={false} + > + + + + + + updateCollapseState('listingHistory', isActive) + } + canCollapse={false} + collapseKey='listingHistory' + > + + + + updateCollapseState('draftListings', isActive) + } + canCollapse={false} + collapseKey='draftListings' + > + + + + + + + + + updateCollapseState('marketplaceHistory', isActive) + } + collapseKey='marketplaceHistory' + canCollapse={false} + > + + + + updateCollapseState('readyMarketplaces', isActive) + } + collapseKey='readyMarketplaces' + canCollapse={false} + > + + + + + + updateCollapseState('clientHistory', isActive) + } + canCollapse={false} + collapseKey='clientHistory' + > + + + + updateCollapseState('activeClients', isActive) + } + canCollapse={false} + collapseKey='activeClients' + > + + + + diff --git a/src/database/models/Client.js b/src/database/models/Client.js index d853fa31..5acfba20 100644 --- a/src/database/models/Client.js +++ b/src/database/models/Client.js @@ -233,5 +233,19 @@ export const Client = { required: false, columnWidth: 200 } + ], + stats: [ + { + name: 'active.count', + label: 'Active', + type: 'number', + color: 'success' + }, + { + name: 'inactive.count', + label: 'Inactive', + type: 'number', + color: 'default' + } ] } diff --git a/src/database/models/Listing.js b/src/database/models/Listing.js index 82715c2b..0d7fc111 100644 --- a/src/database/models/Listing.js +++ b/src/database/models/Listing.js @@ -388,5 +388,43 @@ export const Listing = { required: true, columnWidth: 250 } + ], + stats: [ + { + name: 'draft.count', + label: 'Draft', + type: 'number', + color: 'default' + }, + { + name: 'active.count', + label: 'Active', + type: 'number', + color: 'success' + }, + { + name: 'inactive.count', + label: 'Inactive', + type: 'number', + color: 'default' + }, + { + name: 'syncing.count', + label: 'Syncing', + type: 'number', + color: 'processing' + }, + { + name: 'suspended.count', + label: 'Suspended', + type: 'number', + color: 'error' + }, + { + name: 'deleted.count', + label: 'Deleted', + type: 'number', + color: 'error' + } ] } diff --git a/src/database/models/Marketplace.js b/src/database/models/Marketplace.js index eb886bcd..f837fa4d 100644 --- a/src/database/models/Marketplace.js +++ b/src/database/models/Marketplace.js @@ -556,5 +556,37 @@ export const Marketplace = { return `${window.location.origin}/auth/marketplace/callback` } } + ], + stats: [ + { + name: 'ready.count', + label: 'Ready', + type: 'number', + color: 'success' + }, + { + name: 'syncing.count', + label: 'Syncing', + type: 'number', + color: 'processing' + }, + { + name: 'disconnected.count', + label: 'Disconnected', + type: 'number', + color: 'warning' + }, + { + name: 'inactive.count', + label: 'Inactive', + type: 'number', + color: 'default' + }, + { + name: 'offline.count', + label: 'Offline', + type: 'number', + color: 'default' + } ] } diff --git a/src/database/models/SalesOrder.js b/src/database/models/SalesOrder.js index 61114189..91c81e45 100644 --- a/src/database/models/SalesOrder.js +++ b/src/database/models/SalesOrder.js @@ -436,6 +436,18 @@ export const SalesOrder = { label: 'Delivered', type: 'number', color: 'success' + }, + { + name: 'completed.count', + label: 'Completed', + type: 'number', + color: 'success' + }, + { + name: 'cancelled.count', + label: 'Cancelled', + type: 'number', + color: 'error' } ] }