103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
import React from 'react'
|
|
import { Box, Typography, Paper } from '@mui/material'
|
|
|
|
// Types
|
|
type ReportItemHeaderProps = {
|
|
title: string
|
|
date?: string
|
|
amount?: number
|
|
}
|
|
|
|
type ReportItemSubheaderProps = {
|
|
title: string
|
|
}
|
|
|
|
type ReportItemProps = {
|
|
accountCode: string
|
|
accountName: string
|
|
amount: number
|
|
onClick?: () => void
|
|
isSubtitle?: boolean
|
|
}
|
|
|
|
type ReportItemFooterProps = {
|
|
title: string
|
|
amount: number
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
// Helper function to format currency
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}).format(amount)
|
|
}
|
|
|
|
// ReportItemHeader Component
|
|
export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date, amount }) => {
|
|
return (
|
|
<Box className='bg-slate-200 px-6 py-4 flex justify-between items-center'>
|
|
<Typography variant='h6' className='text-primary font-semibold'>
|
|
{title}
|
|
</Typography>
|
|
<Typography variant='body1' className='text-primary font-medium'>
|
|
{amount ? formatCurrency(amount) : date}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// ReportItemSubheader Component
|
|
export const ReportItemSubheader: React.FC<ReportItemSubheaderProps> = ({ title }) => {
|
|
return (
|
|
<Box className='px-6 py-3 bg-white border-b border-gray-300 hover:bg-gray-50 transition-colors'>
|
|
<Typography variant='subtitle1' className='font-semibold text-gray-900'>
|
|
{title}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// ReportItem Component
|
|
export const ReportItem: React.FC<ReportItemProps> = ({
|
|
accountCode,
|
|
accountName,
|
|
amount,
|
|
onClick,
|
|
isSubtitle = true
|
|
}) => {
|
|
return (
|
|
<Box
|
|
onClick={onClick}
|
|
className={`px-6 py-3 flex justify-between items-center bg-white border-b border-gray-300 transition-all duration-200 ease-in-out ${
|
|
onClick ? 'cursor-pointer hover:bg-gray-50' : 'cursor-default'
|
|
}`}
|
|
>
|
|
<Typography variant='body1' className={`text-gray-900 font-normal ${isSubtitle ? 'ml-4' : ''}`}>
|
|
{accountCode} {accountName}
|
|
</Typography>
|
|
<Typography variant='body1' className='text-primary font-medium text-right'>
|
|
{formatCurrency(amount)}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
// ReportItemFooter Component
|
|
export const ReportItemFooter: React.FC<ReportItemFooterProps> = ({ title, amount, children }) => {
|
|
return (
|
|
<Box className='px-6 py-4 border-b border-gray-300 hover:bg-gray-50 transition-colors'>
|
|
<Box className='flex justify-between items-center'>
|
|
<Typography variant='subtitle1' className='font-bold text-gray-900'>
|
|
{title}
|
|
</Typography>
|
|
<Typography variant='subtitle1' className='text-primary font-bold text-right'>
|
|
{formatCurrency(amount)}
|
|
</Typography>
|
|
</Box>
|
|
{children && <Box className='mt-2'>{children}</Box>}
|
|
</Box>
|
|
)
|
|
}
|