initial commit

src/views/pages/widget-examples/actions/AllActions.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Fade from '@mui/material/Fade'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import IconButton from '@mui/material/IconButton'
+import CardContent from '@mui/material/CardContent'
+import Collapse from '@mui/material/Collapse'
+import Typography from '@mui/material/Typography'
+import Backdrop from '@mui/material/Backdrop'
+import CircularProgress from '@mui/material/CircularProgress'
+
+const CardActionAll = () => {
+  // States
+  const [collapse, setCollapse] = useState(false)
+  const [reload, setReload] = useState(false)
+  const [visibility, setVisibility] = useState(false)
+
+  const handleBackDrop = () => {
+    setReload(true)
+
+    setTimeout(() => {
+      setReload(false)
+    }, 2000)
+  }
+
+  return (
+    <Fade in={!visibility} timeout={300}>
+      <Card className='relative'>
+        <CardHeader
+          title='All Actions'
+          action={
+            <div className='flex'>
+              <IconButton size='small' aria-label='collapse' onClick={() => setCollapse(!collapse)}>
+                <i className={collapse ? 'tabler-chevron-down' : 'tabler-chevron-up'} />
+              </IconButton>
+              <IconButton size='small' aria-label='refresh-content' onClick={handleBackDrop}>
+                <i className='tabler-refresh' />
+              </IconButton>
+              <IconButton size='small' aria-label='remove-card' onClick={() => setVisibility(!visibility)}>
+                <i className='tabler-x' />
+              </IconButton>
+            </div>
+          }
+        />
+        <Collapse in={!collapse}>
+          <CardContent>
+            <Typography>Click on the above icons to see them in action</Typography>
+          </CardContent>
+
+          <Backdrop open={reload} className='absolute text-white z-[cal(var(--mui-zIndex-mobileStepper)-1)]'>
+            <CircularProgress color='inherit' />
+          </Backdrop>
+        </Collapse>
+      </Card>
+    </Fade>
+  )
+}
+
+export default CardActionAll

src/views/pages/widget-examples/actions/Collapsible.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import IconButton from '@mui/material/IconButton'
+import CardContent from '@mui/material/CardContent'
+import Collapse from '@mui/material/Collapse'
+import Typography from '@mui/material/Typography'
+
+const CardActionCollapsible = () => {
+  // States
+  const [collapse, setCollapse] = useState(false)
+
+  return (
+    <Card>
+      <CardHeader
+        title='Collapsible'
+        action={
+          <IconButton size='small' aria-label='collapse' onClick={() => setCollapse(!collapse)}>
+            <i className={collapse ? 'tabler-chevron-down' : 'tabler-chevron-up'} />
+          </IconButton>
+        }
+      />
+      <Collapse in={!collapse}>
+        <CardContent>
+          <Typography>
+            Click on <i className='tabler-chevron-up text-xl align-sub' /> icon to see it in action
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  )
+}
+
+export default CardActionCollapsible

src/views/pages/widget-examples/actions/RefreshContent.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import IconButton from '@mui/material/IconButton'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Backdrop from '@mui/material/Backdrop'
+import CircularProgress from '@mui/material/CircularProgress'
+
+const CardActionRefreshContent = () => {
+  // States
+  const [reload, setReload] = useState(false)
+
+  const handleBackDrop = () => {
+    setReload(true)
+
+    setTimeout(() => {
+      setReload(false)
+    }, 2000)
+  }
+
+  return (
+    <Card className='relative'>
+      <CardHeader
+        title='Refresh Content'
+        action={
+          <IconButton size='small' aria-label='refresh-content' onClick={handleBackDrop}>
+            <i className='tabler-refresh' />
+          </IconButton>
+        }
+      />
+      <CardContent>
+        <Typography>
+          Click on <i className='tabler-refresh text-xl align-sub' /> icon to see it in action
+        </Typography>
+      </CardContent>
+
+      <Backdrop open={reload} className='absolute text-white z-[cal(var(--mui-zIndex-mobileStepper)-1)]'>
+        <CircularProgress color='inherit' />
+      </Backdrop>
+    </Card>
+  )
+}
+
+export default CardActionRefreshContent

src/views/pages/widget-examples/actions/RemoveCard.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Fade from '@mui/material/Fade'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import IconButton from '@mui/material/IconButton'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+const CardActionRemoveCard = () => {
+  // States
+  const [visibility, setVisibility] = useState(false)
+
+  return (
+    <Fade in={!visibility} timeout={300}>
+      <Card>
+        <CardHeader
+          title='Remove Card'
+          action={
+            <IconButton size='small' aria-label='remove-card' onClick={() => setVisibility(!visibility)}>
+              <i className='tabler-x' />
+            </IconButton>
+          }
+        />
+        <CardContent>
+          <Typography>
+            Click on <i className='tabler-x text-xl align-sub' /> icon to see it in action
+          </Typography>
+        </CardContent>
+      </Card>
+    </Fade>
+  )
+}
+
+export default CardActionRemoveCard

src/views/pages/widget-examples/actions/Table.tsx

@@ -0,0 +1,59 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import TableContainer from '@mui/material/TableContainer'
+import Table from '@mui/material/Table'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import TableCell from '@mui/material/TableCell'
+import TableBody from '@mui/material/TableBody'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+
+const CardActionsTable = () => {
+  return (
+    <Card>
+      <CardHeader title='Card Actions' />
+      <CardContent className='p-0'>
+        <TableContainer>
+          <Table className={tableStyles.table}>
+            <TableHead>
+              <TableRow>
+                <TableCell>Action</TableCell>
+                <TableCell>Icon</TableCell>
+                <TableCell>Details</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableCell>Collapse</TableCell>
+                <TableCell>
+                  <i className='tabler-chevron-up text-xl' />
+                </TableCell>
+                <TableCell>Collapse card content using collapse action</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Refresh Content</TableCell>
+                <TableCell>
+                  <i className='tabler-refresh text-xl' />
+                </TableCell>
+                <TableCell>Refresh your card content using refresh action</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className='border-be-0'>Remove Card</TableCell>
+                <TableCell className='border-be-0'>
+                  <i className='tabler-x text-xl' />
+                </TableCell>
+                <TableCell className='border-be-0'>Remove card from page using remove card action</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CardActionsTable

src/views/pages/widget-examples/advanced/ActiveProjects.tsx

@@ -0,0 +1,103 @@
+// MUI Imports
+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 LinearProgress from '@mui/material/LinearProgress'
+
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  title: string
+  imgSrc: string
+  progress: number
+  subtitle: string
+  progressColor: ThemeColor
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'Laravel',
+    subtitle: 'eCommerce',
+    progress: 54,
+    progressColor: 'error',
+    imgSrc: '/images/logos/laravel.png'
+  },
+  {
+    title: 'Figma',
+    subtitle: 'App UI Kit',
+    progress: 85,
+    progressColor: 'primary',
+    imgSrc: '/images/logos/figma.png'
+  },
+  {
+    title: 'VusJs',
+    subtitle: 'Calendar App',
+    progress: 64,
+    progressColor: 'success',
+    imgSrc: '/images/logos/vue.png'
+  },
+  {
+    title: 'React',
+    subtitle: 'Dashboard',
+    progress: 40,
+    progressColor: 'info',
+    imgSrc: '/images/logos/react.png'
+  },
+  {
+    title: 'Bootstrap',
+    subtitle: 'Website',
+    progress: 17,
+    progressColor: 'primary',
+    imgSrc: '/images/logos/bootstrap.png'
+  },
+  {
+    title: 'Sketch',
+    subtitle: 'Website Design',
+    progress: 30,
+    progressColor: 'warning',
+    imgSrc: '/images/logos/sketch.png'
+  }
+]
+
+const ActiveProjects = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Active Projects'
+        subheader='Average 72% completed'
+        action={<OptionMenu options={['Refresh', 'Update', 'Share']} />}
+      />
+      <CardContent className='flex flex-col gap-4'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <img src={item.imgSrc} alt={item.title} width={32} />
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <div className='flex flex-col'>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.subtitle}</Typography>
+              </div>
+              <div className='flex justify-between items-center is-32'>
+                <LinearProgress
+                  value={item.progress}
+                  variant='determinate'
+                  color={item.progressColor}
+                  className='min-bs-2 is-20'
+                />
+                <Typography color='text.disabled'>{`${item.progress}%`}</Typography>
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ActiveProjects

