Report Cash Flow

src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx

@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportCashCard from '@/views/apps/report/cash-flow/ReportCashCard'
+import ReportCashFlowContent from '@/views/apps/report/cash-flow/ReportCashFlowContent'
+import Grid from '@mui/material/Grid2'
+
+const CashFlowPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Arus Kas' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportCashCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportCashFlowContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default CashFlowPage

src/components/report/ReportItem.tsx

@@ -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>
+  )
+}

src/components/report/ReportTitle.tsx

@@ -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

src/views/apps/report/ReportFinancialList.tsx

@@ -1,20 +1,30 @@
+'use client'
+
 import { Container, Typography } from '@mui/material'
 import Grid from '@mui/material/Grid2'
 import ReportCard from './ReportCard'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
 
 const ReportFinancialList: React.FC = () => {
+  const { lang: locale } = useParams()
+
   const financialReports = [
     {
       title: 'Arus Kas',
-      iconClass: 'tabler-cash'
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
     },
     {
       title: 'Laba Rugi',
-      iconClass: 'tabler-cash'
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/profit-loss`, locale as Locale)
     },
     {
       title: 'Neraca',
-      iconClass: 'tabler-cash'
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/nerace`, locale as Locale)
     }
   ]
 
@@ -27,7 +37,7 @@ const ReportFinancialList: React.FC = () => {
       <Grid container spacing={3}>
         {financialReports.map((report, index) => (
           <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
-            <ReportCard title={report.title} avatarIcon={report.iconClass} />
+            <ReportCard title={report.title} avatarIcon={report.iconClass} href={report.link} />
           </Grid>
         ))}
       </Grid>

src/views/apps/report/cash-flow/ReportCashCard.tsx

@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'Quick Ratio',
+    stats: '2,4',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Target 0,2',
+    subtitle: 'Hari Ini'
+  },
+  {
+    title: 'Current Ratio',
+    stats: '1,09',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '7,6%',
+    subtitle: 'vs bulan sebelumnya'
+  },
+  {
+    title: 'Debt Equity Ratio',
+    stats: '0',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '0%',
+    subtitle: 'vs bulan sebelumnya'
+  },
+  {
+    title: 'Equity Ratio',
+    stats: '0,65',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '4,4%',
+    subtitle: 'vs bulan sebelumnya'
+  }
+]
+
+const ReportCashCard = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default ReportCashCard

src/views/apps/report/cash-flow/ReportCashFlowContent.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { Button, Card, CardContent, Paper } from '@mui/material'
+import { useState } from 'react'
+
+const ReportCashFlowContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            className='max-sm:is-full'
+          >
+            Ekspor
+          </Button>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader title='Aset' date='11/09/2025' />
+        <ReportItemSubheader title='Kas & Bank' />
+        <ReportItem accountCode='1-10001' accountName='Kas' amount={39705850} onClick={() => {}} />
+        <ReportItem accountCode='1-10002' accountName='Rekening Bank' amount={33335787} onClick={() => {}} />
+        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
+        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
+        <ReportItemFooter title='Total Kas & Bank' amount={103672897} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Aset Lancar' />
+        <ReportItem accountCode='1-10100' accountName='Piutang Usaha' amount={49601559} onClick={() => {}} />
+        <ReportItem accountCode='1-10102' accountName='Cadangan Kerugian Piutang' amount={5930450} onClick={() => {}} />
+        <ReportItem accountCode='1-10200' accountName='Persediaan Barang' amount={14536046} onClick={() => {}} />
+        <ReportItem accountCode='1-10402' accountName='Biaya Dibayar Di Muka' amount={-77477} onClick={() => {}} />
+        <ReportItem accountCode='1-10500' accountName='PPN Masukan' amount={4559934} onClick={() => {}} />
+        <ReportItem
+          accountCode='1-10501'
+          accountName='Pajak Dibayar Di Muka - PPh 22'
+          amount={-21622}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Total Aset Lancar' amount={74528890} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Aset Tetap' />
+        <ReportItem accountCode='1-10700' accountName='Aset Tetap - Tanah' amount={17900000} onClick={() => {}} />
+        <ReportItem accountCode='1-10701' accountName='Aset Tetap - Bangunan' amount={-21622} onClick={() => {}} />
+        <ReportItemFooter title='Total Aset Tetap' amount={17878378} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Depresiasi & Amortisasi' />
+        <ReportItem
+          accountCode='1-10753'
+          accountName='Akumulasi penyusutan - Kendaraan'
+          amount={-45946}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='1-10757' accountName='Akumulasi Amortisasi' amount={19820} onClick={() => {}} />
+        <ReportItemFooter title='Total Depresiasi & Amortisasi' amount={-26126} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Lainnya' />
+        <ReportItemFooter title='Total Lainnya' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemFooter title='Total Aset' amount={196054040} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Liabilities and Modal' date='11/09/2025' />
+        <ReportItemSubheader title='Liabilitas Jangka Pendek' />
+        <ReportItem accountCode='2-20100' accountName='Hutang Usaha' amount={43333108} onClick={() => {}} />
+        <ReportItem accountCode='2-20101' accountName='Hutang Belum Ditagih' amount={10367721} onClick={() => {}} />
+        <ReportItem accountCode='2-20500' accountName='PPN Keluaran' amount={14933183} onClick={() => {}} />
+        <ReportItemFooter title='Total Liabilitas Jangka Pendek' amount={68634012} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Liabilitas Jangka Panjang' />
+        <ReportItemFooter title='Total Liabilitas Jangka Panjang' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Perubahan Modal' />
+        <ReportItem accountCode='3-30000' accountName='Modal Saham' amount={83665766} onClick={() => {}} />
+        <ReportItem
+          accountCode='3-30300'
+          accountName='Pendapatan Komprehensif Lainnya'
+          amount={-78378}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='' accountName='Pendapatan sampai periode terakhir' amount={0} onClick={() => {}} />
+        <ReportItem accountCode='' accountName='Pendapatan periode ini' amount={43832641} onClick={() => {}} />
+        <ReportItemFooter title='Total Perubahan Modal' amount={127420028} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemFooter title='Total Liabilitas and Modal' amount={196054040} />
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportCashFlowContent