Tom Butcher
49a8bb3a6d
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
117 lines
3.6 KiB
JavaScript
117 lines
3.6 KiB
JavaScript
import { Flex } from 'antd'
|
|
import useCollapseState from '../hooks/useCollapseState'
|
|
import StatsDisplay from '../common/StatsDisplay'
|
|
import InfoCollapse from '../common/InfoCollapse'
|
|
import ScrollBox from '../common/ScrollBox'
|
|
|
|
const InventoryOverview = () => {
|
|
const [collapseState, updateCollapseState] = useCollapseState(
|
|
'InventoryOverview',
|
|
{
|
|
inventoryStats: true,
|
|
purchaseOrderStats: true
|
|
}
|
|
)
|
|
|
|
return (
|
|
<Flex
|
|
gap='large'
|
|
vertical='true'
|
|
style={{
|
|
maxHeight: '100%',
|
|
minHeight: 0
|
|
}}
|
|
>
|
|
<ScrollBox>
|
|
<Flex vertical gap={'large'}>
|
|
<InfoCollapse
|
|
title='Inventory Statistics'
|
|
icon={null}
|
|
active={collapseState.inventoryStats}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('inventoryStats', isActive)
|
|
}
|
|
className='no-t-padding-collapse'
|
|
collapseKey='inventoryStats'
|
|
canCollapse={false}
|
|
>
|
|
<Flex
|
|
justify='flex-start'
|
|
gap='middle'
|
|
wrap='wrap'
|
|
align='flex-start'
|
|
>
|
|
<Flex gap='middle' wrap='wrap'>
|
|
<StatsDisplay objectType='partStock' />
|
|
<StatsDisplay objectType='filamentStock' />
|
|
</Flex>
|
|
</Flex>
|
|
</InfoCollapse>
|
|
|
|
<InfoCollapse
|
|
title='Purchase Order Statistics'
|
|
icon={null}
|
|
canCollapse={false}
|
|
active={collapseState.purchaseOrderStats}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('purchaseOrderStats', isActive)
|
|
}
|
|
className='no-t-padding-collapse'
|
|
collapseKey='purchaseOrderStats'
|
|
>
|
|
<Flex
|
|
justify='flex-start'
|
|
gap='middle'
|
|
wrap='wrap'
|
|
align='flex-start'
|
|
>
|
|
<StatsDisplay objectType='purchaseOrder' />
|
|
</Flex>
|
|
</InfoCollapse>
|
|
|
|
<Flex gap='large' wrap='wrap'>
|
|
<Flex flex={1} vertical style={{ minWidth: '300px' }}>
|
|
<InfoCollapse
|
|
title='Part Stock History'
|
|
icon={null}
|
|
active={collapseState.partStockHistory}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('partStockHistory', isActive)
|
|
}
|
|
collapseKey='partStockHistory'
|
|
canCollapse={false}
|
|
></InfoCollapse>
|
|
</Flex>
|
|
<Flex flex={1} vertical style={{ minWidth: '300px' }}>
|
|
<InfoCollapse
|
|
title='Filament Stock History'
|
|
icon={null}
|
|
active={collapseState.filamentStockHistory}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('filamentStockHistory', isActive)
|
|
}
|
|
canCollapse={false}
|
|
collapseKey='filamentStockHistory'
|
|
></InfoCollapse>
|
|
</Flex>
|
|
<Flex flex={1} vertical style={{ minWidth: '300px' }}>
|
|
<InfoCollapse
|
|
title='Stock Event History'
|
|
icon={null}
|
|
active={collapseState.stockEventHistory}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('stockEventHistory', isActive)
|
|
}
|
|
canCollapse={false}
|
|
collapseKey='stockEventHistory'
|
|
></InfoCollapse>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</ScrollBox>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default InventoryOverview
|