src/views/pages/widget-examples/advanced/ActivityTimeline.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import { styled } from '@mui/material/styles'
+import Avatar from '@mui/material/Avatar'
+import AvatarGroup from '@mui/material/AvatarGroup'
+import MuiTimeline from '@mui/lab/Timeline'
+import TimelineDot from '@mui/lab/TimelineDot'
+import TimelineItem from '@mui/lab/TimelineItem'
+import TimelineContent from '@mui/lab/TimelineContent'
+import TimelineSeparator from '@mui/lab/TimelineSeparator'
+import TimelineConnector from '@mui/lab/TimelineConnector'
+import Typography from '@mui/material/Typography'
+import type { TimelineProps } from '@mui/lab/Timeline'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Timeline component
+const Timeline = styled(MuiTimeline)<TimelineProps>({
+  paddingLeft: 0,
+  paddingRight: 0,
+  '& .MuiTimelineItem-root': {
+    width: '100%',
+    '&:before': {
+      display: 'none'
+    }
+  }
+})
+
+const ActivityTimeline = () => {
+  return (
+    <Card>
+      <CardHeader
+        avatar={<i className='tabler-list-details text-xl' />}
+        title='Activity Timeline'
+        titleTypographyProps={{ variant: 'h5' }}
+        action={<OptionMenu options={['Share timeline', 'Suggest edits', 'Report bug']} />}
+        sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
+      />
+      <CardContent className='flex flex-col gap-6 pbe-5'>
+        <Timeline>
+          <TimelineItem>
+            <TimelineSeparator>
+              <TimelineDot color='primary' />
+              <TimelineConnector />
+            </TimelineSeparator>
+            <TimelineContent>
+              <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  12 Invoices have been paid
+                </Typography>
+                <Typography variant='caption'>12 min ago</Typography>
+              </div>
+              <Typography className='mbe-2'>Invoices have been paid to the company</Typography>
+              <div className='flex items-center gap-2.5 is-fit rounded bg-actionHover plb-[5px] pli-2.5'>
+                <img height={20} alt='invoice.pdf' src='/images/icons/pdf-document.png' />
+                <Typography className='font-medium'>invoices.pdf</Typography>
+              </div>
+            </TimelineContent>
+          </TimelineItem>
+
+          <TimelineItem>
+            <TimelineSeparator>
+              <TimelineDot color='success' />
+              <TimelineConnector />
+            </TimelineSeparator>
+            <TimelineContent>
+              <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Client Meeting
+                </Typography>
+                <Typography variant='caption'>45 min ago</Typography>
+              </div>
+              <Typography className='mbe-2'>Project meeting with john @10:15am</Typography>
+              <div className='flex items-center gap-2.5'>
+                <Avatar src='/images/avatars/1.png' className='is-8 bs-8' />
+                <div className='flex flex-col flex-wrap'>
+                  <Typography variant='body2' className='font-medium'>
+                    Lester McCarthy (Client)
+                  </Typography>
+                  <Typography variant='body2'>CEO of Pixinvent</Typography>
+                </div>
+              </div>
+            </TimelineContent>
+          </TimelineItem>
+
+          <TimelineItem>
+            <TimelineSeparator>
+              <TimelineDot color='info' />
+              <TimelineConnector />
+            </TimelineSeparator>
+            <TimelineContent>
+              <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Create a new project for client
+                </Typography>
+                <Typography variant='caption'>2 Day Ago</Typography>
+              </div>
+              <Typography className='mbe-2'>6 team members in a project</Typography>
+              <AvatarGroup total={6} className='pull-up'>
+                <Avatar alt='Travis Howard' src='/images/avatars/1.png' />
+                <Avatar alt='Agnes Walker' src='/images/avatars/4.png' />
+                <Avatar alt='John Doe' src='/images/avatars/2.png' />
+              </AvatarGroup>
+            </TimelineContent>
+          </TimelineItem>
+        </Timeline>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ActivityTimeline

src/views/pages/widget-examples/advanced/AssignmentProgress.tsx

@@ -0,0 +1,76 @@
+// MUI Imports
+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 CircularProgress from '@mui/material/CircularProgress'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import CustomIconButton from '@core/components/mui/IconButton'
+import OptionMenu from '@core/components/option-menu'
+import DirectionalIcon from '@components/DirectionalIcon'
+
+type DataType = {
+  title: string
+  tasks: number
+  progress: number
+  color: ThemeColor
+}
+
+// Vars
+const data: DataType[] = [
+  { title: 'User Experience Design', tasks: 120, progress: 72, color: 'primary' },
+  { title: 'Basic fundamentals', tasks: 32, progress: 48, color: 'success' },
+  { title: 'React Native components', tasks: 182, progress: 15, color: 'error' },
+  { title: 'Basic of music theory', tasks: 56, progress: 24, color: 'info' }
+]
+
+const AssignmentProgress = () => {
+  return (
+    <Card>
+      <CardHeader title='Assignment Progress' action={<OptionMenu options={['Refresh', 'Update', 'Share']} />} />
+      <CardContent className='flex flex-col gap-8'>
+        {data.map((item, i) => (
+          <div key={i} className='flex items-center gap-4'>
+            <div className='relative flex items-center justify-center'>
+              <CircularProgress
+                variant='determinate'
+                size={54}
+                value={100}
+                thickness={3}
+                className='absolute text-[var(--mui-palette-customColors-trackBg)]'
+              />
+              <CircularProgress
+                variant='determinate'
+                size={54}
+                value={item.progress}
+                thickness={3}
+                color={item.color}
+                sx={{ '& .MuiCircularProgress-circle': { strokeLinecap: 'round' } }}
+              />
+              <Typography className='absolute font-medium' color='text.primary'>
+                {`${item.progress}%`}
+              </Typography>
+            </div>
+            <div className='flex justify-between items-center is-full gap-4'>
+              <div>
+                <Typography className='font-medium mbe-1.5' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{`${item.tasks} Tasks`}</Typography>
+              </div>
+              <CustomIconButton size='small' variant='tonal' color='secondary' className='min-is-fit'>
+                <DirectionalIcon ltrIconClass='tabler-chevron-right' rtlIconClass='tabler-chevron-left' />
+              </CustomIconButton>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default AssignmentProgress

src/views/pages/widget-examples/advanced/BrowserStates.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+// MUI Imports
+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 CircularProgress from '@mui/material/CircularProgress'
+
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  title: string
+  imgSrc: string
+  progress: number
+  percentage: string
+  progressColor: ThemeColor
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'Google Chrome',
+    progress: 67,
+    percentage: '54.4%',
+    progressColor: 'primary',
+    imgSrc: '/images/logos/google-chrome.png'
+  },
+  {
+    title: 'Apple Safari',
+    progress: 40,
+    percentage: '14.6%',
+    progressColor: 'success',
+    imgSrc: '/images/logos/safari.png'
+  },
+  {
+    title: 'Mozilla Firefox',
+    progress: 30,
+    percentage: '6.1%',
+    progressColor: 'secondary',
+    imgSrc: '/images/logos/mozilla-firefox.png'
+  },
+  {
+    title: 'Opera Mini',
+    progress: 20,
+    percentage: '8.0%',
+    progressColor: 'info',
+    imgSrc: '/images/logos/opera-mini.png'
+  },
+  {
+    title: 'Internet Explorer',
+    progress: 15,
+    percentage: '4.2%',
+    progressColor: 'warning',
+    imgSrc: '/images/logos/internet-explorer.png'
+  },
+  {
+    title: 'Brave',
+    progress: 15,
+    percentage: '0.3%',
+    progressColor: 'error',
+    imgSrc: '/images/logos/brave.png'
+  }
+]
+
+const BrowserStates = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Browser States'
+        subheader='Counter April 2022'
+        action={<OptionMenu options={['Last 28 Days', 'Last Month', 'Last Year']} />}
+      />
+      <CardContent className='flex flex-col gap-8'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <img src={item.imgSrc} alt={item.title} width={28} />
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <Typography className='font-medium' color='text.primary'>
+                {item.title}
+              </Typography>
+              <div className='flex items-center gap-4'>
+                <Typography>{item.percentage}</Typography>
+                <div className='flex relative'>
+                  <CircularProgress
+                    variant='determinate'
+                    size={26}
+                    value={100}
+                    thickness={5}
+                    sx={{ position: 'absolute', color: 'var(--mui-palette-customColors-trackBg)' }}
+                  />
+                  <CircularProgress
+                    variant='determinate'
+                    size={26}
+                    value={item.progress}
+                    thickness={5}
+                    color={item.progressColor}
+                    sx={{ '& .MuiCircularProgress-circle': { strokeLinecap: 'round' } }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default BrowserStates

src/views/pages/widget-examples/advanced/Congratulations.tsx

@@ -0,0 +1,34 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const CongratulationsJohn = () => {
+  return (
+    <Card>
+      <CardContent className='relative'>
+        <Typography variant='h5' className='mbe-0.5'>
+          Congratulations John 🎉
+        </Typography>
+        <Typography variant='subtitle1' className='mbe-3'>
+          Best seller of the month
+        </Typography>
+        <Typography variant='h4' color='primary.main' className='mbe-1'>
+          $48.9k
+        </Typography>
+        <Button variant='contained' color='primary'>
+          View Sales
+        </Button>
+        <img
+          alt='Congratulations John'
+          src='/images/illustrations/characters/8.png'
+          className='absolute block-end-0 max-bs-[150px] is-[116px] inline-end-6'
+        />
+        <img />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CongratulationsJohn

src/views/pages/widget-examples/advanced/DeliveryPerformance.tsx

@@ -0,0 +1,76 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Types Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+type dataTypes = {
+  title: string
+  value: string
+  change: number
+  icon: string
+  color: ThemeColor
+}
+
+const deliveryData: dataTypes[] = [
+  { title: 'Packages in transit', value: '10k', change: 25.8, icon: 'tabler-box', color: 'primary' },
+  { title: 'Packages out for delivery', value: '5k', change: 4.3, icon: 'tabler-truck', color: 'info' },
+  { title: 'Packages delivered', value: '15k', change: -12.5, icon: 'tabler-circle-check', color: 'success' },
+  { title: 'Delivery success rate', value: '95%', change: 35.6, icon: 'tabler-percentage', color: 'warning' },
+  { title: 'Average delivery time', value: '2.5 Days', change: -2.15, icon: 'tabler-clock', color: 'secondary' },
+  { title: 'Customer satisfaction', value: '4.5/5', change: 5.7, icon: 'tabler-users', color: 'error' }
+]
+
+const DeliveryPerformance = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Delivery Performance'
+        subheader='12% increase in this month'
+        action={<OptionMenu options={['Select All', 'Refresh', 'Share']} />}
+      />
+      <CardContent className='flex flex-col gap-[30px]'>
+        {deliveryData.map((data, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <CustomAvatar skin='light' color={data.color} variant='rounded' size={38}>
+              <i className={data.icon} />
+            </CustomAvatar>
+            <div className='flex justify-between items-center gap-4 is-full'>
+              <div>
+                <Typography color='text.primary' className='line-clamp-1'>
+                  {data.title}
+                </Typography>
+                <div className='flex items-center gap-1'>
+                  <i
+                    className={classnames(
+                      'text-xl',
+                      data.change > 0 ? 'tabler-chevron-up text-success' : 'tabler-chevron-down text-error'
+                    )}
+                  />
+                  <Typography variant='body2' color={data.change > 0 ? 'success.main' : 'error.main'}>
+                    {data.change}%
+                  </Typography>
+                </div>
+              </div>
+              <Typography color='text.primary' className='font-medium'>
+                {data.value}
+              </Typography>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default DeliveryPerformance

src/views/pages/widget-examples/advanced/EarningReports.tsx

@@ -0,0 +1,165 @@
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+import classnames from 'classnames'
+
+// Types Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type DataType = {
+  title: string
+  subtitle: string
+  amount: string
+  trendNumber: number
+  avatarIcon: string
+  avatarColor: ThemeColor
+  trend?: 'positive' | 'negative'
+}
+
+// Vars
+const series = [{ data: [32, 98, 61, 41, 88, 47, 71] }]
+
+const data: DataType[] = [
+  {
+    amount: '$1,619',
+    trendNumber: 18.6,
+    title: 'Net Profit',
+    avatarColor: 'primary',
+    subtitle: '12.4k Sales',
+    avatarIcon: 'tabler-chart-pie-2'
+  },
+  {
+    amount: '$3,571',
+    trendNumber: 39.6,
+    title: 'Total Income',
+    avatarColor: 'success',
+    subtitle: 'Sales, Affiliation',
+    avatarIcon: 'tabler-currency-dollar'
+  },
+  {
+    amount: '$430',
+    trendNumber: 52.8,
+    title: 'Total Expenses',
+    avatarColor: 'secondary',
+    subtitle: 'ADVT, Marketing',
+    avatarIcon: 'tabler-credit-card'
+  }
+]
+
+const EarningReports = () => {
+  // Vars
+  const primaryColorWithOpacity = 'var(--mui-palette-primary-lightOpacity)'
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    tooltip: { enabled: false },
+    grid: {
+      show: false,
+      padding: {
+        top: -16,
+        left: -18,
+        right: -17,
+        bottom: -11
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 4,
+        distributed: true,
+        columnWidth: '60%'
+      }
+    },
+    legend: { show: false },
+    dataLabels: { enabled: false },
+    colors: [
+      primaryColorWithOpacity,
+      primaryColorWithOpacity,
+      primaryColorWithOpacity,
+      primaryColorWithOpacity,
+      'var(--mui-palette-primary-main)',
+      primaryColorWithOpacity,
+      primaryColorWithOpacity
+    ],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    xaxis: {
+      categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+      tickPlacement: 'on',
+      labels: {
+        style: {
+          fontSize: '13px',
+          colors: 'var(--mui-palette-text-disabled)'
+        }
+      }
+    },
+    yaxis: { show: false }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Earning Reports'
+        subheader='Weekly Earnings Overview'
+        action={<OptionMenu options={['Refresh', 'Update', 'Share']} />}
+      />
+      <CardContent className='flex flex-col gap-4'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={34}>
+              <i className={classnames(item.avatarIcon, 'text-[22px]')} />
+            </CustomAvatar>
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <div className='flex flex-col'>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.subtitle}</Typography>
+              </div>
+              <div className='flex items-center gap-4'>
+                <Typography variant='body2'>{item.amount}</Typography>
+                <div className='flex items-center gap-1'>
+                  <i
+                    className={classnames(
+                      item.trend === 'negative' ? 'tabler-chevron-down text-error' : 'tabler-chevron-up text-success',
+                      'text-xl'
+                    )}
+                  />
+                  <Typography variant='body2' className='text-textDisabled'>{`${item.trendNumber}%`}</Typography>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+        <AppReactApexCharts type='bar' height={158} width='100%' series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default EarningReports

src/views/pages/widget-examples/advanced/LastTransaction.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Chip from '@mui/material/Chip'
+import Typography from '@mui/material/Typography'
+import Avatar from '@mui/material/Avatar'
+import { useColorScheme } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Types Imports
+import type { ThemeColor, SystemMode } from '@core/types'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+
+type DataType = {
+  date: string
+  trend: string
+  imgName: string
+  cardType: string
+  cardNumber: string
+  status: 'verified' | 'rejected' | 'pending' | 'on-hold'
+}
+
+type StatusObj = Record<
+  DataType['status'],
+  {
+    text: string
+    color: ThemeColor
+  }
+>
+
+// Vars
+const data: DataType[] = [
+  {
+    trend: '+$1,678',
+    status: 'verified',
+    cardType: 'Credit',
+    cardNumber: '*4230',
+    imgName: 'visa',
+    date: `17 Mar ${new Date().getFullYear()}`
+  },
+  {
+    trend: '-$839',
+    status: 'rejected',
+    cardType: 'Credit',
+    cardNumber: '*5578',
+    imgName: 'mastercard',
+    date: `12 Feb ${new Date().getFullYear()}`
+  },
+  {
+    trend: '+$435',
+    cardType: 'ATM',
+    status: 'verified',
+    cardNumber: '*4567',
+    imgName: 'american-express',
+    date: `28 Feb ${new Date().getFullYear()}`
+  },
+  {
+    trend: '+$2,345',
+    status: 'pending',
+    cardType: 'Credit',
+    cardNumber: '*5699',
+    imgName: 'visa',
+    date: `08 Jan ${new Date().getFullYear()}`
+  },
+  {
+    trend: '+$1,758',
+    status: 'rejected',
+    cardType: 'Credit',
+    cardNumber: '*2451',
+    imgName: 'visa',
+    date: `19 Oct ${new Date().getFullYear()}`
+  }
+]
+
+const statusObj: StatusObj = {
+  rejected: { text: 'Rejected', color: 'error' },
+  pending: { text: 'Pending', color: 'secondary' },
+  'on-hold': { text: 'On hold', color: 'warning' },
+  verified: { text: 'Verified', color: 'success' }
+}
+
+const LastTransaction = ({ serverMode }: { serverMode: SystemMode }) => {
+  // Hooks
+  const { mode } = useColorScheme()
+
+  // Vars
+  const _mode = (mode === 'system' ? serverMode : mode) || serverMode
+
+  return (
+    <Card>
+      <CardHeader
+        title='Last Transaction'
+        action={<OptionMenu options={['Show all entries', 'Refresh', 'Download']} />}
+      />
+      <div className='overflow-x-auto'>
+        <table className={tableStyles.table}>
+          <thead className='uppercase'>
+            <tr className='border-be'>
+              <th className='leading-6 plb-4 pis-6 pli-2'>Card</th>
+              <th className='leading-6 plb-4 pli-2'>Date</th>
+              <th className='leading-6 plb-4 pli-2'>Status</th>
+              <th className='leading-6 plb-4 pie-6 pli-2 text-right'>Trend</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, index) => (
+              <tr key={index} className='border-0'>
+                <td className='pis-6 pli-2 plb-3'>
+                  <div className='flex items-center gap-4'>
+                    <Avatar
+                      variant='rounded'
+                      className={classnames('is-[50px] bs-[30px]', {
+                        'bg-white': _mode === 'dark',
+                        'bg-actionHover': _mode === 'light'
+                      })}
+                    >
+                      <img width={30} alt={row.imgName} src={`/images/logos/${row.imgName}.png`} />
+                    </Avatar>
+                    <div className='flex flex-col'>
+                      <Typography color='text.primary'>{row.cardNumber}</Typography>
+                      <Typography variant='body2' color='text.disabled'>
+                        {row.cardType}
+                      </Typography>
+                    </div>
+                  </div>
+                </td>
+                <td className='pli-2 plb-3'>
+                  <div className='flex flex-col'>
+                    <Typography color='text.primary'>Sent</Typography>
+                    <Typography variant='body2' color='text.disabled'>
+                      {row.date}
+                    </Typography>
+                  </div>
+                </td>
+                <td className='pli-2 plb-3'>
+                  <Chip
+                    variant='tonal'
+                    size='small'
+                    label={statusObj[row.status].text}
+                    color={statusObj[row.status].color}
+                  />
+                </td>
+                <td className='pli-2 plb-3 pie-6 text-right'>
+                  <Typography color='text.primary'>{row.trend}</Typography>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  )
+}
+
+export default LastTransaction

src/views/pages/widget-examples/advanced/MonthlyCampaignState.tsx

@@ -0,0 +1,108 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+type DataType = {
+  icon: string
+  title: string
+  amount: string
+  avatarColor: ThemeColor
+  trendNumber: string
+  trend?: 'positive' | 'negative'
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'Emails',
+    amount: '12,346',
+    trendNumber: '0.3%',
+    avatarColor: 'success',
+    icon: 'tabler-mail'
+  },
+  {
+    title: 'Opened',
+    amount: '8,734',
+    trendNumber: '2.1%',
+    avatarColor: 'info',
+    icon: 'tabler-link'
+  },
+  {
+    title: 'Clicked',
+    amount: '967',
+    trendNumber: '1.4%',
+    trend: 'negative',
+    avatarColor: 'warning',
+    icon: 'tabler-mouse'
+  },
+  {
+    title: 'Subscribe',
+    amount: '345',
+    trendNumber: '8.5%',
+    avatarColor: 'primary',
+    icon: 'tabler-users'
+  },
+  {
+    title: 'Complaints',
+    amount: '10',
+    trendNumber: '1.5%',
+    trend: 'negative',
+    avatarColor: 'secondary',
+    icon: 'tabler-alert-triangle'
+  },
+  {
+    title: 'Unsubscribe',
+    amount: '86',
+    trendNumber: '0.8%',
+    avatarColor: 'error',
+    icon: 'tabler-ban'
+  }
+]
+
+const MonthlyCampaignState = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Monthly Campaign State'
+        subheader='8.52k Social Visitors'
+        action={<OptionMenu options={['Last Month', 'Last 6 Months', 'Last Year']} />}
+      />
+      <CardContent className='flex flex-col gap-[1.5625rem]'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={34}>
+              <i className={classnames(item.icon, 'text-[22px]')} />
+            </CustomAvatar>
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <Typography className='font-medium' color='text.primary'>
+                {item.title}
+              </Typography>
+              <div className='flex items-center gap-4'>
+                <Typography>{item.amount}</Typography>
+                <Typography
+                  className='flex justify-end is-11'
+                  color={`${item.trend === 'negative' ? 'error' : 'success'}.main`}
+                >
+                  {item.trendNumber}
+                </Typography>
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default MonthlyCampaignState

src/views/pages/widget-examples/advanced/Orders.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+// React Imports
+import { Fragment, useState } from 'react'
+import type { SyntheticEvent } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Divider from '@mui/material/Divider'
+import { styled } from '@mui/material/styles'
+import Tab from '@mui/material/Tab'
+import TabList from '@mui/lab/TabList'
+import TabPanel from '@mui/lab/TabPanel'
+import TabContext from '@mui/lab/TabContext'
+import Typography from '@mui/material/Typography'
+import TimelineDot from '@mui/lab/TimelineDot'
+import TimelineItem from '@mui/lab/TimelineItem'
+import TimelineContent from '@mui/lab/TimelineContent'
+import TimelineSeparator from '@mui/lab/TimelineSeparator'
+import TimelineConnector from '@mui/lab/TimelineConnector'
+import MuiTimeline from '@mui/lab/Timeline'
+import type { TimelineProps } from '@mui/lab/Timeline'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+type TimelineItemData = {
+  name: string
+  address: string
+}
+
+type TimelineData = Record<'sender' | 'receiver', TimelineItemData>
+
+type Data = Record<'new' | 'preparing' | 'shipping', TimelineData[]>
+
+// Styled Timeline component
+const Timeline = styled(MuiTimeline)<TimelineProps>({
+  paddingLeft: 0,
+  paddingRight: 0,
+  '& .MuiTimelineItem-root': {
+    width: '100%',
+    '&:before': {
+      display: 'none'
+    }
+  },
+  '& .MuiTimelineDot-root': {
+    border: 0,
+    padding: 0
+  }
+})
+
+// Vars
+const data: Data = {
+  new: [
+    {
+      sender: {
+        name: 'Micheal Hughes',
+        address: '101 Boulder, California (CA), 933130'
+      },
+      receiver: {
+        name: 'Daisy Coleman',
+        address: '939 Orange, California (CA), 910614'
+      }
+    },
+    {
+      sender: {
+        name: 'Glenn Todd',
+        address: '1713 Garnet, California (CA), 939573'
+      },
+      receiver: {
+        name: 'Arthur West',
+        address: '156 Blaze, California (CA), 925878'
+      }
+    }
+  ],
+  preparing: [
+    {
+      sender: {
+        name: 'Rose Cole',
+        address: '61 Unions, California (CA), 922523'
+      },
+      receiver: {
+        name: 'Polly Spencer',
+        address: '865 Delta, California (CA), 932830'
+      }
+    },
+    {
+      sender: {
+        name: 'Jerry Wood',
+        address: '37 Marjory, California (CA), 951958'
+      },
+      receiver: {
+        name: 'Sam McCormick',
+        address: '926 Reynolds, California (CA), 910279'
+      }
+    }
+  ],
+  shipping: [
+    {
+      sender: {
+        name: 'Alex Walton',
+        address: '78 Judson, California (CA), 956084'
+      },
+      receiver: {
+        name: 'Eula Griffin',
+        address: '56 Bernard, California (CA), 965133'
+      }
+    },
+    {
+      sender: {
+        name: 'Lula Barton',
+        address: '95 Gaylord, California (CA), 991955'
+      },
+      receiver: {
+        name: 'Craig Jacobs',
+        address: '73 Sandy, California (CA), 954566'
+      }
+    }
+  ]
+}
+
+const Orders = () => {
+  // States
+  const [value, setValue] = useState<string>('new')
+
+  const handleChange = (event: SyntheticEvent, newValue: string) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Orders by Countries'
+        subheader='62 deliveries in progress'
+        action={<OptionMenu options={['Show all orders', 'Share', 'Refresh']} />}
+        className='pbe-4'
+      />
+      <TabContext value={value}>
+        <TabList variant='fullWidth' onChange={handleChange} aria-label='full width tabs example'>
+          <Tab value='new' label='New' />
+          <Tab value='preparing' label='Preparing' />
+          <Tab value='shipping' label='Shipping' />
+        </TabList>
+        <TabPanel value={value} className='pbs-0'>
+          <CardContent>
+            {data[value as keyof Data].map((item: TimelineData, index: number) => {
+              return (
+                <Fragment key={index}>
+                  <Timeline>
+                    <TimelineItem>
+                      <TimelineSeparator>
+                        <TimelineDot variant='outlined' className='mlb-0'>
+                          <i className='tabler-circle-check text-xl text-success' />
+                        </TimelineDot>
+                        <TimelineConnector />
+                      </TimelineSeparator>
+                      <TimelineContent className='flex flex-col gap-0.5 pbs-0 pis-5 pbe-5'>
+                        <Typography variant='body2' className='uppercase' color='success.main'>
+                          Sender
+                        </Typography>
+                        <Typography color='text.primary' className='font-medium'>
+                          {item.sender.name}
+                        </Typography>
+                        <Typography>{item.sender.address}</Typography>
+                      </TimelineContent>
+                    </TimelineItem>
+                    <TimelineItem>
+                      <TimelineSeparator>
+                        <TimelineDot variant='outlined' className='mlb-0'>
+                          <i className='tabler-map-pin text-xl text-primary' />
+                        </TimelineDot>
+                      </TimelineSeparator>
+                      <TimelineContent className='flex flex-col pbe-0 gap-0.5 pbs-0 pis-5'>
+                        <Typography variant='body2' className='uppercase' color='primary.main'>
+                          Receiver
+                        </Typography>
+                        <Typography color='text.primary' className='font-medium'>
+                          {item.receiver.name}
+                        </Typography>
+                        <Typography>{item.receiver.address}</Typography>
+                      </TimelineContent>
+                    </TimelineItem>
+                  </Timeline>
+                  {index !== data[value as keyof Data].length - 1 && <Divider className='mlb-4 border-dashed' />}
+                </Fragment>
+              )
+            })}
+          </CardContent>
+        </TabPanel>
+      </TabContext>
+    </Card>
+  )
+}
+
+export default Orders

src/views/pages/widget-examples/advanced/PopularInstructors.tsx

@@ -0,0 +1,61 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Divider from '@mui/material/Divider'
+import Typography from '@mui/material/Typography'
+
+// Components Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  name: string
+  profession: string
+  totalCourses: number
+  avatar: string
+}
+
+// Vars
+const data: DataType[] = [
+  { name: 'Jordan Stevenson', profession: 'Business Intelligence', totalCourses: 33, avatar: '/images/avatars/1.png' },
+  { name: 'Bentlee Emblin', profession: 'Digital Marketing', totalCourses: 52, avatar: '/images/avatars/2.png' },
+  { name: 'Benedetto Rossiter', profession: 'UI/UX Design', totalCourses: 12, avatar: '/images/avatars/3.png' },
+  { name: 'Beverlie Krabbe', profession: 'Vue', totalCourses: 8, avatar: '/images/avatars/4.png' },
+  { name: 'Emma Bowen', profession: 'React Native', totalCourses: 9, avatar: '/images/avatars/3.png' },
+  { name: 'Amy Patterson', profession: 'Java Developer', totalCourses: 10, avatar: '/images/avatars/6.png' }
+]
+
+const PopularInstructors = () => {
+  return (
+    <Card className='bs-full'>
+      <CardHeader title='Popular Instructors' action={<OptionMenu options={['Refresh', 'Update', 'Share']} />} />
+      <Divider />
+      <div className='flex justify-between plb-4 pli-6'>
+        <Typography className='uppercase'>instructors</Typography>
+        <Typography className='uppercase'>courses</Typography>
+      </div>
+      <Divider />
+      <CardContent className='flex flex-col gap-4'>
+        {data.map((item, i) => (
+          <div key={i} className='flex items-center gap-4'>
+            <CustomAvatar size={34} src={item.avatar} />
+            <div className='flex justify-between items-center is-full gap-4'>
+              <div>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.name}
+                </Typography>
+                <Typography variant='body2'>{item.profession}</Typography>
+              </div>
+              <Typography className='font-medium' color='text.primary'>
+                {item.totalCourses}
+              </Typography>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PopularInstructors

src/views/pages/widget-examples/advanced/PopularProducts.tsx

@@ -0,0 +1,85 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  title: string
+  imgSrc: string
+  amount: string
+  subtitle: string
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'Apple iPhone 13',
+    subtitle: '4567',
+    amount: '$999.29',
+    imgSrc: '/images/cards/apple-iPhone-13.png'
+  },
+  {
+    title: 'Nike Air Jordan',
+    subtitle: '3456',
+    amount: '$72.40',
+    imgSrc: '/images/cards/nike-air-jordan.png'
+  },
+  {
+    title: 'Beats Studio 2',
+    subtitle: '9485',
+    amount: '$99.90',
+    imgSrc: '/images/cards/beats-studio-2.png'
+  },
+  {
+    title: 'Apple Watch Series 7',
+    subtitle: '2345',
+    amount: '$249.99',
+    imgSrc: '/images/cards/apple-watch-series-7.png'
+  },
+  {
+    title: 'Amazon Echo Dot',
+    subtitle: '8959',
+    amount: '$79.40',
+    imgSrc: '/images/cards/amazon-echo-dot.png'
+  },
+  {
+    title: 'PlayStation Console',
+    subtitle: '7892',
+    amount: '$129.48',
+    imgSrc: '/images/cards/play-station-console.png'
+  }
+]
+
+const PopularProducts = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Popular Products'
+        subheader='Total 10.4k Visitors'
+        action={<OptionMenu options={['Price - low to high', 'Price - high to low', 'Best seller']} />}
+      />
+      <CardContent className='flex flex-col gap-[1.625rem]'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <img src={item.imgSrc} alt={item.title} width={46} />
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <div className='flex flex-col'>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{`Item: #FXZ-${item.subtitle}`}</Typography>
+              </div>
+              <Typography>{item.amount}</Typography>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PopularProducts

src/views/pages/widget-examples/advanced/SalesByCountries.tsx

@@ -0,0 +1,102 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  title: string
+  imgSrc: string
+  subtitle: string
+  trendNumber: number
+  trend?: 'positive' | 'negative'
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: '$8.45k',
+    subtitle: 'United States',
+    trendNumber: 25.8,
+    imgSrc: '/images/cards/us.png'
+  },
+  {
+    title: '$7.78k',
+    subtitle: 'Brazil',
+    trendNumber: 16.2,
+    trend: 'negative',
+    imgSrc: '/images/cards/brazil.png'
+  },
+  {
+    title: '$6.48k',
+    subtitle: 'India',
+    trendNumber: 12.3,
+    imgSrc: '/images/cards/india.png'
+  },
+  {
+    title: '$5.12k',
+    subtitle: 'Australia',
+    trendNumber: 11.9,
+    trend: 'negative',
+    imgSrc: '/images/cards/australia.png'
+  },
+  {
+    title: '$4.45k',
+    subtitle: 'France',
+    trendNumber: 16.2,
+    imgSrc: '/images/cards/france.png'
+  },
+  {
+    title: '$3.90k',
+    subtitle: 'China',
+    trendNumber: 14.8,
+    imgSrc: '/images/cards/china.png'
+  }
+]
+
+const SalesByCountries = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Sales by Countries'
+        subheader='Monthly Sales Overview'
+        action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
+      />
+      <CardContent className='flex flex-col gap-4'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <img src={item.imgSrc} alt={item.subtitle} width={34} />
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <div className='flex flex-col'>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.subtitle}</Typography>
+              </div>
+              <div className='flex items-center gap-1'>
+                <i
+                  className={classnames(
+                    item.trend === 'negative' ? 'tabler-chevron-down text-error' : 'tabler-chevron-up text-success',
+                    'text-xl'
+                  )}
+                />
+                <Typography
+                  variant='h6'
+                  color={`${item.trend === 'negative' ? 'error' : 'success'}.main`}
+                >{`${item.trendNumber}%`}</Typography>
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesByCountries

src/views/pages/widget-examples/advanced/SourceVisits.tsx

@@ -0,0 +1,109 @@
+// MUI Imports
+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 Chip from '@mui/material/Chip'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+type DataType = {
+  icon: string
+  title: string
+  amount: string
+  subtitle: string
+  trendNumber: number
+  trend?: 'positive' | 'negative'
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'Direct Source',
+    subtitle: 'Direct link click',
+    amount: '1.2k',
+    trendNumber: 4.2,
+    icon: 'tabler-shadow'
+  },
+  {
+    title: 'Social Networks',
+    subtitle: 'Social Channels',
+    amount: '31.5k',
+    trendNumber: 8.2,
+    icon: 'tabler-globe'
+  },
+  {
+    title: 'Email Newsletter',
+    subtitle: 'Mail Campaigns',
+    amount: '893',
+    trendNumber: 2.4,
+    icon: 'tabler-mail'
+  },
+  {
+    title: 'Referrals',
+    subtitle: 'Impact Radius Visits',
+    amount: '342',
+    trendNumber: 0.4,
+    trend: 'negative',
+    icon: 'tabler-external-link'
+  },
+  {
+    title: 'ADVT',
+    subtitle: 'Google ADVT',
+    amount: '2.15k',
+    trendNumber: 9.1,
+    icon: 'tabler-ad'
+  },
+  {
+    title: 'Other',
+    subtitle: 'Many Sources',
+    amount: '12.5k',
+    trendNumber: 6.2,
+    icon: 'tabler-star'
+  }
+]
+
+const SourceVisits = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Source Visits'
+        subheader='38.4k Visitors'
+        action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
+      />
+      <CardContent className='flex flex-col gap-4'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <CustomAvatar skin='light' variant='rounded' size={34}>
+              <i className={classnames(item.icon, 'text-[22px] text-textSecondary')} />
+            </CustomAvatar>
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <div className='flex flex-col'>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.subtitle}</Typography>
+              </div>
+              <div className='flex items-center gap-4'>
+                <Typography>{item.amount}</Typography>
+                <Chip
+                  variant='tonal'
+                  size='small'
+                  color={item.trend === 'negative' ? 'error' : 'success'}
+                  label={`${item.trend === 'negative' ? '-' : '+'}${item.trendNumber}%`}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SourceVisits

src/views/pages/widget-examples/advanced/TopCourses.tsx

@@ -0,0 +1,54 @@
+// MUI Imports
+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 Chip from '@mui/material/Chip'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  title: string
+  views: string
+  icon: string
+  color: ThemeColor
+}
+
+// Vars
+const data: DataType[] = [
+  { title: 'Videography Basic Design Course', views: '1.2k', icon: 'tabler-video', color: 'primary' },
+  { title: 'Basic Front-end Development Course', views: '834', icon: 'tabler-code', color: 'info' },
+  { title: 'Basic Fundamentals of Photography', views: '3.7k', icon: 'tabler-camera', color: 'success' },
+  { title: 'Advance Dribble Base Visual Design', views: '2.5k', icon: 'tabler-brand-dribbble', color: 'warning' },
+  { title: 'Your First Singing Lesson', views: '948', icon: 'tabler-microphone-2', color: 'error' }
+]
+
+const TopCourses = () => {
+  return (
+    <Card>
+      <CardHeader title='Top Courses' action={<OptionMenu options={['Last 28 Days', 'Last Month', 'Last Year']} />} />
+      <CardContent className='flex flex-col gap-6'>
+        {data.map((item, i) => (
+          <div key={i} className='flex items-center gap-4'>
+            <CustomAvatar variant='rounded' skin='light' color={item.color}>
+              <i className={item.icon} />
+            </CustomAvatar>
+            <div className='flex justify-between items-center gap-4 is-full flex-wrap'>
+              <Typography className='font-medium flex-1' color='text.primary'>
+                {item.title}
+              </Typography>
+              <Chip label={`${item.views} Views`} variant='tonal' size='small' color='secondary' />
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default TopCourses

src/views/pages/widget-examples/advanced/Transactions.tsx

@@ -0,0 +1,114 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+type DataType = {
+  title: string
+  amount: number
+  subtitle: string
+  avatarIcon: string
+  avatarColor: ThemeColor
+  amountDiff?: 'positive' | 'negative'
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'Wallet',
+    subtitle: 'Starbucks',
+    amount: 75,
+    amountDiff: 'negative',
+    avatarColor: 'primary',
+    avatarIcon: 'tabler-wallet'
+  },
+  {
+    title: 'Bank Transfer',
+    subtitle: 'Add Money',
+    amount: 480,
+    avatarColor: 'success',
+    avatarIcon: 'tabler-browser-check'
+  },
+  {
+    title: 'PayPal',
+    subtitle: 'Client Payment',
+    amount: 268,
+    avatarColor: 'error',
+    avatarIcon: 'tabler-brand-paypal'
+  },
+  {
+    title: 'Master Card',
+    subtitle: 'Ordered iPhone 13',
+    amount: 699,
+    amountDiff: 'negative',
+    avatarColor: 'secondary',
+    avatarIcon: 'tabler-credit-card'
+  },
+  {
+    title: 'Bank Transaction',
+    subtitle: 'Refund',
+    amount: 98,
+    avatarColor: 'info',
+    avatarIcon: 'tabler-currency-dollar'
+  },
+  {
+    title: 'PayPal',
+    subtitle: 'Client Payment',
+    amount: 126,
+    avatarColor: 'error',
+    avatarIcon: 'tabler-brand-paypal'
+  },
+  {
+    title: 'Bank Transfer',
+    subtitle: 'Pay Office Rent',
+    amount: 1290,
+    amountDiff: 'negative',
+    avatarColor: 'success',
+    avatarIcon: 'tabler-browser-check'
+  }
+]
+
+const Transactions = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Transactions'
+        subheader='Total 58 transaction done in month'
+        action={<OptionMenu options={['Refresh', 'Show all entries', 'Make payment']} />}
+      />
+      <CardContent className='flex flex-col gap-[1.125rem]'>
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={34}>
+              <i className={classnames(item.avatarIcon, 'text-[22px]')} />
+            </CustomAvatar>
+            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
+              <div className='flex flex-col'>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.subtitle}</Typography>
+              </div>
+              <Typography
+                variant='h6'
+                color={`${item.amountDiff === 'negative' ? 'error' : 'success'}.main`}
+              >{`${item.amountDiff === 'negative' ? '-' : '+'}${item.amount}`}</Typography>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default Transactions

src/views/pages/widget-examples/advanced/UpcomingWebinar.tsx

@@ -0,0 +1,61 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+
+type DataType = {
+  icon: string
+  title: string
+  value: string
+}
+
+// Vars
+const data: DataType[] = [
+  { icon: 'tabler-calendar', title: '17 Nov 23', value: 'Date' },
+  { icon: 'tabler-clock', title: '32 Minutes', value: 'Duration' }
+]
+
+const UpcomingWebinar = () => {
+  return (
+    <Card>
+      <CardContent className='flex flex-col gap-4'>
+        <div className='flex justify-center pli-2.5 pbs-4 rounded bg-primaryLight'>
+          <img src='/images/illustrations/characters/4.png' className='bs-[146px]' />
+        </div>
+        <div>
+          <Typography variant='h5' className='mbe-2'>
+            Upcoming Webinar
+          </Typography>
+          <Typography variant='body2'>
+            Next Generation Frontend Architecture Using Layout Engine And React Native Web.
+          </Typography>
+        </div>
+        <div className='flex flex-wrap justify-between gap-4'>
+          {data.map((item, i) => (
+            <div key={i} className='flex items-center gap-3'>
+              <CustomAvatar variant='rounded' skin='light' color='primary'>
+                <i className={classnames('text-[28px]', item.icon)} />
+              </CustomAvatar>
+              <div>
+                <Typography color='text.primary' className='font-medium'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.value}</Typography>
+              </div>
+            </div>
+          ))}
+        </div>
+        <Button variant='contained'>Join the event</Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default UpcomingWebinar

src/views/pages/widget-examples/advanced/VehicleCondition.tsx

@@ -0,0 +1,75 @@
+// MUI Imports
+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 CircularProgress from '@mui/material/CircularProgress'
+import Chip from '@mui/material/Chip'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  title: string
+  subtitle: string
+  progress: number
+  color: ThemeColor
+  chipLabel?: string
+}
+
+// Vars
+const data: DataType[] = [
+  { title: 'Incorrect address', subtitle: 'All exceptions', progress: 83, color: 'success', chipLabel: '+10' },
+  { title: 'Good', subtitle: '24 Vehicles', progress: 11, color: 'info', chipLabel: '+9.1' },
+  { title: 'Average', subtitle: '14 Vehicles', progress: 8, color: 'primary', chipLabel: '+2.5' },
+  { title: 'Bad', subtitle: '8 Vehicles', progress: 6, color: 'warning', chipLabel: '-3.4' },
+  { title: 'Not Working', subtitle: '4 Vehicles', progress: 2, color: 'error', chipLabel: '-12.6' }
+]
+
+const VehicleCondition = () => {
+  return (
+    <Card>
+      <CardHeader title='Vehicles Condition' action={<OptionMenu options={['Refresh', 'Update', 'Share']} />} />
+      <CardContent className='flex flex-col gap-8'>
+        {data.map((item, i) => (
+          <div key={i} className='flex items-center gap-4'>
+            <div className='relative flex items-center justify-center'>
+              <CircularProgress
+                variant='determinate'
+                size={54}
+                value={100}
+                thickness={3}
+                className='absolute text-[var(--mui-palette-customColors-trackBg)]'
+              />
+              <CircularProgress
+                variant='determinate'
+                size={54}
+                value={item.progress}
+                thickness={3}
+                color={item.color}
+                sx={{ '& .MuiCircularProgress-circle': { strokeLinecap: 'round' } }}
+              />
+              <Typography className='absolute font-medium' color='text.primary'>
+                {`${item.progress}%`}
+              </Typography>
+            </div>
+            <div className='flex justify-between items-center is-full gap-4'>
+              <div>
+                <Typography className='font-medium mbe-1.5' color={`${item.color}.main`}>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.subtitle}</Typography>
+              </div>
+              <Chip variant='tonal' size='small' label={`${item.chipLabel}%`} />
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default VehicleCondition

src/views/pages/widget-examples/advanced/WebsiteAnalyticsSlider.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Badge from '@mui/material/Badge'
+import Card from '@mui/material/Card'
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Components
+import classnames from 'classnames'
+import { useKeenSlider } from 'keen-slider/react'
+import type { KeenSliderPlugin } from 'keen-slider/react'
+
+// Components Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+
+import AppKeenSlider from '@/libs/styles/AppKeenSlider'
+
+type DataType = {
+  img: string
+  title: string
+  details: { [key: string]: string }
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'Traffic',
+    img: '/images/cards/graphic-illustration-1.png',
+    details: {
+      Sessions: '28%',
+      'Page Views': '3.1k',
+      Leads: '1.2k',
+      Conversions: '12%'
+    }
+  },
+  {
+    title: 'Spending',
+    img: '/images/cards/graphic-illustration-2.png',
+    details: {
+      Spend: '12h',
+      Orders: '18',
+      Order: '127',
+      Items: '2.3k'
+    }
+  },
+  {
+    title: 'Revenue Sources',
+    img: '/images/cards/graphic-illustration-3.png',
+    details: {
+      Direct: '268',
+      Organic: '890',
+      Referral: '62',
+      Campaign: '1.2k'
+    }
+  }
+]
+
+const Slides = () => {
+  return (
+    <>
+      {data.map((slide: DataType, index: number) => {
+        return (
+          <div key={index} className={classnames('keen-slider__slide p-6 pbe-3 is-full')}>
+            <Typography variant='h5' className='mbe-0.5 text-[var(--mui-palette-common-white)]'>
+              Website Analytics
+            </Typography>
+            <Typography variant='subtitle2' className='mbe-3 text-[var(--mui-palette-common-white)]'>
+              Total 28.5% Conversion Rate
+            </Typography>
+            <Grid container spacing={4} className='relative'>
+              <Grid size={{ xs: 12, sm: 8 }} className='order-2 sm:order-1'>
+                <div className='flex flex-col gap-4 pbs-5 sm:plb-6'>
+                  <Typography className='font-medium text-[var(--mui-palette-common-white)]'>{slide.title}</Typography>
+                  <Grid container spacing={4}>
+                    {Object.keys(slide.details).map((key: string, index: number) => {
+                      return (
+                        <Grid key={index} size={{ xs: 6 }}>
+                          <div className='flex items-center gap-0.5'>
+                            <CustomAvatar
+                              color='primary'
+                              variant='rounded'
+                              className='font-medium mie-2 text-white bg-[var(--mui-palette-primary-dark)] bs-[30px] is-12'
+                            >
+                              {slide.details[key]}
+                            </CustomAvatar>
+                            <Typography noWrap className='text-[var(--mui-palette-common-white)]'>
+                              {key}
+                            </Typography>
+                          </div>
+                        </Grid>
+                      )
+                    })}
+                  </Grid>
+                </div>
+              </Grid>
+              <Grid size={{ xs: 12, sm: 4 }} className='flex justify-center order-1 sm:order-2'>
+                <img
+                  src={slide.img}
+                  height={150}
+                  className='max-bs-[150px] md:bs-[120px] xl:bs-[150px] drop-shadow-[0_4px_60px_rgba(0,0,0,0.5)] sm:absolute bottom-3 end-0'
+                />
+              </Grid>
+            </Grid>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+const WebsiteAnalyticsSlider = () => {
+  // States
+  const [loaded, setLoaded] = useState<boolean>(false)
+  const [currentSlide, setCurrentSlide] = useState<number>(0)
+
+  // Hooks
+  const theme = useTheme()
+
+  const ResizePlugin: KeenSliderPlugin = slider => {
+    const observer = new ResizeObserver(function () {
+      slider.update()
+    })
+
+    slider.on('created', () => {
+      observer.observe(slider.container)
+    })
+    slider.on('destroyed', () => {
+      observer.unobserve(slider.container)
+    })
+  }
+
+  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
+    {
+      loop: true,
+      rtl: theme.direction === 'rtl',
+      slideChanged(slider) {
+        setCurrentSlide(slider.track.details.rel)
+      },
+      created() {
+        setLoaded(true)
+      }
+    },
+    [ResizePlugin]
+  )
+
+  return (
+    <AppKeenSlider>
+      <Card className='bg-primary'>
+        <div ref={sliderRef} className='keen-slider relative'>
+          {loaded && instanceRef.current && (
+            <div className='swiper-dots absolute top-1 inline-end-6'>
+              {[...Array(instanceRef.current.track.details.slides.length).keys()].map(idx => {
+                return (
+                  <Badge
+                    key={idx}
+                    variant='dot'
+                    component='div'
+                    className={classnames({
+                      active: currentSlide === idx
+                    })}
+                    onClick={() => {
+                      instanceRef.current?.moveToIdx(idx)
+                    }}
+                    sx={{
+                      '& .MuiBadge-dot': {
+                        width: '8px !important',
+                        height: '8px !important',
+                        backgroundColor: 'var(--mui-palette-common-white) !important',
+                        opacity: 0.4
+                      },
+                      '&.active .MuiBadge-dot': {
+                        opacity: 1
+                      }
+                    }}
+                  ></Badge>
+                )
+              })}
+            </div>
+          )}
+          <Slides />
+        </div>
+      </Card>
+    </AppKeenSlider>
+  )
+}
+
+export default WebsiteAnalyticsSlider

src/views/pages/widget-examples/basic/CardFacebook.tsx

@@ -0,0 +1,42 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Avatar from '@mui/material/Avatar'
+
+const CardFacebook = () => {
+  return (
+    <Card className='bg-facebook'>
+      <CardContent>
+        <div className='flex items-center gap-2 mbe-4'>
+          <i className='tabler-brand-facebook text-3xl text-white' />
+          <Typography variant='h5' className='text-white'>
+            Facebook Card
+          </Typography>
+        </div>
+        <Typography className='mbe-4 text-white'>
+          You&#39;ve read about the importance of being courageous, rebellious and imaginative. These are all vital
+          ingredients in an effective.
+        </Typography>
+        <div className='flex align-center justify-between flex-wrap gap-x-4 gap-y-2'>
+          <div className='flex items-center gap-2.5'>
+            <Avatar src='/images/avatars/1.png' />
+            <Typography className='text-white'>Eugene Clarke</Typography>
+          </div>
+          <div className='flex items-center gap-1.5'>
+            <i className='tabler-thumb-up-filled text-xl text-white' />
+            <Typography variant='body2' className='text-white'>
+              2.5k
+            </Typography>
+            <i className='tabler-share text-xl text-white' />
+            <Typography variant='body2' className='text-white'>
+              124
+            </Typography>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CardFacebook

src/views/pages/widget-examples/basic/CardHorizontalRatings.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Grid from '@mui/material/Grid2'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Rating from '@mui/material/Rating'
+import CardActions from '@mui/material/CardActions'
+import Button from '@mui/material/Button'
+
+const CardHorizontalRatings = () => {
+  return (
+    <Card>
+      <Grid container>
+        <Grid size={{ xs: 12, md: 6, lg: 7 }}>
+          <CardContent>
+            <Typography variant='h5' className='mbe-2'>
+              Stumptown Roasters
+            </Typography>
+            <div className='flex flex-wrap gap-x-2 gap-y-1 mbe-2'>
+              <Rating name='read-only' value={4} readOnly />
+              <Typography>4 Star | 98 reviews</Typography>
+            </div>
+            <Typography color='text.secondary'>
+              Before there was a United States of America, there were coffee houses, because how are you supposed to
+              build.
+            </Typography>
+          </CardContent>
+          <CardActions className='card-actions-dense'>
+            <Button>Location</Button>
+            <Button>Reviews</Button>
+          </CardActions>
+        </Grid>
+        <Grid size={{ xs: 12, md: 6, lg: 5 }} className='flex items-center justify-center md:order-[unset] -order-1'>
+          <CardContent className='flex items-center justify-center'>
+            <img src='/images/cards/5.png' height='175' className='rounded' />
+          </CardContent>
+        </Grid>
+      </Grid>
+    </Card>
+  )
+}
+
+export default CardHorizontalRatings

src/views/pages/widget-examples/basic/CardInfluencingInfluencer.tsx

@@ -0,0 +1,32 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import CardActions from '@mui/material/CardActions'
+import Button from '@mui/material/Button'
+
+const CardInfluencingInfluencer = () => {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant='h5' className='mbe-2'>
+          Influencing Influencer
+        </Typography>
+        <Typography className='mbe-4' color='text.secondary'>
+          Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in
+          front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in
+          touch.
+        </Typography>
+        <Typography color='text.secondary'>
+          If you&#39;re in the market for new desktops, notebooks, or PDAs, there are a myriad of choices. Here&#39;s a
+          rundown of some of the best systems available.
+        </Typography>
+      </CardContent>
+      <CardActions className='card-actions-dense'>
+        <Button>Read More</Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default CardInfluencingInfluencer

src/views/pages/widget-examples/basic/CardInfluencingInfluencerWithImg.tsx

@@ -0,0 +1,24 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardMedia from '@mui/material/CardMedia'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+
+const CardInfluencingInfluencerWithImg = () => {
+  return (
+    <Card>
+      <CardMedia image='/images/cards/1.png' className='bs-[200px]' />
+      <CardContent>
+        <Typography variant='h5' className='mbe-2'>
+          Influencing The Influencer
+        </Typography>
+        <Typography color='text.secondary'>
+          Cancun is back, better than ever! Over a hundred Mexico resorts have reopened and the state tourism minister
+          predicts Cancun will draw as many visitors in 2006 as it did two years ago.
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CardInfluencingInfluencerWithImg

src/views/pages/widget-examples/basic/CardLifetimeMembership.tsx

@@ -0,0 +1,83 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import Grid from '@mui/material/Grid2'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+import Button from '@mui/material/Button'
+
+const CardLifetimeMembership = () => {
+  return (
+    <Card>
+      <Grid container>
+        <Grid size={{ xs: 12, sm: 7 }}>
+          <CardContent>
+            <Typography variant='h5' className='mbe-2'>
+              Lifetime Membership
+            </Typography>
+            <Typography color='text.secondary'>
+              Here, I focus on a range of items and features that we use in life without giving them a second thought
+              such as Coca Cola, body muscles and holding ones own breath. Though, most of these notes are not
+              fundamentally necessary, they are such that you can use them for a good laugh, at a drinks party or for
+              picking up women or men.
+            </Typography>
+            <Divider className='mbs-7 mbe-7' />
+            <Grid container>
+              <Grid size={{ xs: 12, sm: 6 }} className='flex flex-col pie-5 gap-[26px]'>
+                <div className='flex items-center gap-2.5'>
+                  <div className='flex'>
+                    <i className='tabler-lock-open text-xl text-textSecondary' />
+                  </div>
+                  <Typography color='text.secondary'>Full Access</Typography>
+                </div>
+                <div className='flex items-center gap-2.5'>
+                  <div className='flex'>
+                    <i className='tabler-user text-xl text-textSecondary' />
+                  </div>
+                  <Typography color='text.secondary'>15 Members</Typography>
+                </div>
+              </Grid>
+              <Grid
+                size={{ xs: 12, sm: 6 }}
+                className='flex flex-col max-sm:mbs-[26px] sm:pis-5 sm:border-is gap-[26px]'
+              >
+                <div className='flex items-center gap-2.5'>
+                  <div className='flex'>
+                    <i className='tabler-lock-open text-xl text-textSecondary' />
+                  </div>
+                  <Typography color='text.secondary'>Access all Features</Typography>
+                </div>
+                <div className='flex items-center gap-2.5'>
+                  <div className='flex'>
+                    <i className='tabler-user text-xl text-textSecondary' />
+                  </div>
+                  <Typography color='text.secondary'>Lifetime Free Update</Typography>
+                </div>
+              </Grid>
+            </Grid>
+          </CardContent>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 5 }}>
+          <CardContent className='flex items-center justify-center bs-full bg-actionHover'>
+            <div className='flex flex-col items-center justify-center gap-2'>
+              <div className='flex items-baseline justify-center'>
+                <Typography variant='h5'>$</Typography>
+                <Typography variant='h1'>899</Typography>
+                <Typography variant='h5'>USD</Typography>
+              </div>
+              <Typography color='text.secondary' className='flex flex-col text-center'>
+                <span>5 Tips For Offshore</span>
+                <span>Software Development</span>
+              </Typography>
+              <Button variant='contained' className='mbs-5'>
+                Contact Now
+              </Button>
+            </div>
+          </CardContent>
+        </Grid>
+      </Grid>
+    </Card>
+  )
+}
+
+export default CardLifetimeMembership

src/views/pages/widget-examples/basic/CardLinkedIn.tsx

@@ -0,0 +1,42 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Avatar from '@mui/material/Avatar'
+
+const CardLinkedIn = () => {
+  return (
+    <Card className='bg-linkedin'>
+      <CardContent>
+        <div className='flex items-center gap-2 mbe-4'>
+          <i className='tabler-brand-linkedin text-3xl text-white' />
+          <Typography variant='h5' className='text-white'>
+            LinkedIn Card
+          </Typography>
+        </div>
+        <Typography className='mbe-4 text-white'>
+          With the Internet spreading like wildfire and reaching every part of our daily life, more and more traffic is
+          directed.
+        </Typography>
+        <div className='flex align-center justify-between flex-wrap gap-x-4 gap-y-2'>
+          <div className='flex items-center gap-2.5'>
+            <Avatar src='/images/avatars/8.png' />
+            <Typography className='text-white'>Anne Burke</Typography>
+          </div>
+          <div className='flex items-center gap-1.5'>
+            <i className='tabler-thumb-up-filled text-xl text-white' />
+            <Typography variant='body2' className='text-white'>
+              1.2k
+            </Typography>
+            <i className='tabler-share text-xl text-white' />
+            <Typography variant='body2' className='text-white'>
+              56
+            </Typography>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CardLinkedIn

src/views/pages/widget-examples/basic/CardMobile.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+import type { MouseEvent } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Grid from '@mui/material/Grid2'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import CardActions from '@mui/material/CardActions'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+
+const CardMobile = () => {
+  // States
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <Card>
+      <Grid container>
+        <Grid size={{ xs: 12, md: 5 }} className='flex items-center justify-center'>
+          <CardContent className='flex items-center justify-center'>
+            <img alt='iPhone 11 Pro' src='/images/cards/4.png' height={175} />
+          </CardContent>
+        </Grid>
+        <Grid size={{ xs: 12, md: 7 }} className='md:border-is border-bs md:border-bs-0'>
+          <CardContent>
+            <Typography variant='h5' className='mbe-2'>
+              Apple iPhone 11 Pro
+            </Typography>
+            <Typography className='mbe-2' color='text.secondary'>
+              Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
+            </Typography>
+            <div className='flex gap-1'>
+              <Typography>Price:</Typography>
+              <Typography className='font-medium'>$899</Typography>
+            </div>
+          </CardContent>
+          <CardActions className='justify-between card-actions-dense'>
+            <Button startIcon={<i className='tabler-shopping-cart' />}>Add to Cart</Button>
+            <IconButton
+              id='share-button'
+              aria-haspopup='true'
+              {...(open && { 'aria-expanded': true, 'aria-controls': 'share-menu' })}
+              onClick={handleClick}
+            >
+              <i className='tabler-share' />
+            </IconButton>
+            <Menu
+              anchorEl={anchorEl}
+              open={open}
+              MenuListProps={{ 'aria-labelledby': 'share-button' }}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={handleClose}>
+                <i className='tabler-brand-facebook text-xl' />
+              </MenuItem>
+              <MenuItem onClick={handleClose}>
+                <i className='tabler-brand-twitter text-xl' />
+              </MenuItem>
+              <MenuItem onClick={handleClose}>
+                <i className='tabler-brand-linkedin text-xl' />
+              </MenuItem>
+              <MenuItem onClick={handleClose}>
+                <i className='tabler-brand-google text-xl' />
+              </MenuItem>
+            </Menu>
+          </CardActions>
+        </Grid>
+      </Grid>
+    </Card>
+  )
+}
+
+export default CardMobile

src/views/pages/widget-examples/basic/CardSupport.tsx

@@ -0,0 +1,28 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Avatar from '@mui/material/Avatar'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+const CardSupport = () => {
+  return (
+    <Card>
+      <CardContent className='flex flex-col items-center text-center'>
+        <Avatar className='mbe-2 is-[56px] bs-[56px]'>
+          <i className='tabler-help-circle text-[32px]' />
+        </Avatar>
+        <Typography variant='h5' className='mbe-2'>
+          Support
+        </Typography>
+        <Typography color='text.secondary' className='mbe-4'>
+          According to us blisters are a very common thing and we come across them very often in our daily lives. It is
+          a very common occurrence like cold or fever depending upon your lifestyle.
+        </Typography>
+        <Button variant='contained'>Contact Now</Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CardSupport

src/views/pages/widget-examples/basic/CardTwitter.tsx

@@ -0,0 +1,42 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Avatar from '@mui/material/Avatar'
+
+const CardTwitter = () => {
+  return (
+    <Card className='bg-twitter'>
+      <CardContent>
+        <div className='flex items-center gap-2 mbe-4'>
+          <i className='tabler-brand-twitter text-3xl text-white' />
+          <Typography variant='h5' className='text-white'>
+            Twitter Card
+          </Typography>
+        </div>
+        <Typography className='mbe-4 text-white'>
+          Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as
+          well.
+        </Typography>
+        <div className='flex align-center justify-between flex-wrap gap-x-4 gap-y-2'>
+          <div className='flex items-center gap-2.5'>
+            <Avatar src='/images/avatars/6.png' />
+            <Typography className='text-white'>Mary Vaughn</Typography>
+          </div>
+          <div className='flex items-center gap-1.5'>
+            <i className='tabler-thumb-up text-xl text-white' />
+            <Typography variant='body2' className='text-white'>
+              1.6k
+            </Typography>
+            <i className='tabler-share text-xl text-white' />
+            <Typography variant='body2' className='text-white'>
+              98
+            </Typography>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CardTwitter

src/views/pages/widget-examples/basic/CardUser.tsx

@@ -0,0 +1,45 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardMedia from '@mui/material/CardMedia'
+import CardContent from '@mui/material/CardContent'
+import Avatar from '@mui/material/Avatar'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import AvatarGroup from '@mui/material/AvatarGroup'
+
+const CardUser = () => {
+  return (
+    <Card>
+      <CardMedia image='/images/cards/2.png' className='bs-[180px]' />
+      <CardContent className='relative'>
+        <Avatar
+          src='/images/avatars/3.png'
+          alt='Robert Meyer'
+          className='is-[78px] bs-[78px] border-[5px] border-backgroundPaper absolute start-[11px] block-start-[-39px]'
+        />
+        <div className='flex justify-between items-center flex-wrap gap-x-4 gap-y-2 mbe-5 mbs-[30px]'>
+          <div className='flex flex-col items-start'>
+            <Typography variant='h5'>Robert Meyer</Typography>
+            <Typography variant='body2'>London, UK</Typography>
+          </div>
+          <Button variant='contained'>Send Request</Button>
+        </div>
+        <div className='flex justify-between items-center flex-wrap gap-x-4 gap-y-2'>
+          <Typography variant='subtitle2' color='text.disabled'>
+            18 mutual friends
+          </Typography>
+          <AvatarGroup max={4}>
+            <Avatar src='/images/avatars/1.png' />
+            <Avatar src='/images/avatars/5.png' />
+            <Avatar src='/images/avatars/4.png' />
+            <Avatar src='/images/avatars/6.png' />
+            <Avatar src='/images/avatars/7.png' />
+            <Avatar src='/images/avatars/8.png' />
+          </AvatarGroup>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CardUser

src/views/pages/widget-examples/basic/CardVerticalRatings.tsx

@@ -0,0 +1,37 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Rating from '@mui/material/Rating'
+import CardActions from '@mui/material/CardActions'
+import Button from '@mui/material/Button'
+
+const CardVerticalRatings = () => {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant='h5' className='mbe-2'>
+          The Best Answers
+        </Typography>
+        <div className='flex flex-wrap gap-x-2 gap-y-1 mbe-2'>
+          <Rating name='read-only' value={4} readOnly />
+          <Typography>4 Star | 98 reviews</Typography>
+        </div>
+        <Typography color='text.secondary' className='mbe-4'>
+          If you are looking for a new way to promote your business that won&#39;t cost you more money, maybe printing
+          is one of the options you won&#39;t resist.
+        </Typography>
+        <Typography color='text.secondary'>
+          Printing is a widely use process in making printed materials that are used for advertising. It become fast,
+          easy and simple.
+        </Typography>
+      </CardContent>
+      <CardActions className='card-actions-dense'>
+        <Button>Location</Button>
+        <Button>Review</Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default CardVerticalRatings

src/views/pages/widget-examples/basic/CardWatch.tsx

@@ -0,0 +1,28 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardMedia from '@mui/material/CardMedia'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+const CardWatch = () => {
+  return (
+    <Card>
+      <CardMedia image='/images/cards/6.png' className='bs-[140px]' />
+      <CardContent>
+        <Typography variant='h5' className='mbe-2'>
+          Apple Watch
+        </Typography>
+        <Typography className='mbe-2'>$249.40</Typography>
+        <Typography color='text.secondary'>
+          3.1GHz 6-core 10th-generation Intel Core i5 processor, Turbo Boost up to 4.5GHz
+        </Typography>
+      </CardContent>
+      <Button variant='contained' fullWidth className='rounded-none'>
+        Add to Cart
+      </Button>
+    </Card>
+  )
+}
+
+export default CardWatch

src/views/pages/widget-examples/basic/CardWithCollapse.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardMedia from '@mui/material/CardMedia'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import CardActions from '@mui/material/CardActions'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import Collapse from '@mui/material/Collapse'
+import Divider from '@mui/material/Divider'
+
+const CardWithCollapse = () => {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <Card>
+      <CardMedia image='/images/cards/3.png' className='bs-[185px]' />
+      <CardContent>
+        <Typography variant='h5' className='mbe-3'>
+          Popular Uses Of The Internet
+        </Typography>
+        <Typography color='text.secondary'>
+          Although cards can support multiple actions, UI controls, and an overflow menu.
+        </Typography>
+      </CardContent>
+      <CardActions className='justify-between card-actions-dense'>
+        <Button onClick={() => setExpanded(!expanded)}>Details</Button>
+        <IconButton onClick={() => setExpanded(!expanded)}>
+          <i className={expanded ? 'tabler-chevron-up' : 'tabler-chevron-down'} />
+        </IconButton>
+      </CardActions>
+      <Collapse in={expanded} timeout={300}>
+        <Divider />
+        <CardContent>
+          <Typography color='text.secondary'>
+            I&#39;m a thing. But, like most politicians, he promised more than he could deliver. You won&#39;t have time
+            for sleeping, soldier, not with all the bed making you&#39;ll be doing. Then we&#39;ll go with that data
+            file! Hey, you add a one and two zeros to that or we walk! You&#39;re going to do his laundry? I&#39;ve got
+            to find a way to escape.
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  )
+}
+
+export default CardWithCollapse

src/views/pages/widget-examples/basic/CardWithTabs.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+import type { SyntheticEvent } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import TabContext from '@mui/lab/TabContext'
+import TabList from '@mui/lab/TabList'
+import Tab from '@mui/material/Tab'
+import TabPanel from '@mui/lab/TabPanel'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+const CardWithTabs = () => {
+  // ** State
+  const [value, setValue] = useState<string>('1')
+
+  const handleChange = (event: SyntheticEvent, newValue: string) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Card>
+      <TabContext value={value}>
+        <TabList onChange={handleChange} aria-label='card navigation examples'>
+          <Tab value='1' label='Item One' />
+          <Tab value='2' label='Item Two' />
+          <Tab value='3' label='Item Three' />
+        </TabList>
+        <CardContent>
+          <TabPanel value='1'>
+            <Typography variant='h5' className='mbe-2'>
+              Header One
+            </Typography>
+            <Typography color='text.secondary' className='mbe-6'>
+              Pudding tiramisu caramels. Gingerbread gummies danish chocolate bar toffee marzipan. Wafer wafer cake
+              powder danish oat cake.
+            </Typography>
+            <Button variant='contained'>Button One</Button>
+          </TabPanel>
+          <TabPanel value='2'>
+            <Typography variant='h5' className='mbe-2'>
+              Header Two
+            </Typography>
+            <Typography color='text.secondary' className='mbe-6'>
+              Dragée chupa chups soufflé cheesecake jelly tootsie roll cupcake marzipan. Carrot cake sweet roll gummi
+              bears caramels jelly beans.
+            </Typography>
+            <Button variant='contained'>Button Two</Button>
+          </TabPanel>
+          <TabPanel value='3'>
+            <Typography variant='h5' className='mbe-2'>
+              Header Three
+            </Typography>
+            <Typography color='text.secondary' className='mbe-6'>
+              Icing cake macaroon macaroon jelly chocolate bar. Chupa chups dessert dessert soufflé chocolate bar
+              jujubes gummi bears lollipop.
+            </Typography>
+            <Button variant='contained'>Button Three</Button>
+          </TabPanel>
+        </CardContent>
+      </TabContext>
+    </Card>
+  )
+}
+
+export default CardWithTabs

src/views/pages/widget-examples/basic/CardWithTabsCenter.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+import type { SyntheticEvent } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import TabContext from '@mui/lab/TabContext'
+import TabList from '@mui/lab/TabList'
+import Tab from '@mui/material/Tab'
+import TabPanel from '@mui/lab/TabPanel'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+const CardWithTabsCenter = () => {
+  // ** State
+  const [value, setValue] = useState<string>('1')
+
+  const handleChange = (event: SyntheticEvent, newValue: string) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Card>
+      <TabContext value={value}>
+        <TabList centered onChange={handleChange} aria-label='card navigation examples'>
+          <Tab value='1' label='Item One' />
+          <Tab value='2' label='Item Two' />
+          <Tab value='3' label='Item Three' />
+        </TabList>
+        <CardContent>
+          <TabPanel value='1' className='text-center'>
+            <Typography variant='h5' className='mbe-2'>
+              Header One
+            </Typography>
+            <Typography color='text.secondary' className='mbe-6'>
+              Pudding tiramisu caramels. Gingerbread gummies danish chocolate bar toffee marzipan. Wafer wafer cake
+              powder danish oat cake.
+            </Typography>
+            <Button variant='contained'>Button One</Button>
+          </TabPanel>
+          <TabPanel value='2' className='text-center'>
+            <Typography variant='h5' className='mbe-2'>
+              Header Two
+            </Typography>
+            <Typography color='text.secondary' className='mbe-6'>
+              Dragée chupa chups soufflé cheesecake jelly tootsie roll cupcake marzipan. Carrot cake sweet roll gummi
+              bears caramels jelly beans.
+            </Typography>
+            <Button variant='contained'>Button Two</Button>
+          </TabPanel>
+          <TabPanel value='3' className='text-center'>
+            <Typography variant='h5' className='mbe-2'>
+              Header Three
+            </Typography>
+            <Typography color='text.secondary' className='mbe-6'>
+              Icing cake macaroon macaroon jelly chocolate bar. Chupa chups dessert dessert soufflé chocolate bar
+              jujubes gummi bears lollipop.
+            </Typography>
+            <Button variant='contained'>Button Three</Button>
+          </TabPanel>
+        </CardContent>
+      </TabContext>
+    </Card>
+  )
+}
+
+export default CardWithTabsCenter

src/views/pages/widget-examples/charts/CarrierPerformance.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const colors = {
+  series1: '#7367F0',
+  series2: '#8F85F3',
+  series3: '#ABA4F6'
+}
+
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: 'Delivery rate',
+    type: 'column',
+    data: [5, 4.5, 4, 3]
+  },
+  {
+    name: 'Delivery time',
+    type: 'column',
+    data: [4, 3.5, 3, 2.5]
+  },
+  {
+    name: 'Delivery exceptions',
+    type: 'column',
+    data: [3.5, 3, 2.5, 2]
+  }
+]
+
+const CarrierPerformance = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      stacked: false,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    tooltip: {
+      enabled: false
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '50%',
+        borderRadius: 4
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      tickAmount: 10,
+      categories: ['Carrier A', 'Carrier B', 'Carrier C', 'Carrier D'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      tickAmount: 4,
+      max: 5,
+      min: 0,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        },
+        formatter(o: any) {
+          return o
+        }
+      }
+    },
+    legend: {
+      markers: {
+        width: 8,
+        height: 8,
+        offsetX: -3,
+        radius: 12
+      },
+      height: 33,
+      offsetY: 10,
+      itemMargin: {
+        horizontal: 10,
+        vertical: 0
+      },
+      fontSize: '13px',
+      fontFamily: 'Public Sans',
+      fontWeight: 400,
+      labels: {
+        colors: bodyColor,
+        useSeriesColors: false
+      }
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6
+    },
+    colors: [colors.series1, colors.series2, colors.series3],
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Carrier Performance' action={<OptionMenu options={['View More', 'Delete']} />} />
+      <CardContent>
+        <AppReactApexCharts
+          id='carrier-performance'
+          type='bar'
+          height={360}
+          width='100%'
+          series={series}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CarrierPerformance

src/views/pages/widget-examples/charts/DeliveryExceptions.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+const deliveryExceptionsChartSeries = [13, 25, 22, 40]
+
+const DeliveryExceptions = () => {
+  // Hooks
+  const theme = useTheme()
+
+  const options: ApexOptions = {
+    labels: ['Incorrect address', 'Weather conditions', 'Federal Holidays', 'Damage during transit'],
+    stroke: {
+      width: 0
+    },
+    colors: [
+      'var(--mui-palette-success-main)',
+      'rgba(var(--mui-palette-success-mainChannel) / 0.8)',
+      'rgba(var(--mui-palette-success-mainChannel) / 0.6)',
+      'rgba(var(--mui-palette-success-mainChannel) / 0.4)'
+    ],
+    dataLabels: {
+      enabled: false,
+      formatter(val: string) {
+        return `${Number.parseInt(val)}%`
+      }
+    },
+    legend: {
+      show: true,
+      position: 'bottom',
+      offsetY: 10,
+      markers: {
+        width: 8,
+        height: 8,
+        offsetY: 1,
+        offsetX: theme.direction === 'rtl' ? 8 : -4
+      },
+      itemMargin: {
+        horizontal: 15,
+        vertical: 5
+      },
+      fontSize: '13px',
+      fontWeight: 400,
+      labels: {
+        colors: 'var()',
+        useSeriesColors: false
+      }
+    },
+    grid: {
+      padding: {
+        top: 15
+      }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '75%',
+          labels: {
+            show: true,
+            value: {
+              fontSize: '24px',
+              color: 'var(--mui-palette-text-primary)',
+              fontWeight: 500,
+              offsetY: -20
+            },
+            name: { offsetY: 20 },
+            total: {
+              show: true,
+              fontSize: '0.9375rem',
+              fontWeight: 400,
+              label: 'AVG. Exceptions',
+              color: 'var(--mui-palette-text-secondary)',
+              formatter() {
+                return '30%'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <Card className='bs-full'>
+      <CardHeader title='Delivery exceptions' action={<OptionMenu options={['Select All', 'Refresh', 'Share']} />} />
+      <CardContent>
+        <AppReactApexCharts
+          type='donut'
+          height={370}
+          width='100%'
+          series={deliveryExceptionsChartSeries}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default DeliveryExceptions

src/views/pages/widget-examples/charts/EarningReports.tsx

@@ -0,0 +1,171 @@
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+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 LinearProgress from '@mui/material/LinearProgress'
+import Chip from '@mui/material/Chip'
+
+// Third Party Imports
+import classnames from 'classnames'
+import type { ApexOptions } from 'apexcharts'
+
+// Types Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type DataType = {
+  stats: string
+  title: string
+  progress: number
+  avatarIcon: string
+  avatarColor?: ThemeColor
+  progressColor?: ThemeColor
+}
+
+// Vars
+const series = [{ data: [37, 76, 65, 41, 99, 53, 70] }]
+
+const data: DataType[] = [
+  {
+    title: 'Earnings',
+    progress: 64,
+    stats: '$545.69',
+    progressColor: 'primary',
+    avatarColor: 'primary',
+    avatarIcon: 'tabler-currency-dollar'
+  },
+  {
+    title: 'Profit',
+    progress: 59,
+    stats: '$256.34',
+    progressColor: 'info',
+    avatarColor: 'info',
+    avatarIcon: 'tabler-chart-pie-2'
+  },
+  {
+    title: 'Expense',
+    progress: 22,
+    stats: '$74.19',
+    progressColor: 'error',
+    avatarColor: 'error',
+    avatarIcon: 'tabler-brand-paypal'
+  }
+]
+
+const EarningReports = () => {
+  // Vars
+  const primaryColorWithOpacity = 'var(--mui-palette-primary-lightOpacity)'
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    tooltip: { enabled: false },
+    grid: {
+      show: false,
+      padding: {
+        top: -31,
+        left: 0,
+        right: 0,
+        bottom: -9
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 4,
+        distributed: true,
+        columnWidth: '42%'
+      }
+    },
+    legend: { show: false },
+    dataLabels: { enabled: false },
+    colors: [
+      primaryColorWithOpacity,
+      primaryColorWithOpacity,
+      primaryColorWithOpacity,
+      primaryColorWithOpacity,
+      'var(--mui-palette-primary-main)',
+      primaryColorWithOpacity,
+      primaryColorWithOpacity
+    ],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    xaxis: {
+      categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+      labels: {
+        style: {
+          fontSize: '13px',
+          colors: 'var(--mui-palette-text-disabled)'
+        }
+      }
+    },
+    yaxis: { show: false }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Earning Reports'
+        subheader='Weekly Earnings Overview'
+        action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
+        className='pbe-0'
+      />
+      <CardContent className='flex flex-col gap-5 max-md:gap-5 max-[1015px]:gap-[62px] max-[1051px]:gap-10 max-[1200px]:gap-5 max-[1310px]:gap-10'>
+        <div className='flex flex-col sm:flex-row items-center justify-between gap-8'>
+          <div className='flex flex-col gap-3 is-full sm:is-[unset]'>
+            <div className='flex items-center gap-2.5'>
+              <Typography variant='h2'>$468</Typography>
+              <Chip size='small' variant='tonal' color='success' label='+4.2%' />
+            </div>
+            <Typography variant='body2' className='text-balance'>
+              You informed of this week compared to last week
+            </Typography>
+          </div>
+          <AppReactApexCharts type='bar' height={163} width='100%' series={series} options={options} />
+        </div>
+        <div className='flex flex-col sm:flex-row gap-6 p-5 border rounded'>
+          {data.map((item, index) => (
+            <div key={index} className='flex flex-col gap-2 is-full'>
+              <div className='flex items-center gap-2'>
+                <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={26}>
+                  <i className={classnames(item.avatarIcon, 'text-lg')} />
+                </CustomAvatar>
+                <Typography variant='h6' className='leading-6 font-normal'>
+                  {item.title}
+                </Typography>
+              </div>
+              <Typography variant='h4'>{item.stats}</Typography>
+              <LinearProgress
+                value={item.progress}
+                variant='determinate'
+                color={item.progressColor}
+                className='max-bs-1'
+              />
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default EarningReports

src/views/pages/widget-examples/charts/EarningReportsWithTabs.tsx

@@ -0,0 +1,269 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+import type { SyntheticEvent } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Tab from '@mui/material/Tab'
+import TabList from '@mui/lab/TabList'
+import TabPanel from '@mui/lab/TabPanel'
+import TabContext from '@mui/lab/TabContext'
+import Typography from '@mui/material/Typography'
+import type { Theme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import classnames from 'classnames'
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type ApexChartSeries = NonNullable<ApexOptions['series']>
+type ApexChartSeriesData = Exclude<ApexChartSeries[0], number>
+
+type TabCategory = 'orders' | 'sales' | 'profit' | 'income'
+
+type TabType = {
+  type: TabCategory
+  avatarIcon: string
+  series: ApexChartSeries
+}
+
+// Vars
+const tabData: TabType[] = [
+  {
+    type: 'orders',
+    avatarIcon: 'tabler-shopping-cart',
+    series: [{ data: [28, 10, 46, 38, 15, 30, 35, 28, 8] }]
+  },
+  {
+    type: 'sales',
+    avatarIcon: 'tabler-chart-bar',
+    series: [{ data: [35, 25, 15, 40, 42, 25, 48, 8, 30] }]
+  },
+  {
+    type: 'profit',
+    avatarIcon: 'tabler-currency-dollar',
+    series: [{ data: [10, 22, 27, 33, 42, 32, 27, 22, 8] }]
+  },
+  {
+    type: 'income',
+    avatarIcon: 'tabler-chart-pie-2',
+    series: [{ data: [5, 9, 12, 18, 20, 25, 30, 36, 48] }]
+  }
+]
+
+const renderTabs = (value: TabCategory) => {
+  return tabData.map((item, index) => (
+    <Tab
+      key={index}
+      value={item.type}
+      className='mie-4'
+      label={
+        <div
+          className={classnames(
+            'flex flex-col items-center justify-center gap-2 is-[110px] bs-[100px] border rounded-xl',
+            item.type === value ? 'border-solid border-[var(--mui-palette-primary-main)]' : 'border-dashed'
+          )}
+        >
+          <CustomAvatar variant='rounded' skin='light' size={38} {...(item.type === value && { color: 'primary' })}>
+            <i className={classnames('text-[22px]', { 'text-textSecondary': item.type !== value }, item.avatarIcon)} />
+          </CustomAvatar>
+          <Typography className='font-medium capitalize' color='text.primary'>
+            {item.type}
+          </Typography>
+        </div>
+      }
+    />
+  ))
+}
+
+const renderTabPanels = (value: TabCategory, theme: Theme, options: ApexOptions, colors: string[]) => {
+  return tabData.map((item, index) => {
+    const max = Math.max(...((item.series[0] as ApexChartSeriesData).data as number[]))
+    const seriesIndex = ((item.series[0] as ApexChartSeriesData).data as number[]).indexOf(max)
+
+    const finalColors = colors.map((color, i) => (seriesIndex === i ? 'var(--mui-palette-primary-main)' : color))
+
+    return (
+      <TabPanel key={index} value={item.type} className='!p-0'>
+        <AppReactApexCharts
+          type='bar'
+          height={230}
+          width='100%'
+          options={{ ...options, colors: finalColors }}
+          series={item.series}
+        />
+      </TabPanel>
+    )
+  })
+}
+
+const EarningReportsWithTabs = () => {
+  // States
+  const [value, setValue] = useState<TabCategory>('orders')
+
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const disabledText = 'var(--mui-palette-text-disabled)'
+
+  const handleChange = (event: SyntheticEvent, newValue: TabCategory) => {
+    setValue(newValue)
+  }
+
+  const colors = Array(9).fill('var(--mui-palette-primary-lightOpacity)')
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 6,
+        distributed: true,
+        columnWidth: '33%',
+        borderRadiusApplication: 'end',
+        dataLabels: { position: 'top' }
+      }
+    },
+    legend: { show: false },
+    tooltip: { enabled: false },
+    dataLabels: {
+      offsetY: -11,
+      formatter: val => `${val}k`,
+      style: {
+        fontWeight: 500,
+        colors: ['var(--mui-palette-text-primary)'],
+        fontSize: theme.typography.body1.fontSize as string
+      }
+    },
+    colors,
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: -19,
+        left: -4,
+        right: 0,
+        bottom: -11
+      }
+    },
+    xaxis: {
+      axisTicks: { show: false },
+      axisBorder: { color: 'var(--mui-palette-divider)' },
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+      labels: {
+        style: {
+          colors: disabledText,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: theme.typography.body2.fontSize as string
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        offsetX: -18,
+        formatter: val => `$${val}k`,
+        style: {
+          colors: disabledText,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: theme.typography.body2.fontSize as string
+        }
+      }
+    },
+    responsive: [
+      {
+        breakpoint: 1450,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '45%' }
+          }
+        }
+      },
+      {
+        breakpoint: 600,
+        options: {
+          dataLabels: {
+            style: {
+              fontSize: theme.typography.body2.fontSize as string
+            }
+          },
+          plotOptions: {
+            bar: { columnWidth: '58%' }
+          }
+        }
+      },
+      {
+        breakpoint: 500,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '70%' }
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Earning Reports'
+        subheader='Yearly Earnings Overview'
+        action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
+      />
+      <CardContent>
+        <TabContext value={value}>
+          <TabList
+            variant='scrollable'
+            scrollButtons='auto'
+            onChange={handleChange}
+            aria-label='earning report tabs'
+            className='!border-0 mbe-10'
+            sx={{
+              '& .MuiTabs-indicator': { display: 'none !important' },
+              '& .MuiTab-root': { padding: '0 !important', border: '0 !important' }
+            }}
+          >
+            {renderTabs(value)}
+            <Tab
+              disabled
+              value='add'
+              label={
+                <div className='flex flex-col items-center justify-center is-[110px] bs-[100px] border border-dashed rounded-xl'>
+                  <CustomAvatar variant='rounded' size={34}>
+                    <i className='tabler-plus text-textSecondary' />
+                  </CustomAvatar>
+                </div>
+              }
+            />
+          </TabList>
+          {renderTabPanels(value, theme, options, colors)}
+        </TabContext>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default EarningReportsWithTabs

src/views/pages/widget-examples/charts/InterestedTopics.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Grid from '@mui/material/Grid2'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type DataType = {
+  title: string
+  value: number
+  colorClass: string
+}
+
+// Vars
+const series = [
+  {
+    data: [35, 20, 14, 12, 10, 9]
+  }
+]
+
+const data1: DataType[] = [
+  { title: 'UI Design', value: 35, colorClass: 'text-primary' },
+  { title: 'UX Design', value: 20, colorClass: 'text-info' },
+  { title: 'Music', value: 14, colorClass: 'text-success' }
+]
+
+const data2: DataType[] = [
+  { title: 'Animation', value: 12, colorClass: 'text-secondary' },
+  { title: 'React', value: 10, colorClass: 'text-error' },
+  { title: 'SEO', value: 9, colorClass: 'text-warning' }
+]
+
+const labels = ['UI Design', 'UX Design', 'Music', 'Animation', 'React', 'SEO']
+
+const InterestedTopics = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        barHeight: '70%',
+        distributed: true,
+        borderRadius: 7,
+        borderRadiusApplication: 'end'
+      }
+    },
+
+    colors: [
+      'var(--mui-palette-primary-main)',
+      'var(--mui-palette-info-main)',
+      'var(--mui-palette-success-main)',
+      'var(--mui-palette-secondary-main)',
+      'var(--mui-palette-error-main)',
+      'var(--mui-palette-warning-main)'
+    ],
+    grid: {
+      strokeDashArray: 8,
+      borderColor: 'var(--mui-palette-divider)',
+      xaxis: {
+        lines: { show: true }
+      },
+      yaxis: {
+        lines: { show: false }
+      },
+      padding: {
+        top: -25,
+        left: 21,
+        right: 25,
+        bottom: 0
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      offsetY: 8,
+      style: {
+        colors: ['#fff'],
+        fontWeight: 500,
+        fontSize: '0.8125rem'
+      },
+      formatter(val: string, opt: any) {
+        return labels[opt.dataPointIndex]
+      }
+    },
+    tooltip: {
+      enabled: true,
+      style: {
+        fontSize: '0.75rem'
+      },
+      onDatasetHover: {
+        highlightDataSeries: false
+      }
+    },
+    legend: { show: false },
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    xaxis: {
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+      categories: ['6', '5', '4', '3', '2', '1'],
+      labels: {
+        formatter: val => `${val}%`,
+        style: {
+          fontSize: '0.8125rem',
+          colors: 'var(--mui-palette-text-disabled)'
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        align: theme.direction === 'rtl' ? 'right' : 'left',
+        style: {
+          fontWeight: 500,
+          fontSize: '0.8125rem',
+          colors: 'var(--mui-palette-text-disabled)'
+        },
+        offsetX: theme.direction === 'rtl' ? -15 : -30
+      }
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Topic you are interested in'
+        action={<OptionMenu options={['Refresh', 'Update', 'Share']} />}
+      />
+      <CardContent>
+        <Grid container>
+          <Grid size={{ xs: 12, sm: 6 }} className='max-sm:mbe-6'>
+            <AppReactApexCharts type='bar' height={296} width='100%' series={series} options={options} />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }} alignSelf='center'>
+            <div className='flex justify-around items-start'>
+              <div className='flex flex-col gap-y-12'>
+                {data1.map((item, i) => (
+                  <div key={i} className='flex gap-2'>
+                    <i className={classnames('tabler-circle-filled text-xs m-[5px]', item.colorClass)} />
+                    <div>
+                      <Typography>{item.title}</Typography>
+                      <Typography variant='h5'>{`${item.value}%`}</Typography>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className='flex flex-col gap-y-12'>
+                {data2.map((item, i) => (
+                  <div key={i} className='flex gap-2'>
+                    <i className={classnames('tabler-circle-filled text-xs m-[5px]', item.colorClass)} />
+                    <div>
+                      <Typography>{item.title}</Typography>
+                      <Typography variant='h5'>{`${item.value}%`}</Typography>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default InterestedTopics

src/views/pages/widget-examples/charts/ProjectStatus.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+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 { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type DataType = {
+  title: string
+  amount: string
+  trendDiff: number
+  trend?: 'positive' | 'negative'
+}
+
+// Vars
+const series = [
+  { data: [2000, 2000, 4000, 4000, 3050, 3050, 2050, 2050, 3050, 3050, 4700, 4700, 2750, 2750, 5700, 5700] }
+]
+
+const data: DataType[] = [
+  {
+    title: 'Donates',
+    trend: 'negative',
+    amount: '$756.26',
+    trendDiff: 139.34
+  },
+  {
+    title: 'Podcasts',
+    trendDiff: 576.24,
+    amount: '$2,207.03'
+  }
+]
+
+const ProjectStatus = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const primaryColor = theme.palette.primary.main
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      zoom: {
+        enabled: false
+      }
+    },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    stroke: {
+      width: 4,
+      curve: 'straight'
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        opacityTo: 0,
+        opacityFrom: 1,
+        shadeIntensity: 1,
+        stops: [0, 100],
+        colorStops: [
+          [
+            {
+              offset: 0,
+              opacity: 0.4,
+              color: primaryColor
+            },
+            {
+              offset: 100,
+              opacity: 0.1,
+              color: 'var(--mui-palette-background-paper)'
+            }
+          ]
+        ]
+      }
+    },
+    theme: {
+      monochrome: {
+        enabled: true,
+        shadeTo: 'light',
+        shadeIntensity: 1,
+        color: primaryColor
+      }
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: -42,
+        left: 0,
+        right: 0,
+        bottom: 30
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: { show: false }
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Project Status' action={<OptionMenu options={['Share', 'Refresh', 'Update']} />} />
+      <CardContent className='flex flex-col gap-6'>
+        <div className='flex items-center gap-4'>
+          <CustomAvatar skin='light' variant='rounded' color='primary'>
+            <i className='tabler-currency-dollar' />
+          </CustomAvatar>
+          <div className='flex justify-between items-center is-full'>
+            <div className='flex flex-col'>
+              <Typography className='font-medium' color='text.primary'>
+                $4,3742
+              </Typography>
+              <Typography variant='body2'>Your Earnings</Typography>
+            </div>
+            <Typography className='font-medium' color='success.main'>
+              +10.2%
+            </Typography>
+          </div>
+        </div>
+        <AppReactApexCharts type='area' height={234} width='100%' series={series} options={options} />
+        <div className='flex flex-col gap-4'>
+          {data.map((item: DataType, index: number) => (
+            <div key={index} className='flex items-center justify-between gap-4'>
+              <Typography className='font-medium' color='text.primary'>
+                {item.title}
+              </Typography>
+              <div className='flex items-center gap-4'>
+                <Typography>{item.amount}</Typography>
+                <Typography color={`${item.trend === 'negative' ? 'error' : 'success'}.main`}>
+                  {`${item.trend === 'negative' ? '-' : '+'}${item.trendDiff}`}
+                </Typography>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ProjectStatus

src/views/pages/widget-examples/charts/RevenueReport.tsx

@@ -0,0 +1,286 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+import type { MouseEvent } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid2'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const yearOptions = [new Date().getFullYear() - 1, new Date().getFullYear() - 2, new Date().getFullYear() - 3]
+
+const barSeries = [
+  { name: 'Earning', data: [252, 203, 152, 173, 235, 299, 235, 252, 106] },
+  { name: 'Expense', data: [-128, -157, -190, -163, -89, -51, -89, -136, -190] }
+]
+
+const lineSeries = [
+  { name: 'Last Month', data: [20, 10, 30, 16, 24, 5, 30, 23, 28, 5, 30] },
+  { name: 'This Month', data: [50, 40, 60, 46, 54, 35, 70, 53, 58, 35, 60] }
+]
+
+const RevenueReport = () => {
+  // States
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const disabledText = 'var(--mui-palette-text-disabled)'
+
+  const barOptions: ApexOptions = {
+    chart: {
+      stacked: true,
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    stroke: {
+      width: 6,
+      colors: ['var(--mui-palette-background-paper)']
+    },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-warning-main)'],
+    legend: {
+      offsetY: -4,
+      offsetX: -35,
+      position: 'top',
+      horizontalAlign: 'left',
+      fontSize: '13px',
+      fontFamily: theme.typography.fontFamily,
+      labels: { colors: 'var(--mui-palette-text-secondary)' },
+      itemMargin: {
+        horizontal: 9
+      },
+      markers: {
+        width: 12,
+        height: 12,
+        radius: 10,
+        offsetY: 1,
+        offsetX: theme.direction === 'rtl' ? 7 : -4
+      }
+    },
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 7,
+        columnWidth: '40%',
+        borderRadiusApplication: 'around',
+        borderRadiusWhenStacked: 'all'
+      }
+    },
+    grid: {
+      borderColor: 'var(--mui-palette-divider)',
+      yaxis: {
+        lines: { show: false }
+      },
+      padding: {
+        left: -6,
+        right: -11,
+        bottom: -11
+      }
+    },
+    xaxis: {
+      axisTicks: { show: false },
+      crosshairs: { opacity: 0 },
+      axisBorder: { show: false },
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+      labels: {
+        style: {
+          colors: disabledText,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: theme.typography.body2.fontSize as string
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        offsetX: -14,
+        style: {
+          colors: disabledText,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: theme.typography.body2.fontSize as string
+        }
+      }
+    },
+    responsive: [
+      {
+        breakpoint: theme.breakpoints.values.xl,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '48%' }
+          }
+        }
+      },
+      {
+        breakpoint: 1380,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '55%' }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.lg,
+        options: {
+          plotOptions: {
+            bar: { borderRadius: 7 }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.md,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '50%' }
+          }
+        }
+      },
+      {
+        breakpoint: 680,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '60%' }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.sm,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '55%' }
+          }
+        }
+      },
+      {
+        breakpoint: 450,
+        options: {
+          plotOptions: {
+            bar: { borderRadius: 6, columnWidth: '65%' }
+          }
+        }
+      }
+    ]
+  }
+
+  const lineOptions: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      zoom: {
+        enabled: false
+      }
+    },
+    stroke: {
+      width: [1, 2],
+      curve: 'smooth',
+      dashArray: [5, 0]
+    },
+    colors: ['var(--mui-palette-divider)', 'var(--mui-palette-primary-main)'],
+    legend: {
+      show: false
+    },
+    grid: {
+      padding: {
+        top: -28,
+        left: -11,
+        right: 0,
+        bottom: -15
+      },
+      yaxis: {
+        lines: { show: false }
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: {
+      labels: { show: false }
+    }
+  }
+
+  return (
+    <Card>
+      <Grid container>
+        <Grid size={{ xs: 12, sm: 8 }} className='border-r'>
+          <CardHeader title='Revenue Report' />
+          <CardContent>
+            <AppReactApexCharts type='bar' height={319} width='100%' series={barSeries} options={barOptions} />
+          </CardContent>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 4 }}>
+          <CardContent className='flex flex-col items-center justify-center min-bs-full gap-8'>
+            <Button
+              size='small'
+              variant='tonal'
+              onClick={handleClick}
+              endIcon={<i className='tabler-chevron-down text-xl' />}
+            >
+              {new Date().getFullYear()}
+            </Button>
+            <Menu
+              keepMounted
+              anchorEl={anchorEl}
+              onClose={handleClose}
+              open={Boolean(anchorEl)}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              {yearOptions.map((year: number) => (
+                <MenuItem key={year} onClick={handleClose}>
+                  {year}
+                </MenuItem>
+              ))}
+            </Menu>
+            <div className='flex flex-col items-center'>
+              <Typography variant='h3'>$25,825</Typography>
+              <Typography>
+                <span className='font-medium text-textPrimary'>Budget: </span>56,800
+              </Typography>
+            </div>
+            <AppReactApexCharts type='line' height={80} width='100%' series={lineSeries} options={lineOptions} />
+            <Button variant='contained'>Increase Budget</Button>
+          </CardContent>
+        </Grid>
+      </Grid>
+    </Card>
+  )
+}
+
+export default RevenueReport

src/views/pages/widget-examples/charts/Sales.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [
+  { name: 'Sales', data: [32, 27, 27, 30, 25, 25] },
+  { name: 'Visits', data: [25, 35, 20, 20, 20, 20] }
+]
+
+const Sales = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const textDisabled = 'var(--mui-palette-text-disabled)'
+  const divider = 'var(--mui-palette-divider)'
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-info-main)'],
+    plotOptions: {
+      radar: {
+        polygons: {
+          connectorColors: divider,
+          strokeColors: divider
+        }
+      }
+    },
+    stroke: { width: 0 },
+    fill: {
+      opacity: [1, 0.85]
+    },
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    markers: { size: 0 },
+    legend: {
+      fontSize: '13px',
+      labels: { colors: 'var(--mui-palette-text-secondary)' },
+      markers: { offsetY: -1, offsetX: theme.direction === 'rtl' ? 7 : -4 },
+      itemMargin: { horizontal: 9 }
+    },
+    grid: { show: false },
+    xaxis: {
+      labels: {
+        show: true,
+        style: {
+          fontSize: '13px',
+          colors: [textDisabled, textDisabled, textDisabled, textDisabled, textDisabled, textDisabled]
+        }
+      }
+    },
+    yaxis: { show: false }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Sales'
+        subheader='Last 6 Months'
+        action={<OptionMenu options={['Last Month', 'Last 6 months', 'Last Year']} />}
+      />
+      <CardContent>
+        <AppReactApexCharts type='radar' height={299} width='100%' series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default Sales

src/views/pages/widget-examples/charts/SupportTracker.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+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 { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import classnames from 'classnames'
+import type { ApexOptions } from 'apexcharts'
+
+// Types Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type DataType = {
+  title: string
+  subtitle: string
+  avatarIcon: string
+  avatarColor?: ThemeColor
+}
+
+// Vars
+const data: DataType[] = [
+  {
+    title: 'New Tickets',
+    subtitle: '142',
+    avatarColor: 'primary',
+    avatarIcon: 'tabler-ticket'
+  },
+  {
+    title: 'Open Tickets',
+    subtitle: '28',
+    avatarColor: 'info',
+    avatarIcon: 'tabler-check'
+  },
+  {
+    title: 'Response Time',
+    subtitle: '1 Day',
+    avatarColor: 'warning',
+    avatarIcon: 'tabler-clock'
+  }
+]
+
+const SupportTracker = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const disabledText = 'var(--mui-palette-text-disabled)'
+
+  const options: ApexOptions = {
+    stroke: { dashArray: 10 },
+    labels: ['Completed Task'],
+    colors: ['var(--mui-palette-primary-main)'],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shade: 'dark',
+        opacityTo: 0.5,
+        opacityFrom: 1,
+        shadeIntensity: 0.5,
+        stops: [30, 70, 100],
+        inverseColors: false,
+        gradientToColors: ['var(--mui-palette-primary-main)']
+      }
+    },
+    plotOptions: {
+      radialBar: {
+        endAngle: 130,
+        startAngle: -140,
+        hollow: { size: '60%' },
+        track: { background: 'transparent' },
+        dataLabels: {
+          name: {
+            offsetY: -24,
+            color: disabledText,
+            fontFamily: theme.typography.fontFamily,
+            fontSize: theme.typography.body2.fontSize as string
+          },
+          value: {
+            offsetY: 8,
+            fontWeight: 500,
+            formatter: value => `${value}%`,
+            color: 'var(--mui-palette-text-primary)',
+            fontFamily: theme.typography.fontFamily,
+            fontSize: theme.typography.h2.fontSize as string
+          }
+        }
+      }
+    },
+    grid: {
+      padding: {
+        top: -18,
+        left: 0,
+        right: 0,
+        bottom: 14
+      }
+    },
+    responsive: [
+      {
+        breakpoint: 1380,
+        options: {
+          grid: {
+            padding: {
+              top: 8,
+              left: 12
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 1280,
+        options: {
+          chart: {
+            height: 325
+          },
+          grid: {
+            padding: {
+              top: 12,
+              left: 12
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 1201,
+        options: {
+          chart: {
+            height: 362
+          }
+        }
+      },
+      {
+        breakpoint: 1135,
+        options: {
+          chart: {
+            height: 350
+          }
+        }
+      },
+      {
+        breakpoint: 980,
+        options: {
+          chart: {
+            height: 300
+          }
+        }
+      },
+      {
+        breakpoint: 900,
+        options: {
+          chart: {
+            height: 350
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Support Tracker'
+        subheader='Last 7 Days'
+        action={<OptionMenu options={['Refresh', 'Edit', 'Share']} />}
+      />
+      <CardContent className='flex flex-col sm:flex-row items-center justify-between gap-7'>
+        <div className='flex flex-col gap-6 is-full sm:is-[unset]'>
+          <div className='flex flex-col'>
+            <Typography variant='h2'>164</Typography>
+            <Typography>Total Tickets</Typography>
+          </div>
+          <div className='flex flex-col gap-4 is-full'>
+            {data.map((item, index) => (
+              <div key={index} className='flex items-center gap-4'>
+                <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={34}>
+                  <i className={classnames(item.avatarIcon, 'text-[22px]')} />
+                </CustomAvatar>
+                <div className='flex flex-col'>
+                  <Typography className='font-medium' color='text.primary'>
+                    {item.title}
+                  </Typography>
+                  <Typography variant='body2'>{item.subtitle}</Typography>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <AppReactApexCharts type='radialBar' height={350} width='100%' series={[85]} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SupportTracker

src/views/pages/widget-examples/charts/TotalEarning.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+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 { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import classnames from 'classnames'
+import type { ApexOptions } from 'apexcharts'
+
+// Types Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type DataType = {
+  title: string
+  amount: number
+  subtitle: string
+  avatarIcon: string
+  avatarColor: ThemeColor
+  amountDiff?: 'positive' | 'negative'
+}
+
+// Vars
+const series = [
+  { name: 'Earning', data: [15, 10, 20, 8, 12, 18, 12, 5] },
+  { name: 'Expense', data: [-7, -10, -7, -12, -6, -9, -5, -8] }
+]
+
+const data: DataType[] = [
+  {
+    title: 'Total Revenue',
+    subtitle: 'Client Payment',
+    amount: 126,
+    avatarColor: 'primary',
+    avatarIcon: 'tabler-brand-paypal'
+  },
+  {
+    title: 'Total Sales',
+    subtitle: 'Refund',
+    amount: 98,
+    avatarColor: 'secondary',
+    avatarIcon: 'tabler-currency-dollar'
+  }
+]
+
+const TotalEarning = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const options: ApexOptions = {
+    chart: {
+      stacked: true,
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      zoom: {
+        enabled: false
+      }
+    },
+    legend: { show: false },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    stroke: {
+      width: 5,
+      colors: ['var(--mui-palette-background-paper)']
+    },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-secondary-main)'],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 7,
+        columnWidth: '40%',
+        borderRadiusApplication: 'around',
+        borderRadiusWhenStacked: 'all'
+      }
+    },
+    grid: {
+      borderColor: 'var(--mui-palette-divider)',
+      yaxis: {
+        lines: { show: false }
+      },
+      padding: {
+        top: -56,
+        left: -13,
+        right: 0,
+        bottom: -15
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      crosshairs: { opacity: 0 },
+      axisBorder: { show: false }
+    },
+    yaxis: {
+      labels: { show: false }
+    },
+    responsive: [
+      {
+        breakpoint: theme.breakpoints.values.xl,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '50%' }
+          }
+        }
+      },
+      {
+        breakpoint: 1380,
+        options: {
+          plotOptions: {
+            bar: {
+              borderRadius: 5,
+              columnWidth: '55%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.lg,
+        options: {
+          plotOptions: {
+            bar: {
+              borderRadius: 7,
+              columnWidth: '40%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.md,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '25%', borderRadius: 6 }
+          }
+        }
+      },
+      {
+        breakpoint: 680,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '28%' }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.sm,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '38%' }
+          }
+        }
+      },
+      {
+        breakpoint: 450,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '55%' }
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Total Earning'
+        action={<OptionMenu options={['Refresh', 'Share', 'Update']} />}
+        subheader={
+          <div className='flex items-center gap-2'>
+            <Typography variant='h2'>87%</Typography>
+            <div className='flex items-center gap-1'>
+              <i className='tabler-chevron-up text-xl text-success' />
+              <Typography color='success.main'>25.8%</Typography>
+            </div>
+          </div>
+        }
+      />
+      <CardContent className='flex flex-col gap-4'>
+        <AppReactApexCharts type='bar' height={191} width='100%' series={series} options={options} />
+        {data.map((item, index) => (
+          <div key={index} className='flex items-center gap-4'>
+            <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={38}>
+              <i className={classnames(item.avatarIcon, 'text-[22px]')} />
+            </CustomAvatar>
+            <div className='flex justify-between items-center is-full'>
+              <div className='flex flex-col'>
+                <Typography className='font-medium' color='text.primary'>
+                  {item.title}
+                </Typography>
+                <Typography variant='body2'>{item.subtitle}</Typography>
+              </div>
+              <Typography
+                className='font-medium'
+                color={`${item.amountDiff === 'negative' ? 'error' : 'success'}.main`}
+              >{`${item.amountDiff === 'negative' ? '-' : '+'}$${item.amount}`}</Typography>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default TotalEarning

src/views/pages/widget-examples/charts/VehicleOverview.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import LinearProgress from '@mui/material/LinearProgress'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import styles from '@views/apps/logistics/dashboard/styles.module.css'
+
+type dataTypes = {
+  icon: string
+  heading: string
+  time: string
+  progressColor: string
+  progressColorVariant: string
+  progressData: string
+  widthClass?: string
+}
+
+const data: dataTypes[] = [
+  {
+    icon: 'tabler-car',
+    heading: 'On the way',
+    time: '2hr 10min',
+    progressColor: 'action',
+    progressColorVariant: 'hover',
+    progressData: '39.7%',
+    widthClass: 'is-[39.7%]'
+  },
+  {
+    icon: 'tabler-circle-arrow-down',
+    heading: 'Unloading',
+    time: '3hr 15min',
+    progressColor: 'primary',
+    progressColorVariant: 'main',
+    progressData: '28.3%',
+    widthClass: 'is-[28.3%]'
+  },
+  {
+    icon: 'tabler-circle-arrow-up',
+    heading: 'Loading',
+    time: '1hr 24min',
+    progressColor: 'info',
+    progressColorVariant: 'main',
+    progressData: '17.4%',
+    widthClass: 'is-[17.4%]'
+  },
+  {
+    icon: 'tabler-clock',
+    heading: 'Waiting',
+    time: '5hr 19min',
+    progressColor: 'SnackbarContent',
+    progressColorVariant: 'bg',
+    progressData: '14.6%',
+    widthClass: 'is-[14.6%]'
+  }
+]
+
+const VehicleOverview = () => {
+  return (
+    <Card>
+      <CardHeader title='Vehicle Overview' action={<OptionMenu options={['Refresh', 'Update', 'Share']} />} />
+      <CardContent>
+        <div className='flex flex-col gap-6'>
+          <div className='flex is-full'>
+            {data.map((item, index) => (
+              <div
+                key={index}
+                className={classnames(item.widthClass, styles.linearRound, 'flex flex-col gap-[38px] relative')}
+              >
+                <Typography className={classnames(styles.header, 'relative max-sm:hidden')}>{item.heading}</Typography>
+                <LinearProgress
+                  variant='determinate'
+                  value={-1}
+                  className={classnames('bs-[46px]')}
+                  // eslint-disable-next-line lines-around-comment
+                  // @ts-ignore
+                  sx={{
+                    backgroundColor: `var(--mui-palette-${item.progressColor}-${item.progressColorVariant})`,
+                    borderRadius: 0
+                  }}
+                />
+                <Typography
+                  variant='body2'
+                  className='absolute bottom-3 start-2 font-medium'
+                  sx={{
+                    color: theme =>
+                      index === 0
+                        ? 'var(--mui-palette-text-primary)'
+                        : item.progressColor === 'info'
+                          ? 'var(--mui-palette-common-white)'
+                          : // eslint-disable-next-line lines-around-comment
+                            // @ts-ignore
+                            theme.palette.getContrastText(theme.palette[item.progressColor][item.progressColorVariant])
+                  }}
+                >
+                  {item.progressData}
+                </Typography>
+              </div>
+            ))}
+          </div>
+          <div className='overflow-x-auto'>
+            <table className={tableStyles.table}>
+              <tbody>
+                {data.map((item, index) => (
+                  <tr key={index}>
+                    <td className='flex items-center gap-2 pis-0'>
+                      <i className={classnames(item.icon, 'text-textPrimary text-[1.5rem]')}></i>
+                      <Typography color='text.primary'>{item.heading}</Typography>
+                    </td>
+                    <td className='text-end'>
+                      <Typography color='text.primary' className='font-medium'>
+                        {item.time}
+                      </Typography>
+                    </td>
+                    <td className='text-end pie-0'>
+                      <Typography>{item.progressData}</Typography>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default VehicleOverview

src/views/pages/widget-examples/charts/styles.css

@@ -0,0 +1,7 @@
+#carrier-performance .apexcharts-legend .apexcharts-legend-series {
+  border: 1px solid var(--mui-palette-divider);
+  border-radius: var(--mui-shape-borderRadius);
+  block-size: 83%;
+  padding-block: 4px;
+  padding-inline: 16px;
+}

src/views/pages/widget-examples/statistics/BarChartDailyTraffic.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import Chip from '@mui/material/Chip'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+const series = [{ data: [40, 53, 66, 79, 92, 105, 118] }]
+
+const BarChartDailyTraffic = () => {
+  // Hook
+  const theme = useTheme()
+
+  // Vars
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 5,
+        columnWidth: '28%'
+      }
+    },
+    legend: { show: false },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    colors: ['var(--mui-palette-warning-main)'],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: -10,
+        left: 5,
+        right: 8,
+        bottom: 5
+      }
+    },
+    xaxis: {
+      categories: ['01', '02', '03', '04', '05', '06', '07'],
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+      tickPlacement: 'on',
+      labels: {
+        style: {
+          colors: 'var(--mui-palette-text-disabled)',
+          fontFamily: theme.typography.fontFamily,
+          fontSize: theme.typography.body2.fontSize as string
+        }
+      }
+    },
+    yaxis: { show: false },
+    responsive: [
+      {
+        breakpoint: 1459,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '35%' }
+          }
+        }
+      },
+      {
+        breakpoint: 1200,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '20%' }
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <div className='flex items-start justify-between'>
+          <div className='flex flex-col items-start'>
+            <Typography variant='h4'>2.84k</Typography>
+            <Typography variant='subtitle2' color='text.secondary'>
+              Avg Daily Traffic
+            </Typography>
+          </div>
+          <Chip variant='tonal' color='success' label='+15%' size='small' />
+        </div>
+        <AppReactApexCharts type='bar' height={156} width='100%' series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default BarChartDailyTraffic

src/views/pages/widget-examples/statistics/BarChartRevenueGrowth.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import Chip from '@mui/material/Chip'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+const series = [{ data: [32, 52, 72, 94, 116, 94, 72] }]
+
+const BarChartRevenueGrowth = () => {
+  // Hook
+  const theme = useTheme()
+
+  // Vars
+  const successColorWithOpacity = 'var(--mui-palette-success-lightOpacity)'
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 5,
+        distributed: true,
+        columnWidth: '48%'
+      }
+    },
+    legend: { show: false },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    colors: [
+      successColorWithOpacity,
+      successColorWithOpacity,
+      successColorWithOpacity,
+      successColorWithOpacity,
+      'var(--mui-palette-success-main)',
+      successColorWithOpacity,
+      successColorWithOpacity
+    ],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: -15,
+        left: 0,
+        right: 0,
+        bottom: -5
+      }
+    },
+    xaxis: {
+      categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+      tickPlacement: 'on',
+      labels: {
+        style: {
+          colors: 'var(--mui-palette-text-disabled)',
+          fontFamily: theme.typography.fontFamily,
+          fontSize: theme.typography.body2.fontSize as string
+        }
+      }
+    },
+    yaxis: { show: false },
+    responsive: [
+      {
+        breakpoint: 1335,
+        options: {
+          chart: {
+            width: 150
+          },
+          plotOptions: {
+            bar: { columnWidth: '55%' }
+          }
+        }
+      },
+      {
+        breakpoint: 1200,
+        options: {
+          chart: {
+            width: 190
+          }
+        }
+      },
+      {
+        breakpoint: 410,
+        options: {
+          chart: {
+            width: 150
+          },
+          plotOptions: {
+            bar: { columnWidth: '60%' }
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardContent className='flex justify-between gap-4'>
+        <div className='flex flex-col justify-between'>
+          <div className='flex flex-col gap-y-2'>
+            <Typography variant='h5'>Revenue Growth</Typography>
+            <Typography>Weekly Report</Typography>
+          </div>
+          <div className='flex flex-col gap-y-2 items-start'>
+            <Typography variant='h3'>$4,673</Typography>
+            <Chip variant='tonal' size='small' color='success' label='+15.2%' />
+          </div>
+        </div>
+        <AppReactApexCharts type='bar' width={190} height={172} series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default BarChartRevenueGrowth

src/views/pages/widget-examples/statistics/BarChartSessionsWithNegativeValues.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [
+  {
+    name: 'Earning',
+    data: [180, 120, 284, 180, 102]
+  },
+  {
+    name: 'Expense',
+    data: [-100, -130, -105, -85, -125]
+  }
+]
+
+const BarChartSessionsWithNegativeValues = () => {
+  // Hooks
+  const theme = useTheme()
+
+  const options: ApexOptions = {
+    chart: {
+      stacked: true,
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    grid: {
+      padding: {
+        top: -20,
+        left: -5,
+        right: -5,
+        bottom: -15
+      },
+      yaxis: {
+        lines: { show: false }
+      },
+      xaxis: {
+        lines: { show: false }
+      }
+    },
+    legend: { show: false },
+    stroke: {
+      lineCap: 'round',
+      width: 3,
+      colors: ['var(--mui-palette-background-paper)']
+    },
+    dataLabels: { enabled: false },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-success-main)'],
+    plotOptions: {
+      bar: {
+        borderRadius: 5,
+        columnWidth: '46%',
+        borderRadiusApplication: 'around',
+        borderRadiusWhenStacked: 'all'
+      }
+    },
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
+    },
+    yaxis: {
+      labels: { show: false }
+    },
+    responsive: [
+      {
+        breakpoint: 1520,
+        options: {
+          plotOptions: {
+            bar: {
+              columnWidth: '55%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 1370,
+        options: {
+          plotOptions: {
+            bar: {
+              columnWidth: '62%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 1298,
+        options: {
+          plotOptions: {
+            bar: {
+              columnWidth: '68%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 1200,
+        options: {
+          plotOptions: {
+            bar: {
+              columnWidth: '28%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 935,
+        options: {
+          plotOptions: {
+            bar: {
+              columnWidth: '30%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.sm,
+        options: {
+          plotOptions: {
+            bar: {
+              columnWidth: '18%'
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 470,
+        options: {
+          plotOptions: {
+            bar: {
+              columnWidth: '24%'
+            }
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Sessions' subheader='This Month' className='pbe-0' />
+      <CardContent className='flex flex-col'>
+        <AppReactApexCharts type='bar' height={98} width='100%' options={options} series={series} />
+        <div className='flex items-center justify-between flex-wrap gap-x-4 gap-y-0.5'>
+          <Typography variant='h4' color='text.primary'>
+            45.1k
+          </Typography>
+          <Typography variant='body2' color='success.main'>
+            +12.6%
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default BarChartSessionsWithNegativeValues

src/views/pages/widget-examples/statistics/CardStatsLineAreaCharts.tsx

@@ -0,0 +1,26 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsWithAreaChartProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatsWithAreaChart from '@components/card-statistics/StatsWithAreaChart'
+
+const CardStatsLineAreaCharts = ({ data }: { data: CardStatsWithAreaChartProps[] }) => {
+  const renderData = data
+    ? data.map((item: CardStatsWithAreaChartProps, index: number) => (
+        <Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
+          <CardStatsWithAreaChart {...item} />
+        </Grid>
+      ))
+    : null
+
+  return (
+    <Grid container spacing={6}>
+      {renderData}
+    </Grid>
+  )
+}
+
+export default CardStatsLineAreaCharts

src/views/pages/widget-examples/statistics/CustomerStatisticsCard.tsx

@@ -0,0 +1,22 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsCustomerStatsProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CustomerStats from '@components/card-statistics/CustomerStats'
+
+const CustomerStatisticsCard = ({ customerStatData }: { customerStatData?: CardStatsCustomerStatsProps[] }) => {
+  return (
+    <Grid container spacing={6}>
+      {customerStatData?.map((item, index) => (
+        <Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
+          <CustomerStats {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default CustomerStatisticsCard

src/views/pages/widget-examples/statistics/DistributedBarChartOrder.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [{ data: [77, 55, 23, 43, 77, 55, 89] }]
+
+const DistributedBarChartOrder = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const actionSelectedColor = 'var(--mui-palette-action-selected)'
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'bar',
+      stacked: false,
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      sparkline: { enabled: true }
+    },
+    tooltip: { enabled: false },
+    legend: { show: false },
+    dataLabels: { enabled: false },
+    colors: ['var(--mui-palette-primary-main)'],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 3,
+        horizontal: false,
+        columnWidth: '32%',
+        colors: {
+          backgroundBarRadius: 5,
+          backgroundBarColors: [
+            actionSelectedColor,
+            actionSelectedColor,
+            actionSelectedColor,
+            actionSelectedColor,
+            actionSelectedColor
+          ]
+        }
+      }
+    },
+    grid: {
+      show: false,
+      padding: {
+        left: -3,
+        right: 5,
+        top: 15,
+        bottom: 20
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: { show: false },
+    responsive: [
+      {
+        breakpoint: 1460,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '48%' }
+          }
+        }
+      },
+      {
+        breakpoint: 1350,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '45%' }
+          }
+        }
+      },
+      {
+        breakpoint: 1300,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '55%' }
+          }
+        }
+      },
+      {
+        breakpoint: theme.breakpoints.values.lg,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '20%' }
+          }
+        }
+      },
+      {
+        breakpoint: 600,
+        options: {
+          plotOptions: {
+            bar: { columnWidth: '15%' }
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Order' subheader='Last Week' className='pbe-0' />
+      <CardContent className='flex flex-col'>
+        <AppReactApexCharts type='bar' height={98} width='100%' options={options} series={series} />
+        <div className='flex items-center justify-between flex-wrap gap-x-4 gap-y-0.5'>
+          <Typography variant='h4' color='text.primary'>
+            124k
+          </Typography>
+          <Typography variant='body2' color='success.main'>
+            +12.6%
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default DistributedBarChartOrder

src/views/pages/widget-examples/statistics/DonutChartGeneratedLeads.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+const series = [32, 41, 41, 70]
+
+const BarChartRevenueGrowth = () => {
+  // Hook
+  const theme = useTheme()
+
+  // Vars
+  const textSecondary = 'var(--mui-palette-text-secondary)'
+  const successColor = 'var(--mui-palette-success-main)'
+
+  const options: ApexOptions = {
+    colors: [
+      successColor,
+      'rgba(var(--mui-palette-success-mainChannel) / 0.7)',
+      'rgba(var(--mui-palette-success-mainChannel) / 0.5)',
+      'var(--mui-palette-success-lightOpacity)'
+    ],
+    stroke: { width: 0 },
+    legend: { show: false },
+    tooltip: { theme: 'false' },
+    dataLabels: { enabled: false },
+    labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
+    states: {
+      hover: {
+        filter: { type: 'none' }
+      },
+      active: {
+        filter: { type: 'none' }
+      }
+    },
+    grid: {
+      padding: {
+        top: -22,
+        bottom: -18,
+        right: 15
+      }
+    },
+    plotOptions: {
+      pie: {
+        customScale: 0.8,
+        expandOnClick: false,
+        donut: {
+          size: '73%',
+          labels: {
+            show: true,
+            name: {
+              offsetY: 25,
+              color: textSecondary,
+              fontFamily: theme.typography.fontFamily
+            },
+            value: {
+              offsetY: -15,
+              fontWeight: 500,
+              formatter: val => `${val}`,
+              color: 'var(--mui-palette-text-primary)',
+              fontFamily: theme.typography.fontFamily,
+              fontSize: theme.typography.h3.fontSize as string
+            },
+            total: {
+              show: true,
+              showAlways: true,
+              label: 'Total',
+              color: successColor,
+              fontFamily: theme.typography.fontFamily,
+              fontSize: theme.typography.body1.fontSize as string
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <Card className='overflow-visible'>
+      <CardContent className='flex justify-between gap-4'>
+        <div className='flex flex-col justify-between'>
+          <div className='flex flex-col'>
+            <Typography variant='h5'>Generated Leads</Typography>
+            <Typography>Monthly Report</Typography>
+          </div>
+          <div className='flex flex-col items-start'>
+            <Typography variant='h3'>4,350</Typography>
+            <div className='flex items-center gap-1'>
+              <i className='tabler-chevron-up text-success text-xl'></i>
+              <Typography color='success.main' component='span'>
+                +15.8%
+              </Typography>
+            </div>
+          </div>
+        </div>
+        <AppReactApexCharts type='donut' width={165} height={229} series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default BarChartRevenueGrowth

src/views/pages/widget-examples/statistics/Horizontal.tsx

@@ -0,0 +1,24 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsHorizontalProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatHorizontal from '@/components/card-statistics/Horizontal'
+
+const Horizontal = ({ data }: { data: CardStatsHorizontalProps[] }) => {
+  if (data) {
+    return (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
+            <CardStatHorizontal {...item} />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  }
+}
+
+export default Horizontal

src/views/pages/widget-examples/statistics/HorizontalStatisticsCard.tsx

@@ -0,0 +1,24 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsHorizontalWithAvatarProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatsHorizontalWithAvatar from '@components/card-statistics/HorizontalWithAvatar'
+
+const HorizontalStatisticsCard = ({ data }: { data?: CardStatsHorizontalWithAvatarProps[] }) => {
+  return (
+    data && (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
+            <CardStatsHorizontalWithAvatar {...item} avatarSkin='light' />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  )
+}
+
+export default HorizontalStatisticsCard

src/views/pages/widget-examples/statistics/LineAreaDailySalesChart.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+const series = [{ data: [40, 20, 65, 50] }]
+
+const LineAreaDailySalesChart = () => {
+  // Hook
+  const theme = useTheme()
+
+  // Vars
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      sparkline: { enabled: true }
+    },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    stroke: {
+      width: 2,
+      curve: 'smooth'
+    },
+    grid: {
+      show: false,
+      padding: {
+        bottom: 20
+      }
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        opacityTo: 0,
+        opacityFrom: 1,
+        shadeIntensity: 1,
+        stops: [0, 100],
+        colorStops: [
+          [
+            {
+              offset: 0,
+              opacity: 0.4,
+              color: theme.palette.success.main
+            },
+            {
+              opacity: 0,
+              offset: 100,
+              color: 'var(--mui-palette-background-paper)'
+            }
+          ]
+        ]
+      }
+    },
+    theme: {
+      monochrome: {
+        enabled: true,
+        shadeTo: 'light',
+        shadeIntensity: 1,
+        color: theme.palette.success.main
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: { show: false }
+  }
+
+  return (
+    <Card className='pbe-6'>
+      <CardHeader title='Average Daily Sales' className='pbe-3' />
+      <CardContent>
+        <Typography>Total Sales This Month</Typography>
+        <Typography variant='h4'>$28,450</Typography>
+      </CardContent>
+      <AppReactApexCharts type='area' height={90} width='100%' series={series} options={options} />
+    </Card>
+  )
+}
+
+export default LineAreaDailySalesChart

src/views/pages/widget-examples/statistics/LineAreaYearlySalesChart.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [{ data: [40, 10, 65, 45] }]
+
+const LineAreaYearlySalesChart = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const successColor = theme.palette.success.main
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      sparkline: { enabled: true }
+    },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    stroke: {
+      width: 2,
+      curve: 'smooth'
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: 10,
+        bottom: 20
+      }
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        opacityTo: 0,
+        opacityFrom: 1,
+        shadeIntensity: 1,
+        stops: [0, 100],
+        colorStops: [
+          [
+            {
+              offset: 0,
+              opacity: 0.4,
+              color: successColor
+            },
+            {
+              opacity: 0,
+              offset: 100,
+              color: 'var(--mui-palette-background-paper)'
+            }
+          ]
+        ]
+      }
+    },
+    theme: {
+      monochrome: {
+        enabled: true,
+        shadeTo: 'light',
+        shadeIntensity: 1,
+        color: successColor
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: { show: false }
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Sales' subheader='Last Year' className='pbe-0' />
+      <AppReactApexCharts type='area' height={98} width='100%' options={options} series={series} />
+      <CardContent className='flex flex-col pbs-0'>
+        <div className='flex items-center justify-between flex-wrap gap-x-4 gap-y-0.5'>
+          <Typography variant='h4' color='text.primary'>
+            175k
+          </Typography>
+          <Typography variant='body2' color='error.main'>
+            -16.2%
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default LineAreaYearlySalesChart

src/views/pages/widget-examples/statistics/LineChartImpression.tsx

@@ -0,0 +1,72 @@
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [{ name: 'Income', data: [3350, 3350, 5000, 5000, 2950, 2950, 1500, 1500, 3750, 3750, 5700, 5700] }]
+
+const LineChartImpression = () => {
+  // Vars
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      sparkline: { enabled: true }
+    },
+    stroke: {
+      width: 3,
+      curve: 'straight',
+      lineCap: 'round'
+    },
+    colors: ['var(--mui-palette-error-main)'],
+    grid: {
+      padding: {
+        top: 10,
+        bottom: 20,
+        left: 5,
+        right: 5
+      },
+      yaxis: {
+        lines: { show: false }
+      }
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: {
+      labels: { show: false }
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Impression' subheader='Expenses' className='pbe-0' />
+      <CardContent className='flex flex-col'>
+        <AppReactApexCharts type='line' height={98} width='100%' options={options} series={series} />
+        <div className='flex items-center justify-between flex-wrap gap-x-4 gap-y-0.5'>
+          <Typography variant='h4' color='text.primary'>
+            26.1k
+          </Typography>
+          <Typography variant='body2' color='error.main'>
+            -24.5%
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default LineChartImpression

src/views/pages/widget-examples/statistics/LineChartProfit.tsx

@@ -0,0 +1,94 @@
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [{ data: [0, 19, 7, 27, 15, 40] }]
+
+const LineChartProfit = () => {
+  // Vars
+  const infoColor = 'var(--mui-palette-info-main)'
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    tooltip: { enabled: false },
+    grid: {
+      strokeDashArray: 6,
+      borderColor: 'var(--mui-palette-divider)',
+      xaxis: {
+        lines: { show: true }
+      },
+      yaxis: {
+        lines: { show: false }
+      },
+      padding: {
+        top: -10,
+        left: 0,
+        right: 13,
+        bottom: 8
+      }
+    },
+    stroke: {
+      width: 3,
+      lineCap: 'butt',
+      curve: 'straight'
+    },
+    colors: [infoColor],
+    markers: {
+      size: 4,
+      strokeWidth: 3,
+      colors: infoColor,
+      strokeColors: 'transparent',
+      discrete: [
+        {
+          size: 5.5,
+          seriesIndex: 0,
+          strokeColor: infoColor,
+          fillColor: 'var(--mui-palette-background-paper)',
+          dataPointIndex: series[0].data.length - 1
+        }
+      ]
+    },
+    xaxis: {
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: {
+      labels: { show: false }
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Profit' subheader='Last Month' className='pbe-0' />
+      <CardContent className='flex flex-col'>
+        <AppReactApexCharts type='line' height={98} width='100%' options={options} series={series} />
+        <div className='flex items-center justify-between flex-wrap gap-x-4 gap-y-0.5'>
+          <Typography variant='h4' color='text.primary'>
+            624k
+          </Typography>
+          <Typography variant='body2' color='success.main'>
+            +8.2%
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default LineChartProfit

src/views/pages/widget-examples/statistics/LogisticsStatisticsCard.tsx

@@ -0,0 +1,24 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsHorizontalWithBorderProps } from '@/types/pages/widgetTypes'
+
+// Components Imports
+import HorizontalWithBorder from '@components/card-statistics/HorizontalWithBorder'
+
+const LogisticsStatisticsCard = ({ data }: { data?: CardStatsHorizontalWithBorderProps[] }) => {
+  return (
+    data && (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
+            <HorizontalWithBorder {...item} />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  )
+}
+
+export default LogisticsStatisticsCard

src/views/pages/widget-examples/statistics/RadialBarChart.tsx

@@ -0,0 +1,111 @@
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import CardHeader from '@mui/material/CardHeader'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+const RadialBarChart = () => {
+  // Vars
+  const options: ApexOptions = {
+    chart: {
+      sparkline: { enabled: true },
+      parentHeightOffset: 0
+    },
+    grid: {
+      padding: {
+        bottom: 20
+      }
+    },
+    stroke: {
+      lineCap: 'round',
+      curve: 'smooth'
+    },
+    colors: ['var(--mui-palette-warning-main)'],
+    plotOptions: {
+      radialBar: {
+        endAngle: 90,
+        startAngle: -90,
+        hollow: { size: '60%' },
+        track: { background: 'var(--mui-palette-divider)', strokeWidth: '40%' },
+        dataLabels: {
+          name: { show: false },
+          value: {
+            offsetY: 0,
+            fontWeight: 500,
+            fontSize: '1.5rem',
+            color: 'var(--mui-palette-text-primary)'
+          }
+        }
+      }
+    },
+    responsive: [
+      {
+        breakpoint: 1462,
+        options: {
+          chart: {
+            width: 120,
+            height: 130
+          },
+          plotOptions: {
+            radialBar: {
+              dataLabels: {
+                value: {
+                  fontSize: '1rem'
+                }
+              }
+            }
+          }
+        }
+      },
+      {
+        breakpoint: 1430,
+        options: {
+          chart: {
+            height: 140
+          }
+        }
+      },
+      {
+        breakpoint: 1200,
+        options: {
+          chart: {
+            width: 170,
+            height: 189
+          },
+          plotOptions: {
+            radialBar: {
+              dataLabels: {
+                value: {
+                  fontSize: '1.5rem'
+                }
+              }
+            }
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardHeader title='82.5k' subheader='Expenses' className='pbe-0' />
+      <CardContent className='flex flex-col items-center'>
+        <AppReactApexCharts type='radialBar' height={168} width='100%' options={options} series={[78]} />
+        <Typography variant='body2' color='text.disabled' className='sm:mbs-2 lg:mbs-0'>
+          $21k Expenses more than last month
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default RadialBarChart

src/views/pages/widget-examples/statistics/SalesOverview.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Divider from '@mui/material/Divider'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import MuiLinearProgress from '@mui/material/LinearProgress'
+import { styled } from '@mui/material/styles'
+
+// Custom Components Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+
+const LinearProgress = styled(MuiLinearProgress)(() => ({
+  '&.MuiLinearProgress-colorInfo': { backgroundColor: 'var(--mui-palette-primary-main)' },
+  '& .MuiLinearProgress-bar': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  }
+}))
+
+const SalesOverview = () => {
+  return (
+    <Card>
+      <CardContent>
+        <div className='flex items-start justify-between gap-3'>
+          <div>
+            <Typography>Sales Overview</Typography>
+            <Typography variant='h4'>$42.5k</Typography>
+          </div>
+          <Typography color='success.main' className='font-medium'>
+            +18.2%
+          </Typography>
+        </div>
+        <div className='flex items-center justify-between gap-2 mlb-6'>
+          <div className='flex flex-col plb-2.25'>
+            <div className='flex items-center mbe-2.5 gap-x-[6px]'>
+              <CustomAvatar skin='light' color='info' variant='rounded' size={24}>
+                <i className='tabler-shopping-cart text-lg' />
+              </CustomAvatar>
+              <Typography>Order</Typography>
+            </div>
+            <Typography variant='h5'>62.2%</Typography>
+            <Typography variant='body2' color='text.disabled'>
+              6,440
+            </Typography>
+          </div>
+          <Divider flexItem orientation='vertical'>
+            <CustomAvatar skin='light' color='secondary' size={24} className='text-xs text-textDisabled bg-actionHover'>
+              VS
+            </CustomAvatar>
+          </Divider>
+          <div className='flex items-end flex-col plb-2'>
+            <div className='flex items-center mbe-2 gap-x-[6px]'>
+              <Typography color='text.secondary' className='m'>
+                Visits
+              </Typography>
+              <CustomAvatar skin='light' variant='rounded' size={24} color='primary'>
+                <i className='tabler-link text-lg' />
+              </CustomAvatar>
+            </div>
+            <Typography variant='h5'>25.5%</Typography>
+            <Typography variant='body2' color='text.disabled'>
+              12,749
+            </Typography>
+          </div>
+        </div>
+        <LinearProgress value={65} color='info' variant='determinate' className='bs-2.5' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesOverview

src/views/pages/widget-examples/statistics/Square.tsx

@@ -0,0 +1,24 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsSquareProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatsSquare from '@components/card-statistics/CardStatsSquare'
+
+const Square = ({ data }: { data: CardStatsSquareProps[] }) => {
+  if (data) {
+    return (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 6 }} key={index}>
+            <CardStatsSquare {...item} />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  }
+}
+
+export default Square

src/views/pages/widget-examples/statistics/StatisticsCard.tsx

@@ -0,0 +1,78 @@
+// MUI Imports
+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'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+
+// Component Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+
+type DataType = {
+  icon: string
+  stats: string
+  title: string
+  color: ThemeColor
+}
+
+const data: DataType[] = [
+  {
+    stats: '230k',
+    title: 'Sales',
+    color: 'primary',
+    icon: 'tabler-chart-pie-2'
+  },
+  {
+    color: 'info',
+    stats: '8.549k',
+    title: 'Customers',
+    icon: 'tabler-users'
+  },
+  {
+    color: 'error',
+    stats: '1.423k',
+    title: 'Products',
+    icon: 'tabler-shopping-cart'
+  },
+  {
+    stats: '$9745',
+    color: 'success',
+    title: 'Revenue',
+    icon: 'tabler-currency-dollar'
+  }
+]
+
+const StatisticsCard = () => {
+  return (
+    <Card>
+      <CardHeader
+        title='Statistics'
+        action={
+          <Typography variant='subtitle2' color='text.disabled'>
+            Updated 1 month ago
+          </Typography>
+        }
+      />
+      <CardContent className='flex justify-between flex-wrap gap-4'>
+        <Grid container spacing={4} flex={1}>
+          {data.map((item, index) => (
+            <Grid size={{ xs: 6, md: 3 }} key={index} className='flex gap-4 items-center'>
+              <CustomAvatar color={item.color} variant='rounded' size={40} skin='light'>
+                <i className={item.icon}></i>
+              </CustomAvatar>
+              <div>
+                <Typography variant='h5'>{item.stats}</Typography>
+                <Typography variant='body2'>{item.title}</Typography>
+              </div>
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default StatisticsCard

src/views/pages/widget-examples/statistics/SubscribersOrders.tsx

@@ -0,0 +1,69 @@
+// MUI Imports
+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 Chip from '@mui/material/Chip'
+import Progress from '@mui/material/LinearProgress'
+
+// Types Imports
+import type { ThemeColor } from '@core/types'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+
+type DataType = {
+  title: string
+  chipText: string
+  progress: number
+  subtitle: string
+  chipColor?: ThemeColor
+  progressColor?: ThemeColor
+}
+
+const data: DataType[] = [
+  {
+    progress: 85,
+    chipText: '+92k',
+    chipColor: 'success',
+    title: 'Subscribers Gained',
+    subtitle: '1.2k new subscriber'
+  },
+  {
+    progress: 65,
+    chipText: '+38k',
+    chipColor: 'success',
+    progressColor: 'info',
+    title: 'Orders Received',
+    subtitle: '2.4k new orders'
+  }
+]
+
+const SubscribersOrders = () => {
+  return (
+    <Card>
+      <CardHeader title='Statistics' action={<OptionMenu options={['Refresh', 'Share', 'Update']} />} />
+      <CardContent className='flex flex-col gap-y-6'>
+        {data.map((item, index) => (
+          <div key={index} className='flex flex-col gap-2'>
+            <div className='flex items-center justify-between gap-3'>
+              <Typography variant='h6'>{item.title}</Typography>
+              <Chip variant='tonal' label={item.chipText} size='small' color={item.chipColor} />
+            </div>
+            <div>
+              <div className='flex items-center justify-between gap-3'>
+                <Typography>{item.subtitle}</Typography>
+                <Typography variant='body2' color='text.disabled'>
+                  {item.progress}%
+                </Typography>
+              </div>
+              <Progress variant='determinate' value={item.progress} className='bs-2 mbs-1' color={item.progressColor} />
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SubscribersOrders

src/views/pages/widget-examples/statistics/UserListCards.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: 'Session',
+    stats: '21,459',
+    avatarIcon: 'tabler-users',
+    avatarColor: 'primary',
+    trend: 'positive',
+    trendNumber: '29%',
+    subtitle: 'Total User'
+  },
+  {
+    title: 'Paid Users',
+    stats: '4,567',
+    avatarIcon: 'tabler-user-plus',
+    avatarColor: 'error',
+    trend: 'positive',
+    trendNumber: '18%',
+    subtitle: 'Last week analytics'
+  },
+  {
+    title: 'Active Users',
+    stats: '19,860',
+    avatarIcon: 'tabler-user-check',
+    avatarColor: 'success',
+    trend: 'negative',
+    trendNumber: '14%',
+    subtitle: 'Last week analytics'
+  },
+  {
+    title: 'Pending Users',
+    stats: '237',
+    avatarIcon: 'tabler-user-search',
+    avatarColor: 'warning',
+    trend: 'positive',
+    trendNumber: '42%',
+    subtitle: 'Last week analytics'
+  }
+]
+
+const UserListCards = () => {
+  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 UserListCards

src/views/pages/widget-examples/statistics/Vertical.tsx

@@ -0,0 +1,24 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsVerticalProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatVertical from '@/components/card-statistics/Vertical'
+
+const Vertical = ({ data }: { data: CardStatsVerticalProps[] }) => {
+  if (data) {
+    return (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 6 }} key={index}>
+            <CardStatVertical {...item} />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  }
+}
+
+export default Vertical