113 lines
2.9 KiB
JavaScript
113 lines
2.9 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Badge, Progress, Flex, Space, Tag, Typography } from 'antd'
|
|
import { green } from '@ant-design/colors'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
const { Text } = Typography
|
|
|
|
const getProgressColor = (percent) => {
|
|
if (percent <= 50) {
|
|
return green[5]
|
|
} else if (percent <= 80) {
|
|
// Interpolate between green and yellow
|
|
const ratio = (percent - 50) / 30
|
|
return `rgb(${Math.round(255 * ratio)}, ${Math.round(255 * (1 - ratio))}, 0)`
|
|
} else {
|
|
// Interpolate between yellow and red
|
|
const ratio = (percent - 80) / 20
|
|
return `rgb(255, ${Math.round(255 * (1 - ratio))}, 0)`
|
|
}
|
|
}
|
|
|
|
const PartStockState = ({
|
|
partStock,
|
|
showProgress = true,
|
|
showStatus = true
|
|
}) => {
|
|
const [badgeStatus, setBadgeStatus] = useState('unknown')
|
|
const [badgeText, setBadgeText] = useState('Unknown')
|
|
const [currentState] = useState(
|
|
partStock?.state || {
|
|
type: 'unknown',
|
|
progress: 0
|
|
}
|
|
)
|
|
|
|
useEffect(() => {
|
|
switch (currentState.type) {
|
|
case 'unused':
|
|
setBadgeStatus('success')
|
|
setBadgeText('Unused')
|
|
break
|
|
case 'partiallyused':
|
|
setBadgeStatus('warning')
|
|
setBadgeText('Partial')
|
|
break
|
|
case 'fullyused':
|
|
setBadgeStatus('error')
|
|
setBadgeText('Used')
|
|
break
|
|
case 'error':
|
|
setBadgeStatus('error')
|
|
setBadgeText('Error')
|
|
break
|
|
default:
|
|
setBadgeStatus('default')
|
|
setBadgeText(currentState.type)
|
|
}
|
|
}, [currentState])
|
|
|
|
return (
|
|
<Flex gap='middle' align={'center'}>
|
|
{showStatus && (
|
|
<Space>
|
|
<Tag color={badgeStatus} style={{ marginRight: 0 }}>
|
|
<Flex gap={6}>
|
|
<Badge status={badgeStatus} />
|
|
{badgeText}
|
|
</Flex>
|
|
</Tag>
|
|
</Space>
|
|
)}
|
|
{showProgress && currentState.type === 'partiallyused' ? (
|
|
<Flex style={{ width: '150px' }} gap={'small'}>
|
|
<div style={{ flexGrow: '1' }}>
|
|
<Progress
|
|
percent={Math.round(currentState.percent * 100)}
|
|
style={{ marginBottom: '2px', width: '100%' }}
|
|
strokeColor={getProgressColor(
|
|
Math.round(currentState.percent * 100)
|
|
)}
|
|
showInfo={false}
|
|
/>
|
|
</div>
|
|
<Text style={{ marginTop: '1px' }}>
|
|
{Math.round(currentState.percent * 100) + '%'}
|
|
</Text>
|
|
</Flex>
|
|
) : null}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
PartStockState.propTypes = {
|
|
partStock: PropTypes.shape({
|
|
_id: PropTypes.string,
|
|
name: PropTypes.string,
|
|
state: PropTypes.shape({
|
|
type: PropTypes.oneOf([
|
|
'unused',
|
|
'partiallyused',
|
|
'fullyused',
|
|
'error',
|
|
'unknown'
|
|
]),
|
|
progress: PropTypes.number
|
|
})
|
|
}),
|
|
showProgress: PropTypes.bool,
|
|
showStatus: PropTypes.bool
|
|
}
|
|
|
|
export default PartStockState
|