mirror of
https://github.com/frappe/erpnext.git
synced 2026-09-10 07:49:29 +00:00
0610708d78
fix(banking): UI cleanup and better statement parsing (#58817)
* fix(banking): reset scroll on searching accounts
* fix(banking): show only past dates in date filter
* fix(banking): clean up line heights and remove beta badge
* fix(banking): show accurate count of import progress
fix(banking): show latest 20 imports instead of 10
* fix(banking): layout sizing needs to be preserved on page change
* fix(banking): cleaner bank balance UI
* fix(banking): correctly parse Cr/Dr values in statement importer
* Update banking/src/components/features/BankReconciliation/BankBalance.tsx
---------
(cherry picked from commit ebe5decb96)
Co-authored-by: Nikhil Kothari <nik.kothari22@live.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
73 lines
3.6 KiB
TypeScript
73 lines
3.6 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { ArrowDownRight, ArrowUpRight, Calendar } from 'lucide-react'
|
|
import { formatCurrency } from '@/lib/numbers'
|
|
import { formatDate } from '@/lib/date'
|
|
import { UnreconciledTransaction, useGetBankAccounts } from './utils'
|
|
import { getCompanyCurrency } from '@/lib/company'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { cn } from '@/lib/utils'
|
|
import _ from '@/lib/translate'
|
|
import BankLogo from '@/components/common/BankLogo'
|
|
|
|
type Props = {
|
|
transaction: UnreconciledTransaction,
|
|
showAccount?: boolean,
|
|
account?: string
|
|
}
|
|
|
|
const SelectedTransactionDetails = ({ transaction, showAccount = false, account }: Props) => {
|
|
|
|
const isWithdrawal = transaction.withdrawal && transaction.withdrawal > 0
|
|
|
|
const { banks } = useGetBankAccounts()
|
|
|
|
const bank = useMemo(() => {
|
|
if (transaction.bank_account) {
|
|
return banks?.find((bank) => bank.name === transaction.bank_account)
|
|
}
|
|
return null
|
|
}, [transaction.bank_account, banks])
|
|
|
|
const amount = transaction.withdrawal ? transaction.withdrawal : transaction.deposit
|
|
|
|
const currency = transaction.currency || getCompanyCurrency(transaction.company ?? '')
|
|
|
|
return (
|
|
<Card className='py-4'>
|
|
<CardContent className='px-4'>
|
|
<div className='flex flex-col gap-2'>
|
|
<div className='flex justify-between'>
|
|
<div className='flex flex-col gap-2'>
|
|
<div className='flex flex-col gap-1'>
|
|
<BankLogo bank={bank} iconSize='30px' imageClassName='h-10 max-w-20' />
|
|
<span className='font-medium text-sm'>{transaction.bank_account}</span>
|
|
</div>
|
|
<div className='flex items-center gap-1'>
|
|
<Calendar size='16px' />
|
|
<span className='text-sm'>{formatDate(transaction.date, 'Do MMM YYYY')}</span>
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-col gap-1'>
|
|
<div className={cn('flex items-center gap-1 text-end px-0 justify-end py-1 rounded-sm',
|
|
isWithdrawal ? 'text-ink-red-3' : 'text-ink-green-3'
|
|
)}>
|
|
{isWithdrawal ? <ArrowUpRight className="w-5 h-5 text-ink-red-3" /> : <ArrowDownRight className="w-5 h-5 text-ink-green-3" />}
|
|
<span className='text-sm font-semibold uppercase'>{isWithdrawal ? _('Spent') : _('Received')}</span>
|
|
</div>
|
|
<span className='font-semibold font-numeric text-lg text-end pe-0.5'>{formatCurrency(amount, currency)}</span>
|
|
{transaction.unallocated_amount && transaction.unallocated_amount !== amount ? <span className='text-ink-gray-5'>{_("Unallocated")}: {formatCurrency(transaction.unallocated_amount)}</span> : null}
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-col gap-1'>
|
|
<span className='text-p-sm'>{transaction.description}</span>
|
|
{transaction.reference_number ? <span className='text-p-sm text-ink-gray-5'>{_("Ref")}: {transaction.reference_number}</span> : null}
|
|
{showAccount && account ? <span className='text-sm text-ink-gray-5'>{_("GL Account")}: {account}</span> : null}
|
|
</div>
|
|
|
|
</div>
|
|
</CardContent >
|
|
</Card >
|
|
)
|
|
}
|
|
|
|
export default SelectedTransactionDetails |