diff --git a/package.json b/package.json
index fccb0aebe9..682060ffb3 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,10 @@
"@coreui/react": "^5.9.2",
"@coreui/react-chartjs": "^3.0.0",
"@coreui/utils": "^2.0.2",
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "@mui/icons-material": "^7.3.7",
+ "@mui/material": "^7.3.7",
"@popperjs/core": "^2.11.8",
"chart.js": "^4.5.1",
"classnames": "^2.5.1",
diff --git a/src/routes.js b/src/routes.js
index d2e9d6479d..0562ee9869 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,6 +1,6 @@
import React from 'react'
-const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
+const Dashboard = React.lazy(() => import('./views/dashboard/DashboardMUI'))
const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
diff --git a/src/views/dashboard/DashboardMUI.js b/src/views/dashboard/DashboardMUI.js
new file mode 100644
index 0000000000..f92284132a
--- /dev/null
+++ b/src/views/dashboard/DashboardMUI.js
@@ -0,0 +1,466 @@
+import React from 'react'
+import {
+ Box,
+ Card,
+ CardContent,
+ CardHeader,
+ Grid,
+ Typography,
+ Button,
+ ButtonGroup,
+ LinearProgress,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Avatar,
+ Chip,
+ Divider,
+ Paper,
+} from '@mui/material'
+import {
+ CloudDownload as CloudDownloadIcon,
+ People as PeopleIcon,
+ TrendingUp as TrendingUpIcon,
+ TrendingDown as TrendingDownIcon,
+} from '@mui/icons-material'
+
+import avatar1 from 'src/assets/images/avatars/1.jpg'
+import avatar2 from 'src/assets/images/avatars/2.jpg'
+import avatar3 from 'src/assets/images/avatars/3.jpg'
+import avatar4 from 'src/assets/images/avatars/4.jpg'
+import avatar5 from 'src/assets/images/avatars/5.jpg'
+import avatar6 from 'src/assets/images/avatars/6.jpg'
+
+const colorMap = {
+ success: '#1b9e3e',
+ info: '#39f',
+ warning: '#f9b115',
+ danger: '#e55353',
+ primary: '#5856d6',
+}
+
+const StatCard = ({ title, value, percent, trend, color }) => (
+
+
+
+ {value}
+
+ ({percent}%{' '}
+ {trend === 'up' ? (
+
+ ) : (
+
+ )}
+ )
+
+
+
+ {title}
+
+
+
+)
+
+const ProgressItem = ({ title, value, percent, color }) => (
+
+
+ {title}
+
+
+ {value} ({percent}%)
+
+
+
+)
+
+const DashboardMUI = () => {
+ const statsData = [
+ { title: 'Users', value: '26K', percent: -12.4, trend: 'down', color: '#39f' },
+ { title: 'Income', value: '$6.200', percent: 40.9, trend: 'up', color: '#f9b115' },
+ { title: 'Conversion Rate', value: '2.49%', percent: 84.7, trend: 'up', color: '#e55353' },
+ { title: 'Sessions', value: '44K', percent: -23.6, trend: 'down', color: '#e55353' },
+ ]
+
+ const progressExample = [
+ { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' },
+ { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' },
+ { title: 'Pageviews', value: '78.706 Views', percent: 60, color: 'warning' },
+ { title: 'New Users', value: '22.123 Users', percent: 80, color: 'danger' },
+ { title: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' },
+ ]
+
+ const progressGroupExample1 = [
+ { title: 'Monday', value1: 34, value2: 78 },
+ { title: 'Tuesday', value1: 56, value2: 94 },
+ { title: 'Wednesday', value1: 12, value2: 67 },
+ { title: 'Thursday', value1: 43, value2: 91 },
+ { title: 'Friday', value1: 22, value2: 73 },
+ { title: 'Saturday', value1: 53, value2: 82 },
+ { title: 'Sunday', value1: 9, value2: 69 },
+ ]
+
+ const tableExample = [
+ {
+ avatar: { src: avatar1, status: 'success' },
+ user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2023' },
+ country: 'USA',
+ usage: { value: 50, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' },
+ payment: 'Mastercard',
+ activity: '10 sec ago',
+ },
+ {
+ avatar: { src: avatar2, status: 'danger' },
+ user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2023' },
+ country: 'Brazil',
+ usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'info' },
+ payment: 'Visa',
+ activity: '5 minutes ago',
+ },
+ {
+ avatar: { src: avatar3, status: 'warning' },
+ user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
+ country: 'India',
+ usage: { value: 74, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'warning' },
+ payment: 'Stripe',
+ activity: '1 hour ago',
+ },
+ {
+ avatar: { src: avatar4, status: 'secondary' },
+ user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
+ country: 'France',
+ usage: { value: 98, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'danger' },
+ payment: 'PayPal',
+ activity: 'Last month',
+ },
+ {
+ avatar: { src: avatar5, status: 'success' },
+ user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2023' },
+ country: 'Spain',
+ usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'primary' },
+ payment: 'Google Wallet',
+ activity: 'Last week',
+ },
+ {
+ avatar: { src: avatar6, status: 'danger' },
+ user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2023' },
+ country: 'Poland',
+ usage: { value: 43, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' },
+ payment: 'Amex',
+ activity: 'Last week',
+ },
+ ]
+
+ return (
+
+
+ {statsData.map((stat, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ Traffic
+
+
+ January - July 2023
+
+
+
+
+
+
+
+
+ }>
+ Download
+
+
+
+
+
+ Chart Area (Material UI)
+
+
+
+
+
+ {progressExample.map((item, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Clients
+
+
+ 9,123
+
+
+
+
+
+
+ Recurring Clients
+
+
+ 22,643
+
+
+
+
+
+
+
+ {progressGroupExample1.map((item, index) => (
+
+
+ {item.title}
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ Pageviews
+
+
+ 78,623
+
+
+
+
+
+
+ Organic
+
+
+ 49,123
+
+
+
+
+
+
+
+
+
+ Male
+
+ 53%
+
+
+
+
+
+
+
+ Female
+
+ 43%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ User
+ Country
+ Usage
+ Payment Method
+ Activity
+
+
+
+ {tableExample.map((item, index) => (
+
+
+
+
+
+
+ {item.user.name}
+
+
+ {item.user.new ? 'New' : 'Recurring'} | Registered: {item.user.registered}
+
+
+
+ {item.country}
+
+
+
+
+ {item.usage.value}%
+
+
+ {item.usage.period}
+
+
+
+
+
+
+
+
+
+ Last login
+
+
+ {item.activity}
+
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
+export default DashboardMUI