├── src ├── App.css ├── assets │ ├── images │ │ ├── SVG.png │ │ ├── Button.png │ │ ├── Link (1).png │ │ ├── Frame (5).png │ │ ├── flag-uk.svg fill.png │ │ ├── iconly-glass-chart.svg.png │ │ ├── iconly-glass-tick.svg.png │ │ ├── iconly-glass-discount.svg.png │ │ ├── Nav → List → Item → Link → SVG.png │ │ └── Nav → List → Item → Link → SVG (1).png │ └── react.svg ├── index.css ├── pages │ ├── Account.jsx │ ├── Crypto.jsx │ ├── ECommerce.css │ ├── ECommerce.jsx │ ├── Analytics.css │ └── Analytics.jsx ├── main.jsx ├── ui │ ├── Ecommerce2.jsx │ ├── Chart2.jsx │ ├── TrafficUI.jsx │ ├── Chart1.jsx │ ├── Ecommerce1.jsx │ └── SalesPIE.jsx ├── App.jsx └── components │ ├── materials │ ├── SalesMap.jsx │ ├── SalesMap.css │ ├── TopSellings.jsx │ └── Table.jsx │ └── layout │ ├── Sidebar.css │ └── Sidebar.jsx ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── eslint.config.js ├── package.json └── public └── vite.svg /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/SVG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/SVG.png -------------------------------------------------------------------------------- /src/assets/images/Button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/Button.png -------------------------------------------------------------------------------- /src/assets/images/Link (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/Link (1).png -------------------------------------------------------------------------------- /src/assets/images/Frame (5).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/Frame (5).png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | text-decoration: none; 6 | font-family: cursive; 7 | } -------------------------------------------------------------------------------- /src/assets/images/flag-uk.svg fill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/flag-uk.svg fill.png -------------------------------------------------------------------------------- /src/assets/images/iconly-glass-chart.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/iconly-glass-chart.svg.png -------------------------------------------------------------------------------- /src/assets/images/iconly-glass-tick.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/iconly-glass-tick.svg.png -------------------------------------------------------------------------------- /src/assets/images/iconly-glass-discount.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/iconly-glass-discount.svg.png -------------------------------------------------------------------------------- /src/assets/images/Nav → List → Item → Link → SVG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/Nav → List → Item → Link → SVG.png -------------------------------------------------------------------------------- /src/assets/images/Nav → List → Item → Link → SVG (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Muhammadsiddiq-code/CRM-WEBSITE-REACT/HEAD/src/assets/images/Nav → List → Item → Link → SVG (1).png -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/pages/Account.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Account = () => { 4 | return ( 5 |
6 |

Account

7 |
8 | ); 9 | } 10 | 11 | export default Account 12 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MuhammadSiddiq + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/ui/Ecommerce2.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { LineChart } from "recharts"; 3 | 4 | const Ecommerce2 = () => { 5 | return ( 6 |
7 | 8 | 16 |
17 | ) 18 | } 19 | 20 | export default Ecommerce2 21 | -------------------------------------------------------------------------------- /src/ui/Chart2.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PieChart } from '@mui/x-charts/PieChart'; 3 | 4 | const data = [ 5 | { label: 'Group B', value: 400, color: 'blue' }, 6 | { label: 'Group A', value: 400, color: '#FFBB28' }, 7 | { label: 'Group C', value: 800, color: 'dodgerblue' }, 8 | // { label: 'Group D', value: 200, color: '#FF8042' }, 9 | ]; 10 | 11 | const settings = { 12 | margin: { right: 5 }, 13 | width: 200, 14 | height: 200, 15 | hideLegend: true, 16 | }; 17 | 18 | export default function Chart2() { 19 | return ( 20 | 24 | ); 25 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. 13 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | 6 | export default [ 7 | { ignores: ['dist'] }, 8 | { 9 | files: ['**/*.{js,jsx}'], 10 | languageOptions: { 11 | ecmaVersion: 2020, 12 | globals: globals.browser, 13 | parserOptions: { 14 | ecmaVersion: 'latest', 15 | ecmaFeatures: { jsx: true }, 16 | sourceType: 'module', 17 | }, 18 | }, 19 | plugins: { 20 | 'react-hooks': reactHooks, 21 | 'react-refresh': reactRefresh, 22 | }, 23 | rules: { 24 | ...js.configs.recommended.rules, 25 | ...reactHooks.configs.recommended.rules, 26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], 27 | 'react-refresh/only-export-components': [ 28 | 'warn', 29 | { allowConstantExport: true }, 30 | ], 31 | }, 32 | }, 33 | ] 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crm-web-site", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@emotion/react": "^11.14.0", 14 | "@emotion/styled": "^11.14.1", 15 | "@mui/material": "^7.2.0", 16 | "@mui/x-charts": "^8.9.0", 17 | "chart.js": "^4.5.0", 18 | "react": "^19.0.0", 19 | "react-chartjs-2": "^5.3.0", 20 | "react-dom": "^19.0.0", 21 | "react-icons": "^5.5.0", 22 | "react-leaflet": "^5.0.0", 23 | "react-router-dom": "^7.7.1", 24 | "recharts": "^3.1.0" 25 | }, 26 | "devDependencies": { 27 | "@eslint/js": "^9.21.0", 28 | "@types/react": "^19.0.10", 29 | "@types/react-dom": "^19.0.4", 30 | "@vitejs/plugin-react": "^4.3.4", 31 | "eslint": "^9.21.0", 32 | "eslint-plugin-react-hooks": "^5.1.0", 33 | "eslint-plugin-react-refresh": "^0.4.19", 34 | "globals": "^15.15.0", 35 | "vite": "^6.2.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/ui/TrafficUI.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box, Typography, LinearProgress } from '@mui/material'; 3 | 4 | const data = [ 5 | { label: 'HTML', value: 75 }, 6 | { label: 'CSS', value: 67 }, 7 | { label: 'JavaScript', value: 55 }, 8 | { label: 'React', value: 60 }, 9 | { label: 'Node.js', value: 63 }, 10 | { label: 'MongoDB', value: 63 }, 11 | { label: 'Git', value: 70 }, 12 | ]; 13 | 14 | const TrafficUI = () => { 15 | return ( 16 | 17 | {data.map((item, index) => ( 18 | 19 | 20 | {item.label} 21 | 22 | 34 | 35 | ))} 36 | 37 | ); 38 | }; 39 | 40 | export default TrafficUI; 41 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | // App.js 2 | import React from "react"; 3 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 4 | import Sidebar from "./components/layout/Sidebar"; 5 | // import Overview from "./pages/Overview"; 6 | import Analytics from "./pages/Analytics"; 7 | import Ecommerce from "./pages/Ecommerce"; 8 | import Crypto from "./pages/Crypto"; 9 | import Account from "./pages/Account"; 10 | import Chart1 from "./ui/Chart1"; 11 | import SalesPIE from "./ui/SalesPIE"; 12 | // qolgan sahifalar... 13 | 14 | const App = () => { 15 | return ( 16 | 17 |
18 | 19 |
20 | 21 | {/* } /> */} 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | {/* qolgan route'lar ham shu tarzda */} 27 | 28 |
29 |
30 | 31 | 32 | ); 33 | }; 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /src/pages/Crypto.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import img1 from "../assets/images/flag-uk.svg fill.png" 3 | import img2 from "../assets/images/Button.png"; 4 | import { CiSearch } from 'react-icons/ci'; 5 | import { FaRegBell } from 'react-icons/fa'; 6 | import { IoPeopleOutline } from 'react-icons/io5'; 7 | import { BsEnvelopePlusFill } from 'react-icons/bs'; 8 | import Ecommerce2 from "../ui/Ecommerce2" 9 | 10 | const Crypto = () => { 11 | return ( 12 |
13 |
14 |
15 |

16 | 17 |

18 |
19 |
20 | 21 |

22 | 23 |

24 |

25 | 26 |

27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 |

Crypto

35 |
36 |
37 | 38 |
39 |
40 | 41 | 42 |
43 | ); 44 | } 45 | 46 | export default Crypto 47 | -------------------------------------------------------------------------------- /src/ui/Chart1.jsx: -------------------------------------------------------------------------------- 1 | // components/MiniChart.js 2 | import React from "react"; 3 | import { 4 | // LineChart, 5 | // Line, 6 | ResponsiveContainer, 7 | Area, 8 | AreaChart, 9 | Tooltip, 10 | // defs, 11 | } from "recharts"; 12 | 13 | const data = [ 14 | { value: 20 }, 15 | { value: 40 }, 16 | { value: 25 }, 17 | { value: 50 }, 18 | { value: 45 }, 19 | { value: 60 }, 20 | { value: 30 }, 21 | { value: 75 }, 22 | { value: 10 }, 23 | ]; 24 | 25 | const Chart1 = () => { 26 | return ( 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 45 | 46 | 47 |
48 | ); 49 | }; 50 | 51 | export default Chart1; 52 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/materials/SalesMap.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './SalesMap.css'; 3 | 4 | const SalesMap = () => { 5 | const salesData = { 6 | total: '$152K', 7 | countries: [ 8 | { name: 'United States', percentage: 60, color: '#3498db' }, 9 | { name: 'Spain', percentage: 20, color: '#2ecc71' }, 10 | { name: 'United Kingdom', percentage: 10, color: '#f1c40f' }, 11 | { name: 'Germany', percentage: 5, color: '#e74c3c' }, 12 | { name: 'Canada', percentage: 5, color: '#9b59b6' } 13 | ] 14 | }; 15 | 16 | return ( 17 |
18 |

Sales by Country

19 | 20 |
21 | Total 22 | {salesData.total} 23 |
24 | 25 |
26 | {salesData.countries.map((country, index) => ( 27 |
28 | {country.name} 29 | 30 |
31 |
38 |
39 | 40 | {country.percentage}% 41 |
42 | ))} 43 |
44 |
45 | ); 46 | }; 47 | 48 | export default SalesMap; -------------------------------------------------------------------------------- /src/pages/ECommerce.css: -------------------------------------------------------------------------------- 1 | header { 2 | width: 100%; 3 | height: 64px; 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 0 25px; 8 | } 9 | 10 | header .card { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | gap: 25px; 15 | } 16 | 17 | header .card img { 18 | width: 40px; 19 | } 20 | 21 | .cards { 22 | width: 100%; 23 | display: flex; 24 | align-items: center; 25 | justify-content: space-between; 26 | padding: 0 25px; 27 | margin-bottom: 50px; 28 | } 29 | 30 | 31 | .cards button { 32 | padding: 10px 25px; 33 | background-color: rgba(99, 102, 241, 1); 34 | border-radius: 12px; 35 | border: none; 36 | font-weight: 600; 37 | font-size: 14px; 38 | color: rgba(255, 255, 255, 1); 39 | cursor: pointer 40 | } 41 | 42 | .cards button:hover { 43 | background-color: rgb(70, 73, 234); 44 | transition: .3s; 45 | } 46 | 47 | /* top */ 48 | 49 | .ban{ 50 | display: flex; 51 | align-items: center; 52 | gap: 15px; 53 | margin-bottom: 25px; 54 | } 55 | .as{ 56 | width: 70%; 57 | } 58 | 59 | .as .top .card { 60 | width: 100%; 61 | display: flex; 62 | align-items: center; 63 | justify-content: space-between; 64 | gap: 25px; 65 | padding: 15px 10px; 66 | margin-bottom: 50px; 67 | box-shadow: 0 0 25px -15px black; 68 | border-radius: 10px; 69 | margin-top: 25px; 70 | } 71 | 72 | .as .top .card .icon { 73 | width: 250px; 74 | padding: 15px; 75 | display: flex; 76 | align-items: center; 77 | justify-content: center; 78 | gap: 25px; 79 | background-color: rgba(255, 250, 235, 1); 80 | } -------------------------------------------------------------------------------- /src/components/layout/Sidebar.css: -------------------------------------------------------------------------------- 1 | .Main{ 2 | width: 300px; 3 | height: 1500px; 4 | background-color: rgb(0, 19, 70) 5 | } 6 | 7 | 8 | .topHeader{ 9 | width: 100%; 10 | height: 100px; 11 | display: flex; 12 | align-items: center; 13 | justify-content: space-between; 14 | padding: 25px; 15 | color: white; 16 | } 17 | 18 | .topHeader img{ 19 | width: 50px; 20 | 21 | } 22 | 23 | .top{ 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | gap: 20px; 28 | } 29 | 30 | .topHeader h3{ 31 | font-size: 25px; 32 | font-weight: 900; 33 | color: rgba(157, 164, 174, 1); 34 | } 35 | 36 | /* home */ 37 | 38 | .home{ 39 | width: 100%; 40 | height: auto; 41 | color: rgba(157, 164, 174, 1); 42 | font-family: cursive; 43 | display: flex; 44 | flex-direction: column; 45 | gap: 25px; 46 | } 47 | 48 | .home .div{ 49 | display: flex; 50 | align-items: center; 51 | padding: 0 25px; 52 | gap: 10px; 53 | color: rgba(157, 164, 174, 1); 54 | 55 | } 56 | 57 | 58 | .home .div img{ 59 | width: 30px; 60 | } 61 | 62 | 63 | .home .div h3{ 64 | font-size: 30px; 65 | } 66 | 67 | 68 | .h1{ 69 | color: rgba(157, 164, 174, 1); 70 | font-weight: 700; 71 | padding: 20px 25px; 72 | font-family: cursive; 73 | } 74 | 75 | 76 | .side{ 77 | width: 100%; 78 | height: auto; 79 | display: flex; 80 | 81 | align-items: center; 82 | justify-content: space-between; 83 | padding: 10px 25px; 84 | } 85 | 86 | .side h3{ 87 | font-size: 30px; 88 | color: rgba(157, 164, 174, 1); 89 | } 90 | 91 | .side p{ 92 | color: rgba(157, 164, 174, 1); 93 | font-family: cursive; 94 | } 95 | 96 | .side h2{ 97 | color: rgba(157, 164, 174, 1); 98 | 99 | } 100 | 101 | .dt{ 102 | padding: 10px 70px; 103 | color: rgba(157, 164, 174, 1); 104 | font-family: cursive; 105 | } 106 | 107 | .dt p{ 108 | padding: 7px 0; 109 | } -------------------------------------------------------------------------------- /src/ui/Ecommerce1.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Box, 4 | Typography, 5 | Paper, 6 | Divider, 7 | Table, 8 | TableBody, 9 | TableCell, 10 | TableContainer, 11 | TableHead, 12 | TableRow, 13 | useTheme 14 | } from '@mui/material'; 15 | 16 | const Ecommerce = () => { 17 | const theme = useTheme(); 18 | 19 | const data = [ 20 | { channel: 'Strategy', value: '$14,859.00' }, 21 | { channel: 'Outsourcing', value: '$35,690.00' }, 22 | { channel: 'Marketing', value: '$45,120.00' }, 23 | { channel: 'Other', value: '$25,486.00' } 24 | ]; 25 | 26 | const total = data.reduce((sum, item) => { 27 | return sum + parseFloat(item.value.replace(/[^0-9.-]+/g,"")); 28 | }, 0).toLocaleString('en-US', { style: 'currency', currency: 'USD' }); 29 | 30 | return ( 31 | 32 | 33 | Cost Breakdown 34 | Based on selected period 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | TOP CHANNELS 44 | VALUE 45 | 46 | 47 | 48 | {data.map((row, index) => ( 49 | 50 | {row.channel} 51 | {row.value} 52 | 53 | ))} 54 | 55 | TOTAL 56 | {total} 57 | 58 | 59 |
60 | 61 | 62 | ); 63 | }; 64 | 65 | export default Ecommerce; -------------------------------------------------------------------------------- /src/components/materials/SalesMap.css: -------------------------------------------------------------------------------- 1 | .sales-container { 2 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 3 | max-width: 500px; 4 | margin: 20px auto; 5 | padding: 25px; 6 | background-color: #ffffff; 7 | border-radius: 12px; 8 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 9 | } 10 | 11 | .sales-title { 12 | color: #2c3e50; 13 | text-align: center; 14 | margin-bottom: 25px; 15 | font-size: 22px; 16 | font-weight: 600; 17 | } 18 | 19 | .total-sales-box { 20 | text-align: center; 21 | margin-bottom: 30px; 22 | padding: 15px; 23 | background-color: #f8f9fa; 24 | border-radius: 8px; 25 | } 26 | 27 | .total-label { 28 | display: block; 29 | font-size: 16px; 30 | color: #7f8c8d; 31 | margin-bottom: 5px; 32 | } 33 | 34 | .total-amount { 35 | font-size: 28px; 36 | font-weight: 700; 37 | color: #2c3e50; 38 | } 39 | 40 | .countries-list { 41 | display: flex; 42 | flex-direction: column; 43 | gap: 18px; 44 | } 45 | 46 | .country-item { 47 | display: flex; 48 | align-items: center; 49 | gap: 12px; 50 | } 51 | 52 | .country-name { 53 | width: 140px; 54 | font-size: 15px; 55 | color: #34495e; 56 | font-weight: 500; 57 | } 58 | 59 | .progress-container { 60 | flex-grow: 1; 61 | height: 22px; 62 | background-color: #ecf0f1; 63 | border-radius: 11px; 64 | overflow: hidden; 65 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); 66 | } 67 | 68 | .progress-bar { 69 | height: 100%; 70 | border-radius: 11px; 71 | transition: width 0.6s ease; 72 | position: relative; 73 | } 74 | 75 | .progress-bar::after { 76 | content: ''; 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | right: 0; 81 | bottom: 0; 82 | background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); 83 | } 84 | 85 | .percentage-value { 86 | width: 45px; 87 | text-align: right; 88 | font-size: 15px; 89 | color: #7f8c8d; 90 | font-weight: 500; 91 | } 92 | 93 | 94 | 95 | .progress-bar { 96 | /* ... oldingi stil lar ... */ 97 | animation: progressAnimation 1.5s ease-in-out forwards; 98 | } 99 | 100 | @keyframes progressAnimation { 101 | from { 102 | width: 0; 103 | } 104 | 105 | to { 106 | width: var(--target-width); 107 | } 108 | } -------------------------------------------------------------------------------- /src/components/materials/TopSellings.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const TopSellings = () => { 4 | const products = [ 5 | { 6 | category: 'Healthcare', 7 | name: 'Erbology in Accessories', 8 | sales: '13,153 in sales', 9 | rank: '#1' 10 | }, 11 | { 12 | category: 'Makeup Lancome', 13 | name: 'Rouge in Accessories', 14 | sales: '10,300 in sales', 15 | rank: '#2' 16 | }, 17 | { 18 | category: 'Lounge Puff', 19 | name: 'Fabric Slipper in Accessories', 20 | sales: '5,300 in sales', 21 | rank: '#3' 22 | }, 23 | { 24 | category: 'Skincare', 25 | name: 'Necessaire in Accessories', 26 | sales: '1,203 in sales', 27 | rank: '#4' 28 | }, 29 | { 30 | category: 'Skincare Soja', 31 | name: 'CO in Accessories', 32 | sales: '254 in sales', 33 | rank: '#5' 34 | } 35 | ]; 36 | 37 | return ( 38 |
39 |

Top Selling Products

40 | 41 |
42 | {products.map((product, index) => ( 43 |
44 |
45 |
{product.category}
46 |
{product.name}
47 |
{product.sales}
48 |
49 |
{product.rank}
50 |
51 | ))} 52 |
53 | 54 |
See All →
55 |
56 | ); 57 | }; 58 | 59 | const styles = { 60 | container: { 61 | fontFamily: 'Arial, sans-serif', 62 | maxWidth: '500px', 63 | margin: '0 auto', 64 | padding: '20px', 65 | backgroundColor: '#fff', 66 | borderRadius: '10px', 67 | boxShadow: '0 2px 10px rgba(0,0,0,0.1)' 68 | }, 69 | title: { 70 | fontSize: '20px', 71 | fontWeight: '600', 72 | marginBottom: '20px', 73 | color: '#333' 74 | }, 75 | productsContainer: { 76 | display: 'flex', 77 | flexDirection: 'column', 78 | gap: '15px' 79 | }, 80 | productCard: { 81 | display: 'flex', 82 | justifyContent: 'space-between', 83 | alignItems: 'center', 84 | padding: '15px', 85 | backgroundColor: '#f9f9f9', 86 | borderRadius: '8px', 87 | transition: 'all 0.3s ease', 88 | ':hover': { 89 | backgroundColor: '#f0f0f0', 90 | transform: 'translateY(-2px)' 91 | } 92 | }, 93 | productInfo: { 94 | flex: 1 95 | }, 96 | productCategory: { 97 | fontSize: '14px', 98 | color: '#666', 99 | marginBottom: '5px' 100 | }, 101 | productName: { 102 | fontSize: '16px', 103 | fontWeight: '500', 104 | marginBottom: '5px', 105 | color: '#333' 106 | }, 107 | productSales: { 108 | fontSize: '14px', 109 | color: '#888' 110 | }, 111 | productRank: { 112 | fontSize: '18px', 113 | fontWeight: 'bold', 114 | color: '#4CAF50', 115 | marginLeft: '15px' 116 | }, 117 | seeAll: { 118 | marginTop: '20px', 119 | textAlign: 'left', 120 | color: '#4CAF50', 121 | fontWeight: '500', 122 | cursor: 'pointer', 123 | ':hover': { 124 | textDecoration: 'underline' 125 | } 126 | } 127 | }; 128 | 129 | export default TopSellings; -------------------------------------------------------------------------------- /src/pages/ECommerce.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import img1 from "../assets/images/flag-uk.svg fill.png" 3 | import img2 from "../assets/images/Button.png"; 4 | import "./ECommerce.css" 5 | import { CiSearch } from 'react-icons/ci'; 6 | import { FaRegBell } from 'react-icons/fa'; 7 | import { IoPeopleOutline } from 'react-icons/io5'; 8 | import { TfiReload } from 'react-icons/tfi'; 9 | import img3 from "../assets//images/iconly-glass-chart.svg.png" 10 | import img4 from "../assets/images/iconly-glass-discount.svg.png" 11 | import img5 from "../assets/images/iconly-glass-tick.svg.png" 12 | import SalesPIE from '../ui/SalesPIE'; 13 | import TopSellings from "../components/materials/TopSellings" 14 | import SalesMap from '../components/materials/SalesMap'; 15 | import { ThemeProvider } from '@emotion/react'; 16 | import Ecommerce from '../ui/Ecommerce1'; 17 | import { createTheme } from '@mui/material'; 18 | 19 | const ECommerce = () => { 20 | const theme = createTheme({ 21 | components: { 22 | MuiTableCell: { 23 | styleOverrides: { 24 | head: { 25 | fontWeight: 'bold', 26 | backgroundColor: '#f5f5f5' 27 | }, 28 | }, 29 | }, 30 | }, 31 | }); 32 | return ( 33 |
34 |
35 |
36 |

37 | 38 |

39 |
40 |
41 | 42 |

43 | 44 |

45 |

46 | 47 |

48 | 49 |
50 |
51 | 52 | 53 |
54 |
55 |

E-Commerce

56 |
57 |
58 | 59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | Today's Stats 67 |
68 | 69 |
70 | 71 |
72 |
73 |
74 |
75 | 76 |
77 |
78 |

Sales

79 |

$152k

80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 |

Cost

89 |

$99.7k

90 |
91 |
92 | 93 | 94 |
95 |
96 | 97 |
98 |
99 |

Profit

100 |

$32.1k

101 |
102 |
103 | 104 | 105 |
106 |
107 | 108 |
109 | 110 | 111 |
112 |
113 | 114 |
115 | 116 |
117 |
118 | 119 | 120 |
121 |
122 | 123 |
124 |
125 | 126 | 127 | 128 |
129 |
130 |
131 | ); 132 | } 133 | 134 | export default ECommerce 135 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/Analytics.css: -------------------------------------------------------------------------------- 1 | header{ 2 | width: 100%; 3 | height: 64px; 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 0 25px; 8 | } 9 | 10 | header .card{ 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | gap: 25px; 15 | } 16 | header .card img{ 17 | width: 40px; 18 | } 19 | 20 | .cards { 21 | width: 100%; 22 | display: flex; 23 | align-items: center; 24 | justify-content: space-between; 25 | padding: 0 25px; 26 | margin-bottom: 50px; 27 | } 28 | 29 | 30 | .cards button{ 31 | padding: 10px 25px; 32 | background-color: rgba(99, 102, 241, 1); 33 | border-radius: 12px; 34 | border: none; 35 | font-weight: 600; 36 | font-size: 14px; 37 | color: rgba(255, 255, 255, 1); 38 | cursor: pointer 39 | } 40 | 41 | .cards button:hover{ 42 | background-color: rgb(70, 73, 234); 43 | transition: .3s; 44 | } 45 | 46 | /* boxs */ 47 | 48 | .boxs{ 49 | width: 100%; 50 | display: flex; 51 | align-items: center; 52 | justify-content: space-between; 53 | padding: 0 25px; 54 | } 55 | 56 | .boxs .box{ 57 | width: 350px; 58 | height: 200px; 59 | background-color: rgba(255, 255, 255, 1); 60 | border-radius: 12px; 61 | padding: 30px 40px; 62 | box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); 63 | margin-bottom: 30px; 64 | 65 | 66 | } 67 | 68 | .boxs .box .char{ 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | gap: 10px; 73 | margin-bottom: 60px; 74 | 75 | } 76 | 77 | .chs{ 78 | width: 100%; 79 | display: flex; 80 | align-items: center; 81 | margin-left: -20px; 82 | gap: 10px; 83 | } 84 | 85 | .chs button{ 86 | padding: 8px 15px; 87 | background-color: rgba(17, 25, 39, 0.04); 88 | border: none; 89 | border-radius: 12px; 90 | display: flex; 91 | align-items: center; 92 | justify-content: center; 93 | gap: 8px; 94 | } 95 | 96 | 97 | 98 | 99 | /* traffic */ 100 | 101 | .traffic{ 102 | width: 100%; 103 | background-color: rgba(255, 255, 255, 1); 104 | border-radius: 12px; 105 | padding: 30px 40px; 106 | box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); 107 | margin-bottom: 30px; 108 | display: flex; 109 | align-items: center; 110 | justify-content: space-between; 111 | padding: 10px 25px; 112 | } 113 | 114 | .traffic h1{ 115 | margin-top: 25px; 116 | margin-bottom: 30px; 117 | } 118 | 119 | /* 120 | 121 | .traffic .card .visit .card{ 122 | width: 400px; 123 | display: flex; 124 | align-items: center; 125 | justify-content: space-between; 126 | padding: 10px; 127 | } 128 | 129 | 130 | 131 | 132 | .coun .card{ 133 | width: 100%; 134 | height: 35px; 135 | display: flex; 136 | align-items: center; 137 | justify-content: center; 138 | padding: 10px; 139 | gap: 10px; 140 | } 141 | 142 | .coun{ 143 | width: 100%; 144 | display: flex; 145 | align-items: center; 146 | justify-content: space-between; 147 | background-color: rgba(248, 249, 250, 1); 148 | } 149 | 150 | 151 | .count .card { 152 | width: 100%; 153 | height: 35px; 154 | display: flex; 155 | align-items: center; 156 | justify-content: center; 157 | padding: 10px; 158 | gap: 10px; 159 | } 160 | 161 | .count { 162 | width: 100%; 163 | display: flex; 164 | align-items: center; 165 | justify-content: space-between; 166 | } */ 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | /* Table */ 175 | 176 | 177 | 178 | 179 | .const{ 180 | width: 100%; 181 | } 182 | .table1 { 183 | width: 100%; 184 | border-collapse: collapse; 185 | border: 1px solid #ddd; 186 | /* border-radius: 10px; */ 187 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 188 | text-align: left; 189 | padding: 20px; 190 | } 191 | 192 | .table1 th, td { 193 | padding: 15px; 194 | border: 1px solid #ddd; 195 | border-radius: 5px; 196 | text-align: left; 197 | } 198 | 199 | 200 | .h3{ 201 | width: 100%; 202 | display: flex; 203 | align-items: center; 204 | justify-content: space-between; 205 | margin-bottom: 25px; 206 | color: rgba(108, 115, 127, 1); 207 | } 208 | 209 | 210 | .char{ 211 | width: 100%; 212 | display: flex; 213 | align-items: center; 214 | justify-content: space-between; 215 | padding: 0 25px; 216 | gap: 225px; 217 | } -------------------------------------------------------------------------------- /src/ui/SalesPIE.jsx: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | 3 | // const SalesPIE = () => { 4 | // // Sample data - replace with your actual data 5 | // const salesData = [ 6 | // { date: '20 Jan', revenue: 120 }, 7 | // { date: '21 Jan', revenue: 180 }, 8 | // { date: '22 Jan', revenue: 150 }, 9 | // { date: '23 Jan', revenue: 210 }, 10 | // { date: '24 Jan', revenue: 90 }, 11 | // { date: '25 Jan', revenue: 160 }, 12 | // { date: '26 Jan', revenue: 200 }, 13 | // { date: '27 Jan', revenue: 140 }, 14 | // { date: '28 Jan', revenue: 170 }, 15 | // { date: '29 Jan', revenue: 190 }, 16 | // { date: '30 Jan', revenue: 130 }, 17 | // { date: '31 Jan', revenue: 220 }, 18 | // ]; 19 | 20 | // // Find the maximum revenue for scaling 21 | // const maxRevenue = Math.max(...salesData.map(item => item.revenue)); 22 | 23 | // // Container styles 24 | // const containerStyle = { 25 | // fontFamily: 'Arial, sans-serif', 26 | // maxWidth: '800px', 27 | // margin: '0 auto', 28 | // padding: '20px', 29 | // }; 30 | 31 | // // Title styles 32 | // const titleStyle = { 33 | // textAlign: 'center', 34 | // marginBottom: '30px', 35 | // color: '#333', 36 | // }; 37 | 38 | // // Chart styles 39 | // const chartStyle = { 40 | // display: 'flex', 41 | // justifyContent: 'space-between', 42 | // alignItems: 'flex-end', 43 | // height: '300px', 44 | // borderBottom: '1px solid #ccc', 45 | // paddingBottom: '20px', 46 | // }; 47 | 48 | // // Column container styles 49 | // const columnContainerStyle = { 50 | // display: 'flex', 51 | // flexDirection: 'column', 52 | // alignItems: 'center', 53 | // width: '30px', 54 | // }; 55 | 56 | // // Column styles 57 | // const columnStyle = { 58 | // width: '20px', 59 | // backgroundColor: '#4CAF50', 60 | // borderRadius: '3px 3px 0 0', 61 | // transition: 'height 0.3s ease', 62 | // marginBottom: '5px', 63 | // }; 64 | 65 | // // Date label styles 66 | // const dateStyle = { 67 | // fontSize: '12px', 68 | // color: '#666', 69 | // textAlign: 'center', 70 | // }; 71 | 72 | // return ( 73 | //
74 | //

Sales Revenue

75 | 76 | //
77 | // {salesData.map((item, index) => ( 78 | //
79 | //
86 | //
{item.date}
87 | //
88 | // ))} 89 | //
90 | //
91 | // ); 92 | // }; 93 | 94 | // export default SalesPIE; 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | import React from 'react'; 108 | import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip } from 'chart.js'; 109 | import { Bar } from 'react-chartjs-2'; 110 | 111 | ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip); 112 | 113 | const SalePIE = () => { 114 | // Ma'lumotlar 115 | const data = { 116 | labels: ['20 Jan', '21 Jan', '22 Jan', '23 Jan', '24 Jan', '25 Jan', '26 Jan', '27 Jan', '28 Jan', '29 Jan', '30 Jan', '31 Jan'], 117 | datasets: [ 118 | { 119 | label: 'Sales Revenue ($)', 120 | data: [120, 180, 150, 210, 90, 160, 200, 140, 170, 190, 130, 220], 121 | backgroundColor: 'rgba(75, 192, 192, 0.6)', 122 | borderColor: 'rgba(75, 192, 192, 1)', 123 | borderWidth: 1, 124 | }, 125 | ], 126 | }; 127 | 128 | // Chart sozlamalari 129 | const options = { 130 | responsive: true, 131 | plugins: { 132 | title: { 133 | display: true, 134 | text: 'Sales Revenue', 135 | font: { 136 | size: 18, 137 | }, 138 | }, 139 | tooltip: { 140 | callbacks: { 141 | label: function(context) { 142 | return `$${context.raw}`; 143 | } 144 | } 145 | } 146 | }, 147 | scales: { 148 | y: { 149 | beginAtZero: true, 150 | ticks: { 151 | callback: function(value) { 152 | return `$${value}`; 153 | } 154 | } 155 | } 156 | } 157 | }; 158 | 159 | return ( 160 |
161 | 162 |
163 | ); 164 | }; 165 | 166 | export default SalePIE; -------------------------------------------------------------------------------- /src/pages/Analytics.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "./Analytics.css"; 3 | import { CiSearch } from 'react-icons/ci'; 4 | import img1 from "../assets/images/flag-uk.svg fill.png" 5 | import img2 from "../assets/images/Button.png"; 6 | import { FaArrowRight, FaRegBell } from 'react-icons/fa'; 7 | import { IoPeopleOutline } from 'react-icons/io5'; 8 | import Chart1 from '../ui/Chart1'; 9 | import TrafficUI from '../ui/TrafficUI'; 10 | import { CgDanger } from 'react-icons/cg'; 11 | import Table from "../components/materials/Table" 12 | import { BsSend } from 'react-icons/bs'; 13 | import Chart2 from '../ui/Chart2'; 14 | 15 | const Analytics = () => { 16 | return ( 17 |
18 |
19 |
20 |

21 | 22 |

23 |
24 |
25 | 26 |

27 | 28 |

29 |

30 | 31 |

32 | 33 |
34 |
35 | 36 |
37 |
38 |

Analytics

39 |
40 |
41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 |
58 |
    59 |
  • Impressions
    • 60 |
  • 36,6K
    • 61 |
62 | 63 | 64 | 65 |
66 | 67 |
68 | 69 |

See sources

70 |
71 |
72 | 73 | 74 | 75 | 76 |
77 |
78 |
    79 |
  • Engagements
    • 80 |
  • 19K
    • 81 |
82 | 83 | 84 | 85 |
86 | 87 |
88 | 89 |

See traffic

90 |
91 |
92 | 93 | 94 | 95 |
96 |
97 |
    98 |
  • Spent
    • 99 |
  • $41.2K
    • 100 |
101 | 102 | 103 | 104 |
105 | 106 |
107 | 108 | 109 |
110 |
111 | 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |
121 |
122 |

Traffic Sources

123 | 124 |
125 |
126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | {/* Most Visited Pages */} 137 | 138 | 139 | 140 | 141 |
142 |
143 |

Most Visited Pages ----------------------

144 |
145 | 146 |
147 | 148 | 149 | 150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 |
Page NameVisitorsUnique page visitsBounce rate
/95,8478,58416%
/auth/login7,5006485%
/dashboard85,4065682%
/blog/top-5-react-frameworks75,05012,32212%
/blog/understand-programming-principles68,00311,64510%
/blog/design-patterns49,51010,2598%
207 | 208 | 209 | 210 |
211 |
212 | 213 |
214 | 215 | 216 | 217 | 218 |
219 | ); 220 | } 221 | 222 | export default Analytics 223 | -------------------------------------------------------------------------------- /src/components/materials/Table.jsx: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import { CgDanger } from 'react-icons/cg'; 3 | 4 | // const Table = () => { 5 | // const data = [ 6 | // { country: 'United States', value: '31,200', seo: '40%' }, 7 | // { country: 'United Kingdom', value: '12,700', seo: '47%' }, 8 | // { country: 'Russia', value: '10,360', seo: '65%' }, 9 | // { country: 'Canada', value: '5,749', seo: '23%' }, 10 | // { country: 'Germany', value: '2,932', seo: '4%' }, 11 | // { country: 'Spain', value: '200', seo: '56%' }, 12 | // ]; 13 | 14 | // return ( 15 | //
16 | //

