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.

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 = () => {
           <InfoCollapse
             title='Sales Order Statistics'
             icon={null}
+            canCollapse={false}
             active={collapseState.salesOrderStats}
             onToggle={(isActive) =>
               updateCollapseState('salesOrderStats', isActive)
             }
             className='no-t-padding-collapse'
             collapseKey='salesOrderStats'
-            canCollapse={false}
           >
             <Flex
               justify='flex-start'
@@ -44,6 +56,185 @@ const SalesOverview = () => {
               <StatsDisplay objectType='salesOrder' />
             </Flex>
           </InfoCollapse>
+
+          <InfoCollapse
+            title='Listing Statistics'
+            icon={null}
+            canCollapse={false}
+            active={collapseState.listingStats}
+            onToggle={(isActive) =>
+              updateCollapseState('listingStats', isActive)
+            }
+            className='no-t-padding-collapse'
+            collapseKey='listingStats'
+          >
+            <Flex
+              justify='flex-start'
+              gap='middle'
+              wrap='wrap'
+              align='flex-start'
+            >
+              <StatsDisplay objectType='listing' />
+            </Flex>
+          </InfoCollapse>
+
+          <InfoCollapse
+            title='Marketplace Statistics'
+            icon={null}
+            canCollapse={false}
+            active={collapseState.marketplaceStats}
+            onToggle={(isActive) =>
+              updateCollapseState('marketplaceStats', isActive)
+            }
+            className='no-t-padding-collapse'
+            collapseKey='marketplaceStats'
+          >
+            <Flex
+              justify='flex-start'
+              gap='middle'
+              wrap='wrap'
+              align='flex-start'
+            >
+              <StatsDisplay objectType='marketplace' />
+            </Flex>
+          </InfoCollapse>
+
+          <InfoCollapse
+            title='Client Statistics'
+            icon={null}
+            canCollapse={false}
+            active={collapseState.clientStats}
+            onToggle={(isActive) =>
+              updateCollapseState('clientStats', isActive)
+            }
+            className='no-t-padding-collapse'
+            collapseKey='clientStats'
+          >
+            <Flex
+              justify='flex-start'
+              gap='middle'
+              wrap='wrap'
+              align='flex-start'
+            >
+              <StatsDisplay objectType='client' />
+            </Flex>
+          </InfoCollapse>
+
+          <Flex gap='large' wrap='wrap'>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
+              <InfoCollapse
+                title='Sales Order History'
+                icon={null}
+                active={collapseState.salesOrderHistory}
+                onToggle={(isActive) =>
+                  updateCollapseState('salesOrderHistory', isActive)
+                }
+                collapseKey='salesOrderHistory'
+                canCollapse={false}
+              >
+                <ModelHistoryDisplay objectType='salesOrder' />
+              </InfoCollapse>
+              <InfoCollapse
+                title='Confirmed Sales Orders'
+                icon={null}
+                active={collapseState.confirmedSalesOrders}
+                onToggle={(isActive) =>
+                  updateCollapseState('confirmedSalesOrders', isActive)
+                }
+                collapseKey='confirmedSalesOrders'
+                canCollapse={false}
+              >
+                <ObjectTable
+                  type='salesOrder'
+                  masterFilter={{ state: 'confirmed' }}
+                />
+              </InfoCollapse>
+            </Flex>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
+              <InfoCollapse
+                title='Listing History'
+                icon={null}
+                active={collapseState.listingHistory}
+                onToggle={(isActive) =>
+                  updateCollapseState('listingHistory', isActive)
+                }
+                canCollapse={false}
+                collapseKey='listingHistory'
+              >
+                <ModelHistoryDisplay objectType='listing' />
+              </InfoCollapse>
+              <InfoCollapse
+                title='Draft Listings'
+                icon={null}
+                active={collapseState.draftListings}
+                onToggle={(isActive) =>
+                  updateCollapseState('draftListings', isActive)
+                }
+                canCollapse={false}
+                collapseKey='draftListings'
+              >
+                <ObjectTable type='listing' masterFilter={{ state: 'draft' }} />
+              </InfoCollapse>
+            </Flex>
+          </Flex>
+
+          <Flex gap='large' wrap='wrap'>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
+              <InfoCollapse
+                title='Marketplace History'
+                icon={null}
+                active={collapseState.marketplaceHistory}
+                onToggle={(isActive) =>
+                  updateCollapseState('marketplaceHistory', isActive)
+                }
+                collapseKey='marketplaceHistory'
+                canCollapse={false}
+              >
+                <ModelHistoryDisplay objectType='marketplace' />
+              </InfoCollapse>
+              <InfoCollapse
+                title='Ready Marketplaces'
+                icon={null}
+                active={collapseState.readyMarketplaces}
+                onToggle={(isActive) =>
+                  updateCollapseState('readyMarketplaces', isActive)
+                }
+                collapseKey='readyMarketplaces'
+                canCollapse={false}
+              >
+                <ObjectTable
+                  type='marketplace'
+                  masterFilter={{ state: 'ready' }}
+                />
+              </InfoCollapse>
+            </Flex>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
+              <InfoCollapse
+                title='Client History'
+                icon={null}
+                active={collapseState.clientHistory}
+                onToggle={(isActive) =>
+                  updateCollapseState('clientHistory', isActive)
+                }
+                canCollapse={false}
+                collapseKey='clientHistory'
+              >
+                <ModelHistoryDisplay objectType='client' />
+              </InfoCollapse>
+              <InfoCollapse
+                title='Active Clients'
+                icon={null}
+                active={collapseState.activeClients}
+                onToggle={(isActive) =>
+                  updateCollapseState('activeClients', isActive)
+                }
+                canCollapse={false}
+                collapseKey='activeClients'
+              >
+                <ObjectTable type='client' masterFilter={{ active: true }} />
+              </InfoCollapse>
+            </Flex>
+          </Flex>
         </Flex>
       </ScrollBox>
     </Flex>

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'
+    }
   ]
 }

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'
+    }
   ]
 }

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'
+    }
   ]
 }

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'
     }
   ]
 }