Enhance Sales Overview Component with Additional Statistics and InfoCollapse Sections
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- 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.
This commit is contained in:
parent
1edd48c1d7
commit
71f5e10e5f
@ -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>
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user