src/views/apps/report/ReportCard.tsx

@@ -46,7 +46,7 @@ const ReportCard = (props: ReportCardProps) => {
           <i className={avatarIcon} />
         </CustomAvatar>
         <div className='flex flex-col items-start gap-1'>
-          <Typography variant='h5' className='report-title transition-colors duration-200'>
+          <Typography variant='h6' className='report-title transition-colors duration-200'>
             {title}
           </Typography>
         </div>

src/views/apps/report/ReportFinancialList.tsx

@@ -25,12 +25,17 @@ const ReportFinancialList: React.FC = () => {
       title: 'Neraca',
       iconClass: 'tabler-cash',
       link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+    },
+    {
+      title: 'Ringkasan Eksekutif',
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
     }
   ]
 
   return (
     <div>
-      <Typography variant='h5' className='mbe-1'>
+      <Typography variant='h5' className='mbe-2'>
         Finansial
       </Typography>
 

src/views/apps/report/ReportPurchaseList.tsx

@@ -0,0 +1,58 @@
+'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 ReportPurchaseList: React.FC = () => {
+  const { lang: locale } = useParams()
+
+  const purchaseReports = [
+    {
+      title: 'Detail Pembelian',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Tagihan Vendor',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Pembelian per Produk',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Pembelian per Vendor',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Pembelian Produk per Vendor',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    }
+  ]
+
+  return (
+    <div>
+      <Typography variant='h5' className='mbe-2'>
+        Pembelian
+      </Typography>
+
+      <Grid container spacing={3}>
+        {purchaseReports.map((report, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
+            <ReportCard title={report.title} avatarIcon={report.iconClass} href={report.link} />
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  )
+}
+
+export default ReportPurchaseList

src/views/apps/report/ReportSalesList.tsx

@@ -0,0 +1,63 @@
+'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 ReportSalesList: React.FC = () => {
+  const { lang: locale } = useParams()
+
+  const salesReports = [
+    {
+      title: 'Detail Penjualan',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Tagihan Pelanggan',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Penjualan per Produk',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Penjualan per Kategori Produk',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Penjualan Produk per Pelanggan',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Pemesanan per Produk',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    }
+  ]
+
+  return (
+    <div>
+      <Typography variant='h5' className='mbe-2'>
+        Penjualan
+      </Typography>
+
+      <Grid container spacing={3}>
+        {salesReports.map((report, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
+            <ReportCard title={report.title} avatarIcon={report.iconClass} href={report.link} />
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  )
+}
+
+export default ReportSalesList

src/views/apps/report/index.tsx

@@ -1,6 +1,8 @@
 import Grid from '@mui/material/Grid2'
 import ReportHeader from './ReportHeader'
 import ReportFinancialList from './ReportFinancialList'
+import ReportSalesList from './ReportSalesList'
+import ReportPurchaseList from './ReportPurchaseList'
 
 const ReportList = () => {
   return (
@@ -11,6 +13,12 @@ const ReportList = () => {
       <Grid size={{ xs: 12 }}>
         <ReportFinancialList />
       </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportSalesList />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportPurchaseList />
+      </Grid>
     </Grid>
   )
 }