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

@@ -0,0 +1,7 @@
+import ReportList from '@/views/apps/report'
+
+const ReportPage = () => {
+  return <ReportList />
+}
+
+export default ReportPage

src/components/layout/vertical/VerticalMenu.tsx

@@ -145,6 +145,14 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           >
             {dictionary['navigation'].fixed_assets}
           </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/report`}
+            icon={<i className='tabler-file-analytics' />}
+            exactMatch={false}
+            activeUrl='/apps/report'
+          >
+            {dictionary['navigation'].reports}
+          </MenuItem>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>

src/views/apps/report/ReportCard.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Card, CardContent, Typography } from '@mui/material'
+import Link from 'next/link'
+import CustomAvatar, { CustomAvatarProps } from '@/@core/components/mui/Avatar'
+import { ThemeColor } from '@/@core/types'
+
+interface ReportCardProps {
+  title: string
+  avatarIcon: string
+  href?: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+  avatarColor?: ThemeColor
+  avatarVariant?: CustomAvatarProps['variant']
+  avatarSkin?: CustomAvatarProps['skin']
+  avatarSize?: number
+}
+
+const ReportCard = (props: ReportCardProps) => {
+  const { title, avatarIcon, href, target = '_self', avatarColor, avatarVariant, avatarSkin, avatarSize } = props
+
+  const CardComponent = (
+    <Card
+      className='transition-all duration-300 hover:shadow-lg hover:-translate-y-1 cursor-pointer'
+      sx={{
+        '&:hover': {
+          '& .MuiCardContent-root': {
+            transform: 'scale(1.02)'
+          },
+          '& .report-avatar': {
+            transform: 'scale(1.1)'
+          },
+          '& .report-title': {
+            color: 'primary.main'
+          }
+        }
+      }}
+    >
+      <CardContent className='flex items-center gap-2 transition-transform duration-200'>
+        <CustomAvatar
+          variant={avatarVariant}
+          skin={avatarSkin}
+          color={avatarColor}
+          size={avatarSize}
+          className='report-avatar transition-transform duration-200'
+        >
+          <i className={avatarIcon} />
+        </CustomAvatar>
+        <div className='flex flex-col items-start gap-1'>
+          <Typography variant='h5' className='report-title transition-colors duration-200'>
+            {title}
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  )
+
+  // If href is provided, wrap with Link
+  if (href) {
+    // Check if it's an external link
+    const isExternal = href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:')
+
+    if (isExternal) {
+      return (
+        <a
+          href={href}
+          target={target}
+          rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+          className='no-underline'
+        >
+          {CardComponent}
+        </a>
+      )
+    }
+
+    // Internal link using Next.js Link
+    return (
+      <Link href={href} className='no-underline'>
+        {CardComponent}
+      </Link>
+    )
+  }
+
+  // No link, return card as is
+  return CardComponent
+}
+
+export default ReportCard

src/views/apps/report/ReportFinancialList.tsx

@@ -0,0 +1,38 @@
+import { Container, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import ReportCard from './ReportCard'
+
+const ReportFinancialList: React.FC = () => {
+  const financialReports = [
+    {
+      title: 'Arus Kas',
+      iconClass: 'tabler-cash'
+    },
+    {
+      title: 'Laba Rugi',
+      iconClass: 'tabler-cash'
+    },
+    {
+      title: 'Neraca',
+      iconClass: 'tabler-cash'
+    }
+  ]
+
+  return (
+    <div>
+      <Typography variant='h5' className='mbe-1'>
+        Finansial
+      </Typography>
+
+      <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} />
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  )
+}
+
+export default ReportFinancialList

src/views/apps/report/ReportHeader.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const ReportHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Laporan
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default ReportHeader

src/views/apps/report/index.tsx

@@ -0,0 +1,18 @@
+import Grid from '@mui/material/Grid2'
+import ReportHeader from './ReportHeader'
+import ReportFinancialList from './ReportFinancialList'
+
+const ReportList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportFinancialList />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ReportList