From 4545922ed328c445775433b079b0e59b9a492cd1 Mon Sep 17 00:00:00 2001 From: simmmpleweb <90040741+simmmpleweb@users.noreply.github.com> Date: Sun, 24 Jul 2022 01:48:21 +0300 Subject: [PATCH] Removed deprecated deps --- CHANGELOG.md | 7 +- package.json | 18 +- src/views/Dashboard/Dashboard.js | 1309 +++++++++++++---------------- src/views/Dashboard/Profile.js | 1325 ++++++++++++++---------------- src/views/RTL/RTLPage.js | 1314 +++++++++++++---------------- 5 files changed, 1781 insertions(+), 2192 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 12d500c..bb2e2fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,9 @@ -# sChangelog +# Changelog +## [1.0.3] 2022-07-24 + +### Update v1.0.3 + +- We used the Chakra UI Circular Progress instead of the plugins since they were deprecated. The plugins are still used in previous versions! ## [1.0.2] 2022-05-16 diff --git a/package.json b/package.json index 9bb5603..04cb8c3 100644 --- a/package.json +++ b/package.json @@ -19,32 +19,27 @@ "framer-motion": "^4.1.17", "match-sorter": "6.3.0", "moment": "2.29.1", - "node-sass": "5.0.0", "nouislider": "15.0.0", "react": "17.0.2", "react-apexcharts": "^1.3.9", "react-big-calendar": "0.33.2", "react-bootstrap-sweetalert": "5.2.0", - "react-circular-progressbar": "^2.0.4", - "react-datetime": "3.0.4", "react-dom": "17.0.2", "react-github-btn": "^1.2.1", - "react-gradient-progress": "^1.0.3", "react-icons": "^4.2.0", "react-jvectormap": "0.0.16", "react-leaflet-semicircle": "^3.0.3", - "react-progressbar-semicircle": "^1.2.1", "react-router-dom": "5.2.0", "react-scripts": "5.0.0", - "react-swipeable-views": "0.13.9", + "react-swipeable-views": "0.14.0", "react-table": "7.7.0", - "react-tagsinput": "3.19.0", "stylis": "^4.0.10", "stylis-plugin-rtl": "^2.1.0" }, "resolutions": { "react-error-overlay": "6.0.9" - }, + }, + "target": "web", "scripts": { "start": "react-scripts start", "build": "react-scripts build && gulp licenses", @@ -61,7 +56,6 @@ }, "devDependencies": { "@babel/plugin-transform-react-jsx-source": "^7.14.5", - "@delowar/react-circle-progressbar": "^1.0.0", "eslint-config-prettier": "8.3.0", "eslint-plugin-prettier": "3.4.0", "gulp": "4.0.2", @@ -74,6 +68,10 @@ "not dead", "not op_mini all" ], - "development": [] + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js index c2b7ba9..1dfd056 100644 --- a/src/views/Dashboard/Dashboard.js +++ b/src/views/Dashboard/Dashboard.js @@ -15,738 +15,597 @@ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -import React from "react"; - // Chakra imports import { - Box, - Button, - Flex, - Grid, - Icon, - Progress, - SimpleGrid, - Spacer, - Stack, - Stat, - StatHelpText, - StatLabel, - StatNumber, - Table, - Tbody, - Text, - Th, - Thead, - Tr, -} from "@chakra-ui/react"; - + Box, + Button, + CircularProgress, + CircularProgressLabel, + Flex, + Grid, + Icon, + Progress, + SimpleGrid, + Spacer, + Stack, + Stat, + StatHelpText, + StatLabel, + StatNumber, + Table, + Tbody, + Text, + Th, + Thead, + Tr +} from '@chakra-ui/react'; // Styles for the circular progressbar -import "react-circular-progressbar/dist/styles.css"; -import medusa from "assets/img/cardimgfree.png"; +import medusa from 'assets/img/cardimgfree.png'; // Custom components -import Card from "components/Card/Card.js"; -import CardBody from "components/Card/CardBody.js"; -import CardHeader from "components/Card/CardHeader.js"; -import BarChart from "components/Charts/BarChart"; -import LineChart from "components/Charts/LineChart"; -import IconBox from "components/Icons/IconBox"; -import DashboardTableRow from "components/Tables/DashboardTableRow"; -import TimelineRow from "components/Tables/TimelineRow"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; - +import Card from 'components/Card/Card.js'; +import CardBody from 'components/Card/CardBody.js'; +import CardHeader from 'components/Card/CardHeader.js'; +import BarChart from 'components/Charts/BarChart'; +import LineChart from 'components/Charts/LineChart'; +import IconBox from 'components/Icons/IconBox'; // Icons -import { - CartIcon, - DocumentIcon, - GlobeIcon, - RocketIcon, - StatsIcon, - WalletIcon, -} from "components/Icons/Icons.js"; -import { BsArrowRight } from "react-icons/bs"; -import { - IoCheckmarkDoneCircleSharp, - IoEllipsisHorizontal, -} from "react-icons/io5"; -import { BiHappy } from "react-icons/bi"; -import { AiFillCheckCircle } from "react-icons/ai"; - +import { CartIcon, DocumentIcon, GlobeIcon, RocketIcon, StatsIcon, WalletIcon } from 'components/Icons/Icons.js'; +import DashboardTableRow from 'components/Tables/DashboardTableRow'; +import TimelineRow from 'components/Tables/TimelineRow'; +import React from 'react'; +import { AiFillCheckCircle } from 'react-icons/ai'; +import { BiHappy } from 'react-icons/bi'; +import { BsArrowRight } from 'react-icons/bs'; +import { IoCheckmarkDoneCircleSharp, IoEllipsisHorizontal } from 'react-icons/io5'; // Data import { - barChartDataDashboard, - barChartOptionsDashboard, - lineChartDataDashboard, - lineChartOptionsDashboard, -} from "variables/charts"; -import { dashboardTableData, timelineData } from "variables/general"; + barChartDataDashboard, + barChartOptionsDashboard, + lineChartDataDashboard, + lineChartOptionsDashboard +} from 'variables/charts'; +import { dashboardTableData, timelineData } from 'variables/general'; export default function Dashboard() { - return ( - - - {/* MiniStatistics Card */} - - - - - - Today's Money - - - - $53,000 - - - +55% - - - - - - - - - - {/* MiniStatistics Card */} - - - - - - Today's Users - - - - 2,300 - - - +5% - - - - - - - - - - {/* MiniStatistics Card */} - - - - - - New Clients - - - - +3,020 - - - -14% - - - - - - - - - - - {/* MiniStatistics Card */} - - - - - - Total Sales - - - - $173,000 - - - +8% - - - - - - - - - - - - {/* Welcome Card */} - - - - - - Welcome back, - - - Mark Johnson - - - Glad to see you again!
- Ask me anything. - - - - - - - - - - {/* Satisfaction Rate */} - - - - - Satisfaction Rate - - - From all projects - - - - - - - - - - - - - - 0% - - - - 95% - - - Based on likes - - - - 100% - - - - - {/* Referral Tracking */} - - - - - Referral Tracking - - - - - - - - Invited - - - 145 people - - - - - Bonus - - - 1,465 - - - - - = 1024 - ? 200 - : window.innerWidth >= 768 - ? 170 - : 200 - } - isGradient - gradient={{ - angle: 90, - startColor: "rgba(5, 205, 153, 0)", - stopColor: "#05CD99", - }} - emptyColor='transparent'> - - - Safety - - - 9.3 - - - Total Score - - - - - - - - - - {/* Sales Overview */} - - - - - Sales Overview - - - - (+5%) more - {" "} - in 2021 - - - - - - - - {/* Active Users */} - - - - - - - - - Active Users - - - - (+23%) - {" "} - than last week - - - - - - - - - - Users - - - - 32,984 - - - - - - - - - - Clicks - - - - 2.42m - - - - - - - - - - Sales - - - - 2,400$ - - - - - - - - - - Items - - - - 320 - - - - - - - - - - {/* Projects */} - - - - - Projects - - - - - - 30 done - {" "} - this month. - - - - - - - - - - - - - - - {dashboardTableData.map((row, index, arr) => { - return ( - - ); - })} - -
- Companies - - Members - - Budget - - Completion -
- - {/* Orders Overview */} - - - - - Orders overview - - - - - - +30% - {" "} - this month - - - - - - - {timelineData.map((row, index, arr) => { - return ( - - ); - })} - - - - - - ); + return ( + + + {/* MiniStatistics Card */} + + + + + + Today's Money + + + + $53,000 + + + +55% + + + + + + + + + + {/* MiniStatistics Card */} + + + + + + Today's Users + + + + 2,300 + + + +5% + + + + + + + + + + {/* MiniStatistics Card */} + + + + + + New Clients + + + + +3,020 + + + -14% + + + + + + + + + + + {/* MiniStatistics Card */} + + + + + + Total Sales + + + + $173,000 + + + +8% + + + + + + + + + + + + {/* Welcome Card */} + + + + + + Welcome back, + + + Mark Johnson + + + Glad to see you again!
+ Ask me anything. + + + + + + + + + + {/* Satisfaction Rate */} + + + + + Satisfaction Rate + + + From all projects + + + + + + + + + + + + + + + + 0% + + + + 95% + + + Based on likes + + + + 100% + + + + + {/* Referral Tracking */} + + + + + Referral Tracking + + + + + + + + Invited + + + 145 people + + + + + Bonus + + + 1,465 + + + + + = 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200} + value={70} + thickness={6} + color='#05CD99' + variant='vision'> + + + + Safety + + + 9.3 + + + Total Score + + + + + + + + + + + {/* Sales Overview */} + + + + + Sales Overview + + + + (+5%) more + {' '} + in 2021 + + + + + + + + {/* Active Users */} + + + + + + + + + Active Users + + + + (+23%) + {' '} + than last week + + + + + + + + + + Users + + + + 32,984 + + + + + + + + + + Clicks + + + + 2.42m + + + + + + + + + + Sales + + + + 2,400$ + + + + + + + + + + Items + + + + 320 + + + + + + + + + + {/* Projects */} + + + + + Projects + + + + + + 30 done + {' '} + this month. + + + + + + + + + + + + + + + {dashboardTableData.map((row, index, arr) => { + return ( + + ); + })} + +
+ Companies + + Members + + Budget + + Completion +
+ + {/* Orders Overview */} + + + + + Orders overview + + + + + + +30% + {' '} + this month + + + + + + + {timelineData.map((row, index, arr) => { + return ( + + ); + })} + + + + + + ); } diff --git a/src/views/Dashboard/Profile.js b/src/views/Dashboard/Profile.js index 90bc8c9..e60664d 100644 --- a/src/views/Dashboard/Profile.js +++ b/src/views/Dashboard/Profile.js @@ -15,742 +15,613 @@ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -import React from "react"; - // Chakra imports import { - Avatar, - AvatarBadge, - AvatarGroup, - Box, - Button, - DarkMode, - Flex, - Grid, - Icon, - Image, - Link, - Switch, - Text, -} from "@chakra-ui/react"; - + Avatar, + AvatarBadge, + AvatarGroup, + Box, + Button, + CircularProgress, + CircularProgressLabel, + DarkMode, + Flex, + Grid, + Icon, + Image, + Link, + Switch, + Text +} from '@chakra-ui/react'; +import avatar11 from 'assets/img/avatars/avatar11.png'; // Images -import avatar2 from "assets/img/avatars/avatar2.png"; -import avatar3 from "assets/img/avatars/avatar3.png"; -import avatar4 from "assets/img/avatars/avatar4.png"; -import avatar6 from "assets/img/avatars/avatar6.png"; -import avatar11 from "assets/img/avatars/avatar11.png"; -import bgProfile from "assets/img/bgProfile.png"; -import ProjectImage1 from "assets/img/ProjectImage1.png"; -import ProjectImage2 from "assets/img/ProjectImage2.png"; -import ProjectImage3 from "assets/img/ProjectImage3.png"; - +import avatar2 from 'assets/img/avatars/avatar2.png'; +import avatar3 from 'assets/img/avatars/avatar3.png'; +import avatar4 from 'assets/img/avatars/avatar4.png'; +import avatar6 from 'assets/img/avatars/avatar6.png'; +import bgProfile from 'assets/img/bgProfile.png'; +import ProjectImage1 from 'assets/img/ProjectImage1.png'; +import ProjectImage2 from 'assets/img/ProjectImage2.png'; +import ProjectImage3 from 'assets/img/ProjectImage3.png'; // Custom components -import Card from "components/Card/Card"; -import CardBody from "components/Card/CardBody"; -import CardHeader from "components/Card/CardHeader"; -import LineChart from "components/Charts/LineChart"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; -import IconBox from "components/Icons/IconBox"; -import { Separator } from "components/Separator/Separator"; - +import Card from 'components/Card/Card'; +import CardBody from 'components/Card/CardBody'; +import CardHeader from 'components/Card/CardHeader'; +import LineChart from 'components/Charts/LineChart'; +import IconBox from 'components/Icons/IconBox'; +import { CarIcon, FulgerIcon, FulgerWhiteIcon } from 'components/Icons/Icons'; +import { Separator } from 'components/Separator/Separator'; +import React from 'react'; +import { BsArrowRight } from 'react-icons/bs'; +import { FaCube, FaFacebook, FaInstagram, FaPencilAlt, FaPenFancy, FaTwitter } from 'react-icons/fa'; // Icons -import { IoDocumentsSharp } from "react-icons/io5"; -import { BsArrowRight } from "react-icons/bs"; -import { - FaCube, - FaFacebook, - FaInstagram, - FaPencilAlt, - FaPenFancy, - FaTwitter, -} from "react-icons/fa"; -import { CarIcon, FulgerIcon, FulgerWhiteIcon } from "components/Icons/Icons"; - +import { IoDocumentsSharp } from 'react-icons/io5'; // Data import { - lineChartDataProfile1, - lineChartDataProfile2, - lineChartOptionsProfile1, - lineChartOptionsProfile2, -} from "variables/charts"; + lineChartDataProfile1, + lineChartDataProfile2, + lineChartOptionsProfile1, + lineChartOptionsProfile2 +} from 'variables/charts'; function Profile() { - return ( - - - {/* Header */} - - - - - - - - - - - Mark Johnson - - - mark@simmmple.com - - - - - - - - - - - - - {/* Welcome Card */} - - - - Welcome back! - - - Nice to see you, Mark Johnson! - - - - - {/* Car Informations */} - - - - - Car Informations - - - Hello, Mark Johnson! Your Car is ready. - - - - - - - - - - - 68% - - - Current load - - - - - - 0h 58 min - - - Time to full charge - - - - - - - - Battery Health - - - 76% - - - - - - - - - - - Efficiency - - - +20% - - - - - - - - - - Consumption - - - 163W/km - - - - - - - - - - This Week - - - 1.342km - - - - - - - - - - - {/* Profile Information */} - - - - Profile Information - - - - - - Hi, I’m Mark Johnson, Decisions: If you can’t decide, the answer - is no. If two equally difficult paths, choose the one more - painful in the short term (pain avoidance is creating an - illusion of equality). - - - - - Full Name:{" "} - - - Mark Johnson - - - - - Mobile:{" "} - - - (44) 123 1234 123 - - - - - Email:{" "} - - - mark@simmmple.com - - - - - Location:{" "} - - - United States - - - - - Social Media:{" "} - - - - - - - - - - - - - - - - - - - - {/* Platform Settings */} - - - - Platform Settings - - - - - - ACCOUNT - - - - - Email me when someone follows me - - - - - - Email me when someone answers on my post - - - - - - Email me when someone mentions me - - - - APPLICATION - - - - - New launches and projects - - - - - - Monthly product changes - - - - - - Subscribe to newsletter - - - - - - Receive mails weekly - - - - - - - {/* Projects */} - - - - - Projects - - - Architects design houses - - - - - - - - - - - - Project #1 - - - Modern - - - As Uber works through a huge amount of internal management - turmoil. - - - - - - - - - - - - - - - - - - - Project #2 - - - Scandinavian - - - Music is something that every person has his or her own - specific opinion about. - - - - - - - - - - - - - - - - - - - Project #3 - - - Minimalist - - - Different people have different taste, especially various - types of music. - - - - - - - - - - - - - - - - - - ); + return ( + + + {/* Header */} + + + + + + + + + + + Mark Johnson + + + mark@simmmple.com + + + + + + + + + + + + + {/* Welcome Card */} + + + + Welcome back! + + + Nice to see you, Mark Johnson! + + + + + {/* Car Informations */} + + + + + Car Informations + + + Hello, Mark Johnson! Your Car is ready. + + + + + + + + + + + + 68% + + + Current load + + + + + + + 0h 58 min + + + Time to full charge + + + + + + + + Battery Health + + + 76% + + + + + + + + + + + Efficiency + + + +20% + + + + + + + + + + Consumption + + + 163W/km + + + + + + + + + + This Week + + + 1.342km + + + + + + + + + + + {/* Profile Information */} + + + + Profile Information + + + + + + Hi, I’m Mark Johnson, Decisions: If you can’t decide, the answer is no. If two equally + difficult paths, choose the one more painful in the short term (pain avoidance is + creating an illusion of equality). + + + + + Full Name:{' '} + + + Mark Johnson + + + + + Mobile:{' '} + + + (44) 123 1234 123 + + + + + Email:{' '} + + + mark@simmmple.com + + + + + Location:{' '} + + + United States + + + + + Social Media:{' '} + + + + + + + + + + + + + + + + + + + + {/* Platform Settings */} + + + + Platform Settings + + + + + + ACCOUNT + + + + + Email me when someone follows me + + + + + + Email me when someone answers on my post + + + + + + Email me when someone mentions me + + + + APPLICATION + + + + + New launches and projects + + + + + + Monthly product changes + + + + + + Subscribe to newsletter + + + + + + Receive mails weekly + + + + + + + {/* Projects */} + + + + + Projects + + + Architects design houses + + + + + + + + + + + + Project #1 + + + Modern + + + As Uber works through a huge amount of internal management turmoil. + + + + + + + + + + + + + + + + + + + Project #2 + + + Scandinavian + + + Music is something that every person has his or her own specific opinion about. + + + + + + + + + + + + + + + + + + + Project #3 + + + Minimalist + + + Different people have different taste, especially various types of music. + + + + + + + + + + + + + + + + + + ); } export default Profile; diff --git a/src/views/RTL/RTLPage.js b/src/views/RTL/RTLPage.js index 6bead6e..0a7c43e 100644 --- a/src/views/RTL/RTLPage.js +++ b/src/views/RTL/RTLPage.js @@ -15,744 +15,600 @@ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -import React from "react"; - // Chakra imports import { - Box, - Button, - Flex, - Grid, - Icon, - Progress, - SimpleGrid, - Spacer, - Stack, - Stat, - StatHelpText, - StatLabel, - StatNumber, - Table, - Tbody, - Text, - Th, - Thead, - Tr, -} from "@chakra-ui/react"; - + Box, + Button, + CircularProgress, + CircularProgressLabel, + Flex, + Grid, + Icon, + Progress, + SimpleGrid, + Spacer, + Stack, + Stat, + StatHelpText, + StatLabel, + StatNumber, + Table, + Tbody, + Text, + Th, + Thead, + Tr +} from '@chakra-ui/react'; +import medusa from 'assets/img/cardimgfree.png'; // Custom components -import Card from "components/Card/Card.js"; -import CardBody from "components/Card/CardBody.js"; -import CardHeader from "components/Card/CardHeader.js"; -import BarChart from "components/Charts/BarChart"; -import LineChart from "components/Charts/LineChart"; -import IconBox from "components/Icons/IconBox"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; - +import Card from 'components/Card/Card.js'; +import CardBody from 'components/Card/CardBody.js'; +import CardHeader from 'components/Card/CardHeader.js'; +import BarChart from 'components/Charts/BarChart'; +import LineChart from 'components/Charts/LineChart'; +import IconBox from 'components/Icons/IconBox'; // Custom icons -import { - CartIcon, - DocumentIcon, - GlobeIcon, - RocketIcon, - StatsIcon, - WalletIcon, -} from "components/Icons/Icons.js"; - +import { CartIcon, DocumentIcon, GlobeIcon, RocketIcon, StatsIcon, WalletIcon } from 'components/Icons/Icons.js'; // Tables -import DashboardTableRow from "components/Tables/DashboardTableRow"; -import TimelineRow from "components/Tables/TimelineRow"; - +import DashboardTableRow from 'components/Tables/DashboardTableRow'; +import TimelineRow from 'components/Tables/TimelineRow'; +import React from 'react'; // Styles for the circular bar -import "react-circular-progressbar/dist/styles.css"; -import medusa from "assets/img/cardimgfree.png"; - +import { AiFillCheckCircle } from 'react-icons/ai'; +import { BiHappy } from 'react-icons/bi'; // icons -import { BsArrowLeft } from "react-icons/bs"; -import { - IoCheckmarkDoneCircleSharp, - IoEllipsisHorizontal, -} from "react-icons/io5"; -import { AiFillCheckCircle } from "react-icons/ai"; -import { BiHappy } from "react-icons/bi"; - +import { BsArrowLeft } from 'react-icons/bs'; +import { IoCheckmarkDoneCircleSharp, IoEllipsisHorizontal } from 'react-icons/io5'; // Data import { - barChartDataDashboard, - barChartOptionsDashboard, - lineChartDataDashboard, - lineChartOptionsDashboard, -} from "variables/charts"; -import { dashboardTableData, timelineData } from "variables/general"; + barChartDataDashboard, + barChartOptionsDashboard, + lineChartDataDashboard, + lineChartOptionsDashboard +} from 'variables/charts'; +import { dashboardTableData, timelineData } from 'variables/general'; export default function Dashboard() { - return ( - - - {/* MiniStatistics Card */} - - - - - - Today's Money - - - - $53,000 - - - +55% - - - - - - - - - - {/* MiniStatistics Card */} - - - - - - Today's Users - - - - 2,300 - - - +5% - - - - - - - - - - {/* MiniStatistics Card */} - - - - - - New Clients - - - - +3,020 - - - -14% - - - - - - - - - - - {/* MiniStatistics Card */} - - - - - - Total Sales - - - - $173,000 - - - +8% - - - - - - - - - - - - {/* Welcome Card */} - - - - - - Welcome back - - - Mark Johnson - - - Glad to see you again!
- Ask me anything. - - - - - - - - - - {/* Satisfaction Rate */} - - - - - Satisfaction Rate - - - From all projects - - - - - - - - - - - - - - 0% - - - - 95% - - - Based on likes - - - - 100% - - - - - {/* Referral Tracking */} - - - - - Referral Tracking - - - - - - - - Invited - - - 145 people - - - - - Bonus - - - 1,465 - - - - - = 1024 - ? 200 - : window.innerWidth >= 768 - ? 170 - : 200 - } - isGradient - gradient={{ - angle: 90, - startColor: "rgba(5, 205, 153, 0)", - stopColor: "#05CD99", - }} - emptyColor='transparent'> - - - Safety - - - 9.3 - - - Total Score - - - - - - - - - - {/* Sales Overview */} - - - - - Sales Overview - - - - (+5%) more - {" "} - in 2021 - - - - - - - - {/* Active Users */} - - - - - - - - - Active Users - - - - (+23%) - {" "} - than last week - - - - - - - - - - Users - - - - 32,984 - - - - - - - - - - Clicks - - - - 2.42m - - - - - - - - - - Sales - - - - 2,400$ - - - - - - - - - - Items - - - - 320 - - - - - - - - - - {/* Projects */} - - - - - Projects - - - - - - 30 done - {" "} - this month. - - - - - - - - - - - - - - - {dashboardTableData.map((row, index, arr) => { - return ( - - ); - })} - -
- Companies - - Members - - Budget - - Completion -
- - {/* Orders Overview */} - - - - - Orders overview - - - - - - +30% - {" "} - this month - - - - - - - {timelineData.map((row, index, arr) => { - return ( - - ); - })} - - - - - - ); + return ( + + + {/* MiniStatistics Card */} + + + + + + Today's Money + + + + $53,000 + + + +55% + + + + + + + + + + {/* MiniStatistics Card */} + + + + + + Today's Users + + + + 2,300 + + + +5% + + + + + + + + + + {/* MiniStatistics Card */} + + + + + + New Clients + + + + +3,020 + + + -14% + + + + + + + + + + + {/* MiniStatistics Card */} + + + + + + Total Sales + + + + $173,000 + + + +8% + + + + + + + + + + + + {/* Welcome Card */} + + + + + + Welcome back + + + Mark Johnson + + + Glad to see you again!
+ Ask me anything. + + + + + + + + + + {/* Satisfaction Rate */} + + + + + Satisfaction Rate + + + From all projects + + + + + + + + + + + + + + + + 0% + + + + 95% + + + Based on likes + + + + 100% + + + + + {/* Referral Tracking */} + + + + + Referral Tracking + + + + + + + + Invited + + + 145 people + + + + + Bonus + + + 1,465 + + + + + = 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200} + value={70} + thickness={6} + color='#05CD99' + variant='vision'> + + + + Safety + + + 9.3 + + + Total Score + + + + + + + + + + + {/* Sales Overview */} + + + + + Sales Overview + + + + (+5%) more + {' '} + in 2021 + + + + + + + + {/* Active Users */} + + + + + + + + + Active Users + + + + (+23%) + {' '} + than last week + + + + + + + + + + Users + + + + 32,984 + + + + + + + + + + Clicks + + + + 2.42m + + + + + + + + + + Sales + + + + 2,400$ + + + + + + + + + + Items + + + + 320 + + + + + + + + + + {/* Projects */} + + + + + Projects + + + + + + 30 done + {' '} + this month. + + + + + + + + + + + + + + + {dashboardTableData.map((row, index, arr) => { + return ( + + ); + })} + +
+ Companies + + Members + + Budget + + Completion +
+ + {/* Orders Overview */} + + + + + Orders overview + + + + + + +30% + {' '} + this month + + + + + + + {timelineData.map((row, index, arr) => { + return ( + + ); + })} + + + + + + ); }