45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import { PaymentDataItem } from '../../../types/services/analytic'
|
|
import { formatCurrency } from '../../../utils/transform'
|
|
|
|
const PaymentMethodReport = ({ payments }: { payments: PaymentDataItem[] }) => {
|
|
const ProgressBar = ({ percentage, color = 'bg-blue-500' }: any) => (
|
|
<div className='w-full bg-gray-200 rounded-full h-2'>
|
|
<div
|
|
className={`${color} h-2 rounded-full transition-all duration-300`}
|
|
style={{ width: `${percentage}%` }}
|
|
></div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div className='bg-white rounded-lg shadow-md'>
|
|
<div className='p-6'>
|
|
<div className='flex items-center mb-6'>
|
|
<i className='tabler-credit-card text-[24px] text-blue-500 mr-2'></i>
|
|
<h2 className='text-xl font-semibold text-gray-900'>Payment Methods</h2>
|
|
</div>
|
|
<div className='space-y-6'>
|
|
{payments.map(method => (
|
|
<div key={method.payment_method_id} className='border-b border-gray-200 pb-4 last:border-b-0'>
|
|
<div className='flex justify-between items-center mb-2'>
|
|
<span className='text-sm font-medium text-gray-900'>{method.payment_method_name}</span>
|
|
<span className='text-sm text-gray-600'>{method.percentage.toFixed(1)}%</span>
|
|
</div>
|
|
<ProgressBar
|
|
percentage={method.percentage}
|
|
color={method.payment_method_type === 'cash' ? 'bg-green-500' : 'bg-blue-500'}
|
|
/>
|
|
<div className='flex justify-between items-center mt-2 text-xs text-gray-600'>
|
|
<span>{formatCurrency(method.total_amount)}</span>
|
|
<span>{method.order_count} orders</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PaymentMethodReport
|