Visits by Country

17 | 18 | // 19 | // 20 | // 21 | // 22 | // 23 | // 24 | // 25 | // 26 | // 27 | // {data.map((row, index) => ( 28 | // 29 | // 30 | // 31 | // 32 | // 33 | // ))} 34 | // 35 | //
COUNTRYVALUESEO
{row.country}{row.value}{row.seo}
36 | 37 | //
38 | // 39 | // See more → 40 | // 41 | //
42 | //
43 | // ); 44 | // }; 45 | 46 | // export default Table; 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | import React from 'react'; 69 | import { CgDanger } from 'react-icons/cg'; 70 | 71 | const Table = () => { 72 | const data = [ 73 | { country: 'United States', value: '31,200', seo: '40%' }, 74 | { country: 'United Kingdom', value: '12,700', seo: '47%' }, 75 | { country: 'Russia', value: '10,360', seo: '65%' }, 76 | { country: 'Canada', value: '5,749', seo: '23%' }, 77 | { country: 'Germany', value: '2,932', seo: '4%' }, 78 | { country: 'Spain', value: '200', seo: '56%' }, 79 | ]; 80 | 81 | return ( 82 |
91 |

99 | Visits by Country 100 | e.currentTarget.style.transform = 'scale(1.1)'} 107 | onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} 108 | title="Visits information by country" 109 | /> 110 |

