UPDATE

src/views/dashboards/farm/EconomicOverview.tsx

@@ -8,17 +8,14 @@ import { useTranslations } from 'next-intl'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
 import Grid from '@mui/material/Grid2'
 import { useTheme } from '@mui/material/styles'
 
-// Third-party Imports
-import classnames from 'classnames'
 import type { ApexOptions } from 'apexcharts'
 
 // Component Imports
 import OptionMenu from '@core/components/option-menu'
-import CustomAvatar from '@core/components/mui/Avatar'
+import CardStatsVertical from '@/components/card-statistics/Vertical'
 
 // Styled Component Imports
 const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
@@ -87,20 +84,18 @@ const EconomicOverview = ({ data }: EconomicOverviewProps) => {
           <Grid container spacing={4}>
             {economicData.map((item, index) => (
               <Grid size={{ xs: 12, sm: 6 }} key={index}>
-                <div className='flex items-center gap-4'>
-                  <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={40}>
-                    <i className={classnames(item.avatarIcon, 'text-[22px]')} />
-                  </CustomAvatar>
-                  <div>
-                    <Typography variant='h6'>{item.value}</Typography>
-                    <Typography variant='body2' color='text.secondary'>
-                      {item.title}
-                    </Typography>
-                    <Typography variant='caption' color='text.disabled'>
-                      {item.subtitle}
-                    </Typography>
-                  </div>
-                </div>
+                <CardStatsVertical
+                  title={item.title}
+                  subtitle={item.subtitle}
+                  stats={item.value}
+                  avatarIcon={item.avatarIcon}
+                  avatarColor={item.avatarColor}
+                  avatarSkin='light'
+                  avatarSize={40}
+                  chipText=''
+                  chipColor='primary'
+                  chipVariant='tonal'
+                />
               </Grid>
             ))}
           </Grid>