Report Profit Loss

src/components/card-statistics/HorizontalWithSubtitle.tsx

@@ -32,7 +32,7 @@ const HorizontalWithSubtitle = (props: UserDataType) => {
         <div className='flex flex-col gap-1 flex-grow'>
           <Typography color='text.primary'>{title}</Typography>
           <div className='flex items-center gap-2 flex-wrap'>
-            <Typography variant='h4'>{stats}</Typography>
+            <Typography variant='h5'>{stats}</Typography>
             <Typography color={trend === 'negative' ? 'error.main' : 'success.main'}>
               {`(${trend === 'negative' ? '-' : '+'}${trendNumber})`}
             </Typography>

src/components/report/ReportItem.tsx

@@ -4,7 +4,8 @@ import { Box, Typography, Paper } from '@mui/material'
 // Types
 type ReportItemHeaderProps = {
   title: string
-  date: string
+  date?: string
+  amount?: number
 }
 
 type ReportItemSubheaderProps = {
@@ -34,14 +35,14 @@ const formatCurrency = (amount: number) => {
 }
 
 // ReportItemHeader Component
-export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date }) => {
+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'>
-        {date}
+        {amount ? formatCurrency(amount) : date}
       </Typography>
     </Box>
   )