111 |

117 | Number of visits and SEO percentage by country 118 |

119 | 120 | 126 | 127 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | {data.map((row, index) => ( 139 | 144 | 145 | 146 | 153 | 154 | ))} 155 | 156 |
COUNTRYVALUESEO
{row.country}{row.value} 50 ? '#2ecc71' : '#e74c3c', 149 | fontWeight: parseInt(row.seo) > 50 ? '600' : 'normal' 150 | }}> 151 | {row.seo} 152 |
157 | 158 |
163 | 174 | See more 175 | → 176 | 177 |
178 |
179 | ); 180 | }; 181 | 182 | export default Table; -------------------------------------------------------------------------------- /src/components/layout/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Sidebar.css"; 3 | import { Link } from "react-router-dom"; 4 | 5 | import topHeader from "../../assets/images/Link (1).png"; 6 | // import img1 from "../../assets/images/Nav → List → Item → Link → SVG.png" 7 | // import img2 from "../../assets/images/Frame (5).png" 8 | // import img3 from "../../assets/images/Nav → List → Item → Link → SVG (1).png" 9 | // import img4 from "../../assets/images/SVG.png" 10 | // import img5 from "../../assets/images/Nav → List → Item → Link → SVG.png"; 11 | import { FaAngleRight, FaBitcoin, FaBoxOpen, FaClipboardCheck, FaHome, FaServer, FaTruck, FaUserGraduate } from "react-icons/fa"; 12 | import { SiGoogleanalytics } from "react-icons/si"; 13 | import { TbDeviceAnalytics } from "react-icons/tb"; 14 | import { RiAccountPinBoxFill } from "react-icons/ri"; 15 | import { MdOutlineKeyboardArrowRight, MdOutlineShoppingCart } from "react-icons/md"; 16 | import { IoShieldCheckmarkSharp } from "react-icons/io5"; 17 | import { FiMail, FiMessageSquare, FiShare2, FiUpload } from "react-icons/fi"; 18 | import { HiOutlineDocumentText } from "react-icons/hi"; 19 | 20 | const Sidebar = () => { 21 | return ( 22 |
23 |
24 |
25 | 26 | 30 |
31 |

