Report Cash Flow

2025-09-11 17:57:00 +07:00
parent b3a41fe0e0
commit a1d23cad9e
6 changed files with 339 additions and 4 deletions
@@ -0,0 +1,101 @@
+import React from 'react'
+import { Box, Typography, Paper } from '@mui/material'
+
+// Types
+type ReportItemHeaderProps = {
+  title: string
+  date: string
+}
+
+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 }) => {
+  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}
+      </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>
+  )
+}
@@ -0,0 +1,27 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+interface Props {
+  title: string
+}
+
+const ReportTitle = ({ title }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+interface Props {
+  title: string
+}
+
+export default ReportTitle