Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 2x 3x 3x 3x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x | import dayjs from 'dayjs'
import { FC } from 'react'
import cn from 'classnames'
import { useTranslate } from '@/shared/lib'
export interface AccountingObjectCounterDaysProps {
date: string | undefined
typeCounter: 'relative' | 'forward'
type?: 'column' | 'row'
customTitle?: string
isNeedTitle?: boolean
}
export const AccountingObjectCounterDays: FC<AccountingObjectCounterDaysProps> = ({
date,
typeCounter,
type = 'row',
customTitle,
isNeedTitle = true,
}) => {
const { t } = useTranslate(['accounting-object', 'common'])
const currentDate = dayjs()
const acceptanceDateObj = dayjs(date)
const storageDays = currentDate.diff(acceptanceDateObj, 'days')
const daysToInspection = acceptanceDateObj.diff(currentDate, 'days')
const itemCounter = {
title: t(typeCounter === 'relative' ? 'Period of storage' : 'Inspection'),
value:
typeCounter === 'relative'
? `${storageDays < 0 ? 0 : storageDays} ${t('common:dn')}`
: `${t(daysToInspection < 0 ? 'common:Overdue_by' : 'common:After')} ${Math.abs(daysToInspection)} ${t(
'common:dn'
)}`,
isExpired: typeCounter === 'relative' ? true : daysToInspection >= 0,
}
return (
<div
className={cn('flex', {
'flex-col gap-y-1': type === 'column',
'flex-row gap-x-1 items-center': type === 'row',
})}
>
{isNeedTitle && <span className='text-min text-text-secondary'>{customTitle || itemCounter.title}:</span>}
<div
className={cn('flex items-center rounded-base py-1 px-2 whitespace-nowrap', {
'bg-green-secondary text-green': itemCounter.isExpired,
'bg-red-secondary text-red': !itemCounter.isExpired,
'w-fit': type === 'column',
})}
>
<span className='text-main-semibold'>{itemCounter.value}</span>
</div>
</div>
)
}
|