32 | 33 |

34 |
35 | 36 |
37 |
38 |

39 | 40 |

41 |

Overview

42 |
43 | 44 | 45 |

46 | 47 |

48 |

Analytics

49 | 50 | 51 | 52 |

53 | 54 |

55 |

E-Commerce

56 | 57 | 58 | 59 |

60 | {" "} 61 | 62 |

63 |

Crypto

64 | 65 | 66 | 67 |

68 | {" "} 69 | 70 |

71 |

Account

72 | 73 |
74 | 75 |
76 |

Concepts

77 |
78 | 79 |
80 |
81 |
82 |

83 | 84 |

85 | 88 |
89 |

90 | 91 |

92 |
93 | 94 |
95 |
96 |

97 | 98 |

99 | 102 |
103 |

104 | 105 |

106 |
107 | 108 |
109 |
110 |

111 | {" "} 112 |

113 | 116 |
117 |

118 | 119 |

120 |
121 | 122 |
123 |
124 |

125 | 126 |

127 | 130 |
131 |

132 | 133 |

134 |
135 | 136 |
137 |
138 |

139 | 140 |

141 | 144 |
145 |

146 | 147 |

148 |
149 | 150 |
151 |
152 |

153 | 154 |

155 | 158 |
159 |

160 | 161 |

162 |
163 |
164 | 165 |
166 |

Dashboard

167 |

Course

168 |
169 | 170 |
171 |
172 |

173 | 174 |

175 | 178 |
179 |

180 | 181 |

182 |
183 | 184 |
185 |
186 |

187 | 188 |

189 | 192 |
193 |

194 | 195 |

196 |
197 | 198 |
199 |
200 |

201 | 202 |

203 | 206 |
207 |

208 | 209 |

210 |
211 | 212 |
213 |
214 |

215 | 216 |

217 | 220 |
221 |
222 | 223 |
224 |
225 |

226 | 227 |

228 | 231 |
232 |
233 | 234 |
235 |
236 |

237 | 238 |

239 | 242 |
243 |
244 | 245 |
246 |
247 |

248 | 249 |

250 | 253 |
254 |
255 |
256 | ); 257 | }; 258 | 259 | export default Sidebar; 260 | --------------------------------------------------------------------------------