Report Cash FLow

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

@@ -1,5 +1,5 @@
 import ReportTitle from '@/components/report/ReportTitle'
-import ReportCashCard from '@/views/apps/report/cash-flow/ReportCashCard'
+import ReportCashFlowCard from '@/views/apps/report/cash-flow/ReportCashFlowCard'
 import ReportCashFlowContent from '@/views/apps/report/cash-flow/ReportCashFlowContent'
 import Grid from '@mui/material/Grid2'
 
@@ -10,7 +10,7 @@ const CashFlowPage = () => {
         <ReportTitle title='Arus Kas' />
       </Grid>
       <Grid size={{ xs: 12 }}>
-        <ReportCashCard />
+        <ReportCashFlowCard />
       </Grid>
       <Grid size={{ xs: 12 }}>
         <ReportCashFlowContent />

src/app/[lang]/(dashboard)/(private)/apps/report/neraca/page.tsx

@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportNeracaCard from '@/views/apps/report/neraca/ReportNeracaCard'
+import ReportNeracaContent from '@/views/apps/report/neraca/ReportNeracaContent'
+import Grid from '@mui/material/Grid2'
+
+const NeracaPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Neraca' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportNeracaCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportNeracaContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default NeracaPage

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

@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
+import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
+import Grid from '@mui/material/Grid2'
+
+const ProfiltLossPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laba Rugi' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ProfiltLossPage

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

src/views/apps/report/ReportFinancialList.tsx

@@ -24,7 +24,7 @@ const ReportFinancialList: React.FC = () => {
     {
       title: 'Neraca',
       iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/nerace`, locale as Locale)
+      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
     }
   ]
 

src/views/apps/report/cash-flow/ReportCashFlowCard.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: 'PERUBAHAN KAS',
+    stats: '14.784.651',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '50,2%',
+    subtitle: 'Bulan Ini vs bulan sebelumnya'
+  },
+  {
+    title: 'SALDO PENUTUPAN',
+    stats: '73.041.637',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '100%',
+    subtitle: 'Bulan Ini vs 1 bulan lalu'
+  },
+  {
+    title: 'KAS KELUAR',
+    stats: '11.484.350',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '93,3%',
+    subtitle: 'Bulan Ini vs bulan sebelumnya'
+  },
+  {
+    title: 'KAS MASUK',
+    stats: '26.269.001',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '92,5%',
+    subtitle: 'Bulan Ini vs bulan sebelumnya'
+  }
+]
+
+const ReportCashFlowCard = () => {
+  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 ReportCashFlowCard

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

@@ -30,80 +30,101 @@ const ReportCashFlowContent = () => {
         </div>
       </div>
       <CardContent>
-        <ReportItemHeader title='Aset' date='11/09/2025' />
+        <ReportItemHeader title='Aktivitas Operasional' date='' />
-        <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'
+          accountCode=''
-          accountName='Pajak Dibayar Di Muka - PPh 22'
+          accountName='Penerimaan dari pelanggan'
-          amount={-21622}
+          isSubtitle={false}
+          amount={25437111}
           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'
+          accountCode=''
-          accountName='Akumulasi penyusutan - Kendaraan'
+          accountName='Aset lancar lainnya'
-          amount={-45946}
+          isSubtitle={false}
+          amount={-433288}
           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'
+          accountCode=''
-          accountName='Pendapatan Komprehensif Lainnya'
+          accountName='Pembayaran ke pemasok'
-          amount={-78378}
+          isSubtitle={false}
+          amount={-4167460}
           onClick={() => {}}
         />
-        <ReportItem accountCode='' accountName='Pendapatan sampai periode terakhir' amount={0} onClick={() => {}} />
+        <ReportItem
-        <ReportItem accountCode='' accountName='Pendapatan periode ini' amount={43832641} onClick={() => {}} />
+          accountCode=''
-        <ReportItemFooter title='Total Perubahan Modal' amount={127420028} />
+          accountName='Kartu kredit dan liabilitas jangka pendek lainnya'
+          amount={119550}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Pendapatan lain-lain'
+          isSubtitle={false}
+          amount={54054}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Pembayaran biaya operasional'
+          isSubtitle={false}
+          amount={-6225315}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Arus kas bersih dari aktivitas operasional' amount={14784651} />
         <ReportItemSubheader title='' />
 
-        <ReportItemFooter title='Total Liabilitas and Modal' amount={196054040} />
+        <ReportItemHeader title='Aktivitas Investasi' date='' />
+        <ReportItem
+          accountCode=''
+          accountName='Perolehan/pembelian aset'
+          amount={0}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Aktivitas investasi lainnya'
+          amount={0}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Arus kas bersih dari aktivitas investasi' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Aktivitas Pendanaan' date='' />
+        <ReportItem
+          accountCode=''
+          accountName='Liabilitas Jangka Panjang'
+          amount={0}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='' accountName='Modal pemilik' amount={0} isSubtitle={false} onClick={() => {}} />
+        <ReportItemFooter title='Arus kas bersih dari aktivitas pendanaan' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Arus kas bersih' amount={14784651} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Kas dan Setara Kas' date='' />
+        <ReportItem
+          accountCode=''
+          accountName='Kas dan setara kas diawal periode'
+          isSubtitle={false}
+          amount={0}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Kas dan setara kas diakhir periode'
+          amount={73041637}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Perubahan kas untuk periode' amount={73041637} />
         <ReportItemSubheader title='' />
       </CardContent>
     </Card>

src/views/apps/report/neraca/ReportNeracaCard.tsx

@@ -47,7 +47,7 @@ const data: UserDataType[] = [
   }
 ]
 
-const ReportCashCard = () => {
+const ReportNeracaCard = () => {
   return (
     <Grid container spacing={6}>
       {data.map((item, i) => (
@@ -59,4 +59,4 @@ const ReportCashCard = () => {
   )
 }
 
-export default ReportCashCard
+export default ReportNeracaCard

src/views/apps/report/neraca/ReportNeracaContent.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 ReportNeracaContent = () => {
+  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 ReportNeracaContent

src/views/apps/report/profit-loss/ReportProfitLossCard.tsx

@@ -0,0 +1,98 @@
+// 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: 'Pendapatan',
+    stats: '29.004.775',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '48,8%',
+    subtitle: 'vs Bulan Lalu'
+  },
+  {
+    title: 'Margin Laba Bersih',
+    stats: '38%',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Bulan Ini',
+    subtitle: 'Bulan Ini'
+  },
+  {
+    title: 'Laba Kotor',
+    stats: '21.076.389',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '43,5%',
+    subtitle: 'vs bulan lalu'
+  },
+  {
+    title: 'Laba Bersih',
+    stats: '11.111.074',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '36,8%',
+    subtitle: 'vs bulan lalu'
+  },
+  {
+    title: 'Margin Laba Kotor',
+    stats: '73%',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Bulan Ini',
+    subtitle: 'Bulan Ini'
+  },
+  {
+    title: 'Biaya Operasional',
+    stats: '9.965.315',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '49,4%',
+    subtitle: 'vs Bulan Lalu'
+  },
+  {
+    title: 'Rasio Biaya Operasional',
+    stats: '61,7%',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Bulan Ini',
+    subtitle: 'Bulan Ini'
+  },
+  {
+    title: 'EBITDA',
+    stats: '11.032.696',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '37,3%',
+    subtitle: 'vs bulan lalu'
+  }
+]
+
+const ReportProfitLossCard = () => {
+  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 ReportProfitLossCard

src/views/apps/report/profit-loss/ReportProfitLossContent.tsx

@@ -0,0 +1,117 @@
+'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 ReportProfitLossContent = () => {
+  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='Pendapatan' date='10/09/2025' />
+        <ReportItemSubheader title='Penjualan' />
+        <ReportItem accountCode='4-40000' accountName='Pendapatan' amount={116791108} onClick={() => {}} />
+        <ReportItemSubheader title='Penghasilan lain' />
+        <ReportItem
+          accountCode='7-70001'
+          accountName='Pendapatan Bunga - Deposito'
+          amount={-86486}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='7-70099' accountName='Pendapatan Lain - lain' amount={54054} onClick={() => {}} />
+        <ReportItem
+          accountCode='7-70100'
+          accountName='Pendapatan lainnya (Service Charge)'
+          amount={-15315}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Total Pendapatan' amount={116743360} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Beban Pokok Penjualan' date='10/09/2025' />
+        <ReportItem accountCode='5-50000' accountName='Beban Pokok Pendapatan' amount={35018079} onClick={() => {}} />
+        <ReportItem accountCode='5-50300' accountName='Pengiriman & Pengangkutan' amount={-15315} onClick={() => {}} />
+        <ReportItemFooter title='Total Beban Pokok Penjualan' amount={35002764} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Laba Kotor' amount={81740597} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Biaya Operasional' date='10/09/2025' />
+        <ReportItemSubheader title='Biaya Operasional' />
+        <ReportItem accountCode='6-60218' accountName='Air' amount={15315} onClick={() => {}} />
+        <ReportItem
+          accountCode='6-60301'
+          accountName='Alat Tulis Kantor & Printing'
+          amount={-19820}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='6-60302' accountName='Bea Materai' amount={-40541} onClick={() => {}} />
+        <ReportItem
+          accountCode='6-60003'
+          accountName='Bensin, Tol dan Parkir - Penjualan'
+          amount={6264865}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='6-60401' accountName='Biaya Sewa - Kendaraan' amount={62162} onClick={() => {}} />
+        <ReportItem accountCode='6-60403' accountName='Biaya Sewa - Lain - lain' amount={63964} onClick={() => {}} />
+        <ReportItem accountCode='6-60402' accountName='Biaya Sewa - Operasional' amount={-2703} onClick={() => {}} />
+        <ReportItem accountCode='6-60101' accountName='Gaji' amount={6306} onClick={() => {}} />
+        <ReportItem accountCode='6-60001' accountName='Iklan & Promosi' amount={7851892} onClick={() => {}} />
+        <ReportItem accountCode='6-60002' accountName='Komisi & Fee' amount={6277748} onClick={() => {}} />
+        <ReportItem accountCode='6-60005' accountName='Komunikasi - Penjualan' amount={12058018} onClick={() => {}} />
+        <ReportItem accountCode='6-60206' accountName='Komunikasi - Umum' amount={85586} onClick={() => {}} />
+        <ReportItem accountCode='6-60500' accountName='Penyusutan - Bangunan' amount={73874} onClick={() => {}} />
+        <ReportItem accountCode='6-60502' accountName='Penyusutan - Kendaraan' amount={-78378} onClick={() => {}} />
+        <ReportItem
+          accountCode='6-60004'
+          accountName='Perjalanan Dinas - Penjualan'
+          amount={6745045}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='6-60204' accountName='Perjalanan Dinas - Umum' amount={-48649} onClick={() => {}} />
+        <ReportItem accountCode='6-60304' accountName='Supplies dan Material' amount={58559} onClick={() => {}} />
+        <ReportItem accountCode='6-60106' accountName='THR & Bonus' amount={-59459} onClick={() => {}} />
+
+        <ReportItemSubheader title='Biaya Lain-Lain' />
+        <ReportItem
+          accountCode='8-80002'
+          accountName='(Laba)/Rugi Pelepasan Aset Tetap'
+          amount={2703}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='8-80999' accountName='Beban Lain - lain' amount={81982} onClick={() => {}} />
+        <ReportItem accountCode='8-80100' accountName='Penyesuaian Persediaan' amount={-1477900} onClick={() => {}} />
+        <ReportItem accountCode='8-80001' accountName='Provisi' amount={-12613} onClick={() => {}} />
+        <ReportItemFooter title='Total Biaya Operasional' amount={37907956} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Laba Bersih' amount={43832641} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportProfitLossContent