farmcontrol-ui/src/components/Dashboard/Inventory/InventoryOverview.jsx

import { Flex } from 'antd'
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 InventoryOverview = () => {
  const [collapseState, updateCollapseState] = useCollapseState(
    'InventoryOverview',
    {
      partStockStats: true,
      filamentStockStats: true,
      productStockStats: true,
      purchaseOrderStats: true,
      stockEventStats: true,
      partStockHistory: true,
      newPartStocks: true,
      filamentStockHistory: true,
      unconsumedFilamentStocks: true,
      productStockHistory: true,
      draftProductStocks: true,
      purchaseOrderHistory: true,
      draftPurchaseOrders: true,
      stockEventHistory: true
    }
  )

  return (
    <Flex
      gap='large'
      vertical='true'
      style={{
        maxHeight: '100%',
        minHeight: 0
      }}
    >
      <ScrollBox>
        <Flex vertical gap={'large'}>
          <InfoCollapse
            title='Part Stock Statistics'
            icon={null}
            canCollapse={false}
            active={collapseState.partStockStats}
            onToggle={(isActive) =>
              updateCollapseState('partStockStats', isActive)
            }
            className='no-t-padding-collapse'
            collapseKey='partStockStats'
          >
            <Flex
              justify='flex-start'
              gap='middle'
              wrap='wrap'
              align='flex-start'
            >
              <StatsDisplay objectType='partStock' />
            </Flex>
          </InfoCollapse>

          <InfoCollapse
            title='Filament Stock Statistics'
            icon={null}
            canCollapse={false}
            active={collapseState.filamentStockStats}
            onToggle={(isActive) =>
              updateCollapseState('filamentStockStats', isActive)
            }
            className='no-t-padding-collapse'
            collapseKey='filamentStockStats'
          >
            <Flex
              justify='flex-start'
              gap='middle'
              wrap='wrap'
              align='flex-start'
            >
              <StatsDisplay objectType='filamentStock' />
            </Flex>
          </InfoCollapse>

          <InfoCollapse
            title='Product Stock Statistics'
            icon={null}
            canCollapse={false}
            active={collapseState.productStockStats}
            onToggle={(isActive) =>
              updateCollapseState('productStockStats', isActive)
            }
            className='no-t-padding-collapse'
            collapseKey='productStockStats'
          >
            <Flex
              justify='flex-start'
              gap='middle'
              wrap='wrap'
              align='flex-start'
            >
              <StatsDisplay objectType='productStock' />
            </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>

          <InfoCollapse
            title='Stock Event Statistics'
            icon={null}
            canCollapse={false}
            active={collapseState.stockEventStats}
            onToggle={(isActive) =>
              updateCollapseState('stockEventStats', isActive)
            }
            className='no-t-padding-collapse'
            collapseKey='stockEventStats'
          >
            <Flex
              justify='flex-start'
              gap='middle'
              wrap='wrap'
              align='flex-start'
            >
              <StatsDisplay objectType='stockEvent' />
            </Flex>
          </InfoCollapse>

          <Flex gap='large' wrap='wrap'>
            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
              <InfoCollapse
                title='Part Stock History'
                icon={null}
                active={collapseState.partStockHistory}
                onToggle={(isActive) =>
                  updateCollapseState('partStockHistory', isActive)
                }
                collapseKey='partStockHistory'
                canCollapse={false}
              >
                <ModelHistoryDisplay objectType='partStock' chartType='line' />
              </InfoCollapse>
              <InfoCollapse
                title='New Part Stocks'
                icon={null}
                active={collapseState.newPartStocks}
                onToggle={(isActive) =>
                  updateCollapseState('newPartStocks', isActive)
                }
                collapseKey='newPartStocks'
                canCollapse={false}
              >
                <ObjectTable type='partStock' masterFilter={{ state: 'new' }} />
              </InfoCollapse>
            </Flex>
            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
              <InfoCollapse
                title='Filament Stock History'
                icon={null}
                active={collapseState.filamentStockHistory}
                onToggle={(isActive) =>
                  updateCollapseState('filamentStockHistory', isActive)
                }
                canCollapse={false}
                collapseKey='filamentStockHistory'
              >
                <ModelHistoryDisplay
                  objectType='filamentStock'
                  chartType='line'
                />
              </InfoCollapse>
              <InfoCollapse
                title='Unconsumed Filament Stocks'
                icon={null}
                active={collapseState.unconsumedFilamentStocks}
                onToggle={(isActive) =>
                  updateCollapseState('unconsumedFilamentStocks', isActive)
                }
                canCollapse={false}
                collapseKey='unconsumedFilamentStocks'
              >
                <ObjectTable
                  type='filamentStock'
                  masterFilter={{ state: 'unconsumed' }}
                />
              </InfoCollapse>
            </Flex>
          </Flex>

          <Flex gap='large' wrap='wrap'>
            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
              <InfoCollapse
                title='Product Stock History'
                icon={null}
                active={collapseState.productStockHistory}
                onToggle={(isActive) =>
                  updateCollapseState('productStockHistory', isActive)
                }
                collapseKey='productStockHistory'
                canCollapse={false}
              >
                <ModelHistoryDisplay
                  objectType='productStock'
                  chartType='line'
                />
              </InfoCollapse>
              <InfoCollapse
                title='Draft Product Stocks'
                icon={null}
                active={collapseState.draftProductStocks}
                onToggle={(isActive) =>
                  updateCollapseState('draftProductStocks', isActive)
                }
                collapseKey='draftProductStocks'
                canCollapse={false}
              >
                <ObjectTable
                  type='productStock'
                  masterFilter={{ state: 'draft' }}
                />
              </InfoCollapse>
            </Flex>
            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
              <InfoCollapse
                title='Purchase Order History'
                icon={null}
                active={collapseState.purchaseOrderHistory}
                onToggle={(isActive) =>
                  updateCollapseState('purchaseOrderHistory', isActive)
                }
                canCollapse={false}
                collapseKey='purchaseOrderHistory'
              >
                <ModelHistoryDisplay objectType='purchaseOrder' />
              </InfoCollapse>
              <InfoCollapse
                title='Draft Purchase Orders'
                icon={null}
                active={collapseState.draftPurchaseOrders}
                onToggle={(isActive) =>
                  updateCollapseState('draftPurchaseOrders', isActive)
                }
                canCollapse={false}
                collapseKey='draftPurchaseOrders'
              >
                <ObjectTable
                  type='purchaseOrder'
                  masterFilter={{ state: 'draft' }}
                />
              </InfoCollapse>
            </Flex>
          </Flex>

          <Flex gap='large' wrap='wrap'>
            <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'
              >
                <ModelHistoryDisplay objectType='stockEvent' chartType='line' />
              </InfoCollapse>
            </Flex>
          </Flex>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default InventoryOverview